Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -29,30 +29,18 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "hero"},
         {
-          name: "Services",
-          id: "services",
-        },
+          name: "Services",          id: "services"},
         {
-          name: "About",
-          id: "about",
-        },
+          name: "About",          id: "about"},
         {
-          name: "Testimonials",
-          id: "reviews",
-        },
+          name: "Testimonials",          id: "reviews"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Contact",          id: "contact"},
       ]}
       button={{
-        text: "Call Now",
-        href: "tel:07463133587",
-      }}
+        text: "Call Now",        href: "tel:07463133587"}}
       brandName="CLYST Fencing & Landscaping"
     />
   </div>
@@ -60,19 +48,14 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       title="Expert Fencing & Landscaping in Exeter – Built to Last, Priced Right."
       description="Professional fencing, landscaping, and patio services for residential and commercial clients across Devon. Fully insured, reliable, and high attention to detail."
       buttons={[
         {
-          text: "Get a Free Quote",
-          href: "#contact",
-        },
+          text: "Get a Free Quote",          href: "#contact"},
         {
-          text: "Call Now",
-          href: "tel:07463133587",
-        },
+          text: "Call Now",          href: "tel:07463133587"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/people-working-construction-site_23-2151889140.jpg?_wi=1"
       imageAlt="Professional garden landscaping in Exeter"
@@ -86,60 +69,25 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          id: "f1",
-          title: "Professional Fencing",
-          author: "CLYST Team",
-          description: "High-quality fencing solutions designed to withstand the Devon weather, providing security and aesthetics.",
-          tags: [
-            "Fencing",
-            "Residential",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-doing-arts-crafts_23-2151575709.jpg?_wi=1",
-        },
+          id: "f1",          title: "Professional Fencing",          author: "CLYST Team",          description: "High-quality fencing solutions designed to withstand the Devon weather, providing security and aesthetics.",          tags: [
+            "Fencing",            "Residential"],
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-doing-arts-crafts_23-2151575709.jpg?_wi=1"},
         {
-          id: "f2",
-          title: "Expert Decking",
-          author: "CLYST Team",
-          description: "Transform your outdoor living space with bespoke decking that adds both value and style to your home.",
-          tags: [
-            "Decking",
-            "Outdoor",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-old-wooden-pots-with-plants-wooden-steps_169016-10589.jpg?_wi=1",
-        },
+          id: "f2",          title: "Expert Decking",          author: "CLYST Team",          description: "Transform your outdoor living space with bespoke decking that adds both value and style to your home.",          tags: [
+            "Decking",            "Outdoor"],
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-old-wooden-pots-with-plants-wooden-steps_169016-10589.jpg?_wi=1"},
         {
-          id: "f3",
-          title: "Patios & Paving",
-          author: "CLYST Team",
-          description: "Masterful patio and paving installations, creating perfect outdoor spaces for relaxation and entertaining.",
-          tags: [
-            "Patios",
-            "Paving",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/swimming-pool-top-view_1150-11005.jpg",
-        },
+          id: "f3",          title: "Patios & Paving",          author: "CLYST Team",          description: "Masterful patio and paving installations, creating perfect outdoor spaces for relaxation and entertaining.",          tags: [
+            "Patios",            "Paving"],
+          imageSrc: "http://img.b2bpic.net/free-photo/swimming-pool-top-view_1150-11005.jpg"},
         {
-          id: "f4",
-          title: "Garden Maintenance",
-          author: "CLYST Team",
-          description: "Regular maintenance to keep your garden looking pristine throughout the changing seasons.",
-          tags: [
-            "Garden",
-            "Maintenance",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-doing-arts-crafts_23-2151575709.jpg?_wi=2",
-        },
+          id: "f4",          title: "Garden Maintenance",          author: "CLYST Team",          description: "Regular maintenance to keep your garden looking pristine throughout the changing seasons.",          tags: [
+            "Garden",            "Maintenance"],
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-doing-arts-crafts_23-2151575709.jpg?_wi=2"},
         {
-          id: "f5",
-          title: "Custom Landscaping",
-          author: "CLYST Team",
-          description: "Complete garden redesigns tailored to your unique lifestyle and property style.",
-          tags: [
-            "Design",
-            "Landscaping",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-old-wooden-pots-with-plants-wooden-steps_169016-10589.jpg?_wi=2",
-        },
+          id: "f5",          title: "Custom Landscaping",          author: "CLYST Team",          description: "Complete garden redesigns tailored to your unique lifestyle and property style.",          tags: [
+            "Design",            "Landscaping"],
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-old-wooden-pots-with-plants-wooden-steps_169016-10589.jpg?_wi=2"},
       ]}
       title="Our Garden Services"
       description="From secure boundary fencing to complete garden transformations, we deliver quality craftsmanship in every detail."
@@ -151,15 +99,10 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Why Choose CLYST?"
       description={[
-        "We are a dedicated local team based in Exeter, serving the surrounding Devon area with reliable landscaping and fencing services.",
-        "Our promise is simple: high attention to detail, quality materials, and a finish you can be proud of. We are fully insured, professional, and work through all weathers.",
-        "Whether you need a small repair or a total garden overhaul, we bring the same level of care and precision to every project.",
-      ]}
+        "We are a dedicated local team based in Exeter, serving the surrounding Devon area with reliable landscaping and fencing services.",        "Our promise is simple: high attention to detail, quality materials, and a finish you can be proud of. We are fully insured, professional, and work through all weathers.",        "Whether you need a small repair or a total garden overhaul, we bring the same level of care and precision to every project."]}
       buttons={[
         {
-          text: "Contact Us",
-          href: "#contact",
-        },
+          text: "Contact Us",          href: "#contact"},
       ]}
     />
   </div>
