Skip to content

feat: added team page, governance, contact, reworked home. reworked u… #44

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
HalfPast9 merged 1 commit into from
Mar 31, 2026
Merged

feat: added team page, governance, contact, reworked home. reworked u… #44

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
88 changes: 83 additions & 5 deletions apps/web/app/contact/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ import NavIcon from '@/components/ui/NavIcon';
import ContactTypography from '@/components/ui/ContactTypography';
import { useScrollReveal } from '@/hooks/useScrollReveal';

const SOCIAL_LINKS = [
{ label: 'Instagram', href: 'https://instagram.com/arcarleton' },
{ label: 'LinkedIn', href: '#' },
{ label: 'GitHub', href: '#' },
] as const;

export default function ContactPage() {
const leftRef = useScrollReveal<HTMLDivElement>({ y: 30 });
const rightRef = useScrollReveal<HTMLDivElement>({ y: 30, delay: 0.15 });
Expand All @@ -19,17 +25,18 @@ export default function ContactPage() {
<section className="relative flex min-h-screen items-start px-6 pt-28 md:px-10 lg:px-16">
<BlueprintGrid variant="hero" />
<div className="mx-auto flex w-full max-w-[1440px] flex-col gap-12 py-16 lg:flex-row lg:gap-24">
{/* Left side: decorative line + SVG typography */}
{/* Left */}
<div className="flex gap-6 lg:w-2/5">
<VerticalLine className="hidden h-[400px] shrink-0 md:flex" />
<div ref={leftRef}>
<ContactTypography className="h-auto w-full max-w-[280px] md:max-w-[320px] lg:max-w-[353px]" />
</div>
</div>

{/* Right side: contact info */}
<div ref={rightRef} className="flex-1 pt-4 lg:pt-12">
{/* Email row */}
{/* Right */}
<div ref={rightRef} className="flex-1 border border-bp-line px-6 py-2 lg:px-8 bp-glass">

{/* Email */}
<div className="border-t border-bp-line py-8">
<div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
<a
Expand All @@ -46,7 +53,7 @@ export default function ContactPage() {
</div>
</div>

{/* Location row */}
{/* Location */}
<div className="border-t border-bp-line py-8">
<div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
<a
Expand All @@ -64,6 +71,77 @@ export default function ContactPage() {
</div>
</div>
</div>

{/* Follow us */}
<div className="border-t border-bp-line py-8">
<div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
<span className="flex items-center gap-2.5 text-sm tracking-widest text-fg/60">
<NavIcon />
FOLLOW US
</span>
<ul className="flex items-center gap-6 text-right">
{SOCIAL_LINKS.map((link) => (
<li key={link.label}>
<a
href={link.href}
target="_blank"
rel="noopener noreferrer"
className="text-sm tracking-widest text-fg/40 transition-colors hover:text-accent"
>
{link.label}
</a>
</li>
))}
</ul>
</div>
</div>

{/* GitHub */}
<div className="border-t border-bp-line py-8">
<div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
<a
href="#"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2.5 text-sm tracking-widest transition-colors hover:text-accent"
>
<NavIcon />
GITHUB
</a>
<a
href="#"
target="_blank"
rel="noopener noreferrer"
className="shrink-0 border border-accent/40 px-5 py-2.5 text-xs tracking-widest text-accent transition-all duration-200 hover:border-accent hover:bg-accent/10"
>
VIEW REPO →
</a>
</div>
</div>

{/* Docs */}
<div className="border-t border-bp-line py-8">
<div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
<a
href="https://docs.arcarleton.ca"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2.5 text-sm tracking-widest transition-colors hover:text-accent"
>
<NavIcon />
DOCS
</a>
<a
href="https://docs.arcarleton.ca"
target="_blank"
rel="noopener noreferrer"
className="shrink-0 border border-accent/40 px-5 py-2.5 text-xs tracking-widest text-accent transition-all duration-200 hover:border-accent hover:bg-accent/10"
>
OPEN DOCS →
</a>
</div>
</div>

</div>
</div>
</section>
Expand Down
76 changes: 51 additions & 25 deletions apps/web/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;

--color-bg: #1a2f4a;
--color-fg: #e8edf4;
--color-muted: #8ba3c1;
--color-border: #2a4a6b;
--color-accent: #5ec4e8;

--color-bp-blue: #1a2f4a;
--color-bp-blue-light: #223d5a;
--color-bp-blue-dark: #132440;
--color-bp-cyan: #5ec4e8;
--color-bp-cyan-dim: #3a8aaa;
--color-bp-grid: rgba(94, 196, 232, 0.10);
--color-bp-grid-major: rgba(94, 196, 232, 0.18);
--color-bp-glow: rgba(94, 196, 232, 0.20);
--color-bp-line: rgba(94, 196, 232, 0.15);
--color-bp-muted: #8ba3c1;
--color-bg: #111111;
--color-fg: #f0f0f0;
--color-muted: #737373;
--color-border: #2e2e2e;
--color-accent: #d4d4d4;

--color-bp-blue: #111111;
--color-bp-blue-light: #1a1a1a;
--color-bp-blue-dark: #0a0a0a;
--color-bp-cyan: #d4d4d4;
--color-bp-cyan-dim: #a0a0a0;
--color-bp-grid: rgba(212, 212, 212, 0.10);
--color-bp-grid-major: rgba(212, 212, 212, 0.18);
--color-bp-glow: rgba(212, 212, 212, 0.20);
--color-bp-line: rgba(212, 212, 212, 0.22);
--color-bp-muted: #737373;
}

@layer base {
Expand Down Expand Up @@ -139,36 +139,52 @@
background: radial-gradient(
ellipse at center,
transparent 50%,
rgba(19, 36, 64, 0.4) 100%
rgba(10, 10, 10, 0.4) 100%
);
}

/* Frosted glass — lifts components above the blueprint grid.
Slight red tints create warmth and visual hierarchy against the grey grid.
bp-glass (cards): warm dark red — most visible, used on content surfaces.
bp-glass-strong (header/modal): deeper cooler red — dominant, recedes behind content. */
.bp-glass {
background-color: rgba(20, 14, 14, 0.74);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.bp-glass-strong {
background-color: rgba(12, 8, 8, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}

/* Blueprint glow effects */
.bp-glow {
box-shadow:
0 0 4px rgba(94, 196, 232, 0.15),
0 0 12px rgba(94, 196, 232, 0.08);
0 0 4px rgba(212, 212, 212, 0.15),
0 0 12px rgba(212, 212, 212, 0.08);
}

.bp-glow-hover:hover {
box-shadow:
0 0 6px rgba(94, 196, 232, 0.3),
0 0 20px rgba(94, 196, 232, 0.15);
0 0 6px rgba(212, 212, 212, 0.3),
0 0 20px rgba(212, 212, 212, 0.15);
}

.bp-border {
border-color: rgba(94, 196, 232, 0.15);
border-color: rgba(212, 212, 212, 0.15);
}

.bp-border-hover:hover {
border-color: rgba(94, 196, 232, 0.35);
border-color: rgba(212, 212, 212, 0.35);
}

/* Focus ring for accessibility */
.bp-focus:focus-visible {
outline: 1.5px solid var(--color-accent);
outline-offset: 2px;
box-shadow: 0 0 8px rgba(94, 196, 232, 0.3);
box-shadow: 0 0 8px rgba(212, 212, 212, 0.3);
}

/* SVG stroke draw animation base */
Expand All @@ -193,7 +209,7 @@
/* ── Background Boxes ripple animation ── */
@keyframes cell-ripple {
0% { background-color: transparent; }
30% { background-color: rgba(94, 196, 232, 0.40); }
30% { background-color: rgba(212, 212, 212, 0.40); }
100% { background-color: transparent; }
}

Expand All @@ -206,6 +222,16 @@
transition: transform 800ms;
}

@keyframes bp-scan {
0% { transform: translateY(0vh); opacity: 1; }
85% { transform: translateY(100vh); opacity: 1; }
100% { transform: translateY(100vh); opacity: 0; }
}

.bp-scanning {
animation: bp-scan 0.8s ease-in-out forwards;
}

.transition-overlay.covering {
transition-timing-function: ease-in;
}
Expand Down
99 changes: 99 additions & 0 deletions apps/web/app/governance/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
'use client';

import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import BlueprintGrid from '@/components/ui/BlueprintGrid';
import VerticalLine from '@/components/ui/VerticalLine';
import NavIcon from '@/components/ui/NavIcon';
import { useScrollReveal, useStaggerReveal } from '@/hooks/useScrollReveal';

const ROWS = [
{
id: 'constitution',
label: 'CONSTITUTION',
description: 'Club founding documents and bylaws.',
action: 'OPEN IN DRIVE →',
href: '#',
},
{
id: 'minutes',
label: 'MEETING MINUTES',
description: 'Most recent general meeting notes.',
action: 'OPEN NOTES →',
href: '#',
},
{
id: 'status',
label: 'CURRENT STATUS',
description: 'Live club status — almost running soon.',
action: 'PLACEHOLDER',
href: null,
},
] as const;

export default function GovernancePage() {
const headingRef = useScrollReveal<HTMLDivElement>({ y: 30 });
const rowsRef = useStaggerReveal<HTMLDivElement>('[data-row]', { stagger: 0.1 });

return (
<>
<Header />
<main>
<section className="relative flex min-h-screen items-start px-6 pt-28 md:px-10 lg:px-16">
<BlueprintGrid variant="hero" />
<div className="mx-auto w-full max-w-[1440px] py-16">

{/* Heading */}
<div className="flex gap-6 pb-16">
<VerticalLine className="hidden h-[200px] shrink-0 md:flex" />
<div ref={headingRef}>
<h1 className="text-5xl leading-tight md:text-7xl">GOVERNANCE</h1>
<p className="mt-4 text-sm leading-relaxed text-fg/50">
Club documents and governance records.
</p>
</div>
</div>

{/* Rows */}
<div ref={rowsRef} className="relative border border-bp-line px-6 lg:px-8 bp-glass">
{ROWS.map((row) => (
<div key={row.id} data-row className="border-t border-bp-line py-10">
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
{/* Label */}
<div className="flex items-center gap-2.5">
<NavIcon />
<span className="text-sm tracking-widest">{row.label}</span>
</div>

{/* Description + CTA */}
<div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:gap-12">
<p className="text-sm leading-relaxed text-fg/50 sm:max-w-[300px]">
{row.description}
</p>
{row.href ? (
<a
href={row.href}
target="_blank"
rel="noopener noreferrer"
className="shrink-0 border border-accent/40 px-5 py-2.5 text-xs tracking-widest text-accent transition-all duration-200 hover:border-accent hover:bg-accent/10"
>
{row.action}
</a>
) : (
<span className="shrink-0 border border-bp-line px-5 py-2.5 text-xs tracking-widest text-fg/20">
{row.action}
</span>
)}
</div>
</div>
</div>
))}
</div>

</div>
</section>
</main>
<Footer />
</>
);
}
Loading
Loading