Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -192,20 +192,19 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
+      <ContactCenter
+      tag="Contact Us"
+      title="Get in Touch"
+      description="We're here to help with any questions, inquiries, or style advice you need. Reach out and let's sparkle together."
       useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      tag="Join Us"
-      title="Stay Sparkly"
-      description="Subscribe to our newsletter for exclusive offers and new collection sneak peeks."
-      imageSrc="http://img.b2bpic.net/free-photo/view-elegant-luxurious-wedding-stationery-planner-resources_23-2150166943.jpg"
-      mediaAnimation="slide-up"
+      background={{ variant: "plain" }}
+      buttonText="Send Message"
+      onSubmit={(email) => console.log("Form submitted", email)}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterBase
       logoText="SparkleBoutique"
       columns={[
         {
@@ -228,6 +227,16 @@ export default function LandingPage() {
               label: "Contact",              href: "#"},
           ],
         },
+        {
+          title: "Connect",          items: [
+            {
+              label: "Instagram",              href: "#"},
+            {
+              label: "Facebook",              href: "#"},
+            {
+              label: "TikTok",              href: "#"},
+          ],
+        },
       ]}
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fdf2f8;
+  --background: #fdf8f6;
   --card: #ffffff;
-  --foreground: #500724;
-  --primary-cta: #db2777;
+  --foreground: #4a3728;
+  --primary-cta: #c17f59;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #fce7f3;
+  --secondary-cta: #f3e5db;
   --secondary-cta-text: #831843;
-  --accent: #c084fc;
-  --background-accent: #fbcfe8;
+  --accent: #dcbfae;
+  --background-accent: #f7ece6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);