Update src/app/page.tsx

src/app/page.tsx

@@ -3,310 +3,152 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
-import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import { Hammer, Ruler, Wrench, ChevronRight } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
-        contentWidth="smallMedium"
-        sizing="large"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="mediumLarge"
         background="none"
-        cardStyle="gradient-radial"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="medium"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="UpNorth Carpentry"
-    />
+      <NavbarStyleFullscreen
+        navItems={[
+          { name: "Home", id: "hero" },
+          { name: "About", id: "about" },
+          { name: "Services", id: "services" },
+          { name: "Projects", id: "portfolio" },
+          { name: "Contact", id: "contact" },
+        ]}
+        brandName="UpNorth Carpentry"
+      />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardCarousel
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Master Craftsmanship in Every Detail"
-      description="UpNorth Carpentry LLC delivers premium woodworking and construction services with a dedication to timeless quality and structural integrity."
-      buttons={[
-        {
-          text: "Start Your Project",
-          href: "#contact",
-        },
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-carpenter-working-with-wood_1157-26127.jpg",
-          imageAlt: "Woodshop craftsmanship",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/carpenter-working-using-ruler-pencil_23-2148679120.jpg",
-          imageAlt: "Bespoke woodwork",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-male-carpenter-holding-wooden-plank-pencil_23-2147944924.jpg",
-          imageAlt: "Structural framing",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/carpenter-taking-measurements-plank-he-is-about-cut-woodworking-workshop_342744-833.jpg",
-          imageAlt: "Deck building",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/people-renovating-house-concept_53876-20671.jpg",
-          imageAlt: "Interior renovation",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/functional-kitchen-pullout-drawers-matte-blue-fronts_169016-68941.jpg",
-          imageAlt: "Custom installations",
-        },
-      ]}
-    />
+      <HeroBillboard
+        background={{ variant: "plain" }}
+        title="Crafting Excellence in the North"
+        description="Dedicated to timeless carpentry, structural integrity, and custom woodworking that stands the test of time."
+        buttons={[{ text: "Get a Consultation", href: "#contact" }]}
+        imageSrc="http://img.b2bpic.net/free-photo/handsome-carpenter-working-with-wood_1157-26127.jpg"
+        imageAlt="UpNorth Carpentry Craftsman at work"
+      />
   </div>
 
   <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
-      useInvertedBackground={false}
-      heading={[
-        {
-          type: "text",
-          content: "Built on Tradition, Driven by Quality",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/full-shot-artisan-doing-woodcutting_23-2150104870.jpg",
-          alt: "Craftsman at work",
-        },
-      ]}
-    />
+      <TextSplitAbout
+        useInvertedBackground={true}
+        title="A Legacy of Fine Craftsmanship"
+        description={[
+          "At UpNorth Carpentry, we believe in the marriage of tradition and modern efficiency.",          "Every project is a commitment to precision, sourcing quality materials to ensure your vision becomes a structural reality that brings lasting value to your home."
+        ]}
+        buttons={[{ text: "Explore our work", href: "#portfolio" }]}
+      />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardTwelve
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",
-          label: "Structure",
-          title: "Framing & Carpentry",
-          items: [
-            "Residential home framing",
-            "Roof structure development",
-            "Structural repairs",
-          ],
-        },
-        {
-          id: "f2",
-          label: "Finishes",
-          title: "Custom Millwork",
-          items: [
-            "Cabinet installation",
-            "Trim and crown molding",
-            "Built-in shelving units",
-          ],
-        },
-        {
-          id: "f3",
-          label: "Outdoor",
-          title: "Decking & Fencing",
-          items: [
-            "Custom deck builds",
-            "Cedar fencing installation",
-            "Exterior structure finishing",
-          ],
-        },
-      ]}
-      title="Our Craftsmanship Services"
-      description="We specialize in a variety of carpentry needs to enhance your home's value and aesthetics."
-    />
+      <FeatureCardTwentySix
+        title="Expert Carpentry Services"
+        description="From structural framing to the final touches, we bring professional attention to every detail of your space."
+        textboxLayout="inline-image"
+        useInvertedBackground={false}
+        features={[
+          { title: "Structural Framing", description: "Solid, safe, and precise construction from the ground up.", buttonIcon: Hammer },
+          { title: "Custom Millwork", description: "Handcrafted cabinets, trim, and bespoke storage solutions.", buttonIcon: Ruler },
+          { title: "Outdoor Living", description: "High-quality decks and structures designed for the northern landscape.", buttonIcon: Wrench },
+          { title: "Renovation", description: "Breathing new life into existing spaces with master craftsmanship.", buttonIcon: ChevronRight },
+        ]}
+      />
   </div>
 
   <div id="portfolio" data-section="portfolio">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Custom Walnut Kitchen",
