Added comments to hero section

Author: colemmorgan

src/app/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Michroma&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Michroma&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -20,52 +20,35 @@ body {
   overflow-x: hidden;
 }
 
-
-.hero {
-  background-image: url('/landing/bg.svg');
+#hero {
+  background-image: url("/landing/bg.svg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
 
-
-
-
 .noise-bg {
   position: fixed;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   opacity: 0.02;
-  background: 
-    repeating-radial-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 0/2500px 2500px,
-    repeating-conic-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 50%/2500px 2500px;
+  background:
+    repeating-radial-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 0/2500px
+      2500px,
+    repeating-conic-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 50%/2500px
+      2500px;
   background-blend-mode: difference;
 }
 
-@media (max-width: 768px) {
-  .noise-bg {
-    background: 
-      repeating-radial-gradient(#fff 0 1%, #000 0 0.02%) 50% 0/500px 500px,
-      repeating-conic-gradient(#fff 0 1%, #000 0 0.02%) 50% 50%/500px 500px;
-  }
-}
-
-
 .monthly-event {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
       #4255f922 25%,
-      #0F1319 100%
-    ),
-    radial-gradient(
-      61.66% 37.6% at 6.63% 95.08%,
-      #4255f922 25%,
-      #0F1319 100%
+      #0f1319 100%
     ),
+    radial-gradient(61.66% 37.6% at 6.63% 95.08%, #4255f922 25%, #0f1319 100%),
     rgba(26, 26, 26, 0.43);
   box-shadow: 0px 0.5px 16px 0px rgba(200, 200, 255, 0.1);
   border: 1px solid #4255f911;
-
-  
 }

src/app/page.tsx

@@ -5,11 +5,10 @@ import LandingAbout from "@/components/landing/LandingAbout";
 const Website = () => {
   return (
     <div className="min-h-screen w-full bg-[#050a10]">
+      {/* Applied a noise bg to the page for added depth */}
       <div className="noise-bg" />
       <Hero />
       <LandingAbout />
-
-      {/* About Section */}
     </div>
   );
 };

src/components/Navbar/PublicNavbar.tsx

@@ -4,6 +4,9 @@ import { FaBars } from "react-icons/fa";
 import { FaXmark } from "react-icons/fa6";
 import { AnimatePresence, motion } from "framer-motion";
 
+
+// TODO: Fix the navbar apperance when viewing admin dashboard
+
 export default function Nav() {
   const [showMobileNav, setShowMobileNav] = useState<boolean>(false);
   return (
@@ -40,6 +43,7 @@ export default function Nav() {
           </div>
         </div>
 
+        {/* Animate the mobile nav-links downward when clicked */}
         <AnimatePresence>
           {showMobileNav && (
             <motion.div

src/components/landing/Hero.tsx

@@ -1,30 +1,39 @@
 import React from "react";
 import LogoCarousel from "./LogoCarousel";
 import Image from "next/image";
-import {motion} from "framer-motion"
+import { motion } from "framer-motion";
 
 export default function Hero() {
   return (
-    <div className="hero relative pb-12 lg:pt-24 pt-24 text-[#eaeaea] lg:h-[max(100svh,840px)]">
+    <div className="relative pb-12 pt-24 text-[#eaeaea] lg:h-[max(100svh,840px)] lg:pt-24" id="hero">
+      {/* Flex-row on desktop devices but flex-col-reverse for devices lg and smaller */}
       <div className="mx-auto flex h-full max-w-7xl flex-col-reverse items-center px-6 pb-6 sm:px-10 lg:mt-0 lg:flex-row">
         <div className="flex w-full flex-col items-center text-center lg:w-3/4 lg:items-start lg:text-left">
+        {/* Hidden on mobile */}
           <span className="hidden rounded-full border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-50 px-4 py-1.5 text-xs lg:inline">
             1000+ Active Members!
           </span>
-          <h1 className="font-Michroma leading-normal lg:leading-normal pt-4 text-[26px] font-semibold sm:text-4xl lg:text-[44px]">
-            The Society <br className="inline sm:hidden"/>of PC Building
+          <h1 className="pt-4 font-Michroma text-[26px] font-semibold leading-normal sm:text-4xl lg:text-[44px] lg:leading-normal">
+            The Society <br className="inline sm:hidden" />
+            of PC Building
           </h1>
-          <p className="max-w-[620px] pt-4 sm:pt-3 font-medium leading-relaxed text-[17px] sm:text-lg">
+
+          {/* On mobile devices shorten the description to limit text-length */}
+          <p className="max-w-[620px] pt-4 text-[17px] font-medium leading-relaxed sm:pt-3 sm:text-lg">
             <span className="hidden sm:inline">
               Join the Society of PC Building at UF—where
             </span>
             <span className="sm:hidden">Where</span> students passionate about
             hardware and tech connect, innovate, and build custom PCs together.
           </p>
-          <button className="mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 py-2 px-8 font-medium text-white sm:text-base">
+
+
+          <button className="mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 px-8 py-2 font-medium text-white sm:text-base">
             Join the Club!
           </button>
 
+
+          {/* On mobile devices show the infinite carousel but on desktop static list */}
           <div className="mt-20 lg:mt-32">
             <p className="text-sm opacity-80">
               Led by a team of officers with experience at:
@@ -41,27 +50,29 @@ export default function Hero() {
             <LogoCarousel />
           </div>
         </div>
-        {/* <div className="hidden max-h-[220px] cursor-grab items-center sm:flex lg:w-1/4">
-          <Scene />
-        </div> */}
-        <motion.div className="relative h-[240px] w-[240px] md:h-[300px] md:w-[300px] lg:h-[460px] lg:w-[460px]  -mr-6 lg:-mr-12"  initial={{ opacity: 0, y: 60 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.4, ease: "easeOut" }}
-            viewport={{ once: true, amount: 0.3 }}>
+
+        {/* Animate SPCB logo upwards. Applied negative margin to center logo better */}
+        <motion.div
+          className="relative -mr-6 h-[240px] w-[240px] md:h-[300px] md:w-[300px] lg:-mr-12 lg:h-[460px] lg:w-[460px]"
+          initial={{ opacity: 0, y: 60 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+          viewport={{ once: true, amount: 0.3 }}
+        >
           <Image
             src="/landing/logo.png"
             alt="SPCB Logo"
-           width={460}
-           height={460}
+            width={460}
+            height={460}
             className="object-contain"
             style={{
               filter: "drop-shadow(0 0 10px rgba(255,255,255,1))",
             }}
             priority
           />
         </motion.div>
-      </div>
 
+      </div>
     </div>
   );
 }