From cec4418767cc9babe113d28cdd4fcd95557f8012 Mon Sep 17 00:00:00 2001 From: kudinDmitriyUp Date: Tue, 16 Jun 2026 13:03:43 +0000 Subject: [PATCH 1/2] Bob AI: Added interactive 3D solar system map section --- src/pages/HomePage.tsx | 154 +++------------- src/pages/HomePage/sections/About.tsx | 22 +++ src/pages/HomePage/sections/Contact.tsx | 21 +++ src/pages/HomePage/sections/Faq.tsx | 26 +++ src/pages/HomePage/sections/Features.tsx | 26 +++ src/pages/HomePage/sections/Gallery.tsx | 29 +++ src/pages/HomePage/sections/Hero.tsx | 29 +++ src/pages/HomePage/sections/Metrics.tsx | 25 +++ .../HomePage/sections/SolarSystemMap.tsx | 169 ++++++++++++++++++ src/pages/HomePage/sections/Testimonials.tsx | 27 +++ 10 files changed, 400 insertions(+), 128 deletions(-) create mode 100644 src/pages/HomePage/sections/About.tsx create mode 100644 src/pages/HomePage/sections/Contact.tsx create mode 100644 src/pages/HomePage/sections/Faq.tsx create mode 100644 src/pages/HomePage/sections/Features.tsx create mode 100644 src/pages/HomePage/sections/Gallery.tsx create mode 100644 src/pages/HomePage/sections/Hero.tsx create mode 100644 src/pages/HomePage/sections/Metrics.tsx create mode 100644 src/pages/HomePage/sections/SolarSystemMap.tsx create mode 100644 src/pages/HomePage/sections/Testimonials.tsx diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index e6b2ce3..bd5040c 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,140 +1,38 @@ -import AboutTestimonial from '@/components/sections/about/AboutTestimonial'; -import ContactCta from '@/components/sections/contact/ContactCta'; -import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion'; -import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid'; -import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento'; -import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards'; -import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards'; -import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard'; -import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary"; +// AUTO-GENERATED shell by per-section-migrate. +// Section bodies live in .//sections/.tsx. Edit the section +// files directly. Non-block content (wrappers, non-inlinable sections) is +// preserved inline; extracted section blocks become refs. -export default function HomePage() { +import React from 'react'; +import HeroSection from './HomePage/sections/Hero'; +import AboutSection from './HomePage/sections/About'; +import FeaturesSection from './HomePage/sections/Features'; +import GallerySection from './HomePage/sections/Gallery'; +import MetricsSection from './HomePage/sections/Metrics'; +import TestimonialsSection from './HomePage/sections/Testimonials'; +import FaqSection from './HomePage/sections/Faq'; +import ContactSection from './HomePage/sections/Contact'; + + +import SolarSystemMapSection from './HomePage/sections/SolarSystemMap';export default function HomePage(): React.JSX.Element { return ( - <> -
- - - -
+<> + -
- - - -
+ -
- - - -
+ - + -
- - - -
+ -
- - - -
+ -
- - - -
+ -
- - - -
+ + ); } diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx new file mode 100644 index 0000000..ad8e3b8 --- /dev/null +++ b/src/pages/HomePage/sections/About.tsx @@ -0,0 +1,22 @@ +// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this +// file as the canonical source for the "about" section. + +import React from 'react'; +import AboutTestimonial from '@/components/sections/about/AboutTestimonial'; +import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary"; + +export default function AboutSection(): React.JSX.Element { + return ( +
+ + + +
+ ); +} diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx new file mode 100644 index 0000000..8e58b1c --- /dev/null +++ b/src/pages/HomePage/sections/Contact.tsx @@ -0,0 +1,21 @@ +// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this +// file as the canonical source for the "contact" section. + +import React from 'react'; +import ContactCta from '@/components/sections/contact/ContactCta'; +import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary"; + +export default function ContactSection(): React.JSX.Element { + return ( +
+ + + +
+ ); +} diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx new file mode 100644 index 0000000..82daf62 --- /dev/null +++ b/src/pages/HomePage/sections/Faq.tsx @@ -0,0 +1,26 @@ +// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this +// file as the canonical source for the "faq" section. + +import React from 'react'; +import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion'; +import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary"; + +export default function FaqSection(): React.JSX.Element { + return ( +
+ + + +
+ ); +} diff --git a/src/pages/HomePage/sections/Features.tsx b/src/pages/HomePage/sections/Features.tsx new file mode 100644 index 0000000..c24bbcd --- /dev/null +++ b/src/pages/HomePage/sections/Features.tsx @@ -0,0 +1,26 @@ +// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this +// file as the canonical source for the "features" section. + +import React from 'react'; +import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid'; +import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary"; + +export default function FeaturesSection(): React.JSX.Element { + return ( +
+ + + +
+ ); +} diff --git a/src/pages/HomePage/sections/Gallery.tsx b/src/pages/HomePage/sections/Gallery.tsx new file mode 100644 index 0000000..3354394 --- /dev/null +++ b/src/pages/HomePage/sections/Gallery.tsx @@ -0,0 +1,29 @@ +// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this +// file as the canonical source for the "gallery" section. + +import React from 'react'; +import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento'; +import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary"; + +export default function GallerySection(): React.JSX.Element { + return ( + + ); +} diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx new file mode 100644 index 0000000..fbf500c --- /dev/null +++ b/src/pages/HomePage/sections/Hero.tsx @@ -0,0 +1,29 @@ +// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this +// file as the canonical source for the "hero" section. + +import React from 'react'; +import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards'; +import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary"; + +export default function HeroSection(): React.JSX.Element { + return ( +
+ + + +
+ ); +} diff --git a/src/pages/HomePage/sections/Metrics.tsx b/src/pages/HomePage/sections/Metrics.tsx new file mode 100644 index 0000000..0bea357 --- /dev/null +++ b/src/pages/HomePage/sections/Metrics.tsx @@ -0,0 +1,25 @@ +// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this +// file as the canonical source for the "metrics" section. + +import React from 'react'; +import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards'; +import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary"; + +export default function MetricsSection(): React.JSX.Element { + return ( +
+ + + +
+ ); +} diff --git a/src/pages/HomePage/sections/SolarSystemMap.tsx b/src/pages/HomePage/sections/SolarSystemMap.tsx new file mode 100644 index 0000000..862135c --- /dev/null +++ b/src/pages/HomePage/sections/SolarSystemMap.tsx @@ -0,0 +1,169 @@ +import { useState } from 'react'; +import { motion, AnimatePresence } from 'motion/react'; +import TextAnimation from '@/components/ui/TextAnimation'; +import ScrollReveal from '@/components/ui/ScrollReveal'; +import Button from '@/components/ui/Button'; + +const planets = [ + { name: "Sun", color: "bg-yellow-500", size: 64, orbit: 0, speed: 0, info: "The star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, heated to incandescence by nuclear fusion reactions in its core." }, + { name: "Mercury", color: "bg-gray-400", size: 12, orbit: 15, speed: 8, info: "The smallest planet in the Solar System and the closest to the Sun. Its orbit around the Sun takes 87.97 Earth days, the shortest of all the Sun's planets." }, + { name: "Venus", color: "bg-orange-300", size: 20, orbit: 25, speed: 12, info: "The second planet from the Sun. It is a terrestrial planet and is sometimes called Earth's sister planet because of their similar size, mass, proximity to the Sun, and bulk composition." }, + { name: "Earth", color: "bg-blue-500", size: 22, orbit: 35, speed: 16, info: "Our home planet, the third from the Sun, and the only astronomical object known to harbor life. About 29.2% of Earth's surface is land consisting of continents and islands." }, + { name: "Mars", color: "bg-red-500", size: 16, orbit: 45, speed: 20, info: "The fourth planet from the Sun, often referred to as the Red Planet because the iron oxide prevalent on its surface gives it a reddish appearance." }, + { name: "Jupiter", color: "bg-[#d39c7e]", size: 48, orbit: 60, speed: 30, info: "The largest planet in the Solar System, a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined." }, + { name: "Saturn", color: "bg-[#ead6b8]", size: 40, orbit: 75, speed: 40, info: "The sixth planet from the Sun, known for its prominent ring system. It is a gas giant with an average radius of about nine and a half times that of Earth." }, + { name: "Uranus", color: "bg-[#d1e7e7]", size: 28, orbit: 88, speed: 50, info: "The seventh planet from the Sun. It has the third-largest planetary radius and fourth-largest planetary mass in the Solar System." }, + { name: "Neptune", color: "bg-[#5b5ddf]", size: 26, orbit: 100, speed: 60, info: "The eighth and farthest-known Solar planet from the Sun. In the Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet, and the densest giant planet." }, +]; + +export default function SolarSystemMap() { + const [selectedPlanet, setSelectedPlanet] = useState(planets[3]); // Earth by default + const [isPaused, setIsPaused] = useState(false); + + return ( +
+
+ +
+ + +

+ Explore the planets in our solar system. Click on any planet to learn more about it. +

+ +
+ +
+ + {/* 3D Map Container */} +
setIsPaused(true)} + onMouseLeave={() => setIsPaused(false)} + > +
+ + {planets.map((planet) => { + if (planet.orbit === 0) { + return ( +
setSelectedPlanet(planet)} + > +
+
+ ); + } + + return ( +
+
{ + e.stopPropagation(); + setSelectedPlanet(planet); + }} + > + {/* Planet Ring for Saturn */} + {planet.name === 'Saturn' && ( +
+ )} +
+
+ ); + })} +
+
+ + {/* Info Panel */} +
+ + +
+
+
+ {selectedPlanet.name === 'Saturn' && ( +
+ )} +
+
+

{selectedPlanet.name}

+
+ {selectedPlanet.orbit === 0 ? 'Star' : 'Planet'} +
+
+
+ +

+ {selectedPlanet.info} +

+ +
+
+
Distance from Sun
+
{selectedPlanet.orbit === 0 ? '0' : `${Math.round(selectedPlanet.orbit * 4.28)}M km`}
+
+
+
Orbital Period
+
{selectedPlanet.speed === 0 ? 'N/A' : `${selectedPlanet.speed * 10} days`}
+
+
+ +
+ +
+ +