Merge version_1 into main #2
294
src/app/page.tsx
294
src/app/page.tsx
@@ -33,104 +33,65 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "Tools",
|
||||
id: "#tools",
|
||||
},
|
||||
name: "Tools", id: "#tools"},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
name: "Pricing", id: "#pricing"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="MelodicAI"
|
||||
button={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Get Started", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Turn Your Words into Symphony"
|
||||
description="The ultimate AI platform to generate professional music from your lyrics and voice samples. Start producing in seconds."
|
||||
kpis={[
|
||||
{
|
||||
value: "1M+",
|
||||
label: "Songs Generated",
|
||||
},
|
||||
value: "1M+", label: "Songs Generated"},
|
||||
{
|
||||
value: "99.9%",
|
||||
label: "Satisfaction Rate",
|
||||
},
|
||||
value: "99.9%", label: "Satisfaction Rate"},
|
||||
{
|
||||
value: "24/7",
|
||||
label: "AI Generation",
|
||||
},
|
||||
value: "24/7", label: "AI Generation"},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Creating",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Start Creating", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/african-american-sound-producer-connecting-coiled-cable-mixing-console_482257-122219.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/african-american-sound-producer-connecting-coiled-cable-mixing-console_482257-122219.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg",
|
||||
alt: "Smiling man",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg", alt: "Smiling man"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/technician-making-sure-high-tech-facility-data-center-is-appropriately-equipped_482257-94430.jpg",
|
||||
alt: "Technician",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/technician-making-sure-high-tech-facility-data-center-is-appropriately-equipped_482257-94430.jpg", alt: "Technician"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-equity-analyst-working-proprietary-firm-reading-annual-company-reports-evaluate_482257-132953.jpg",
|
||||
alt: "Analyst",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-equity-analyst-working-proprietary-firm-reading-annual-company-reports-evaluate_482257-132953.jpg", alt: "Analyst"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/successful-middle-eastern-employee-handling-financial-planning_482257-128579.jpg",
|
||||
alt: "Employee",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/successful-middle-eastern-employee-handling-financial-planning_482257-128579.jpg", alt: "Employee"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586558.jpg",
|
||||
alt: "User",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586558.jpg", alt: "User"},
|
||||
]}
|
||||
avatarText="Join 10k+ artists worldwide"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "AI-Powered",
|
||||
},
|
||||
type: "text", text: "AI-Powered"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Professional Tools",
|
||||
},
|
||||
type: "text", text: "Professional Tools"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Studio Quality",
|
||||
},
|
||||
type: "text", text: "Studio Quality"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fast Export",
|
||||
},
|
||||
type: "text", text: "Fast Export"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Secure Cloud",
|
||||
},
|
||||
type: "text", text: "Secure Cloud"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -142,64 +103,43 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Smart Lyric Engine",
|
||||
description: "Intelligent parsing converts your plain text into structured song sections.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-sound-waves-design-with-flowing-particles_1048-12655.jpg",
|
||||
},
|
||||
title: "Smart Lyric Engine", description: "Intelligent parsing converts your plain text into structured song sections.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-sound-waves-design-with-flowing-particles_1048-12655.jpg"},
|
||||
items: [
|
||||
{
|
||||
icon: PenTool,
|
||||
text: "Auto-structuring",
|
||||
},
|
||||
text: "Auto-structuring"},
|
||||
{
|
||||
icon: Sparkles,
|
||||
text: "Rhyme suggestion",
|
||||
},
|
||||
text: "Rhyme suggestion"},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-sound-producer-connecting-coiled-cable-mixing-console_482257-122219.jpg?_wi=2",
|
||||
imageAlt: "voice recording interface",
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Voice Cloning AI",
|
||||
description: "Upload a snippet, and our AI mimics your vocal timbre instantly.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sound-engineer-mixing-mastering-new-music-console_482257-121294.jpg",
|
||||
},
|
||||
title: "Voice Cloning AI", description: "Upload a snippet, and our AI mimics your vocal timbre instantly.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sound-engineer-mixing-mastering-new-music-console_482257-121294.jpg"},
|
||||
items: [
|
||||
{
|
||||
icon: Mic,
|
||||
text: "High-fidelity cloning",
|
||||
},
|
||||
text: "High-fidelity cloning"},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
text: "Voice privacy protection",
|
||||
},
|
||||
text: "Voice privacy protection"},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cloud-storage-data-information-concept_53876-132575.jpg",
|
||||
imageAlt: "voice recording interface",
|
||||
reverse: true
|
||||
},
|
||||
{
|
||||
title: "Studio-Quality Export",
|
||||
description: "Render your masterpiece in high-resolution WAV or optimized MP3 files.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-asmr-artist-uses-quality-mic-studio-anti-stress-video_482257-124195.jpg?_wi=1",
|
||||
},
|
||||
title: "Studio-Quality Export", description: "Render your masterpiece in high-resolution WAV or optimized MP3 files.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-asmr-artist-uses-quality-mic-studio-anti-stress-video_482257-124195.jpg"},
|
||||
items: [
|
||||
{
|
||||
icon: Download,
|
||||
text: "Instant downloads",
|
||||
},
|
||||
text: "Instant downloads"},
|
||||
{
|
||||
icon: Music,
|
||||
text: "Pro-mixing engine",
|
||||
},
|
||||
text: "Pro-mixing engine"},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-teenage-girl-playing-guitar_23-2147879703.jpg?_wi=1",
|
||||
imageAlt: "voice recording interface",
|
||||
reverse: false
|
||||
},
|
||||
]}
|
||||
title="Built for Creators"
|
||||
@@ -214,20 +154,11 @@ export default function LandingPage() {
|
||||
tag="How it works"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "1",
|
||||
description: "Paste your lyrics into our engine.",
|
||||
},
|
||||
id: "1", value: "1", description: "Paste your lyrics into our engine."},
|
||||
{
|
||||
id: "2",
|
||||
value: "2",
|
||||
description: "Upload your voice sample or record.",
|
||||
},
|
||||
id: "2", value: "2", description: "Upload your voice sample or record."},
|
||||
{
|
||||
id: "3",
|
||||
value: "3",
|
||||
description: "Select genre & generate.",
|
||||
},
|
||||
id: "3", value: "3", description: "Select genre & generate."},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -241,47 +172,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Lo-Fi Beats",
|
||||
price: "AI-Driven",
|
||||
variant: "Relaxing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-network-communications-technology-background-with-flowing-particles_1048-16830.jpg",
|
||||
},
|
||||
id: "1", name: "Lo-Fi Beats", price: "AI-Driven", variant: "Relaxing", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-network-communications-technology-background-with-flowing-particles_1048-16830.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Modern Rap",
|
||||
price: "AI-Driven",
|
||||
variant: "Aggressive",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-expert-uses-tablet-with-chroma-key-display-leveraging-dashboards_482257-126212.jpg",
|
||||
},
|
||||
id: "2", name: "Modern Rap", price: "AI-Driven", variant: "Aggressive", imageSrc: "http://img.b2bpic.net/free-photo/male-expert-uses-tablet-with-chroma-key-display-leveraging-dashboards_482257-126212.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Pop Synth",
|
||||
price: "AI-Driven",
|
||||
variant: "Upbeat",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/diagonal-view-dark-modern-cassette-tape_23-2148289092.jpg",
|
||||
},
|
||||
id: "3", name: "Pop Synth", price: "AI-Driven", variant: "Upbeat", imageSrc: "http://img.b2bpic.net/free-photo/diagonal-view-dark-modern-cassette-tape_23-2148289092.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Acoustic Folk",
|
||||
price: "AI-Driven",
|
||||
variant: "Natural",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tech-guru-filming-technology-review-mini-led-lights-offering-feedback_482257-124356.jpg",
|
||||
},
|
||||
id: "4", name: "Acoustic Folk", price: "AI-Driven", variant: "Natural", imageSrc: "http://img.b2bpic.net/free-photo/tech-guru-filming-technology-review-mini-led-lights-offering-feedback_482257-124356.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Electronic Dance",
|
||||
price: "AI-Driven",
|
||||
variant: "Energy",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skilled-artist-creating-new-music-electronic-midi-controller-home-studio_482257-121246.jpg",
|
||||
},
|
||||
id: "5", name: "Electronic Dance", price: "AI-Driven", variant: "Energy", imageSrc: "http://img.b2bpic.net/free-photo/skilled-artist-creating-new-music-electronic-midi-controller-home-studio_482257-121246.jpg"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Classical Fusion",
|
||||
price: "AI-Driven",
|
||||
variant: "Cinematic",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/music-buttons-collection_1051-315.jpg",
|
||||
},
|
||||
id: "6", name: "Classical Fusion", price: "AI-Driven", variant: "Cinematic", imageSrc: "http://img.b2bpic.net/free-vector/music-buttons-collection_1051-315.jpg"},
|
||||
]}
|
||||
title="Generation Tools"
|
||||
description="Select your sound palette and start your project."
|
||||
@@ -295,45 +196,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex J.",
|
||||
handle: "@alex_music",
|
||||
testimonial: "Incredible quality.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-asmr-artist-uses-quality-mic-studio-anti-stress-video_482257-124195.jpg?_wi=2",
|
||||
},
|
||||
id: "1", name: "Alex J.", handle: "@alex_music", testimonial: "Incredible quality.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-asmr-artist-uses-quality-mic-studio-anti-stress-video_482257-124195.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah M.",
|
||||
handle: "@sarah_beats",
|
||||
testimonial: "Saved me hours.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-teenage-girl-playing-guitar_23-2147879703.jpg?_wi=2",
|
||||
},
|
||||
id: "2", name: "Sarah M.", handle: "@sarah_beats", testimonial: "Saved me hours.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-teenage-girl-playing-guitar_23-2147879703.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "David R.",
|
||||
handle: "@david_pro",
|
||||
testimonial: "Perfect for testing.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-man-art-studio_23-2149705900.jpg",
|
||||
},
|
||||
id: "3", name: "David R.", handle: "@david_pro", testimonial: "Perfect for testing.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-man-art-studio_23-2149705900.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Elena K.",
|
||||
handle: "@elena_sounds",
|
||||
testimonial: "Seamless integration.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-man-with-eyeglasses-smiling-office_329181-14553.jpg",
|
||||
},
|
||||
id: "4", name: "Elena K.", handle: "@elena_sounds", testimonial: "Seamless integration.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-man-with-eyeglasses-smiling-office_329181-14553.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Marcus B.",
|
||||
handle: "@marcus_music",
|
||||
testimonial: "Right mood always.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-glasses-is-posing-photographer-studio_613910-2638.jpg",
|
||||
},
|
||||
id: "5", name: "Marcus B.", handle: "@marcus_music", testimonial: "Right mood always.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-glasses-is-posing-photographer-studio_613910-2638.jpg"},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Community Voices"
|
||||
@@ -347,20 +223,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How does voice cloning work?",
|
||||
content: "Our AI analyzes your uploaded sample to synthesize your pitch, tone, and specific vocal characteristics.",
|
||||
},
|
||||
id: "f1", title: "How does voice cloning work?", content: "Our AI analyzes your uploaded sample to synthesize your pitch, tone, and specific vocal characteristics."},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Is my voice data private?",
|
||||
content: "Yes, we prioritize user privacy; your voice samples are encrypted and not shared.",
|
||||
},
|
||||
id: "f2", title: "Is my voice data private?", content: "Yes, we prioritize user privacy; your voice samples are encrypted and not shared."},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I download high-quality files?",
|
||||
content: "Every generation can be exported in WAV (uncompressed) or 320kbps MP3 format.",
|
||||
},
|
||||
id: "f3", title: "Can I download high-quality files?", content: "Every generation can be exported in WAV (uncompressed) or 320kbps MP3 format."},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about your MelodicAI experience."
|
||||
@@ -373,14 +240,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Spotify",
|
||||
"Apple Music",
|
||||
"SoundCloud",
|
||||
"YouTube",
|
||||
"Bandcamp",
|
||||
"Tidal",
|
||||
"Amazon Music",
|
||||
]}
|
||||
"Spotify", "Apple Music", "SoundCloud", "YouTube", "Bandcamp", "Tidal", "Amazon Music"]}
|
||||
title="Loved by Musicians Everywhere"
|
||||
description="Trusted by platforms across the globe."
|
||||
/>
|
||||
@@ -393,20 +253,12 @@ export default function LandingPage() {
|
||||
description="Ready to change your sound? Reach out and get early access to new AI features."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
name: "name", type: "text", placeholder: "Your Name"},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Work Email",
|
||||
},
|
||||
name: "email", type: "email", placeholder: "Work Email"},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your music goals...",
|
||||
}}
|
||||
name: "message", placeholder: "Tell us about your music goals..."}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/midi-keyboard-headphones-laptop-with-program-creating-music_169016-26455.jpg"
|
||||
/>
|
||||
</div>
|
||||
@@ -416,29 +268,19 @@ export default function LandingPage() {
|
||||
logoText="MelodicAI"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
title: "Product", items: [
|
||||
{
|
||||
label: "Generation",
|
||||
href: "#tools",
|
||||
},
|
||||
label: "Generation", href: "#tools"},
|
||||
{
|
||||
label: "Studio",
|
||||
href: "#",
|
||||
},
|
||||
label: "Studio", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user