bender/efe20c17-b406-4444-992f-5d7165edc640
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-08 16:00:08 +00:00
parent 46e9d724be
commit d54d8cf5c7
1 changed files with 38 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
src/app/page.tsx
View File

@@ -30,98 +30,42 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Catalog",
id: "catalog",
},
{
name: "Community",
id: "testimonials",
},
{
name: "Support",
id: "faq",
},
{ name: "Home", id: "hero" },
{ name: "Catalog", id: "catalog" },
{ name: "Community", id: "testimonials" },
{ name: "Support", id: "faq" }
]}
brandName="Mangaverse"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
title="Unfold Worlds, One Page at a Time"
description="Experience the ultimate collection of classic and modern manga. Dive into infinite stories crafted with passion and ink."
buttons={[
{
text: "Explore Library",
href: "#catalog",
},
]}
buttons={[{ text: "Explore Library", href: "#catalog" }]}
carouselItems={[
{
id: "1",
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-superhero-illustration_23-2151732554.jpg",
imageAlt: "manga hero illustration",
},
{
id: "2",
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-boxing-day-celebration_23-2151040888.jpg",
imageAlt: "manga action sequence",
},
{
id: "3",
imageSrc: "http://img.b2bpic.net/free-photo/galaxy-background-illustration_23-2151909851.jpg",
imageAlt: "manga fantasy magical scene",
},
{
id: "4",
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-portrait-girl-with-pink-hair-ribbon-pigtails_23-2152033273.jpg",
imageAlt: "manga character close-up",
},
{
id: "5",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-cityscape-with-red-bridge-overlooking-waterfall_23-2151975110.jpg",
imageAlt: "epic manga wide shot",
},
{
id: "6",
imageSrc: "http://img.b2bpic.net/free-photo/anime-style-boy-girl-couple_23-2151451489.jpg",
imageAlt: "slice of life manga panel",
},
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/cartoon-superhero-illustration_23-2151732554.jpg", imageAlt: "manga hero illustration" },
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-boxing-day-celebration_23-2151040888.jpg", imageAlt: "manga action sequence" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/galaxy-background-illustration_23-2151909851.jpg", imageAlt: "manga fantasy magical scene" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/dreamy-portrait-girl-with-pink-hair-ribbon-pigtails_23-2152033273.jpg", imageAlt: "manga character close-up" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-cityscape-with-red-bridge-overlooking-waterfall_23-2151975110.jpg", imageAlt: "epic manga wide shot" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/anime-style-boy-girl-couple_23-2151451489.jpg", imageAlt: "slice of life manga panel" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardSeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "4K Quality Panels",
description: "Crisp, high-resolution scans for an immersive reading experience.",
imageSrc: "http://img.b2bpic.net/free-photo/anime-girl-with-gingerbread-man-christmas-sweater_23-2152027012.jpg",
imageAlt: "manga hero illustration",
},
{
title: "Curated Collections",
description: "Hand-picked recommendations based on your unique reading style.",
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-boxing-day-celebration_23-2151040928.jpg",
imageAlt: "manga action sequence",
},
{
title: "Community Hub",
description: "Join thousands of fans discussing your favorite story arcs.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-clouds-digital-art_23-2151105890.jpg",
imageAlt: "manga fantasy magical scene",
},
{ title: "4K Quality Panels", description: "Crisp, high-resolution scans for an immersive reading experience.", imageSrc: "http://img.b2bpic.net/free-photo/anime-girl-with-gingerbread-man-christmas-sweater_23-2152027012.jpg", imageAlt: "manga hero illustration" },
{ title: "Curated Collections", description: "Hand-picked recommendations based on your unique reading style.", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-boxing-day-celebration_23-2151040928.jpg", imageAlt: "manga action sequence" },
{ title: "Community Hub", description: "Join thousands of fans discussing your favorite story arcs.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-clouds-digital-art_23-2151105890.jpg", imageAlt: "manga fantasy magical scene" }
]}
title="Why Mangaverse?"
description="We deliver premium reading experiences for every manga lover."
@@ -135,60 +79,12 @@ export default function LandingPage() {
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
brand: "Studio Ink",
name: "Neon Odyssey",
price: "$12.99",
rating: 5,
reviewCount: "1.2k",
imageSrc: "http://img.b2bpic.net/free-photo/comic-sound-effect-speech-bubble-pink-background_23-2147910063.jpg",
},
{
id: "p2",
brand: "Void Press",
name: "Crimson Path",
price: "$14.99",
rating: 4,
reviewCount: "890",
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-girl-neon-city_23-2152007989.jpg",
},
{
id: "p3",
brand: "Apex Manga",
name: "Shadow Realm",
price: "$9.99",
rating: 5,
reviewCount: "2.1k",
imageSrc: "http://img.b2bpic.net/free-photo/fantasy-water-character_23-2151149343.jpg",
},
{
id: "p4",
brand: "Studio Ink",
name: "Starbound",
price: "$11.99",
rating: 5,
reviewCount: "670",
imageSrc: "http://img.b2bpic.net/free-photo/rendering-bee-anime-character_23-2150963734.jpg",
},
{
id: "p5",
brand: "Apex Manga",
name: "Midnight Whispers",
price: "$15.99",
rating: 4,
reviewCount: "450",
imageSrc: "http://img.b2bpic.net/free-photo/anime-style-characters-space_23-2151134349.jpg",
},
{
id: "p6",
brand: "Void Press",
name: "Iron Soul",
price: "$13.99",
rating: 5,
reviewCount: "990",
imageSrc: "http://img.b2bpic.net/free-photo/ink_1417-1950.jpg",
},
{ id: "p1", brand: "Studio Ink", name: "Neon Odyssey", price: "$12.99", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/comic-sound-effect-speech-bubble-pink-background_23-2147910063.jpg" },
{ id: "p2", brand: "Void Press", name: "Crimson Path", price: "$14.99", rating: 4, reviewCount: "890", imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-girl-neon-city_23-2152007989.jpg" },
{ id: "p3", brand: "Apex Manga", name: "Shadow Realm", price: "$9.99", rating: 5, reviewCount: "2.1k", imageSrc: "http://img.b2bpic.net/free-photo/fantasy-water-character_23-2151149343.jpg" },
{ id: "p4", brand: "Studio Ink", name: "Starbound", price: "$11.99", rating: 5, reviewCount: "670", imageSrc: "http://img.b2bpic.net/free-photo/rendering-bee-anime-character_23-2150963734.jpg" },
{ id: "p5", brand: "Apex Manga", name: "Midnight Whispers", price: "$15.99", rating: 4, reviewCount: "450", imageSrc: "http://img.b2bpic.net/free-photo/anime-style-characters-space_23-2151134349.jpg" },
{ id: "p6", brand: "Void Press", name: "Iron Soul", price: "$13.99", rating: 5, reviewCount: "990", imageSrc: "http://img.b2bpic.net/free-photo/ink_1417-1950.jpg" }
]}
title="Latest Releases"
description="Discover your next obsession in our massive digital catalog."
@@ -201,27 +97,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "1M+",
title: "Happy Readers",
description: "Global community reach.",
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637774.jpg",
},
{
id: "m2",
value: "500+",
title: "Titles Published",
description: "Diverse genre collection.",
imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568858.jpg",
},
{
id: "m3",
value: "99%",
title: "Fan Satisfaction",
description: "Consistently top-rated.",
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-experts-working-with-tech-devices-neon-lights_23-2151645620.jpg",
},
{ id: "m1", value: "1M+", title: "Happy Readers", description: "Global community reach.", imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637774.jpg" },
{ id: "m2", value: "500+", title: "Titles Published", description: "Diverse genre collection.", imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568858.jpg" },
{ id: "m3", value: "99%", title: "Fan Satisfaction", description: "Consistently top-rated.", imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-experts-working-with-tech-devices-neon-lights_23-2151645620.jpg" }
]}
title="Our Impact"
description="Connecting fans and storytellers across the globe."
@@ -235,26 +113,11 @@ export default function LandingPage() {
rating={5}
author="Kaito H."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/rendering-bee-anime-character_23-2150963700.jpg",
alt: "manga fan art",
},
{
src: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568870.jpg",
alt: "manga fan art",
},
{
src: "http://img.b2bpic.net/free-photo/collage-about-childhood-concept_23-2150169411.jpg",
alt: "manga fan art",
},
{
src: "http://img.b2bpic.net/free-photo/man-walking-graveyard-moonlight_23-2152012986.jpg",
alt: "manga fan art",
},
{
src: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151486979.jpg",
alt: "manga fan art",
},
{ src: "http://img.b2bpic.net/free-photo/rendering-bee-anime-character_23-2150963700.jpg", alt: "manga fan art" },
{ src: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568870.jpg", alt: "manga fan art" },
{ src: "http://img.b2bpic.net/free-photo/collage-about-childhood-concept_23-2150169411.jpg", alt: "manga fan art" },
{ src: "http://img.b2bpic.net/free-photo/man-walking-graveyard-moonlight_23-2152012986.jpg", alt: "manga fan art" },
{ src: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151486979.jpg", alt: "manga fan art" }
]}
ratingAnimation="slide-up"
avatarsAnimation="blur-reveal"
@@ -266,21 +129,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{
id: "f1",
title: "Is it subscription-based?",
content: "Yes, we offer monthly and annual plans.",
},
{
id: "f2",
title: "Can I read offline?",
content: "Absolutely! Download chapters directly to your library.",
},
{
id: "f3",
title: "What devices are supported?",
content: "Works on all browsers, tablets, and mobile devices.",
},
{ id: "f1", title: "Is it subscription-based?", content: "Yes, we offer monthly and annual plans." },
{ id: "f2", title: "Can I read offline?", content: "Absolutely! Download chapters directly to your library." },
{ id: "f3", title: "What devices are supported?", content: "Works on all browsers, tablets, and mobile devices." }
]}
imageSrc="http://img.b2bpic.net/free-photo/anime-girl-sailor-uniform-night_23-2152019519.jpg"
mediaAnimation="blur-reveal"
@@ -293,9 +144,7 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "rotated-rays-static",
}}
background={{ variant: "rotated-rays-static" }}
tag="Stay Updated"
title="Join the Revolution"
description="Subscribe for early access to releases and community news."
@@ -309,45 +158,9 @@ export default function LandingPage() {
imageSrc="http://img.b2bpic.net/free-photo/dark-blending-cloud-water_23-2147786659.jpg"
logoText="Mangaverse"
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "#",
},
{
label: "Careers",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "FAQs",
href: "#faq",
},
{
label: "Contact",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
{ title: "Support", items: [{ label: "FAQs", href: "#faq" }, { label: "Contact", href: "#" }] },
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
]}
/>
</div>