Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,15 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { Award, Heart, Sparkles } from "lucide-react";
+import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import { Heart, Camera, Instagram, Pin } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -30,46 +32,25 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Collection",          id: "products"},
-        {
-          name: "Custom",          id: "custom"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "hero" },
+        { name: "Collection", id: "products" },
+        { name: "About", id: "about" },
+        { name: "Team", id: "team" },
+        { name: "Contact", id: "contact" },
       ]}
-      brandName="aesthetic vibes"
+      brandName="bde.beads"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardTestimonial
-      background={{
-        variant: "gradient-bars"}}
-      title="aesthetic posters & jewelry for people who feel everything"
-      description="we make things for your space and your soul. handmade, music-inspired, and full of feelings."
-      testimonials={[
-        {
-          name: "maya r.",          handle: "@mayacreates",          testimonial: "the poster i got is literally my personality on a wall.",          rating: 5,
-        },
-        {
-          name: "leo k.",          handle: "@leosounds",          testimonial: "obsessed with these phone charms. such a vibe.",          rating: 5,
-        },
-        {
-          name: "sam v.",          handle: "@samvibe",          testimonial: "so unique, handmade with so much heart.",          rating: 5,
-        },
-        {
-          name: "chloe j.",          handle: "@cjstyle",          testimonial: "love everything this brand stands for.",          rating: 5,
-        },
-        {
-          name: "alex d.",          handle: "@alexnotes",          testimonial: "fast shipping and the packaging was so cute.",          rating: 5,
-        },
-      ]}
-      buttons={[
-        {
-          text: "explore the collection",          href: "#products"},
-      ]}
+      background={{ variant: "gradient-bars" }}
+      title="bde.beads | handmade jewelry & music-inspired art"
+      description="a student-led collective turning raw emotion into physical pieces. we've raised 20,000 rupees for the apni shaala foundation."
+      tag="community driven"
+      tagIcon={Heart}
+      testimonials={[]}
+      buttons={[{ text: "shop now", href: "#products" }, { text: "our mission", href: "#community" }]}
       imageSrc="http://img.b2bpic.net/free-photo/cement-texture_1194-6508.jpg"
     />
   </div>
