301 lines
18 KiB
TypeScript
301 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
|
import { Hourglass, Gem, Swords, Heart, ScrollText } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="largeSmall"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="Nier Reincarnation"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Story", id: "story" },
|
|
{ name: "Characters", id: "characters" },
|
|
{ name: "World", id: "world" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-vector/sword-wings-logo-design_23-2150369023.jpg"
|
|
logoAlt="Nier Reincarnation Logo"
|
|
bottomLeftText="Global Community"
|
|
bottomRightText="jp.nier.support@example.com"
|
|
button={{ text: "EN" }}
|
|
/>
|
|
</div>
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlayTestimonial
|
|
title="Echoes of a Forgotten World"
|
|
description="Unravel the truth in a haunting tale of memory and despair. Journey through the Cage, a mysterious realm where past and present intertwine."
|
|
testimonials={[
|
|
{
|
|
name: "Alex 'GamerLex' Chen", handle: "@GamerLex", testimonial: "Nier Reincarnation's story is an emotional masterpiece. A must-play for any RPG fan!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-sportive-woman-with-hand-stretching-gum_114579-14181.jpg", imageAlt: "Alex 'GamerLex' Chen"
|
|
},
|
|
{
|
|
name: "Sarah 'CritiqueQueen' Lee", handle: "@CritiqueQueen", testimonial: "The art direction and music are simply breathtaking. Truly immersive and unique.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technician-making-sure-high-tech-facility-data-center-is-appropriately-equipped_482257-94430.jpg", imageAlt: "Sarah 'CritiqueQueen' Lee"
|
|
},
|
|
{
|
|
name: "Mike 'RPGPro' Johnson", handle: "@RPGPro", testimonial: "A deep narrative that lingers long after you finish playing. Highly recommended.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-teen-smiling-girl-headset-playing-video-games-video-game-club-with-blue-red-illumination_1268-24598.jpg", imageAlt: "Mike 'RPGPro' Johnson"
|
|
},
|
|
{
|
|
name: "Emily 'LoreLover' White", handle: "@LoreLover", testimonial: "The lore expands the Nier universe beautifully. Every detail is a treat for fans.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-influencer-home-studio-live-broadcast_482257-121683.jpg", imageAlt: "Emily 'LoreLover' White"
|
|
},
|
|
{
|
|
name: "David 'PixelHunter' Kim", handle: "@PixelHunter", testimonial: "Hauntingly beautiful and incredibly thought-provoking. A true gem of a game.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-addiction-illustrated_23-2151873438.jpg", imageAlt: "David 'PixelHunter' Kim"
|
|
},
|
|
{
|
|
name: "Jessica 'JoypadJunkie' Green", handle: "@JoypadJunkie", testimonial: "The combat mechanics are surprisingly engaging, complementing the rich story perfectly.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-colleagues-playing-video-games-console-enjoying-drinks-snacks-after-work-coworkers-having-fun-with-game-controllers-while-using-television-after-hours_482257-33396.jpg", imageAlt: "Jessica 'JoypadJunkie' Green"
|
|
}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/view-man-practicing-mindfulness-yoga-fantasy-setting_23-2151416459.jpg"
|
|
imageAlt="Desolate Nier Reincarnation landscape"
|
|
useInvertedBackground={false}
|
|
tagAnimation="entrance-slide"
|
|
buttonAnimation="expand-hover"
|
|
mediaAnimation="opacity"
|
|
textPosition="bottom"
|
|
showBlur={true}
|
|
/>
|
|
</div>
|
|
<div id="story" data-section="story">
|
|
<InlineImageSplitTextAbout
|
|
heading={[{ type: "text", content: "The Tale of the Broken King and the Child of the Cage" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautiful-woman-with-dragon-fantasy-scene_23-2151620025.jpg"
|
|
imageAlt="Yumi and F standing in ethereal ruins"
|
|
useInvertedBackground={true}
|
|
buttonAnimation="expand-hover"
|
|
/>
|
|
</div>
|
|
<div id="world" data-section="world">
|
|
<FeatureCardTwentySeven
|
|
title="Explore the Fragmented Realms"
|
|
description="The Cage is a world of endless corridors and forgotten stories, where every fragment holds a piece of a larger truth. Discover unique gameplay mechanics that delve into memory, combat, and the very fabric of existence."
|
|
features={[
|
|
{
|
|
id: "1", title: "Weapon Stories", descriptions: [
|
|
"Unearth the memories imbued within legendary weapons, revealing untold tales and granting powerful abilities. Each weapon has a voice, waiting to be heard."
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/map-virgin-islands-british-gold-glitter-map-dark-background_559531-10743.jpg", imageAlt: "Fragmented world map"
|
|
},
|
|
{
|
|
id: "2", title: "Automaton Companions", descriptions: [
|
|
"Befriend loyal automatons who aid you in battle and navigation. Upgrade their modules to unlock new strategies and uncover hidden paths."
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/map-virgin-islands-british-gold-glitter-map-dark-background_559531-10743.jpg", imageAlt: "Automaton companion illustration"
|
|
},
|
|
{
|
|
id: "3", title: "Memory Unlocks", descriptions: [
|
|
"Venture into past echoes to retrieve lost fragments of memory, piecing together Yumi's identity and the world's tragic history."
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/map-virgin-islands-british-gold-glitter-map-dark-background_559531-10743.jpg", imageAlt: "Memory fragment illustration"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="characters" data-section="characters">
|
|
<ProductCardTwo
|
|
title="Guardians and Lost Souls: The Characters"
|
|
description="Meet the enigmatic inhabitants of the Cage, each a whisper from a forgotten era. Their stories intertwine with Yumi's journey, revealing layers of truth and despair. Click or hover on each TCG card to reveal their hidden details."
|
|
products={[
|
|
{
|
|
id: "character-1", brand: "Soldier", name: "The Captive", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/portrait-scandinavian-female-viking-person_23-2151707036.jpg", imageAlt: "The Captive TCG Card"
|
|
},
|
|
{
|
|
id: "character-2", brand: "Warrior", name: "The Exile", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/fantasy-water-representation_23-2151149354.jpg", imageAlt: "The Exile TCG Card"
|
|
},
|
|
{
|
|
id: "character-3", brand: "Sage", name: "The Scholar", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/close-up-rainbow-sunlight-closed-book_23-2148827253.jpg", imageAlt: "The Scholar TCG Card"
|
|
},
|
|
{
|
|
id: "character-4", brand: "Automaton", name: "The Automaton", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/robot-90s_23-2151901206.jpg", imageAlt: "The Automaton TCG Card"
|
|
},
|
|
{
|
|
id: "character-5", brand: "Spirit", name: "The Mourner", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/chinese-woman-holding-traditional-red-envelope-with-chinese-new-year-wishes_181624-16872.jpg", imageAlt: "The Mourner TCG Card"
|
|
},
|
|
{
|
|
id: "character-6", brand: "Marksman", name: "The Gunner", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/rays-coming-out-from-crystal-prism-turquoise-backdrop_23-2147948767.jpg", imageAlt: "The Gunner TCG Card"
|
|
},
|
|
{
|
|
id: "character-7", brand: "Protagonist", name: "Yumi, Child of the Cage", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/portrait-child-with-fantasy-pet-dragon_23-2151668628.jpg", imageAlt: "Yumi TCG Card"
|
|
},
|
|
{
|
|
id: "character-8", brand: "Brute", name: "The Berserker", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/3d-fire-with-flames_23-2151073810.jpg", imageAlt: "The Berserker TCG Card"
|
|
},
|
|
{
|
|
id: "character-9", brand: "Seer", name: "The Oracle", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-white-shirt_158595-1012.jpg", imageAlt: "The Oracle TCG Card"
|
|
},
|
|
{
|
|
id: "character-10", brand: "Controller", name: "The Puppeteer", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/top-view-skeleton-hands-halloween_23-2148614264.jpg", imageAlt: "The Puppeteer TCG Card"
|
|
},
|
|
{
|
|
id: "character-11", brand: "Traveler", name: "The Wanderer", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/cartoon-style-character-traveling_23-2151129665.jpg", imageAlt: "The Wanderer TCG Card"
|
|
},
|
|
{
|
|
id: "character-12", brand: "Shadow", name: "The Assassin", price: "$0", rating: 5,
|
|
reviewCount: "Memories", imageSrc: "http://img.b2bpic.net/free-photo/young-man-halloween-costume-posing-studio-with-little-piece-paper_23-2147908501.jpg", imageAlt: "The Assassin TCG Card"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
<div id="stats" data-section="stats">
|
|
<MetricCardThree
|
|
title="A World of Unending Echoes"
|
|
description="The numbers tell a fraction of the story, but they hint at the vastness and depth of the Cage."
|
|
metrics={[
|
|
{ id: "1", icon: Hourglass, title: "Hours Played", value: "200M+" },
|
|
{ id: "2", icon: Gem, title: "Fragments Discovered", value: "50M+" },
|
|
{ id: "3", icon: Swords, title: "Weapons Collected", value: "100K+" },
|
|
{ id: "4", icon: Heart, title: "Lives Touched", value: "10M+" },
|
|
{ id: "5", icon: ScrollText, title: "Stories Unlocked", value: "75K+" }
|
|
]}
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Acclaimed by Critics and Players"
|
|
description="Nier Reincarnation has captivated audiences worldwide with its unique narrative and stunning visuals."
|
|
names={[
|
|
"IGN", "GameSpot", "Polygon", "Famitsu", "The Gamer", "PC Gamer", "Eurogamer"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common inquiries about the game, its lore, and how to embark on your own journey through the Cage."
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "What is the premise of Nier Reincarnation?", content: "Nier Reincarnation follows a child, Yumi, who awakens in a mysterious realm called the Cage with no memory. Guided by F, she traverses various fragmented areas to uncover her past and the secrets of the Broken King."
|
|
},
|
|
{
|
|
id: "faq-2", title: "Is the game connected to other Nier titles?", content: "Yes, Nier Reincarnation is part of the broader Nier universe, featuring subtle connections and thematic echoes that fans of the series will recognize and appreciate."
|
|
},
|
|
{
|
|
id: "faq-3", title: "What kind of gameplay can I expect?", content: "The game blends exploration of haunting environments with turn-based combat and a deep narrative experience focused on uncovering character stories and memories."
|
|
},
|
|
{
|
|
id: "faq-4", title: "Are there multiple endings?", content: "Like other Nier titles, Reincarnation features a branching narrative with multiple endings that depend on the player's choices and discoveries throughout the story."
|
|
},
|
|
{
|
|
id: "faq-5", title: "What platforms is Nier Reincarnation available on?", content: "Nier Reincarnation is primarily available on mobile platforms (iOS and Android), optimized for a rich, immersive handheld experience."
|
|
}
|
|
]}
|
|
mediaAnimation="opacity"
|
|
imageSrc="http://img.b2bpic.net/free-photo/cosmic-background-with-golden-laser-lights-perfect-digital-wallpaper_181624-24657.jpg"
|
|
imageAlt="Ethereal glowing orb in the Cage"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Community"
|
|
title="Join the Journey"
|
|
description="Connect with fellow travelers and stay updated on the latest news and events from the world of Nier Reincarnation."
|
|
buttons={[
|
|
{ text: "Contact Support", href: "#" },
|
|
{ text: "Follow on Social", href: "#" }
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={true}
|
|
tagAnimation="entrance-slide"
|
|
buttonAnimation="expand-hover"
|
|
/>
|
|
</div>
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-vector/facebook-banner-with-halloween-concept_23-2147924758.jpg"
|
|
imageAlt="Stylized Nier Reincarnation background"
|
|
logoText="Nier Reincarnation"
|
|
columns={[
|
|
{
|
|
title: "Game Info", items: [
|
|
{ label: "Story", href: "#story" },
|
|
{ label: "Characters", href: "#characters" },
|
|
{ label: "World", href: "#world" },
|
|
{ label: "Gameplay", href: "#world" }
|
|
]
|
|
},
|
|
{
|
|
title: "Lore", items: [
|
|
{ label: "The Cage", href: "#" },
|
|
{ label: "Broken King", href: "#" },
|
|
{ label: "Darkness", href: "#" },
|
|
{ label: "Memories", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Community", items: [
|
|
{ label: "Discord", href: "#" },
|
|
{ label: "Twitter", href: "#" },
|
|
{ label: "Facebook", href: "#" },
|
|
{ label: "Forums", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookies", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Nier Reincarnation. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|