Merge pull request #8 from JBB0807/homepage-2nd-sprint

Homepage 2nd sprint

src/components/Hero.jsx

@@ -1,34 +1,148 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import "../scss/components/Hero.scss";
-import Services from "./Services";
 
 function Hero() {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    // Create a cyberpunk cursor effect
+    const handleMouseMove = (e) => {
+      const cursor = document.querySelector(".cyberpunk-cursor");
+      if (cursor) {
+        cursor.style.left = `${e.clientX}px`;
+        cursor.style.top = `${e.clientY}px`;
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  // Matrix digital rain effect
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    // Japanese katakana characters + some latin characters and numbers
+    const katakana =
+      "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const latin = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const nums = "0123456789";
+    const alphabet = katakana + latin + nums;
+
+    const fontSize = 16;
+    const columns = canvas.width / fontSize;
+
+    // Array to store the y position of each column
+    const drops = [];
+    for (let i = 0; i < columns; i++) {
+      drops[i] = Math.random() * -100;
+    }
+
+    // Function to get a random character from the alphabet
+    const getRandomChar = () => {
+      return alphabet[Math.floor(Math.random() * alphabet.length)];
+    };
+
+    // Drawing the characters
+    const draw = () => {
+      // Black with opacity to create the fade effect
+      ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.fillStyle = "#0F0"; // Green text
+      ctx.font = `${fontSize}px monospace`;
+
+      // Loop over each column
+      for (let i = 0; i < drops.length; i++) {
+        // Get a random character
+        const text = getRandomChar();
+
+        // Calculate x position (column * fontSize)
+        const x = i * fontSize;
+
+        // Calculate y position (current drop position)
+        const y = drops[i] * fontSize;
+
+        // Draw the character
+        ctx.fillText(text, x, y);
+
+        // Randomly change the character's color to create a glowing effect
+        if (Math.random() > 0.975) {
+          ctx.fillStyle = "#FFF"; // White for glow effect
+          ctx.fillText(text, x, y);
+          ctx.fillStyle = "#0F0"; // Back to green
+        }
+
+        // Reset the drop when it reaches the bottom or randomly
+        if (y > canvas.height && Math.random() > 0.975) {
+          drops[i] = 0;
+        }
+
+        // Increment y coordinate for the drop
+        drops[i]++;
+      }
+
+      // Call the draw function again on the next frame
+      requestAnimationFrame(draw);
+    };
+
+    // Handle window resize
+    const handleResize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      // Recalculate columns
+      const newColumns = canvas.width / fontSize;
+      // Adjust drops array
+      if (newColumns > drops.length) {
+        for (let i = drops.length; i < newColumns; i++) {
+          drops[i] = Math.random() * -100;
+        }
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    // Start the animation
+    draw();
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <section className="hero">
-      <div className="hero-text">
+      <canvas ref={canvasRef} className="matrix-rain"></canvas>
-        <p className="intro">Welcome to Bytecamp!!!</p>
+      <div className="hero-cyberpunk-grid"></div>
-        <h1>Play for Fun!</h1>
+      <div className="hero-glitch-lines"></div>
-        <p className="desc">
+
-          A competitive game where your code is the controller.<br /> All you need is
+      <div className="hero-content">
-          a web server that responds to the Battlesnake API.
+        <div className="hero-logo-container">
-        </p>
-        <button className="cta">Start Battle</button>
-      </div>
-      <div className="hero-image">
-        <div className="hex-bg">
           <img
-            src="https://static.battlesnake.com/play/releases/2.1.4/ui/img/game.gif"
+            src="/images/battlesnake-neon-logo.jpg"
-            alt="battle snake game"
+            alt="BattleSnake Neon Logo"
+            className="hero-logo"
           />
+          <div className="hero-logo-glow"></div>
         </div>
-        {/* <div className="tag name-tag">Battle</div>
+
-            <div className="icon top-left">📈</div>
+        <div className="hero-cta-container">
-            <div className="icon bottom-right">👁️</div>
+          <button className="hero-cta">
-            <div className="freelance-tag">Available for Freelance</div> */}
+            <span className="hero-cta-text">START BATTLE</span>
-        {/* <div>
+            <span className="hero-cta-glitch"></span>
-          <Services />
+          </button>
-        </div> */}
         </div>
+      </div>
+
+      <div className="cyberpunk-cursor"></div>
     </section>
   );
 }

src/components/Navbar.jsx

@@ -1,36 +1,93 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "../scss/styles.scss";
 import "../scss/components/_navbar.scss";
 import { Link } from "react-router-dom";
 
 const Navbar = () => {
+  const [glitchEffect, setGlitchEffect] = useState(false);
+  const [activeLink, setActiveLink] = useState("/");
+
+  useEffect(() => {
+    // Set active link based on current path
+    setActiveLink(window.location.pathname);
+
+    // Random glitch effect
+    const glitchInterval = setInterval(() => {
+      setGlitchEffect(true);
+      setTimeout(() => setGlitchEffect(false), 200);
+    }, 3000);
+
+    return () => clearInterval(glitchInterval);
+  }, []);
+
   return (
-    <nav className="navbar">
+    <nav className={`navbar ${glitchEffect ? "navbar--glitch" : ""}`}>
-      <div className="navbar__logo">MyApp</div>
+      <div className="navbar__logo">
+        <div className="navbar__logo-scanner"></div>
+        <span className="navbar__logo-text">
+          BATTLE<span className="navbar__logo-text">SNAKE</span>
+        </span>
+      </div>
+
       <ul className="navbar__links">
         <li>
-          <Link to="/" className="navbar__link">
+          <Link
-            Home
+            to="/"
+            className={`navbar__link ${
+              activeLink === "/" ? "navbar__link--active" : ""
+            }`}
+          >
+            <span className="navbar__link-icon">⚡</span>
+            <span className="navbar__link-text">HOME</span>
+            <span className="navbar__link-hover"></span>
           </Link>
         </li>
         <li>
-          <Link to="/notebook" className="navbar__link">
+          <Link
-            NoteBook
+            to="/notebook"
+            className={`navbar__link ${
+              activeLink === "/notebook" ? "navbar__link--active" : ""
+            }`}
+          >
+            <span className="navbar__link-icon">📓</span>
+            <span className="navbar__link-text">NOTEBOOK</span>
+            <span className="navbar__link-hover"></span>
           </Link>
         </li>
         <li>
-          <Link to="/assignment" className="navbar__link">
+          <Link
-            Assignment
+            to="/assignment"
+            className={`navbar__link ${
+              activeLink === "/assignment" ? "navbar__link--active" : ""
+            }`}
+          >
+            <span className="navbar__link-icon">🎯</span>
+            <span className="navbar__link-text">ASSIGNMENT</span>
+            <span className="navbar__link-hover"></span>
           </Link>
         </li>
         <li>
-          <Link to="/editor" className="navbar__link">
+          <Link
-            Editor
+            to="/editor"
+            className={`navbar__link ${
+              activeLink === "/editor" ? "navbar__link--active" : ""
+            }`}
+          >
+            <span className="navbar__link-icon">💻</span>
+            <span className="navbar__link-text">EDITOR</span>
+            <span className="navbar__link-hover"></span>
           </Link>
         </li>
         <li>
-          <Link to="/login" className="navbar__link">
+          <Link
-            Login
+            to="/login"
+            className={`navbar__link ${
+              activeLink === "/login" ? "navbar__link--active" : ""
+            }`}
+          >
+            <span className="navbar__link-icon">🔒</span>
+            <span className="navbar__link-text">LOGIN</span>
+            <span className="navbar__link-hover"></span>
           </Link>
         </li>
       </ul>

src/pages/HomePage.jsx

@@ -8,12 +8,14 @@ const PageHome = () => {
     },[]);
 
     return (
+        <div className="homepage-container">
             <main>
                 <section>
                     <h2>Home Page</h2>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit porro, dolorem, quod facere enim voluptate provident quo labore vero repellat nemo animi ad exercitationem rem quos, possimus libero deleniti laudantium?</p>
                 </section>
             </main>
+        </div>
     );
 
 };

src/scss/components/Hero.scss

@@ -1,103 +1,307 @@
+// Cyberpunk color variables
+$neon-pink: #ff2a6d;
+$neon-blue: #05d9e8;
+$neon-purple: #d300c5;
+$neon-yellow: #f7f500;
+$dark-bg: #0d0221;
+$cyber-black: #1a1a1a;
+
+// Animations
+@keyframes flicker {
+  0%,
+  19.999%,
+  22%,
+  62.999%,
+  64%,
+  64.999%,
+  70%,
+  100% {
+    opacity: 0.99;
+  }
+  20%,
+  21.999%,
+  63%,
+  63.999%,
+  65%,
+  69.999% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes glitch {
+  0% {
+    transform: translate(0);
+  }
+  20% {
+    transform: translate(-2px, 2px);
+  }
+  40% {
+    transform: translate(-2px, -2px);
+  }
+  60% {
+    transform: translate(2px, 2px);
+  }
+  80% {
+    transform: translate(2px, -2px);
+  }
+  100% {
+    transform: translate(0);
+  }
+}
+
+@keyframes scanline {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes grid-movement {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 25px;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
 .hero {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 4rem 3rem;
-    background-color: #f9f5f2;
-    padding-top: 40rem;
-    
-  
-    .hero-text {
-      max-width: 50%;
-      margin-left: 3rem;
-    //   font-family: "Limelight", sans-serif;
-  
-      .intro {
-        font-size: 1rem;
-      }
-  
-      h1 {
-        font-size: 4rem;
-        font-weight: 900;
-        margin: 1rem 0;
-      }
-  
-      .desc {
-        font-size: 1.125rem;
-        margin-bottom: 2rem;
-      }
-  
-      .cta {
-        background-color: #ffcc3a;
-        border: none;
-        padding: 1rem 2rem;
-        font-size: 1rem;
-        font-weight: bold;
-        border-radius: 12px;
-        cursor: pointer;
-        box-shadow: 3px 3px 0 #000;
-      }
-    }
-  
-    .hero-image {
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  //min-height: 100vh;
+  width: 100%;
+  padding-top: 900px;
+  margin-top: 0;
+  background-color: $dark-bg;
+  overflow: hidden;
   
-    //   .hex-bg {
+  // Matrix digital rain canvas
-    //     width: 500px;
+  .matrix-rain {
-    //     height: auto;
-    //     background-color: #2900F5;
-    //     padding: 3rem;
-    //     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-    //     box-shadow: 6px 6px 0 #000;
-  
-        img {
-          width: 70%;
-          border-radius: 6px;
-        }
-      }
-  
-      .tag {
     position: absolute;
-        top: -2rem;
+    top: 0;
-        right: 0;
-        background: #b1b9f9;
-        padding: 0.3rem 0.8rem;
-        border-radius: 999px;
-        font-weight: 700;
-        font-size: 0.9rem;
-      }
-  
-      .icon {
-        position: absolute;
-        font-size: 2rem;
-  
-        &.top-left {
-          top: -2rem;
-          left: -2rem;
-          background: #00c2a8;
-          padding: 0.5rem;
-          border-radius: 0.5rem;
-        }
-  
-        &.bottom-right {
-          bottom: -2rem;
-          right: -2rem;
-          background: #ffdf4f;
-          padding: 0.5rem;
-          border-radius: 50%;
-        }
-      }
-  
-      .freelance-tag {
-        position: absolute;
-        bottom: -1.5rem;
     left: 0;
-        background: #00d18c;
+    width: 100%;
-        padding: 0.5rem 1rem;
+    height: 100%;
-        font-size: 0.9rem;
+    z-index: 0;
-        border-radius: 999px;
+    opacity: 0.8; // Adjust opacity to control the intensity of the effect
-        font-weight: 600;
+  }
+
+  // Cyberpunk grid background
+  &-cyberpunk-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(
+        rgba($neon-blue, 0.1) 1px,
+        transparent 1px
+      ),
+      linear-gradient(90deg, rgba($neon-blue, 0.1) 1px, transparent 1px);
+    background-size: 25px 25px;
+    z-index: 1;
+    animation: grid-movement 5s linear infinite;
+    opacity: 0.3; // Reduced opacity to blend with matrix rain
+  }
+
+  // Glitch lines effect
+  &-glitch-lines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.15),
+      rgba(0, 0, 0, 0.15) 1px,
+      transparent 1px,
+      transparent 2px
+    );
+    pointer-events: none;
+    z-index: 3;
+  }
+
+  // Main content container
+  &-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    width: 100%;
+    max-width: 1200px;
+    padding: 2rem;
+    // Add a subtle backdrop filter to make content more readable against the matrix rain
+    backdrop-filter: blur(2px);
+  }
+
+  // Logo styling
+  &-logo-container {
+    position: relative;
+    margin-bottom: 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-logo {
+    max-width: 80%;
+    height: auto;
+    border-radius: 8px;
+    filter: drop-shadow(0 0 10px rgba($neon-blue, 0.7))
+      drop-shadow(0 0 20px rgba($neon-purple, 0.5));
+    animation: pulse 4s ease-in-out infinite;
+    z-index: 2;
+  }
+
+  &-logo-glow {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(
+      circle,
+      rgba($neon-purple, 0.3) 0%,
+      rgba($neon-blue, 0.1) 40%,
+      transparent 70%
+    );
+    filter: blur(20px);
+    z-index: 1;
+  }
+
+  // CTA button styling
+  &-cta-container {
+    margin-top: 2rem;
+    position: relative;
+  }
+
+  &-cta {
+    position: relative;
+    background-color: transparent;
+    color: $neon-pink;
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    padding: 1rem 3rem;
+    border: 2px solid $neon-pink;
+    border-radius: 4px;
+    cursor: pointer;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    box-shadow: 0 0 10px rgba($neon-pink, 0.7),
+      inset 0 0 10px rgba($neon-pink, 0.4);
+    text-shadow: 0 0 5px $neon-pink;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba($neon-pink, 0.4),
+        transparent
+      );
+      transition: 0.5s;
+    }
+
+    &:hover {
+      background-color: rgba($neon-pink, 0.1);
+      color: white;
+      box-shadow: 0 0 20px rgba($neon-pink, 0.9),
+        inset 0 0 20px rgba($neon-pink, 0.5);
+
+      &::before {
+        left: 100%;
       }
     }
 
+    &:active {
+      transform: scale(0.95);
+    }
+  }
 
+  &-cta-text {
+    position: relative;
+    z-index: 2;
+  }
+
+  &-cta-glitch {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba($neon-pink, 0.2);
+    opacity: 0;
+    z-index: 1;
+
+    .hero-cta:hover & {
+      opacity: 1;
+      animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
+    }
+  }
+}
+
+// Cyberpunk cursor
+.cyberpunk-cursor {
+  position: fixed;
+  width: 20px;
+  height: 20px;
+  border: 2px solid $neon-pink;
+  border-radius: 50%;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  mix-blend-mode: difference;
+  transition: width 0.2s, height 0.2s, border-color 0.2s;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 4px;
+    height: 4px;
+    background-color: $neon-blue;
+    border-radius: 50%;
+    box-shadow: 0 0 5px $neon-blue, 0 0 10px $neon-blue;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    border: 1px solid rgba($neon-blue, 0.5);
+    animation: pulse 2s infinite;
+  }
+}

