Skip to content

Updated Landing and added Footer #27

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
Jan 24, 2025
Merged

Updated Landing and added Footer #27

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
6 changes: 4 additions & 2 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
"use client";
import Footer from "@/components/Footer";
import Hero from "@/components/landing/Hero";
import LandingAbout from "@/components/landing/LandingAbout";
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" />
<Hero />
<LandingAbout />
<Landing />
<Footer />
</div>
);
};
Expand Down
2 changes: 2 additions & 0 deletions src/app/projects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@

import React from "react";
import ProjectsPage from "@/components/projects/ProjectsPage";
import Footer from "@/components/Footer";

export default function Projects() {
return (
<div>
<ProjectsPage />
<Footer />
</div>
);
}
34 changes: 22 additions & 12 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,21 @@ 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-[1600px] grid-cols-1 lg:grid-cols-3 items-center">
<div className="flex flex-col gap-6 text-white pl-10">
<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">
<figure>
<Image src={"/navbar/logo.png"} width={160} height={160} alt="" className="w-24 h-24 sm:w-40 sm:h-40"/>
<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 sm:text-4xl font-semibold">Proudly Building PCs.</p>
<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"
Expand Down Expand Up @@ -68,26 +76,28 @@ export default function Footer() {
/>
</Link>
</div>
<p className="text-sm opacity-80">&copy; {new Date().getFullYear()} The Society of PC Building. All
rights reserved.</p>
<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 lg:col-span-2 flex h-full flex-col items-center justify-center gap-1 bg-white pl-12 sm:pl-0 xl:pl-20 pt-20 min-h-80">
<p className="max-w-[417px] text-2xl sm:text-4xl font-bold ">
<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">
Gator User Design{" "}
<Image
src={"/iconography/gud-color.png"}
width={80}
height={80}
alt=""
className="ml-2 inline w-14 h-14 sm:h-20 sm:w-20"
className="ml-2 inline h-14 w-14 sm:h-20 sm:w-20"
/>{" "}
</p>
<div className="flex w-full max-w-[416px] justify-center sm:justify-start items-start">
<div className="flex w-full max-w-[416px] items-start justify-center sm:justify-start">
<Link
href="https://www.instagram.com/gatoruserdesign/"
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-xl sm:text-2xl hover:underline text-black"
className="flex items-center text-xl text-black hover:underline sm:text-2xl"
>
Check us out
<svg
Expand Down
264 changes: 264 additions & 0 deletions src/components/landing/Landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,264 @@
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import GlowingLine from "../decorations/GlowingLine";

export default function Landing() {
const [isDesktop, setIsDesktop] = useState(false);

useEffect(() => {
const checkIfDesktop = () => {
setIsDesktop(window.innerWidth >= 768);
};
checkIfDesktop();
window.addEventListener("resize", checkIfDesktop);
return () => window.removeEventListener("resize", checkIfDesktop);
}, []);

return (
<div className="relative">
{/* Background Gradients */}
<div className="absolute left-[10%] top-[20%] h-32 w-96 -rotate-45 rounded-full bg-blue-500/10 blur-3xl"></div>
<div className="absolute right-[30%] top-[40%] h-24 w-[32rem] -rotate-12 rounded-full bg-orange-500/10 blur-3xl"></div>
<div className="-rotate-30 absolute left-[20%] top-[70%] h-28 w-[28rem] rounded-full bg-blue-500/5 blur-3xl"></div>
<div className="absolute right-[15%] top-[55%] h-20 w-[24rem] rotate-[25deg] rounded-full bg-orange-500/10 blur-3xl"></div>

<div className="relative min-h-96 w-full py-32">
{/* Decorative Lines */}
<GlowingLine
xPoints={["3", "20"]}
yPoints={["15", "15"]}
color="#1E90FF"
thickness={2}
circleSize={6}
/>
<GlowingLine
xPoints={["5", "23"]}
yPoints={["18", "18"]}
color="#1E90FF"
thickness={2}
circleSize={6}
/>
<GlowingLine
xPoints={["75", "90"]}
yPoints={["10", "10"]}
color="#1E90FF"
thickness={2}
circleSize={6}
/>
<GlowingLine
xPoints={["78", "98"]}
yPoints={["14", "14"]}
color="#1E90FF"
thickness={2}
circleSize={6}
/>

{/* Content Box */}
<div className="relative mx-auto max-w-3xl px-4 pt-48">
<motion.div
initial={{ opacity: 0, y: 80 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
viewport={{ once: true, amount: 0.3 }}
className="overflow-hidden rounded-lg p-8"
style={{
background:
"linear-gradient(90deg, #0F1319 0%, #0F1319 50%, rgba(28,42,106,0.7) 100%)",
boxShadow: `
0 0 100px 0px rgba(255, 255, 255, 0.1),
0 0 30px 0px rgba(28, 42, 106, 0.5),
0 0 15px 0px rgba(255, 255, 255, 0.2)
`,
}}
>
<div className="text-center">
<h2 className="mb-6 font-['Michroma'] text-2xl font-bold text-white sm:text-4xl">
About
</h2>
<p className="mb-8 text-base text-gray-300 sm:text-xl">
The Society of PC Building (SPCB) at the University of Florida
is a community for students passionate about PC hardware,
building, and tech. Whether you're a beginner or an expert, SPCB
offers workshops, live demos, and events to help you learn,
collaborate, and build custom rigs. Beyond PCs, we foster
innovation, teamwork, and technical growth, connecting students
through a shared love for technology.
</p>
<Link
href="/about"
className="inline-flex items-center rounded-full bg-white px-4 py-2 font-['Michroma'] text-xs font-medium text-black transition-all duration-200 hover:scale-105 hover:bg-orange-100 sm:px-6 sm:py-3 sm:text-sm"
>
Learn More
<svg
className="ml-2 h-3 w-3 sm:h-4 sm: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>
</div>
</motion.div>
</div>
</div>

{/* Activities Section */}
<div className="relative min-h-screen w-full py-16 pt-32">
{/* Lines */}
<GlowingLine
xPoints={["30", "30", "65", "65", "30", "30"]}
yPoints={["9", "53", "53", "85", "85", "100"]}
color="#FFA500"
thickness={3}
circleSize={8}
/>
<GlowingLine
xPoints={[isDesktop ? "29" : "28", isDesktop ? "29" : "28"]}
yPoints={["0", "13"]}
color="#FFA500"
thickness={3}
circleSize={8}
/>
<GlowingLine
xPoints={[isDesktop ? "28" : "26", isDesktop ? "28" : "26"]}
yPoints={["8", "14"]}
color="#FFA500"
thickness={3}
circleSize={8}
/>
<GlowingLine
xPoints={["90", "99"]}
yPoints={["10", "10"]}
color="#1E90FF"
thickness={2}
circleSize={6}
/>
<GlowingLine
xPoints={["80", "99"]}
yPoints={["12", "12"]}
color="#1E90FF"
thickness={2}
circleSize={6}
/>
<GlowingLine
xPoints={["85", "94"]}
yPoints={["13", "13"]}
color="#1E90FF"
thickness={2}
circleSize={6}
/>
<GlowingLine
xPoints={["1", "9"]}
yPoints={["59", "59"]}
color="#1E90FF"
thickness={2}
circleSize={6}
/>
<GlowingLine
xPoints={["2", "20"]}
yPoints={["60", "60"]}
color="#1E90FF"
thickness={2}
circleSize={6}
/>
<GlowingLine
xPoints={["0", "7"]}
yPoints={["61", "61"]}
color="#1E90FF"
thickness={2}
circleSize={6}
/>

{/* Content Cards */}
<div className="relative mx-auto max-w-7xl px-4">
{/* Socials Card */}
<motion.div
className="relative left-[10%] mb-32 mt-32 w-[35%]"
initial={{ opacity: 0, y: 80 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, ease: "easeOut" }}
viewport={{ once: true, amount: 0.25 }}
>
<div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1">
<div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
<Image
src="/landing/images/socials.png"
alt="Socials"
fill
className="object-cover"
/>
</div>
<div className="bg-[#020B24] p-4">
<h3 className="font-['Michroma'] text-lg font-bold text-white sm:text-2xl">
Socials
</h3>
</div>
</div>
</motion.div>

{/* GBMs Card */}
<motion.div
className="relative left-[55%] mb-32 w-[35%]"
initial={{ opacity: 0, y: 80 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, ease: "easeOut" }}
viewport={{ once: true, amount: 0.3 }}
>
<Link href="/events">
<div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1 transition-transform duration-200 hover:scale-105">
<div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
<Image
src="/landing/images/gbms.png"
alt="GBMs"
fill
className="object-cover"
/>
</div>
<div className="bg-[#020B24] p-4">
<h3 className="font-['Michroma'] text-lg font-bold text-white sm:text-2xl">
GBMs
</h3>
</div>
</div>
</Link>
</motion.div>

{/* PC Builds Card */}
<motion.div
className="relative left-[10%] w-[35%]"
initial={{ opacity: 0, y: 80 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, ease: "easeOut" }}
viewport={{ once: true, amount: 0.3 }}
>
<Link href="/projects">
<div className="overflow-hidden rounded-lg bg-gradient-to-b from-black to-blue-900/50 p-1 transition-transform duration-200 hover:scale-105">
<div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
<Image
src="/landing/images/pc-builds.png"
alt="PC Builds"
fill
className="object-cover"
/>
</div>
<div className="bg-[#020B24] p-4">
<h3 className="font-['Michroma'] text-lg font-bold text-white sm:text-2xl">
PC Builds
</h3>
</div>
</div>
</Link>
</motion.div>
</div>
</div>
</div>
);
}
Loading
Loading