Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -18,41 +18,31 @@ export default function LandingPage() {
     <ThemeProvider
         defaultButtonVariant="shift-hover"
         defaultTextAnimation="background-highlight"
-        borderRadius="rounded"
+        borderRadius="pill"
         contentWidth="mediumSmall"
-        sizing="largeSmall"
+        sizing="mediumLargeSizeLargeTitles"
         background="fluid"
-        cardStyle="inset"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="layered"
-        headingFontWeight="semibold"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "Home",
-          id: "#hero",
-        },
+          name: "Home",          id: "#hero"},
         {
-          name: "About",
-          id: "#about",
-        },
+          name: "About",          id: "#about"},
         {
-          name: "Services",
-          id: "#services",
-        },
+          name: "Services",          id: "#services"},
         {
-          name: "Contact",
-          id: "#contact",
-        },
+          name: "Contact",          id: "#contact"},
       ]}
       brandName="Sky Construction"
       button={{
-        text: "Get Estimate",
-        href: "#contact",
-      }}
+        text: "Get Estimate",        href: "#contact"}}
     />
   </div>
 
@@ -63,37 +53,23 @@ export default function LandingPage() {
       tag="Sky Construction GC LLC"
       buttons={[
         {
-          text: "Request Free Estimate",
-          href: "#contact",
-        },
+          text: "Request Free Estimate",          href: "#contact"},
         {
-          text: "View Services",
-          href: "#services",
-        },
+          text: "View Services",          href: "#services"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/attentiveness-businesswoman-with-long-blond-hair-safety-helmet-looking-closely-document-standing-construction-site-working-group_259150-57757.jpg?_wi=1"
       showDimOverlay={true}
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/businessman-wearing-coat_1098-3778.jpg",
-          alt: "Satisfied client",
-        },
+          src: "http://img.b2bpic.net/free-photo/businessman-wearing-coat_1098-3778.jpg",          alt: "Satisfied client"},
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",
-          alt: "Satisfied client",
-        },
+          src: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",          alt: "Satisfied client"},
         {
-          src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
-          alt: "Satisfied client",
-        },
+          src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",          alt: "Satisfied client"},
         {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-business-man-with-backpack_23-2149915912.jpg",
-          alt: "Satisfied client",
-        },
+          src: "http://img.b2bpic.net/free-photo/medium-shot-business-man-with-backpack_23-2149915912.jpg",          alt: "Satisfied client"},
         {
-          src: "http://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg",
-          alt: "Satisfied client",
-        },
+          src: "http://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg",          alt: "Satisfied client"},
       ]}
       avatarText="Trusted by 500+ local property owners"
     />
@@ -101,7 +77,7 @@ export default function LandingPage() {
 
   <div id="about" data-section="about">
       <TestimonialAboutCard
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       tag="Our Mission"
       title="Craftsmanship That Protects & Elevates."
       description="Sky Construction GC LLC was built on one mission: deliver exceptional exterior construction work with integrity, precision, and pride."
@@ -119,44 +95,20 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "s1",
-          label: "01",
-          title: "Stucco & Dryvit Restoration",
-          items: [
-            "Luxury-grade stucco repair",
-            "Dryvit restoration",
-            "Seamless refinishing",
-          ],
+          id: "s1",          label: "01",          title: "Stucco & Dryvit Restoration",          items: [
+            "Luxury-grade stucco repair",            "Dryvit restoration",            "Seamless refinishing"],
         },
         {
-          id: "s2",
-          label: "02",
-          title: "Chimney & Masonry",
-          items: [
-            "Precision chimney rebuilding",
-            "Masonry restoration",
-            "Weatherproofing",
-          ],
+          id: "s2",          label: "02",          title: "Chimney & Masonry",          items: [
+            "Precision chimney rebuilding",            "Masonry restoration",            "Weatherproofing"],
         },
         {
-          id: "s3",
-          label: "03",
-          title: "Exterior Renovations",
-          items: [
-            "High-end siding installation",
-            "Professional exterior painting",
-            "Property value upgrades",
-          ],
+          id: "s3",          label: "03",          title: "Exterior Renovations",          items: [
+            "High-end siding installation",            "Professional exterior painting",            "Property value upgrades"],
         },
         {
-          id: "s4",
-          label: "04",
-          title: "Commercial & Residential",
-          items: [
-            "Office building restoration",
-            "Historic home care",
-            "Modern exterior finishing",
-          ],
+          id: "s4",          label: "04",          title: "Commercial & Residential",          items: [
+            "Office building restoration",            "Historic home care",            "Modern exterior finishing"],
         },
       ]}
       title="Premium Exterior Construction Services."
