refactor: Dynamically adjust component grid layouts and consolidate import statements.

Author: ciro-maciel

src/components/CTABanner.jsx

@@ -1,61 +1,68 @@
-import { Paper, Stack, Text, Box } from "@mantine/core";
-import { Layout } from "./Layout.jsx";
-import { CTAButton } from "../primitives/CTAButton.jsx";
+import { Paper, Stack, Text, Box } from '@mantine/core'
+import { Layout } from './Layout.jsx'
+import { resolveBackground } from '../configs/backgrounds.js'
+import { CTAButton } from '../primitives/CTAButton.jsx'
 
 /**
  * CTABanner - A large CTA section with a highlighted box.
  * (Previously: SecondaryCTA)
  */
-export function CTABanner({
-  id,
-  title,
-  description,
-  cta,
-  background = "gray.0",
-}) {
-  return (
-    <Layout id={id} background={background} ta="center">
-      <Paper
-        p={{ base: "xl", sm: 80 }}
-        bg="white"
-        radius="0"
-        bd="1px solid var(--mantine-color-gray-2)"
-        style={{ borderTop: "4px solid var(--mantine-color-gray-9)" }}
-      >
-        <Stack align="center" ta="center" gap="xl">
-          {title && (
-            <Text
-              fz="var(--fz-section-title)"
-              fw={900}
-              lh={1.2}
-              ls="-0.04em"
-              maw={700}
+export function CTABanner({ id, title, description, cta, background = 'gray' }) {
+    return (
+        <Layout
+            id={id}
+            background={background}
+            ta="center"
+        >
+            <Paper
+                p={{ base: 'xl', sm: 80 }}
+                bg={resolveBackground('white')}
+                radius="0"
+                bd="1px solid var(--mantine-color-gray-2)"
+                style={{ borderTop: '4px solid var(--mantine-color-gray-9)' }}
             >
-              {title}
-            </Text>
-          )}
-          {description && (
-            <Text c="gray.7" size="xl" maw={550}>
-              {description}
-            </Text>
-          )}
-          {cta && (
-            <Box mt="md">
-              <CTAButton
-                label={cta.label}
-                href={cta.href}
-                size={cta.size || "xl"}
-                px={cta.px || { base: 32, md: 60 }}
-                variant={cta.variant}
-                color={cta.color}
-              />
-            </Box>
-          )}
-        </Stack>
-      </Paper>
-    </Layout>
-  );
+                <Stack
+                    align="center"
+                    ta="center"
+                    gap="xl"
+                >
+                    {title && (
+                        <Text
+                            fz="var(--fz-section-title)"
+                            fw={900}
+                            lh={1.2}
+                            ls="-0.04em"
+                            maw={700}
+                        >
+                            {title}
+                        </Text>
+                    )}
+                    {description && (
+                        <Text
+                            c="gray.7"
+                            size="xl"
+                            maw={550}
+                        >
+                            {description}
+                        </Text>
+                    )}
+                    {cta && (
+                        <Box mt="md">
+                            <CTAButton
+                                label={cta.label}
+                                href={cta.href}
+                                size={cta.size || 'xl'}
+                                px={cta.px || { base: 32, md: 60 }}
+                                variant={cta.variant}
+                                color={cta.color}
+                            />
+                        </Box>
+                    )}
+                </Stack>
+            </Paper>
+        </Layout>
+    )
 }
 
 /** @deprecated Use CTABanner instead */
-export const SecondaryCTA = CTABanner;
+export const SecondaryCTA = CTABanner