Initial commit
This commit is contained in:
257
src/app/page.tsx
Normal file
257
src/app/page.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
"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"
|
||||
}}
|
||||
className="backdrop-blur-md"
|
||||
navItemClassName="font-medium tracking-wide"
|
||||
buttonClassName="px-6 py-2.5"
|
||||
/>
|
||||
</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: "#" }
|
||||
]}
|
||||
className="py-24"
|
||||
titleClassName="text-7xl font-bold tracking-tight"
|
||||
descriptionClassName="text-xl max-w-2xl"
|
||||
kpiClassName="bg-white/80 backdrop-blur-sm border border-emerald-200/30"
|
||||
kpiValueClassName="text-3xl font-bold text-emerald-600"
|
||||
kpiLabelClassName="text-sm text-slate-600"
|
||||
/>
|
||||
</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="invertDefault"
|
||||
buttons={[
|
||||
{ text: "Our Story", href: "#" },
|
||||
{ text: "Technology", href: "technology" }
|
||||
]}
|
||||
titleClassName="text-6xl font-semibold"
|
||||
descriptionClassName="text-lg leading-relaxed text-slate-700"
|
||||
/>
|
||||
</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" }
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
titleClassName="text-5xl font-bold mb-6"
|
||||
descriptionClassName="text-lg text-slate-700 mb-12"
|
||||
/>
|
||||
</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="invertDefault"
|
||||
carouselMode="buttons"
|
||||
titleClassName="text-5xl font-bold mb-4"
|
||||
descriptionClassName="text-lg text-slate-700 mb-12"
|
||||
/>
|
||||
</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"
|
||||
titleClassName="text-5xl font-bold mb-4"
|
||||
descriptionClassName="text-lg text-slate-700 mb-12"
|
||||
valueClassName="text-4xl font-bold text-emerald-600"
|
||||
metricTitleClassName="text-xl font-semibold mt-4"
|
||||
/>
|
||||
</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="invertDefault"
|
||||
cardTitleClassName="text-3xl font-semibold text-center"
|
||||
/>
|
||||
</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"
|
||||
textClassName="text-3xl font-semibold"
|
||||
containerClassName="bg-emerald-50/50"
|
||||
/>
|
||||
</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"
|
||||
}
|
||||
]}
|
||||
logoClassName="text-2xl font-bold text-emerald-600"
|
||||
copyrightTextClassName="text-sm text-slate-600"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user