@@ -167,63 +119,18 @@ export default function LandingPage() {
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardFive
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       testimonials={[
         {
-          id: "t1",
-          name: "C. Niles",
-          date: "2023",
-          title: "Business Owner",
-          quote: "Beautifully repaired and painted an office building. The building now looks essentially brand new.",
-          tag: "Commercial",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businessman_107420-84879.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/attentiveness-businesswoman-with-long-blond-hair-safety-helmet-looking-closely-document-standing-construction-site-working-group_259150-57757.jpg?_wi=2",
-          imageAlt: "person portrait office setting",
-        },
+          id: "t1",          name: "C. Niles",          date: "2023",          title: "Business Owner",          quote: "Beautifully repaired and painted an office building. The building now looks essentially brand new.",          tag: "Commercial",          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businessman_107420-84879.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/attentiveness-businesswoman-with-long-blond-hair-safety-helmet-looking-closely-document-standing-construction-site-working-group_259150-57757.jpg?_wi=2",          imageAlt: "person portrait office setting"},
         {
-          id: "t2",
-          name: "Joseph Kozlovsky",
-          date: "2023",
-          title: "Homeowner",
-          quote: "Amazing work. Jerry and his team are very educated, kind, and respectful.",
-          tag: "Residential",
-          avatarSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-358.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-african-american-worker-standing-with-plan-factory_1303-30604.jpg?_wi=2",
-          imageAlt: "person portrait office setting",
-        },
+          id: "t2",          name: "Joseph Kozlovsky",          date: "2023",          title: "Homeowner",          quote: "Amazing work. Jerry and his team are very educated, kind, and respectful.",          tag: "Residential",          avatarSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-358.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/woman-african-american-worker-standing-with-plan-factory_1303-30604.jpg?_wi=2",          imageAlt: "person portrait office setting"},
         {
-          id: "t3",
-          name: "Mary Ann Moretta",
-          date: "2023",
-          title: "Homeowner",
-          quote: "Sky Construction restored our stucco beautifully and preserved the character of our 1930 home.",
-          tag: "Historical",
-          avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232840.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15602.jpg",
-          imageAlt: "person portrait office setting",
-        },
+          id: "t3",          name: "Mary Ann Moretta",          date: "2023",          title: "Homeowner",          quote: "Sky Construction restored our stucco beautifully and preserved the character of our 1930 home.",          tag: "Historical",          avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232840.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15602.jpg",          imageAlt: "person portrait office setting"},
         {
-          id: "t4",
-          name: "John Doe",
-          date: "2022",
-          title: "Project Manager",
-          quote: "Highly recommended for high-quality professional work done right the first time.",
-          tag: "Professional",
-          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-handsome-bearded-guy-showing-okay-gesture-smiling-standing-blue-background_1258-160947.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-engineers-working_23-2151657911.jpg",
-          imageAlt: "person portrait office setting",
-        },
+          id: "t4",          name: "John Doe",          date: "2022",          title: "Project Manager",          quote: "Highly recommended for high-quality professional work done right the first time.",          tag: "Professional",          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-handsome-bearded-guy-showing-okay-gesture-smiling-standing-blue-background_1258-160947.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/female-engineers-working_23-2151657911.jpg",          imageAlt: "person portrait office setting"},
         {
-          id: "t5",
-          name: "Sarah Smith",
-          date: "2022",
-          title: "Architect",
-          quote: "The attention to detail in their masonry work is unmatched in the industry today.",
-          tag: "Consulting",
-          avatarSrc: "http://img.b2bpic.net/free-photo/side-view-old-man-with-laptop-outdoors_23-2148269386.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124313.jpg",
-          imageAlt: "person portrait office setting",
-        },
+          id: "t5",          name: "Sarah Smith",          date: "2022",          title: "Architect",          quote: "The attention to detail in their masonry work is unmatched in the industry today.",          tag: "Consulting",          avatarSrc: "http://img.b2bpic.net/free-photo/side-view-old-man-with-laptop-outdoors_23-2148269386.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124313.jpg",          imageAlt: "person portrait office setting"},
       ]}
       title="Trusted By Our Clients"
       description="See why homeowners and commercial businesses choose our craftsmanship."
