238 lines
13 KiB
TypeScript
238 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
|
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Music, Sparkles, Globe, DollarSign, Play, Award, Users, Facebook, Instagram, Linkedin } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="SoundWave"
|
|
navItems={[
|
|
{ name: "Discover", id: "features" },
|
|
{ name: "Plans", id: "pricing" },
|
|
{ name: "Community", id: "testimonial" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{ text: "Start Listening", href: "contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Your Music, Your Way, Anytime, Anywhere"
|
|
description="Stream millions of songs, create perfect playlists, and discover new artists. Premium sound quality with offline listening and seamless cross-device playback."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Music Streaming"
|
|
tagIcon={Music}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "contact" },
|
|
{ text: "Explore Music", href: "features" }
|
|
]}
|
|
buttonAnimation="opacity"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-vibrant-music-streaming-dashboard-with-1772528152571-72999398.png", imageAlt: "Music streaming dashboard"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-clean-interface-showing-music-discover-1772528152212-bdc8a899.png", imageAlt: "Music discovery interface"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-smartphone-screen-showing-offline-down-1772528152587-0a2fba57.png", imageAlt: "Offline download feature"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-collaborative-playlist-interface-showi-1772528153381-9f5bf1fb.png", imageAlt: "Collaborative playlists"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-vibrant-music-streaming-dashboard-with-1772528152571-72999398.png", imageAlt: "Premium audio player"
|
|
}
|
|
]}
|
|
className="hero-section"
|
|
titleClassName="text-4xl md:text-5xl"
|
|
descriptionClassName="text-lg md:text-xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwelve
|
|
title="Powerful Features Built for Music Lovers"
|
|
description="Everything you need for the ultimate music experience"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
tag="Core Features"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="blur-reveal"
|
|
features={[
|
|
{
|
|
id: "discovery", label: "Discover", title: "Personalized Music Discovery", items: [
|
|
"AI-powered recommendations", "Trending & curated playlists", "Artist radio stations", "Mood & genre-based filtering"
|
|
],
|
|
buttons: [{ text: "Explore Now", href: "contact" }]
|
|
},
|
|
{
|
|
id: "offline", label: "Offline", title: "Download & Listen Offline", items: [
|
|
"Save songs for offline", "Unlimited downloads", "Smart sync across devices", "High-quality audio formats"
|
|
],
|
|
buttons: [{ text: "Get Premium", href: "pricing" }]
|
|
},
|
|
{
|
|
id: "collab", label: "Collaborate", title: "Create Together", items: [
|
|
"Shared playlists", "Collaborative queue", "Real-time sharing", "Social music features"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
title="Trusted by Music Enthusiasts Worldwide"
|
|
description="Join millions of users streaming their favorite music daily"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
tag="Global Community"
|
|
tagIcon={Globe}
|
|
tagAnimation="opacity"
|
|
names={["Spotify", "Apple Music", "YouTube Music", "Tidal", "SoundCloud", "Bandcamp", "Pandora", "Deezer"]}
|
|
logos={[
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-music-streaming-service-brand-logo-or--1772528151588-616026b2.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-professional-music-platform-brand-logo-1772528151926-372a54b5.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-music-service-provider-brand-logo-or-i-1772528151184-4c647087.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-high-fidelity-music-streaming-service--1772528157213-a350a112.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-music-streaming-and-discovery-platform-1772528152601-ca8082b2.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/an-independent-music-platform-brand-logo-1772528153289-cc7bd5d2.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-radio-streaming-and-music-discovery-se-1772528152410-f2c512a3.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-music-streaming-service-brand-logo-or--1772528151792-b1297a5b.png"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardOne
|
|
title="Choose Your Perfect Plan"
|
|
description="Flexible pricing for every listener"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
tag="Pricing"
|
|
tagIcon={DollarSign}
|
|
tagAnimation="slide-up"
|
|
plans={[
|
|
{
|
|
id: "free", badge: "Forever Free", badgeIcon: undefined,
|
|
price: "$0", subtitle: "Perfect for trying us out", features: [
|
|
"Ad-supported listening", "Standard audio quality", "Mobile & desktop access", "Skip 6 songs per hour", "On-demand playback"
|
|
]
|
|
},
|
|
{
|
|
id: "premium", badge: "Most Popular", badgeIcon: Sparkles,
|
|
price: "$10.99/mo", subtitle: "For dedicated music fans", features: [
|
|
"Ad-free listening", "High quality audio", "Offline downloads", "Unlimited skips", "Cross-device sync", "Family sharing"
|
|
]
|
|
},
|
|
{
|
|
id: "pro", badge: "Audiophile", badgeIcon: undefined,
|
|
price: "$19.99/mo", subtitle: "For audio perfectionist", features: [
|
|
"Lossless audio quality", "Spatial audio", "Studio-grade sound", "Priority support", "Early access features", "Exclusive content"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alex Turner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-professional-music-artist-or-musician--1772528151816-2f67de88.png", imageAlt: "Alex Turner"
|
|
},
|
|
{
|
|
id: "2", name: "Maya Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-professional-music-artist-or-musician--1772528151317-878b13b9.png", imageAlt: "Maya Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Jordan Mills", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-professional-music-enthusiast-or-liste-1772528151832-68c71732.png", imageAlt: "Jordan Mills"
|
|
},
|
|
{
|
|
id: "4", name: "Riley Jackson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-professional-portrait-photo-of-a-music-1772528152392-ae2482f9.png", imageAlt: "Riley Jackson"
|
|
},
|
|
{
|
|
id: "5", name: "Casey Williams", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-professional-music-related-portrait-ph-1772528152294-ee972c25.jpg", imageAlt: "Casey Williams"
|
|
},
|
|
{
|
|
id: "6", name: "Morgan Davis", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc1wh3UdwdepM3ODe1vMVXojc/a-professional-portrait-photo-suitable-f-1772528154612-d4d07ef7.png", imageAlt: "Morgan Davis"
|
|
}
|
|
]}
|
|
cardTitle="Loved by 50+ Million Music Listeners Around the Globe"
|
|
cardTag="Join the Community"
|
|
cardTagIcon={Music}
|
|
cardAnimation="opacity"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<AboutMetric
|
|
title="The Largest Music Streaming Library at Your Fingertips"
|
|
useInvertedBackground={true}
|
|
metricsAnimation="slide-up"
|
|
metrics={[
|
|
{ icon: Music, label: "Songs Available", value: "100M+" },
|
|
{ icon: Users, label: "Active Listeners", value: "50M+" },
|
|
{ icon: Globe, label: "Countries Served", value: "190+" },
|
|
{ icon: Award, label: "Artist Network", value: "8M+" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get Started Today"
|
|
tagIcon={Play}
|
|
tagAnimation="slide-up"
|
|
title="Ready to Start Your Music Journey?"
|
|
description="Sign up now and get instant access to millions of songs, personalized playlists, and offline listening. Your first month is completely free."
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "https://example.com/signup" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
buttonAnimation="opacity"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="SoundWave"
|
|
copyrightText="© 2025 SoundWave. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Music, href: "https://twitter.com/soundwave", ariaLabel: "Twitter" },
|
|
{ icon: Facebook, href: "https://facebook.com/soundwave", ariaLabel: "Facebook" },
|
|
{ icon: Linkedin, href: "https://linkedin.com/company/soundwave", ariaLabel: "LinkedIn" },
|
|
{ icon: Instagram, href: "https://instagram.com/soundwave", ariaLabel: "Instagram" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|