Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,266 +2,130 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroCentered from '@/components/sections/hero/HeroCentered';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import { Music, Headphones } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="bounce-effect"
+        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
+        borderRadius="pill"
-        contentWidth="small"
+        contentWidth="mediumLarge"
         sizing="largeSizeMediumTitles"
-        background="noiseDiagonalGradient"
+        background="noise"
-        cardStyle="outline"
+        cardStyle="glass-depth"
-        primaryButtonStyle="diagonal-gradient"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
-        headingFontWeight="bold"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleApple
+            <NavbarStyleApple
-      navItems={[
+                navItems={[
-        {
+                    { name: "Products", id: "#products" },
-          name: "Shop",
+                    { name: "Features", id: "#features" },
-          id: "#products",
+                    { name: "Testimonials", id: "#testimonials" },
-        },
+                    { name: "Contact", id: "#contact" }
-        {
+                ]}
-          name: "Features",
+                brandName="Aura Audio"
-          id: "#features",
+            />
-        },
+        </div>
-        {
-          name: "Reviews",
-          id: "#testimonials",
-        },
-      ]}
-      brandName="Aura Audio"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroBillboardGallery
+            <HeroCentered
-      background={{
+                title="Immersive 3D Audio, Redefined"
-        variant: "gradient-bars",
+                description="Step into the future of sound with Aura. Precision engineering meets industrial design for an unparalleled listening experience."
-      }}
+                background={{ variant: "canvas-reveal" }}
-      title="Aura Audio: Precision in Every Note"
+                avatars={[]}
-      description="Experience sound redefined. Engineered for the purists, designed for the bold. Step into an immersive 3D soundscape."
+                buttons={[{ text: "Explore Collection", href: "#products" }]}
-      buttons={[
+            />
-        {
+        </div>
-          text: "Shop Collection",
-          href: "#products",
-        },
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-lady-with-headphones-posing-while-standing-red-blouse_176474-25125.jpg?_wi=1",
-          imageAlt: "Premium headphones floating",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-brunette-woman-listens-music-wireless-headphones-has-new_1258-201367.jpg",
-          imageAlt: "Headband detail",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-senior-woman-listening-music-though-headphones_23-2149095429.jpg",
-          imageAlt: "Side profile shot",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-fitness-woman-wearing-sportsbra-listening-music-headphones-working-out_1258-189453.jpg?_wi=1",
-          imageAlt: "Top-down view",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-audio-equipment-sound-control-concept_169016-20620.jpg",
-          imageAlt: "Control interface detail",
-        },
-      ]}
-      mediaAnimation="slide-up"
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardMedia
+            <FeatureCardNineteen
-      animationType="slide-up"
+                title="Designed for the Purist"
-      textboxLayout="split"
+                description="Industrial aesthetics paired with professional acoustic performance."
-      useInvertedBackground={false}
+                textboxLayout="split"
-      features={[
+                useInvertedBackground={true}
-        {
+                features={[
-          id: "f1",
+                    { 
-          title: "Aura Noise Cancellation",
+                        tag: "3D Spatial", 
-          description: "Silence the world with our industry-leading active noise cancellation technology.",
+                        title: "Spatial Audio", 
-          tag: "ANC",
+                        subtitle: "360-degree sound", 
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-futuristic-background-with-flowing-particles-data-science_1048-18193.jpg",
+                        description: "Experience deep, immersive 3D soundscapes.", 
-        },
+                    },
-        {
+                    { 
-          id: "f2",
+                        tag: "Build", 
-          title: "Crystal Drivers",
+                        title: "Industrial Design", 
-          description: "High-fidelity titanium-coated drivers for unparalleled clarity and depth.",
+                        subtitle: "Premium materials", 
-          tag: "Audio",
+                        description: "Durable, high-quality materials built to last.", 
-          imageSrc: "http://img.b2bpic.net/free-photo/electronic-musical-instrument-audio-mixer-sound-equalizer-analog-modular-synthesizer_1381-2.jpg",
+                    },
-        },
+                    { 
-        {
+                        tag: "Acoustic", 
-          id: "f3",
+                        title: "Pure Fidelity", 
-          title: "Ergonomic Comfort",
+                        subtitle: "Studio quality", 
-          description: "Memory-foam ear cups designed for extended listening sessions in complete comfort.",
+                        description: "Unmatched precision for every frequency.", 
-          tag: "Comfort",
+                    }
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-fitness-woman-wearing-sportsbra-listening-music-headphones-working-out_1258-189453.jpg?_wi=2",
+                ]}
-        },
+            />
-      ]}
+        </div>
-      title="Engineering Mastery"
-      description="Where advanced audio technology meets timeless aesthetic craftsmanship."
-    />
-  </div>
 
