Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,17 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { Award, CheckCircle, Shield } from "lucide-react";
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function LandingPage() {
   return (
@@ -32,105 +27,60 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Services", id: "services" },
+        { name: "Projects", id: "work" },
+        { name: "Contact", id: "contact" },
       ]}
-      brandName="C&E Concrete"
+      brandName="C & E Concrete Design INC"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Built to Last: Professional Concrete Solutions"
-      description="C&E Concrete delivers industry-leading precision and durability for residential and commercial projects. From foundations to finished surfaces, we set the standard."
+      background={{ variant: "gradient-bars" }}
+      title="Quality Concrete Built To Last"
+      description="C & E Concrete Design INC provides superior craftsmanship for all your residential and commercial needs in the Seattle area. Professional, licensed, and insured."
       buttons={[
-        {
-          text: "Get a Quote",
-          href: "#contact",
-        },
-        {
-          text: "Our Services",
-          href: "#services",
-        },
+        { text: "Get a Free Estimate", href: "#contact" },
+        { text: "View Our Services", href: "#services" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/shanghai-china-skyscrapers-old-iron-bridge_1127-2881.jpg"
-      imageAlt="Concrete pouring project"
+      imageAlt="Quality concrete project"
     />
   </div>
 
   <div id="about" data-section="about">
       <MetricSplitMediaAbout
       useInvertedBackground={true}
-      title="Decades of Concrete Excellence"
-      description="At C&E Concrete, our legacy is built on the foundations we pour. We combine traditional craft with modern technology to ensure every structure stands the test of time and weather."
+      title="Why Choose Us?"
+      description="With over 15 years of experience, C & E Concrete Design INC is the trusted name in the Seattle area for high-quality concrete solutions. We are fully licensed and insured, offering professional expertise for both residential and commercial projects with a commitment to reliability and free estimates."
       metrics={[
-        {
-          value: "20+",
-          title: "Years Experience",
-        },
-        {
-          value: "1500+",
-          title: "Projects Completed",
-        },
-        {
-          value: "100%",
-          title: "Client Satisfaction",
-        },
+        { value: "15+", title: "Years Experience" },
+        { value: "100%", title: "Licensed & Insured" },
+        { value: "Local", title: "Seattle Experts" },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/construction-technicians-are-mixing-cement-stone-sand-construction_1150-15109.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/construction-technicians-are-mixing-cement-stone-sand-construction_1150-15109.jpg?_wi=1"
       imageAlt="About C&E Concrete"
       mediaAnimation="slide-up"
       metricsAnimation="blur-reveal"
     />
   </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyEight
+  <div id="work" data-section="work">
+      <ProductCardFour
       animationType="slide-up"
-      textboxLayout="split"
+      textboxLayout="default"
+      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",
-          title: "Durability Focused",
-          subtitle: "High-grade materials for long-lasting results.",
-          category: "Quality",
-          value: "100%",
-        },
-        {
-          id: "f2",
-          title: "Expert Precision",
-          subtitle: "Skilled craftsmen ensuring perfectly leveled surfaces.",
-          category: "Service",
-          value: "Top",
-        },
-        {
-          id: "f3",
-          title: "Timely Delivery",
-          subtitle: "Projects completed on schedule, every time.",
-          category: "Efficiency",
-          value: "Fast",
-        },
+      title="Recent Projects: Before & After"
+      description="Explore the transformation in our gallery, showcasing our recent custom concrete designs and finished installations."
+      products={[
+        { id: "p1", name: "Custom Stamped Patio (After)", price: "Ref: 01", variant: "Stamped", imageSrc: "http://img.b2bpic.net/free-photo/outdoors-cobblestone-texture_23-2149432953.jpg" },
+        { id: "p2", name: "Driveway Transformation (After)", price: "Ref: 02", variant: "Overlay", imageSrc: "http://img.b2bpic.net/free-photo/construction-technicians-are-mixing-cement-stone-sand-construction_1150-15109.jpg?_wi=2" },
+        { id: "p3", name: "Structural Sidewalk (After)", price: "Ref: 03", variant: "Structural", imageSrc: "http://img.b2bpic.net/free-photo/staircase-concrete_1203-3467.jpg?_wi=1" }
       ]}
-      title="Why Choose C&E Concrete?"
-      description="Reliability meets craftsmanship in every job we undertake."
     />
   </div>
 
@@ -141,216 +91,38 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       products={[
-        {
-          id: "p1",
-          name: "Residential Foundations",
-          price: "Custom Quote",
-          variant: "Standard",
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-stone-stairway_1339-6117.jpg",
-        },
-        {
-          id: "p2",
-          name: "Commercial Slabs",
-          price: "Custom Quote",
-          variant: "Industrial",
-          imageSrc: "http://img.b2bpic.net/free-photo/staircase-concrete_1203-3467.jpg",
-        },
-        {
-          id: "p3",
-          name: "Decorative Driveways",
-          price: "Custom Quote",
-          variant: "Stamped",
-          imageSrc: "http://img.b2bpic.net/free-photo/urban-street-with-modern-architecture_23-2147694741.jpg",
-        },
-        {
-          id: "p4",
-          name: "Concrete Patios",
-          price: "Custom Quote",
-          variant: "Finish",
-          imageSrc: "http://img.b2bpic.net/free-photo/outdoors-cobblestone-texture_23-2149432953.jpg",
-        },
-        {
-          id: "p5",
-          name: "Concrete Walkways",
-          price: "Custom Quote",
-          variant: "Safety",
-          imageSrc: "http://img.b2bpic.net/free-photo/tiler-working-renovation-apartment_23-2149278575.jpg",
-        },
-        {
-          id: "p6",
-          name: "Structural Repair",
-          price: "Custom Quote",
-          variant: "Maintenance",
-          imageSrc: "http://img.b2bpic.net/free-photo/excavator-digging-day-light-outdoors_23-2149194769.jpg",
-        },
+        { id: "s1", name: "Stamped Concrete", price: "Service", variant: "Decorative", imageSrc: "http://img.b2bpic.net/free-photo/empty-stone-stairway_1339-6117.jpg" },
+        { id: "s2", name: "Driveways & Patios", price: "Service", variant: "Residential", imageSrc: "http://img.b2bpic.net/free-photo/urban-street-with-modern-architecture_23-2147694741.jpg" },
+        { id: "s3", name: "Sidewalks & Overlays", price: "Service", variant: "Structural", imageSrc: "http://img.b2bpic.net/free-photo/staircase-concrete_1203-3467.jpg?_wi=2" },
       ]}
-      title="Our Specialized Concrete Services"
-      description="We offer a wide range of concrete services to meet your specific construction needs."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          icon: Award,
-          title: "Safety Awards",
-          value: "15",
-        },
-        {
-          id: "m2",
-          icon: CheckCircle,
-          title: "Successful Pours",
-          value: "2000+",
-        },
-        {
-          id: "m3",
-          icon: Shield,
-          title: "Warranty Years",
-          value: "10",
-        },
-      ]}
-      title="Performance at a Glance"
-      description="Our concrete results speak for themselves."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Jenkins",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-architect-using-laptop_23-2148243016.jpg",
-        },
-        {
-          id: "t2",
-          name: "Mark Thornton",
-          imageSrc: "http://img.b2bpic.net/free-photo/architect-doing-okay-sign_1149-1825.jpg",
-        },
-        {
-          id: "t3",
-          name: "Linda Peterson",
-          imageSrc: "http://img.b2bpic.net/free-photo/authentic-scenes-plus-size-males-playing-basketball_23-2150961209.jpg",
-        },
-        {
-          id: "t4",
-          name: "Robert Clark",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-real-estate-agents-with-scaffold-background_23-2147650204.jpg",
-        },
-        {
-          id: "t5",
-          name: "Jessica Lee",
-          imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-using-mobile-phone-working_329181-3735.jpg",
-        },
-      ]}
-      cardTitle="What Our Clients Say"
-      cardTag="Trusted Service"
-      cardAnimation="slide-up"
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "How long does a concrete pour take?",
-          content: "The duration depends on project size and weather conditions, but we prioritize efficient schedules.",
-        },
-        {
-          id: "q2",
-          title: "Do you provide estimates?",
-          content: "Yes, we offer free, no-obligation estimates for all projects.",
-        },
-        {
-          id: "q3",
-          title: "Are you licensed and insured?",
-          content: "Absolutely, C&E Concrete is fully licensed and insured for your peace of mind.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Clear answers about our concrete solutions."
-      faqsAnimation="slide-up"
+      title="Our Concrete Services"
+      description="We provide custom concrete designs tailored to your unique requirements."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Ready to Start?"
-      title="Let's Lay the Foundation"
-      description="Contact C&E Concrete today for your project consultation."
-      buttons={[
-        {
-          text: "Call Now",
-          href: "tel:5550123",
-        },
-        {
-          text: "Send Email",
-          href: "mailto:info@ceconcrete.com",
-        },
-      ]}
+      <ContactSplit
+      tag="Quote Request"
+      title="Start Your Project Today"
+      description="Fill in your details below to request a free quote for your next concrete project. Our team will get back to you shortly."
+      onSubmit={(email) => console.log("Form submitted for: ", email)}
+      background={{ variant: "plain" }}
+      imageSrc="http://img.b2bpic.net/free-photo/worker-working-construction-site_1150-15109.jpg"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="C&E Concrete"
+      <FooterLogoEmphasis
+      logoText="C & E Concrete Design INC"
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "FAQ",
-              href: "#faq",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
+        { items: [{ label: "Stamped Concrete", href: "#services" }, { label: "Driveways/Patios", href: "#services" }] },
+        { items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
+        { items: [{ label: "Follow on Instagram", href: "https://instagram.com" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
-  --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
-  --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #ffdf7d;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #b8860b;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);