Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #2.
This commit is contained in:
424
src/app/page.tsx
424
src/app/page.tsx
@@ -2,16 +2,16 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import { BookOpen, Compass, Globe, Globe2, Rocket } from "lucide-react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import { Rocket, Globe, Compass, Globe2, BookOpen } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -22,327 +22,111 @@ export default function LandingPage() {
|
||||
contentWidth="medium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Explore",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Resources",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Solarium"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Explore", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Deep Space"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Journey Through the Solar System"
|
||||
description="Uncover the mysteries of the planets, moons, and vast cosmic wonders orbiting our sun."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/planets-solar-system_23-2150042455.jpg?_wi=1"
|
||||
imageAlt="Solar system visualization"
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Exploration",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
text: "View Research",
|
||||
href: "#pricing",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroOverlayTestimonial
|
||||
title="Journey Into the Deep Space"
|
||||
description="Discover the mysteries of our solar system with immersive visualizations and scientific insights."
|
||||
testimonials={[]}
|
||||
buttons={[{ text: "Start Exploration", href: "#features" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/planets-solar-system_23-2150042455.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="The Celestial Home"
|
||||
description={[
|
||||
"The solar system consists of the sun, eight planets, and a vast collection of smaller objects. Our project aims to provide educational insights into these distant worlds.",
|
||||
"Through advanced data visualization and research, we explore the unique characteristics that define each planet's place in our stellar neighborhood.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Celestial Exploration"
|
||||
description="Deep Space provides a gateway to understanding the mechanics of our solar system. From planetary orbits to atmospheric analysis, we bring the cosmos to your screen."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/door-leading-magical-world_23-2151038326.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Rocket,
|
||||
title: "Planetary Data",
|
||||
description: "Accurate orbital stats, sizes, and atmospheric composition for every planet.",
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Interactive Orbits",
|
||||
description: "Experience how planets move around the sun in real-time simulations.",
|
||||
},
|
||||
{
|
||||
icon: Compass,
|
||||
title: "Astrophysics Hub",
|
||||
description: "In-depth articles explaining the physics of gravity, orbits, and light.",
|
||||
},
|
||||
{
|
||||
icon: Globe2,
|
||||
title: "Deep Space Probes",
|
||||
description: "Track active missions and historical journeys of humanity's mechanical scouts.",
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: "Educational Archives",
|
||||
description: "Access curated lecture notes and detailed research papers on celestial mechanics.",
|
||||
},
|
||||
]}
|
||||
title="Key Exploration Zones"
|
||||
description="Discover the most fascinating aspects of our local stellar environment through our comprehensive research zones."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="Planetary Wonders"
|
||||
description="Explore the unique characteristics of each planet in our solar system through detailed interactive modules."
|
||||
features={[
|
||||
{ icon: Rocket, title: "Orbital Mechanics", description: "Understand how planets move through space." },
|
||||
{ icon: Globe, title: "Atmospheric Studies", description: "Dive deep into planetary atmosphere compositions." },
|
||||
{ icon: Compass, title: "Stellar Navigation", description: "Navigate the solar system like a mission control expert." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Student",
|
||||
price: "$0",
|
||||
subtitle: "Access public planetary data",
|
||||
buttons: [
|
||||
{
|
||||
text: "Start Learning",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Fact sheets",
|
||||
"Orbital basics",
|
||||
"Basic images",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Researcher",
|
||||
price: "$19",
|
||||
subtitle: "Advanced simulation access",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Access",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"3D Visualizations",
|
||||
"Extended data logs",
|
||||
"Expert tutorials",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Access Research Tiers"
|
||||
description="Select the level of access for our comprehensive planetary research databases and visual simulation tools."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="Mission Tiers"
|
||||
description="Select your depth of exploration with our curated research tiers."
|
||||
plans={[
|
||||
{ id: "p1", title: "Explorer", price: "$0", period: "Free", features: ["Basic Orbit Data", "Planet Info"], button: { text: "Begin" } },
|
||||
{ id: "p2", title: "Researcher", price: "$29", period: "Month", features: ["3D Simulations", "Deep Data Access"], button: { text: "Upgrade" } }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Dr. Sarah Miller",
|
||||
role: "Astrophysicist",
|
||||
company: "Space Research Inst.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/planets-solar-system_23-2150042455.jpg?_wi=2",
|
||||
imageAlt: "solar system wide view cosmic",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark Johnson",
|
||||
role: "Teacher",
|
||||
company: "Science Academy",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/solar-system-planet-isolated-light-background-flat-lay_169016-29024.jpg",
|
||||
imageAlt: "gas giant ringed planet closeup",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Chen",
|
||||
role: "Student",
|
||||
company: "Uni of Science",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/door-leading-magical-world_23-2151038326.jpg?_wi=1",
|
||||
imageAlt: "astronaut looking at stars",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Smith",
|
||||
role: "Educator",
|
||||
company: "Planetarium",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/space-background-realistic-starry-night-cosmos-shining-stars-milky-way-stardust-color-galaxy_1258-154815.jpg?_wi=1",
|
||||
imageAlt: "stardust flowing black background",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Lisa Wong",
|
||||
role: "Enthusiast",
|
||||
company: "Space Hobbyist",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/planets-solar-system_23-2150042455.jpg?_wi=3",
|
||||
imageAlt: "solar system wide view cosmic",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "50K+",
|
||||
label: "Learners",
|
||||
},
|
||||
{
|
||||
value: "120+",
|
||||
label: "Schools",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Accuracy",
|
||||
},
|
||||
]}
|
||||
title="Community Voices"
|
||||
description="Our education platform empowers students, teachers, and researchers across the globe."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="The most immersive astronomical platform I have ever used. Absolutely stunning."
|
||||
rating={5}
|
||||
author="Dr. Alex Rivers, Space Scientist"
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
avatars={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is the data updated?",
|
||||
content: "Yes, we integrate real-time NASA and ESA datasets daily.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I use images?",
|
||||
content: "Our gallery is licensed under CC-BY for all educational purposes.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Are simulations accurate?",
|
||||
content: "Yes, all models are calculated based on scientific orbital physics.",
|
||||
},
|
||||
{
|
||||
id: "q4",
|
||||
title: "How do I cite data?",
|
||||
content: "Each dataset comes with a pre-formatted citation block for your convenience.",
|
||||
},
|
||||
{
|
||||
id: "q5",
|
||||
title: "Do you offer offline access?",
|
||||
content: "Yes, our mobile application allows downloading data modules for offline review.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Get quick answers to common questions about our platform and the solar system."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Cosmic Inquiries"
|
||||
description="Common questions about our platform."
|
||||
faqs={[
|
||||
{ id: "1", title: "Is the data accurate?", content: "Yes, updated daily from NASA/ESA feeds." },
|
||||
{ id: "2", title: "How do I start?", content: "Simply browse our feature zones to get started." }
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Stay Connected"
|
||||
description="Have questions or suggestions for our solar research hub? Send us a message."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/door-leading-magical-world_23-2151038326.jpg?_wi=2"
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your Inquiry",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Inquiry"
|
||||
title="Connect with Mission Control"
|
||||
description="Send us your cosmic questions."
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/space-background-realistic-starry-night-cosmos-shining-stars-milky-way-stardust-color-galaxy_1258-154815.jpg?_wi=2"
|
||||
logoText="Solarium"
|
||||
columns={[
|
||||
{
|
||||
title: "Explore",
|
||||
items: [
|
||||
{
|
||||
label: "Planets",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Research",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Deep Space"
|
||||
leftLink={{ text: "Privacy", href: "#" }}
|
||||
rightLink={{ text: "Terms", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f8f5ffe6;
|
||||
--primary-cta: #c89bff;
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #106EFB;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta-text: #f8f5ffe6;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
--accent: #535353;
|
||||
--background-accent: #106EFB;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user