Merge version_1 into main #2
440
src/app/page.tsx
440
src/app/page.tsx
@@ -27,331 +27,137 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Categories",
|
||||
id: "categories",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "portfolio",
|
||||
},
|
||||
]}
|
||||
brandName="Meloting"
|
||||
button={{
|
||||
text: "Start Project",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Categories", id: "categories" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Work", id: "portfolio" }
|
||||
]}
|
||||
brandName="Meloting"
|
||||
button={{
|
||||
text: "Start Project", href: "#contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Meloting"
|
||||
description="We turn emotions, brands, and memories into powerful music experiences. Your story, now a song."
|
||||
buttons={[
|
||||
{
|
||||
text: "Create Your Song",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg?_wi=1",
|
||||
imageAlt: "Music wave visuals",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg?_wi=2",
|
||||
imageAlt: "Music wave visuals",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg?_wi=3",
|
||||
imageAlt: "Music wave visuals",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg?_wi=4",
|
||||
imageAlt: "Music wave visuals",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg?_wi=5",
|
||||
imageAlt: "Music wave visuals",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg?_wi=6",
|
||||
imageAlt: "Music wave visuals",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Meloting"
|
||||
description="We turn emotions, brands, and memories into powerful music experiences. Your story, now a song."
|
||||
buttons={[{ text: "Create Your Song", href: "#contact" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg", imageAlt: "Music wave visuals" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg", imageAlt: "Music wave visuals" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg", imageAlt: "Music wave visuals" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg", imageAlt: "Music wave visuals" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg", imageAlt: "Music wave visuals" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg", imageAlt: "Music wave visuals" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="What is Meloting?"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="What is Meloting?"
|
||||
buttons={[{ text: "Learn More" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why" data-section="why">
|
||||
<FeatureCardOne
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "AI + Human Creativity",
|
||||
description: "The perfect blend of tech efficiency and artistic soul.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg?_wi=7",
|
||||
imageAlt: "neon music waves background dark",
|
||||
},
|
||||
{
|
||||
title: "High-Quality Production",
|
||||
description: "Professional studio standards for every single note.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/christmas-background-with-numbers-2023-decor-details-flat-lay_169016-25112.jpg?_wi=1",
|
||||
imageAlt: "modern music card design",
|
||||
},
|
||||
{
|
||||
title: "100% Ownership",
|
||||
description: "Full commercial rights for your business and brand assets.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-realistic-globe-with-musical-elements_23-2151500712.jpg?_wi=1",
|
||||
imageAlt: "creative musical jingle design",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="We combine AI precision with human emotion to craft auditory masterpieces."
|
||||
/>
|
||||
</div>
|
||||
<div id="why" data-section="why">
|
||||
<FeatureCardOne
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "AI + Human Creativity", description: "The perfect blend of tech efficiency and artistic soul.", imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg", imageAlt: "neon music waves background dark"
|
||||
},
|
||||
{
|
||||
title: "High-Quality Production", description: "Professional studio standards for every single note.", imageSrc: "http://img.b2bpic.net/free-photo/christmas-background-with-numbers-2023-decor-details-flat-lay_169016-25112.jpg", imageAlt: "modern music card design"
|
||||
},
|
||||
{
|
||||
title: "100% Ownership", description: "Full commercial rights for your business and brand assets.", imageSrc: "http://img.b2bpic.net/free-photo/3d-realistic-globe-with-musical-elements_23-2151500712.jpg", imageAlt: "creative musical jingle design"
|
||||
}
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="We combine AI precision with human emotion to craft auditory masterpieces."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="categories" data-section="categories">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Biz Song",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/christmas-background-with-numbers-2023-decor-details-flat-lay_169016-25112.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Biz Jingle",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-realistic-globe-with-musical-elements_23-2151500712.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Biz BGM",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-white-background_187299-40208.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Biz Song",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/christmas-background-with-numbers-2023-decor-details-flat-lay_169016-25112.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Biz Jingle",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-realistic-globe-with-musical-elements_23-2151500712.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Biz BGM",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-white-background_187299-40208.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Our Categories"
|
||||
description="Tailored musical solutions for every business need."
|
||||
/>
|
||||
</div>
|
||||
<div id="categories" data-section="categories">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "Biz Song", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/christmas-background-with-numbers-2023-decor-details-flat-lay_169016-25112.jpg" },
|
||||
{ id: "2", name: "Biz Jingle", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/3d-realistic-globe-with-musical-elements_23-2151500712.jpg" },
|
||||
{ id: "3", name: "Biz BGM", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-white-background_187299-40208.jpg" },
|
||||
{ id: "4", name: "Biz Song", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/christmas-background-with-numbers-2023-decor-details-flat-lay_169016-25112.jpg" },
|
||||
{ id: "5", name: "Biz Jingle", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/3d-realistic-globe-with-musical-elements_23-2151500712.jpg" },
|
||||
{ id: "6", name: "Biz BGM", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-white-background_187299-40208.jpg" }
|
||||
]}
|
||||
title="Our Categories"
|
||||
description="Tailored musical solutions for every business need."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Male Voice",
|
||||
price: "₹2999",
|
||||
features: [
|
||||
"Custom Lyrics",
|
||||
"Studio Polish",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select Plan",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Female Voice",
|
||||
price: "₹3499",
|
||||
features: [
|
||||
"Custom Lyrics",
|
||||
"Studio Polish",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select Plan",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Duet",
|
||||
price: "₹4199",
|
||||
features: [
|
||||
"Custom Lyrics",
|
||||
"Studio Polish",
|
||||
"Professional Harmony",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select Plan",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Pricing Plans"
|
||||
description="Transparent, premium value for your story."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "1", name: "Male Voice", price: "₹2999", features: ["Custom Lyrics", "Studio Polish"], buttons: [{ text: "Select Plan" }] },
|
||||
{ id: "2", name: "Female Voice", price: "₹3499", features: ["Custom Lyrics", "Studio Polish"], buttons: [{ text: "Select Plan" }] },
|
||||
{ id: "3", name: "Duet", price: "₹4199", features: ["Custom Lyrics", "Studio Polish", "Professional Harmony"], buttons: [{ text: "Select Plan" }] }
|
||||
]}
|
||||
title="Pricing Plans"
|
||||
description="Transparent, premium value for your story."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Aarav Sharma",
|
||||
date: "Jan 2025",
|
||||
title: "Founder, StartupXYZ",
|
||||
quote: "Meloting completely changed our brand recognition.",
|
||||
tag: "Impact",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-white-background_187299-40208.jpg?_wi=3",
|
||||
imageAlt: "corporate background music concept",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Priya Verma",
|
||||
date: "Feb 2025",
|
||||
title: "CMO, TechGlobal",
|
||||
quote: "The emotional depth of our brand song is incredible.",
|
||||
tag: "Result",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",
|
||||
imageAlt: "professional headshot executive",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Raj Patel",
|
||||
date: "Mar 2025",
|
||||
title: "Creator, ArtFlow",
|
||||
quote: "Truly a premium experience from start to finish.",
|
||||
tag: "Quality",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg?_wi=8",
|
||||
imageAlt: "neon music waves background dark",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sarah Khan",
|
||||
date: "Apr 2025",
|
||||
title: "Founder, Luxe",
|
||||
quote: "Unmatched creative vision and musical talent.",
|
||||
tag: "Vision",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/christmas-background-with-numbers-2023-decor-details-flat-lay_169016-25112.jpg?_wi=4",
|
||||
imageAlt: "modern music card design",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Vikram Singh",
|
||||
date: "May 2025",
|
||||
title: "COO, Streamline",
|
||||
quote: "Professional, fast, and emotionally engaging.",
|
||||
tag: "Speed",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-realistic-globe-with-musical-elements_23-2151500712.jpg?_wi=4",
|
||||
imageAlt: "creative musical jingle design",
|
||||
},
|
||||
]}
|
||||
title="Hear From Our Partners"
|
||||
description="Transforming brands through the power of sound."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Aarav Sharma", date: "Jan 2025", title: "Founder, StartupXYZ", quote: "Meloting completely changed our brand recognition.", tag: "Impact", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg", imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-white-background_187299-40208.jpg", imageAlt: "corporate background music concept" },
|
||||
{ id: "2", name: "Priya Verma", date: "Feb 2025", title: "CMO, TechGlobal", quote: "The emotional depth of our brand song is incredible.", tag: "Result", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg", imageAlt: "professional headshot executive" },
|
||||
{ id: "3", name: "Raj Patel", date: "Mar 2025", title: "Creator, ArtFlow", quote: "Truly a premium experience from start to finish.", tag: "Quality", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg", imageSrc: "http://img.b2bpic.net/free-photo/electronic-sports-championship-with-computers-3d-illustration_1419-2789.jpg", imageAlt: "neon music waves background dark" },
|
||||
{ id: "4", name: "Sarah Khan", date: "Apr 2025", title: "Founder, Luxe", quote: "Unmatched creative vision and musical talent.", tag: "Vision", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg", imageSrc: "http://img.b2bpic.net/free-photo/christmas-background-with-numbers-2023-decor-details-flat-lay_169016-25112.jpg", imageAlt: "modern music card design" },
|
||||
{ id: "5", name: "Vikram Singh", date: "May 2025", title: "COO, Streamline", quote: "Professional, fast, and emotionally engaging.", tag: "Speed", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg", imageSrc: "http://img.b2bpic.net/free-photo/3d-realistic-globe-with-musical-elements_23-2151500712.jpg", imageAlt: "creative musical jingle design" }
|
||||
]}
|
||||
title="Hear From Our Partners"
|
||||
description="Transforming brands through the power of sound."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Let's Start"
|
||||
title="Turn Your Idea into a Song"
|
||||
description="Ready to bring your brand to life? We're listening."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Let's Start"
|
||||
title="Turn Your Idea into a Song"
|
||||
description="Ready to bring your brand to life? We're listening."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Meloting"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Meloting"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Portfolio", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user