diff --git a/apps/web/app/contact/page.tsx b/apps/web/app/contact/page.tsx index 24bc920..178e651 100644 --- a/apps/web/app/contact/page.tsx +++ b/apps/web/app/contact/page.tsx @@ -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({ y: 30 }); const rightRef = useScrollReveal({ y: 30, delay: 0.15 }); @@ -19,7 +25,7 @@ export default function ContactPage() {
- {/* Left side: decorative line + SVG typography */} + {/* Left */}
@@ -27,9 +33,10 @@ export default function ContactPage() {
- {/* Right side: contact info */} -
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index ad0088d..2c18e75 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -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 { @@ -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 */ @@ -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; } } @@ -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; } diff --git a/apps/web/app/governance/page.tsx b/apps/web/app/governance/page.tsx new file mode 100644 index 0000000..49f7f0d --- /dev/null +++ b/apps/web/app/governance/page.tsx @@ -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({ y: 30 }); + const rowsRef = useStaggerReveal('[data-row]', { stagger: 0.1 }); + + return ( + <> +
+
+
+ +
+ + {/* Heading */} +
+ +
+

GOVERNANCE

+

+ Club documents and governance records. +

+
+
+ + {/* Rows */} +
+ {ROWS.map((row) => ( +
+
+ {/* Label */} +
+ + {row.label} +
+ + {/* Description + CTA */} +
+

+ {row.description} +

+ {row.href ? ( + + {row.action} + + ) : ( + + {row.action} + + )} +
+
+
+ ))} +
+ +
+
+
+