Update src/app/styles/variables.css

Merge version_4 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactText from '@/components/sections/contact/ContactText';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
@@ -34,23 +34,15 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "About",
-          id: "about",
-        },
+          name: "About",          id: "about"},
         {
-          name: "Features",
-          id: "features",
-        },
+          name: "Features",          id: "features"},
         {
-          name: "Products",
-          id: "products",
-        },
+          name: "Products",          id: "products"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Contact",          id: "contact"},
       ]}
-      brandName="Glass Beveling"
+      brandName="Glass Beveling Service"
     />
   </div>
 
@@ -60,39 +52,23 @@ export default function LandingPage() {
       description="Exquisite craftsmanship and precision beveling for premium mirrors and architectural glass. Elevating interiors with reflective brilliance."
       buttons={[
         {
-          text: "Explore Services",
-          href: "#products",
-        },
+          text: "Explore Services",          href: "#products"},
         {
-          text: "Contact Us",
-          href: "#contact",
-        },
+          text: "Contact Us",          href: "#contact"},
       ]}
       slides={[
         {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c0qrjb",
-          imageAlt: "glass manufacturing factory interior",
-        },
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c0qrjb",          imageAlt: "glass manufacturing factory interior"},
         {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r4yotn",
-          imageAlt: "modern mirror glass display",
-        },
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r4yotn",          imageAlt: "modern mirror glass display"},
         {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k86mn4",
-          imageAlt: "architectural glass industrial design",
-        },
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k86mn4",          imageAlt: "architectural glass industrial design"},
         {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=e9fkan",
-          imageAlt: "glass production lines precision",
-        },
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=e9fkan",          imageAlt: "glass production lines precision"},
         {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=89viwv",
-          imageAlt: "industrial glass fabrication workshop",
-        },
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=89viwv",          imageAlt: "industrial glass fabrication workshop"},
         {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jvvjy0",
-          imageAlt: "glass reflection modern office",
-        },
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jvvjy0",          imageAlt: "glass reflection modern office"},
       ]}
     />
   </div>
@@ -118,26 +94,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          id: "f1",
-          title: "Durability",
-          subtitle: "Toughened for safety",
-          category: "Quality",
-          value: "Lifetime Guarantee",
-        },
+          id: "f1",          title: "Durability",          subtitle: "Toughened for safety",          category: "Quality",          value: "Lifetime Guarantee"},
         {
-          id: "f2",
-          title: "Precision",
-          subtitle: "Bespoke cut accuracy",
-          category: "Craft",
-          value: "0.1mm Tolerance",
-        },
+          id: "f2",          title: "Precision",          subtitle: "Bespoke cut accuracy",          category: "Craft",          value: "0.1mm Tolerance"},
         {
-          id: "f3",
-          title: "Efficiency",
-          subtitle: "Fast production lead",
-          category: "Service",
-          value: "48h Turnaround",
-        },
+          id: "f3",          title: "Efficiency",          subtitle: "Fast production lead",          category: "Service",          value: "48h Turnaround"},
       ]}
       title="Why Choose Us"
       description="Unmatched quality in every cut."
@@ -152,41 +113,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
-          name: "Silver Bevelled Mirror",
-          price: "$149",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zgn45x",
-        },
+          id: "p1",          name: "Silver Bevelled Mirror",          price: "$149",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zgn45x"},
         {
-          id: "p2",
-          name: "Frameless Modern Mirror",
-          price: "$299",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hewqqc",
-        },
+          id: "p2",          name: "Frameless Modern Mirror",          price: "$299",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hewqqc"},
         {
-          id: "p3",
-          name: "Minimalist Wall Glass",
-          price: "$199",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q535lf",
-        },
+          id: "p3",          name: "Minimalist Wall Glass",          price: "$199",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q535lf"},
         {
-          id: "p4",
-          name: "Geometric Wall Art",
-          price: "$349",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x11h4w",
-        },
+          id: "p4",          name: "Geometric Wall Art",          price: "$349",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x11h4w"},
         {
-          id: "p5",
-          name: "Oval Bathroom Mirror",
-          price: "$249",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8bab8p",
-        },
+          id: "p5",          name: "Oval Bathroom Mirror",          price: "$249",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8bab8p"},
         {
-          id: "p6",
-          name: "Premium Polished Mirror",
-          price: "$279",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=12d4e4",
-        },
+          id: "p6",          name: "Premium Polished Mirror",          price: "$279",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=12d4e4"},
       ]}
       title="Our Glass Collections"
       description="Browse our range of high-quality glass and mirror solutions."
@@ -200,26 +137,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       metrics={[
         {
-          id: "m1",
-          value: "15k+",
-          title: "Mirrors Made",
-          description: "Successfully installed globally.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3z44p0",
-        },
+          id: "m1",          value: "15k+",          title: "Mirrors Made",          description: "Successfully installed globally.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3z44p0"},
         {
-          id: "m2",
-          value: "500+",
-          title: "Partners",
-          description: "Trusted by leading design firms.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=02p3t0",
-        },
+          id: "m2",          value: "500+",          title: "Partners",          description: "Trusted by leading design firms.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=02p3t0"},
         {
-          id: "m3",
-          value: "98%",
-          title: "Satisfaction",
-          description: "Delivering excellence consistently.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d6ira7",
-        },
+          id: "m3",          value: "98%",          title: "Satisfaction",          description: "Delivering excellence consistently.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d6ira7"},
       ]}
       title="Our Impact"
       description="Metrics that speak for themselves."
