Cm/about progress

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "@tanstack/react-query": "^5.59.17",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/app/about/page.tsx

@@ -1,41 +1,66 @@
-"use client";
-
-import React, { useState } from "react";
-
-export default function About() {
-  const [isHovered, setIsHovered] = useState(false);
+import Contact from "@/components/about/Contact";
+import Team from "@/components/about/Team";
+import GlowingLine from "@/components/decorations/GlowingLine";
+import Footer from "@/components/Footer";
+import Image from "next/image";
 
+export default function AboutPage() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-[#080d14] font-Michroma text-white">
-      <div
-        className="group relative flex flex-col items-center gap-6 rounded-lg border border-white/10 bg-black/20 p-12 backdrop-blur-sm transition-all duration-500 hover:border-white/20 hover:shadow-lg hover:shadow-white/5"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        {/* Main text */}
-        <h1 className="text-center font-Michroma text-4xl font-bold tracking-wider">
-          COMING
-        </h1>
-        <h1 className="text-center font-Michroma text-5xl font-bold tracking-wider text-blue-400">
-          SOON!
-        </h1>
+    <>
+      <div className="flex items-center justify-center pt-32 text-[#eaeaea] sm:pt-48">
+        <div className="">
+          <GlowingLine
+            xPoints={["3", "20"]}
+            yPoints={["65", "65"]}
+            color="#1E90FF"
+            thickness={2}
+            circleSize={6}
+          />
 
-        {/* Animated underline */}
-        <div className="relative mt-2">
-          <div
-            className={`h-0.5 bg-gradient-to-r from-transparent via-blue-400 to-transparent transition-all duration-500 ${
-              isHovered ? "w-48" : "w-32"
-            }`}
+          <GlowingLine
+            xPoints={["-2", "30"]}
+            yPoints={["70", "70"]}
+            color="#1E90FF"
+            thickness={2}
+            circleSize={6}
+          />
+          <GlowingLine
+            xPoints={["40", "56"]}
+            yPoints={["25", "25"]}
+            color="#1E90FF"
+            thickness={2}
+            circleSize={6}
+            className="hidden md:block"
           />
         </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">
+              About Us
+            </h1>
+            <p className="text-balance pt-1 text-lg leading-relaxed">
+              The Society of PC Building helps students learn to build PCs,
+              regardless of experience, through hands-on workshops and events,
+              fostering knowledge and confidence among its members.
+            </p>
+          </div>
 
-        {/* Subtitle */}
-        <p className="mt-4 text-center text-sm text-gray-400">
-          We're building something awesome.
-          <br />
-          Stay tuned!
-        </p>
+          <div className="about-bg relative flex justify-center rounded-md bg-black">
+            <div className="-translate-x-6 -translate-y-6 overflow-hidden rounded-lg shadow-[0_0_15px_6px_rgba(255,255,255,0.3)] sm:-translate-x-10 sm:-translate-y-10">
+              <Image
+                src="/about-images/ethan.jpg"
+                alt="Ethan holding the graphics card"
+                width={600}
+                height={358}
+                className="object-cover"
+              />
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+      <Team />
+      <Contact />
+      <Footer />
+    </>
   );
 }

src/app/globals.css

@@ -53,7 +53,24 @@ body {
   border: 1px solid #4255f911;
 }
 
+.about-bg {
+  background: radial-gradient(
+      138.71% 110.11% at 93.15% -36.58%,
+      #4255f988 25%,
+      #0f1319 50%,
+      #4255f901 100%
+    ),
+    radial-gradient(61.66% 37.6% at 6.63% 95.08%, #4255f988 25%, #0f1319 100%),
+    #4255f988;
+  box-shadow: 0px 0.5px 16px 0px rgba(200, 200, 255, 0.1);
+  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);
 }

src/components/Footer.tsx

