added explore section and restructured code

package.json

@@ -16,7 +16,6 @@
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/themes": "^2.0.3",
-    "@react-spring/three": "^9.7.3",
     "@react-three/drei": "^9.92.7",
     "@react-three/fiber": "^8.15.12",
     "framer-motion": "^11.0.3",

src/App.jsx

@@ -6,6 +6,9 @@ import Sponsers from "./components/Sponsers";
 import Footer from "./Footer/Footer";
 import bg from "./assets/bg.jpg";
 import ToastComponent from "./components/ToastComponent";
+import Events from "./Events/Events";
+import CarouselComponent from "./components/Carousel";
+import Explore from "./components/Explore";
 
 function App() {
   return (
@@ -23,6 +26,9 @@ function App() {
       <ToastComponent />
       <Header />
       <MidSection />
+      <Explore />
+      <CarouselComponent />
+      <Events />
       <Reg />
       <Sponsers />
       <Footer />

src/Events/Events.jsx

@@ -7,8 +7,8 @@ const Events = () => {
     <Flex
       justify="center"
       align="center"
-      mb="6"
-      mt="6"
+      mb="9"
+      mt="9"
       id="events"
       p="1"
       gap="6"

src/Header/Header.jsx

@@ -1,11 +1,85 @@
-import { Canvas } from "@react-three/fiber";
+import { ButtonAnimation, TextAnimation } from "../components/CustomAnimation";
 import NavBar from "./NavBar";
-import Welcome from "./Welcome";
+import banner from "../assets/hero-banner.png";
+import { Button, Flex, Heading } from "@radix-ui/themes";
+
 const Header = () => {
   return (
     <>
       <NavBar />
-      <Welcome />
+      <Flex
+        mt="9"
+        align="center"
+        justify="center"
+        direction="column"
+        gap="6"
+        style={{ textAlign: "center" }}
+      >
+        <TextAnimation>
+          <Heading
+            color="purple"
+            size={{
+              initial: "3",
+              sm: "4",
+              md: "5",
+              xl: "7",
+            }}
+          >
+            Experience the AR and VR
+          </Heading>
+          <Heading
+            size={{
+              initial: "8",
+              sm: "9",
+              md: "9",
+              xl: "9",
+            }}
+            style={{ fontSize: "clamp(1.5rem, 5vw, 3rem)" }}
+          >
+            Dive into the world of
+            <br /> Gaming Odyssey!
+          </Heading>
+        </TextAnimation>
+        <ButtonAnimation>
+          <a href="https://forms.gle/4hJcWo5N8dcaTPgX9">
+            <Button
+              size={{ initial: "4", sm: "7", md: "8", xl: "9" }}
+              variant="surface"
+            >
+              Register Now
+            </Button>
+          </a>
+        </ButtonAnimation>
+        <Flex
+          align="center"
+          justify="center"
+          style={{
+            borderBottom: "10px solid purple",
+            borderRadius: "10%",
+            width: "97%",
+          }}
+        >
+          <img src={banner} alt="banner" width="100%" />
+        </Flex>
+        <TextAnimation>
+          <Heading
+            size={{
+              initial: "6",
+              sm: "7",
+              md: "8",
+              xl: "9",
+            }}
+            style={{ marginTop: "2rem" }}
+          >
+            Experience Gaming Through
+            <br /> Latest <span style={{ color: "#5D3FD3" }}>Technologies</span>
+          </Heading>
+          <p>
+            Our success thrives on a dedicated, talented team to experience
+            gaming. Join us at the event.
+          </p>
+        </TextAnimation>
+      </Flex>
     </>
   );
 };

src/MidSection/MidSection.jsx

@@ -1,14 +1,12 @@
 import Intro from "/vid/zero_latency.mp4";
 import "./Video.css";
-import Events from "../Events/Events";
 import { Flex } from "@radix-ui/themes";
 import * as HoverCard from "@radix-ui/react-hover-card";
 import gdsc from "../assets/gdsclogo.png";
 import xfinity from "../assets/xfinity-logo.png";
 import { CustomAnimation, LogoAnimation } from "../components/CustomAnimation";
 import { InstagramLogoIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
-import CarouselComponent from "../components/Carousel";
 
 const MidSection = () => {
   const [gdscEvent, setGdscEvent] = useState(false);
@@ -131,8 +129,6 @@ const MidSection = () => {
           </video>
         </CustomAnimation>
       </div>
-      <CarouselComponent />
-      <Events />
     </>
   );
 };

src/components/3D/Mice.jsx

@@ -3,7 +3,6 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx
 Command: npx gltfjsx@6.2.16 .\public\models\mouse.gltf 
 */
 
-import React, { useRef } from "react";
 import { useGLTF } from "@react-three/drei";
 
 export function Mice(props) {

src/components/3D/Ps5.jsx

@@ -3,7 +3,6 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx
 Command: npx gltfjsx@6.2.16 .\public\models\ps5.gltf 
 */
 
-import React, { useRef } from "react";
 import { useGLTF } from "@react-three/drei";
 
 export function Ps5(props) {

src/components/3D/Torus3D.jsx

@@ -0,0 +1,18 @@
+import { MeshWobbleMaterial, PresentationControls } from "@react-three/drei";
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+
+export const Torus3D = ({ position = [0, 0, 0] }) => {
+  const ref = useRef();
+  useFrame(() => {
+    ref.current.rotation.x += 0.01;
+  });
+  return (
+    <PresentationControls>
+      <mesh position={position} ref={ref}>
+        <torusKnotGeometry args={[1.6, 0.4, 1000, 50]} />
+        <MeshWobbleMaterial factor={6} speed={0.8} color="purple" />
+      </mesh>
+    </PresentationControls>
+  );
+};

src/components/3D/Unity.jsx

@@ -3,7 +3,6 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx
 Command: npx gltfjsx@6.2.16 .\public\models\unity.gltf 
 */
 
-import React, { useRef } from 'react'
 import { useGLTF } from '@react-three/drei'
 
 export function Unity3D(props) {

src/components/3D/VR.jsx

@@ -3,7 +3,6 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx
 Command: npx gltfjsx@6.2.16 .\public\models\VR.gltf 
 */
 
-import React, { useRef } from "react";
 import { useGLTF } from "@react-three/drei";
 
 export function VR(props) {

src/components/Explore.jsx

@@ -0,0 +1,49 @@
+import { Flex, Heading } from "@radix-ui/themes";
+import { Canvas } from "@react-three/fiber";
+import { Torus3D } from "./3D/Torus3D";
+
+const Explore = () => {
+  return (
+    <Flex
+      wrap="wrap"
+      p={{ initial: "5", md: "7", lg: "9" }}
+      align="center"
+      justify="center"
+      mb="9"
+      style={{
+        maxWidth: "96%",
+        backgroundColor: "rgb(0 0 0 / 40%)",
+        borderRadius: "5%",
+        borderBottomRightRadius: "15%",
+        borderTopLeftRadius: "15%",
+        borderTop: "hsla(267, 100%, 63%, 0.3) 3px ridge",
+        borderBottom: "hsla(267, 100%, 63%, 0.3) 3px ridge",
+      }}
+    >
+      <div style={{ height: "30vh", flex: 1 }}>
+        <Canvas>
+          <ambientLight intensity={0.4} />
+          <directionalLight position={[0, 0, 10]} intensity={6} />
+          <Torus3D />
+        </Canvas>
+      </div>
+      <div style={{ flex: 3, maxWidth: "600px" }}>
+        <Heading
+          color="#5D3FD3"
+          size={{ initial: "5", md: "6", lg: "7" }}
+          mb={{ initial: "3", md: "4", lg: "5" }}
+        >
+          Explore the world of AR and VR
+        </Heading>
+        <Heading size={{ initial: "3", md: "4", lg: "4" }}>
+          Dive into a world beyond screens. 🌟 Gather your gaming squad, grab
+          the devices, and get ready to engage in epic battles in the virtual
+          battlegrounds like never before! 🎮🔥 Join us at the ‘Zero Latency’
+          gaming event where we’ll elevate your gaming skills to new heights.
+          Don’t miss the excitement!🚀
+        </Heading>
+      </div>
+    </Flex>
+  );
+};
+export default Explore;