[Feat]: Redesign Mars rover imagery page

.env.demo

@@ -4,7 +4,7 @@ VITE_SERVICE_ID=
 VITE_TEMPLATE_ID=
 VITE_PUBLIC_KEY=
 
-# Environment Variables for NASA API call.
+# Environment Variables for NASA API.
 
 VITE_API_KEY=DEMO_KEY  # use Demo Key only for development.
 

.gitignore

@@ -32,3 +32,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+dist

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@emailjs/browser": "^4.3.3",
+    "@react-three/drei": "^9.106.0",
     "@react-three/fiber": "^8.16.6",
     "@tsparticles/all": "^3.4.0",
     "@tsparticles/react": "^3.0.0",

src/App.css

@@ -27,14 +27,14 @@
   width: 40%;
   align-items: center;
   justify-content: center;
-  outline:none;
+  outline: none;
   border: none;
 }
 
 .date_input {
   width: 20%;
   outline: none;
-  border:none;
+  border: none;
 }
 
 .apod_img_container {
@@ -195,42 +195,6 @@
   }
 }
 
-/*update date input styles*/
-
-.ip .form-control {
-  outline: none;
-  border: 2px solid #9000ff;
-  border-right: none;
-  border-radius:40px;
-  background:transparent;
-  color: white;
-}
-
-.ip .date_input::-webkit-calendar-picker-indicator { 
-  filter: invert(100%);
-  cursor: pointer;
-}
-.ip .form-control:focus{
-  outline: none;
-  border: 2px solid #9000ff;
-  box-shadow: 0 0 15px white;
-  color:white ;
-}
-
-.ip .btn{
-  outline: none;
-  border: 2px solid #9000ff;
-  background-color: #8400ff;
-  border-left: none;
-  border-radius:40px;
-}
-.ip .btn:hover{
-  background: #40019a;
-  color: white;
-  box-shadow: 0 0 15px white;
-  cursor: pointer;
-}
-
 
 /* Additional styling for responsiveness */
 @media (max-width: 768px) {
@@ -467,11 +431,12 @@
   cursor: pointer;
 }
 
-#close-btn{
+#close-btn {
   position: relative;
   bottom: 250px;
 }
-#close-btn button{
+
+#close-btn button {
   padding: 5px 15px;
   font-size: 1rem;
   border-radius: 10px;
@@ -480,7 +445,7 @@
   border: none;
 }
 
-#close-btn button:hover{
+#close-btn button:hover {
   color: white;
   background: #40019a;
   box-shadow: 0 0 10px white;

src/components/3D_Rovers/Curiosity.jsx

@@ -0,0 +1,107 @@
+import React, { memo, useRef } from 'react'
+import { useGLTF, OrbitControls } from '@react-three/drei'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { DoubleSide } from 'three'
+
+
+
+function Scene(props) {
+
+    const ref = useRef()
+
+    useFrame(() => {
+        ref.current.rotation.y -= 0.001
+    })
+
+    const { nodes, materials } = useGLTF('/24584_Curiosity_static.glb')
+
+    return (
+        <>
+
+            <group {...props} dispose={null} scale={1} position={[0, -1, 0]} ref={ref}>
+                <group position={[1.063, 0.249, 1.095]}>
+                    <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Cylinder000.geometry}
+                        material={materials.wheels}
+                    />
+                    <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Cylinder000_1.geometry}
+                        material={materials.tex_02}
+                    />
+                    <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Cylinder000_2.geometry}
+                        material={materials.tex_01}
+                    />
+                    <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Cylinder000_3.geometry}
+                        material={materials.parts_AO}
+                    />
+                    <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Cylinder000_4.geometry}
+                        material={materials.tex_03}
+                    />
+                    <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Cylinder000_5.geometry}
+                        material={materials.tex_05}
+                    />
+                    <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Cylinder000_6.geometry}
+                        material={materials.tex_04}
+                    />
+                    <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Cylinder000_7.geometry}
+                        material={materials.tex_03a}
+                    />
+                    <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Cylinder000_8.geometry}
+                        material={materials.internals}
+                    />
+
+                </group>
+            </group>
+            <mesh scale={5} position={[0, -1, 0]} rotation={[Math.PI * -0.5, 0, 0]} receiveShadow>
+                <planeGeometry args={[1, 1]} />
+                <meshStandardMaterial color={"white"} side={DoubleSide} />
+            </mesh>
+        </>
+    )
+
+
+}
+
+const Curiosity = memo(function Model(props) {
+    return (
+        <Canvas camera={{ fov: 80, position: [0, 0, 5] }} shadows style={{ height: "400px", width: "400px" }}>
+            <OrbitControls minDistance={4.0} maxDistance={5.0} />
+            <ambientLight intensity={1} />
+            <directionalLight intensity={5} position={[0, 2, 0]} color={"white"} castShadow />
+            <directionalLight intensity={5} position={[0, 0, 2]} color={"#B0845B"} castShadow />
+            <directionalLight intensity={5} position={[-2, 0, 0]} color={"#B0845B"} castShadow />
+            <directionalLight intensity={5} position={[2, 0, 0]} color={"#B0845B"} castShadow />
+            <Scene props={props} />
+
+        </Canvas>
+    )
+})
+
+useGLTF.preload('/24584_Curiosity_static.glb')
+
+export default Curiosity