@@ -3,9 +3,9 @@ import Link from "next/link";
 
 export default function Footer() {
   return (
-    <footer className="relative z-50 mt-28 flex justify-end">
-      <div className="grid min-h-[420px] w-full max-w-[1800px] grid-cols-1 items-center lg:grid-cols-3">
-        <div className="flex flex-col gap-6 px-10 text-white">
+    <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"}

src/components/about/Contact.tsx

@@ -0,0 +1,129 @@
+"use client";
+import Image from "next/image";
+import emailjs from "@emailjs/browser";
+import { FormEvent, useRef, useState } from "react";
+import { LuLoader2 } from "react-icons/lu";
+
+export default function Contact() {
+  const [emailState, setEmailState] = useState<
+    "inactive" | "loading" | "error" | "sent"
+  >("inactive");
+  const form = useRef<HTMLFormElement | null>(null);
+  const publicKey = process.env.NEXT_PUBLIC_EMAIL_PUBLIC_KEY;
+  const service = process.env.NEXT_PUBLIC_EMAIL_SERVICE;
+  const template = process.env.NEXT_PUBLIC_EMAIL_TEMPLATE;
+
+  const sendEmail = (e: FormEvent<HTMLFormElement>) => {
+    setEmailState("loading");
+    e.preventDefault();
+    if (!form.current || !service || !template) return;
+
+    emailjs
+      .sendForm(service, template, form.current, {
+        publicKey: publicKey,
+      })
+      .then(
+        () => {
+          setEmailState("sent");
+        },
+        () => {
+          setEmailState("error");
+        },
+      );
+  };
+  return (
+    <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">
+            Connect With Us
+          </h2>
+          <p className="text-balance pt-6 leading-relaxed sm:text-lg">
+            The Society of PC Building's main form of communication is through
+            our{" "}
+            <a
+              href="https://discord.com/invite/jfq9phWqTF"
+              className="underline"
+              target="_blank"
+            >
+              discord
+            </a>
+            . If you'd prefer, feel free to reach out through our contact
+            form—we'd be happy to hear from you. For more ways to connect, check
+            out the links below!
+          </p>
+          <form
+            action=""
+            className="mt-6 flex flex-col gap-5"
+            ref={form}
+            onSubmit={sendEmail}
+          >
+            <div className="">
+              <label htmlFor="email" className="text-sm sm:text-lg">
+                Email Address
+              </label>
+              <input
+                id="email"
+                type="email"
+                name="user_email"
+                required
+                className="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-2 py-2 outline-none"
+                placeholder="email@email.com"
+              />
+            </div>
+            <div className="">
+              <label htmlFor="username" className="text-sm sm:text-lg">
+                Name
+              </label>
+              <input
+                type="text"
+                id="username"
+                name="user_name"
+                required
+                className="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-2 py-2 outline-none"
+                placeholder="John Doe"
+              />
+            </div>
+            <div className="">
+              <label htmlFor="message" className="text-sm sm:text-lg">
+                Message
+              </label>
+              <textarea
+                name="message"
+                required
+                id="message"
+                className="resize-x-none mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-2 py-2 outline-none"
+                rows={3}
+                placeholder="Your message here"
+              ></textarea>
+            </div>
+            <button
+              className="flex justify-center rounded-md bg-light-blue py-2 text-center text-sm text-black"
+              type="submit"
+            >
+              {emailState === "loading" && (
+                <span className="animate-spin text-xl">
+                  <LuLoader2 />
+                </span>
+              )}
+              {emailState === "inactive" && "Submit"}
+              {emailState === "error" && "Error. Please contact us on Discord"}
+              {emailState === "sent" &&
+                "Success! Feel free to send another message"}
+            </button>
+          </form>
+        </div>
+        <figure className="flex justify-center sm:justify-end">
+          <a href="https://linktr.ee/pcbuildinguf" target="_blank">
+            <Image
+              src={"/about-images/mockup.png"}
+              width={300}
+              height={614}
+              alt=""
+            />
+          </a>
+        </figure>
+      </div>
+    </div>
+  );
+}

src/components/about/Team.tsx

@@ -0,0 +1,21 @@
+export default function Team() {
+  return (
+    <div className="sm:pt-6">
+      <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>
+          <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
+            events, and foster a love for PC building.
+          </p>
+          <div className="mt-8 py-4 sm:py-5 px-8 rounded-md bg-gray-900 border border-gray-800">
+            Coming Soon!
+          </div>
+        </div>
+      </div>
+      <div className="grad h-32 -scale-y-[1]" />
+    </div>
+  );
+}