Files
1bdf1846-8c5e-4d3a-9389-cf7…/src/app/page.tsx
2026-06-10 19:26:49 +00:00

589 lines
23 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { BookOpen, Facebook, FileText, Film, Globe, Instagram, Music, Twitter, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="small"
sizing="medium"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "#home",
},
{
name: "Story",
id: "#story",
},
{
name: "Characters",
id: "#characters",
},
{
name: "World",
id: "#world",
},
{
name: "Lore",
id: "#lore",
},
{
name: "FAQ",
id: "#faq",
},
{
name: "Contact",
id: "#contact",
},
{
name: "言語",
id: "#lang",
},
]}
brandName="Nier: Reincarnation Realm"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={false}
background={{
variant: "downward-rays-animated",
}}
title="Enter the Shattered Realm"
description="A lost soul awakens in a world of fractured memories. Guided by the mysterious Observer, journey through The Cage to reclaim what was lost and confront the Broken King."
testimonials={[
{
name: "Gaming Nexus",
handle: "@GamingNexus",
testimonial: "\"Nier: Reincarnation Realm delivers a hauntingly beautiful experience, rich with narrative depth and poignant artistry. A must-play for fans of the genre!\"",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/fantasy-eye-illustrated_23-2151675271.jpg?_wi=1",
imageAlt: "nier inspired shattered world hero",
},
{
name: "RPG Insights",
handle: "@RPGInsights",
testimonial: "\"The storytelling is unparalleled, weaving a tapestry of sorrow and hope that captivates from the first moment. Truly an emotional masterpiece.\"",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/abstract-smoke-soundwaves_23-2148227227.jpg",
imageAlt: "nier inspired shattered world hero",
},
{
name: "Critique Sphere",
handle: "@CritiqueSphere",
testimonial: "\"Visually stunning and deeply immersive, the world of The Cage is a character in itself. Prepare to get lost in its mysteries.\"",
rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/virtual-realistic-communication-futuristic-illustrations-digital-painting_456031-45.jpg",
imageAlt: "nier inspired shattered world hero",
},
{
name: "Player's Voice",
handle: "@PlayersVoice",
testimonial: "\"Every character feels alive, their struggles and triumphs resonating long after the game is put down. A powerful journey.\"",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/bhutan-flag-handsome-young-muscular-man-black-background_559531-10800.jpg",
imageAlt: "nier inspired shattered world hero",
},
{
name: "Digital Dreamers",
handle: "@DigitalDreamers",
testimonial: "\"The combat is fluid, the puzzles are engaging, and the soundtrack is absolutely breathtaking. This game sets a new standard.\"",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/historical-beautiful-castle_23-2151010507.jpg",
imageAlt: "nier inspired shattered world hero",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/fantasy-eye-illustrated_23-2151675271.jpg?_wi=2"
imageAlt="A solemn hero standing in a mystical, fractured world, reminiscent of Nier Reincarnation."
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/3d-rendering-chocolate-factory_23-2151451177.jpg",
alt: "Community member 1",
},
{
src: "http://img.b2bpic.net/free-photo/off-road-car-fantasy-scene_23-2151437437.jpg",
alt: "Community member 2",
},
{
src: "http://img.b2bpic.net/free-photo/fantasy-water-character_23-2151149296.jpg",
alt: "Community member 3",
},
{
src: "http://img.b2bpic.net/free-photo/dark-style-lamp-indoors_23-2151106046.jpg",
alt: "Community member 4",
},
{
src: "http://img.b2bpic.net/free-photo/abstract-background-with-cloud_23-2148292421.jpg",
alt: "Community member 5",
},
]}
avatarText="Join our community of over 500,000 lost souls!"
marqueeItems={[
{
type: "text-icon",
text: "Haunting Storyline",
icon: FileText,
},
{
type: "text-icon",
text: "Ethereal Worlds",
icon: Globe,
},
{
type: "text-icon",
text: "Unforgettable Characters",
icon: Users,
},
{
type: "text-icon",
text: "Stunning Soundtrack",
icon: Music,
},
{
type: "text-icon",
text: "Deep Lore",
icon: BookOpen,
},
]}
/>
</div>
<div id="story" data-section="story">
<FeatureCardTwelve
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "story-1",
label: "Chapter I: The Cage's Awakening",
title: "A Silent Arrival",
items: [
"Awaken as a lost soul in a mysterious, sprawling land known only as The Cage.",
"Encounter the cryptic entity, Observer, who promises guidance through fragmented memories.",
"Begin a desperate quest to recover lost fragments of self and purpose.",
],
},
{
id: "story-2",
label: "Chapter II: Journeys Through Memory",
title: "Unveiling Truths",
items: [
"Traverse diverse, decaying landscapes, each holding echoes of forgotten lives.",
"Collect dark memories, witnessing the tragedies and triumphs of past inhabitants.",
"Piece together the true history of The Cage and the events leading to its current state.",
],
},
{
id: "story-3",
label: "Chapter III: Confronting the Broken King",
title: "Reclaiming Destiny",
items: [
"Stand against the tyrannical Broken King, the source of The Cage's suffering.",
"Utilize newfound powers and understanding to challenge his dominion.",
"Decide the fate of The Cage and its inhabitants, shaping a new future or succumbing to despair.",
],
},
]}
title="Echoes of a Forgotten Tale"
description="Unravel the intricate narrative threads of the Broken King's reign and the Observer's enigmatic guidance. Each chapter reveals a piece of a tragic, beautiful saga."
/>
</div>
<div id="world" data-section="world">
<FeatureCardTwelve
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "world-1",
label: "Grand Spire",
title: "Ascending to the Unknown",
items: [
"A colossal, ancient tower stretching endlessly into the fractured sky, rumored to hold the Observer's true form.",
"Its decaying levels are home to forgotten technologies and ethereal guardians.",
"Climbing the spire means confronting truths about The Cage's origin and purpose.",
],
},
{
id: "world-2",
label: "Dark Forest",
title: "Labyrinth of Lost Souls",
items: [
"A dense, overgrown woodland where time seems to stand still, shrouded in perpetual twilight.",
"Bioluminescent flora and fauna hint at hidden dangers and ancient, pre-Cage ecosystems.",
"Whispers of past inhabitants echo through the trees, guiding or misguiding wanderers.",
],
},
{
id: "world-3",
label: "Deserted City",
title: "Echoes of Civilization",
items: [
"A vast, sand-swept metropolis, half-buried and crumbling, a monument to a forgotten civilization.",
"Architectural marvels hint at a complex society that once thrived before The Cage's fracturing.",
"Exploration reveals not just physical ruins, but also emotional remnants of its people.",
],
},
]}
title="The Cage: A World of Whispers"
description="Explore the hauntingly beautiful landscapes within The Cage. From desolate ruins to vibrant dreamscapes, each environment holds secrets and challenges, deeply integrated with the story's emotional core."
/>
</div>
<div id="characters" data-section="characters">
<ProductCardTwo
animationType="scale-rotate"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "char-1",
brand: "Warrior",
name: "The Silent Blade",
price: "Rarity: SR",
rating: 5,
reviewCount: "Skill: Crescent Slash",
imageSrc: "http://img.b2bpic.net/free-photo/scary-skeleton-hand-from-ground_23-2149105933.jpg",
imageAlt: "TCG card of The Silent Blade, male warrior with sword, shiny glass look.",
},
{
id: "char-2",
brand: "Mage",
name: "The Astral Weaver",
price: "Rarity: UR",
rating: 5,
reviewCount: "Skill: Cosmic Storm",
imageSrc: "http://img.b2bpic.net/free-photo/space-background-realistic-starry-night-cosmos-shining-stars-milky-way-stardust-color-galaxy_1258-154815.jpg",
imageAlt: "TCG card of The Astral Weaver, female mage with cosmic magic, shiny glass look.",
},
{
id: "char-3",
brand: "Rogue",
name: "The Shadow Whisper",
price: "Rarity: SR",
rating: 4,
reviewCount: "Skill: Vanishing Strike",
imageSrc: "http://img.b2bpic.net/free-photo/wizard-dark-dungeon-illustration_456031-18.jpg",
imageAlt: "TCG card of The Shadow Whisper, female rogue with hidden blades, shiny glass look.",
},
{
id: "char-4",
brand: "Healer",
name: "The Serene Alchemist",
price: "Rarity: R",
rating: 5,
reviewCount: "Skill: Vitality Potion",
imageSrc: "http://img.b2bpic.net/free-photo/fantasy-shooting-star-landscape-night_23-2151515672.jpg",
imageAlt: "TCG card of The Serene Alchemist, male healer with glowing vial, shiny glass look.",
},
{
id: "char-5",
brand: "Knight",
name: "The Unyielding Bulwark",
price: "Rarity: R",
rating: 4,
reviewCount: "Skill: Shield Wall",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-concrete-wall-with-crack_1252-1095.jpg",
imageAlt: "TCG card of The Unyielding Bulwark, male knight with shield, shiny glass look.",
},
{
id: "char-6",
brand: "Gunner",
name: "The Crimson Barrage",
price: "Rarity: SR",
rating: 5,
reviewCount: "Skill: Rapid Fire",
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-female-biathlon-champion-holds-gun-grey-background_613910-8265.jpg",
imageAlt: "TCG card of The Crimson Barrage, female gunner with futuristic firearm, shiny glass look.",
},
{
id: "char-7",
brand: "Protagonist",
name: "The Innocent Soul",
price: "Rarity: UR",
rating: 5,
reviewCount: "Skill: Guiding Light",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-heart-shaped-lollipops_23-2149535313.jpg",
imageAlt: "TCG card of The Innocent Soul, child protagonist with guiding light, shiny glass look.",
},
{
id: "char-8",
brand: "Mystic",
name: "The Veiled Oracle",
price: "Rarity: UR",
rating: 5,
reviewCount: "Skill: Foresight",
imageSrc: "http://img.b2bpic.net/free-photo/door-stretching-into-fantasy-world_23-2151661336.jpg",
imageAlt: "TCG card of The Veiled Oracle, female mystic with glowing orb, shiny glass look.",
},
{
id: "char-9",
brand: "Beastmaster",
name: "The Wild Companion",
price: "Rarity: SR",
rating: 4,
reviewCount: "Skill: Spirit Roar",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-mythological-minotaur_23-2151817120.jpg",
imageAlt: "TCG card of The Wild Companion, male beastmaster with spectral beast, shiny glass look.",
},
{
id: "char-10",
brand: "Duelist",
name: "The Elegant Blade",
price: "Rarity: SR",
rating: 5,
reviewCount: "Skill: Dance of Blades",
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-zodiac-astrology-sign_23-2150473522.jpg",
imageAlt: "TCG card of The Elegant Blade, female duelist with shimmering blades, shiny glass look.",
},
{
id: "char-11",
brand: "Engineer",
name: "The Clockwork Artisan",
price: "Rarity: R",
rating: 4,
reviewCount: "Skill: Deploy Turret",
imageSrc: "http://img.b2bpic.net/free-photo/covid-19-vaccine-certificate-passport-white-neon-graphic_53876-176879.jpg",
imageAlt: "TCG card of The Clockwork Artisan, male engineer with mechanical devices, shiny glass look.",
},
{
id: "char-12",
brand: "Sorcerer",
name: "The Abyss Gazer",
price: "Rarity: UR",
rating: 5,
reviewCount: "Skill: Shadow Embrace",
imageSrc: "http://img.b2bpic.net/free-photo/literary-fantasy-character_23-2151863452.jpg",
imageAlt: "TCG card of The Abyss Gazer, male sorcerer with dark energy, shiny glass look.",
},
]}
title="Guardians of Memory: The Cast of Nier: Reincarnation Realm"
description="Discover the diverse souls who wander The Cage, each a guardian of fragmented memories. Presented as vibrant TCG cards with a shimmering glass finish and detailed backgrounds, these characters hold unique stories and powers. Imagine their hidden lore, strengths, and tragic pasts that define their journey in this shattered world."
/>
</div>
<div id="lore" data-section="lore">
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
metrics={[
{
id: "lore-1",
value: "The Observer",
title: "Mysterious Guide",
items: [
"An enigmatic entity resembling a small, ghostly being.",
"Guides lost souls through The Cage, collecting memories.",
"Her true motives remain shrouded in mystery.",
],
},
{
id: "lore-2",
value: "The Broken King",
title: "Fallen Monarch",
items: [
"Once a benevolent ruler, now a fragmented tyrant.",
"His despair and power warp reality within The Cage.",
"His connection to the world's shattering is profound.",
],
},
{
id: "lore-3",
value: "Memory Fragments",
title: "Echoes of the Past",
items: [
"Scattered remnants of forgotten lives, containing emotions and events.",
"Collecting them helps lost souls regain their identities.",
"Also serve as a source of power and insight into The Cage's history.",
],
},
]}
title="Chronicles of The Cage"
description="Dive deeper into the mystical elements and historical context of Nier: Reincarnation Realm. Uncover key lore facts that shape this enigmatic world and its tragic inhabitants."
/>
</div>
<div id="reviews" data-section="reviews">
<TestimonialCardTwo
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
uniformGridCustomHeightClasses="min-h-none"
testimonials={[
{
id: "rev-1",
name: "Alex 'Phantom' Reed",
role: "Lead Reviewer, GamingPulse",
testimonial: "\"A profound journey that redefines emotional storytelling in games. The art direction alone is worth the price of admission. Simply breathtaking.\"",
imageSrc: "asset://testimonial-1",
},
{
id: "rev-2",
name: "Dr. Elara Vance",
role: "Narrative Designer",
testimonial: "\"The narrative layers are expertly crafted, inviting players to ponder existential questions within a beautifully melancholic setting. A masterclass in atmospheric design.\"",
imageSrc: "asset://testimonial-2",
},
{
id: "rev-3",
name: "Kai 'Shadowstrider' Sato",
role: "Pro Player & Streamer",
testimonial: "\"Every moment in The Cage feels significant. The characters are unforgettable, and the mysteries keep you hooked. Can't recommend it enough!\"",
imageSrc: "asset://testimonial-3",
},
{
id: "rev-4",
name: "Sophia Chen",
role: "Game Journalist, PixelQuest",
testimonial: "\"Nier: Reincarnation Realm captures the essence of its predecessors while forging its own unique path. A captivating and deeply moving experience.\"",
imageSrc: "asset://testimonial-4",
},
{
id: "rev-5",
name: "Marcus 'Lorekeeper' Thorne",
role: "Community Manager",
testimonial: "\"The lore is incredibly rich, demanding multiple playthroughs to truly grasp its depth. This game will be talked about for years to come.\"",
imageSrc: "asset://testimonial-5",
},
]}
title="Voices from the Void"
description="Hear what critics and players are saying about the immersive world and emotional depth of Nier: Reincarnation Realm, a testament to its compelling narrative and unique atmosphere."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "faq-1",
title: "What is The Cage?",
content: "The Cage is a mysterious, fractured world where lost souls awaken. It is a realm composed of fragmented memories and decaying structures, constantly shifting and holding secrets of a forgotten past.",
},
{
id: "faq-2",
title: "Who is the Observer?",
content: "The Observer is a cryptic, ethereal being who guides the protagonist through The Cage. She appears as a small, spectral entity and is pivotal to unraveling the world's mysteries, though her true intentions are ambiguous.",
},
{
id: "faq-3",
title: "What is the role of memory fragments?",
content: "Memory fragments are scattered pieces of past lives and events within The Cage. Collecting them allows the protagonist to regain lost memories, understand the world's history, and gain new abilities to progress through the story.",
},
{
id: "faq-4",
title: "Who is the Broken King?",
content: "The Broken King is the primary antagonist, a once benevolent ruler now corrupted and shattered. He wields immense power within The Cage, and confronting him is crucial to determining the fate of the realm and its inhabitants.",
},
{
id: "faq-5",
title: "Are there different endings?",
content: "Yes, Nier: Reincarnation Realm features multiple branching storylines and endings influenced by player choices and discoveries. Each path offers a unique perspective on the narrative and the characters' fates.",
},
{
id: "faq-6",
title: "How do character abilities work?",
content: "Characters possess unique abilities tied to their background and class. These abilities can be enhanced by collecting specific memory fragments and relics. Mastering their use is key to overcoming challenges within The Cage.",
},
]}
title="Whispers of Knowledge: Your Questions Answered"
description="Navigate the ambiguities of The Cage with insights into its lore, characters, and intricate gameplay mechanics. Find answers to common inquiries."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Connect with The Cage"
description="Share your thoughts, theories, or questions about Nier: Reincarnation Realm. Join our community in deciphering its mysteries and contributing to the lore."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Your Message",
rows: 5,
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/coloured-cells_1112-334.jpg"
imageAlt="Serene, mystical landscape for contact form."
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Nier: Reincarnation Realm"
copyrightText="© 2024 SQUARE ENIX CO., LTD. All Rights Reserved. Powered by Webild."
socialLinks={[
{
icon: Facebook,
href: "#",
ariaLabel: "Facebook",
},
{
icon: Twitter,
href: "#",
ariaLabel: "Twitter",
},
{
icon: Instagram,
href: "#",
ariaLabel: "Instagram",
},
{
icon: Film,
href: "#",
ariaLabel: "YouTube",
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}