@@ -232,45 +154,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
-          title: "Outstanding",
-          quote: "The mirror clarity is incredible.",
-          name: "Jane D.",
-          role: "Designer",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zik7hr",
-        },
+          id: "t1",          title: "Outstanding",          quote: "The mirror clarity is incredible.",          name: "Jane D.",          role: "Designer",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zik7hr"},
         {
-          id: "t2",
-          title: "Professional",
-          quote: "Best beveling I have ever seen.",
-          name: "Mark S.",
-          role: "Architect",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zgtr7a",
-        },
+          id: "t2",          title: "Professional",          quote: "Best beveling I have ever seen.",          name: "Mark S.",          role: "Architect",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zgtr7a"},
         {
-          id: "t3",
-          title: "Reliable",
-          quote: "Fast and pristine service.",
-          name: "Alice T.",
-          role: "Homeowner",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rtlbbn",
-        },
+          id: "t3",          title: "Reliable",          quote: "Fast and pristine service.",          name: "Alice T.",          role: "Homeowner",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rtlbbn"},
         {
-          id: "t4",
-          title: "Brilliant",
-          quote: "Our office looks so modern now.",
-          name: "Bob R.",
-          role: "Developer",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s9pfsz",
-        },
+          id: "t4",          title: "Brilliant",          quote: "Our office looks so modern now.",          name: "Bob R.",          role: "Developer",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s9pfsz"},
         {
-          id: "t5",
-          title: "Perfection",
-          quote: "Exquisite quality in every piece.",
-          name: "Sarah P.",
-          role: "Manager",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lsatdf",
-        },
+          id: "t5",          title: "Perfection",          quote: "Exquisite quality in every piece.",          name: "Sarah P.",          role: "Manager",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lsatdf"},
       ]}
       title="Client Success"
       description="Hear from our happy clients."
@@ -282,14 +174,7 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       names={[
-        "Design Dynamics",
-        "Urban Construction",
-        "Grand Hospitality",
-        "Renovation Home",
-        "Retail Spaces",
-        "Corporate Interior",
-        "City Builders",
-      ]}
+        "Design Dynamics",        "Urban Construction",        "Grand Hospitality",        "Renovation Home",        "Retail Spaces",        "Corporate Interior",        "City Builders"]}
       title="Trusted By Industry Leaders"
       description="Collaborating with premium design and architectural firms."
     />
@@ -300,20 +185,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "faq1",
-          title: "Can you handle custom shapes?",
-          content: "Absolutely, we specialize in complex custom glass shapes and sizes.",
-        },
+          id: "faq1",          title: "Can you handle custom shapes?",          content: "Absolutely, we specialize in complex custom glass shapes and sizes."},
         {
-          id: "faq2",
-          title: "What is the lead time?",
-          content: "Our standard production lead time is 48 hours for most custom orders.",
-        },
+          id: "faq2",          title: "What is the lead time?",          content: "Our standard production lead time is 48 hours for most custom orders."},
         {
-          id: "faq3",
-          title: "Do you provide installation?",
-          content: "Yes, we offer professional installation for all glass and mirror products.",
-        },
+          id: "faq3",          title: "Do you provide installation?",          content: "Yes, we offer professional installation for all glass and mirror products."},
       ]}
       sideTitle="Common Questions"
       sideDescription="Everything you need to know about our services."
@@ -322,59 +198,34 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactText
+      text="Contact Us for Premium Glass Solutions"
+      background={{ variant: "animated-grid" }}
       useInvertedBackground={true}
-      title="Get in Touch"
-      description="Request a quote or ask us any questions."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-        },
+      buttons={[
+          { text: "Get a Quote", href: "#contact" }
       ]}
-      textarea={{
-        name: "message",
-        placeholder: "How can we help?",
-      }}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qf2gk8"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u69ciu"
+      <FooterBase
       logoText="Glass Beveling Service"
       columns={[
         {
-          title: "Services",
-          items: [
+          title: "Services",          items: [
             {
-              label: "Beveling",
-              href: "#",
-            },
+              label: "Beveling",              href: "#"},
             {
-              label: "Mirror Manufacturing",
-              href: "#",
-            },
+              label: "Mirror Manufacturing",              href: "#"},
           ],
         },
         {
-          title: "Company",
-          items: [
+          title: "Company",          items: [
             {
-              label: "About",
-              href: "#",
-            },
+              label: "About",              href: "#"},
             {
-              label: "Contact",
-              href: "#",
-            },
+              label: "Contact",              href: "#"},
           ],
         },
       ]}
@@ -383,4 +234,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #f5f5f5;
   --card: #ffffff;
   --foreground: #1c1c1c;
-  --primary-cta: #511f1f;
-  --primary-cta-text: #f5f5f5;
+  --primary-cta: #1c1c1c;
+  --primary-cta-text: #087588;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #1c1c1c;
-  --accent: #e63946;
-  --background-accent: #e8bea8;
+  --secondary-cta-text: #087588;
+  --accent: #15479c;
+  --background-accent: #a8cce8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);