Adding Viper to the web page; also updating instagram posts.

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@types/react-dom": "^19.0.3",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.1.0",
     "next": "^14.1.0",
@@ -20,7 +21,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.8.9",
-    "@types/react": "^18.2.33",
+    "@types/react": "^18.3.18",
     "autoprefixer": "^10.4.17",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",

src/app/media/page.tsx

@@ -45,7 +45,8 @@ const ContactPage = () => {
     {type: "instagram", url: "https://www.instagram.com/p/DB41ueRxIm4/"},
     {type: "instagram", url: "https://www.instagram.com/p/DCpzm9SRlKj/"},
     {type: "instagram", url: "https://www.instagram.com/p/DCxB3Vxy9cn/"},
-    {type: "youtube", url: "https://youtu.be/R9iVv4WKt9c?si=_OPmi7fMM8FGFj0i"}
+    {type: "youtube", url: "https://youtu.be/R9iVv4WKt9c?si=_OPmi7fMM8FGFj0i"},
+    {type: "instagram", url: "https://www.instagram.com/p/DFCT6y9uN4W/?img_index=1"}
   ]
 
   const [render, setRender] = useState(p.slice(p.length - 3, p.length))

src/app/robot/page.tsx

@@ -1,4 +1,5 @@
 import GilesCorey from "@/components/About/GilesCorey";
+import Viper from "@/components/About/Viper";
 import Breadcrumb from "@/components/Common/Breadcrumb";
 
 import { Metadata } from "next";
@@ -17,6 +18,7 @@ const AboutPage = () => {
         description="Robot Page for 772 Golden Dragons"
       />
       <GilesCorey />
+      <Viper />
     </>
   );
 };

src/components/About/Viper.tsx

@@ -0,0 +1,61 @@
+import "./model.css";
+import SectionTitle from "../Common/SectionTitle";
+import Script from "next/script";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'model_viewer': any;
+        }
+    }
+}
+
+const checkIcon = (
+    <svg width="16" height="13" viewBox="0 0 16 13" className="fill-current">
+      <path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
+    </svg>
+  );
+
+const Viper = () => {
+    return (
+    <section id="about" className="pt-16 md:pt-20 lg:pt-28">
+        <div className="container">
+            <div className="border-b border-body-color/[.15] pb-16 dark:border-white/[.15] md:pb-20 lg:pb-28">
+            <div className="-mx-4 flex flex-wrap-reverse items-center">
+                <div className="w-full px-4 lg:w-1/2">
+                            <SectionTitle
+                            title="Viper"
+                            paragraph="Viper is the GoBilda Robot for Golden Dragons' 2024-25 season. This robot is a compact machine designed to score samples and specimen as quickly as possible. Viper was named after its resemblence to the snake in its attack position."
+                            mb="44px"
+                            />
+                        </div>
+                        <div className="w-full px-4 lg:w-1/2">
+                            <div className="relative mx-auto aspect-[25/24] sm:mb-5 max-w-[500px] lg:mr-0 flex justify-center">
+                                <div className="model">
+                                    <model-viewer
+                                    className="w-full h-[500px]"
+                                    src="/images/robot/model/2025.glb"
+                                    camera-controls
+                                    camera-orbit="230deg 80deg 10m"
+                                    loading="auto"
+                                    powerPreference="low-power"
+                                    exposure="0.65"
+                                    shadow-softness="0"
+                                    disable-tap
+                                    poster="/images/robot/2025.png"
+                                    disable-pan
+                                    tone-mapping="neutral"
+                                    shadow-intensity="1"
+                                    alt="Model Loading Failed"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Viper;