Skip to content

Updated Landing page UI + bug fixes #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ClaudioGSDB merged 1 commit into from
Mar 26, 2025
Merged

Updated Landing page UI + bug fixes #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/admin/projects/AddForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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..."
Expand Down
261 changes: 236 additions & 25 deletions src/components/landing/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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=""
Expand All @@ -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>
Expand All @@ -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>
);
};
Expand Down