feat: introduce centralized background configuration and refactor components to use a standardized background prop.

ciro-maciel · ciro-maciel · commit 04f59c180c56 · 2026-03-01T02:47:07.000-03:00
diff --git a/src/components/CTABanner.jsx b/src/components/CTABanner.jsx
@@ -6,9 +6,15 @@ import { CTAButton } from "../primitives/CTAButton.jsx";
  * CTABanner - A large CTA section with a highlighted box.
  * (Previously: SecondaryCTA)
  */
-export function CTABanner({ id, title, description, cta, bg = "gray.0" }) {
+export function CTABanner({
+  id,
+  title,
+  description,
+  cta,
+  background = "gray.0",
+}) {
   return (
-    <Layout id={id} bg={bg} ta="center">
+    <Layout id={id} background={background} ta="center">
       <Paper
         p={{ base: "xl", sm: 80 }}
         bg="white"
diff --git a/src/components/Comparison.jsx b/src/components/Comparison.jsx
@@ -18,9 +18,16 @@ import { CTAButton } from "../primitives/CTAButton.jsx";
 /**
  * Comparison - Generic component for comparing a "Traditional Way" vs "Your Way"
  */
-export function Comparison({ id, subtitle, title, traditionalCol, newCol }) {
+export function Comparison({
+  id,
+  subtitle,
+  title,
+  traditionalCol,
+  newCol,
+  background = "white",
+}) {
   return (
-    <Layout id={id} subtitle={subtitle} title={title} bg="white">
+    <Layout id={id} subtitle={subtitle} title={title} background={background}>
       <Paper
         radius="0"
         bd="1px solid var(--mantine-color-gray-2)"
diff --git a/src/components/FAQ.jsx b/src/components/FAQ.jsx
@@ -13,7 +13,14 @@ import { CTAButton } from "../primitives/CTAButton.jsx";
 /**
  * FAQ - Generic component for Frequently Asked Questions
  */
-export function FAQ({ id, subtitle, title, questions = [], contactCard }) {
+export function FAQ({
+  id,
+  subtitle,
+  title,
+  questions = [],
+  contactCard,
+  background = "white",
+}) {
   const accordionStyles = {
     item: {
       backgroundColor: "white",
@@ -35,7 +42,7 @@ export function FAQ({ id, subtitle, title, questions = [], contactCard }) {
   };
 
   return (
-    <Layout id={id} subtitle={subtitle} title={title} bg="white">
+    <Layout id={id} subtitle={subtitle} title={title} background={background}>
       <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
         <Accordion
           variant="separated"
diff --git a/src/components/FeatureSplit.jsx b/src/components/FeatureSplit.jsx
@@ -21,7 +21,7 @@ export function FeatureSplit({
   video,
   image,
   reverse = false,
-  bg,
+  background = "white",
 }) {
   const listComponent = featuresList && featuresList.length > 0 && (
     <List
@@ -70,7 +70,7 @@ export function FeatureSplit({
   );
 
   return (
-    <Layout id={id} subtitle={subtitle} title={title} bg={bg}>
+    <Layout id={id} subtitle={subtitle} title={title} background={background}>
       <SimpleGrid
         cols={{ base: 1, md: 2 }}
         spacing={{ base: 40, md: 80 }}
diff --git a/src/components/FeaturesGrid.jsx b/src/components/FeaturesGrid.jsx
@@ -40,11 +40,11 @@ export function FeaturesGrid({
   id,
   subtitle,
   title,
-  bg = "gray.0",
+  background = "gray.0",
   items = [],
 }) {
   return (
-    <Layout id={id} subtitle={subtitle} title={title} bg={bg}>
+    <Layout id={id} subtitle={subtitle} title={title} background={background}>
       <Grid gutter="lg">
         {items.map((item, idx) => (
           <FeatureCard key={idx} {...item} />
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -9,6 +9,7 @@ import {
   SimpleGrid,
   ActionIcon,
 } from "@mantine/core";
+import { resolveBackground } from "../configs/backgrounds.js";
 
 /**
  * Footer - A generic footer component with configurable sections and brand information.
@@ -23,8 +24,9 @@ export function Footer({
   socialLinks = [],
   copyrightText,
   madeByText,
-  bg = "gray.0",
+  background = "white",
 }) {
+  const bg = resolveBackground(background);
   return (
     <Box
       component="footer"
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,5 +1,6 @@
 import { Box, Container, Group, Paper, Text, Button } from "@mantine/core";
 import { useWindowScroll } from "@mantine/hooks";
+import { resolveBackground } from "../configs/backgrounds.js";
 
 /**
  * Header - Fully config-driven navigation bar with accessibility.
@@ -10,7 +11,14 @@ import { useWindowScroll } from "@mantine/hooks";
  * @param {object}   loginCta   - { label, href }
  * @param {object}   signupCta  - { label, labelMobile, href }
  */
-export function Header({ logo, navLinks = [], loginCta, signupCta }) {
+export function Header({
+  logo,
+  navLinks = [],
+  loginCta,
+  signupCta,
+  background = "white",
+}) {
+  const bg = resolveBackground(background);
   const [scroll] = useWindowScroll();
   const scrolled = scroll.y > 10;
 
@@ -42,7 +50,7 @@ export function Header({ logo, navLinks = [], loginCta, signupCta }) {
           shadow={scrolled ? "sm" : "none"}
           radius="0"
           p="xs"
-          bg="white"
+          bg={bg}
           bd={
             scrolled
               ? "1px solid var(--mantine-color-gray-2)"
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -10,6 +10,7 @@ import {
 import { SectionHeader } from "../primitives/SectionHeader.jsx";
 import { MediaBlock } from "../primitives/MediaBlock.jsx";
 import { CTAButton } from "../primitives/CTAButton.jsx";
+import { resolveBackground } from "../configs/backgrounds.js";
 
 /**
  * Hero - High-impact first fold, fully config-driven.
@@ -21,9 +22,19 @@ import { CTAButton } from "../primitives/CTAButton.jsx";
  * @param {object} video     - { src, filter, width }
  * @param {string} image     - image src (alternative to video)
  */
-export function Hero({ subtitle, title, description, cta, video, image }) {
+export function Hero({
+  subtitle,
+  title,
+  description,
+  cta,
+  video,
+  image,
+  background = "white",
+}) {
+  const bg = resolveBackground(background);
+
   return (
-    <Box py={{ base: 80, sm: 100, md: 140 }} id="hero" bg="white">
+    <Box py={{ base: 80, sm: 100, md: 140 }} id="hero" bg={bg}>
       <Container size="lg">
         <SimpleGrid
           cols={{ base: 1, md: 2 }}
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -1,5 +1,6 @@
 import { Box, Container, Stack } from "@mantine/core";
 import { SectionHeader } from "../primitives/SectionHeader.jsx";
+import { resolveBackground } from "../configs/backgrounds.js";
 
 /**
  * Layout - The "Stage" for the Zen Design Series
@@ -13,12 +14,14 @@ export function Layout({
   title,
   subtitle,
   id,
-  bg = "white",
+  background = "white",
   py = { base: 80, md: 120 },
   maw = 800,
   ta = "left",
   stackGap = "xl",
 }) {
+  const bg = resolveBackground(background);
+
   return (
     <Box
       component="section"
diff --git a/src/components/Pricing.jsx b/src/components/Pricing.jsx
@@ -28,9 +28,16 @@ export function Pricing({
   setBilling,
   promoBadge,
   plans,
+  background = "white",
 }) {
   return (
-    <Layout id={id} subtitle={subtitle} title={title} ta="center">
+    <Layout
+      id={id}
+      subtitle={subtitle}
+      title={title}
+      ta="center"
+      background={background}
+    >
       {billingOptions && billingOptions.length > 0 && (
         <Stack align="center" gap="xl" mb={80}>
           <Group gap="xs">
diff --git a/src/components/SocialProof.jsx b/src/components/SocialProof.jsx
@@ -7,6 +7,7 @@ import {
   Image,
   Center,
 } from "@mantine/core";
+import { resolveBackground } from "../configs/backgrounds.js";
 
 function LogoItem({ logo, index }) {
   const imageProps = {
@@ -51,15 +52,16 @@ function LogoItem({ logo, index }) {
  * @param {string} title  - Optional heading text
  * @param {array}  logos  - [{ src, alt, height, url?, style? }]
  */
-export function SocialProof({ id, title, logos }) {
+export function SocialProof({ id, title, logos, background = "gray" }) {
+  const bg = resolveBackground(background);
   if (!logos || logos.length === 0) return null;
 
   return (
     <Box
       component="section"
       id={id}
       py={{ base: 40, md: 60 }}
-      bg="white"
+      bg={bg}
       bd={{ bottom: "1px solid var(--mantine-color-gray-1)" }}
     >
       <Container size="lg">
diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx
@@ -7,13 +7,12 @@ import { Layout } from "./Layout.jsx";
  */
 export function Testimonials({
   id,
-  bg = "gray.0",
-  title,
   subtitle,
   items = [],
+  background = "gray",
 }) {
   return (
-    <Layout id={id} bg={bg} title={title} subtitle={subtitle}>
+    <Layout id={id} background={background} title={title} subtitle={subtitle}>
       <SimpleGrid
         cols={{ base: 1, md: items.length > 3 ? 4 : items.length || 3 }}
         spacing="xl"
diff --git a/src/components/TrustBadge.jsx b/src/components/TrustBadge.jsx
@@ -1,5 +1,6 @@
 import { Box, Group, Text, ThemeIcon } from "@mantine/core";
 import { IconCircleCheck } from "@tabler/icons-react";
+import { resolveBackground } from "../configs/backgrounds.js";
 
 /**
  * TrustBadge - A trust/certification seal badge.
@@ -8,11 +9,13 @@ import { IconCircleCheck } from "@tabler/icons-react";
 export function TrustBadge({
   text = "Selo Exclusivo RiLiGar",
   color = "green.6",
+  background = "gray",
 }) {
+  const bg = resolveBackground(background);
   return (
     <Box
       p="xs"
-      bg="gray.1"
+      bg={bg}
       style={{
         borderRadius: "8px",
         border: "1px solid var(--mantine-color-gray-2)",
diff --git a/src/configs/backgrounds.js b/src/configs/backgrounds.js
@@ -0,0 +1,17 @@
+/**
+ * SECTION_BACKGROUNDS - Central configuration for section backgrounds.
+ * Supports "white" and "gray" (Mantine gray.0).
+ */
+export const SECTION_BACKGROUNDS = {
+  white: "white",
+  gray: "gray.0",
+};
+
+/**
+ * Helper to resolve the background token for Mantine's 'bg' prop.
+ * @param {string} background - "white" | "gray"
+ * @returns {string} - The Mantine color token
+ */
+export const resolveBackground = (background) => {
+  return SECTION_BACKGROUNDS[background] || SECTION_BACKGROUNDS.white;
+};
diff --git a/src/index.js b/src/index.js
@@ -21,5 +21,9 @@ export { FAQ } from "./components/FAQ.jsx";
 export { Testimonials } from "./components/Testimonials.jsx";
 export { CTABanner, SecondaryCTA } from "./components/CTABanner.jsx";
 export { TrustBadge, SeloExclusivo } from "./components/TrustBadge.jsx";
-export { Footer } from "./components/Footer.jsx";
+// Configs
+export {
+  SECTION_BACKGROUNDS,
+  resolveBackground,
+} from "./configs/backgrounds.js";
 //