@@ -77,9 +58,25 @@ export default function LandingPage() {
   <div id="about" data-section="about">
       <TextSplitAbout
       useInvertedBackground={false}
-      title="about us"
+      title="about our mission"
       description={[
-        "we are a small student-run collective turning raw emotion into physical pieces.",        "from the posters that define your music taste to the jewelry that accessorizes your day, we do it all with care."]}
+        "bde.beads started as a passion project among students. we believe in the power of creative expression and social responsibility.",        "by choosing our handmade beads and art, you support the apni shaala foundation, an organization that empowers students through social-emotional learning. we are proud to have raised over 20,000 rupees together."
+      ]}
+    />
+  </div>
+
+  <div id="team" data-section="team">
+    <TeamCardTwo
+      title="meet the team"
+      description="the students behind the vision. each piece is crafted with love."
+      gridVariant="four-items-2x2-equal-grid"
+      animationType="slide-up"
+      useInvertedBackground={false}
+      textboxLayout="split"
+      members={[
+        { id: "t1", name: "saachi hegde", role: "head of finance ", description: "head of finance and a designer because hiring one isn't in the budget", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ0RqxQgg8jaP76cIrkZlIiUrM/uploaded-1774775522886-gwm8x95t.png" },
+        { id: "t2", name: "kyra pinto", role: "head of publicity", description: "head of publicity –– professionally scrolling on instagram", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ0RqxQgg8jaP76cIrkZlIiUrM/uploaded-1774776205092-clry7cqg.png" }
+      ]}
     />
   </div>
 
@@ -87,42 +84,43 @@ export default function LandingPage() {
       <ProductCardTwo
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="bento-grid"
+      gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",          brand: "poster",          name: "indie midnight",          price: "$15",          rating: 5,
-          reviewCount: "12",          imageSrc: "http://img.b2bpic.net/free-psd/music-event-poster-template_23-2150981270.jpg?_wi=1"},
-        {
-          id: "p2",          brand: "jewelry",          name: "sky beads",          price: "$12",          rating: 5,
-          reviewCount: "8",          imageSrc: "http://img.b2bpic.net/free-photo/overhead-shot-old-book-vintage-setting_181624-61097.jpg"},
-        {
-          id: "p3",          brand: "jewelry",          name: "daisy chain",          price: "$18",          rating: 5,
-          reviewCount: "15",          imageSrc: "http://img.b2bpic.net/free-photo/sensual-elegant-lady-woman-wearing-stylish-boho-top_291049-25.jpg"},
+        { id: "p1", brand: "jewelry", name: "sky beads", price: "$12", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/overhead-shot-old-book-vintage-setting_181624-61097.jpg?_wi=1" },
+        { id: "p2", brand: "jewelry", name: "moon beads", price: "$15", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/overhead-shot-old-book-vintage-setting_181624-61097.jpg?_wi=2" },
+        { id: "p3", brand: "jewelry", name: "sun beads", price: "$10", rating: 4, reviewCount: "5", imageSrc: "http://img.b2bpic.net/free-photo/overhead-shot-old-book-vintage-setting_181624-61097.jpg?_wi=3" }
       ]}
-      title="the moodboard"
-      description="what we are currently making. check the vibes."
+      title="the collection"
+      description="hand-crafted beads and art for your unique aesthetic."
     />
   </div>
 
-  <div id="custom" data-section="custom">
+  <div id="events" data-section="events">
       <FeatureCardTwentyOne
-      useInvertedBackground={false}
-      title="custom orders"
-      description="have an artist or a song in mind? we turn your sonic memories into custom posters."
-      accordionItems={[
-        {
-          id: "c1",          title: "step 1: dm us",          content: "slide into our dms on instagram with the artist/song vibe."},
-        {
-          id: "c2",          title: "step 2: we curate",          content: "we sketch a concept based on your aesthetic."},
-        {
-          id: "c3",          title: "step 3: it's yours",          content: "we bring it to life and mail it your way."},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-psd/music-event-poster-template_23-2150981270.jpg?_wi=2"
+      useInvertedBackground={true}
+      title="event highlights"
+      description="photos from our recent pop-ups and student events."
+      accordionItems={[]}
+      imageSrc="https://images.unsplash.com/photo-1511578314322-37d9b57ca68f?w=800"
       mediaAnimation="slide-up"
     />
   </div>
 
+  <div id="testimonials" data-section="testimonials">
+      <TestimonialCardThirteen
+      title="customer love"
+      description="what our community says about bde.beads."
+      showRating={true}
+      animationType="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={false}
+      testimonials={[
+          { id: "v1", name: "maya r.", handle: "@mayacreates", testimonial: "the beads are so beautiful, and i love the cause!", rating: 5 }
+      ]}
+      />
+  </div>
+
   <div id="community" data-section="community">
       <MetricCardOne
       animationType="slide-up"
@@ -130,58 +128,35 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",          value: "10%",          title: "profit donated",          description: "to apni shaala foundation",          icon: Heart,
-        },
-        {
-          id: "m2",          value: "50+",          title: "students helped",          description: "directly through our impact",          icon: Award,
-        },
-        {
-          id: "m3",          value: "100%",          title: "handmade",          description: "by students, for students",          icon: Sparkles,
-        },
+        { id: "m1", value: "20k+", title: "rupees raised", description: "donated to apni shaala foundation", icon: Heart },
       ]}
-      title="more than just stuff"
-      description="we support apni shaala foundation with every purchase, helping empower students through social-emotional learning."
+      title="our impact"
+      description="every purchase helps fund social-emotional education."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient"}}
-      tag="get in touch"
-      title="dm us to order"
-      description="the link to our shop is our dms. catch us on instagram or comment on our latest reel to claim your favorite piece."
-      mediaPosition="right"
-      imageSrc="http://img.b2bpic.net/free-photo/hunger-relief-aid-handicapped_482257-76343.jpg"
-      mediaAnimation="slide-up"
-    />
+      <ContactSplitForm
+        title="contact us"
+        description="dm us or use the form to place your custom order."
+        inputs={[
+            { name: "name", type: "text", placeholder: "name" },
+            { name: "email", type: "email", placeholder: "email" }
+        ]}
+        textarea={{ name: "message", placeholder: "how can we help you?" }}
+        useInvertedBackground={false}
+      />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "brand",          items: [
-            {
-              label: "instagram",              href: "#"},
-            {
-              label: "tiktok",              href: "#"},
-          ],
-        },
-        {
-          title: "legal",          items: [
-            {
-              label: "privacy",              href: "#"},
-            {
-              label: "shipping",              href: "#"},
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 student collective"
-      bottomRightText="made with love"
-    />
+      <FooterCard
+        logoText="bde.beads"
+        socialLinks={[
+            { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+            { icon: Pin, href: "#", ariaLabel: "Pinterest" }
+        ]}
+        copyrightText="© 2024 bde.beads | supporting education"
+      />
   </div>
       </ReactLenis>
     </ThemeProvider>