Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8162c6fc26 | |||
| 59da72b2dd | |||
| f0d886df70 | |||
| cc5cc6283c |
356
src/app/page.tsx
356
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 FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import { Music, Headphones } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
background="noise"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop",
|
||||
id: "#products",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "#testimonials",
|
||||
},
|
||||
]}
|
||||
brandName="Aura Audio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Products", id: "#products" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Aura Audio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Aura Audio: Precision in Every Note"
|
||||
description="Experience sound redefined. Engineered for the purists, designed for the bold. Step into an immersive 3D soundscape."
|
||||
buttons={[
|
||||
{
|
||||
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="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
title="Immersive 3D Audio, Redefined"
|
||||
description="Step into the future of sound with Aura. Precision engineering meets industrial design for an unparalleled listening experience."
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
avatars={[]}
|
||||
buttons={[{ text: "Explore Collection", href: "#products" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Aura Noise Cancellation",
|
||||
description: "Silence the world with our industry-leading active noise cancellation technology.",
|
||||
tag: "ANC",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-futuristic-background-with-flowing-particles-data-science_1048-18193.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Crystal Drivers",
|
||||
description: "High-fidelity titanium-coated drivers for unparalleled clarity and depth.",
|
||||
tag: "Audio",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-musical-instrument-audio-mixer-sound-equalizer-analog-modular-synthesizer_1381-2.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Ergonomic Comfort",
|
||||
description: "Memory-foam ear cups designed for extended listening sessions in complete comfort.",
|
||||
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",
|
||||
},
|
||||
]}
|
||||
title="Engineering Mastery"
|
||||
description="Where advanced audio technology meets timeless aesthetic craftsmanship."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
title="Designed for the Purist"
|
||||
description="Industrial aesthetics paired with professional acoustic performance."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
tag: "3D Spatial",
|
||||
title: "Spatial Audio",
|
||||
subtitle: "360-degree sound",
|
||||
description: "Experience deep, immersive 3D soundscapes.",
|
||||
},
|
||||
{
|
||||
tag: "Build",
|
||||
title: "Industrial Design",
|
||||
subtitle: "Premium materials",
|
||||
description: "Durable, high-quality materials built to last.",
|
||||
},
|
||||
{
|
||||
tag: "Acoustic",
|
||||
title: "Pure Fidelity",
|
||||
subtitle: "Studio quality",
|
||||
description: "Unmatched precision for every frequency.",
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Apex Pro",
|
||||
price: "$399",
|
||||
variant: "Midnight Black",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/music-arrangement-with-black-headphones_23-2148785720.jpg",
|
||||
},
|
||||
{
|
||||
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="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
title="Flagship Series"
|
||||
description="The latest in headphone technology."
|
||||
gridVariant="bento-grid"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ 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" },
|
||||
{ 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" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
handle: "@audiophile_sarah",
|
||||
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",
|
||||
},
|
||||
{
|
||||
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="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
title="Professional Approval"
|
||||
description="Hear from the artists who rely on Aura."
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex Rivera", role: "Producer", testimonial: "The accuracy is unmatched. Aura has become a staple in my studio.", icon: Music },
|
||||
{ id: "2", name: "Sarah Chen", role: "Audiophile", testimonial: "The immersive 3D soundstage is truly unlike anything else.", icon: Headphones }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Stay Connected"
|
||||
description="Join our newsletter for early access to product drops and expert audio tips."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-lady-with-headphones-posing-while-standing-red-blouse_176474-25125.jpg?_wi=2"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
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="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Join Us"
|
||||
title="Ready to Upgrade?"
|
||||
description="Get exclusive early access to our premium launches."
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Aura Audio"
|
||||
copyrightText="© 2025 Aura Audio. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Aura Audio"
|
||||
columns={[
|
||||
{ items: [{ label: "Shop", href: "#products" }, { label: "Support" }] },
|
||||
{ items: [{ label: "About Us" }, { label: "Careers" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #060000;
|
||||
--card: #1d0d0d;
|
||||
--foreground: #ffe6e6;
|
||||
--primary-cta: #ff3d4a;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #ffffff;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #1f0a0a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #ffe6e6;
|
||||
--accent: #7b2d2d;
|
||||
--background-accent: #b8111f;
|
||||
--accent: #3b82f6;
|
||||
--background-accent: #1f2937;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user