Files
85c39869-5a0c-4a73-9d30-808…/src/app/page.tsx
2026-01-21 19:39:30 +00:00

231 lines
11 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Zap, Sparkles, Music, Heart, Twitter, Instagram, Linkedin } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumSmall"
sizing="largeSmall"
background="plain"
cardStyle="inset"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="BASE"
navItems={[
{ name: "Features", id: "features" },
{ name: "Technology", id: "technology" },
{ name: "Specs", id: "specs" },
{ name: "Reviews", id: "testimonials" }
]}
button={{
text: "Experience Now", href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="The Future of Sound"
description="Experience audio redefined. BASE delivers immersive, precision-engineered sound with cutting-edge technology built for discerning listeners."
tag="Premium Audio Innovation"
tagIcon={Zap}
kpis={[
{ value: "360°", label: "Immersive Audio" },
{ value: "99.5dB", label: "Peak Output" },
{ value: "40hr", label: "Battery Life" }
]}
enableKpiAnimation={true}
imageSrc="https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170095.jpg"
imageAlt="BASE Premium Speaker"
imagePosition="right"
buttons={[
{ text: "Explore Features", href: "features" },
{ text: "Watch Demo", href: "#" }
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="Crafted for Excellence"
description={[
"BASE represents a decade of acoustic engineering, combining biomimetic design with proprietary sound-processing algorithms. Every component is meticulously calibrated to deliver clarity, depth, and presence.", "Our commitment extends beyond sound quality. We've engineered BASE with sustainable materials, intuitive interfaces, and a modular architecture that evolves with your needs. This is not just a speaker—it's a gateway to audio perfection."
]}
showBorder={true}
useInvertedBackground="noInvert"
buttons={[
{ text: "Our Story", href: "#" },
{ text: "Technology", href: "technology" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardMedia
title="Engineered Innovation"
description="Every detail designed for sonic perfection and user delight"
features={[
{
id: "1", title: "Immersive 360° Sound", description: "Omnidirectional audio projection with adaptive spatial rendering creates an enveloping soundscape.", tag: "Audio Technology", imageSrc: "https://img.b2bpic.net/free-vector/minimal-banner-with-abstract-soundwave-design_1048-21435.jpg", imageAlt: "Sound Wave Visualization"
},
{
id: "2", title: "Minimalist Design", description: "Sculptural form factor with zero visual clutter. Crafted in premium materials with seamless integration.", tag: "Industrial Design", imageSrc: "https://img.b2bpic.net/free-photo/close-up-green-tropical-plant_23-2148229249.jpg", imageAlt: "Design Showcase"
},
{
id: "3", title: "Multi-Protocol Connectivity", description: "Simultaneous WiFi 6E, Bluetooth 5.3, and wired analog inputs. Seamless switching between sources.", tag: "Smart Technology", imageSrc: "https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170090.jpg", imageAlt: "Connectivity Features"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
tag="Premium Features"
tagIcon={Sparkles}
buttons={[
{ text: "Specifications", href: "specs" }
]}
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
title="BASE Speaker Lineup"
description="Choose the perfect audio experience for your space"
tag="Available Now"
tagIcon={Music}
products={[
{
id: "1", name: "BASE Pro", price: "$2,499", variant: "Premium Matte Black", imageSrc: "https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170096.jpg", imageAlt: "BASE Pro Speaker", isFavorited: false
},
{
id: "2", name: "BASE Studio", price: "$3,999", variant: "Reference Space Gray", imageSrc: "https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170096.jpg", imageAlt: "BASE Studio Speaker", isFavorited: false
},
{
id: "3", name: "BASE Compact", price: "$1,299", variant: "Portable Titanium", imageSrc: "https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170096.jpg", imageAlt: "BASE Compact Speaker", isFavorited: false
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
title="Performance Excellence"
description="Numbers that speak to our commitment to audio perfection"
metrics={[
{
id: "1", value: "20Hz-40kHz", title: "Frequency Response", items: [
"Extends beyond human hearing", "Ultra-precise in mid-range", "Deep bass foundation"
]
},
{
id: "2", value: "<1ms", title: "Audio Latency", items: [
"Real-time synchronized input", "Perfect for gaming & streaming", "Professional monitoring ready"
]
},
{
id: "3", value: "99.2%", title: "Signal Integrity", items: [
"Distortion-free amplification", "Advanced noise cancellation", "Crystal clear delivery"
]
},
{
id: "4", value: "48/192", title: "Studio Resolution", items: [
"Master-quality audio support", "Lossless streaming capability", "Professional-grade specs"
]
}
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
testimonials={[
{
id: "1", name: "Marcus Chen", imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", imageAlt: "Marcus Chen"
},
{
id: "2", name: "Sarah Williams", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Sarah Williams"
},
{
id: "3", name: "David Park", imageSrc: "https://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg", imageAlt: "David Park"
},
{
id: "4", name: "Elena Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg", imageAlt: "Elena Rodriguez"
},
{
id: "5", name: "James Mitchell", imageSrc: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg", imageAlt: "James Mitchell"
},
{
id: "6", name: "Lisa Anderson", imageSrc: "https://img.b2bpic.net/free-photo/smiling-entrepreneur-posing-camera_1262-3636.jpg", imageAlt: "Lisa Anderson"
}
]}
cardTitle="Trusted by 50,000+ audio enthusiasts, professionals, and creators worldwide"
cardTag="Customer Stories"
cardTagIcon={Heart}
useInvertedBackground="noInvert"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to elevate your audio experience? Join the BASE community of discerning listeners and experience sound like never before."
animationType="entrance-slide"
buttons={[
{ text: "Get Started", href: "#" },
{ text: "Contact Sales", href: "#" }
]}
useInvertedBackground="noInvert"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="BASE"
copyrightText="© 2025 BASE Audio. Crafted for those who hear the difference."
socialLinks={[
{
icon: Twitter,
href: "https://twitter.com/baseaudio", ariaLabel: "Twitter"
},
{
icon: Instagram,
href: "https://instagram.com/baseaudio", ariaLabel: "Instagram"
},
{
icon: Linkedin,
href: "https://linkedin.com/company/baseaudio", ariaLabel: "LinkedIn"
},
{
icon: Music,
href: "https://soundcloud.com/baseaudio", ariaLabel: "SoundCloud"
}
]}
/>
</div>
</ThemeProvider>
);
}