Update src/app/page.tsx

This commit is contained in:
2026-05-08 18:46:37 +00:00
parent d0bd2d2f95
commit 65604de644

View File

@@ -33,73 +33,46 @@ export default function LandingPage() {
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "#hero",
},
name: "Home", id: "hero"},
{
name: "Shows",
id: "#movies",
},
name: "Shows", id: "movies"},
{
name: "Plans",
id: "#pricing",
},
name: "Plans", id: "pricing"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "contact"},
]}
brandName="melo"
button={{
text: "Join Now",
href: "#pricing",
}}
text: "Join Now", href: "#pricing"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{
variant: "gradient-bars",
}}
variant: "gradient-bars"}}
title="melo: Cinematic Excellence"
description="Experience the next evolution of home entertainment. Immerse yourself in a universe of high-definition, award-winning content, curated just for you."
tag="New Streaming Era"
buttons={[
{
text: "Explore Library",
href: "#movies",
},
text: "Explore Library", href: "#movies"},
{
text: "Learn More",
href: "#pricing",
},
text: "Learn More", href: "#pricing"},
]}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h3i31c&_wi=1",
imageAlt: "movie streaming cinematic dark background",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h3i31c", imageAlt: "movie streaming cinematic dark background"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6bfmki&_wi=1",
imageAlt: "action movie collage dark",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6bfmki", imageAlt: "action movie collage dark"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8aisbe&_wi=1",
imageAlt: "surreal sci-fi digital art",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8aisbe", imageAlt: "surreal sci-fi digital art"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4lyaz6&_wi=1",
imageAlt: "film noir dark cinematography",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4lyaz6", imageAlt: "film noir dark cinematography"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u5pbk5&_wi=1",
imageAlt: "nature documentary landscape cinematic",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u5pbk5", imageAlt: "nature documentary landscape cinematic"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=66szpw",
imageAlt: "fantasy mystical portal dark",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=66szpw", imageAlt: "fantasy mystical portal dark"},
]}
tagIcon={Sparkles}
tagAnimation="blur-reveal"
@@ -114,29 +87,11 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Ultra 4K Clarity",
description: "Crisp visuals with HDR support for every title.",
tag: "Visuals",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=a80ctf&_wi=1",
imageAlt: "4k streaming playback screen",
},
id: "f1", title: "Ultra 4K Clarity", description: "Crisp visuals with HDR support for every title.", tag: "Visuals", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=a80ctf", imageAlt: "4k streaming playback screen"},
{
id: "f2",
title: "Offline Playback",
description: "Download your favorites and watch anywhere, anytime.",
tag: "Flexibility",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5p5wmo",
imageAlt: "download content offline icon",
},
id: "f2", title: "Offline Playback", description: "Download your favorites and watch anywhere, anytime.", tag: "Flexibility", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5p5wmo", imageAlt: "download content offline icon"},
{
id: "f3",
title: "Multi-Device Sync",
description: "Seamless transition across phone, tablet, and smart TV.",
tag: "Connect",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8euab6",
imageAlt: "multi-device sync streaming",
},
id: "f3", title: "Multi-Device Sync", description: "Seamless transition across phone, tablet, and smart TV.", tag: "Connect", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8euab6", imageAlt: "multi-device sync streaming"},
]}
title="Streaming Without Limits"
description="Powerful features designed to enhance every frame of your viewing journey."
@@ -154,65 +109,23 @@ export default function LandingPage() {
useInvertedBackground={false}
products={[
{
id: "m1",
brand: "Sci-Fi",
name: "Nebula Voyager",
price: "Trending",
rating: 5,
reviewCount: "1.2k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u1isqq",
imageAlt: "movie poster sci-fi dark",
},
id: "m1", brand: "Sci-Fi", name: "Nebula Voyager", price: "Trending", rating: 5,
reviewCount: "1.2k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u1isqq", imageAlt: "movie poster sci-fi dark"},
{
id: "m2",
brand: "Thriller",
name: "Midnight Shadow",
price: "New",
rating: 4,
reviewCount: "890",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9k9mji",
imageAlt: "action thriller movie poster",
},
id: "m2", brand: "Thriller", name: "Midnight Shadow", price: "New", rating: 4,
reviewCount: "890", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9k9mji", imageAlt: "action thriller movie poster"},
{
id: "m3",
brand: "Nature",
name: "Wild Frontiers",
price: "Popular",
rating: 5,
reviewCount: "2.1k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zhg17h",
imageAlt: "nature documentary film poster",
},
id: "m3", brand: "Nature", name: "Wild Frontiers", price: "Popular", rating: 5,
reviewCount: "2.1k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zhg17h", imageAlt: "nature documentary film poster"},
{
id: "m4",
brand: "Fantasy",
name: "Crystal Keep",
price: "Coming Soon",
rating: 4,
reviewCount: "400",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gis3n5",
imageAlt: "fantasy adventure movie cover",
},
id: "m4", brand: "Fantasy", name: "Crystal Keep", price: "Coming Soon", rating: 4,
reviewCount: "400", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gis3n5", imageAlt: "fantasy adventure movie cover"},
{
id: "m5",
brand: "Comedy",
name: "Laugh Daily",
price: "Trending",
rating: 5,
reviewCount: "3.5k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1no0hi",
imageAlt: "comedy film poster dark",
},
id: "m5", brand: "Comedy", name: "Laugh Daily", price: "Trending", rating: 5,
reviewCount: "3.5k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1no0hi", imageAlt: "comedy film poster dark"},
{
id: "m6",
brand: "Horror",
name: "Echoes Deep",
price: "Horror Night",
rating: 4,
reviewCount: "670",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5dqbvf",
imageAlt: "horror movie poster dark",
},
id: "m6", brand: "Horror", name: "Echoes Deep", price: "Horror Night", rating: 4,
reviewCount: "670", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5dqbvf", imageAlt: "horror movie poster dark"},
]}
title="Featured Collections"
description="Explore the trending genres and blockbusters hitting your screen this month."
@@ -229,52 +142,28 @@ export default function LandingPage() {
useInvertedBackground={false}
plans={[
{
id: "p1",
price: "$9.99",
name: "Basic",
buttons: [
id: "p1", price: "$9.99", name: "Basic", buttons: [
{
text: "Start Basic",
href: "#",
},
text: "Start Basic", href: "#"},
],
features: [
"Standard Definition",
"1 Device",
"Limited Library",
],
"Standard Definition", "1 Device", "Limited Library"],
},
{
id: "p2",
price: "$15.99",
name: "Standard",
buttons: [
id: "p2", price: "$15.99", name: "Standard", buttons: [
{
text: "Start Standard",
href: "#",
},
text: "Start Standard", href: "#"},
],
features: [
"Full HD",
"2 Devices",
"Full Library",
],
"Full HD", "2 Devices", "Full Library"],
},
{
id: "p3",
price: "$19.99",
name: "Premium",
buttons: [
id: "p3", price: "$19.99", name: "Premium", buttons: [
{
text: "Start Premium",
href: "#",
},
text: "Start Premium", href: "#"},
],
features: [
"4K Ultra HD",
"4 Devices",
"Full Library + Extras",
],
"4K Ultra HD", "4 Devices", "Full Library + Extras"],
},
]}
title="Choose Your Plan"
@@ -286,25 +175,17 @@ export default function LandingPage() {
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="blur-reveal"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "met1",
value: "10M+",
description: "Happy Active Subscribers",
},
id: "met1", value: "10M+", description: "Happy Active Subscribers"},
{
id: "met2",
value: "50K+",
description: "Hours of Content",
},
id: "met2", value: "50K+", description: "Hours of Content"},
{
id: "met3",
value: "190+",
description: "Countries Available",
},
id: "met3", value: "190+", description: "Countries Available"},
]}
title="Our Impact"
description="Join millions of happy melo viewers globally."
@@ -317,65 +198,15 @@ export default function LandingPage() {
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Miller",
date: "Jan 2024",
title: "Binge Watcher",
quote: "The content library is simply unbeatable. I love the interface!",
tag: "Fan",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o3sty4",
avatarAlt: "portrait happy movie viewer",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h3i31c&_wi=2",
imageAlt: "portrait happy movie viewer",
},
id: "t1", name: "Sarah Miller", date: "Jan 2024", title: "Binge Watcher", quote: "The content library is simply unbeatable. I love the interface!", tag: "Fan", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o3sty4", avatarAlt: "portrait happy movie viewer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h3i31c", imageAlt: "portrait happy movie viewer"},
{
id: "t2",
name: "John Doe",
date: "Feb 2024",
title: "Film Editor",
quote: "The 4K quality is stunning. Best streaming experience ever.",
tag: "Expert",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aevrx6",
avatarAlt: "video editor portrait professional",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6bfmki&_wi=2",
imageAlt: "portrait happy movie viewer",
},
id: "t2", name: "John Doe", date: "Feb 2024", title: "Film Editor", quote: "The 4K quality is stunning. Best streaming experience ever.", tag: "Expert", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aevrx6", avatarAlt: "video editor portrait professional", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6bfmki", imageAlt: "portrait happy movie viewer"},
{
id: "t3",
name: "Anna Smith",
date: "Mar 2024",
title: "Subscriber",
quote: "melo has changed how I enjoy my weekend movie nights.",
tag: "Subscriber",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fflr82",
avatarAlt: "content creator portrait",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8aisbe&_wi=2",
imageAlt: "portrait happy movie viewer",
},
id: "t3", name: "Anna Smith", date: "Mar 2024", title: "Subscriber", quote: "melo has changed how I enjoy my weekend movie nights.", tag: "Subscriber", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fflr82", avatarAlt: "content creator portrait", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8aisbe", imageAlt: "portrait happy movie viewer"},
{
id: "t4",
name: "Robert B.",
date: "Apr 2024",
title: "Fan",
quote: "Fantastic selection, fast loading, highly recommended.",
tag: "Reviewer",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=moxa6a",
avatarAlt: "avid viewer portrait",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4lyaz6&_wi=2",
imageAlt: "portrait happy movie viewer",
},
id: "t4", name: "Robert B.", date: "Apr 2024", title: "Fan", quote: "Fantastic selection, fast loading, highly recommended.", tag: "Reviewer", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=moxa6a", avatarAlt: "avid viewer portrait", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4lyaz6", imageAlt: "portrait happy movie viewer"},
{
id: "t5",
name: "Lisa K.",
date: "May 2024",
title: "Power User",
quote: "I love the multi-device features. Simply smooth.",
tag: "Fan",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8bdhnh",
avatarAlt: "tech savvy user portrait",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u5pbk5&_wi=2",
imageAlt: "portrait happy movie viewer",
},
id: "t5", name: "Lisa K.", date: "May 2024", title: "Power User", quote: "I love the multi-device features. Simply smooth.", tag: "Fan", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8bdhnh", avatarAlt: "tech savvy user portrait", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u5pbk5", imageAlt: "portrait happy movie viewer"},
]}
title="Loved by Viewers"
description="See why everyone is switching to melo."
@@ -388,25 +219,16 @@ export default function LandingPage() {
useInvertedBackground={false}
faqs={[
{
id: "faq1",
title: "Can I cancel anytime?",
content: "Yes, cancel your subscription through your settings whenever you want.",
},
id: "faq1", title: "Can I cancel anytime?", content: "Yes, cancel your subscription through your settings whenever you want."},
{
id: "faq2",
title: "Is offline viewing supported?",
content: "Absolutely. Download content to your devices for offline playback.",
},
id: "faq2", title: "Is offline viewing supported?", content: "Absolutely. Download content to your devices for offline playback."},
{
id: "faq3",
title: "What devices work with melo?",
content: "melo works across smart TVs, tablets, smartphones, and web browsers.",
},
id: "faq3", title: "What devices work with melo?", content: "melo works across smart TVs, tablets, smartphones, and web browsers."},
]}
title="Need Help?"
description="Common answers for our new members."
faqsAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=a80ctf&_wi=2"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=a80ctf"
imageAlt="4k streaming playback screen"
mediaAnimation="slide-up"
/>
@@ -416,16 +238,13 @@ export default function LandingPage() {
<ContactCTA
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
variant: "radial-gradient"}}
tag="Get In Touch"
title="Ready to get started?"
description="Join our community today and redefine your movie experience."
buttons={[
{
text: "Contact Support",
href: "#",
},
text: "Contact Support", href: "#"},
]}
/>
</div>
@@ -436,49 +255,31 @@ export default function LandingPage() {
{
items: [
{
label: "About",
href: "#",
},
label: "About", href: "#"},
{
label: "Jobs",
href: "#",
},
label: "Jobs", href: "#"},
{
label: "Press",
href: "#",
},
label: "Press", href: "#"},
],
},
{
items: [
{
label: "Help Center",
href: "#",
},
label: "Help Center", href: "#"},
{
label: "Terms",
href: "#",
},
label: "Terms", href: "#"},
{
label: "Privacy",
href: "#",
},
label: "Privacy", href: "#"},
],
},
{
items: [
{
label: "Gift Cards",
href: "#",
},
label: "Gift Cards", href: "#"},
{
label: "Plans",
href: "#",
},
label: "Plans", href: "#"},
{
label: "Account",
href: "#",
},
label: "Account", href: "#"},
],
},
]}