Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -3,14 +3,14 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import { CheckCircle, Facebook, Instagram, Sparkles, Star } from "lucide-react";
+import { CheckCircle, Sparkles, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -20,99 +20,35 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="small"
         sizing="mediumLargeSizeLargeTitles"
-        background="blurBottom"
+        background="none"
-        cardStyle="gradient-bordered"
+        cardStyle="outline"
         primaryButtonStyle="flat"
         secondaryButtonStyle="glass"
-        headingFontWeight="semibold"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "About", id: "about" },
-          id: "hero",
+        { name: "Collection", id: "products" },
-        },
+        { name: "Testimonials", id: "testimonials" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Collection",
-          id: "products",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Handmade Haven"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroCentered
+      <HeroLogoBillboard
-      background={{
+      logoText="Handmade Haven"
-        variant: "gradient-bars",
-      }}
-      title="Artisanal Decor for Every Corner"
       description="Discover unique, handmade home accents crafted with love and attention to detail. Elevate your living space with pieces that tell a story."
-      avatars={[
+      buttons={[{ text: "Shop Collection", href: "#products" }]}
-        {
+      background={{ variant: "plain" }}
-          src: "http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139097.jpg",
+      imageSrc="http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139097.jpg"
-          alt: "Customer",
+      imageAlt="Handmade decor collection"
-        },
+      mediaAnimation="opacity"
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-indoors_23-2149637983.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/healthy-lifestyle-sustained-home_23-2149362443.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/cheerful-women-doing-paperwork_23-2147727718.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139097.jpg",
-          alt: "Customer",
-        },
-      ]}
-      avatarText="Loved by 500+ happy homes"
-      buttons={[
-        {
-          text: "Shop Collection",
-          href: "#products",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Handcrafted Excellence",
-        },
-        {
-          type: "text",
-          text: "Sustainable Materials",
-        },
-        {
-          type: "text",
-          text: "Unique Designs",
-        },
-        {
-          type: "text",
-          text: "Artisan Quality",
-        },
-        {
-          type: "text",
-          text: "Made with Love",
-        },
-      ]}
     />
   </div>
 
@@ -121,51 +57,24 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Craftsmanship at its Core"
       metrics={[
-        {
+        { icon: Sparkles, label: "Unique Pieces", value: "150+" },
-          icon: Sparkles,
+        { icon: CheckCircle, label: "Happy Customers", value: "500+" },
-          label: "Unique Pieces",
+        { icon: Star, label: "Five Star Ratings", value: "4.9" },
-          value: "150+",
-        },
-        {
-          icon: CheckCircle,
-          label: "Happy Customers",
-          value: "500+",
-        },
-        {
-          icon: Star,
-          label: "Five Star Ratings",
-          value: "4.9",
-        },
       ]}
-      metricsAnimation="slide-up"
+      metricsAnimation="opacity"
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardThree
+      <ProductCardFour
-      animationType="slide-up"
+      animationType="opacity"
-      textboxLayout="default"
+      textboxLayout="split"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "1", name: "Ceramic Vase", price: "$45", variant: "Handmade", imageSrc: "http://img.b2bpic.net/free-photo/professional-artisan-job-workshop_23-2148801608.jpg" },
-          id: "1",
+        { id: "2", name: "Woven Wall Hanging", price: "$80", variant: "Handmade", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-working-dreamcatcher_23-2149281483.jpg" },
-          name: "Ceramic Vase",
+        { id: "3", name: "Handmade Candle Holder", price: "$35", variant: "Handmade", imageSrc: "http://img.b2bpic.net/free-photo/decorative-wedding-cake-with-wedding-cake-wooden-table_23-2147975494.jpg" },
-          price: "$45",
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-artisan-job-workshop_23-2148801608.jpg",
-        },
-        {
-          id: "2",
-          name: "Woven Wall Hanging",
-          price: "$80",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-working-dreamcatcher_23-2149281483.jpg",
-        },
-        {
-          id: "3",
-          name: "Handmade Candle Holder",
-          price: "$35",
-          imageSrc: "http://img.b2bpic.net/free-photo/decorative-wedding-cake-with-wedding-cake-wooden-table_23-2147975494.jpg",
-        },
       ]}
       title="Latest Creations"
       description="Browse our curated selection of hand-crafted home decor items."