src/scss/components/Services.scss

@@ -1,12 +1,21 @@
 .services {
   padding: 5rem 3rem;
-    background-color: #fdfaf6;
+  // background-image: url("../../../public/images/grid-background-3.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
 
   h2 {
     font-size: 2.5rem;
     font-weight: 900;
     text-align: center;
     margin-bottom: 3rem;
+    color: #fff;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 1.5rem;
+    border-radius: 10px;
   }
 
   .cards {
@@ -15,4 +24,3 @@
     gap: 2rem;
   }
 }
-  

src/scss/components/_navbar.scss

@@ -1,44 +1,195 @@
+// Cyberpunk color variables
+$neon-pink: #ff2a6d;
+$neon-blue: #05d9e8;
+$neon-purple: #d300c5;
+$neon-yellow: #f7f500;
+$dark-bg: #0d0221;
+$cyber-black: #1a1a1a;
+
+@keyframes scanline {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes glitch {
+  0% {
+    text-shadow: 0.05em 0 0 $neon-blue, -0.05em -0.025em 0 $neon-pink;
+    clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 75%, 0 75%, 0 100%, 100% 100%);
+  }
+  25% {
+    text-shadow: -0.05em -0.025em 0 $neon-blue, 0.025em 0.025em 0 $neon-pink;
+    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 85%, 0 85%, 0 100%, 100% 100%);
+  }
+  50% {
+    text-shadow: 0.025em 0.05em 0 $neon-blue, -0.05em -0.05em 0 $neon-pink;
+    clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%, 0 40%, 100% 40%, 100% 55%, 0 55%, 0 70%, 100% 70%, 100% 100%, 0 100%);
+  }
+  75% {
+    text-shadow: -0.05em -0.025em 0 $neon-blue, 0.025em 0.025em 0 $neon-pink;
+    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%, 0 50%, 100% 50%, 100% 70%, 0 70%, 0 80%, 100% 80%, 100% 100%, 0 100%);
+  }
+  100% {
+    text-shadow: 0.05em 0 0 $neon-blue, -0.05em -0.025em 0 $neon-pink;
+    clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 75%, 0 75%, 0 100%, 100% 100%);
+  }
+}
+
+@keyframes neon-flicker {
+  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
+    opacity: 0.99;
+    filter: drop-shadow(0 0 1px rgba($neon-pink, 0.95))
+           drop-shadow(0 0 4px rgba($neon-pink, 0.6))
+           drop-shadow(0 0 8px rgba($neon-pink, 0.4));
+  }
+  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
+    opacity: 0.4;
+    filter: none;
+  }
+}
+
+@keyframes hover-glow {
+  0% {
+    box-shadow: 0 0 5px $neon-blue, 0 0 10px $neon-blue, 0 0 15px $neon-blue, 0 0 20px $neon-blue;
+  }
+  100% {
+    box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue, 0 0 30px $neon-blue, 0 0 40px $neon-blue;
+  }
+}
+
 .navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-    background-color: #f9f5f2;
