Hero/revamp

src/app/about/page.tsx

@@ -35,7 +35,7 @@ export default function AboutPage() {
         </div>
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-20 px-6 md:grid-cols-2">
           <div className="space-y-4 text-left">
-            <h1 className="font-Michroma text-3xl font-bold sm:text-4xl">
+            <h1 className="text-3xl font-bold sm:text-4xl">
               About Us
             </h1>
             <p className="text-balance pt-1 text-lg leading-relaxed">

src/app/globals.css

@@ -1,4 +1,5 @@
-@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=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -15,7 +16,7 @@ textarea {
 }
 
 body {
-  font-family: "Inter", sans-serif;
+  font-family: "Space Grotesk", serif !important;
   background-color: #ffffff;
   overflow-x: hidden;
 }
@@ -73,4 +74,27 @@ body {
 .grad {
   background: linear-gradient(0deg, #4255f922, #080d14);
   filter: blur(20px);
+}
+
+
+/*  monospace font - will update later */
+
+.m {
+  font-family: "Space Mono", serif; 
+}
+
+/* fade background of hero */
+
+
+.hero-btn:hover {
+  /* Apply a full (all-around) shadow with #79C7FD */
+  box-shadow: 0 0 20px 5px rgba(121, 199, 253, 0.7);
+}
+
+.hero-fade {
+  background: linear-gradient(180deg,#080d1400 0%, #080d14 100%);
+}
+
+.about-fade {
+    background: linear-gradient(0deg,#080d1400 0%, #080d14 100%);
 }

src/app/page.tsx

@@ -1,15 +1,18 @@
 "use client";
 import Footer from "@/components/Footer";
+import About from "@/components/landing/About";
+import Events from "@/components/landing/Events";
+import Faq from "@/components/landing/Faq";
 import Hero from "@/components/landing/Hero";
-import Landing from "@/components/landing/Landing";
+
 
 const Website = () => {
   return (
-    <div className="min-h-screen w-full bg-[#080d14]">
-      {/* Applied a noise bg to the page for added depth */}
-      <div className="noise-bg" />
+    <div className="min-h-screen w-full bg-[#080d14] text-white">
       <Hero />
-      <Landing />
+      <About/>
+      <Events/>
+      <Faq/>
       <Footer />
     </div>
   );

src/components/Footer.tsx

@@ -81,15 +81,15 @@ export default function Footer() {
             rights reserved.
           </p>
         </div>
-        <div className="footer-clip-path flex h-full min-h-80 flex-col items-center justify-center gap-1 bg-white px-20 pt-20 lg:col-span-2">
-          <p className="max-w-[417px] text-2xl font-bold sm:text-4xl">
+        <div className="footer-clip-path flex h-full min-h-80 flex-col items-center justify-center bg-white text-black px-16 sm:px-20 pt-20 lg:col-span-2">
+          <p className="max-w-[417px] text-2xl font-bold sm:text-4xl flex flex-col-reverse sm:flex-row items-center gap-2">
             Gator User Design{" "}
             <Image
               src={"/iconography/gud-color.png"}
               width={80}
               height={80}
               alt=""
-              className="ml-2 inline h-14 w-14 sm:h-20 sm:w-20"
+              className="h-14 w-14 sm:h-20 sm:w-20"
             />{" "}
           </p>
           <div className="flex w-full max-w-[416px] items-start justify-center sm:justify-start">

src/components/MemberCounts/SocialStats.tsx

@@ -54,7 +54,7 @@ const StatCard: React.FC<StatCardProps> = ({
         </div>
         <div>
           <p className="text-sm font-medium text-gray-300">{label}</p>
-          <p className="font-['Michroma'] text-xl font-bold text-white">
+          <p className="text-xl font-bold text-white">
             {isLoading
               ? "Loading..."
               : error

src/components/Navbar/Navbar.tsx

@@ -17,7 +17,7 @@ export default function Nav() {
   if (isAdminRoute) {
     return (
       <>
-        <div className="relative z-10 mx-auto flex max-w-7xl items-center justify-between px-4 py-4 md:px-10">
+        <div className="relative z-50 mx-auto flex max-w-7xl items-center justify-between px-4 py-4 md:px-10">
           <a href="/">
             <Image
               src={"/iconography/spcb-color.png"}
@@ -33,19 +33,44 @@ export default function Nav() {
             <Link href={"/events"}>Events</Link>
             <Link href={"/projects"}>Projects</Link>
           </div>
-          <button className="text-2xl md:hidden" onClick={() => setIsMobileAdminNavOpen(true)}>
+          <button
+            className="text-2xl md:hidden"
+            onClick={() => setIsMobileAdminNavOpen(true)}
+          >
             <FaBars />
           </button>
         </div>
         {isMobileAdminNavOpen && (
           <div className="fixed inset-0 z-50 bg-white">
-            <div className="relative h-full w-full flex flex-col items-center justify-center text-4xl gap-10">
-              <button onClick={() => setIsMobileAdminNavOpen(false)} className="text-4xl absolute top-4 right-4"><FaXmark/></button>
-
-              <Link href={"/"} onClick={() => setIsMobileAdminNavOpen(false)}>Home</Link>
-              <Link href={"/projects"} onClick={() => setIsMobileAdminNavOpen(false)}>Projects</Link>
-              <Link href={"/events"} onClick={() => setIsMobileAdminNavOpen(false)}>Events</Link>
-              <Link href={"/about"} onClick={() => setIsMobileAdminNavOpen(false)}>About</Link>
+            <div className="relative flex h-full w-full flex-col items-center justify-center gap-10 text-4xl">
+              <button
+                onClick={() => setIsMobileAdminNavOpen(false)}
+                className="absolute right-4 top-4 text-4xl"
+              >
+                <FaXmark />
+              </button>
+
+              <Link href={"/"} onClick={() => setIsMobileAdminNavOpen(false)}>
+                Home
+              </Link>
+              <Link
+                href={"/projects"}
+                onClick={() => setIsMobileAdminNavOpen(false)}
+              >
+                Projects
+              </Link>
+              <Link
+                href={"/events"}
+                onClick={() => setIsMobileAdminNavOpen(false)}
+              >
+                Events
+              </Link>
+              <Link
+                href={"/about"}
+                onClick={() => setIsMobileAdminNavOpen(false)}
+              >
+                About
+              </Link>
             </div>
           </div>
         )}
@@ -54,8 +79,8 @@ export default function Nav() {
   }
 
   return (
-    <nav className="fixed left-1/2 z-30 w-full max-w-5xl -translate-x-1/2 px-0 text-[#f1f1f1] md:top-4 md:px-4">
-      <div className="border-b border-[#B0B8FF] border-opacity-30 bg-[#03080e] bg-opacity-40 py-3 backdrop-blur-lg md:rounded-full md:border md:py-1.5">
+    <nav className="fixed left-1/2 z-50 w-full max-w-5xl -translate-x-1/2 px-0 text-[#f1f1f1] md:top-4 md:px-4">
+      <div className="border-b border-blue border-opacity-30 bg-[#03080e] bg-opacity-40 py-3 backdrop-blur-lg md:rounded-full md:border md:py-1.5">
         <div className="flex justify-between px-6 md:pl-6 md:pr-4">
           <figure>
             <Link href="/">
@@ -66,16 +91,38 @@ export default function Nav() {
               />
             </Link>
           </figure>
-          <div className="hidden items-center gap-6 text-sm md:flex">
-            <Link href="/">Home</Link>
-            <Link href="/about">About</Link>
-            <Link href="/events">Events</Link>
-            <Link href="/projects">Projects</Link>
+          <div className="hidden md:flex items-center">
+            <div className="items-center text-sm flex mr-3 gap-1">
+              <Link
+                className="rounded-lg bg-blue bg-opacity-0 px-3 py-1.5 transition-all hover:bg-opacity-20"
+                href="/"
+              >
+                Home
+              </Link>
+              <Link
+                className="rounded-lg bg-blue bg-opacity-0 px-3 py-1.5 transition-all hover:bg-opacity-20"
+                href="/about"
+              >
+                About
+              </Link>
+              <Link
+                className="rounded-lg bg-blue bg-opacity-0 px-3 py-1.5 transition-all hover:bg-opacity-20"
+                href="/events"
+              >
+                Events
+              </Link>
+              <Link
+                className="rounded-lg bg-blue bg-opacity-0 px-3 py-1.5 transition-all hover:bg-opacity-20"
+                href="/projects"
+              >
+                Projects
+              </Link>
+            </div>
             <a
               href="https://discord.gg/CmqKbnBDBG"
               target="_blank"
               rel="noopener noreferrer"
-              className="rounded-full bg-[#B0B8FF] px-4 py-2 text-black"
+              className="rounded-full bg-blue px-6 py-2 text-black text-sm"
             >
               SPCB Discord
             </a>

src/components/about/Contact.tsx

@@ -35,7 +35,7 @@ export default function Contact() {
     <div className="px-6 pb-10 pt-16 sm:pt-24 sm:px-10">
       <div className="mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-2">
         <div className="text-white">
-          <h2 className="font-Michroma text-2xl sm:text-4xl">
+          <h2 className="text-2xl sm:text-4xl">
             Connect With Us
           </h2>
           <p className="text-balance pt-6 leading-relaxed sm:text-lg">

src/components/about/Team.tsx

@@ -4,7 +4,7 @@ export default function Team() {
       <div className="grad h-32" />
       <div className="px-6 sm:px-10 py-20">
         <div className="mx-auto max-w-7xl text-white">
-          <h2 className="font-Michroma text-2xl sm:text-4xl">Meet Our Team</h2>
+          <h2 className="text-2xl sm:text-4xl">Meet Our Team</h2>
           <p className="pt-4 sm:pt-6 sm:text-lg text-balance opacity-80">
             Behind the Society of PC Building is a passionate team of
             officers who work hard to bring our community together, organize

src/components/decorations/GlowingLine.tsx

@@ -1,9 +1,8 @@
-// components/decorations/GlowingLine.tsx
 import React from "react";
 
 interface GlowingLineProps {
-  xPoints: string[];
-  yPoints: string[];
+  xPoints: (string | number)[];
+  yPoints: (string | number)[];
   color?: string;
   thickness?: number;
   circleSize?: number;
@@ -19,13 +18,13 @@ const GlowingLine: React.FC<GlowingLineProps> = ({
   className = "",
 }) => {
   const createLineSegments = () => {
-    const segments = [];
+    const segments: JSX.Element[] = [];
 
     for (let i = 0; i < xPoints.length - 1; i++) {
-      const x1 = parseFloat(xPoints[i]);
-      const y1 = parseFloat(yPoints[i]);
-      const x2 = parseFloat(xPoints[i + 1]);
-      const y2 = parseFloat(yPoints[i + 1]);
+      const x1 = parseFloat(xPoints[i].toString());
+      const y1 = parseFloat(yPoints[i].toString());
+      const x2 = parseFloat(xPoints[i + 1].toString());
+      const y2 = parseFloat(yPoints[i + 1].toString());
 
       // For vertical lines
       if (x1 === x2) {
@@ -37,12 +36,12 @@ const GlowingLine: React.FC<GlowingLineProps> = ({
             style={{
               width: `${thickness}px`,
               height: `${height}%`,
-              backgroundColor: color,
+              backgroundColor: `${color}dd`,
               left: `${x1}%`,
               top: `${Math.min(y1, y2)}%`,
-              boxShadow: `0 0 150px 7px ${color}`,
+              boxShadow: `0 0 60px 7px ${color}99`,
             }}
-          />,
+          />
         );
       }
       // For horizontal lines
@@ -55,19 +54,19 @@ const GlowingLine: React.FC<GlowingLineProps> = ({
             style={{
               width: `${width}%`,
               height: `${thickness}px`,
-              backgroundColor: color,
+              backgroundColor: `${color}dd`,
               left: `${Math.min(x1, x2)}%`,
               top: `${y1}%`,
-              boxShadow: `0 0 150px 7px ${color}`,
+              boxShadow: `0 0 60px 7px ${color}99`,
             }}
-          />,
+          />
         );
       }
     }
     return segments;
   };
 
-  // Calculate circle position adjustment based on thickness
+  // Calculate circle position adjustment based on thickness.
   const circleOffset = thickness / 2;
 
   return (
@@ -85,7 +84,6 @@ const GlowingLine: React.FC<GlowingLineProps> = ({
           backgroundColor: color,
           borderRadius: "50%",
           transform: "translate(-50%, -50%)",
-          boxShadow: `0 0 150px 7px ${color}`,
         }}
       />
 
@@ -100,7 +98,6 @@ const GlowingLine: React.FC<GlowingLineProps> = ({
           backgroundColor: color,
           borderRadius: "50%",
           transform: "translate(-50%, -50%)",
-          boxShadow: `0 0 150px 7px ${color}`,
         }}
       />
     </div>

src/components/events/Calendar.tsx

@@ -41,7 +41,7 @@ export default function Calendar() {
   return (
     <div className="pt-8 md:pt-12 text-white">
       <div className="flex items-end justify-between gap-5">
-        <p className="font-Michroma text-lg md:text-3xl">
+        <p className="text-lg md:text-3xl">
          Calendar - {currentMonthName} {currentYear}
         </p>
         <div className="flex gap-2">

src/components/events/MonthlyEvent.tsx

@@ -40,7 +40,7 @@ const MonthlyEvent: React.FC<MonthlyEventProps> = ({ event }) => {
     <>
       {/* Desktop version */}
       <div className="hidden grid-cols-10 md:grid">
-        <div className="col-span-2 flex flex-col justify-center gap-2 font-Michroma text-3xl">
+        <div className="col-span-2 flex flex-col justify-center gap-2 text-3xl">
           <p>{dayOfWeek}</p>
           <p>{dayOfMonth}</p>
         </div>

src/components/events/MonthlyEvents.tsx

@@ -23,7 +23,7 @@ export default function MonthlyEvents() {
   if (isLoading) {
     return (
       <div className="mt-10 md:mt-24">
-        <h1 className="font-Michroma text-2xl md:text-3xl">{format(currentDate, 'MMMM')} Events</h1>
+        <h1 className="text-2xl md:text-3xl">{format(currentDate, 'MMMM')} Events</h1>
         <p className="md:hidden pt-3 text-[#cacaca] text-sm">Click an event for more details.</p>
         <div className="h-52 w-full flex items-center justify-center">
           <span className="text-3xl animate-spin"><FaSpinner/></span>
@@ -37,7 +37,7 @@ export default function MonthlyEvents() {
   return (
     <div className="mt-10 md:mt-24">
 
-      <h1 className="font-Michroma text-2xl md:text-3xl">{format(currentDate, 'MMMM')} Events</h1>
+      <h1 className="text-2xl md:text-3xl">{format(currentDate, 'MMMM')} Events</h1>
 
       <p className="md:hidden pt-3 text-[#cacaca] text-sm">Click an event for more details.</p>
       <div className="mt-8 md:mt-12 grid gap-4 md:gap-12">