-  <div id="products" data-section="products">
+        <div id="products" data-section="products">
-      <ProductCardFour
+            <ProductCardTwo
-      animationType="slide-up"
+                title="Flagship Series"
-      textboxLayout="default"
+                description="The latest in headphone technology."
-      gridVariant="uniform-all-items-equal"
+                gridVariant="bento-grid"
-      useInvertedBackground={false}
+                animationType="blur-reveal"
-      products={[
+                textboxLayout="default"
-        {
+                useInvertedBackground={false}
-          id: "p1",
+                products={[
-          name: "Apex Pro",
+                    { id: "1", brand: "Aura", name: "Sonic Zenith", price: "$499", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/music-arrangement-with-black-headphones_23-2148785720.jpg" },
-          price: "$399",
+                    { id: "2", brand: "Aura", name: "Titan Pro", price: "$399", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722706.jpg" }
-          variant: "Midnight Black",
+                ]}
-          imageSrc: "http://img.b2bpic.net/free-photo/music-arrangement-with-black-headphones_23-2148785720.jpg",
+            />
-        },
+        </div>
-        {
-          id: "p2",
-          name: "Solo Zen",
-          price: "$299",
-          variant: "Matte Grey",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722706.jpg",
-        },
-        {
-          id: "p3",
-          name: "Urban Pulse",
-          price: "$249",
-          variant: "Satin Silver",
-          imageSrc: "http://img.b2bpic.net/free-photo/sporty-thoughtful-woman-with-curly-hair-listens-audio-track-wireless-headphones-touches-neck-concentrated-down-takes-break-after-workout_273609-55587.jpg",
-        },
-        {
-          id: "p4",
-          name: "Studio Master",
-          price: "$449",
-          variant: "Titanium",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-holding-vinyl-disc_23-2148432082.jpg",
-        },
-        {
-          id: "p5",
-          name: "Bass Flow",
-          price: "$199",
-          variant: "Deep Red",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072178.jpg",
-        },
-        {
-          id: "p6",
-          name: "Titanium X",
-          price: "$599",
-          variant: "Brushed Steel",
-          imageSrc: "http://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170095.jpg",
-        },
-      ]}
-      title="Flagship Series"
-      description="Discover our curated collection of professional studio-grade headphones."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
+            <TestimonialCardTwo
-      animationType="slide-up"
+                title="Professional Approval"
-      textboxLayout="default"
+                description="Hear from the artists who rely on Aura."
-      useInvertedBackground={false}
+                animationType="depth-3d"
-      testimonials={[
+                textboxLayout="split"
-        {
+                useInvertedBackground={true}
-          id: "t1",
+                testimonials={[
-          name: "Sarah J.",
+                    { id: "1", name: "Alex Rivera", role: "Producer", testimonial: "The accuracy is unmatched. Aura has become a staple in my studio.", icon: Music },
-          handle: "@audiophile_sarah",
+                    { id: "2", name: "Sarah Chen", role: "Audiophile", testimonial: "The immersive 3D soundstage is truly unlike anything else.", icon: Headphones }
-          testimonial: "The soundstage is absolutely unparalleled. I hear details I never noticed before.",
+                ]}
-          rating: 5,
+            />
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-adjusting-headphones-white-t-shirt-looking-merry-front-view_176474-93420.jpg",
+        </div>
-        },
-        {
-          id: "t2",
-          name: "Michael R.",
-          handle: "@mastering_pro",
-          testimonial: "My go-to choice for mastering sessions. The accuracy is spot on every single time.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-musician-wearing-headphones_23-2150206723.jpg",
-        },
-        {
-          id: "t3",
-          name: "Emily Chen",
-          handle: "@creative_em",
-          testimonial: "These headphones changed how I produce. Comfort and sound quality are both 10/10.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket_23-2149020794.jpg",
-        },
-        {
-          id: "t4",
-          name: "David W.",
-          handle: "@dave_beats",
-          testimonial: "Incredible durability and comfort. Best investment for my studio setup.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer_627829-2788.jpg",
-        },
-        {
-          id: "t5",
-          name: "Jessica L.",
-          handle: "@jess_studio",
-          testimonial: "Stylish, sleek, and sound like a dream. Aura Audio exceeded all my expectations.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-recording-studio-music-production_1303-20393.jpg",
-        },
-      ]}
-      showRating={true}
-      title="Voices of Excellence"
-      description="See why audio professionals and music lovers choose Aura Audio."
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactSplitForm
+            <ContactCenter
-      useInvertedBackground={false}
+                tag="Join Us"
-      title="Stay Connected"
+                title="Ready to Upgrade?"
-      description="Join our newsletter for early access to product drops and expert audio tips."
+                description="Get exclusive early access to our premium launches."
-      imageSrc="http://img.b2bpic.net/free-photo/young-lady-with-headphones-posing-while-standing-red-blouse_176474-25125.jpg?_wi=2"
+                background={{ variant: "canvas-reveal" }}
-      inputs={[
+                useInvertedBackground={true}
-        {
+            />
-          name: "name",
+        </div>
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Tell us about your audio journey...",
-        rows: 4,
-        required: false,
-      }}
-      buttonText="Subscribe Now"
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterCard
+            <FooterLogoEmphasis
-      logoText="Aura Audio"
+                logoText="Aura Audio"
-      copyrightText="© 2025 Aura Audio. All rights reserved."
+                columns={[
-    />
+                    { items: [{ label: "Shop", href: "#products" }, { label: "Support" }] },
-  </div>
+                    { items: [{ label: "About Us" }, { label: "Careers" }] }
+                ]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #060000;
+  --background: #0a0a0a;
-  --card: #1d0d0d;
+  --card: #1a1a1a;
-  --foreground: #ffe6e6;
+  --foreground: #ffffff;
-  --primary-cta: #ff3d4a;
+  --primary-cta: #ffffff;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #1f0a0a;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffe6e6;
-  --accent: #7b2d2d;
+  --accent: #3b82f6;
-  --background-accent: #b8111f;
+  --background-accent: #1f2937;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);