+  background-color: rgba($cyber-black, 0.85);
-    padding: 1rem 2rem;
+  padding: 0.8rem 2rem;
   color: white;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 10px $neon-purple, 0 0 20px rgba($neon-purple, 0.5);
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
   width: 100%;
+  border-bottom: 1px solid $neon-pink;
+  backdrop-filter: blur(5px);
+  
+  // Glitch effect for the navbar
+  &--glitch {
+    animation: glitch 0.2s linear;
+  }
 
   &__logo {
+    position: relative;
     font-size: 1.5rem;
     font-weight: bold;
-      color: #91a8ed;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    padding: 0.5rem 1rem;
+    border: 1px solid $neon-pink;
+    border-radius: 4px;
+    background-color: rgba($dark-bg, 0.7);
+    
+    &-text {
+      color: white;
+      letter-spacing: 2px;
+      animation: neon-flicker 5s infinite alternate;
+    }
+    
+    &-highlight {
+      color: $neon-pink;
+      text-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
+    }
+    
+    &-scanner {
+      position: absolute;
+      height: 2px;
+      width: 100%;
+      background: linear-gradient(90deg, transparent, $neon-blue, transparent);
+      animation: scanline 2s linear infinite;
+    }
   }
 
   &__links {
     list-style: none;
     display: flex;
-      gap: 2rem;
+    gap: 1.5rem;
     margin: 0;
+    padding: 0;
 
     @media (max-width: 768px) {
       flex-direction: column;
-        gap: 1rem;
+      gap: 0.8rem;
+    }
+    
+    li {
+      position: relative;
     }
   }
 
   &__link {
+    display: flex;
+    align-items: center;
     text-decoration: none;
-      color: #91a8ed;
+    color: white;
     font-weight: 500;
-      transition: color 0.2s;
+    padding: 0.5rem 0.8rem;
+    border-radius: 4px;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    letter-spacing: 1px;
+    
+    &-icon {
+      margin-right: 0.5rem;
+      font-size: 1.2rem;
+    }
+    
+    &-text {
+      position: relative;
+      z-index: 2;
+    }
+    
+    &-hover {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background-color: $neon-blue;
+      transform: scaleX(0);
+      transform-origin: left;
+      transition: transform 0.3s ease;
+    }
     
     &:hover {
-        color: #6888E9;
+      color: $neon-blue;
-      }
+      text-shadow: 0 0 5px rgba($neon-blue, 0.7);
+      
+      .navbar__link-hover {
+        transform: scaleX(1);
+        box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue;
       }
     }
     
