bender/69badffd-5643-4d9c-a953-2e866f2d6815
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-11 07:07:37 +00:00
parent d36f45df8e
commit db014edcd4
1 changed files with 135 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

467
src/app/page.tsx
View File

@@ -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>
);