Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,44 +2,40 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TeamCardTen from '@/components/sections/team/TeamCardTen';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import TextAbout from '@/components/sections/about/TextAbout';
+import MediaAbout from '@/components/sections/about/MediaAbout';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="bounce-effect"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
         borderRadius="soft"
         contentWidth="small"
-        sizing="mediumLarge"
+        sizing="medium"
-        background="noiseDiagonalGradient"
+        background="noise"
-        cardStyle="gradient-radial"
+        cardStyle="soft-shadow"
-        primaryButtonStyle="diagonal-gradient"
+        primaryButtonStyle="flat"
-        secondaryButtonStyle="glass"
+        secondaryButtonStyle="solid"
         headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "About", id: "about" },
-        {
+        { name: "Collections", id: "products" },
-          name: "About",          id: "about"},
+        { name: "Contact", id: "contact" },
-        {
-          name: "Collections",          id: "products"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="Westlands Floral"
     />
@@ -47,187 +43,135 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       title="Westlands Floral"
       description="Exquisite floral artistry and premium arrangements tailored for every occasion in the heart of Shamneel Court, Westlands."
-      buttons={[
+      buttons={[{ text: "Explore Collections", href: "#products" }]}
-        {
+      imageSrc="http://img.b2bpic.net/free-photo/flower-arrangement-fresh-flowers-pumpkin_169016-5452.jpg?_wi=1"
-          text: "Explore Collections",          href: "#products"},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/flower-arrangement-fresh-flowers-pumpkin_169016-5452.jpg"
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextAbout
+      <MediaAbout
       useInvertedBackground={false}
       tag="Our Story"
       title="Handcrafted Elegance in Every Petal"
+      description="Based in Shamneel Court, Westlands, we bring premium floral designs to your doorstep."
+      imageSrc="http://img.b2bpic.net/free-photo/close-up-florist-with-beautiful-flowers_23-2149247524.jpg?_wi=1"
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardThree
+      <ProductCardFour
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
+      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",          name: "Royal Rose Ensemble",          price: "KSh 4,500",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-florist-with-beautiful-flowers_23-2149247524.jpg"},
-        {
-          id: "p2",          name: "Spring Morning Bliss",          price: "KSh 3,800",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-pink-gerbera-rose-flower-bouquet_23-2148075276.jpg"},
-        {
-          id: "p3",          name: "Orchid Sophistication",          price: "KSh 5,200",          imageSrc: "http://img.b2bpic.net/free-photo/everyday-bath-utensils-dark-marble-background_58702-17775.jpg"},
-        {
-          id: "p4",          name: "Exotic Garden Escape",          price: "KSh 6,000",          imageSrc: "http://img.b2bpic.net/free-photo/white-flowers-ceramic-vase-dark-wall_114579-30361.jpg"},
-        {
-          id: "p5",          name: "Artisan Wildflower",          price: "KSh 3,500",          imageSrc: "http://img.b2bpic.net/free-photo/man-holding-watering-can-surrounded-by-plants_23-2148435647.jpg"},
-        {
-          id: "p6",          name: "Signature Bouquet",          price: "KSh 4,200",          imageSrc: "http://img.b2bpic.net/free-photo/minimal-floral-arrangement-red-surface_58702-17403.jpg"},
-      ]}
       title="Curated Floral Collections"
       description="Experience our signature arrangements, meticulously designed with the finest seasonal blooms."
+      products={[
+        { id: "p1", name: "Royal Rose Ensemble", price: "KSh 4,500", variant: "Bouquet", imageSrc: "http://img.b2bpic.net/free-photo/close-up-florist-with-beautiful-flowers_23-2149247524.jpg?_wi=2" },
+        { id: "p2", name: "Spring Morning Bliss", price: "KSh 3,800", variant: "Bouquet", imageSrc: "http://img.b2bpic.net/free-photo/close-up-pink-gerbera-rose-flower-bouquet_23-2148075276.jpg?_wi=1" },
+        { id: "p3", name: "Orchid Sophistication", price: "KSh 5,200", variant: "Arrangement", imageSrc: "http://img.b2bpic.net/free-photo/everyday-bath-utensils-dark-marble-background_58702-17775.jpg" }
+      ]}
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardThree
+      <PricingCardTwo
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
-      plans={[
-        {
-          id: "basic",          price: "KSh 10,000/mo",          name: "Home Essential",          features: [
-            "Weekly fresh stems",            "Standard delivery",            "Floral care guide"],
-          buttons: [
-            {
-              text: "Subscribe"},
-          ],
-        },
-        {
-          id: "pro",          price: "KSh 25,000/mo",          name: "Boutique Signature",          features: [
-            "Bi-weekly premium arrangements",            "Priority delivery",            "Custom fragrance choice"],
-          buttons: [
-            {
-              text: "Subscribe"},
-          ],
-        },
-        {
-          id: "enterprise",          price: "KSh 50,000/mo",          name: "Corporate Lux",          features: [
-            "Weekly custom floral installations",            "Same-day priority support",            "Seasonal event planning"],
-          buttons: [
-            {
-              text: "Subscribe"},
-          ],
-        },
-      ]}
       title="Floral Subscription Services"
-      description="Fresh arrangements delivered to your doorstep weekly, monthly, or seasonally."
+      description="Fresh arrangements delivered weekly to your doorstep in Westlands."
+      plans={[
+        { id: "basic", badge: "Essential", price: "KSh 10,000", subtitle: "Weekly fresh stems", buttons: [{ text: "Select" }], features: ["Fresh stems", "Standard delivery", "Care guide"] },
+        { id: "pro", badge: "Signature", price: "KSh 25,000", subtitle: "Boutique arrangements", buttons: [{ text: "Select" }], features: ["Bi-weekly blooms", "Priority delivery", "Custom fragrance"] }
+      ]}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
+      <MetricCardEleven
+      title="Our Impact"
+      description="Measuring the growth and joy we bring to Westlands."
+      animationType="slide-up"
       useInvertedBackground={false}
-      title="By The Numbers"
+      textboxLayout="default"
-      tag="Our Impact"
       metrics={[
-        {
+        { id: "m1", value: "15,000+", title: "Happy Clients", description: "Serving the Westlands community since inception.", imageSrc: "http://img.b2bpic.net/free-photo/flower-arrangement-fresh-flowers-pumpkin_169016-5452.jpg?_wi=2" },
-          id: "m1",          value: "15,000+",          description: "Happy Floral Clients"},
+        { id: "m2", value: "200+", title: "Designs", description: "Signature floral artistry from Shamneel Court.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-pink-gerbera-rose-flower-bouquet_23-2148075276.jpg?_wi=2" }
-        {
-          id: "m2",          value: "200+",          description: "Signature Designs"},
-        {
-          id: "m3",          value: "50+",          description: "Corporate Partners"},
       ]}
-      metricsAnimation="slide-up"
     />
   </div>
 
   <div id="team" data-section="team">
-      <TeamCardTen
+      <TeamCardEleven
+      title="Our Florists"
+      description="The passionate hands behind our floral designs."
+      animationType="slide-up"
+      textboxLayout="split"
       useInvertedBackground={false}
-      title="The Artistry Team"
+      groups={[
-      tag="Meet the Florists"
+        { id: "g1", groupTitle: "Design Team", members: [{ id: "m1", title: "Elena M.", subtitle: "Lead Designer", detail: "Expert in curated floral installations.", imageSrc: "http://img.b2bpic.net/free-photo/cute-florist-arranging-bouquet_23-2147760997.jpg" }] }
-      members={[
-        {
-          id: "t1",          name: "Elena M.",          imageSrc: "http://img.b2bpic.net/free-photo/cute-florist-arranging-bouquet_23-2147760997.jpg"},
-        {
-          id: "t2",          name: "Samuel K.",          imageSrc: "http://img.b2bpic.net/young-beautiful-african-woman-florist-taking-care-flowers-workplace-white-wall_176420-12277.jpg"},
-        {
-          id: "t3",          name: "Grace W.",          imageSrc: "http://img.b2bpic.net/portriat-beautiful-business-woman-standing_23-2148317282.jpg"},
       ]}
-      memberVariant="card"
-      membersAnimation="slide-up"
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
+      <TestimonialCardSixteen
+      title="Client Stories"
+      description="Why choose Westlands Floral?"
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
-      testimonials={[
+      kpiItems={[
-        {
+        { value: "5.0", label: "Rated" },
-          id: "t1",          name: "Sarah J.",          handle: "@sarah_j",          testimonial: "Absolutely breathtaking arrangements, they made our anniversary special.",          rating: 5,
+        { value: "100%", label: "Freshness" },
-          imageSrc: "http://img.b2bpic.net/happy-excited-woman-with-short-hair-holding-bouquet-flowers-paper-bag-with-gifts-smiling-cheerfully_141793-111443.jpg"},
+        { value: "15k+", label: "Clients" }
-        {
+      ]}
-          id: "t2",          name: "Mark D.",          handle: "@mark_d",          testimonial: "Best service in Westlands. Always fresh and on time.",          rating: 5,
+      testimonials={[
-          imageSrc: "http://img.b2bpic.net/medium-shot-bride-posing-with-flowers_23-2150312107.jpg"},
+        { id: "t1", name: "Sarah J.", role: "Local Resident", company: "Westlands", rating: 5, imageSrc: "http://img.b2bpic.net/happy-excited-woman-with-short-hair-holding-bouquet-flowers-paper-bag-with-gifts-smiling-cheerfully_141793-111443.jpg" }
-        {
-          id: "t3",          name: "Linda P.",          handle: "@linda_p",          testimonial: "Westlands Floral is our go-to for corporate office decor.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/medium-shot-happy-women-looking-tablet_23-2148377329.jpg"},
-        {
-          id: "t4",          name: "Tom O.",          handle: "@tom_o",          testimonial: "Unique, high-quality blooms that truly brighten our home.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/attractive-dreamy-woman-with-bouquet-flowers_23-2148079365.jpg"},
-        {
-          id: "t5",          name: "Alice N.",          handle: "@alice_n",          testimonial: "Stunning aesthetics! Their eye for detail is unmatched.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/young-beautiful-woman-dress-holding-present-bouquet-red-roses-looking-camera-happy-cheerful-smiling-broadly-valentines-day-concept-standing-purple-wall_141793-59204.jpg"},
       ]}
-      showRating={true}
-      title="Client Stories"
-      description="See why our clients choose Westlands Floral for their special moments."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqSplitMedia
-      textboxLayout="default"
+      title="Common Questions"
+      description="Get to know more about our floral boutique services."
+      faqsAnimation="slide-up"
+      textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "f1", title: "Where are you located?", content: "We are based at Shamneel Court, Westlands, Nairobi." },
-          id: "f1",          title: "Do you offer same-day delivery?",          content: "Yes, we provide same-day flower delivery across Westlands for orders placed before 2 PM."},
+        { id: "f2", title: "How do I contact you?", content: "Reach us via hello@westlandsfloral.com or call +254 700 000 000." }
-        {
-          id: "f2",          title: "How long do the flowers last?",          content: "With proper care as guided, our premium blooms typically last 7-10 days."},
-        {
-          id: "f3",          title: "Do you cater for events?",          content: "Absolutely! We specialize in customized floral designs for events of all scales."},
       ]}
-      title="Common Questions"
+      imageSrc="http://img.b2bpic.net/free-photo/white-flowers-ceramic-vase-dark-wall_114579-30361.jpg"
-      faqsAnimation="slide-up"
-      description="Everything you need to know about our services and floral care."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCenter
+      title="Contact Us"
+      description="Visit us in Westlands for custom floral arrangements."
+      tag="Get In Touch"
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient"}}
-      text="Visit our boutique at Shamneel Court, Westlands. Reach us at hello@westlandsfloral.com or +254 700 000 000."
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterSimple
-      logoText="Westlands Floral"
+      columns={[
-      leftLink={{
+        { title: "Location", items: [{ label: "Shamneel Court, Westlands" }, { label: "Nairobi, Kenya" }] },
-        text: "Privacy Policy",        href: "#"}}
+        { title: "Contact", items: [{ label: "hello@westlandsfloral.com" }, { label: "+254 700 000 000" }] }
-      rightLink={{
+      ]}
-        text: "Terms of Service",        href: "#"}}
+      bottomLeftText="© 2024 Westlands Floral"
+      bottomRightText="All rights reserved."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #fdf8f5;
-  --card: #dad6cd;
+  --card: #fffcf9;
-  --foreground: #2a2928;
+  --foreground: #4a433f;
-  --primary-cta: #2a2928;
+  --primary-cta: #c6a89d;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #ede7e3;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
+  --accent: #e8dcd6;
-  --background-accent: #c6b180;
+  --background-accent: #f2e9e4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);