+    &--active {
+      color: $neon-pink;
+      text-shadow: 0 0 5px rgba($neon-pink, 0.7);
+      border: 1px solid $neon-pink;
+      background-color: rgba($neon-pink, 0.1);
+      
+      &:hover {
+        color: $neon-pink;
+      }
+      
+      .navbar__link-hover {
+        background-color: $neon-pink;
+        transform: scaleX(1);
+        box-shadow: 0 0 10px $neon-pink, 0 0 20px $neon-pink;
+      }
+    }
+  }
+}

src/scss/page/_home.scss

@@ -0,0 +1,31 @@
+// Homepage styling
+
+.homepage-container {
+  // background-image: url("../../../public/images/grid-background.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  min-height: 100vh;
+  width: 100%;
+  padding: 2rem;
+
+  main {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  h2 {
+    color: #333;
+    margin-bottom: 1.5rem;
+  }
+
+  p {
+    color: #555;
+    line-height: 1.6;
+  }
+}

src/scss/page/assignment123.scss

@@ -0,0 +1,198 @@
+// Assignment Page Styling
+
+.assignment-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+
+  section {
+    width: 100%;
+    max-width: 900px;
+  }
+
+  .assignment-header {
+    margin-bottom: 2rem;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 1rem;
+
+    h2 {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      color: #ffffff;
+    }
+
+    .due-date {
+      color: #c6c6c6;
+      font-size: 1.2rem;
+    }
+  }
+
+  .assignment-container {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+
+    .assignment-info {
+      margin-bottom: 2rem;
+
+      h3 {
+        font-size: 1.4rem;
+        margin-bottom: 0.5rem;
+        color: #333;
+      }
+
+      .files-count {
+        font-size: 1rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .submission-note {
+        font-size: 0.9rem;
+        color: #666;
+      }
+    }
+
+    .file-upload-section {
+      margin-bottom: 2rem;
+
+      .upload-buttons {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+        flex-wrap: wrap;
+
+        .file-upload-btn,
+        .record-audio-btn,
+        .record-video-btn {
+          background-color: #f5f5f5;
+          border: 1px solid #ddd;
+          border-radius: 4px;
+          padding: 0.6rem 1rem;
+          cursor: pointer;
+          font-size: 0.9rem;
+          transition: all 0.2s ease;
+          color: #333;
+
+          &:hover {
+            background-color: #e9e9e9;
+          }
+        }
+      }
+
+      .files-list {
+        background-color: #f9f9f9;
+        border-radius: 6px;
+        padding: 1rem;
+
+        h4 {
+          margin-bottom: 0.8rem;
+          font-size: 1rem;
+        }
+
+        ul {
+          list-style: none;
+          padding: 0;
+
+          .file-item {
+            display: flex;
+            align-items: center;
+            padding: 0.5rem 0;
+            border-bottom: 1px solid #eee;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            .file-name {
+              flex-grow: 1;
+              font-weight: 500;
+            }
+
+            .file-size {
+              color: #777;
+              margin: 0 1rem;
+              font-size: 0.8rem;
+            }
+
+            .remove-file-btn {
+              background-color: transparent;
+              border: none;
+              color: #ff5252;
+              cursor: pointer;
+              font-size: 0.8rem;
+              padding: 0.3rem 0.6rem;
+
+              &:hover {
+                text-decoration: underline;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .comments-section {
+      margin-bottom: 2rem;
+
+      h4 {
+        margin-bottom: 0.8rem;
+        font-size: 1rem;
+      }
+
+      textarea {
+        width: 100%;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        padding: 0.8rem;
+        font-family: inherit;
+        resize: vertical;
+
+        &:focus {
+          outline: none;
+          border-color: #4a90e2;
+        }
+      }
+    }
+
+    .submission-buttons {
+      display: flex;
+      gap: 1rem;
+
+      .submit-btn,
+      .cancel-btn {
+        padding: 0.7rem 1.5rem;
+        border-radius: 4px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .submit-btn {
+        background-color: #4a90e2;
+        color: white;
+        border: none;
+
+        &:hover {
+          background-color: #3a7bc8;
+        }
+
+        &:disabled {
+          background-color: #a0c3e8;
+          cursor: not-allowed;
+        }
+      }
+
+      .cancel-btn {
+        background-color: transparent;
+        border: 1px solid #ddd;
+        color: #666;
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+      }
+    }
+  }
+}