@@ -173,130 +82,49 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+      <TestimonialCardThirteen
-      animationType="slide-up"
+      animationType="opacity"
-      textboxLayout="default"
+      textboxLayout="split"
       useInvertedBackground={false}
+      showRating={true}
       testimonials={[
-        {
+        { id: "1", name: "Emily R.", handle: "@emilyr", testimonial: "Absolutely stunning pieces! So much care in every detail.", rating: 5 },
-          id: "1",
+        { id: "2", name: "Mark S.", handle: "@marks", testimonial: "Perfect addition to my living room. Quality is unmatched.", rating: 5 },
-          name: "Emily R.",
-          role: "Designer",
-          company: "Home Owner",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139097.jpg?_wi=1",
-        },
-        {
-          id: "2",
-          name: "Mark S.",
-          role: "Architect",
-          company: "Home Owner",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-indoors_23-2149637983.jpg",
-        },
-        {
-          id: "3",
-          name: "Sarah J.",
-          role: "Blogger",
-          company: "Home Owner",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/healthy-lifestyle-sustained-home_23-2149362443.jpg",
-        },
-        {
-          id: "4",
-          name: "David K.",
-          role: "Photographer",
-          company: "Home Owner",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-women-doing-paperwork_23-2147727718.jpg",
-        },
-        {
-          id: "5",
-          name: "Chloe M.",
-          role: "Collector",
-          company: "Home Owner",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139097.jpg?_wi=2",
-        },
-      ]}
-      kpiItems={[
-        {
-          value: "98%",
-          label: "Client Satisfaction",
-        },
-        {
-          value: "100%",
-          label: "Handmade Guarantee",
-        },
-        {
-          value: "24/7",
-          label: "Support Available",
-        },
       ]}
       title="What Our Community Says"
-      description="Real stories from people who have transformed their homes with our decor."
+      description="Real stories from people who have transformed their homes."
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqDouble
-      textboxLayout="default"
+      textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "1", title: "Are these truly handmade?", content: "Yes, every single piece is handcrafted in our small studio." },
-          id: "1",
+        { id: "2", title: "Do you ship internationally?", content: "Currently, we ship within the continental US." },
-          title: "Are these truly handmade?",
-          content: "Yes, every single piece is handcrafted in our small studio.",
-        },
-        {
-          id: "2",
-          title: "Do you ship internationally?",
-          content: "Currently, we ship within the continental US.",
-        },
-        {
-          id: "3",
-          title: "How long for delivery?",
-          content: "Since pieces are made to order, please allow 7-10 business days.",
-        },
       ]}
       title="Frequently Asked Questions"
-      description="Common questions about our products, shipping, and returns."
+      description="Common questions about our products and shipping."
-      faqsAnimation="slide-up"
+      faqsAnimation="opacity"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCenter
+      tag="Contact Us"
+      title="Need a Custom Piece?"
+      description="Get in touch with us for inquiries or to start your custom decor order."
+      background={{ variant: "plain" }}
       useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      text="Ready to bring handmade warmth into your home? Contact us today for custom orders or inquiries."
-      buttons={[
-        {
-          text: "Send a Message",
-          href: "mailto:hello@handmadehaven.com",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterCard
+      <FooterLogoReveal
       logoText="Handmade Haven"
-      copyrightText="© 2025 Handmade Haven. All rights reserved."
+      leftLink={{ text: "Privacy Policy", href: "#" }}
-      socialLinks={[
+      rightLink={{ text: "Terms & Conditions", href: "#" }}
-        {
-          icon: Instagram,
-          href: "https://instagram.com",
-          ariaLabel: "Instagram",
-        },
-        {
-          icon: Facebook,
-          href: "https://facebook.com",
-          ariaLabel: "Facebook",
-        },
-      ]}
     />
   </div>
       </ReactLenis>