@@ -237,25 +144,13 @@ export default function LandingPage() {
       tag="Our Growth"
       metrics={[
         {
-          id: "m1",
-          value: "4.7★",
-          description: "Google Rating",
-        },
+          id: "m1",          value: "4.7★",          description: "Google Rating"},
         {
-          id: "m2",
-          value: "14+",
-          description: "Verified Reviews",
-        },
+          id: "m2",          value: "14+",          description: "Verified Reviews"},
         {
-          id: "m3",
-          value: "100%",
-          description: "Craftsmanship Focus",
-        },
+          id: "m3",          value: "100%",          description: "Craftsmanship Focus"},
         {
-          id: "m4",
-          value: "10+",
-          description: "Years Experience",
-        },
+          id: "m4",          value: "10+",          description: "Years Experience"},
       ]}
       metricsAnimation="slide-up"
     />
@@ -263,23 +158,14 @@ export default function LandingPage() {
 
   <div id="faq" data-section="faq">
       <FaqSplitText
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       faqs={[
         {
-          id: "f1",
-          title: "Do you provide estimates?",
-          content: "Yes, we provide free estimates for all exterior restoration projects.",
-        },
+          id: "f1",          title: "Do you provide estimates?",          content: "Yes, we provide free estimates for all exterior restoration projects."},
         {
-          id: "f2",
-          title: "What areas do you serve?",
-          content: "We serve both residential and commercial clients in the region.",
-        },
+          id: "f2",          title: "What areas do you serve?",          content: "We serve both residential and commercial clients in the region."},
         {
-          id: "f3",
-          title: "Do you handle historic homes?",
-          content: "Absolutely, we specialize in preserving character during restoration.",
-        },
+          id: "f3",          title: "Do you handle historic homes?",          content: "Absolutely, we specialize in preserving character during restoration."},
       ]}
       sideTitle="Questions?"
       sideDescription="Find answers to our common service queries."
@@ -291,8 +177,7 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={false}
       background={{
-        variant: "sparkles-gradient",
-      }}
+        variant: "sparkles-gradient"}}
       tag="Contact Us"
       title="Bring Your Property Back To Life."
       description="Schedule your free estimate with our experts today."
@@ -303,13 +188,9 @@ export default function LandingPage() {
       <FooterLogoReveal
       logoText="Sky Construction"
       leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
+        text: "Privacy Policy",        href: "#"}}
       rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
+        text: "Terms of Service",        href: "#"}}
     />
   </div>
       </ReactLenis>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-figtree), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-figtree), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #fffffae6;
-  --primary-cta: #fde047;
+  --background: #fbfbfb;
+  --card: #f0f0f0;
+  --foreground: #0a0a0a;
+  --primary-cta: #1a1a1a;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #e5e5e5;
   --secondary-cta-text: #fffffae6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #cccccc;
+  --background-accent: #d4d4d4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);