-          price: "Featured",
-          variant: "Millwork",
-          imageSrc: "http://img.b2bpic.net/free-photo/open-oven_23-2147958974.jpg",
-        },
-        {
-          id: "p2",
-          name: "Modern Backyard Deck",
-          price: "Featured",
-          variant: "Exterior",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-tools_23-2148138056.jpg",
-        },
-        {
-          id: "p3",
-          name: "Home Frame Renovation",
-          price: "Featured",
-          variant: "Structural",
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-smiling-middle-aged-carpenter-holding-wood-plank-woodworking-workshop_342744-811.jpg",
-        },
-        {
-          id: "p4",
-          name: "Bespoke Library Shelves",
-          price: "Featured",
-          variant: "Millwork",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-making-surfboard_107420-94946.jpg",
-        },
-        {
-          id: "p5",
-          name: "Entryway Trim Refresh",
-          price: "Featured",
-          variant: "Finishing",
-          imageSrc: "http://img.b2bpic.net/free-photo/woodworker-works-local-lumber-production_1163-3117.jpg",
-        },
-        {
-          id: "p6",
-          name: "Garage Conversion Build",
-          price: "Featured",
-          variant: "Structural",
-          imageSrc: "http://img.b2bpic.net/free-photo/woodworker-carpentry-shop-using-sandpaper-sanding-wooden-surface_482257-89249.jpg",
-        },
-      ]}
-      title="Portfolio Highlights"
-      description="Explore our recent successful carpentry projects."
-    />
+      <ProductCardTwo
+        title="Featured Projects"
+        description="See the fine detail and quality built into every project we undertake."
+        gridVariant="three-columns-all-equal-width"
+        animationType="slide-up"
+        textboxLayout="split"
+        useInvertedBackground={true}
+        products={[
+          { id: "1", brand: "Millwork", name: "Walnut Kitchen Cabinetry", price: "Custom Build", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/open-oven_23-2147958974.jpg" },
+          { id: "2", brand: "Exterior", name: "Cedarwood Patio Deck", price: "Custom Build", rating: 5, reviewCount: "22", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-tools_23-2148138056.jpg" },
+          { id: "3", brand: "Structural", name: "Library Shelving Units", price: "Custom Build", rating: 5, reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/man-making-surfboard_107420-94946.jpg" }
+        ]}
+      />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
-      useInvertedBackground={false}
-      title="Why Choose UpNorth?"
-      tag="Our Impact"
-      metrics={[
-        {
-          id: "m1",
-          value: "15+",
-          description: "Years of experience",
-        },
-        {
-          id: "m2",
-          value: "200+",
-          description: "Successful projects",
-        },
-        {
-          id: "m3",
-          value: "98%",
-          description: "Client satisfaction",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
+      <MetricCardOne
+        title="Our Proven Track Record"
+        description="Building trust through quality and reliability for over 15 years."
+        gridVariant="uniform-all-items-equal"
+        animationType="slide-up"
+        textboxLayout="default"
+        useInvertedBackground={true}
+        metrics={[
+          { id: "1", value: "15+", title: "Years", description: "Industry experience", icon: Hammer },
+          { id: "2", value: "200+", title: "Projects", description: "Completed designs", icon: Ruler },
+          { id: "3", value: "98%", title: "Satisfied", description: "Client retention rate", icon: Wrench }
+        ]}
+      />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Mark Stevens",
-          imageSrc: "http://img.b2bpic.net/free-photo/elderly-female-keeping-arms-folded-her-chest-looking-camera-with-confident-smile_1153-9402.jpg",
-        },
-        {
-          id: "2",
-          name: "Sarah Jenkins",
-          imageSrc: "http://img.b2bpic.net/free-photo/architect-posing-office_23-2148242966.jpg",
-        },
-        {
-          id: "3",
-          name: "David Thorne",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-her-lover-smiling-stands-table-retro-camper-relax-atmosphere_482257-11546.jpg",
-        },
-        {
-          id: "4",
-          name: "Linda Miller",
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086833.jpg",
-        },
-        {
-          id: "5",
-          name: "Robert Klein",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-waving-hand-outside_23-2149447136.jpg",
-        },
-      ]}
-      cardTitle="What Our Clients Say"
-      cardTag="Testimonials"
-      cardAnimation="slide-up"
-    />
+      <TestimonialCardTwo
+        title="Client Voices"
+        description="See what homeowners in the North think about our work."
+        animationType="slide-up"
+        textboxLayout="split"
+        useInvertedBackground={false}
+        testimonials={[
+          { id: "1", name: "Mark S.", role: "Homeowner", testimonial: "The attention to detail was exceptional. Truly top-tier craftsmanship." },
+          { id: "2", name: "Sarah J.", role: "Architect", testimonial: "UpNorth Carpentry is reliable, precise, and works with true passion." }
+        ]}
+      />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
-      useInvertedBackground={false}
-      title="Get a Consultation"
-      description="Ready to start your next carpentry project? Tell us what you need and we'll reach out to discuss."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-        },
-        {
-          name: "phone",
-          type: "tel",
-          placeholder: "Phone Number",
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Tell us about your project",
-        rows: 4,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/top-view-wood-tools-desk-with-clipboard_23-2148898123.jpg"
-    />
+        title="Get a Consultation"
+        description="Discuss your carpentry plans with our master builders today."
+        inputs={[
+          { name: "name", type: "text", placeholder: "Full Name" },
+          { name: "email", type: "email", placeholder: "Email Address" },
+        ]}
+        textarea={{ name: "message", placeholder: "Describe your project...", rows: 5 }}
+        useInvertedBackground={true}
+        imageSrc="http://img.b2bpic.net/free-photo/top-view-wood-tools-desk-with-clipboard_23-2148898123.jpg"
+      />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="UpNorth Carpentry LLC"
-      copyrightText="© 2025 UpNorth Carpentry LLC. All rights reserved."
-    />
+      <FooterBaseReveal
+        logoText="UpNorth Carpentry LLC"
+        columns={[
+            { title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
+            { title: "Connect", items: [{ label: "Contact Us", href: "#contact" }] }
+        ]}
+        copyrightText="© 2025 UpNorth Carpentry LLC"
+      />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #2b180a;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #efe7dd;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #94877c;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);