Update src/app/styles/variables.css

Merge version_49 into main

src/app/page.tsx

@@ -17,13 +17,13 @@ export default function LandingPage() {
         defaultButtonVariant="shift-hover"
         defaultTextAnimation="reveal-blur"
         borderRadius="pill"
-        contentWidth="small"
+        contentWidth="medium"
         sizing="medium"
-        background="aurora"
-        cardStyle="outline"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="semibold"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
@@ -78,7 +78,7 @@ export default function LandingPage() {
       features={[
         {
           title: "Roof Replacement",          description: "Full-scale roof replacements using premium materials designed for Alabama weather.",          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CU9LXLTd45U3bRy6xudZUdJbpk/uploaded-1777397555725-hvallagy.jpg",            imageAlt: "Replacement project"},
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CU9LXLTd45U3bRy6xudZUdJbpk/uploaded-1777397555725-hvallagy.jpg?_wi=1",            imageAlt: "Replacement project"},
           items: [
             { icon: CheckCircle, text: "Architectural Shingles" },
             { icon: CheckCircle, text: "Metal Roofing Options" },
@@ -88,7 +88,7 @@ export default function LandingPage() {
         },
         {
           title: "Storm & Hail Damage",          description: "Expert assessments and seamless insurance claim assistance for storm-damaged roofs.",          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CU9LXLTd45U3bRy6xudZUdJbpk/uploaded-1777394430092-e9m33ied.jpg",            imageAlt: "Storm damage repair"},
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CU9LXLTd45U3bRy6xudZUdJbpk/uploaded-1777394430092-e9m33ied.jpg?_wi=1",            imageAlt: "Storm damage repair"},
           items: [
             { icon: Shield, text: "Free Inspection" },
             { icon: Shield, text: "Insurance Coordination" },
@@ -98,7 +98,7 @@ export default function LandingPage() {
         },
         {
           title: "Routine Inspection",          description: "Keep your roof in pristine condition with our comprehensive local maintenance and inspection services.",          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CU9LXLTd45U3bRy6xudZUdJbpk/uploaded-1777394101196-i8tpdvoq.jpg",            imageAlt: "Routine inspection"},
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CU9LXLTd45U3bRy6xudZUdJbpk/uploaded-1777394101196-i8tpdvoq.jpg?_wi=1",            imageAlt: "Routine inspection"},
           items: [
             { icon: Star, text: "Detailed Reporting" },
             { icon: Star, text: "Preventive Maintenance" },

src/app/services/page.tsx

@@ -6,6 +6,8 @@ import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import { CheckCircle, Shield, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -41,6 +43,48 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="services-list" data-section="services-list">
+      <FeatureCardTen
+      animationType="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={true}
+      features={[
+        {
+          title: "Roof Replacement",          description: "Full-scale roof replacements using premium materials designed for Alabama weather.",          media: {
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CU9LXLTd45U3bRy6xudZUdJbpk/uploaded-1777397555725-hvallagy.jpg?_wi=2",            imageAlt: "Replacement project"},
+          items: [
+            { icon: CheckCircle, text: "Architectural Shingles" },
+            { icon: CheckCircle, text: "Metal Roofing Options" },
+            { icon: CheckCircle, text: "Lifetime Warranty" },
+          ],
+          reverse: false,
+        },
+        {
+          title: "Storm & Hail Damage",          description: "Expert assessments and seamless insurance claim assistance for storm-damaged roofs.",          media: {
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CU9LXLTd45U3bRy6xudZUdJbpk/uploaded-1777394430092-e9m33ied.jpg?_wi=2",            imageAlt: "Storm damage repair"},
+          items: [
+            { icon: Shield, text: "Free Inspection" },
+            { icon: Shield, text: "Insurance Coordination" },
+            { icon: Shield, text: "Urgent Response" },
+          ],
+          reverse: true,
+        },
+        {
+          title: "Routine Inspection",          description: "Keep your roof in pristine condition with our comprehensive local maintenance and inspection services.",          media: {
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CU9LXLTd45U3bRy6xudZUdJbpk/uploaded-1777394101196-i8tpdvoq.jpg?_wi=2",            imageAlt: "Routine inspection"},
+          items: [
+            { icon: Star, text: "Detailed Reporting" },
+            { icon: Star, text: "Preventive Maintenance" },
+            { icon: Star, text: "Safety Checks" },
+          ],
+          reverse: false,
+        },
+      ]}
+      title="Comprehensive Roofing Services"
+      description="From storm damage repair to custom roof replacement, we handle your Gadsden roofing needs with precision and care."
+    />
+  </div>
+
   <div id="faq-body" data-section="faq-body">
       <FaqSplitMedia
       textboxLayout="split"

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #000000;
-  --foreground: #ffffff;
-  --primary-cta: #c5a059;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #bfbebe;
-  --secondary-cta-text: #090909;
-  --accent: #c5a059;
-  --background-accent: #000000;
+  --background: #f5f4ef;
+  --card: #dad6cd;
+  --foreground: #2a2928;
+  --primary-cta: #2a2928;
+  --primary-cta-text: #000000;
+  --secondary-cta: #ecebea;
+  --secondary-cta-text: #FFFFFF;
+  --accent: #ffffff;
+  --background-accent: #c6b180;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);