add ByteCamp and tutorial section with YouTube integration

package-lock.json

@@ -19,6 +19,7 @@
         "monaco-editor": "^0.52.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-icons": "^5.5.0",
         "react-router-dom": "^6.27.0",
         "sass": "^1.86.3"
       },
@@ -3240,6 +3241,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",

package.json

@@ -21,6 +21,7 @@
     "monaco-editor": "^0.52.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^6.27.0",
     "sass": "^1.86.3"
   },

src/components/Navbar.jsx

@@ -3,6 +3,9 @@ import "../scss/styles.scss";
 import "../scss/components/_navbar.scss";
 import { Link, useNavigate } from "react-router-dom";
 
+// Using URL reference for ByteCamp logo
+const bytecampLogo = "/images/bytecamp.png";
+
 const Navbar = () => {
   const [glitchEffect, setGlitchEffect] = useState(false);
   const [activeLink, setActiveLink] = useState("/");
@@ -86,8 +89,13 @@ const Navbar = () => {
     >
       <div className="navbar__logo">
         <div className="navbar__logo-scanner"></div>
+        <img
+          src={bytecampLogo}
+          alt="ByteCamp Logo"
+          style={{ height: "40px", marginRight: "10px" }}
+        />
         <span className="navbar__logo-text">
-          Byte<span className="navbar__logo-text">Camp</span>
+          BYTE<span className="navbar__logo-text">CAMP</span>
         </span>
       </div>
 

src/components/Services.jsx

@@ -1,7 +1,11 @@
 import React from "react";
 import "../scss/components/_services.scss";
 import ServiceCard from "../components/ServicesCard.jsx";
-import battlesnakeLogo from "../../public/images/battlesnake.png";
+import { FaYoutube } from "react-icons/fa";
+
+// Using URL references for public assets instead of direct imports
+const battlesnakeLogo = "/images/battlesnake.png";
+const bytecampLogo = "/images/bytecamp.png";
 
 function Services() {
   return (
@@ -26,16 +30,24 @@ function Services() {
           link="https://docs.battlesnake.com/"
         />
         <ServiceCard
-          icon="🏆"
-          title="Leaderboard"
-          desc="Choose your tech stack, deploy your Battlesnake, and see how your code ranks against other developers."
-          cta="Check the leaderboard"
+          icon={<FaYoutube style={{ color: "#FF0000", fontSize: "5rem" }} />}
+          title="Tutorial"
+          desc="Learn how to create your first Battlesnake with an easy-to-follow video guide to get you started quickly."
+          cta="Watch tutorial"
+          link="https://www.youtube.com/watch?v=IA7CeGRfuNE"
         />
         <ServiceCard
-          icon="💡"
-          title="Try new languages and technologies in a high-stakes environment."
-          desc="Battlesnake is a great outlet to learn something new and mess around with that platform, language, or library you've been meaning to try"
-          cta="Learn more"
+          icon={
+            <img
+              src={bytecampLogo}
+              alt="ByteCamp Logo"
+              style={{ width: "100px", height: "100px" }}
+            />
+          }
+          title="Are you ready to start?"
+          desc="Join ByteCamp coding bootcamp and start learning Battlesnake today!"
+          cta="Register here"
+          link="https://www.bytecamp.ca/#r"
         />
       </div>
     </section>