bender/a648608e-b47d-4394-84ce-8f0b13efaa5a
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-24 12:51:56 +00:00
parent 62b8374e87
commit d987abc2db
1 changed files with 52 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
src/app/page.tsx
View File

@@ -30,22 +30,13 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Trending",
id: "trending",
},
{
name: "Releases",
id: "releases",
},
{
name: "Library",
id: "library",
},
{ name: "Home", id: "hero" },
{ name: "Features", id: "features" },
{ name: "Trending", id: "trending" },
{ name: "Metrics", id: "metrics" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" }
]}
brandName="KMusic"
/>
@@ -53,117 +44,32 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
title="Feel Every Beat"
description="The ultimate high-fidelity streaming experience designed for true music lovers."
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-sound-waves-design-with-flowing-particles_1048-12655.jpg",
imageAlt: "Neon music wave",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/neon-geometric-background_23-2150821817.jpg",
imageAlt: "Modern music studio",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/part-drum-kit-dark-with-beautiful-lighting_169016-52967.jpg",
imageAlt: "Vinyl record dark background",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/digital-assistant-speaker-composition_23-2149107993.jpg",
imageAlt: "Abstract equalizer waves",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/music-producer-creating-new-music-with-usb-stick-home-studio_482257-115560.jpg",
imageAlt: "Audio mixing console",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/abstract-bokeh-background-with-colorful-lights_23-2147815226.jpg",
imageAlt: "Nightclub sound visualizer",
},
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-sound-waves-design-with-flowing-particles_1048-12655.jpg", imageAlt: "Neon music wave" },
{ imageSrc: "http://img.b2bpic.net/free-photo/neon-geometric-background_23-2150821817.jpg", imageAlt: "Modern music studio" },
{ imageSrc: "http://img.b2bpic.net/free-photo/part-drum-kit-dark-with-beautiful-lighting_169016-52967.jpg", imageAlt: "Vinyl record dark background" },
{ imageSrc: "http://img.b2bpic.net/free-photo/digital-assistant-speaker-composition_23-2149107993.jpg", imageAlt: "Abstract equalizer waves" },
{ imageSrc: "http://img.b2bpic.net/free-photo/music-producer-creating-new-music-with-usb-stick-home-studio_482257-115560.jpg", imageAlt: "Audio mixing console" },
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-bokeh-background-with-colorful-lights_23-2147815226.jpg", imageAlt: "Nightclub sound visualizer" }
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/light-leak-overlay-effect-with-blur-blue-light-leak-noisy-retro-film_474888-8016.jpg",
imageAlt: "Abstract music flow",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/black-silver-headphones-black-textile_417767-485.jpg",
imageAlt: "High fidelity speaker",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/adult-suffering-from-social-media-addiction_23-2149401619.jpg",
imageAlt: "Streaming app interface dark",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-listening-music-double-color-exposure-effect_53876-104905.jpg",
imageAlt: "Stylized sound wave",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/silhoette-two-people-entering-dark-shady-underground-building_181624-4456.jpg",
imageAlt: "Luxury studio environment",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/crumpled-up-golden-foil-background_23-2148846101.jpg",
imageAlt: "Golden music abstract",
},
]}
buttons={[
{
text: "Start Listening Free",
href: "#trending",
},
{ imageSrc: "http://img.b2bpic.net/free-photo/light-leak-overlay-effect-with-blur-blue-light-leak-noisy-retro-film_474888-8016.jpg", imageAlt: "Abstract music flow" },
{ imageSrc: "http://img.b2bpic.net/free-photo/black-silver-headphones-black-textile_417767-485.jpg", imageAlt: "High fidelity speaker" },
{ imageSrc: "http://img.b2bpic.net/free-photo/adult-suffering-from-social-media-addiction_23-2149401619.jpg", imageAlt: "Streaming app interface dark" },
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-listening-music-double-color-exposure-effect_53876-104905.jpg", imageAlt: "Stylized sound wave" },
{ imageSrc: "http://img.b2bpic.net/free-photo/silhoette-two-people-entering-dark-shady-underground-building_181624-4456.jpg", imageAlt: "Luxury studio environment" },
{ imageSrc: "http://img.b2bpic.net/free-photo/crumpled-up-golden-foil-background_23-2148846101.jpg", imageAlt: "Golden music abstract" }
]}
buttons={[{ text: "Start Listening Free", href: "#trending" }]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-cyber-lines_1048-14148.jpg",
alt: "User 1",
},
{
src: "http://img.b2bpic.net/free-photo/3d-abstract-data-technology-background-with-flowing-waves_1048-18506.jpg",
alt: "User 2",
},
{
src: "http://img.b2bpic.net/free-photo/3d-abstract-glowing-background_23-2151907724.jpg",
alt: "User 3",
},
{
src: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-flowing-particle-design_1048-13613.jpg",
alt: "User 4",
},
{
src: "http://img.b2bpic.net/free-photo/lifestyle-night-city-with-young-woman_23-2149124063.jpg",
alt: "User 5",
},
]}
marqueeItems={[
{
type: "image",
src: "http://img.b2bpic.net/free-photo/young-couple-spending-time-together-night_23-2149328359.jpg",
alt: "Partner 1",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/front-view-woman-putting-lipstick_23-2149445852.jpg",
alt: "Partner 2",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/christmas-background-with-soap-bubbles_23-2147726428.jpg",
alt: "Partner 3",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/gold-aesthetic-wallpaper-with-hand-holding-cassette_23-2149872274.jpg",
alt: "Partner 4",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/closeup-shot-cartridge-portable-gramophone-with-blurred-background_181624-18095.jpg",
alt: "Partner 5",
},
{ src: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-cyber-lines_1048-14148.jpg", alt: "User 1" },
{ src: "http://img.b2bpic.net/free-photo/3d-abstract-data-technology-background-with-flowing-waves_1048-18506.jpg", alt: "User 2" },
{ src: "http://img.b2bpic.net/free-photo/3d-abstract-glowing-background_23-2151907724.jpg", alt: "User 3" },
{ src: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-flowing-particle-design_1048-13613.jpg", alt: "User 4" },
{ src: "http://img.b2bpic.net/free-photo/lifestyle-night-city-with-young-woman_23-2149124063.jpg", alt: "User 5" }
]}
/>
</div>
@@ -175,24 +81,9 @@ export default function LandingPage() {
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
features={[
{
title: "High Fidelity Audio",
description: "Crystal clear sound quality for audiophiles.",
imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13940.jpg",
imageAlt: "HiFi Sound",
},
{
title: "Smart Playlists",
description: "Curated selections based on your unique taste.",
imageSrc: "http://img.b2bpic.net/free-photo/music-background-with-headphones-female-hands-recorder-laptop-guitar_169016-16392.jpg",
imageAlt: "Smart Play",
},
{
title: "Offline Mode",
description: "Take your music anywhere without connection.",
imageSrc: "http://img.b2bpic.net/free-photo/upload-icon-front-side_187299-45737.jpg",
imageAlt: "Offline",
},
{ title: "High Fidelity Audio", description: "Crystal clear sound quality for audiophiles.", imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13940.jpg", imageAlt: "HiFi Sound" },
{ title: "Smart Playlists", description: "Curated selections based on your unique taste.", imageSrc: "http://img.b2bpic.net/free-photo/music-background-with-headphones-female-hands-recorder-laptop-guitar_169016-16392.jpg", imageAlt: "Smart Play" },
{ title: "Offline Mode", description: "Take your music anywhere without connection.", imageSrc: "http://img.b2bpic.net/free-photo/upload-icon-front-side_187299-45737.jpg", imageAlt: "Offline" }
]}
title="Your Music, Reimagined"
description="Advanced features for professional-grade listening."
@@ -201,52 +92,14 @@ export default function LandingPage() {
<div id="trending" data-section="trending">
<ProductCardFour
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{
id: "1",
name: "Midnight Drive",
price: "4.2M Plays",
variant: "Artist: Kavya Sharma",
imageSrc: "http://img.b2bpic.net/free-photo/colorful-people-collage-design_23-2149450429.jpg",
},
{
id: "2",
name: "Neon Pulse",
price: "3.8M Plays",
variant: "Artist: Digital Pulse",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-blue-yellow-watercolor-texture-stain-wallpaper_23-2148079219.jpg",
},
{
id: "3",
name: "Sonic Waves",
price: "2.9M Plays",
variant: "Artist: Audio Waves",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-with-wavy-texture_23-2150169260.jpg",
},
{
id: "4",
name: "Electric Dreams",
price: "2.1M Plays",
variant: "Artist: Synths Era",
imageSrc: "http://img.b2bpic.net/free-photo/cosmic-background-with-golden-neon-laser-lights-perfect-digital-background_181624-24900.jpg",
},
{
id: "5",
name: "Deep Space",
price: "1.9M Plays",
variant: "Artist: Star Gazer",
imageSrc: "http://img.b2bpic.net/free-photo/collage-landscapes-composition_23-2150241033.jpg",
},
{
id: "6",
name: "Rhythmic Flow",
price: "1.7M Plays",
variant: "Artist: Beat Master",
imageSrc: "http://img.b2bpic.net/free-photo/man-model-posing-with-colorful-body-painting_23-2149668984.jpg",
},
{ id: "1", name: "Midnight Drive", price: "4.2M Plays", variant: "Artist: Kavya Sharma", imageSrc: "http://img.b2bpic.net/free-photo/colorful-people-collage-design_23-2149450429.jpg" },
{ id: "2", name: "Neon Pulse", price: "3.8M Plays", variant: "Artist: Digital Pulse", imageSrc: "http://img.b2bpic.net/free-photo/close-up-blue-yellow-watercolor-texture-stain-wallpaper_23-2148079219.jpg" },
{ id: "3", name: "Sonic Waves", price: "2.9M Plays", variant: "Artist: Audio Waves", imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-with-wavy-texture_23-2150169260.jpg" }
]}
title="Trending Now"
description="What the world is listening to right now."
@@ -259,27 +112,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "50M+",
title: "Monthly Listeners",
description: "Global users",
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-style-headphones_23-2151056820.jpg",
},
{
id: "m2",
value: "120M+",
title: "Library Songs",
description: "Diverse collection",
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-computer-laptop-wooden-table-letters-forming-word-music_53876-13411.jpg",
},
{
id: "m3",
value: "10k+",
title: "Active Artists",
description: "Growing community",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-girl-holding-picture_23-2149829776.jpg",
},
{ id: "m1", value: "50M+", title: "Monthly Listeners", description: "Global users", imageSrc: "http://img.b2bpic.net/free-photo/cartoon-style-headphones_23-2151056820.jpg" },
{ id: "m2", value: "120M+", title: "Library Songs", description: "Diverse collection", imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-computer-laptop-wooden-table-letters-forming-word-music_53876-13411.jpg" },
{ id: "m3", value: "10k+", title: "Active Artists", description: "Growing community", imageSrc: "http://img.b2bpic.net/free-photo/side-view-girl-holding-picture_23-2149829776.jpg" }
]}
title="Music By Numbers"
description="Global reach across millions of listeners."
@@ -291,46 +126,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{
id: "t1",
title: "Best Quality",
quote: "The audio fidelity is unmatched.",
name: "Sarah",
role: "Audiophile",
imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-listening-music-wireless-earphones_1303-20588.jpg",
},
{
id: "t2",
title: "Huge Collection",
quote: "I find every genre here.",
name: "Mark",
role: "Music Fan",
imageSrc: "http://img.b2bpic.net/free-photo/happy-person-having-fun-dancing-rhythm-listening-music-headphones_482257-124296.jpg",
},
{
id: "t3",
title: "Smooth UI",
quote: "Navigation is seamless.",
name: "Alex",
role: "Creator",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-male-musician-headphones-sensually-singing-recording-new-song-modern-studio_574295-4372.jpg",
},
{
id: "t4",
title: "Great Discovery",
quote: "My daily discovery is top-notch.",
name: "Elena",
role: "Collector",
imageSrc: "http://img.b2bpic.net/free-photo/women-heaphones-vinyl_1296-501.jpg",
},
{
id: "t5",
title: "Love the Aesthetic",
quote: "The dark mode is perfect.",
name: "Jason",
role: "Night Owl",
imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-owl-night-time_23-2151464612.jpg",
},
{ id: "t1", title: "Best Quality", quote: "The audio fidelity is unmatched.", name: "Sarah", role: "Audiophile", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-listening-music-wireless-earphones_1303-20588.jpg" },
{ id: "t2", title: "Huge Collection", quote: "I find every genre here.", name: "Mark", role: "Music Fan", imageSrc: "http://img.b2bpic.net/free-photo/happy-person-having-fun-dancing-rhythm-listening-music-headphones_482257-124296.jpg" },
{ id: "t3", title: "Smooth UI", quote: "Navigation is seamless.", name: "Alex", role: "Creator", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-male-musician-headphones-sensually-singing-recording-new-song-modern-studio_574295-4372.jpg" }
]}
title="What Our Listeners Say"
description="Experience the difference of KMusic."
@@ -342,21 +140,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "Is KMusic free?",
content: "Yes, we offer a free tier with ads and premium for an ad-free experience.",
},
{
id: "q2",
title: "Can I use offline?",
content: "Premium users can download songs for offline playback.",
},
{
id: "q3",
title: "How do I create playlists?",
content: "Navigate to your library and click 'Create Playlist'.",
},
{ id: "q1", title: "Is KMusic free?", content: "Yes, we offer a free tier with ads and premium for an ad-free experience." },
{ id: "q2", title: "Can I use offline?", content: "Premium users can download songs for offline playback." },
{ id: "q3", title: "How do I create playlists?", content: "Navigate to your library and click 'Create Playlist'." }
]}
title="Frequently Asked"
description="Questions answered about our service."
@@ -367,9 +153,7 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{
variant: "rotated-rays-animated",
}}
background={{ variant: "rotated-rays-animated" }}
title="Stay Updated"
description="Sign up for new releases and updates."
imageSrc="http://img.b2bpic.net/free-photo/learn-music-theory-solfeggio-sheet-music-with-piano-app-your-phone-educational-flashcards_169016-12343.jpg"
@@ -382,31 +166,17 @@ export default function LandingPage() {
<FooterSimple
columns={[
{
title: "Company",
items: [
{
label: "About Us",
href: "#",
},
{
label: "Careers",
href: "#",
},
],
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Careers", href: "#" }
]
},
{
title: "Support",
items: [
{
label: "Help Center",
href: "#",
},
{
label: "Privacy",
href: "#",
},
],
},
title: "Support", items: [
{ label: "Help Center", href: "#" },
{ label: "Privacy", href: "#" }
]
}
]}
bottomLeftText="© 2024 KMusic"
bottomRightText="Feel Every Beat"