Merge version_2 into main

Merge version_2 into main

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 ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import { BookOpen, Compass, Globe, Globe2, Rocket } from "lucide-react";
+import { Rocket, Globe, Compass } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -22,327 +22,117 @@ export default function LandingPage() {
         contentWidth="medium"
         sizing="largeSmallSizeMediumTitles"
         background="noiseDiagonalGradient"
-        cardStyle="solid"
+        cardStyle="glass-depth"
-        primaryButtonStyle="shadow"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="medium"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+          <NavbarStyleCentered
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "home" },
-          name: "Home",
+              { name: "About", id: "about" },
-          id: "home",
+              { name: "Explore", id: "features" },
-        },
+              { name: "Pricing", id: "pricing" },
-        {
+              { name: "Contact", id: "contact" },
-          name: "About",
+            ]}
-          id: "about",
+            brandName="Deep Space"
-        },
+          />
-        {
+        </div>
-          name: "Explore",
-          id: "features",
-        },
-        {
-          name: "Resources",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Solarium"
-    />
-  </div>
 
-  <div id="home" data-section="home">
+        <div id="home" data-section="home">
-      <HeroBillboardScroll
+          <HeroOverlayTestimonial
-      background={{
+            title="Journey Into the Deep Space"
-        variant: "sparkles-gradient",
+            description="Discover the mysteries of our solar system with immersive visualizations and scientific insights."
-      }}
+            testimonials={[]}
-      title="Journey Through the Solar System"
+            buttons={[{ text: "Start Exploration", href: "#features" }]}
-      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"
-      imageSrc="http://img.b2bpic.net/free-photo/planets-solar-system_23-2150042455.jpg?_wi=1"
+          />
-      imageAlt="Solar system visualization"
+        </div>
-      buttons={[
-        {
-          text: "Start Exploration",
-          href: "#features",
-        },
-        {
-          text: "View Research",
-          href: "#pricing",
-        },
-      ]}
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <TextSplitAbout
+          <MediaAbout
-      useInvertedBackground={true}
+            useInvertedBackground={true}
-      title="The Celestial Home"
+            title="Celestial Exploration"
-      description={[
+            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."
-        "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.",
+            imageSrc="http://img.b2bpic.net/free-photo/door-leading-magical-world_23-2151038326.jpg?_wi=1"
-        "Through advanced data visualization and research, we explore the unique characteristics that define each planet's place in our stellar neighborhood.",
+          />
-      ]}
+        </div>
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureHoverPattern
+          <FeatureCardSeven
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="split"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      features={[
+            title="Planetary Wonders"
-        {
+            description="Explore the unique characteristics of each planet in our solar system through detailed interactive modules."
-          icon: Rocket,
+            features={[
-          title: "Planetary Data",
+              { title: "Orbital Mechanics", description: "Understand how planets move through space." },
-          description: "Accurate orbital stats, sizes, and atmospheric composition for every planet.",
+              { title: "Atmospheric Studies", description: "Dive deep into planetary atmosphere compositions." },
-        },
+              { title: "Stellar Navigation", description: "Navigate the solar system like a mission control expert." },
-        {
+            ]}
-          icon: Globe,
+          />
-          title: "Interactive Orbits",
+        </div>
-          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="pricing" data-section="pricing">
+        <div id="pricing" data-section="pricing">
-      <PricingCardEight
+          <PricingCardNine
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="split"
+            textboxLayout="split"
-      useInvertedBackground={true}
+            useInvertedBackground={false}
-      plans={[
+            title="Mission Tiers"
-        {
+            description="Select your depth of exploration with our curated research tiers."
-          id: "basic",
+            plans={[
-          badge: "Student",
+              { id: "p1", title: "Explorer", price: "$0", period: "Free", features: ["Basic Orbit Data", "Planet Info"], button: { text: "Begin" } },
-          price: "$0",
+              { id: "p2", title: "Researcher", price: "$29", period: "Month", features: ["3D Simulations", "Deep Data Access"], button: { text: "Upgrade" } }
-          subtitle: "Access public planetary data",
+            ]}
-          buttons: [
+          />
-            {
+        </div>
-              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="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+          <TestimonialCardFifteen
-      animationType="slide-up"
+            testimonial="The most immersive astronomical platform I have ever used. Absolutely stunning."
-      textboxLayout="split"
+            rating={5}
-      useInvertedBackground={false}
+            author="Dr. Alex Rivers, Space Scientist"
-      testimonials={[
+            ratingAnimation="blur-reveal"
-        {
+            avatarsAnimation="blur-reveal"
-          id: "1",
+            useInvertedBackground={false}
-          name: "Dr. Sarah Miller",
+            avatars={[]}
-          role: "Astrophysicist",
+          />
-          company: "Space Research Inst.",
+        </div>
-          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="faq" data-section="faq">
+        <div id="faq" data-section="faq">
-      <FaqBase
+          <FaqDouble
-      textboxLayout="split"
+            title="Cosmic Inquiries"
-      useInvertedBackground={true}
+            description="Common questions about our platform."
-      faqs={[
+            faqs={[
-        {
+              { id: "1", title: "Is the data accurate?", content: "Yes, updated daily from NASA/ESA feeds." },
-          id: "q1",
+              { id: "2", title: "How do I start?", content: "Simply browse our feature zones to get started." }
-          title: "Is the data updated?",
+            ]}
-          content: "Yes, we integrate real-time NASA and ESA datasets daily.",
+            faqsAnimation="slide-up"
-        },
+            textboxLayout="split"
-        {
+            useInvertedBackground={false}
-          id: "q2",
+          />
-          title: "Can I use images?",
+        </div>
-          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="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactSplitForm
+          <ContactSplit
-      useInvertedBackground={false}
+            tag="Inquiry"
-      title="Stay Connected"
+            title="Connect with Mission Control"
-      description="Have questions or suggestions for our solar research hub? Send us a message."
+            description="Send us your cosmic questions."
-      inputs={[
+            mediaAnimation="blur-reveal"
-        {
+            useInvertedBackground={false}
-          name: "name",
+            background={{ variant: "plain" }}
-          type: "text",
+          />
-          placeholder: "Your Name",
+        </div>
-          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="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterMedia
+          <FooterLogoReveal
-      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="Deep Space"
-      logoText="Solarium"
+            leftLink={{ text: "Privacy", href: "#" }}
-      columns={[
+            rightLink={{ text: "Terms", href: "#" }}
-        {
+          />
-          title: "Explore",
+        </div>
-          items: [
-            {
-              label: "Planets",
-              href: "#",
-            },
-            {
-              label: "Research",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "FAQ",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #000000;
-  --card: #1a1a1a;
+  --card: #0c0c0c;
-  --foreground: #f8f5ffe6;
+  --foreground: #ffffff;
-  --primary-cta: #c89bff;
+  --primary-cta: #106EFB;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #000000;
   --secondary-cta-text: #f8f5ffe6;
-  --accent: #737373;
+  --accent: #535353;
-  --background-accent: #737373;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);