@@ -172,25 +115,15 @@ export default function LandingPage() {
       author="Sarah & David, Exeter"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/blue-eyed-bearded-male-using-laptop-cafe-street_613910-12216.jpg",
-          alt: "Customer 1",
-        },
+          src: "http://img.b2bpic.net/free-photo/blue-eyed-bearded-male-using-laptop-cafe-street_613910-12216.jpg",          alt: "Customer 1"},
         {
-          src: "http://img.b2bpic.net/free-photo/real-estate-concept-happy-young-man-searching-home-rent-holding-house-paper-maket-smiling-st_1258-172912.jpg",
-          alt: "Customer 2",
-        },
+          src: "http://img.b2bpic.net/free-photo/real-estate-concept-happy-young-man-searching-home-rent-holding-house-paper-maket-smiling-st_1258-172912.jpg",          alt: "Customer 2"},
         {
-          src: "http://img.b2bpic.net/free-photo/female-florist-cutting-stem-flowers-shop_23-2147882043.jpg",
-          alt: "Customer 3",
-        },
+          src: "http://img.b2bpic.net/free-photo/female-florist-cutting-stem-flowers-shop_23-2147882043.jpg",          alt: "Customer 3"},
         {
-          src: "http://img.b2bpic.net/free-photo/real-estate-insurance-concept-handsome-modern-man-buying-property-smiling-showing-paper-hous_1258-144783.jpg",
-          alt: "Customer 4",
-        },
+          src: "http://img.b2bpic.net/free-photo/real-estate-insurance-concept-handsome-modern-man-buying-property-smiling-showing-paper-hous_1258-144783.jpg",          alt: "Customer 4"},
         {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-office_23-2148242883.jpg",
-          alt: "Customer 5",
-        },
+          src: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-office_23-2148242883.jpg",          alt: "Customer 5"},
       ]}
       ratingAnimation="blur-reveal"
       avatarsAnimation="blur-reveal"
@@ -201,18 +134,13 @@ export default function LandingPage() {
       <ContactText
       useInvertedBackground={false}
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       text="Ready to transform your outdoor space? Get in touch today for a free, no-obligation quotation."
       buttons={[
         {
-          text: "07463 133587",
-          href: "tel:07463133587",
-        },
+          text: "07463 133587",          href: "tel:07463133587"},
         {
-          text: "Email Us",
-          href: "mailto:info@clystfencing.co.uk",
-        },
+          text: "Email Us",          href: "mailto:info@clystfencing.co.uk"},
       ]}
     />
   </div>
@@ -222,41 +150,25 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/people-working-construction-site_23-2151889140.jpg?_wi=2"
       columns={[
         {
-          title: "Services",
-          items: [
+          title: "Services",          items: [
             {
-              label: "Fencing",
-              href: "#",
-            },
+              label: "Fencing",              href: "#"},
             {
-              label: "Decking",
-              href: "#",
-            },
+              label: "Decking",              href: "#"},
             {
-              label: "Patios",
-              href: "#",
-            },
+              label: "Patios",              href: "#"},
             {
-              label: "Landscaping",
-              href: "#",
-            },
+              label: "Landscaping",              href: "#"},
           ],
         },
         {
-          title: "Information",
-          items: [
+          title: "Information",          items: [
             {
-              label: "About Us",
-              href: "#about",
-            },
+              label: "About Us",              href: "#about"},
             {
-              label: "Contact",
-              href: "#contact",
-            },
+              label: "Contact",              href: "#contact"},
             {
-              label: "Privacy Policy",
-              href: "#",
-            },
+              label: "Privacy Policy",              href: "#"},
           ],
         },
       ]}
@@ -267,4 +179,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000f06e6;
-  --primary-cta: #0a7039;
+  --background: #f5f4ef;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #2b180a;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #efe7dd;
   --secondary-cta-text: #000f06e6;
-  --accent: #000f06e6;
-  --background-accent: #c4c4c4;
+  --accent: #94877c;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);