Landing redesign

src/app/globals.css

@@ -17,18 +17,15 @@ textarea {
 
 body {
   font-family: "Space Grotesk", serif !important;
-  /* font-family: "Space Mono", serif; */
   background-color: #ffffff;
   overflow-x: hidden;
 }
 
-#hero {
-  background-image: url("/landing/bg.svg");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
+.footer-clip-path {
+  clip-path: polygon(15% 34%, 100% 0%, 100% 100%, 0% 100%);
 }
 
+/* Events Page */
 .monthly-event {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
@@ -41,6 +38,7 @@ body {
   border: 1px solid #4255f911;
 }
 
+/* About Page */
 .about-bg {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
@@ -54,31 +52,16 @@ body {
   border: 1px solid #242424;
 }
 
-.footer-clip-path {
-  clip-path: polygon(15% 34%, 100% 0%, 100% 100%, 0% 100%);
-}
 
-.grad {
-  background: linear-gradient(0deg, #4255f922, #080d14);
-  filter: blur(20px);
-}
 
-/* fade background of hero */
 
-.hero-btn:hover {
+/* Landing Page */
+
+.cta-btn:hover {
   /* Apply a full (all-around) shadow with #79C7FD */
   box-shadow: 0 0 16px 4px 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%);
-}
-
-
 /* infinite carousel */
 
 .scroller-list {
@@ -89,15 +72,44 @@ body {
   justify-content: space-between;
   align-items: center;
   gap: 16px;
-  animation: scroll 20s linear infinite;
+  /* Remove animation from here so it only applies when all images are loaded */
 }
 
-.scroller-container:hover .scroller-list{
-  animation-play-state: paused;
+.scroller-list.animate-scroll {
+  animation: scroll 24s linear infinite;
 }
 
 @keyframes scroll {
   to {
     transform: translateX(calc(-100% - 16px));
   }
+}
+
+/* Discord PC */
+
+.pc-stand {
+  background: linear-gradient(
+    180deg,
+    rgba(64, 64, 64, 0.1) 0%,
+    rgba(64, 64, 64, 0.2) 13.27%,
+    rgba(64, 64, 64, 0.25) 27.21%,
+    rgba(64, 64, 64, 0.48) 60.58%,
+    rgba(64, 64, 64, 0.54) 76.36%,
+    rgba(64, 64, 64, 0.45) 92.14%
+  );
+}
+
+.pc-base {
+  background: linear-gradient(
+    90deg,
+    rgba(64, 64, 64, 0.6) 0%,
+    rgba(64, 64, 64, 0.3) 6.5%,
+    rgba(64, 64, 64, 0.6) 19.18%,
+    rgba(64, 64, 64, 0.3) 32.93%,
+    rgba(64, 64, 64, 0.3) 66.46%,
+    rgba(64, 64, 64, 0.6) 81%,
+    rgba(64, 64, 64, 0.3) 94%,
+    rgba(64, 64, 64, 0.6) 100%
+  );
+  box-shadow: 0px -7px 2px 0px rgba(0, 0, 0, 0.18);
 }

src/app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import Footer from "@/components/Footer";
 import About from "@/components/landing/About";
+import DiscordPC from "@/components/landing/DiscordPc";
 import Events from "@/components/landing/Events";
 import Faq from "@/components/landing/Faq";
 import Hero from "@/components/landing/Hero";
@@ -10,6 +11,7 @@ const Website = () => {
     <div className="min-h-screen w-full bg-[#080d14] text-white">
       <Hero />
       <About />
+      <DiscordPC/>
       <Events />
       <Faq />
       <Footer />

src/components/Footer.tsx

@@ -1,119 +1,94 @@
+import { ArrowUpRight } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
 export default function Footer() {
   return (
-    <footer className="relative z-20 mt-28 flex justify-end">
-      <div className="grid min-h-[420px] w-full max-w-[1600px] grid-cols-1 items-center lg:grid-cols-3">
-        <div className="flex flex-col gap-6 pl-10 text-white">
-          <figure>
-            <Image
-              src={"/navbar/logo.png"}
-              width={160}
-              height={160}
-              alt=""
-              className="h-32 w-32 sm:h-48 sm:w-48"
-            />
-          </figure>
-          <p className="text-2xl font-semibold sm:text-4xl">
-            Proudly Building PCs.
-          </p>
-          <div className="flex gap-3 md:gap-4">
-            <Link
-              href="https://www.linkedin.com/company/the-society-of-pc-building"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-transform hover:scale-110"
-            >
-              <Image
-                src="/landing/linkedin.png"
-                alt="LinkedIn"
-                width={30}
-                height={30}
-                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-              />
-            </Link>
-            <Link
-              href="https://www.instagram.com/pcbuildinguf/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-transform hover:scale-110"
-            >
-              <Image
-                src="/landing/instagram.png"
-                alt="Instagram"
-                width={30}
-                height={30}
-                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-              />
-            </Link>
-            <Link
-              href="https://discord.com/invite/jfq9phWqTF"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-transform hover:scale-110"
-            >
-              <Image
-                src="/landing/discord.png"
-                alt="Discord"
-                width={30}
-                height={30}
-                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-              />
-            </Link>
-            <Link
-              href="https://linktr.ee/pcbuildinguf"
+    <footer className="relative mt-24 sm:mt-40 border-t border-gray-900 text-white">
+      <Image
+        src="/hero/hero-background.png"
+        alt="Lights Background"
+        fill
+        priority
+        sizes="100vw"
+        quality={100} // Increase image quality (0-100)
+        className="absolute left-0 right-0 top-0 z-0 object-cover"
+      />
+      <div className="absolute inset-0 z-10 bg-[#080d14ec] backdrop-blur-md" />
+      <div className="relative z-20 mx-auto flex flex-col lg:flex-row max-w-6xl px-6 pb-16 pt-16 sm:pt-20 sm:px-10">
+        <div className="max-w-[250px]">
+          <div>
+            <Image src={"/navbar/logo.png"} width={100} height={100} alt="" />
+            <p className="pt-4 text-2xl font-medium">Proudly Building PCs.</p>
+            <p className="border-b border-gray-800 py-2 text-sm text-dull">
+              © 2025 The Society of PC Building. <br />
+              All rights reserved.
+            </p>
+          </div>
+          <div className="mt-4">
+            <p className="text-sm">
+              Made in Collaboration with Gator User Design.{" "}
+              <a
+                href="https://www.instagram.com/gatoruserdesign/"
+                target="_blank"
+                className="hover:underline"
+              >
+                Check us out <ArrowUpRight size={16} className="inline" />
+              </a>
+            </p>
+            <div className="w-14">
+              <a
+                href="https://www.instagram.com/gatoruserdesign/"
+                target="_blank"
+              >
+                <Image
+                  src={"/iconography/gud-color.png"}
+                  width={56}
+                  height={56}
+                  alt=""
+                  className="mt-4 rounded-full border border-gray-700"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="grid grid-cols-2 sm:grid-cols-3 items-start gap-12 lg:pl-32 pt-16 lg:pt-[116px]">
+          <div className="grid gap-4">
+            <p className="text-dull">Socials</p>
+            <a target="_blank" href="https://discord.com/invite/jfq9phWqTF">
+              Discord
+            </a>
+            <a
               target="_blank"
-              rel="noopener noreferrer"
-              className="transition-transform hover:scale-110"
+              href="https://www.linkedin.com/company/the-society-of-pc-building"
             >
-              <Image
-                src="/landing/linktree.png"
-                alt="Linktree"
-                width={30}
-                height={30}
-                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-              />
-            </Link>
+              LinkedIn
+            </a>
+            <a target="_blank" href="https://www.instagram.com/pcbuildinguf/">
+              Instagram
+            </a>
+            <a target="_blank" href="https://linktr.ee/pcbuildinguf">
+              LinkTree
+            </a>
           </div>
-          <p className="text-sm opacity-80">
-            &copy; {new Date().getFullYear()} The Society of PC Building. All
-            rights reserved.
-          </p>
-        </div>
-        <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="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">
-            <Link
+          <div className="grid gap-4">
+            <p className="text-dull">Pages</p>
+            <Link href="/">Home</Link>
+            <Link href="/about">About</Link>
+            <Link href="/events">Events</Link>
+            <Link href="/projects">Projects</Link>
+          </div>
+          <div className="grid gap-4">
+            <p className="text-dull">Other</p>
+            <a href="https://github.com/PCBuilding/SPCBWebsite" target="_blank">
+              Source Code
+            </a>
+            <a
               href="https://www.instagram.com/gatoruserdesign/"
               target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center text-xl text-black hover:underline sm:text-2xl"
             >
-              Check us out
-              <svg
-                className="ml-2 h-4 w-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M14 5l7 7m0 0l-7 7m7-7H3"
-                />
-              </svg>
-            </Link>
+              Gator User Design
+            </a>
           </div>
         </div>
       </div>