560 lines
20 KiB
TypeScript
560 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { Award, BookOpen, Code, Diamond, Film, Globe, Lightbulb, MessageSquare, Settings, Sparkles, User, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Overview",
|
|
id: "#hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Features",
|
|
id: "#features",
|
|
},
|
|
{
|
|
name: "Projects",
|
|
id: "#projects",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n48fht"
|
|
logoAlt="AstroVerse 5D Logo"
|
|
brandName="AstroVerse 5D"
|
|
bottomLeftText="Explore the Cosmos"
|
|
bottomRightText="experience@astroverse.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
background={{
|
|
variant: "rotated-rays-animated",
|
|
}}
|
|
title="Unleash Your Senses with AstroVerse 5D"
|
|
description="Experience reality redefined. Dive into immersive worlds inspired by anime montages and breathtaking space animations, crafted with unparalleled visual fidelity and dynamic storytelling."
|
|
tag="The Next Dimension of Entertainment"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Explore Experiences",
|
|
href: "#projects",
|
|
},
|
|
{
|
|
text: "Join Our Community",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
carouselItems={[
|
|
{
|
|
id: "carousel-item-1",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/illustration-rain-futuristic-city_23-2151406575.jpg?_wi=1",
|
|
imageAlt: "Futuristic anime cityscape",
|
|
},
|
|
{
|
|
id: "carousel-item-2",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/galaxy-planets-digital-art_23-2151727737.jpg",
|
|
imageAlt: "Spaceship traveling through nebula",
|
|
},
|
|
{
|
|
id: "carousel-item-3",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/literary-fantasy-character_23-2151863450.jpg",
|
|
imageAlt: "5D anime character in abstract environment",
|
|
},
|
|
{
|
|
id: "carousel-item-4",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-vr-headset-operational-base_53876-101151.jpg",
|
|
imageAlt: "Advanced virtual reality interface",
|
|
},
|
|
{
|
|
id: "carousel-item-5",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-bright-purple-sphere_23-2148235889.jpg",
|
|
imageAlt: "Abstract geometric light particles in cosmic void",
|
|
},
|
|
{
|
|
id: "carousel-item-6",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/anime-style-galaxy-background_23-2151133886.jpg",
|
|
imageAlt: "Anime eye reflecting a collapsing star",
|
|
},
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={5000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
imagePosition="right"
|
|
title="Redefining Immersive Storytelling"
|
|
description="AstroVerse 5D pushes the boundaries of perception, combining cutting-edge technology with cinematic artistry. Our experiences engage all five senses, creating a profound connection to narrative worlds. Prepare for a journey beyond imagination."
|
|
tag="About AstroVerse"
|
|
tagIcon={Globe}
|
|
tagAnimation="blur-reveal"
|
|
bulletPoints={[
|
|
{
|
|
title: "Multi-Sensory Engagement",
|
|
description: "Engage sight, sound, touch, smell, and even motion for true immersion.",
|
|
icon: Code,
|
|
},
|
|
{
|
|
title: "Anime-Inspired Universes",
|
|
description: "Explore worlds brought to life with dynamic animation and rich character design.",
|
|
icon: Sparkles,
|
|
},
|
|
{
|
|
title: "Pioneering 5D Technology",
|
|
description: "Leveraging advanced haptics, environmental effects, and volumetric displays.",
|
|
icon: Zap,
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-shapes-blue-wallpaper_1017-2733.jpg"
|
|
imageAlt="Abstract representation of 5 Dimensions"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Global Immersive Networks",
|
|
description: "Connect with users worldwide in shared, persistent 5D spaces.",
|
|
bentoComponent: "globe",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/securing-digital-world-cyberpunk-vision_23-2151997036.jpg",
|
|
imageAlt: "animated 3d globe data network",
|
|
},
|
|
{
|
|
title: "Orbiting Dimensional Gates",
|
|
description: "Access various narrative branches and alternate realities seamlessly.",
|
|
bentoComponent: "orbiting-icons",
|
|
centerIcon: Diamond,
|
|
items: [
|
|
{
|
|
icon: Dimension,
|
|
ring: 1,
|
|
},
|
|
{
|
|
icon: Plane,
|
|
ring: 2,
|
|
},
|
|
{
|
|
icon: Tesseract,
|
|
ring: 3,
|
|
},
|
|
{
|
|
icon: Infinity,
|
|
ring: 1,
|
|
},
|
|
{
|
|
icon: GitFork,
|
|
ring: 2,
|
|
},
|
|
],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n48fht",
|
|
imageAlt: "animated 3d globe data network",
|
|
},
|
|
{
|
|
title: "Dynamic Scenario Generation",
|
|
description: "AI-driven storytelling adapts to your choices, creating truly unique journeys.",
|
|
bentoComponent: "3d-card-grid",
|
|
items: [
|
|
{
|
|
name: "Adaptive AI",
|
|
icon: Cpu,
|
|
},
|
|
{
|
|
name: "Generative Worlds",
|
|
icon: CircuitBoard,
|
|
},
|
|
{
|
|
name: "Personalized Narratives",
|
|
icon: User,
|
|
},
|
|
{
|
|
name: "Emergent Lore",
|
|
icon: BookOpen,
|
|
},
|
|
],
|
|
centerIcon: Lightbulb,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/illustration-rain-futuristic-city_23-2151406575.jpg?_wi=2",
|
|
imageAlt: "animated 3d globe data network",
|
|
},
|
|
]}
|
|
title="The Core of Our 5D Ecosystem"
|
|
description="Our unique blend of technology and artistry creates unforgettable experiences that transcend traditional media. Explore the innovative features that bring our digital worlds to life."
|
|
tag="Advanced Capabilities"
|
|
tagIcon={Settings}
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardOne
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Nebula Echoes",
|
|
price: "Interactive Journey",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-playing-games-vr-set-indoors_23-2148513444.jpg",
|
|
imageAlt: "Nebula Echoes concept art",
|
|
rating: 5,
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Chrono Drift",
|
|
price: "Time-Bending Adventure",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568844.jpg",
|
|
imageAlt: "Chrono Drift concept art",
|
|
rating: 5,
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Quantum Bloom",
|
|
price: "Generative Art Installation",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/couple-getting-married-beach_23-2151158054.jpg",
|
|
imageAlt: "Quantum Bloom concept art",
|
|
rating: 4,
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Echoes of Elysium",
|
|
price: "Multi-Sensory Story",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/natural-rock-formations-landscape_23-2151723068.jpg",
|
|
imageAlt: "Echoes of Elysium concept art",
|
|
rating: 5,
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Void Weaver",
|
|
price: "Cosmic Horror Experience",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-posing-with-universe-projection-texture_23-2149581305.jpg",
|
|
imageAlt: "Void Weaver concept art",
|
|
rating: 4,
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "SynthWave Drift",
|
|
price: "Audiovisual Journey",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-creative-illustration_23-2151980675.jpg",
|
|
imageAlt: "SynthWave Drift concept art",
|
|
rating: 5,
|
|
},
|
|
]}
|
|
title="Our Groundbreaking 5D Experiences"
|
|
description="Explore the diverse worlds and captivating narratives we've crafted. Each project is a unique gateway to another dimension, offering unparalleled immersion."
|
|
tag="The AstroVerse Portfolio"
|
|
tagIcon={Film}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "500K+",
|
|
title: "Total Interactions",
|
|
description: "Engaging experiences across all platforms.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301541.jpg",
|
|
imageAlt: "Data network visualization",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "98%",
|
|
title: "Immersion Rating",
|
|
description: "Users consistently report deep, realistic immersion.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/colorful-gradient-background-with-neon-led-light_53876-103676.jpg",
|
|
imageAlt: "Holographic brain interface",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "100+",
|
|
title: "Unique Dimensions",
|
|
description: "A vast library of worlds and realities to explore.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/door-leading-magical-world_23-2151038280.jpg",
|
|
imageAlt: "Geometric planes and portals",
|
|
},
|
|
{
|
|
id: "m4",
|
|
value: "Global",
|
|
title: "Community Reach",
|
|
description: "Connecting enthusiasts from every corner of the globe.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512129.jpg",
|
|
imageAlt: "Anime character with celestial map",
|
|
},
|
|
]}
|
|
title="Measurable Impact, Infinite Potential"
|
|
description="Our innovations aren't just conceptual; they deliver tangible results and unparalleled user engagement across all dimensions."
|
|
tag="Our Achievements"
|
|
tagIcon={Award}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Anya Sharma",
|
|
role: "Tech Enthusiast",
|
|
company: "DigitalFrontiers",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100195.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Kenji Tanaka",
|
|
role: "Game Developer",
|
|
company: "PixelNexus Studios",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/rendering-portrait-anime-doctor_23-2151151870.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Elara Vance",
|
|
role: "Concept Artist",
|
|
company: "Ethereal Brush",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568837.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Marcus 'Synapse' Lee",
|
|
role: "VR Entrepreneur",
|
|
company: "InfiniteSight VR",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-watching-rocket-launch-futuristic-city_23-2151999272.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Dr. Lena Petrova",
|
|
role: "Student Researcher",
|
|
company: "Chronos Institute",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/anime-character-singing_23-2151103470.jpg",
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "David 'Dimension' Kim",
|
|
role: "VR Designer",
|
|
company: "Reality Weavers",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-scene-with-people-doing-regular-tasks-anime-style_23-2151002550.jpg",
|
|
},
|
|
]}
|
|
title="Voices from the 5th Dimension"
|
|
description="Don't just take our word for it. Hear from users who have journeyed into AstroVerse 5D and had their perceptions transformed."
|
|
tag="What Our Explorers Say"
|
|
tagIcon={MessageSquare}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Cosmic Dreams Studios",
|
|
"Dimension Forge Gaming",
|
|
"Neural Flow AI",
|
|
"Quantum Leap VFX",
|
|
"Ethereal Realms VR",
|
|
"Flux Wave Simulations",
|
|
"Infinite Horizon Studios",
|
|
"NextGen Innovations",
|
|
]}
|
|
title="Trusted by Innovators & Visionaries"
|
|
description="We collaborate with leading studios and tech pioneers to bring you the future of immersive experiences."
|
|
tag="Our Partners"
|
|
tagIcon={Users}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "faq-1",
|
|
title: "What exactly is '5D' technology?",
|
|
content: "5D technology integrates advanced visual and auditory experiences with haptic feedback, environmental effects (like wind, scent), and motion simulation, engaging more senses for profound immersion.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
title: "How is AstroVerse 5D different from VR?",
|
|
content: "While VR focuses primarily on sight and sound, 5D expands upon it by adding physical sensations, environmental elements, and dynamic motion, creating a more holistic and believable simulated reality.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
title: "What kind of content can I expect?",
|
|
content: "We offer a diverse range, from anime-inspired narrative adventures and cosmic explorations to interactive art installations and mind-bending simulations. Our content continually expands with new experiences.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
title: "Do I need special equipment?",
|
|
content: "Some experiences may require specialized haptic suits or motion platforms, often available at our partner locations. We also develop content compatible with advanced home VR setups enhanced with environmental peripherals.",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
title: "How can I contribute to the AstroVerse community?",
|
|
content: "Join our forums, participate in beta tests, submit fan art, or even apply to be a content creator. We're always looking for passionate individuals to help shape the future of 5D.",
|
|
},
|
|
]}
|
|
sideTitle="Your Questions, Answered"
|
|
sideDescription="Find quick answers to common inquiries about our 5D experiences, technology, and community."
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Connect with the Cosmos"
|
|
description="Ready to dive into the next dimension or have a partnership inquiry? Reach out to us, and let's create something extraordinary together."
|
|
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/senior-people-attending-videocall-meeting-with-relatives-hospital-grandparents-using-laptop-computer-chat-with-family-online-remote-videoconference-internet-conversation_482257-33895.jpg"
|
|
imageAlt="Cosmic connection hub"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Experiences",
|
|
items: [
|
|
{
|
|
label: "Nebula Echoes",
|
|
href: "#projects",
|
|
},
|
|
{
|
|
label: "Chrono Drift",
|
|
href: "#projects",
|
|
},
|
|
{
|
|
label: "Quantum Bloom",
|
|
href: "#projects",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Partners",
|
|
href: "#social-proof",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "FAQ",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Community Guidelines",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n48fht"
|
|
logoAlt="AstroVerse 5D Logo"
|
|
logoText="AstroVerse 5D"
|
|
copyrightText="© 2024 AstroVerse 5D. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|