From bb300f49f411162bb41bc86a80843c996f32c440 Mon Sep 17 00:00:00 2001
From: Claudio Sciotto <fisizion@gmail.com>
Date: Wed, 26 Mar 2025 15:02:44 -0400
Subject: [PATCH] Updated Landing page UI + bug fixes

*Changed font
*Updated landing page layout
*added more glowing lines in landing page
* fixed some invisible buttons
---
 src/app/globals.css                       |   4 +-
 src/components/admin/projects/AddForm.tsx |   4 +-
 src/components/landing/About.tsx          | 261 +++++++++++++++++++---
 3 files changed, 240 insertions(+), 29 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index e29e79b..a84c708 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -16,8 +16,8 @@ textarea {
 }
 
 body {
-  /* font-family: "Space Grotesk", serif !important; */
-  font-family: "Space Mono", serif;
+  font-family: "Space Grotesk", serif !important;
+  /* font-family: "Space Mono", serif; */
   background-color: #ffffff;
   overflow-x: hidden;
 }
diff --git a/src/components/admin/projects/AddForm.tsx b/src/components/admin/projects/AddForm.tsx
index d0036f4..0a7ffca 100644
--- a/src/components/admin/projects/AddForm.tsx
+++ b/src/components/admin/projects/AddForm.tsx
@@ -372,7 +372,7 @@ export default function AddForm({
                 {uploadProgress > 0 && uploadProgress < 100 && (
                   <div className="h-2.5 w-full rounded-full bg-gray-200">
                     <div
-                      className="h-2.5 rounded-full bg-blue-600"
+                      className="bg-blue-600 h-2.5 rounded-full"
                       style={{ width: `${uploadProgress}%` }}
                     ></div>
                   </div>
@@ -444,7 +444,7 @@ export default function AddForm({
         <button
           type="submit"
           disabled={isSubmitting}
-          className="w-full rounded-md bg-blue-500 p-3 text-sm text-white disabled:bg-blue-300 sm:text-base"
+          className="bg-blue-500 disabled:bg-blue-300 w-full rounded-md bg-green-500 p-3 text-sm text-white sm:text-base"
         >
           {isSubmitting
             ? "Submitting..."
diff --git a/src/components/landing/About.tsx b/src/components/landing/About.tsx
index 9f6ebae..a20e2ec 100644
--- a/src/components/landing/About.tsx
+++ b/src/components/landing/About.tsx
@@ -1,8 +1,9 @@
-import React, { useRef } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import { motion, useInView } from "framer-motion";
 import EvervaultCard from "./ui/evervault-card";
 import Terminal from "./ui/Connect";
 import AnimatedCountUp from "./ui/Counter";
+import GlowingLine from "@/components/decorations/GlowingLine";
 
 // Define an interface for the list items.
 interface ListItem {
@@ -18,25 +19,38 @@ const listItems: ListItem[] = [
     desc: "Build PCs, demo the latest technology, and learn new skills, all for free.",
     children: <EvervaultCard />,
   },
-  {
-    title: "Highest funded student org at UF.",
-    desc: "We fully cater our GBM's and regulary get the latest tech.",
-    children: <AnimatedCountUp />,
-  },
   {
     title: "Connect with hundreds of tech enthusiasts.",
     desc: "Meet like-minded individuals with industry experience in Computer Science & Engineering.",
     children: <Terminal />,
   },
+  {
+    title: "Highest funded student org at UF.",
+    desc: "We fully cater our GBM's and regulary get the latest tech.",
+    children: <AnimatedCountUp />,
+  },
 ];
 
 const About: React.FC = () => {
+  const [isDesktop, setIsDesktop] = useState<boolean>(false);
+
   // Type the ref for the heading element.
   const h3Ref = useRef<HTMLHeadingElement>(null);
   const isInView = useInView(h3Ref, { once: true });
 
+  // Check if desktop for responsive lines
+  useEffect(() => {
+    const checkIfDesktop = () => {
+      setIsDesktop(window.innerWidth >= 768);
+    };
+
+    checkIfDesktop();
+    window.addEventListener("resize", checkIfDesktop);
+    return () => window.removeEventListener("resize", checkIfDesktop);
+  }, []);
+
   return (
-    <div className="relative mx-auto max-w-7xl overflow-hidden px-10 pt-16 sm:pt-32">
+    <div className="relative mx-auto max-w-7xl px-10 pt-16 sm:pt-32">
       <motion.img
         src="/landing/tube.png"
         alt=""
@@ -55,9 +69,183 @@ const About: React.FC = () => {
         >
           Why SPCB?
         </h3>
-        <ul>
-          {listItems.map((info) => (
-            <AboutItem key={info.title} info={info} />
+
+        {/* Desktop Main Lines - Only show on desktop */}
+        {isDesktop ? (
+          <>
+            <GlowingLine
+              xPoints={["50", "50", "16", "16"]}
+              yPoints={["5", "17", "17", "29"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={8}
+            />
+            <GlowingLine
+              xPoints={["14", "14", "82", "82"]}
+              yPoints={["35", "50", "50", "58"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={8}
+            />
+            <GlowingLine
+              xPoints={["86", "86", "12", "12"]}
+              yPoints={["67", "81", "81", "90"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={8}
+            />
+
+            {/* Main line decorators - Desktop only */}
+            <GlowingLine
+              xPoints={["34", "42"]}
+              yPoints={["16", "16"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={6}
+            />
+            <GlowingLine
+              xPoints={["30", "45"]}
+              yPoints={["18", "18"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={6}
+            />
+            <GlowingLine
+              xPoints={["83", "83"]}
+              yPoints={["52", "55"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={6}
+            />
+            <GlowingLine
+              xPoints={["30", "45"]}
+              yPoints={["80", "80"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={6}
+            />
+            <GlowingLine
+              xPoints={["34", "46"]}
+              yPoints={["82", "82"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={6}
+            />
+
+            {/* Blue decorative lines Group1 - Desktop only */}
+            <GlowingLine
+              xPoints={["4", "10"]}
+              yPoints={["5", "5"]}
+              color="#1E90FF"
+              thickness={2}
+              circleSize={6}
+            />
+            <GlowingLine
+              xPoints={["1", "16"]}
+              yPoints={["6", "6"]}
+              color="#1E90FF"
+              thickness={2}
+              circleSize={6}
+            />
+            <GlowingLine
+              xPoints={["2", "14"]}
+              yPoints={["7", "7"]}
+              color="#1E90FF"
+              thickness={2}
+              circleSize={6}
+            />
+
+            {/* Blue decorative lines Group2 - Desktop only */}
+            <GlowingLine
+              xPoints={["72", "90"]}
+              yPoints={["35", "35"]}
+              color="#1E90FF"
+              thickness={2}
+              circleSize={6}
+            />
+            <GlowingLine
+              xPoints={["70", "87"]}
+              yPoints={["36", "36"]}
+              color="#1E90FF"
+              thickness={2}
+              circleSize={6}
+            />
+
+            {/* Blue decorative lines Group3 - Desktop only */}
+            <GlowingLine
+              xPoints={["10", "20"]}
+              yPoints={["67", "67"]}
+              color="#1E90FF"
+              thickness={2}
+              circleSize={6}
+            />
+            <GlowingLine
+              xPoints={["8", "22"]}
+              yPoints={["68", "68"]}
+              color="#1E90FF"
+              thickness={2}
+              circleSize={6}
+            />
+            <GlowingLine
+              xPoints={["9", "14"]}
+              yPoints={["69", "69"]}
+              color="#1E90FF"
+              thickness={2}
+              circleSize={6}
+            />
+          </>
+        ) : (
+          // Mobile Main Line - Vertical line through the middle
+          <>
+            <GlowingLine
+              xPoints={["30", "30"]}
+              yPoints={["3", "6"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={8}
+            />
+            <GlowingLine
+              xPoints={["58", "58"]}
+              yPoints={["16", "38"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={8}
+            />
+            <GlowingLine
+              xPoints={["36", "36"]}
+              yPoints={["49", "71"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={8}
+            />
+            <GlowingLine
+              xPoints={["70", "70"]}
+              yPoints={["79.5", "99"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={8}
+            />
+            {/* Mobile Main Line decorations */}
+            <GlowingLine
+              xPoints={["55", "55"]}
+              yPoints={["25", "36"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={8}
+            />
+            <GlowingLine
+              xPoints={["39", "39"]}
+              yPoints={["60", "69"]}
+              color="#FFA500"
+              thickness={3}
+              circleSize={8}
+            />
+          </>
+        )}
+
+        <ul className="relative z-10">
+          {listItems.map((info, index) => (
+            <AboutItem key={info.title} info={info} index={index} />
           ))}
         </ul>
       </div>
@@ -67,25 +255,48 @@ const About: React.FC = () => {
 
 interface AboutItemProps {
   info: ListItem;
+  index: number;
 }
 
-const AboutItem: React.FC<AboutItemProps> = ({ info }) => {
+const AboutItem: React.FC<AboutItemProps> = ({ info, index }) => {
+  const isEven = index % 2 === 0;
   return (
-    <li className="grid gap-8 border-b border-[#1a2a3d] py-12 sm:py-16 md:grid-cols-2">
-      <div className="flex flex-col items-center justify-between gap-3 text-center sm:gap-4 md:items-start md:text-left">
-        <p className="balance max-w-[320px] text-3xl leading-[1.2] sm:max-w-[410px] sm:text-4xl lg:text-4xl xl:leading-[1.2]">
-          {info.title}
-        </p>
-        <p className="max-w-[445px] text-balance text-lg text-dull lg:text-xl">
-          {info.desc}
-        </p>
-      </div>
+    <li className="grid gap-8 py-12 sm:py-16 md:grid-cols-2">
+      {isEven ? (
+        <>
+          <div className="flex flex-col items-center justify-between gap-3 text-center sm:gap-4 md:items-start md:text-left">
+            <p className="balance max-w-[320px] text-3xl leading-[1.2] sm:max-w-[410px] sm:text-4xl lg:text-4xl xl:leading-[1.2]">
+              {info.title}
+            </p>
+            <p className="max-w-[445px] text-balance text-lg text-dull lg:text-xl">
+              {info.desc}
+            </p>
+          </div>
 
-      <div className="flex justify-center md:justify-end">
-        <div className="aspect-square w-full max-w-96 overflow-hidden rounded-xl border border-[#1a2a3d] bg-[#090f1a]">
-          {info.children}
-        </div>
-      </div>
+          <div className="flex justify-center md:justify-end">
+            <div className="aspect-square w-full max-w-96 overflow-hidden rounded-xl border border-[#1a2a3d] bg-[#090f1a]">
+              {info.children}
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="order-last flex justify-center md:order-first md:justify-start">
+            <div className="aspect-square w-full max-w-96 overflow-hidden rounded-xl border border-[#1a2a3d] bg-[#090f1a]">
+              {info.children}
+            </div>
+          </div>
+
+          <div className="order-first flex flex-col items-center justify-between gap-3 text-center sm:gap-4 md:order-last md:items-end md:text-right">
+            <p className="balance max-w-[320px] text-3xl leading-[1.2] sm:max-w-[410px] sm:text-4xl lg:text-4xl xl:leading-[1.2]">
+              {info.title}
+            </p>
+            <p className="max-w-[445px] text-balance text-lg text-dull lg:text-xl">
+              {info.desc}
+            </p>
+          </div>
+        </>
+      )}
     </li>
   );
 };