230 lines
12 KiB
TypeScript
230 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { Zap, Rocket } from "lucide-react";
|
|
|
|
export default function MarsOrbitalPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="MARS ORBITAL"
|
|
navItems={[
|
|
{ name: "The Vision", id: "vision" },
|
|
{ name: "The Hotel", id: "hotel" },
|
|
{ name: "Journey", id: "journey" },
|
|
{ name: "Engineering", id: "engineering" },
|
|
{ name: "Experience", id: "experience" }
|
|
]}
|
|
button={{
|
|
text: "Reserve Your Place", href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="The First Hotel Beyond Earth."
|
|
description="Arriving on Mars. Redefining hospitality."
|
|
tag="Private Space Mission"
|
|
imageSrc="https://img.b2bpic.net/free-photo/astral-concept-wallpaper_23-2150038872.jpg"
|
|
imageAlt="Mars orbital horizon with faint station structures"
|
|
buttons={[
|
|
{
|
|
text: "Reserve Your Place in History", href: "contact"
|
|
},
|
|
{
|
|
text: "Explore the Mission", href: "vision"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="vision" data-section="vision">
|
|
<TestimonialAboutCard
|
|
tag="OUR VISION"
|
|
tagIcon={Zap}
|
|
title="Making Mars habitable, not just reachable."
|
|
description="Long-term human presence. Scientific discovery. Quiet luxury."
|
|
subdescription="Engineered for permanence, designed for wonder."
|
|
icon={Rocket}
|
|
imageSrc="https://img.b2bpic.net/free-photo/journey-planet-mars-concept_23-2150063208.jpg"
|
|
imageAlt="Panoramic view of Martian terrain from orbital altitude"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hotel" data-section="hotel">
|
|
<ProductCardThree
|
|
title="The Hotel"
|
|
description="Ultra-modern suites with views that redefine luxury."
|
|
tag="Exclusive Accommodations"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "suite-gravity-zero", name: "Zero-Gravity Suite", price: "∞", imageSrc: "https://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248327.jpg?id=138548454", imageAlt: "Ultra-modern suite with panoramic Martian viewport"
|
|
},
|
|
{
|
|
id: "suite-vista", name: "Orbital Vista Chamber", price: "∞", imageSrc: "https://img.b2bpic.net/free-photo/journey-planet-mars-concept_23-2150063208.jpg", imageAlt: "Premium chamber overlooking the Red Planet horizon"
|
|
},
|
|
{
|
|
id: "suite-research", name: "Research & Retreat Pod", price: "∞", imageSrc: "https://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248327.jpg?id=138548454", imageAlt: "Minimalist pod combining science and restful solitude"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
/>
|
|
</div>
|
|
|
|
<div id="journey" data-section="journey">
|
|
<FeatureCardSixteen
|
|
title="Safety & Comfort Throughout Your Journey"
|
|
description="From Earth launch to Mars arrival. Every phase engineered for safety, comfort, and wonder."
|
|
tag="What Sets Our Travel Experience Apart"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
animationType="slide-up"
|
|
negativeCard={{
|
|
items: [
|
|
"Cramped orbital transits", "Unpredictable conditions", "Isolation anxiety"
|
|
]
|
|
}}
|
|
positiveCard={{
|
|
items: [
|
|
"Pressurized comfort pods", "Monitored life support", "Curated scientific briefings", "Zero-G dining experience", "Direct Martian contact"
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="engineering" data-section="engineering">
|
|
<MetricCardSeven
|
|
title="Sustainability & Engineering"
|
|
description="Advanced systems ensuring long-term Martian operations and guest safety."
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
metrics={[
|
|
{
|
|
id: "life-support", value: "360°", title: "Closed-loop life support systems", items: [
|
|
"99.8% oxygen recapture", "Water recycled infinitely", "Atmospheric pressure stabilized"
|
|
]
|
|
},
|
|
{
|
|
id: "energy", value: "100%", title: "Renewable energy infrastructure", items: [
|
|
"Solar panel arrays", "Thermal regulation", "Backup nuclear module"
|
|
]
|
|
},
|
|
{
|
|
id: "construction", value: "∞", title: "Built from Martian regolith", items: [
|
|
"In-situ resource utilization", "Structural integrity verified", "Low Earth transport costs"
|
|
]
|
|
},
|
|
{
|
|
id: "redundancy", value: "6x", title: "Fail-safe redundancy across all systems", items: [
|
|
"Independent backup networks", "Real-time health monitoring", "Emergency protocols"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="experience" data-section="experience">
|
|
<TestimonialCardTen
|
|
title="The Experience"
|
|
description="What awaits you on the Red Planet."
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
testimonials={[
|
|
{
|
|
id: "dawn", title: "Waking to a red horizon.", quote: "Your first morning on Mars: soft rust light fills the chamber as you float weightless above your pod. No Earth, no sky—just the horizon. Silence. Presence.", name: "The Arrival", role: "First light experience", imageSrc: "https://img.b2bpic.net/free-photo/tranquil-sunset-rugged-mountain-landscape-beauty-undefined-generated-by-ai_188544-22148.jpg", imageAlt: "Zero-gravity living space overlooking Martian landscape"
|
|
},
|
|
{
|
|
id: "movement", title: "Movement redefined.", quote: "Low gravity changes everything. Your body moves differently. Climbing feels like floating. Walking becomes a dance. The physical world invites you to move with intention.", name: "The Adaptation", role: "Physical exploration", imageSrc: "https://img.b2bpic.net/free-photo/tranquil-sunset-rugged-mountain-landscape-beauty-undefined-generated-by-ai_188544-22148.jpg", imageAlt: "Guest experiencing low-gravity movement in hotel atrium"
|
|
},
|
|
{
|
|
id: "dining", title: "Curated meals under alien stars.", quote: "Chef-prepared courses float on magnetic trays. Each meal pairs Martian-grown ingredients with culinary precision. You eat slowly. You taste everything. The view does the rest.", name: "The Nourishment", role: "Dining experience", imageSrc: "https://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797638.jpg", imageAlt: "Minimalist dining area with panoramic Martian viewport"
|
|
},
|
|
{
|
|
id: "exploration", title: "Guided scientific immersion.", quote: "Pressurized excursions reveal Mars' geology in real-time. You walk on actual Martian surface, study rock formations with research teams, understand the planet's story firsthand.", name: "The Discovery", role: "Geological expedition", imageSrc: "https://img.b2bpic.net/free-photo/journey-planet-mars-concept_23-2150063208.jpg", imageAlt: "Extended view of Martian terrain from research platform"
|
|
},
|
|
{
|
|
id: "solitude", title: "Profound solitude and reflection.", quote: "Private observation decks offer unfiltered contact with Mars. Hours alone. No noise. The planet's presence becomes your companion. You understand scale, isolation, and privilege.", name: "The Stillness", role: "Personal retreat", imageSrc: "https://img.b2bpic.net/free-photo/journey-planet-mars-concept_23-2150063208.jpg", imageAlt: "Observation deck with unobstructed view of Martian horizon"
|
|
},
|
|
{
|
|
id: "return", title: "The privilege of return.", quote: "You'll leave Mars changed. The view of Earth from Martian orbit. The memory of silence. The knowledge that you've existed in two worlds. That weight never leaves.", name: "The Ascent", role: "Departure reflection", imageSrc: "https://img.b2bpic.net/free-photo/astral-concept-wallpaper_23-2150038872.jpg", imageAlt: "View of Earth from Mars orbital station"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Join the Mission"
|
|
animationType="entrance-slide"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{
|
|
text: "Reserve Your Place", href: "#contact-form"
|
|
},
|
|
{
|
|
text: "Request Information", href: "#contact-form"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="MARS ORBITAL HOTEL"
|
|
columns={[
|
|
{
|
|
title: "Mission", items: [
|
|
{ label: "The Vision", href: "#vision" },
|
|
{ label: "The Hotel", href: "#hotel" },
|
|
{ label: "Engineering", href: "#engineering" }
|
|
]
|
|
},
|
|
{
|
|
title: "Experience", items: [
|
|
{ label: "The Journey", href: "#journey" },
|
|
{ label: "Accommodations", href: "#hotel" },
|
|
{ label: "Activities", href: "#experience" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#vision" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Mars Orbital Hotel. Space travel involves experimental risk. See terms."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |