Merge version_1 into main #1
467
src/app/page.tsx
467
src/app/page.tsx
@@ -15,348 +15,151 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="AuraTech"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="AuraTech"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="The Future of Sensory Tech"
|
||||
description="Experience unparalleled luxury with our latest neural-sync innovation. Designed for the elite, built for the future."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-reflections-background_1017-2644.jpg",
|
||||
alt: "AuraTech Launch",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139322.jpg",
|
||||
alt: "Blurred night lights",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/reflections-abstract-background_1017-2648.jpg",
|
||||
alt: "Reflections abstract background",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-render-network-technology-background-with-connecting-lines-dots_1048-14613.jpg",
|
||||
alt: "3D render of a network technology background with connecting lines and dots",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-315237.jpg",
|
||||
alt: "Abstract geometric background shapes or texture.",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Collection",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="The Future of Sensory Tech"
|
||||
description="Experience unparalleled luxury with our latest neural-sync innovation. Designed for the elite, built for the future."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/abstract-reflections-background_1017-2644.jpg", alt: "AuraTech Launch" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139322.jpg", alt: "Blurred night lights" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/reflections-abstract-background_1017-2648.jpg", alt: "Reflections abstract background" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-render-network-technology-background-with-connecting-lines-dots_1048-14613.jpg", alt: "3D render of a network technology background with connecting lines and dots" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-315237.jpg", alt: "Abstract geometric background shapes or texture." }
|
||||
]}
|
||||
buttons={[{ text: "Explore Collection", href: "#products" }, { text: "Learn More", href: "#about" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Neural Sync",
|
||||
description: "Seamless integration with your subconscious.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037196.jpg",
|
||||
},
|
||||
{
|
||||
title: "Quantum Audio",
|
||||
description: "Unmatched sonic clarity across all spectra.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-sale_23-2152027241.jpg",
|
||||
},
|
||||
{
|
||||
title: "Haptic Precision",
|
||||
description: "Feel the interface respond to you.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ice-cube-with-water-drops_628469-366.jpg",
|
||||
},
|
||||
{
|
||||
title: "Adaptive Shielding",
|
||||
description: "Protecting your privacy at the data core.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-neon-sale_23-2152027238.jpg",
|
||||
},
|
||||
{
|
||||
title: "Energy Efficient",
|
||||
description: "High performance with low carbon footprint.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-glowing-red-shield-with-lightning-bolt-icon-cybersecurity-protection_84443-91345.jpg",
|
||||
},
|
||||
]}
|
||||
title="Engineered for Excellence"
|
||||
description="Unrivaled performance integrated into every detail of our hardware."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Neural Sync", description: "Seamless integration with your subconscious.", imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037196.jpg" },
|
||||
{ title: "Quantum Audio", description: "Unmatched sonic clarity across all spectra.", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-sale_23-2152027241.jpg" },
|
||||
{ title: "Haptic Precision", description: "Feel the interface respond to you.", imageSrc: "http://img.b2bpic.net/free-photo/ice-cube-with-water-drops_628469-366.jpg" },
|
||||
{ title: "Adaptive Shielding", description: "Protecting your privacy at the data core.", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-neon-sale_23-2152027238.jpg" },
|
||||
{ title: "Energy Efficient", description: "High performance with low carbon footprint.", imageSrc: "http://img.b2bpic.net/free-photo/3d-glowing-red-shield-with-lightning-bolt-icon-cybersecurity-protection_84443-91345.jpg" },
|
||||
]}
|
||||
title="Engineered for Excellence"
|
||||
description="Unrivaled performance integrated into every detail of our hardware."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Aura Headset",
|
||||
price: "$1,299",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074279.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Aura Watch",
|
||||
price: "$899",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elderly-woman-checking-website-stock-find-items-store-mall_482257-88626.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Aura Interface",
|
||||
price: "$4,999",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-business-desk-with-virtual-reality-headset_23-2148513458.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Aura Lens",
|
||||
price: "$2,199",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-silver-headphones-black-textile_417767-485.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Aura Console",
|
||||
price: "$5,499",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-using-virtual-reality-technology-receive-video-recommendations-delivered-instantly-user_482257-136504.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Aura Beacon",
|
||||
price: "$599",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896832.jpg",
|
||||
},
|
||||
]}
|
||||
title="Premium Collection"
|
||||
description="Discover our most sought-after technological achievements."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{ id: "p1", name: "Aura Headset", price: "$1,299", imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074279.jpg" },
|
||||
{ id: "p2", name: "Aura Watch", price: "$899", imageSrc: "http://img.b2bpic.net/free-photo/elderly-woman-checking-website-stock-find-items-store-mall_482257-88626.jpg" },
|
||||
{ id: "p3", name: "Aura Interface", price: "$4,999", imageSrc: "http://img.b2bpic.net/free-photo/modern-business-desk-with-virtual-reality-headset_23-2148513458.jpg" },
|
||||
{ id: "p4", name: "Aura Lens", price: "$2,199", imageSrc: "http://img.b2bpic.net/free-photo/black-silver-headphones-black-textile_417767-485.jpg" },
|
||||
{ id: "p5", name: "Aura Console", price: "$5,499", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-virtual-reality-technology-receive-video-recommendations-delivered-instantly-user_482257-136504.jpg" },
|
||||
{ id: "p6", name: "Aura Beacon", price: "$599", imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896832.jpg" },
|
||||
]}
|
||||
title="Premium Collection"
|
||||
description="Discover our most sought-after technological achievements."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Exceptional",
|
||||
quote: "The most advanced tech I have ever used.",
|
||||
name: "Sarah Johnson",
|
||||
role: "CEO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13573.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Game Changer",
|
||||
quote: "A complete shift in luxury standards.",
|
||||
name: "David Kim",
|
||||
role: "CTO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-night-city-lights_23-2149024762.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Pure Magic",
|
||||
quote: "Seamlessly fits into my workflow.",
|
||||
name: "Emily Chen",
|
||||
role: "Designer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Future proof",
|
||||
quote: "Worth every single penny of investment.",
|
||||
name: "Mark Wilson",
|
||||
role: "Investor",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-young-redhead-bearded-man-white-shirt-reading-book-cafeteria_171337-10019.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Top Tier",
|
||||
quote: "Stunning design, impeccable performance.",
|
||||
name: "Alice Brown",
|
||||
role: "Tech Lead",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-portrait-man-wearing-glasses_158595-7929.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Experiences"
|
||||
description="What industry leaders say about our ecosystem."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Exceptional", quote: "The most advanced tech I have ever used.", name: "Sarah Johnson", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13573.jpg" },
|
||||
{ id: "2", title: "Game Changer", quote: "A complete shift in luxury standards.", name: "David Kim", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-night-city-lights_23-2149024762.jpg" },
|
||||
{ id: "3", title: "Pure Magic", quote: "Seamlessly fits into my workflow.", name: "Emily Chen", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg" },
|
||||
{ id: "4", title: "Future proof", quote: "Worth every single penny of investment.", name: "Mark Wilson", role: "Investor", imageSrc: "http://img.b2bpic.net/free-photo/photo-young-redhead-bearded-man-white-shirt-reading-book-cafeteria_171337-10019.jpg" },
|
||||
{ id: "5", title: "Top Tier", quote: "Stunning design, impeccable performance.", name: "Alice Brown", role: "Tech Lead", imageSrc: "http://img.b2bpic.net/free-photo/neon-portrait-man-wearing-glasses_158595-7929.jpg" },
|
||||
]}
|
||||
title="Client Experiences"
|
||||
description="What industry leaders say about our ecosystem."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "99.9%",
|
||||
title: "System Uptime",
|
||||
description: "Absolute reliability.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-connections-background-flowing-dots-with-shallow-depth-field_1048-11868.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "24/7",
|
||||
title: "Neural Support",
|
||||
description: "Instant assistance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-concept-with-futuristic-element_23-2151910973.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "15ms",
|
||||
title: "Response Latency",
|
||||
description: "Near-instantaneous speed.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-low-poly-plexus-design-shallow-depth-field-modern-communication_1048-12682.jpg",
|
||||
},
|
||||
]}
|
||||
title="Performance By Numbers"
|
||||
description="Proven results for the discerning professional."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "99.9%", title: "System Uptime", description: "Absolute reliability.", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-connections-background-flowing-dots-with-shallow-depth-field_1048-11868.jpg" },
|
||||
{ id: "m2", value: "24/7", title: "Neural Support", description: "Instant assistance.", imageSrc: "http://img.b2bpic.net/free-photo/technology-concept-with-futuristic-element_23-2151910973.jpg" },
|
||||
{ id: "m3", value: "15ms", title: "Response Latency", description: "Near-instantaneous speed.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-low-poly-plexus-design-shallow-depth-field-modern-communication_1048-12682.jpg" },
|
||||
]}
|
||||
title="Performance By Numbers"
|
||||
description="Proven results for the discerning professional."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How does Neural Sync work?",
|
||||
content: "It utilizes high-fidelity sensors to map cognitive input.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Is it waterproof?",
|
||||
content: "Our devices are rated for extreme conditions.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What is the warranty?",
|
||||
content: "All units come with a lifetime guarantee.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "Do you ship internationally?",
|
||||
content: "Yes, we ship to most major global cities.",
|
||||
},
|
||||
{
|
||||
id: "f5",
|
||||
title: "Can I return the product?",
|
||||
content: "Returns are accepted within 30 days of purchase.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Answers to our most frequently asked queries."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How does Neural Sync work?", content: "It utilizes high-fidelity sensors to map cognitive input." },
|
||||
{ id: "f2", title: "Is it waterproof?", content: "Our devices are rated for extreme conditions." },
|
||||
{ id: "f3", title: "What is the warranty?", content: "All units come with a lifetime guarantee." },
|
||||
{ id: "f4", title: "Do you ship internationally?", content: "Yes, we ship to most major global cities." },
|
||||
{ id: "f5", title: "Can I return the product?", content: "Returns are accepted within 30 days of purchase." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Answers to our most frequently asked queries."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-animated-grid",
|
||||
}}
|
||||
title="Connect With Us"
|
||||
description="Ready to experience the next evolution?"
|
||||
tag="Get In Touch"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
title="Connect With Us"
|
||||
description="Ready to experience the next evolution?"
|
||||
tag="Get In Touch"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="AuraTech"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Hardware",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Software",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="AuraTech"
|
||||
columns={[
|
||||
{ title: "Product", items: [{ label: "Hardware", href: "#products" }, { label: "Software", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user