-
+
+
404
Page Not Found
diff --git a/src/components/careers/ForHire.jsx b/src/components/careers/ForHire.jsx
index 5ba69bc..3b8353c 100644
--- a/src/components/careers/ForHire.jsx
+++ b/src/components/careers/ForHire.jsx
@@ -4,7 +4,7 @@ function ForHire() {
id="for-hire"
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
For Hire
diff --git a/src/components/careers/JobOpen.jsx b/src/components/careers/JobOpen.jsx
index b22aba5..8c381a5 100644
--- a/src/components/careers/JobOpen.jsx
+++ b/src/components/careers/JobOpen.jsx
@@ -4,7 +4,7 @@ function JobOpen() {
id="job-openings"
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
Job Openings
diff --git a/src/components/connections/Connections.jsx b/src/components/connections/Connections.jsx
index 6a2a197..51b6a19 100644
--- a/src/components/connections/Connections.jsx
+++ b/src/components/connections/Connections.jsx
@@ -4,7 +4,7 @@ function Connections() {
id="connections"
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
Connections
diff --git a/src/components/events/EventList.jsx b/src/components/events/EventList.jsx
index 49cdc3d..6cc9af1 100644
--- a/src/components/events/EventList.jsx
+++ b/src/components/events/EventList.jsx
@@ -18,7 +18,7 @@ const EventList = () => {
Michigan DevFest Past Events
@@ -49,7 +49,7 @@ const EventList = () => {
Explore Past Events
diff --git a/src/components/media/Media.jsx b/src/components/media/Media.jsx
index 9e55510..32aa852 100644
--- a/src/components/media/Media.jsx
+++ b/src/components/media/Media.jsx
@@ -4,7 +4,7 @@ function Media() {
id="media"
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
Media
diff --git a/src/components/speakers/SpeakersContent.jsx b/src/components/speakers/SpeakersContent.jsx
index 249f848..876cbf3 100644
--- a/src/components/speakers/SpeakersContent.jsx
+++ b/src/components/speakers/SpeakersContent.jsx
@@ -26,7 +26,9 @@ const SpeakersContent = ({ year, defaultExpanded }) => {
-
+
{year} Speakers
+
+ {FONT_OPTIONS.map((option) => (
+ - {
+ setFont(option.id)
+ setOpen(false)
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ setFont(option.id)
+ setOpen(false)
+ }
+ }}
+ className={`flex cursor-pointer items-center gap-2 px-3 py-2.5 text-sm transition-colors ${
+ font === option.id
+ ? 'bg-primary/10 text-primary'
+ : 'text-[var(--text-secondary)] hover:bg-[var(--card-hover-bg)] hover:text-[var(--text-primary)]'
+ }`}
+ style={{ fontFamily: option.family }}
+ >
+ {option.label}
+ {font === option.id && (
+
+ )}
+
+ ))}
+
+ )}
+
+ )
+}
diff --git a/src/components/ui/MapPinIcon.jsx b/src/components/ui/MapPinIcon.jsx
new file mode 100644
index 0000000..a0240ae
--- /dev/null
+++ b/src/components/ui/MapPinIcon.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+
+export default function MapPinIcon({ size = 14 }) {
+ return (
+
+ )
+}
+
+MapPinIcon.propTypes = {
+ size: PropTypes.number,
+}
diff --git a/src/components/ui/PlaceholderImage.jsx b/src/components/ui/PlaceholderImage.jsx
new file mode 100644
index 0000000..9cc2e1b
--- /dev/null
+++ b/src/components/ui/PlaceholderImage.jsx
@@ -0,0 +1,201 @@
+import PropTypes from 'prop-types'
+
+const presets = {
+ community: {
+ gradient: 'from-primary/20 via-indigo-500/10 to-emerald-500/10',
+ icon: (
+
+ ),
+ label: 'Community',
+ },
+ event: {
+ gradient: 'from-primary/20 via-rose-500/10 to-violet-500/10',
+ icon: (
+
+ ),
+ label: 'Event',
+ },
+ tech: {
+ gradient: 'from-indigo-500/20 via-primary/10 to-cyan-500/10',
+ icon: (
+
+ ),
+ label: 'Technology',
+ },
+ career: {
+ gradient: 'from-emerald-500/20 via-primary/10 to-teal-500/10',
+ icon: (
+
+ ),
+ label: 'Career',
+ },
+ mentorship: {
+ gradient: 'from-violet-500/20 via-primary/10 to-rose-500/10',
+ icon: (
+
+ ),
+ label: 'Mentorship',
+ },
+ workshop: {
+ gradient: 'from-amber-500/20 via-orange-500/10 to-primary/10',
+ icon: (
+
+ ),
+ label: 'Workshop',
+ },
+ hackathon: {
+ gradient: 'from-cyan-500/20 via-blue-500/10 to-indigo-500/10',
+ icon: (
+
+ ),
+ label: 'Hackathon',
+ },
+ impact: {
+ gradient: 'from-emerald-500/20 via-lime-500/10 to-primary/10',
+ icon: (
+
+ ),
+ label: 'Impact',
+ },
+}
+
+export default function PlaceholderImage({
+ preset = 'community',
+ aspectRatio = 'aspect-video',
+ className = '',
+}) {
+ const config = presets[preset] || presets.community
+ return (
+
+
+ {config.icon}
+
+ {config.label}
+
+
+
+ )
+}
+
+PlaceholderImage.propTypes = {
+ preset: PropTypes.oneOf([
+ 'community',
+ 'event',
+ 'tech',
+ 'career',
+ 'mentorship',
+ 'workshop',
+ 'hackathon',
+ 'impact',
+ ]),
+ aspectRatio: PropTypes.string,
+ className: PropTypes.string,
+}
diff --git a/src/components/ui/ScrollProgressButton.jsx b/src/components/ui/ScrollProgressButton.jsx
new file mode 100644
index 0000000..10fa14a
--- /dev/null
+++ b/src/components/ui/ScrollProgressButton.jsx
@@ -0,0 +1,99 @@
+import { useState, useEffect, useCallback } from 'react'
+import { FaArrowUp } from 'react-icons/fa6'
+
+export default function ScrollProgressButton() {
+ const [scrollPercent, setScrollPercent] = useState(0)
+ const [isVisible, setIsVisible] = useState(false)
+
+ const handleScroll = useCallback(() => {
+ const scrollTop = window.scrollY
+ const docHeight = document.documentElement.scrollHeight - window.innerHeight
+ const percent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0
+ setScrollPercent(Math.min(percent, 100))
+ setIsVisible(scrollTop > 300)
+ }, [])
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll, { passive: true })
+ return () => window.removeEventListener('scroll', handleScroll)
+ }, [handleScroll])
+
+ const scrollToTop = () => {
+ const startPosition = window.scrollY
+ const startTime = performance.now()
+ const duration = 1200
+
+ const easeOutQuart = (t) => 1 - Math.pow(1 - t, 4)
+
+ const animate = (currentTime) => {
+ const elapsed = currentTime - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ window.scrollTo(0, startPosition * (1 - easeOutQuart(progress)))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+
+ requestAnimationFrame(animate)
+ }
+
+ // SVG circle math: radius 20, circumference = 2 * PI * 20
+ const circumference = 2 * Math.PI * 20
+ const strokeDashoffset = circumference - (scrollPercent / 100) * circumference
+
+ return (
+ <>
+ {/* Top progress bar */}
+
+
+ {/* Floating button with circular progress */}
+
+
+ )
+}
diff --git a/src/components/ui/ThemeSwitcher.jsx b/src/components/ui/ThemeSwitcher.jsx
new file mode 100644
index 0000000..008b029
--- /dev/null
+++ b/src/components/ui/ThemeSwitcher.jsx
@@ -0,0 +1,61 @@
+import { useTheme } from '@/components/ThemeProvider'
+
+export default function ThemeSwitcher() {
+ const { mode, toggle } = useTheme()
+
+ return (
+
+ )
+}
diff --git a/src/index.css b/src/index.css
index 3dab9a1..912e1b4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,49 @@
+/* Self-hosted fonts */
+@font-face {
+ font-family: 'Inter';
+ src: url('./assets/fonts/Inter-VariableFont.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Montserrat';
+ src: url('./assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Montserrat';
+ src: url('./assets/fonts/Montserrat-Italic-VariableFont_wght.woff2')
+ format('woff2');
+ font-weight: 100 900;
+ font-style: italic;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Orbitron';
+ src: url('./assets/fonts/orbitron-variablefont_wght-webfont.woff2')
+ format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'BioRhyme';
+ src: url('./assets/fonts/BioRhyme-ExtraBold.woff2') format('woff2');
+ font-weight: 800;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Asimovian';
+ src: url('./assets/fonts/asimovian-regular-webfont.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -39,6 +85,124 @@
/* Example: .custom-button { ... } */
}
+/* Infinite Marquee — seamless loop */
+@keyframes marquee-left {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+ to {
+ transform: translate3d(-50%, 0, 0);
+ }
+}
+@keyframes marquee-right {
+ from {
+ transform: translate3d(-50%, 0, 0);
+ }
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+/* Hero animations */
+@keyframes hero-float {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-12px);
+ }
+}
+@keyframes hero-spin-slow {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+@keyframes hero-orb {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(20px, -15px) scale(1.05);
+ }
+ 66% {
+ transform: translate(-15px, 10px) scale(0.95);
+ }
+}
+.hero-float {
+ animation: hero-float 4s ease-in-out infinite;
+}
+.hero-spin-slow {
+ animation: hero-spin-slow 60s linear infinite;
+}
+.hero-spin-reverse {
+ animation: hero-spin-slow 45s linear infinite reverse;
+}
+.hero-orb-1 {
+ animation: hero-orb 12s ease-in-out infinite;
+}
+.hero-orb-2 {
+ animation: hero-orb 15s ease-in-out infinite 2s;
+}
+.hero-orb-3 {
+ animation: hero-orb 18s ease-in-out infinite 4s;
+}
+/* Grid pattern overlay for hero sections */
+.hero-grid-pattern {
+ background-image: linear-gradient(
+ rgba(212, 160, 23, 0.03) 1px,
+ transparent 1px
+ ),
+ linear-gradient(90deg, rgba(212, 160, 23, 0.03) 1px, transparent 1px);
+ background-size: 64px 64px;
+}
+
+.marquee-left {
+ animation: marquee-left 40s linear infinite;
+ will-change: transform;
+}
+.marquee-right {
+ animation: marquee-right 40s linear infinite;
+ will-change: transform;
+}
+@media (prefers-reduced-motion: reduce) {
+ .marquee-left,
+ .marquee-right,
+ .hero-float,
+ .hero-spin-slow,
+ .hero-spin-reverse,
+ .hero-orb-1,
+ .hero-orb-2,
+ .hero-orb-3 {
+ animation: none;
+ }
+}
+.marquee-track:hover .marquee-left,
+.marquee-track:hover .marquee-right {
+ animation-play-state: paused;
+}
+/* Marquee logo cards */
+.marquee-logo-wrap {
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.marquee-logo-wrap:hover {
+ background: rgba(255, 255, 255, 0.12);
+ box-shadow: 0 0 24px rgba(212, 160, 23, 0.18);
+ transform: scale(1.06);
+}
+.marquee-logo {
+ transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ filter: grayscale(80%) brightness(0.85);
+}
+.marquee-logo-wrap:hover .marquee-logo {
+ filter: grayscale(0%) brightness(1.1)
+ drop-shadow(0 0 8px rgba(212, 160, 23, 0.3));
+}
+
/* Yoda 404 Animations */
@keyframes float {
0%,
@@ -113,13 +277,25 @@ body {
}
:root {
- font-family: Montserrat, 'Open Sans', Helvetica, Arial, sans-serif;
+ /* Theme — dark (default) */
+ --surface: #0a0a0a;
+ --surface-card: #141414;
+ --surface-elevated: #1a1a1a;
+ --surface-footer: #050505;
+ --border: #222;
+ --border-light: #333;
+ --text-primary: #ffffff;
+ --text-secondary: #d1d5db;
+ --text-muted: #6b7280;
+ --marquee-fade: #0a0a0a;
+ --card-hover-bg: rgba(255, 255, 255, 0.06);
+
+ --site-font: Montserrat, 'Open Sans', Helvetica, Arial, sans-serif;
+ --heading-font: BioRhyme, serif;
+ font-family: var(--site-font);
line-height: 1.5;
font-weight: 500;
- /* color: rgba(255, 255, 255, 0.87); */
- /* background-color: #242424; */
-
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@@ -127,45 +303,114 @@ body {
-webkit-text-size-adjust: 100%;
}
-body {
- margin: 0;
- min-width: 320px;
- min-height: 100vh;
+/* Light mode overrides */
+.light {
+ --surface: #fafafa;
+ --surface-card: #ffffff;
+ --surface-elevated: #f5f5f5;
+ --surface-footer: #f0f0f0;
+ --border: #e5e5e5;
+ --border-light: #d4d4d4;
+ --text-primary: #111827;
+ --text-secondary: #374151;
+ --text-muted: #6b7280;
+ --marquee-fade: #fafafa;
+ --card-hover-bg: rgba(0, 0, 0, 0.03);
}
-/* Orbitron Variable Font */
-@font-face {
- font-family: 'Orbitron';
- src: url('./assets/fonts/orbitron-variablefont_wght-webfont.woff2')
- format('woff2');
- font-weight: 100 900;
- font-style: normal;
- font-display: swap;
+/* Light mode — theme corrections for hardcoded dark classes */
+.light .text-white {
+ color: var(--text-primary);
}
-/* Asimovian Font */
-@font-face {
- font-family: 'Asimovian';
- src: url('./assets/fonts/asimovian-regular-webfont.woff2') format('woff2');
- font-weight: 400;
- font-style: normal;
- font-display: swap;
+/* Light mode — accessible primary (gold) text contrast */
+/* #efb403 on white = ~1.7:1 ✗ → #8B5E00 on white = ~5.2:1 ✓ WCAG AA */
+.light .text-primary {
+ color: #8b5e00;
+}
+.light .text-primary-300 {
+ color: #7a5200;
+}
+.light .text-primary-400 {
+ color: #8b5e00;
+}
+.light .text-primary-500 {
+ color: #8b5e00;
+}
+.light .hover\:text-primary:hover {
+ color: #6d4900;
+}
+.light .hover\:text-primary-400:hover {
+ color: #7a5200;
+}
+/* Primary borders — darken for visibility on light surfaces */
+.light .border-primary {
+ border-color: #a87300;
+}
+.light .border-primary\/40 {
+ border-color: rgba(139, 94, 0, 0.4);
+}
+.light .hover\:border-primary\/40:hover {
+ border-color: rgba(139, 94, 0, 0.4);
}
-/* Montserrat Variable Font */
-@font-face {
- font-family: 'Montserrat';
- src: url('./assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
- font-weight: 100 900;
- font-style: normal;
- font-display: swap;
+.light .text-gray-300 {
+ color: #374151;
+}
+.light .text-gray-400 {
+ color: #4b5563;
+}
+.light .text-gray-500 {
+ color: #6b7280;
+}
+.light .text-gray-600 {
+ color: #9ca3af;
+}
+.light .text-gray-700 {
+ color: #9ca3af;
+}
+.light .bg-white\/5,
+.light .bg-white\/\[0\.01\],
+.light .bg-white\/\[0\.02\],
+.light .bg-white\/\[0\.04\],
+.light .bg-white\/\[0\.06\],
+.light .bg-white\/\[0\.12\] {
+ background-color: rgba(0, 0, 0, 0.03);
+}
+.light .bg-\[\#0a0a0a\] {
+ background-color: var(--surface);
+}
+.light .bg-\[\#050505\] {
+ background-color: var(--surface-footer);
+}
+.light .bg-\[\#141414\] {
+ background-color: var(--surface-card);
+}
+.light .bg-\[\#1a1a1a\] {
+ background-color: var(--surface-elevated);
+}
+.light .border-\[\#222\] {
+ border-color: var(--border);
+}
+.light .stroke-\[\#222\],
+.light .stroke-\[\#1a1a1a\] {
+ stroke: #e5e5e5;
+}
+.light .marquee-logo {
+ filter: grayscale(30%) brightness(1);
+}
+.light .marquee-logo-wrap {
+ background: rgba(0, 0, 0, 0.04);
+}
+.light .marquee-logo-wrap:hover {
+ background: rgba(0, 0, 0, 0.08);
+}
+.light .marquee-logo-wrap:hover .marquee-logo {
+ filter: grayscale(0%) brightness(1);
}
-/* BioRhyme Font */
-@font-face {
- font-family: 'BioRhyme';
- src: url('./assets/fonts/BioRhyme-ExtraBold.woff2') format('woff2');
- font-weight: 800;
- font-style: normal;
- font-display: swap;
+body {
+ margin: 0;
+ min-width: 320px;
+ min-height: 100vh;
}
diff --git a/src/layouts/CommunitySection.jsx b/src/layouts/CommunitySection.jsx
index b2d5b81..2b2b999 100644
--- a/src/layouts/CommunitySection.jsx
+++ b/src/layouts/CommunitySection.jsx
@@ -10,7 +10,7 @@ const CommunitySection = ({ year = new Date().getFullYear() }) => {
>
-
+
{year ? `${year} ` : ''}Community
![]()
{
className="flex flex-wrap items-center justify-center bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Dev Team
![]()
-
+
Facilitators
![]()
{
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Job Board
![]()
-
+
February 28, 2026
diff --git a/src/layouts/LocationSection.jsx b/src/layouts/LocationSection.jsx
index 80cbe91..72e7150 100644
--- a/src/layouts/LocationSection.jsx
+++ b/src/layouts/LocationSection.jsx
@@ -4,7 +4,7 @@ function LocationSection() {
return (
@@ -16,7 +16,7 @@ function LocationSection() {
When & Where
diff --git a/src/layouts/MembersSection.jsx b/src/layouts/MembersSection.jsx
index 033cd45..6610dfc 100644
--- a/src/layouts/MembersSection.jsx
+++ b/src/layouts/MembersSection.jsx
@@ -10,7 +10,7 @@ const MembersSection = ({ year }) => {
className="bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Membership
![]()
{
{/* Left column — 2/3 width on desktop: Why Join + bullet points */}
-
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+ 
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+ 
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
For Hire
diff --git a/src/components/careers/JobOpen.jsx b/src/components/careers/JobOpen.jsx index b22aba5..8c381a5 100644 --- a/src/components/careers/JobOpen.jsx +++ b/src/components/careers/JobOpen.jsx @@ -4,7 +4,7 @@ function JobOpen() { id="job-openings" className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16" > -
+
Job Openings
diff --git a/src/components/connections/Connections.jsx b/src/components/connections/Connections.jsx
index 6a2a197..51b6a19 100644
--- a/src/components/connections/Connections.jsx
+++ b/src/components/connections/Connections.jsx
@@ -4,7 +4,7 @@ function Connections() {
id="connections"
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
Connections
diff --git a/src/components/events/EventList.jsx b/src/components/events/EventList.jsx
index 49cdc3d..6cc9af1 100644
--- a/src/components/events/EventList.jsx
+++ b/src/components/events/EventList.jsx
@@ -18,7 +18,7 @@ const EventList = () => {
Michigan DevFest Past Events
@@ -49,7 +49,7 @@ const EventList = () => {
Explore Past Events
diff --git a/src/components/media/Media.jsx b/src/components/media/Media.jsx
index 9e55510..32aa852 100644
--- a/src/components/media/Media.jsx
+++ b/src/components/media/Media.jsx
@@ -4,7 +4,7 @@ function Media() {
id="media"
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
Media
diff --git a/src/components/speakers/SpeakersContent.jsx b/src/components/speakers/SpeakersContent.jsx
index 249f848..876cbf3 100644
--- a/src/components/speakers/SpeakersContent.jsx
+++ b/src/components/speakers/SpeakersContent.jsx
@@ -26,7 +26,9 @@ const SpeakersContent = ({ year, defaultExpanded }) => {
-
+
{year} Speakers
+
+ {FONT_OPTIONS.map((option) => (
+ - {
+ setFont(option.id)
+ setOpen(false)
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ setFont(option.id)
+ setOpen(false)
+ }
+ }}
+ className={`flex cursor-pointer items-center gap-2 px-3 py-2.5 text-sm transition-colors ${
+ font === option.id
+ ? 'bg-primary/10 text-primary'
+ : 'text-[var(--text-secondary)] hover:bg-[var(--card-hover-bg)] hover:text-[var(--text-primary)]'
+ }`}
+ style={{ fontFamily: option.family }}
+ >
+ {option.label}
+ {font === option.id && (
+
+ )}
+
+ ))}
+
+ )}
+
+ )
+}
diff --git a/src/components/ui/MapPinIcon.jsx b/src/components/ui/MapPinIcon.jsx
new file mode 100644
index 0000000..a0240ae
--- /dev/null
+++ b/src/components/ui/MapPinIcon.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+
+export default function MapPinIcon({ size = 14 }) {
+ return (
+
+ )
+}
+
+MapPinIcon.propTypes = {
+ size: PropTypes.number,
+}
diff --git a/src/components/ui/PlaceholderImage.jsx b/src/components/ui/PlaceholderImage.jsx
new file mode 100644
index 0000000..9cc2e1b
--- /dev/null
+++ b/src/components/ui/PlaceholderImage.jsx
@@ -0,0 +1,201 @@
+import PropTypes from 'prop-types'
+
+const presets = {
+ community: {
+ gradient: 'from-primary/20 via-indigo-500/10 to-emerald-500/10',
+ icon: (
+
+ ),
+ label: 'Community',
+ },
+ event: {
+ gradient: 'from-primary/20 via-rose-500/10 to-violet-500/10',
+ icon: (
+
+ ),
+ label: 'Event',
+ },
+ tech: {
+ gradient: 'from-indigo-500/20 via-primary/10 to-cyan-500/10',
+ icon: (
+
+ ),
+ label: 'Technology',
+ },
+ career: {
+ gradient: 'from-emerald-500/20 via-primary/10 to-teal-500/10',
+ icon: (
+
+ ),
+ label: 'Career',
+ },
+ mentorship: {
+ gradient: 'from-violet-500/20 via-primary/10 to-rose-500/10',
+ icon: (
+
+ ),
+ label: 'Mentorship',
+ },
+ workshop: {
+ gradient: 'from-amber-500/20 via-orange-500/10 to-primary/10',
+ icon: (
+
+ ),
+ label: 'Workshop',
+ },
+ hackathon: {
+ gradient: 'from-cyan-500/20 via-blue-500/10 to-indigo-500/10',
+ icon: (
+
+ ),
+ label: 'Hackathon',
+ },
+ impact: {
+ gradient: 'from-emerald-500/20 via-lime-500/10 to-primary/10',
+ icon: (
+
+ ),
+ label: 'Impact',
+ },
+}
+
+export default function PlaceholderImage({
+ preset = 'community',
+ aspectRatio = 'aspect-video',
+ className = '',
+}) {
+ const config = presets[preset] || presets.community
+ return (
+
+
+ {config.icon}
+
+ {config.label}
+
+
+
+ )
+}
+
+PlaceholderImage.propTypes = {
+ preset: PropTypes.oneOf([
+ 'community',
+ 'event',
+ 'tech',
+ 'career',
+ 'mentorship',
+ 'workshop',
+ 'hackathon',
+ 'impact',
+ ]),
+ aspectRatio: PropTypes.string,
+ className: PropTypes.string,
+}
diff --git a/src/components/ui/ScrollProgressButton.jsx b/src/components/ui/ScrollProgressButton.jsx
new file mode 100644
index 0000000..10fa14a
--- /dev/null
+++ b/src/components/ui/ScrollProgressButton.jsx
@@ -0,0 +1,99 @@
+import { useState, useEffect, useCallback } from 'react'
+import { FaArrowUp } from 'react-icons/fa6'
+
+export default function ScrollProgressButton() {
+ const [scrollPercent, setScrollPercent] = useState(0)
+ const [isVisible, setIsVisible] = useState(false)
+
+ const handleScroll = useCallback(() => {
+ const scrollTop = window.scrollY
+ const docHeight = document.documentElement.scrollHeight - window.innerHeight
+ const percent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0
+ setScrollPercent(Math.min(percent, 100))
+ setIsVisible(scrollTop > 300)
+ }, [])
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll, { passive: true })
+ return () => window.removeEventListener('scroll', handleScroll)
+ }, [handleScroll])
+
+ const scrollToTop = () => {
+ const startPosition = window.scrollY
+ const startTime = performance.now()
+ const duration = 1200
+
+ const easeOutQuart = (t) => 1 - Math.pow(1 - t, 4)
+
+ const animate = (currentTime) => {
+ const elapsed = currentTime - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ window.scrollTo(0, startPosition * (1 - easeOutQuart(progress)))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+
+ requestAnimationFrame(animate)
+ }
+
+ // SVG circle math: radius 20, circumference = 2 * PI * 20
+ const circumference = 2 * Math.PI * 20
+ const strokeDashoffset = circumference - (scrollPercent / 100) * circumference
+
+ return (
+ <>
+ {/* Top progress bar */}
+
+
+ {/* Floating button with circular progress */}
+
+
+ )
+}
diff --git a/src/components/ui/ThemeSwitcher.jsx b/src/components/ui/ThemeSwitcher.jsx
new file mode 100644
index 0000000..008b029
--- /dev/null
+++ b/src/components/ui/ThemeSwitcher.jsx
@@ -0,0 +1,61 @@
+import { useTheme } from '@/components/ThemeProvider'
+
+export default function ThemeSwitcher() {
+ const { mode, toggle } = useTheme()
+
+ return (
+
+ )
+}
diff --git a/src/index.css b/src/index.css
index 3dab9a1..912e1b4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,49 @@
+/* Self-hosted fonts */
+@font-face {
+ font-family: 'Inter';
+ src: url('./assets/fonts/Inter-VariableFont.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Montserrat';
+ src: url('./assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Montserrat';
+ src: url('./assets/fonts/Montserrat-Italic-VariableFont_wght.woff2')
+ format('woff2');
+ font-weight: 100 900;
+ font-style: italic;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Orbitron';
+ src: url('./assets/fonts/orbitron-variablefont_wght-webfont.woff2')
+ format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'BioRhyme';
+ src: url('./assets/fonts/BioRhyme-ExtraBold.woff2') format('woff2');
+ font-weight: 800;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Asimovian';
+ src: url('./assets/fonts/asimovian-regular-webfont.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -39,6 +85,124 @@
/* Example: .custom-button { ... } */
}
+/* Infinite Marquee — seamless loop */
+@keyframes marquee-left {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+ to {
+ transform: translate3d(-50%, 0, 0);
+ }
+}
+@keyframes marquee-right {
+ from {
+ transform: translate3d(-50%, 0, 0);
+ }
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+/* Hero animations */
+@keyframes hero-float {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-12px);
+ }
+}
+@keyframes hero-spin-slow {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+@keyframes hero-orb {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(20px, -15px) scale(1.05);
+ }
+ 66% {
+ transform: translate(-15px, 10px) scale(0.95);
+ }
+}
+.hero-float {
+ animation: hero-float 4s ease-in-out infinite;
+}
+.hero-spin-slow {
+ animation: hero-spin-slow 60s linear infinite;
+}
+.hero-spin-reverse {
+ animation: hero-spin-slow 45s linear infinite reverse;
+}
+.hero-orb-1 {
+ animation: hero-orb 12s ease-in-out infinite;
+}
+.hero-orb-2 {
+ animation: hero-orb 15s ease-in-out infinite 2s;
+}
+.hero-orb-3 {
+ animation: hero-orb 18s ease-in-out infinite 4s;
+}
+/* Grid pattern overlay for hero sections */
+.hero-grid-pattern {
+ background-image: linear-gradient(
+ rgba(212, 160, 23, 0.03) 1px,
+ transparent 1px
+ ),
+ linear-gradient(90deg, rgba(212, 160, 23, 0.03) 1px, transparent 1px);
+ background-size: 64px 64px;
+}
+
+.marquee-left {
+ animation: marquee-left 40s linear infinite;
+ will-change: transform;
+}
+.marquee-right {
+ animation: marquee-right 40s linear infinite;
+ will-change: transform;
+}
+@media (prefers-reduced-motion: reduce) {
+ .marquee-left,
+ .marquee-right,
+ .hero-float,
+ .hero-spin-slow,
+ .hero-spin-reverse,
+ .hero-orb-1,
+ .hero-orb-2,
+ .hero-orb-3 {
+ animation: none;
+ }
+}
+.marquee-track:hover .marquee-left,
+.marquee-track:hover .marquee-right {
+ animation-play-state: paused;
+}
+/* Marquee logo cards */
+.marquee-logo-wrap {
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.marquee-logo-wrap:hover {
+ background: rgba(255, 255, 255, 0.12);
+ box-shadow: 0 0 24px rgba(212, 160, 23, 0.18);
+ transform: scale(1.06);
+}
+.marquee-logo {
+ transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ filter: grayscale(80%) brightness(0.85);
+}
+.marquee-logo-wrap:hover .marquee-logo {
+ filter: grayscale(0%) brightness(1.1)
+ drop-shadow(0 0 8px rgba(212, 160, 23, 0.3));
+}
+
/* Yoda 404 Animations */
@keyframes float {
0%,
@@ -113,13 +277,25 @@ body {
}
:root {
- font-family: Montserrat, 'Open Sans', Helvetica, Arial, sans-serif;
+ /* Theme — dark (default) */
+ --surface: #0a0a0a;
+ --surface-card: #141414;
+ --surface-elevated: #1a1a1a;
+ --surface-footer: #050505;
+ --border: #222;
+ --border-light: #333;
+ --text-primary: #ffffff;
+ --text-secondary: #d1d5db;
+ --text-muted: #6b7280;
+ --marquee-fade: #0a0a0a;
+ --card-hover-bg: rgba(255, 255, 255, 0.06);
+
+ --site-font: Montserrat, 'Open Sans', Helvetica, Arial, sans-serif;
+ --heading-font: BioRhyme, serif;
+ font-family: var(--site-font);
line-height: 1.5;
font-weight: 500;
- /* color: rgba(255, 255, 255, 0.87); */
- /* background-color: #242424; */
-
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@@ -127,45 +303,114 @@ body {
-webkit-text-size-adjust: 100%;
}
-body {
- margin: 0;
- min-width: 320px;
- min-height: 100vh;
+/* Light mode overrides */
+.light {
+ --surface: #fafafa;
+ --surface-card: #ffffff;
+ --surface-elevated: #f5f5f5;
+ --surface-footer: #f0f0f0;
+ --border: #e5e5e5;
+ --border-light: #d4d4d4;
+ --text-primary: #111827;
+ --text-secondary: #374151;
+ --text-muted: #6b7280;
+ --marquee-fade: #fafafa;
+ --card-hover-bg: rgba(0, 0, 0, 0.03);
}
-/* Orbitron Variable Font */
-@font-face {
- font-family: 'Orbitron';
- src: url('./assets/fonts/orbitron-variablefont_wght-webfont.woff2')
- format('woff2');
- font-weight: 100 900;
- font-style: normal;
- font-display: swap;
+/* Light mode — theme corrections for hardcoded dark classes */
+.light .text-white {
+ color: var(--text-primary);
}
-/* Asimovian Font */
-@font-face {
- font-family: 'Asimovian';
- src: url('./assets/fonts/asimovian-regular-webfont.woff2') format('woff2');
- font-weight: 400;
- font-style: normal;
- font-display: swap;
+/* Light mode — accessible primary (gold) text contrast */
+/* #efb403 on white = ~1.7:1 ✗ → #8B5E00 on white = ~5.2:1 ✓ WCAG AA */
+.light .text-primary {
+ color: #8b5e00;
+}
+.light .text-primary-300 {
+ color: #7a5200;
+}
+.light .text-primary-400 {
+ color: #8b5e00;
+}
+.light .text-primary-500 {
+ color: #8b5e00;
+}
+.light .hover\:text-primary:hover {
+ color: #6d4900;
+}
+.light .hover\:text-primary-400:hover {
+ color: #7a5200;
+}
+/* Primary borders — darken for visibility on light surfaces */
+.light .border-primary {
+ border-color: #a87300;
+}
+.light .border-primary\/40 {
+ border-color: rgba(139, 94, 0, 0.4);
+}
+.light .hover\:border-primary\/40:hover {
+ border-color: rgba(139, 94, 0, 0.4);
}
-/* Montserrat Variable Font */
-@font-face {
- font-family: 'Montserrat';
- src: url('./assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
- font-weight: 100 900;
- font-style: normal;
- font-display: swap;
+.light .text-gray-300 {
+ color: #374151;
+}
+.light .text-gray-400 {
+ color: #4b5563;
+}
+.light .text-gray-500 {
+ color: #6b7280;
+}
+.light .text-gray-600 {
+ color: #9ca3af;
+}
+.light .text-gray-700 {
+ color: #9ca3af;
+}
+.light .bg-white\/5,
+.light .bg-white\/\[0\.01\],
+.light .bg-white\/\[0\.02\],
+.light .bg-white\/\[0\.04\],
+.light .bg-white\/\[0\.06\],
+.light .bg-white\/\[0\.12\] {
+ background-color: rgba(0, 0, 0, 0.03);
+}
+.light .bg-\[\#0a0a0a\] {
+ background-color: var(--surface);
+}
+.light .bg-\[\#050505\] {
+ background-color: var(--surface-footer);
+}
+.light .bg-\[\#141414\] {
+ background-color: var(--surface-card);
+}
+.light .bg-\[\#1a1a1a\] {
+ background-color: var(--surface-elevated);
+}
+.light .border-\[\#222\] {
+ border-color: var(--border);
+}
+.light .stroke-\[\#222\],
+.light .stroke-\[\#1a1a1a\] {
+ stroke: #e5e5e5;
+}
+.light .marquee-logo {
+ filter: grayscale(30%) brightness(1);
+}
+.light .marquee-logo-wrap {
+ background: rgba(0, 0, 0, 0.04);
+}
+.light .marquee-logo-wrap:hover {
+ background: rgba(0, 0, 0, 0.08);
+}
+.light .marquee-logo-wrap:hover .marquee-logo {
+ filter: grayscale(0%) brightness(1);
}
-/* BioRhyme Font */
-@font-face {
- font-family: 'BioRhyme';
- src: url('./assets/fonts/BioRhyme-ExtraBold.woff2') format('woff2');
- font-weight: 800;
- font-style: normal;
- font-display: swap;
+body {
+ margin: 0;
+ min-width: 320px;
+ min-height: 100vh;
}
diff --git a/src/layouts/CommunitySection.jsx b/src/layouts/CommunitySection.jsx
index b2d5b81..2b2b999 100644
--- a/src/layouts/CommunitySection.jsx
+++ b/src/layouts/CommunitySection.jsx
@@ -10,7 +10,7 @@ const CommunitySection = ({ year = new Date().getFullYear() }) => {
>
-
+
{year ? `${year} ` : ''}Community
![]()
{
className="flex flex-wrap items-center justify-center bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Dev Team
![]()
-
+
Facilitators
![]()
{
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Job Board
![]()
-
+
February 28, 2026
diff --git a/src/layouts/LocationSection.jsx b/src/layouts/LocationSection.jsx
index 80cbe91..72e7150 100644
--- a/src/layouts/LocationSection.jsx
+++ b/src/layouts/LocationSection.jsx
@@ -4,7 +4,7 @@ function LocationSection() {
return (
@@ -16,7 +16,7 @@ function LocationSection() {
When & Where
diff --git a/src/layouts/MembersSection.jsx b/src/layouts/MembersSection.jsx
index 033cd45..6610dfc 100644
--- a/src/layouts/MembersSection.jsx
+++ b/src/layouts/MembersSection.jsx
@@ -10,7 +10,7 @@ const MembersSection = ({ year }) => {
className="bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Membership
![]()
{
{/* Left column — 2/3 width on desktop: Why Join + bullet points */}
-
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
Connections
diff --git a/src/components/events/EventList.jsx b/src/components/events/EventList.jsx index 49cdc3d..6cc9af1 100644 --- a/src/components/events/EventList.jsx +++ b/src/components/events/EventList.jsx @@ -18,7 +18,7 @@ const EventList = () => {Michigan DevFest Past Events
@@ -49,7 +49,7 @@ const EventList = () => {Explore Past Events
diff --git a/src/components/media/Media.jsx b/src/components/media/Media.jsx index 9e55510..32aa852 100644 --- a/src/components/media/Media.jsx +++ b/src/components/media/Media.jsx @@ -4,7 +4,7 @@ function Media() { id="media" className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16" > -
+
Media
diff --git a/src/components/speakers/SpeakersContent.jsx b/src/components/speakers/SpeakersContent.jsx
index 249f848..876cbf3 100644
--- a/src/components/speakers/SpeakersContent.jsx
+++ b/src/components/speakers/SpeakersContent.jsx
@@ -26,7 +26,9 @@ const SpeakersContent = ({ year, defaultExpanded }) => {
-
+
{year} Speakers
+
+ {FONT_OPTIONS.map((option) => (
+ - {
+ setFont(option.id)
+ setOpen(false)
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ setFont(option.id)
+ setOpen(false)
+ }
+ }}
+ className={`flex cursor-pointer items-center gap-2 px-3 py-2.5 text-sm transition-colors ${
+ font === option.id
+ ? 'bg-primary/10 text-primary'
+ : 'text-[var(--text-secondary)] hover:bg-[var(--card-hover-bg)] hover:text-[var(--text-primary)]'
+ }`}
+ style={{ fontFamily: option.family }}
+ >
+ {option.label}
+ {font === option.id && (
+
+ )}
+
+ ))}
+
+ )}
+
+ )
+}
diff --git a/src/components/ui/MapPinIcon.jsx b/src/components/ui/MapPinIcon.jsx
new file mode 100644
index 0000000..a0240ae
--- /dev/null
+++ b/src/components/ui/MapPinIcon.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+
+export default function MapPinIcon({ size = 14 }) {
+ return (
+
+ )
+}
+
+MapPinIcon.propTypes = {
+ size: PropTypes.number,
+}
diff --git a/src/components/ui/PlaceholderImage.jsx b/src/components/ui/PlaceholderImage.jsx
new file mode 100644
index 0000000..9cc2e1b
--- /dev/null
+++ b/src/components/ui/PlaceholderImage.jsx
@@ -0,0 +1,201 @@
+import PropTypes from 'prop-types'
+
+const presets = {
+ community: {
+ gradient: 'from-primary/20 via-indigo-500/10 to-emerald-500/10',
+ icon: (
+
+ ),
+ label: 'Community',
+ },
+ event: {
+ gradient: 'from-primary/20 via-rose-500/10 to-violet-500/10',
+ icon: (
+
+ ),
+ label: 'Event',
+ },
+ tech: {
+ gradient: 'from-indigo-500/20 via-primary/10 to-cyan-500/10',
+ icon: (
+
+ ),
+ label: 'Technology',
+ },
+ career: {
+ gradient: 'from-emerald-500/20 via-primary/10 to-teal-500/10',
+ icon: (
+
+ ),
+ label: 'Career',
+ },
+ mentorship: {
+ gradient: 'from-violet-500/20 via-primary/10 to-rose-500/10',
+ icon: (
+
+ ),
+ label: 'Mentorship',
+ },
+ workshop: {
+ gradient: 'from-amber-500/20 via-orange-500/10 to-primary/10',
+ icon: (
+
+ ),
+ label: 'Workshop',
+ },
+ hackathon: {
+ gradient: 'from-cyan-500/20 via-blue-500/10 to-indigo-500/10',
+ icon: (
+
+ ),
+ label: 'Hackathon',
+ },
+ impact: {
+ gradient: 'from-emerald-500/20 via-lime-500/10 to-primary/10',
+ icon: (
+
+ ),
+ label: 'Impact',
+ },
+}
+
+export default function PlaceholderImage({
+ preset = 'community',
+ aspectRatio = 'aspect-video',
+ className = '',
+}) {
+ const config = presets[preset] || presets.community
+ return (
+
+
+ {config.icon}
+
+ {config.label}
+
+
+
+ )
+}
+
+PlaceholderImage.propTypes = {
+ preset: PropTypes.oneOf([
+ 'community',
+ 'event',
+ 'tech',
+ 'career',
+ 'mentorship',
+ 'workshop',
+ 'hackathon',
+ 'impact',
+ ]),
+ aspectRatio: PropTypes.string,
+ className: PropTypes.string,
+}
diff --git a/src/components/ui/ScrollProgressButton.jsx b/src/components/ui/ScrollProgressButton.jsx
new file mode 100644
index 0000000..10fa14a
--- /dev/null
+++ b/src/components/ui/ScrollProgressButton.jsx
@@ -0,0 +1,99 @@
+import { useState, useEffect, useCallback } from 'react'
+import { FaArrowUp } from 'react-icons/fa6'
+
+export default function ScrollProgressButton() {
+ const [scrollPercent, setScrollPercent] = useState(0)
+ const [isVisible, setIsVisible] = useState(false)
+
+ const handleScroll = useCallback(() => {
+ const scrollTop = window.scrollY
+ const docHeight = document.documentElement.scrollHeight - window.innerHeight
+ const percent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0
+ setScrollPercent(Math.min(percent, 100))
+ setIsVisible(scrollTop > 300)
+ }, [])
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll, { passive: true })
+ return () => window.removeEventListener('scroll', handleScroll)
+ }, [handleScroll])
+
+ const scrollToTop = () => {
+ const startPosition = window.scrollY
+ const startTime = performance.now()
+ const duration = 1200
+
+ const easeOutQuart = (t) => 1 - Math.pow(1 - t, 4)
+
+ const animate = (currentTime) => {
+ const elapsed = currentTime - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ window.scrollTo(0, startPosition * (1 - easeOutQuart(progress)))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+
+ requestAnimationFrame(animate)
+ }
+
+ // SVG circle math: radius 20, circumference = 2 * PI * 20
+ const circumference = 2 * Math.PI * 20
+ const strokeDashoffset = circumference - (scrollPercent / 100) * circumference
+
+ return (
+ <>
+ {/* Top progress bar */}
+
+
+ {/* Floating button with circular progress */}
+
+
+ )
+}
diff --git a/src/components/ui/ThemeSwitcher.jsx b/src/components/ui/ThemeSwitcher.jsx
new file mode 100644
index 0000000..008b029
--- /dev/null
+++ b/src/components/ui/ThemeSwitcher.jsx
@@ -0,0 +1,61 @@
+import { useTheme } from '@/components/ThemeProvider'
+
+export default function ThemeSwitcher() {
+ const { mode, toggle } = useTheme()
+
+ return (
+
+ )
+}
diff --git a/src/index.css b/src/index.css
index 3dab9a1..912e1b4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,49 @@
+/* Self-hosted fonts */
+@font-face {
+ font-family: 'Inter';
+ src: url('./assets/fonts/Inter-VariableFont.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Montserrat';
+ src: url('./assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Montserrat';
+ src: url('./assets/fonts/Montserrat-Italic-VariableFont_wght.woff2')
+ format('woff2');
+ font-weight: 100 900;
+ font-style: italic;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Orbitron';
+ src: url('./assets/fonts/orbitron-variablefont_wght-webfont.woff2')
+ format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'BioRhyme';
+ src: url('./assets/fonts/BioRhyme-ExtraBold.woff2') format('woff2');
+ font-weight: 800;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Asimovian';
+ src: url('./assets/fonts/asimovian-regular-webfont.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -39,6 +85,124 @@
/* Example: .custom-button { ... } */
}
+/* Infinite Marquee — seamless loop */
+@keyframes marquee-left {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+ to {
+ transform: translate3d(-50%, 0, 0);
+ }
+}
+@keyframes marquee-right {
+ from {
+ transform: translate3d(-50%, 0, 0);
+ }
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+/* Hero animations */
+@keyframes hero-float {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-12px);
+ }
+}
+@keyframes hero-spin-slow {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+@keyframes hero-orb {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(20px, -15px) scale(1.05);
+ }
+ 66% {
+ transform: translate(-15px, 10px) scale(0.95);
+ }
+}
+.hero-float {
+ animation: hero-float 4s ease-in-out infinite;
+}
+.hero-spin-slow {
+ animation: hero-spin-slow 60s linear infinite;
+}
+.hero-spin-reverse {
+ animation: hero-spin-slow 45s linear infinite reverse;
+}
+.hero-orb-1 {
+ animation: hero-orb 12s ease-in-out infinite;
+}
+.hero-orb-2 {
+ animation: hero-orb 15s ease-in-out infinite 2s;
+}
+.hero-orb-3 {
+ animation: hero-orb 18s ease-in-out infinite 4s;
+}
+/* Grid pattern overlay for hero sections */
+.hero-grid-pattern {
+ background-image: linear-gradient(
+ rgba(212, 160, 23, 0.03) 1px,
+ transparent 1px
+ ),
+ linear-gradient(90deg, rgba(212, 160, 23, 0.03) 1px, transparent 1px);
+ background-size: 64px 64px;
+}
+
+.marquee-left {
+ animation: marquee-left 40s linear infinite;
+ will-change: transform;
+}
+.marquee-right {
+ animation: marquee-right 40s linear infinite;
+ will-change: transform;
+}
+@media (prefers-reduced-motion: reduce) {
+ .marquee-left,
+ .marquee-right,
+ .hero-float,
+ .hero-spin-slow,
+ .hero-spin-reverse,
+ .hero-orb-1,
+ .hero-orb-2,
+ .hero-orb-3 {
+ animation: none;
+ }
+}
+.marquee-track:hover .marquee-left,
+.marquee-track:hover .marquee-right {
+ animation-play-state: paused;
+}
+/* Marquee logo cards */
+.marquee-logo-wrap {
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.marquee-logo-wrap:hover {
+ background: rgba(255, 255, 255, 0.12);
+ box-shadow: 0 0 24px rgba(212, 160, 23, 0.18);
+ transform: scale(1.06);
+}
+.marquee-logo {
+ transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ filter: grayscale(80%) brightness(0.85);
+}
+.marquee-logo-wrap:hover .marquee-logo {
+ filter: grayscale(0%) brightness(1.1)
+ drop-shadow(0 0 8px rgba(212, 160, 23, 0.3));
+}
+
/* Yoda 404 Animations */
@keyframes float {
0%,
@@ -113,13 +277,25 @@ body {
}
:root {
- font-family: Montserrat, 'Open Sans', Helvetica, Arial, sans-serif;
+ /* Theme — dark (default) */
+ --surface: #0a0a0a;
+ --surface-card: #141414;
+ --surface-elevated: #1a1a1a;
+ --surface-footer: #050505;
+ --border: #222;
+ --border-light: #333;
+ --text-primary: #ffffff;
+ --text-secondary: #d1d5db;
+ --text-muted: #6b7280;
+ --marquee-fade: #0a0a0a;
+ --card-hover-bg: rgba(255, 255, 255, 0.06);
+
+ --site-font: Montserrat, 'Open Sans', Helvetica, Arial, sans-serif;
+ --heading-font: BioRhyme, serif;
+ font-family: var(--site-font);
line-height: 1.5;
font-weight: 500;
- /* color: rgba(255, 255, 255, 0.87); */
- /* background-color: #242424; */
-
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@@ -127,45 +303,114 @@ body {
-webkit-text-size-adjust: 100%;
}
-body {
- margin: 0;
- min-width: 320px;
- min-height: 100vh;
+/* Light mode overrides */
+.light {
+ --surface: #fafafa;
+ --surface-card: #ffffff;
+ --surface-elevated: #f5f5f5;
+ --surface-footer: #f0f0f0;
+ --border: #e5e5e5;
+ --border-light: #d4d4d4;
+ --text-primary: #111827;
+ --text-secondary: #374151;
+ --text-muted: #6b7280;
+ --marquee-fade: #fafafa;
+ --card-hover-bg: rgba(0, 0, 0, 0.03);
}
-/* Orbitron Variable Font */
-@font-face {
- font-family: 'Orbitron';
- src: url('./assets/fonts/orbitron-variablefont_wght-webfont.woff2')
- format('woff2');
- font-weight: 100 900;
- font-style: normal;
- font-display: swap;
+/* Light mode — theme corrections for hardcoded dark classes */
+.light .text-white {
+ color: var(--text-primary);
}
-/* Asimovian Font */
-@font-face {
- font-family: 'Asimovian';
- src: url('./assets/fonts/asimovian-regular-webfont.woff2') format('woff2');
- font-weight: 400;
- font-style: normal;
- font-display: swap;
+/* Light mode — accessible primary (gold) text contrast */
+/* #efb403 on white = ~1.7:1 ✗ → #8B5E00 on white = ~5.2:1 ✓ WCAG AA */
+.light .text-primary {
+ color: #8b5e00;
+}
+.light .text-primary-300 {
+ color: #7a5200;
+}
+.light .text-primary-400 {
+ color: #8b5e00;
+}
+.light .text-primary-500 {
+ color: #8b5e00;
+}
+.light .hover\:text-primary:hover {
+ color: #6d4900;
+}
+.light .hover\:text-primary-400:hover {
+ color: #7a5200;
+}
+/* Primary borders — darken for visibility on light surfaces */
+.light .border-primary {
+ border-color: #a87300;
+}
+.light .border-primary\/40 {
+ border-color: rgba(139, 94, 0, 0.4);
+}
+.light .hover\:border-primary\/40:hover {
+ border-color: rgba(139, 94, 0, 0.4);
}
-/* Montserrat Variable Font */
-@font-face {
- font-family: 'Montserrat';
- src: url('./assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
- font-weight: 100 900;
- font-style: normal;
- font-display: swap;
+.light .text-gray-300 {
+ color: #374151;
+}
+.light .text-gray-400 {
+ color: #4b5563;
+}
+.light .text-gray-500 {
+ color: #6b7280;
+}
+.light .text-gray-600 {
+ color: #9ca3af;
+}
+.light .text-gray-700 {
+ color: #9ca3af;
+}
+.light .bg-white\/5,
+.light .bg-white\/\[0\.01\],
+.light .bg-white\/\[0\.02\],
+.light .bg-white\/\[0\.04\],
+.light .bg-white\/\[0\.06\],
+.light .bg-white\/\[0\.12\] {
+ background-color: rgba(0, 0, 0, 0.03);
+}
+.light .bg-\[\#0a0a0a\] {
+ background-color: var(--surface);
+}
+.light .bg-\[\#050505\] {
+ background-color: var(--surface-footer);
+}
+.light .bg-\[\#141414\] {
+ background-color: var(--surface-card);
+}
+.light .bg-\[\#1a1a1a\] {
+ background-color: var(--surface-elevated);
+}
+.light .border-\[\#222\] {
+ border-color: var(--border);
+}
+.light .stroke-\[\#222\],
+.light .stroke-\[\#1a1a1a\] {
+ stroke: #e5e5e5;
+}
+.light .marquee-logo {
+ filter: grayscale(30%) brightness(1);
+}
+.light .marquee-logo-wrap {
+ background: rgba(0, 0, 0, 0.04);
+}
+.light .marquee-logo-wrap:hover {
+ background: rgba(0, 0, 0, 0.08);
+}
+.light .marquee-logo-wrap:hover .marquee-logo {
+ filter: grayscale(0%) brightness(1);
}
-/* BioRhyme Font */
-@font-face {
- font-family: 'BioRhyme';
- src: url('./assets/fonts/BioRhyme-ExtraBold.woff2') format('woff2');
- font-weight: 800;
- font-style: normal;
- font-display: swap;
+body {
+ margin: 0;
+ min-width: 320px;
+ min-height: 100vh;
}
diff --git a/src/layouts/CommunitySection.jsx b/src/layouts/CommunitySection.jsx
index b2d5b81..2b2b999 100644
--- a/src/layouts/CommunitySection.jsx
+++ b/src/layouts/CommunitySection.jsx
@@ -10,7 +10,7 @@ const CommunitySection = ({ year = new Date().getFullYear() }) => {
>
-
+
{year ? `${year} ` : ''}Community
![]()
{
className="flex flex-wrap items-center justify-center bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Dev Team
![]()
-
+
Facilitators
![]()
{
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Job Board
![]()
-
+
February 28, 2026
diff --git a/src/layouts/LocationSection.jsx b/src/layouts/LocationSection.jsx
index 80cbe91..72e7150 100644
--- a/src/layouts/LocationSection.jsx
+++ b/src/layouts/LocationSection.jsx
@@ -4,7 +4,7 @@ function LocationSection() {
return (
@@ -16,7 +16,7 @@ function LocationSection() {
When & Where
diff --git a/src/layouts/MembersSection.jsx b/src/layouts/MembersSection.jsx
index 033cd45..6610dfc 100644
--- a/src/layouts/MembersSection.jsx
+++ b/src/layouts/MembersSection.jsx
@@ -10,7 +10,7 @@ const MembersSection = ({ year }) => {
className="bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Membership
![]()
{
{/* Left column — 2/3 width on desktop: Why Join + bullet points */}
-
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
+
{year} Speakers
+
+ {FONT_OPTIONS.map((option) => (
+ - {
+ setFont(option.id)
+ setOpen(false)
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ setFont(option.id)
+ setOpen(false)
+ }
+ }}
+ className={`flex cursor-pointer items-center gap-2 px-3 py-2.5 text-sm transition-colors ${
+ font === option.id
+ ? 'bg-primary/10 text-primary'
+ : 'text-[var(--text-secondary)] hover:bg-[var(--card-hover-bg)] hover:text-[var(--text-primary)]'
+ }`}
+ style={{ fontFamily: option.family }}
+ >
+ {option.label}
+ {font === option.id && (
+
+ )}
+
+ ))}
+
+ )}
+
+ )
+}
diff --git a/src/components/ui/MapPinIcon.jsx b/src/components/ui/MapPinIcon.jsx
new file mode 100644
index 0000000..a0240ae
--- /dev/null
+++ b/src/components/ui/MapPinIcon.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+
+export default function MapPinIcon({ size = 14 }) {
+ return (
+
+ )
+}
+
+MapPinIcon.propTypes = {
+ size: PropTypes.number,
+}
diff --git a/src/components/ui/PlaceholderImage.jsx b/src/components/ui/PlaceholderImage.jsx
new file mode 100644
index 0000000..9cc2e1b
--- /dev/null
+++ b/src/components/ui/PlaceholderImage.jsx
@@ -0,0 +1,201 @@
+import PropTypes from 'prop-types'
+
+const presets = {
+ community: {
+ gradient: 'from-primary/20 via-indigo-500/10 to-emerald-500/10',
+ icon: (
+
+ ),
+ label: 'Community',
+ },
+ event: {
+ gradient: 'from-primary/20 via-rose-500/10 to-violet-500/10',
+ icon: (
+
+ ),
+ label: 'Event',
+ },
+ tech: {
+ gradient: 'from-indigo-500/20 via-primary/10 to-cyan-500/10',
+ icon: (
+
+ ),
+ label: 'Technology',
+ },
+ career: {
+ gradient: 'from-emerald-500/20 via-primary/10 to-teal-500/10',
+ icon: (
+
+ ),
+ label: 'Career',
+ },
+ mentorship: {
+ gradient: 'from-violet-500/20 via-primary/10 to-rose-500/10',
+ icon: (
+
+ ),
+ label: 'Mentorship',
+ },
+ workshop: {
+ gradient: 'from-amber-500/20 via-orange-500/10 to-primary/10',
+ icon: (
+
+ ),
+ label: 'Workshop',
+ },
+ hackathon: {
+ gradient: 'from-cyan-500/20 via-blue-500/10 to-indigo-500/10',
+ icon: (
+
+ ),
+ label: 'Hackathon',
+ },
+ impact: {
+ gradient: 'from-emerald-500/20 via-lime-500/10 to-primary/10',
+ icon: (
+
+ ),
+ label: 'Impact',
+ },
+}
+
+export default function PlaceholderImage({
+ preset = 'community',
+ aspectRatio = 'aspect-video',
+ className = '',
+}) {
+ const config = presets[preset] || presets.community
+ return (
+
+
+ {config.icon}
+
+ {config.label}
+
+
+
+ )
+}
+
+PlaceholderImage.propTypes = {
+ preset: PropTypes.oneOf([
+ 'community',
+ 'event',
+ 'tech',
+ 'career',
+ 'mentorship',
+ 'workshop',
+ 'hackathon',
+ 'impact',
+ ]),
+ aspectRatio: PropTypes.string,
+ className: PropTypes.string,
+}
diff --git a/src/components/ui/ScrollProgressButton.jsx b/src/components/ui/ScrollProgressButton.jsx
new file mode 100644
index 0000000..10fa14a
--- /dev/null
+++ b/src/components/ui/ScrollProgressButton.jsx
@@ -0,0 +1,99 @@
+import { useState, useEffect, useCallback } from 'react'
+import { FaArrowUp } from 'react-icons/fa6'
+
+export default function ScrollProgressButton() {
+ const [scrollPercent, setScrollPercent] = useState(0)
+ const [isVisible, setIsVisible] = useState(false)
+
+ const handleScroll = useCallback(() => {
+ const scrollTop = window.scrollY
+ const docHeight = document.documentElement.scrollHeight - window.innerHeight
+ const percent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0
+ setScrollPercent(Math.min(percent, 100))
+ setIsVisible(scrollTop > 300)
+ }, [])
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll, { passive: true })
+ return () => window.removeEventListener('scroll', handleScroll)
+ }, [handleScroll])
+
+ const scrollToTop = () => {
+ const startPosition = window.scrollY
+ const startTime = performance.now()
+ const duration = 1200
+
+ const easeOutQuart = (t) => 1 - Math.pow(1 - t, 4)
+
+ const animate = (currentTime) => {
+ const elapsed = currentTime - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ window.scrollTo(0, startPosition * (1 - easeOutQuart(progress)))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+
+ requestAnimationFrame(animate)
+ }
+
+ // SVG circle math: radius 20, circumference = 2 * PI * 20
+ const circumference = 2 * Math.PI * 20
+ const strokeDashoffset = circumference - (scrollPercent / 100) * circumference
+
+ return (
+ <>
+ {/* Top progress bar */}
+
+
+ {/* Floating button with circular progress */}
+
+
+ )
+}
diff --git a/src/components/ui/ThemeSwitcher.jsx b/src/components/ui/ThemeSwitcher.jsx
new file mode 100644
index 0000000..008b029
--- /dev/null
+++ b/src/components/ui/ThemeSwitcher.jsx
@@ -0,0 +1,61 @@
+import { useTheme } from '@/components/ThemeProvider'
+
+export default function ThemeSwitcher() {
+ const { mode, toggle } = useTheme()
+
+ return (
+
+ )
+}
diff --git a/src/index.css b/src/index.css
index 3dab9a1..912e1b4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,49 @@
+/* Self-hosted fonts */
+@font-face {
+ font-family: 'Inter';
+ src: url('./assets/fonts/Inter-VariableFont.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Montserrat';
+ src: url('./assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Montserrat';
+ src: url('./assets/fonts/Montserrat-Italic-VariableFont_wght.woff2')
+ format('woff2');
+ font-weight: 100 900;
+ font-style: italic;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Orbitron';
+ src: url('./assets/fonts/orbitron-variablefont_wght-webfont.woff2')
+ format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'BioRhyme';
+ src: url('./assets/fonts/BioRhyme-ExtraBold.woff2') format('woff2');
+ font-weight: 800;
+ font-style: normal;
+ font-display: swap;
+}
+@font-face {
+ font-family: 'Asimovian';
+ src: url('./assets/fonts/asimovian-regular-webfont.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -39,6 +85,124 @@
/* Example: .custom-button { ... } */
}
+/* Infinite Marquee — seamless loop */
+@keyframes marquee-left {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+ to {
+ transform: translate3d(-50%, 0, 0);
+ }
+}
+@keyframes marquee-right {
+ from {
+ transform: translate3d(-50%, 0, 0);
+ }
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+/* Hero animations */
+@keyframes hero-float {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-12px);
+ }
+}
+@keyframes hero-spin-slow {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+@keyframes hero-orb {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(20px, -15px) scale(1.05);
+ }
+ 66% {
+ transform: translate(-15px, 10px) scale(0.95);
+ }
+}
+.hero-float {
+ animation: hero-float 4s ease-in-out infinite;
+}
+.hero-spin-slow {
+ animation: hero-spin-slow 60s linear infinite;
+}
+.hero-spin-reverse {
+ animation: hero-spin-slow 45s linear infinite reverse;
+}
+.hero-orb-1 {
+ animation: hero-orb 12s ease-in-out infinite;
+}
+.hero-orb-2 {
+ animation: hero-orb 15s ease-in-out infinite 2s;
+}
+.hero-orb-3 {
+ animation: hero-orb 18s ease-in-out infinite 4s;
+}
+/* Grid pattern overlay for hero sections */
+.hero-grid-pattern {
+ background-image: linear-gradient(
+ rgba(212, 160, 23, 0.03) 1px,
+ transparent 1px
+ ),
+ linear-gradient(90deg, rgba(212, 160, 23, 0.03) 1px, transparent 1px);
+ background-size: 64px 64px;
+}
+
+.marquee-left {
+ animation: marquee-left 40s linear infinite;
+ will-change: transform;
+}
+.marquee-right {
+ animation: marquee-right 40s linear infinite;
+ will-change: transform;
+}
+@media (prefers-reduced-motion: reduce) {
+ .marquee-left,
+ .marquee-right,
+ .hero-float,
+ .hero-spin-slow,
+ .hero-spin-reverse,
+ .hero-orb-1,
+ .hero-orb-2,
+ .hero-orb-3 {
+ animation: none;
+ }
+}
+.marquee-track:hover .marquee-left,
+.marquee-track:hover .marquee-right {
+ animation-play-state: paused;
+}
+/* Marquee logo cards */
+.marquee-logo-wrap {
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.marquee-logo-wrap:hover {
+ background: rgba(255, 255, 255, 0.12);
+ box-shadow: 0 0 24px rgba(212, 160, 23, 0.18);
+ transform: scale(1.06);
+}
+.marquee-logo {
+ transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ filter: grayscale(80%) brightness(0.85);
+}
+.marquee-logo-wrap:hover .marquee-logo {
+ filter: grayscale(0%) brightness(1.1)
+ drop-shadow(0 0 8px rgba(212, 160, 23, 0.3));
+}
+
/* Yoda 404 Animations */
@keyframes float {
0%,
@@ -113,13 +277,25 @@ body {
}
:root {
- font-family: Montserrat, 'Open Sans', Helvetica, Arial, sans-serif;
+ /* Theme — dark (default) */
+ --surface: #0a0a0a;
+ --surface-card: #141414;
+ --surface-elevated: #1a1a1a;
+ --surface-footer: #050505;
+ --border: #222;
+ --border-light: #333;
+ --text-primary: #ffffff;
+ --text-secondary: #d1d5db;
+ --text-muted: #6b7280;
+ --marquee-fade: #0a0a0a;
+ --card-hover-bg: rgba(255, 255, 255, 0.06);
+
+ --site-font: Montserrat, 'Open Sans', Helvetica, Arial, sans-serif;
+ --heading-font: BioRhyme, serif;
+ font-family: var(--site-font);
line-height: 1.5;
font-weight: 500;
- /* color: rgba(255, 255, 255, 0.87); */
- /* background-color: #242424; */
-
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@@ -127,45 +303,114 @@ body {
-webkit-text-size-adjust: 100%;
}
-body {
- margin: 0;
- min-width: 320px;
- min-height: 100vh;
+/* Light mode overrides */
+.light {
+ --surface: #fafafa;
+ --surface-card: #ffffff;
+ --surface-elevated: #f5f5f5;
+ --surface-footer: #f0f0f0;
+ --border: #e5e5e5;
+ --border-light: #d4d4d4;
+ --text-primary: #111827;
+ --text-secondary: #374151;
+ --text-muted: #6b7280;
+ --marquee-fade: #fafafa;
+ --card-hover-bg: rgba(0, 0, 0, 0.03);
}
-/* Orbitron Variable Font */
-@font-face {
- font-family: 'Orbitron';
- src: url('./assets/fonts/orbitron-variablefont_wght-webfont.woff2')
- format('woff2');
- font-weight: 100 900;
- font-style: normal;
- font-display: swap;
+/* Light mode — theme corrections for hardcoded dark classes */
+.light .text-white {
+ color: var(--text-primary);
}
-/* Asimovian Font */
-@font-face {
- font-family: 'Asimovian';
- src: url('./assets/fonts/asimovian-regular-webfont.woff2') format('woff2');
- font-weight: 400;
- font-style: normal;
- font-display: swap;
+/* Light mode — accessible primary (gold) text contrast */
+/* #efb403 on white = ~1.7:1 ✗ → #8B5E00 on white = ~5.2:1 ✓ WCAG AA */
+.light .text-primary {
+ color: #8b5e00;
+}
+.light .text-primary-300 {
+ color: #7a5200;
+}
+.light .text-primary-400 {
+ color: #8b5e00;
+}
+.light .text-primary-500 {
+ color: #8b5e00;
+}
+.light .hover\:text-primary:hover {
+ color: #6d4900;
+}
+.light .hover\:text-primary-400:hover {
+ color: #7a5200;
+}
+/* Primary borders — darken for visibility on light surfaces */
+.light .border-primary {
+ border-color: #a87300;
+}
+.light .border-primary\/40 {
+ border-color: rgba(139, 94, 0, 0.4);
+}
+.light .hover\:border-primary\/40:hover {
+ border-color: rgba(139, 94, 0, 0.4);
}
-/* Montserrat Variable Font */
-@font-face {
- font-family: 'Montserrat';
- src: url('./assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
- font-weight: 100 900;
- font-style: normal;
- font-display: swap;
+.light .text-gray-300 {
+ color: #374151;
+}
+.light .text-gray-400 {
+ color: #4b5563;
+}
+.light .text-gray-500 {
+ color: #6b7280;
+}
+.light .text-gray-600 {
+ color: #9ca3af;
+}
+.light .text-gray-700 {
+ color: #9ca3af;
+}
+.light .bg-white\/5,
+.light .bg-white\/\[0\.01\],
+.light .bg-white\/\[0\.02\],
+.light .bg-white\/\[0\.04\],
+.light .bg-white\/\[0\.06\],
+.light .bg-white\/\[0\.12\] {
+ background-color: rgba(0, 0, 0, 0.03);
+}
+.light .bg-\[\#0a0a0a\] {
+ background-color: var(--surface);
+}
+.light .bg-\[\#050505\] {
+ background-color: var(--surface-footer);
+}
+.light .bg-\[\#141414\] {
+ background-color: var(--surface-card);
+}
+.light .bg-\[\#1a1a1a\] {
+ background-color: var(--surface-elevated);
+}
+.light .border-\[\#222\] {
+ border-color: var(--border);
+}
+.light .stroke-\[\#222\],
+.light .stroke-\[\#1a1a1a\] {
+ stroke: #e5e5e5;
+}
+.light .marquee-logo {
+ filter: grayscale(30%) brightness(1);
+}
+.light .marquee-logo-wrap {
+ background: rgba(0, 0, 0, 0.04);
+}
+.light .marquee-logo-wrap:hover {
+ background: rgba(0, 0, 0, 0.08);
+}
+.light .marquee-logo-wrap:hover .marquee-logo {
+ filter: grayscale(0%) brightness(1);
}
-/* BioRhyme Font */
-@font-face {
- font-family: 'BioRhyme';
- src: url('./assets/fonts/BioRhyme-ExtraBold.woff2') format('woff2');
- font-weight: 800;
- font-style: normal;
- font-display: swap;
+body {
+ margin: 0;
+ min-width: 320px;
+ min-height: 100vh;
}
diff --git a/src/layouts/CommunitySection.jsx b/src/layouts/CommunitySection.jsx
index b2d5b81..2b2b999 100644
--- a/src/layouts/CommunitySection.jsx
+++ b/src/layouts/CommunitySection.jsx
@@ -10,7 +10,7 @@ const CommunitySection = ({ year = new Date().getFullYear() }) => {
>
-
+
{year ? `${year} ` : ''}Community
![]()
{
className="flex flex-wrap items-center justify-center bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Dev Team
![]()
-
+
Facilitators
![]()
{
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Job Board
![]()
-
+
February 28, 2026
diff --git a/src/layouts/LocationSection.jsx b/src/layouts/LocationSection.jsx
index 80cbe91..72e7150 100644
--- a/src/layouts/LocationSection.jsx
+++ b/src/layouts/LocationSection.jsx
@@ -4,7 +4,7 @@ function LocationSection() {
return (
@@ -16,7 +16,7 @@ function LocationSection() {
When & Where
diff --git a/src/layouts/MembersSection.jsx b/src/layouts/MembersSection.jsx
index 033cd45..6610dfc 100644
--- a/src/layouts/MembersSection.jsx
+++ b/src/layouts/MembersSection.jsx
@@ -10,7 +10,7 @@ const MembersSection = ({ year }) => {
className="bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Membership
![]()
{
{/* Left column — 2/3 width on desktop: Why Join + bullet points */}
-
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
-
+ {FONT_OPTIONS.map((option) => (
+
- { + setFont(option.id) + setOpen(false) + }} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + setFont(option.id) + setOpen(false) + } + }} + className={`flex cursor-pointer items-center gap-2 px-3 py-2.5 text-sm transition-colors ${ + font === option.id + ? 'bg-primary/10 text-primary' + : 'text-[var(--text-secondary)] hover:bg-[var(--card-hover-bg)] hover:text-[var(--text-primary)]' + }`} + style={{ fontFamily: option.family }} + > + {option.label} + {font === option.id && ( + + )} + + ))} +
+ {config.icon}
+
+ {config.label}
+
+
+
-
+
+
{year ? `${year} ` : ''}Community
![]()
{
className="flex flex-wrap items-center justify-center bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Dev Team
![]()
-
+
Facilitators
![]()
{
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Job Board
![]()
-
+
February 28, 2026
diff --git a/src/layouts/LocationSection.jsx b/src/layouts/LocationSection.jsx
index 80cbe91..72e7150 100644
--- a/src/layouts/LocationSection.jsx
+++ b/src/layouts/LocationSection.jsx
@@ -4,7 +4,7 @@ function LocationSection() {
return (
@@ -16,7 +16,7 @@ function LocationSection() {
When & Where
diff --git a/src/layouts/MembersSection.jsx b/src/layouts/MembersSection.jsx
index 033cd45..6610dfc 100644
--- a/src/layouts/MembersSection.jsx
+++ b/src/layouts/MembersSection.jsx
@@ -10,7 +10,7 @@ const MembersSection = ({ year }) => {
className="bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Membership
![]()
{
{/* Left column — 2/3 width on desktop: Why Join + bullet points */}
-
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
+
Dev Team
![]()
-
+
Facilitators
![]()
{
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Job Board
![]()
-
+
February 28, 2026
diff --git a/src/layouts/LocationSection.jsx b/src/layouts/LocationSection.jsx
index 80cbe91..72e7150 100644
--- a/src/layouts/LocationSection.jsx
+++ b/src/layouts/LocationSection.jsx
@@ -4,7 +4,7 @@ function LocationSection() {
return (
@@ -16,7 +16,7 @@ function LocationSection() {
When & Where
diff --git a/src/layouts/MembersSection.jsx b/src/layouts/MembersSection.jsx
index 033cd45..6610dfc 100644
--- a/src/layouts/MembersSection.jsx
+++ b/src/layouts/MembersSection.jsx
@@ -10,7 +10,7 @@ const MembersSection = ({ year }) => {
className="bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Membership
![]()
{
{/* Left column — 2/3 width on desktop: Why Join + bullet points */}
-
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
+
Facilitators
![]()
{
className="flex flex-col justify-center bg-yellow-50 p-8 py-24 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Job Board
![]()
-
+
February 28, 2026
diff --git a/src/layouts/LocationSection.jsx b/src/layouts/LocationSection.jsx
index 80cbe91..72e7150 100644
--- a/src/layouts/LocationSection.jsx
+++ b/src/layouts/LocationSection.jsx
@@ -4,7 +4,7 @@ function LocationSection() {
return (
@@ -16,7 +16,7 @@ function LocationSection() {
When & Where
diff --git a/src/layouts/MembersSection.jsx b/src/layouts/MembersSection.jsx
index 033cd45..6610dfc 100644
--- a/src/layouts/MembersSection.jsx
+++ b/src/layouts/MembersSection.jsx
@@ -10,7 +10,7 @@ const MembersSection = ({ year }) => {
className="bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Membership
![]()
{
{/* Left column — 2/3 width on desktop: Why Join + bullet points */}
-
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
+
{year && !isCurrentYear ? `${year} ` : ''}Job Board
![]()
-
+
February 28, 2026
diff --git a/src/layouts/LocationSection.jsx b/src/layouts/LocationSection.jsx
index 80cbe91..72e7150 100644
--- a/src/layouts/LocationSection.jsx
+++ b/src/layouts/LocationSection.jsx
@@ -4,7 +4,7 @@ function LocationSection() {
return (
@@ -16,7 +16,7 @@ function LocationSection() {
When & Where
diff --git a/src/layouts/MembersSection.jsx b/src/layouts/MembersSection.jsx
index 033cd45..6610dfc 100644
--- a/src/layouts/MembersSection.jsx
+++ b/src/layouts/MembersSection.jsx
@@ -10,7 +10,7 @@ const MembersSection = ({ year }) => {
className="bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Membership
![]()
{
{/* Left column — 2/3 width on desktop: Why Join + bullet points */}
-
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
+
February 28, 2026
diff --git a/src/layouts/LocationSection.jsx b/src/layouts/LocationSection.jsx
index 80cbe91..72e7150 100644
--- a/src/layouts/LocationSection.jsx
+++ b/src/layouts/LocationSection.jsx
@@ -4,7 +4,7 @@ function LocationSection() {
return (
@@ -16,7 +16,7 @@ function LocationSection() {
When & Where
diff --git a/src/layouts/MembersSection.jsx b/src/layouts/MembersSection.jsx
index 033cd45..6610dfc 100644
--- a/src/layouts/MembersSection.jsx
+++ b/src/layouts/MembersSection.jsx
@@ -10,7 +10,7 @@ const MembersSection = ({ year }) => {
className="bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Membership
![]()
{
{/* Left column — 2/3 width on desktop: Why Join + bullet points */}
-
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
@@ -16,7 +16,7 @@ function LocationSection() {
When & Where
diff --git a/src/layouts/MembersSection.jsx b/src/layouts/MembersSection.jsx index 033cd45..6610dfc 100644 --- a/src/layouts/MembersSection.jsx +++ b/src/layouts/MembersSection.jsx @@ -10,7 +10,7 @@ const MembersSection = ({ year }) => { className="bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16" >
-
+
+
{year ? `${year} ` : ''}Membership
![]()
{
{/* Left column — 2/3 width on desktop: Why Join + bullet points */}
-
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
-
+
+
Why join?
diff --git a/src/layouts/OrganizersSection.jsx b/src/layouts/OrganizersSection.jsx
index 1760b8e..3aa1c06 100644
--- a/src/layouts/OrganizersSection.jsx
+++ b/src/layouts/OrganizersSection.jsx
@@ -9,7 +9,7 @@ function OrganizersSection() {
className="flex flex-col justify-center bg-sky-100 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
-
+
+
Organizers
![]()
{
return (
-
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
+
{tierName}
{
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
-
+
+ )
+}
+
+SiteLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/layouts/SponsorsSection.jsx b/src/layouts/SponsorsSection.jsx
index f8826be..c657977 100644
--- a/src/layouts/SponsorsSection.jsx
+++ b/src/layouts/SponsorsSection.jsx
@@ -14,7 +14,7 @@ const SponsorsSection = ({
className="flex flex-col justify-center bg-white p-8 sm:px-10 md:px-14 lg:px-16"
>
+
{year ? `${year} ` : ''}Partners
![]()
-
+
{year} Schedule
![]()
+ {children}
+
{year} Schedule
-
+
+
{year && !isCurrentYear ? `${year} ` : ''}Sponsors
![]()
{
className=" bg-primary-50 p-8 sm:px-10 md:px-14 lg:px-16"
>
-
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
+
{year ? `${year} ` : ''}Leadership Team
+
+ Community Breakdown
+
+
+ Racial & ethnic diversity
+
+
+
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+ )
+}
+
+export default function AboutPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 501(c)(3) Nonprofit
+
+
+
+ The career infrastructure Detroit's tech talent{' '}
+
+ deserves.
+
+
+
+ COMPASS — the Collective of Minority Professionals and STEAM
+ Societies — is a 501(c)(3) nonprofit building the pathways that
+ connect prepared, underrepresented tech talent in Michigan to
+ technology careers.
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+
+
+ {/* Community rings — animated demographic data */}
+
+
+
+
+ Our Community
+
+
+ 2,203 Members and Growing
+
+
+
+
+ 234% member growth over 3 years — driven by word-of-mouth and
+ events.
+
+
+
+
+ {/* Mission + Do/Don't */}
+
+
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years. The gap isn't
+ skills. It's infrastructure: no one is connecting prepared
+ talent to careers.
+
+
+ COMPASS is a 501(c)(3) nonprofit building the career
+ infrastructure that closes this gap — operating as a collective
+ of professional organizations including NSBE, SHPE, SWE, MCWT,
+ Out in Tech, and more.
+
+
+
+
+
+ What We Do — and Don't Do
+
+
+ {weDo.map((item) => (
+
+
+
+ {/* The Coalition — org logos */}
+
+
+
+
+ The Collective
+
+
+ Eight organizations, one mission
+
+
+
+ {coalitionOrgs.map((org) => (
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+ ))}
+
+
+
+
+ {/* Navigator Journey — vertical timeline */}
+
+
+
+ The Navigator Journey
+
+
+ From preparation to prosperity
+
+
+ Navigators are our community members — individuals charting their
+ course through the technology industry with COMPASS as their
+ guide.
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {journeySteps.map((step) => (
+
+ {/* Dot on timeline */}
+
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Traction — with visual emphasis */}
+
+
+
+
+ Pilot Traction
+
+
+ The model is working
+
+
+ COMPASS partners are not just supporting our events — they're
+ interviewing and hiring Navigators they meet there.
+
+
+
+ {traction.map((t) => (
+
+
+ Corporate Partner
+
+
+ {t.company}
+
+ {t.role}
+
+ {t.detail}
+
+
+ ))}
+
+
+
+ Three Navigators. Three job offers. Partners came to our events
+ looking for talent — and found it.
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+
+ Ready to be part of the{' '}
+
+ mission?
+
+
+
+ Join the collective of organizations and individuals building
+ Detroit's tech talent pipeline.
+
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
new file mode 100644
index 0000000..8b46c70
--- /dev/null
+++ b/src/pages/CommunityPage.jsx
@@ -0,0 +1,240 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+
+const collective = [
+ {
+ name: 'NSBE Detroit',
+ full: 'National Society of Black Engineers — Detroit Chapter',
+ desc: 'Professional engineers driving diversity in STEM through outreach, career development, and community building.',
+ logo: NSBELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SHPE Detroit',
+ full: 'Society of Hispanic Professional Engineers — Detroit',
+ desc: 'Empowering Hispanic professionals in engineering and science through development programs and networking.',
+ logo: SHPELogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'MCWT',
+ full: 'Michigan Council of Women in Technology',
+ desc: 'Growing the number of women in technology through programs, events, and community engagement across Michigan.',
+ logo: null,
+ initials: 'MCWT',
+ gradient: 'from-violet-600 to-indigo-600',
+ },
+ {
+ name: 'GDG Detroit',
+ full: 'Google Developer Group — Detroit',
+ desc: 'A community of developers interested in Google technologies, learning, and building solutions together.',
+ logo: GDGDetroitLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'Out in Tech Detroit',
+ full: 'Out in Tech — Detroit Chapter',
+ desc: 'Creating opportunities for LGBTQ+ professionals in the technology industry through events and advocacy.',
+ logo: null,
+ initials: 'OiT',
+ gradient: 'from-pink-500 to-rose-500',
+ },
+ {
+ name: 'Women Techmakers',
+ full: 'Women Techmakers — Detroit',
+ desc: 'A Google program providing visibility, community, and resources for women in technology across Detroit.',
+ logo: WTMLogo,
+ initials: null,
+ gradient: null,
+ },
+ {
+ name: 'SWE Detroit',
+ full: 'Society of Women Engineers — Detroit',
+ desc: 'Empowering women to achieve full potential in careers as engineers and leaders through professional development.',
+ logo: null,
+ initials: 'SWE',
+ gradient: 'from-amber-500 to-orange-500',
+ },
+ {
+ name: 'Automation Workz',
+ full: 'Automation Workz Foundation',
+ desc: 'Training and placing underrepresented talent in automation, IT, and cybersecurity career pathways.',
+ logo: null,
+ initials: 'AW',
+ gradient: 'from-cyan-500 to-blue-500',
+ },
+]
+
+const communityStats = [
+ { num: '2,203', label: 'Community members' },
+ { num: '52%', label: 'Black/African-American' },
+ { num: '75%', label: 'Women' },
+ { num: '6+', label: 'Coalition organizations' },
+]
+
+export default function CommunityPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+
+ A collective built on{' '}
+
+ belonging.
+
+
+
+ COMPASS isn't a single organization — it's a coalition of
+ professional societies united by a shared mission: building career
+ infrastructure for underrepresented tech talent in Michigan.
+
+
+
+
+ {/* Community Stats */}
+
+
+
+ {communityStats.map((stat) => (
+
+
+ {stat.num}
+
+ {stat.label}
+
+ ))}
+
+
+
+
+ {/* The Collective — with logos */}
+
+
+
+
+ Our Collective
+
+
+ Stronger together
+
+
+ Each organization in the COMPASS collective brings unique
+ expertise, networks, and cultural perspective to our shared work.
+
+
+
+ {collective.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+ {org.full}
+
+
+
+ {org.desc}
+
+
+ ))}
+
+
+
+
+ {/* For Navigators / Employers — with accent borders */}
+
+
+
+ For Navigators
+
+
+ Your community is here
+
+
+ As a Navigator, you're not just attending events —
+ you're joining a community of professionals who share your
+ background, your ambitions, and your drive. COMPASS programming
+ is designed to build your confidence, expand your network, and
+ connect you to real career opportunities.
+
+
+ Join as a Navigator
+
+
+
+
+ For Employers
+
+
+ Talent is already here
+
+
+ Stop searching. Start connecting. COMPASS events bring you
+ face-to-face with prepared, diverse tech professionals who are
+ ready for their next opportunity. Our partners aren't just
+ sponsoring events — they're hiring the Navigators they meet
+ there.
+
+
+ Partner as an Employer
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/EventsPage.jsx b/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..6cc4ac0
--- /dev/null
+++ b/src/pages/EventsPage.jsx
@@ -0,0 +1,448 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const typeColors = {
+ 'Innovation Summit': 'bg-primary/10 text-primary border-primary/20',
+ Hackathon: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+ 'Industry Event': 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+}
+
+const journeyStages = [
+ {
+ id: 'engage',
+ label: 'Engage',
+ color: 'text-primary',
+ bg: 'bg-primary/10',
+ desc: 'Discover, attend, belong',
+ },
+ {
+ id: 'build',
+ label: 'Build',
+ color: 'text-emerald-400',
+ bg: 'bg-emerald-500/10',
+ desc: 'Skills, portfolio, confidence',
+ },
+ {
+ id: 'connect',
+ label: 'Connect',
+ color: 'text-blue-400',
+ bg: 'bg-blue-500/10',
+ desc: 'Employers meet talent',
+ },
+ {
+ id: 'hire',
+ label: 'Hire',
+ color: 'text-violet-400',
+ bg: 'bg-violet-500/10',
+ desc: 'Co-ops, roles & careers',
+ },
+]
+
+function isUpcoming(dateStr) {
+ // Handle year-only format like "2026"
+ if (/^\d{4}$/.test(dateStr)) return true
+ const parsed = new Date(`1 ${dateStr}`)
+ if (isNaN(parsed)) return true
+ const now = new Date()
+ parsed.setMonth(parsed.getMonth() + 1, 0)
+ return parsed >= now
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ month: 'FEB',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Celebrating Black excellence in technology with keynotes, panels, and networking focused on career advancement and innovation.',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ month: 'MAR',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Honoring women leading in technology with sessions on leadership, career growth, and breaking barriers in the industry.',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ month: 'SEP',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ stages: ['engage', 'connect'],
+ desc: 'Highlighting Hispanic and Latinx contributions to technology with career-focused programming and community building.',
+ },
+ {
+ name: 'Hack Michigan',
+ date: '2026',
+ month: 'TBD',
+ location: 'Detroit, MI',
+ type: 'Hackathon',
+ stages: ['build', 'connect'],
+ desc: "Michigan's premier community hackathon bringing together developers, designers, and innovators to build solutions for real-world challenges.",
+ },
+ {
+ name: 'Michigan DevFest',
+ date: 'November 2026',
+ month: 'NOV',
+ location: 'Detroit, MI',
+ type: 'Industry Event',
+ stages: ['engage', 'build', 'connect'],
+ desc: 'A flagship technology conference featuring sessions on cloud, AI, mobile, web, and career development — co-produced with GDG Detroit.',
+ },
+]
+
+const pastEvents = allEvents.filter((ev) => !isUpcoming(ev.date))
+const events = allEvents.filter((ev) => isUpcoming(ev.date))
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ desc: 'Quarterly events tied to cultural heritage months, featuring keynotes from industry leaders, technical workshops, career panels, and networking. Each summit connects 200+ Navigators with employers and community partners.',
+ highlights: [
+ 'Keynote speakers from major tech companies',
+ 'Hands-on workshops and career panels',
+ 'Direct employer networking opportunities',
+ 'Cultural celebration and community building',
+ ],
+ },
+ {
+ title: 'Hack Michigan',
+ desc: "Michigan's community hackathon, bringing together developers, designers, and domain experts to solve real problems. Participants build portfolio-worthy projects while connecting with mentors and potential employers.",
+ highlights: [
+ 'Team-based project development',
+ 'Industry mentorship',
+ 'Portfolio building',
+ 'Prize tracks for social impact',
+ ],
+ },
+ {
+ title: 'Michigan DevFest',
+ desc: 'A full-day technology conference produced in partnership with Google Developer Groups. Multiple tracks covering cloud, AI/ML, mobile, web, and career development with talks from industry practitioners.',
+ highlights: [
+ 'Multi-track conference format',
+ 'Google technology ecosystem',
+ 'Speaker opportunities for Navigators',
+ 'Career pathways workshops',
+ ],
+ },
+ {
+ title: 'Career Pathways',
+ desc: 'Ongoing programming that prepares Navigators for their next career move — from resume workshops and mock interviews to portfolio reviews and certification study groups.',
+ highlights: [
+ 'Resume and portfolio reviews',
+ 'Mock interview preparation',
+ 'Certification study groups',
+ 'Professional development workshops',
+ ],
+ },
+]
+
+export default function EventsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 5 Events Planned
+
+
+
+ Where talent meets{' '}
+
+ opportunity.
+
+
+
+ From Innovation Summits to hackathons to Michigan DevFest — every
+ COMPASS event is designed to build confidence, create connections,
+ and open career pathways.
+
+
+
+
+ {/* Navigator Journey Flow — how events connect */}
+
+
+
+ The Navigator Journey
+
+
+ How everything connects
+
+
+ Every COMPASS event maps to a stage in the Navigator journey.
+ Attend any event and you're progressing toward career
+ outcomes.
+
+
+ {/* Horizontal flow */}
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ {/* Upcoming Events — timeline with journey tags */}
+
+
+
+
+ 2026 Calendar
+
+
+ Upcoming Events
+
+
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+ {/* Timeline dot */}
+
+
+
+
+
+
+ {ev.month}
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ {ev.desc}
+
+ {/* Journey stage tags */}
+
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+
+ {ev.type}
+
+
+
+
+ ))}
+
+
+
+
+ {/* Past Events */}
+ {pastEvents.length > 0 && (
+
+
+
+ Past Events
+
+
+ Earlier this year
+
+
+ {pastEvents.map((ev) => (
+
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+ )}
+
+ {/* Programs Detail */}
+
+
+
+
+ Our Programs
+
+
+ Career infrastructure, not just events
+
+
+ Each program serves a specific purpose in the Navigator journey —
+ from first engagement through career advancement.
+
+
+
+ {programs.map((program) => (
+
+ {program.title}
+
+ {program.desc}
+
+
+ {program.highlights.map((h) => (
+ -
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Ready to attend?{' '}
+ Let's go.
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/GetInvolvedPage.jsx b/src/pages/GetInvolvedPage.jsx
new file mode 100644
index 0000000..a54a1f8
--- /dev/null
+++ b/src/pages/GetInvolvedPage.jsx
@@ -0,0 +1,182 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const pathways = [
+ {
+ audience: 'Tech Professionals & Students',
+ tag: 'Navigators',
+ title: 'Chart your course in tech',
+ desc: "Join COMPASS as a Navigator and gain access to career-building events, professional development, mentorship, and a community that's invested in your success.",
+ actions: [
+ 'Attend Innovation Summits and networking events',
+ 'Participate in Hack Michigan and Michigan DevFest',
+ 'Access career workshops, resume reviews, and mock interviews',
+ 'Connect with employers actively hiring diverse talent',
+ 'Join our community of 2,200+ tech professionals',
+ ],
+ cta: 'Become a Navigator',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Become a Navigator',
+ },
+ {
+ audience: 'Companies & Hiring Managers',
+ tag: 'Employers',
+ title: "Hire from Michigan's diverse tech talent pipeline",
+ desc: "Access a curated community of prepared, underrepresented tech professionals. Our Navigators aren't just trained — they've been building professional networks, portfolios, and career readiness through COMPASS programming.",
+ actions: [
+ 'Recruit at Innovation Summits and career events',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Co-create co-op and internship pipelines',
+ 'Participate as industry mentors and panelists',
+ 'Access talent that reflects the diversity of Detroit',
+ ],
+ cta: 'Partner as an Employer',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Employer Partnership',
+ },
+ {
+ audience: 'Professional Organizations',
+ tag: 'Coalition Partners',
+ title: 'Build the collective together',
+ desc: 'COMPASS operates as a collective — NSBE, SHPE, SWE, MCWT, GDG, Out in Tech, and more. If your organization serves underrepresented professionals in STEAM, join the collective and amplify your impact.',
+ actions: [
+ 'Co-produce Innovation Summits and events',
+ 'Cross-refer community members and resources',
+ 'Share programming and professional development',
+ 'Expand your reach through coalition events',
+ 'Strengthen the regional ecosystem together',
+ ],
+ cta: 'Join the Collective',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Coalition Partnership',
+ },
+ {
+ audience: 'Corporate & Foundation Partners',
+ tag: 'Sponsors',
+ title: 'Invest in career infrastructure',
+ desc: "Your support funds the programming, events, and resources that create real career outcomes for Navigators. COMPASS sponsorship isn't just brand visibility — it's direct investment in economic mobility.",
+ actions: [
+ 'Fund Innovation Summits and community programming',
+ 'Sponsor Hack Michigan or Michigan DevFest',
+ 'Support Navigator scholarships and certifications',
+ 'Provide venue and technology resources',
+ 'Gain meaningful engagement with diverse tech talent',
+ ],
+ cta: 'Sponsor COMPASS',
+ ctaHref: 'mailto:jritten@compass-detroit.com?subject=Sponsorship Inquiry',
+ },
+]
+
+export default function GetInvolvedPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+
+ There's a place for you at{' '}
+
+ COMPASS.
+
+
+
+ Whether you're a tech professional, a student, an employer, or
+ a community organization — here's how to get started.
+
+
+
+
+ {/* Pathways */}
+
+
+
+ {pw.audience}
+
+
+ {pw.title}
+
+ {pw.desc}
+
+
+
+ {pw.actions.map((action) => (
+ -
+
+ ))}
+
+
+ {pw.cta}
+
+ {/* Contact CTA */}
+
+
+
+
+
+
+
+
+ Not sure where you fit?
+
+
+ Reach out and we'll help you find the right way to engage
+ with COMPASS.
+
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+
+
+
+ )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..2a5bc11
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,947 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import SiteLayout from '@/layouts/SiteLayout'
+import ArrowRightIcon from '@/components/ui/ArrowRightIcon'
+import MapPinIcon from '@/components/ui/MapPinIcon'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+// Partner & sponsor logos — Row 1
+import GoogleLogo from '@/assets/images/sponsors/Google_logo.webp'
+import IBMLogo from '@/assets/images/sponsors/spo-ibm-logo.webp'
+import DTELogo from '@/assets/images/sponsors/spo-dte-logo.webp'
+import LittleCaesarsLogo from '@/assets/images/sponsors/Little_Caesars.webp'
+import MongoDBLogo from '@/assets/images/sponsors/MongoDB.webp'
+import JetBrainsLogo from '@/assets/images/sponsors/Jet_Brains.webp'
+import GrandCircusLogo from '@/assets/images/sponsors/Grand_Circus.webp'
+import CCSLogo from '@/assets/images/sponsors/CCS_logo.webp'
+import AXIOMLogo from '@/assets/images/sponsors/AXIOM.webp'
+import AkkodisLogo from '@/assets/images/sponsors/Akkodis.webp'
+// Partner & sponsor logos — Row 2
+import NSBELogo from '@/assets/images/organizations/org-nsbe-logo.webp'
+import SHPELogo from '@/assets/images/organizations/org-shpe-logo.webp'
+import GDGDetroitLogo from '@/assets/images/organizations/org-gdg-detroit.webp'
+import WTMLogo from '@/assets/images/organizations/org-wtm-logo.webp'
+import WayneStateLogo from '@/assets/images/organizations/Wayne_State_University_seal.webp'
+import CompassDetroitLogo from '@/assets/images/sponsors/Compass_Detroit_logo.webp'
+import SpinDanceLogo from '@/assets/images/sponsors/SpinDance.webp'
+import RIISLogo from '@/assets/images/sponsors/RIIS.webp'
+import ComposablesLogo from '@/assets/images/sponsors/Composables.webp'
+import RebusLogo from '@/assets/images/sponsors/rebus_blue70_on_blue20-260h.webp'
+
+const stats = [
+ {
+ value: 2203,
+ suffix: '',
+ label: 'Community Members',
+ sub: '234% growth over 3 years',
+ },
+ {
+ value: 52,
+ suffix: '%',
+ label: 'Black / African-American',
+ sub: 'Underrepresented talent',
+ },
+ {
+ value: 75,
+ suffix: '%',
+ label: 'Women',
+ sub: 'Leading our community',
+ },
+ {
+ value: 51,
+ suffix: '%',
+ label: 'Actively Job-Seeking',
+ sub: 'Pathways, not more training',
+ },
+]
+
+const row1Logos = [
+ { name: 'Google', logo: GoogleLogo },
+ { name: 'IBM', logo: IBMLogo },
+ { name: 'DTE Energy', logo: DTELogo },
+ { name: 'Little Caesars', logo: LittleCaesarsLogo },
+ { name: 'MongoDB', logo: MongoDBLogo },
+ { name: 'JetBrains', logo: JetBrainsLogo },
+ { name: 'Grand Circus', logo: GrandCircusLogo },
+ { name: 'CCS', logo: CCSLogo },
+ { name: 'AXIOM', logo: AXIOMLogo },
+ { name: 'Akkodis', logo: AkkodisLogo },
+]
+
+const row2Logos = [
+ { name: 'NSBE Detroit', logo: NSBELogo },
+ { name: 'SHPE Detroit', logo: SHPELogo },
+ { name: 'GDG Detroit', logo: GDGDetroitLogo },
+ { name: 'Women Techmakers', logo: WTMLogo },
+ { name: 'Wayne State University', logo: WayneStateLogo },
+ { name: 'Compass Detroit', logo: CompassDetroitLogo },
+ { name: 'SpinDance', logo: SpinDanceLogo },
+ { name: 'RIIS', logo: RIISLogo },
+ { name: 'Composables', logo: ComposablesLogo },
+ { name: 'Rebus', logo: RebusLogo },
+]
+
+function MarqueeRow({ logos, direction = 'left' }) {
+ // Duplicate the logo array so the strip is seamless
+ const doubled = [...logos, ...logos]
+ return (
+
+ {/* Fade edges */}
+
+
+
+ {doubled.map((p, i) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+MarqueeRow.propTypes = {
+ logos: PropTypes.arrayOf(PropTypes.object).isRequired,
+ direction: PropTypes.string,
+}
+
+const allEvents = [
+ {
+ name: 'Black History Month Innovation Summit',
+ date: 'February 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: "International Women's Day Innovation Summit",
+ date: 'March 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+ {
+ name: 'Hispanic Heritage Month Innovation Summit',
+ date: 'September 2026',
+ location: 'Detroit, MI',
+ type: 'Innovation Summit',
+ },
+]
+
+function isUpcoming(dateStr) {
+ const parsed = new Date(`1 ${dateStr}`)
+ const now = new Date()
+ // Compare by month: event is upcoming if its month-end hasn't passed
+ parsed.setMonth(parsed.getMonth() + 1, 0) // last day of event month
+ return parsed >= now
+}
+
+const upcomingEvents = allEvents.filter((ev) => isUpcoming(ev.date))
+
+function CalendarIcon() {
+ return (
+
+ )
+}
+
+// Animated stat counter using intersection observer
+function AnimatedStat({ stat }) {
+ const [count, setCount] = useState(0)
+ const [hasAnimated, setHasAnimated] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting && !hasAnimated) {
+ setHasAnimated(true)
+ const target = stat.value
+ const duration = 1600
+ const startTime = performance.now()
+ const animate = (now) => {
+ const elapsed = now - startTime
+ const progress = Math.min(elapsed / duration, 1)
+ const eased = 1 - Math.pow(1 - progress, 3)
+ setCount(Math.floor(eased * target))
+ if (progress < 1) requestAnimationFrame(animate)
+ }
+ requestAnimationFrame(animate)
+ }
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [hasAnimated, stat.value])
+
+ const formatted =
+ stat.value >= 1000
+ ? count.toLocaleString() + stat.suffix
+ : count + stat.suffix
+
+ return (
+
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+
+ )
+}
+
+AnimatedStat.propTypes = {
+ stat: PropTypes.shape({
+ value: PropTypes.number.isRequired,
+ suffix: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ sub: PropTypes.string.isRequired,
+ }).isRequired,
+}
+
+// Brain drain visualization bar chart
+function TalentGapViz() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.2 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ const bars = [
+ { label: 'STEM grads produced', pct: 100, color: 'bg-primary' },
+ { label: 'Leave MI in 2 years', pct: 45, color: 'bg-red-500/80' },
+ { label: 'Land local tech jobs', pct: 28, color: 'bg-emerald-500/80' },
+ ]
+
+ return (
+
+
+ Michigan Talent Pipeline
+
+
+ The gap isn't skills — it's infrastructure
+
+
+ {bars.map((bar) => (
+
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+// Pipeline funnel visualization
+function PipelineViz() {
+ return (
+
+
+ The COMPASS Model
+
+
+ From community to career
+
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+
+
+ ))}
+
+
+ )
+}
+
+// Retention radial gauge
+function RetentionGauge() {
+ const [visible, setVisible] = useState(false)
+ const ref = useRef(null)
+ const pct = 78
+ const r = 52
+ const circ = 2 * Math.PI * r
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) setVisible(true)
+ },
+ { threshold: 0.3 }
+ )
+ if (ref.current) observer.observe(ref.current)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+ Navigator Retention
+
+
+ Return rate across events
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ )
+}
+
+// Animated compass constellation for hero section
+function HeroVisual() {
+ return (
+
+ {/* Outer glow ring */}
+
+
+
+
+ {/* Floating nodes */}
+ {[
+ { x: '10%', y: '15%', size: 'size-3', delay: '0s', label: 'Engage' },
+ { x: '85%', y: '20%', size: 'size-2.5', delay: '0.5s', label: 'Build' },
+ { x: '75%', y: '80%', size: 'size-3', delay: '1s', label: 'Connect' },
+ { x: '15%', y: '75%', size: 'size-2', delay: '1.5s', label: 'Hire' },
+ ].map((node) => (
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+ )
+}
+
+export default function HomePage() {
+ return (
+
+ {/* Hero — immersive with animated abstract visual */}
+
+ {/* Animated gradient orbs */}
+
+
+
+
+ {/* Subtle grid pattern */}
+
+
+
+
+ {/* Text */}
+
+
+
+
+ 2026 Programming Live
+
+
+
+ Training programs create talent.{' '}
+
+ COMPASS creates pathways.
+
+
+
+ We build the career infrastructure that connects prepared,
+ underrepresented tech talent in Michigan to technology careers —
+ creating confidence, belonging, and economic mobility.
+
+
+
+ Join the Community
+
+
+
+ {/* Trusted By — infinite double marquee */}
+
+
+
+ Trusted by leading organizations
+
+
+
+
+ {/* Stats — animated counters */}
+
+
+
+ Our Impact
+
+
+ The numbers tell the story
+
+
+
+ {stats.map((stat) => (
+
+
+ {/* Mission — with visualizations */}
+
+
+ {/* Community image banner */}
+
+ Our Mission
+
+
+ Building the pathways that don't exist yet.
+
+
+ Detroit is producing tech talent — but losing it. Despite
+ historic investments in training programs, 45% of Michigan STEM
+ graduates leave the state within two years.
+
+
+ {/* Inline viz: the talent gap */}
+
+ The gap isn't skills. It's infrastructure. COMPASS is
+ a 501(c)(3) nonprofit closing this gap through a collective of
+ organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more.
+
+
+ Learn more about our mission
+ What We Do
+
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ {/* Events Preview */}
+
+
+
+
+
+ 2026 Programming
+
+
+ Upcoming Events
+
+
+
+ View all events
+
+ {/* Traction — compact proof points */}
+
+
+
+
+ Proof of Impact
+
+
+ Navigators hired through COMPASS events
+
+
+
+
+ {t.company}
+
+ {t.role}
+
+ ))}
+
+
+ Three Navigators. Three offers. Partners came to our events looking
+ for talent — and found it.
+
+
+
+
+ {/* CTA */}
+
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's build Detroit's pathways{' '}
+
+ together.
+
+
+
+ Whether you're a tech professional, a student, an employer,
+ or a community organization — there's a place for you at
+ COMPASS.
+
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/PreviousEvent.jsx b/src/pages/PreviousEvent.jsx
index 99c7c7b..0e0eef0 100644
--- a/src/pages/PreviousEvent.jsx
+++ b/src/pages/PreviousEvent.jsx
@@ -25,7 +25,7 @@ const PreviousEvent = () => {
Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {
Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx
new file mode 100644
index 0000000..be5df7a
--- /dev/null
+++ b/src/pages/ProgramsPage.jsx
@@ -0,0 +1,191 @@
+import { Link } from 'react-router-dom'
+import SiteLayout from '@/layouts/SiteLayout'
+import CheckIcon from '@/components/ui/CheckIcon'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+const programs = [
+ {
+ title: 'Innovation Summits',
+ tagline: 'Quarterly cultural celebrations of tech excellence',
+ desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.",
+ details: [
+ 'Full-day programming with keynote speakers from major tech companies',
+ 'Technical workshops and hands-on learning sessions',
+ 'Career panels with hiring managers and recruiters',
+ 'Resume reviews and on-site interview opportunities',
+ 'Cultural celebration and community recognition',
+ ],
+ impact: '600+ Navigators served across 3 summits annually',
+ },
+ {
+ title: 'Hack Michigan',
+ tagline: "Michigan's premier community hackathon",
+ desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.',
+ details: [
+ 'Team-based project development over 48 hours',
+ 'Mentorship from industry professionals',
+ 'Multiple prize tracks including social impact',
+ 'Direct recruitment opportunities with sponsors',
+ 'Portfolio building and presentation skills',
+ ],
+ impact: '300+ participants, 50+ projects shipped',
+ },
+ {
+ title: 'Michigan DevFest',
+ tagline: 'A flagship technology conference',
+ desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.',
+ details: [
+ 'Multi-track conference with 30+ sessions',
+ 'Google technology ecosystem deep-dives',
+ 'Speaker opportunities for community members',
+ 'Career pathways workshops and networking',
+ 'Co-produced with GDG Detroit and regional chapters',
+ ],
+ impact: '500+ attendees, 30+ speakers, 8 tracks',
+ },
+ {
+ title: 'Career Pathways',
+ tagline: 'Ongoing professional development',
+ desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.',
+ details: [
+ 'Monthly resume and portfolio review workshops',
+ 'Mock interview preparation with industry professionals',
+ 'Certification study groups (Google Cloud, AWS, CompTIA)',
+ 'Professional development and leadership programming',
+ 'Mentorship matching and career coaching',
+ ],
+ impact: '51% of Navigators actively job-seeking find pathways',
+ },
+]
+
+export default function ProgramsPage() {
+ return (
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ 4 Programs
+
+
+
+ Career infrastructure,{' '}
+
+ not just events.
+
+
+
+ Every COMPASS program serves a specific purpose in the Navigator
+ journey — from first engagement through career advancement.
+ Together, they form the career infrastructure that Michigan's
+ tech talent deserves.
+
+
+
+
+ {/* Programs */}
+
+
+
+
+ {program.title}
+
+
+ {program.tagline}
+
+
+ {program.desc}
+
+
+
+ {/* Details */}
+
+
+ {program.details.map((detail) => (
+ -
+
+ ))}
+
+
+
+ {program.impact}
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+
+ Ready to start your{' '}
+
+ journey?
+
+
+
+ Join as a Navigator, partner as an employer, or sponsor a program
+ — every pathway starts here.
+
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/ResourcesPage.jsx b/src/pages/ResourcesPage.jsx
new file mode 100644
index 0000000..56dfea2
--- /dev/null
+++ b/src/pages/ResourcesPage.jsx
@@ -0,0 +1,334 @@
+import SiteLayout from '@/layouts/SiteLayout'
+import { Link } from 'react-router-dom'
+import PlaceholderImage from '@/components/ui/PlaceholderImage'
+
+function BriefcaseIcon() {
+ return (
+
+ )
+}
+
+function CodeIcon() {
+ return (
+
+ )
+}
+
+function UsersIcon() {
+ return (
+
+ )
+}
+
+function BuildingIcon() {
+ return (
+
+ )
+}
+
+function BellIcon() {
+ return (
+
+ )
+}
+
+const proposedTopics = [
+ {
+ category: 'Career Development',
+ icon:
+ {/* Hero */}
+
+
+
+
+ Resources
+
+
+ Built by the community,{' '}
+ for the community.
+
+
+ We're building a resource hub shaped by what our Navigators
+ actually need. We're asking our membership what they want to
+ hear, see, and learn — and doing our best to find speakers and
+ create content that meet those needs.
+
+
+
+
+ {/* Active callout */}
+
+
+
+
+
+ We want to hear from you
+
+
+ The resources below represent topics our community has expressed
+ interest in. Nothing here is final — everything is driven by what{' '}
+ you tell us matters most.
+ Help us prioritize by sharing what you'd find most valuable.
+
+
+ Share what you want to learn
+
+
+
+
+
+ {/* Proposed topics grid */}
+
+
+
+
+ What We're Hearing
+
+
+ Topics our community is asking for
+
+
+ These are the areas Navigators and members have told us matter
+ most. We're actively sourcing speakers, building workshops,
+ and curating content around these themes.
+
+
+
+ {proposedTopics.map((cat) => (
+
+
+
+
+ {cat.category}
+
+ Community requested
+
+
+
+
+ {cat.topics.map((topic) => (
+ -
+
+ {topic}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {/* How it works */}
+
+
+
+
+ Our Process
+
+
+ Community-driven, always
+
+
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+ {step.num}
+
+ {step.title}
+
+ {step.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ Have a topic in mind?{' '}
+ Tell us.
+
+
+ Whether it's a speaker you want to hear, a skill you want to
+ build, or a resource you wish existed — we're listening.
+
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 028013c..1e52977 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: 'class',
safelist: [
'ribbon-organizer',
'ribbon-facilitator',
@@ -112,6 +113,38 @@ export default {
],
montserrat: ['Montserrat', 'sans-serif'],
biorhyme: ['BioRhyme', 'serif'],
+ inter: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ heading: ['var(--heading-font)'],
+ },
+ // Dark surface palette from redesign (now driven by CSS vars)
+ backgroundColor: {
+ surface: {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ 'theme-surface': {
+ DEFAULT: 'var(--surface)',
+ card: 'var(--surface-card)',
+ elevated: 'var(--surface-elevated)',
+ footer: 'var(--surface-footer)',
+ },
+ },
+ borderColor: {
+ surface: {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ 'theme-border': {
+ DEFAULT: 'var(--border)',
+ light: 'var(--border-light)',
+ },
+ },
+ textColor: {
+ 'theme-primary': 'var(--text-primary)',
+ 'theme-secondary': 'var(--text-secondary)',
+ 'theme-muted': 'var(--text-muted)',
},
},
},
+ Community Breakdown +
++ Racial & ethnic diversity +
+
+
+
+
+ {segments.map((seg) => (
+
+
+
+ {seg.label}
+
+ {seg.pct}%
+
+
+ ))}
+
+
+
+
+
+
+ {/* Abstract visual — network nodes */}
+
+
+
+ 501(c)(3) Nonprofit
+
+
+ + The career infrastructure Detroit's tech talent{' '} + + deserves. + +
++ COMPASS — the Collective of Minority Professionals and STEAM + Societies — is a 501(c)(3) nonprofit building the pathways that + connect prepared, underrepresented tech talent in Michigan to + technology careers. +
+
+
+
+
+ + Our Community +
++ 2,203 Members and Growing +
+
+
+ + 234% member growth over 3 years — driven by word-of-mouth and + events. +
+
+
+
+
+
+
+
+
+
+ + Our Mission +
++ Building the pathways that don't exist yet. +
++ Detroit is producing tech talent — but losing it. Despite + historic investments in training programs, 45% of Michigan STEM + graduates leave the state within two years. The gap isn't + skills. It's infrastructure: no one is connecting prepared + talent to careers. +
++ COMPASS is a 501(c)(3) nonprofit building the career + infrastructure that closes this gap — operating as a collective + of professional organizations including NSBE, SHPE, SWE, MCWT, + Out in Tech, and more. +
+
+
+ + What We Do — and Don't Do +
+
+ {weDo.map((item) => (
+
+
+
+ ))}
+
+ {weDont.map((item) => (
+
+
+ ))}
+
+
+
+
+ + The Collective +
++ Eight organizations, one mission +
+
+ {coalitionOrgs.map((org) => (
+
+
+ {org.logo ? (
+
+ ) : (
+
+ ))}
+
+
+ {org.initials}
+
+
+ )}
+
+ {org.name}
+
+
+
+
+
+
+ {/* Timeline */}
+ + The Navigator Journey +
++ From preparation to prosperity +
++ Navigators are our community members — individuals charting their + course through the technology industry with COMPASS as their + guide. +
+
+ {/* Vertical line */}
+
+
+
+ {journeySteps.map((step) => (
+
+
+ {/* Dot on timeline */}
+
+
+ ))}
+
+
+
+ {step.num}
+
+ {step.title}
++ {step.desc} +
+
+ {step.events.map((ev) => (
+
+ {ev}
+
+ ))}
+
+
+
+
+
+ + Pilot Traction +
++ The model is working +
++ COMPASS partners are not just supporting our events — they're + interviewing and hiring Navigators they meet there. +
+
+ {traction.map((t) => (
+
+
+
+ ))}
+ + Corporate Partner +
++ {t.company} +
+{t.role}
++ {t.detail} +
+
+
+ + Three Navigators. Three job offers. Partners came to our events + looking for talent — and found it. +
+
+
+
+
+
+
+
+
+
+ + Ready to be part of the{' '} + + mission? + +
++ Join the collective of organizations and individuals building + Detroit's tech talent pipeline. +
+
+
+ Get Involved
+
+
+
+ Explore Programs
+
+
+
+
+
+
+
+ 8 Organizations
+
+
+ + A collective built on{' '} + + belonging. + +
++ COMPASS isn't a single organization — it's a coalition of + professional societies united by a shared mission: building career + infrastructure for underrepresented tech talent in Michigan. +
+
+
+
+ {communityStats.map((stat) => (
+
+
+
+ ))}
+
+ {stat.num}
+
+ {stat.label}
+
+
+
+
+ + Our Collective +
++ Stronger together +
++ Each organization in the COMPASS collective brings unique + expertise, networks, and cultural perspective to our shared work. +
+
+ {collective.map((org) => (
+
+
+
+ ))}
+
+ {org.logo ? (
+
+ ) : (
+
+
+
+ {org.initials}
+
+
+ )}
+
+
+ {org.name}
+{org.full}
++ {org.desc} +
+
+
+
+
+
+
+ + For Navigators +
++ Your community is here +
++ As a Navigator, you're not just attending events — + you're joining a community of professionals who share your + background, your ambitions, and your drive. COMPASS programming + is designed to build your confidence, expand your network, and + connect you to real career opportunities. +
+ + Join as a Navigator + +
+
+ + For Employers +
++ Talent is already here +
++ Stop searching. Start connecting. COMPASS events bring you + face-to-face with prepared, diverse tech professionals who are + ready for their next opportunity. Our partners aren't just + sponsoring events — they're hiring the Navigators they meet + there. +
+ + Partner as an Employer + +
+
+
+
+
+ 5 Events Planned
+
+
+ + Where talent meets{' '} + + opportunity. + +
++ From Innovation Summits to hackathons to Michigan DevFest — every + COMPASS event is designed to build confidence, create connections, + and open career pathways. +
+
+
+
+
+ {/* Horizontal flow */}
+ + The Navigator Journey +
++ How everything connects +
++ Every COMPASS event maps to a stage in the Navigator journey. + Attend any event and you're progressing toward career + outcomes. +
+
+ {journeyStages.map((stage, i) => (
+
+
+
+ ))}
+
+
+ {stage.label}
+
+
+ {stage.desc}
+
+
+ {i < journeyStages.length - 1 && (
+
+ )}
+
+
+
+
+ + 2026 Calendar +
++ Upcoming Events +
+
+ {/* Timeline accent line */}
+
+ {events.map((ev) => (
+
+
+ {/* Timeline dot */}
+
+
+ ))}
+
+
+
+
+
+
+
+ {ev.type}
+
+
+
+ {ev.month}
+
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+ + {ev.desc} +
+ {/* Journey stage tags */} +
+ {ev.stages.map((stageId) => {
+ const stage = journeyStages.find(
+ (s) => s.id === stageId
+ )
+ return stage ? (
+
+ {stage.label}
+
+ ) : null
+ })}
+
+
+
+ + Past Events +
++ Earlier this year +
+
+ {pastEvents.map((ev) => (
+
+
+
+ ))}
+
+
+
+ Completed
+
+
+
+ {ev.month}
+
+
+
+
+
+ {ev.name}
+
+
+
+ {ev.date}
+
+
+
+
+
+
+
+ + Our Programs +
++ Career infrastructure, not just events +
++ Each program serves a specific purpose in the Navigator journey — + from first engagement through career advancement. +
+
+ {programs.map((program) => (
+
+
+
+ ))}
+ {program.title}
++ {program.desc} +
+-
+ {program.highlights.map((h) => (
+
-
+
+ {h} +
+ ))}
+
+
+
+
+
+ + Ready to attend?{' '} + Let's go. +
++ Join as a Navigator, partner as an employer, or sponsor a program + — every pathway starts here. +
+
+
+ Get Involved
+
+
+ Explore Programs
+
+
+
+
+
+
+
+ 4 Pathways
+
+
+ + There's a place for you at{' '} + + COMPASS. + +
++ Whether you're a tech professional, a student, an employer, or + a community organization — here's how to get started. +
+
+
+
+ {pathways.map((pw) => (
+
+
+
+ ))}
+
+
+
+
+ {pw.tag}
+
+
+ + {pw.audience} +
++ {pw.title} +
+{pw.desc}
+
+
+ -
+ {pw.actions.map((action) => (
+
-
+
+ {action} +
+ ))}
+
+
+
+
+
+
+
+
+ + Not sure where you fit? +
++ Reach out and we'll help you find the right way to engage + with COMPASS. +
+
+
+
+ jritten@compass-detroit.com
+
+
+
+ 810-441-3259
+
+
+ {doubled.map((p, i) => (
+
+
+
+
+ ))}
+
+ {formatted}
+
+ {stat.label}
+ {stat.sub}
+ + Michigan Talent Pipeline +
++ The gap isn't skills — it's infrastructure +
+
+ {bars.map((bar) => (
+
+
+
+ ))}
+
+ {bar.label}
+ {bar.pct}%
+
+
+
+
+ + The COMPASS Model +
++ From community to career +
+
+ {[
+ {
+ step: 'Engage',
+ desc: 'Innovation Summits & events',
+ width: 'w-full',
+ opacity: 'opacity-100',
+ },
+ {
+ step: 'Build',
+ desc: 'Skills, confidence & network',
+ width: 'w-[85%]',
+ opacity: 'opacity-90',
+ },
+ {
+ step: 'Connect',
+ desc: 'Employers meet Navigators',
+ width: 'w-[70%]',
+ opacity: 'opacity-80',
+ },
+ {
+ step: 'Hire',
+ desc: 'Co-ops, roles & careers',
+ width: 'w-[55%]',
+ opacity: 'opacity-100',
+ },
+ ].map((item) => (
+
+
+
+ ))}
+
+
+
+
+ {item.step}
+
+ {item.desc}
+
+ + Navigator Retention +
++ Return rate across events +
+
+
+
+
+ {[
+ { label: 'Attended 2+ events', value: '78%' },
+ { label: 'Referred a peer', value: '41%' },
+ { label: 'Joined coalition org', value: '23%' },
+ ].map((item) => (
+
+
+
+ {item.label}
+
+ {item.value}
+
+
+ ))}
+
+
+
+ {node.label}
+
+
+ ))}
+
+ {/* Center compass element */}
+
+
+
+ {/* Connecting lines */}
+
+
+ {/* Floating stat cards */}
+
+
+
+
+
+ 52%
+ Black / African-American
+
+
+ 75%
+ Women Leaders
+
+
+
+ {/* Text */}
+
+
+
+
+ {/* Abstract visual — compass constellation */}
+
+
+
+
+ 2026 Programming Live
+
+
+ + Training programs create talent.{' '} + + COMPASS creates pathways. + +
++ We build the career infrastructure that connects prepared, + underrepresented tech talent in Michigan to technology careers — + creating confidence, belonging, and economic mobility. +
+
+
+ Join the Community
+
+
+ {/* Social proof strip */}
+
+
+
+ {[
+ 'bg-primary',
+ 'bg-emerald-500',
+ 'bg-indigo-500',
+ 'bg-rose-400',
+ ].map((bg, i) => (
+
+
+ {['JR', 'MK', 'AS', 'TL'][i]}
+
+ ))}
+
+
+ 2,203+ Navigators
+
+ and growing every month
+
+
+
+ + Trusted by leading organizations +
+
+
+
+
+ + Our Impact +
++ The numbers tell the story +
+
+ {stats.map((stat) => (
+
+
+ {/* Community image banner */}
+
+
+
+
+
+ + Our Mission +
++ Building the pathways that don't exist yet. +
++ Detroit is producing tech talent — but losing it. Despite + historic investments in training programs, 45% of Michigan STEM + graduates leave the state within two years. +
+ + {/* Inline viz: the talent gap */} ++ The gap isn't skills. It's infrastructure. COMPASS is + a 501(c)(3) nonprofit closing this gap through a collective of + organizations: NSBE, SHPE, SWE, MCWT, Out in Tech, and more. +
+ + Learn more about our mission
+ {/* Pipeline visualization */}
+
+
+
+ + What We Do +
+
+ {[
+ 'Recruit and prepare talent',
+ 'Build confidence and belonging',
+ 'Connect Navigators to opportunities',
+ 'Provide wraparound support',
+ 'Partner with employers for career exposure',
+ ].map((item) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ View all events + 2026 Programming +
++ Upcoming Events +
+
+ {upcomingEvents.map((ev) => (
+
+
+
+ ))}
+
+
+
+ {ev.type}
+
+
+
+
+
+ {ev.name}
+
+
+ {ev.date}
+
+
+
+
+
+ View all events
+
+
+
+
+ + Proof of Impact +
++ Navigators hired through COMPASS events +
+
+
+
+ {[
+ {
+ company: 'DTE Energy',
+ role: 'Co-Op (2+ semesters)',
+ type: 'Corporate Partner',
+ },
+ {
+ company: 'Little Caesars',
+ role: 'Software Engineer',
+ type: 'Corporate Partner',
+ },
+ {
+ company: 'IBM',
+ role: 'Product Manager',
+ type: 'Technology Partner',
+ },
+ ].map((t) => (
+
+
+
+ {t.type}
+
+
+ ))}
+ + {t.company} +
+{t.role}
++ Three Navigators. Three offers. Partners came to our events looking + for talent — and found it. +
+
+ {/* Animated background layers */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Let's build Detroit's pathways{' '} + + together. + +
++ Whether you're a tech professional, a student, an employer, + or a community organization — there's a place for you at + COMPASS. +
+
+
+ Become a Navigator
+
+
+
+ Partner with COMPASS
+
+
+ Sponsor an Event
+
+
+ Event Not Found
@@ -64,7 +64,7 @@ const PreviousEvent = () => {Michigan DevFest {year}
diff --git a/src/pages/ProgramsPage.jsx b/src/pages/ProgramsPage.jsx new file mode 100644 index 0000000..be5df7a --- /dev/null +++ b/src/pages/ProgramsPage.jsx @@ -0,0 +1,191 @@ +import { Link } from 'react-router-dom' +import SiteLayout from '@/layouts/SiteLayout' +import CheckIcon from '@/components/ui/CheckIcon' +import PlaceholderImage from '@/components/ui/PlaceholderImage' + +const programs = [ + { + title: 'Innovation Summits', + tagline: 'Quarterly cultural celebrations of tech excellence', + desc: "Each Innovation Summit is tied to a cultural heritage month — Black History Month, International Women's Day, Hispanic Heritage Month — and brings together 200+ Navigators, employers, and community partners for a day of keynotes, workshops, career panels, and networking.", + details: [ + 'Full-day programming with keynote speakers from major tech companies', + 'Technical workshops and hands-on learning sessions', + 'Career panels with hiring managers and recruiters', + 'Resume reviews and on-site interview opportunities', + 'Cultural celebration and community recognition', + ], + impact: '600+ Navigators served across 3 summits annually', + }, + { + title: 'Hack Michigan', + tagline: "Michigan's premier community hackathon", + desc: 'A weekend-long hackathon bringing together developers, designers, data scientists, and domain experts to build solutions for real-world challenges. Participants gain portfolio-worthy projects, industry mentorship, and direct connections to employers.', + details: [ + 'Team-based project development over 48 hours', + 'Mentorship from industry professionals', + 'Multiple prize tracks including social impact', + 'Direct recruitment opportunities with sponsors', + 'Portfolio building and presentation skills', + ], + impact: '300+ participants, 50+ projects shipped', + }, + { + title: 'Michigan DevFest', + tagline: 'A flagship technology conference', + desc: 'Produced in partnership with Google Developer Groups, Michigan DevFest is a full-day, multi-track technology conference covering cloud, AI/ML, mobile, web, and career development — featuring talks from industry practitioners and community leaders.', + details: [ + 'Multi-track conference with 30+ sessions', + 'Google technology ecosystem deep-dives', + 'Speaker opportunities for community members', + 'Career pathways workshops and networking', + 'Co-produced with GDG Detroit and regional chapters', + ], + impact: '500+ attendees, 30+ speakers, 8 tracks', + }, + { + title: 'Career Pathways', + tagline: 'Ongoing professional development', + desc: 'Year-round programming that prepares Navigators for their next career move. From resume workshops and mock interviews to portfolio reviews and certification study groups — Career Pathways is the connective tissue between COMPASS events and career outcomes.', + details: [ + 'Monthly resume and portfolio review workshops', + 'Mock interview preparation with industry professionals', + 'Certification study groups (Google Cloud, AWS, CompTIA)', + 'Professional development and leadership programming', + 'Mentorship matching and career coaching', + ], + impact: '51% of Navigators actively job-seeking find pathways', + }, +] + +export default function ProgramsPage() { + return ( +
+
+
+
+
+ 4 Programs
+
+
+ + Career infrastructure,{' '} + + not just events. + +
++ Every COMPASS program serves a specific purpose in the Navigator + journey — from first engagement through career advancement. + Together, they form the career infrastructure that Michigan's + tech talent deserves. +
+
+
+
+
+
+ {programs.map((program, i) => (
+
+
+
+ ))}
+
+ {/* Info */}
+
+
+
+ 0{i + 1}
+
+
+
+ {/* Details */}
+ + {program.title} +
++ {program.tagline} +
++ {program.desc} +
+
+
+ -
+ {program.details.map((detail) => (
+
-
+
+ {detail} +
+ ))}
+
+
+ + {program.impact} +
+
+
+
+
+
+
+
+
+ + Ready to start your{' '} + + journey? + +
++ Join as a Navigator, partner as an employer, or sponsor a program + — every pathway starts here. +
+
+
+ See Upcoming Events
+
+
+
+ Get Involved
+
+
+
+
+ + Resources +
++ Built by the community,{' '} + for the community. +
++ We're building a resource hub shaped by what our Navigators + actually need. We're asking our membership what they want to + hear, see, and learn — and doing our best to find speakers and + create content that meet those needs. +
+
+
+
+
+
+ + We want to hear from you +
++ The resources below represent topics our community has expressed + interest in. Nothing here is final — everything is driven by what{' '} + you tell us matters most. + Help us prioritize by sharing what you'd find most valuable. +
+ + Share what you want to learn + +
+
+
+
+
+
+ + What We're Hearing +
++ Topics our community is asking for +
++ These are the areas Navigators and members have told us matter + most. We're actively sourcing speakers, building workshops, + and curating content around these themes. +
+
+ {proposedTopics.map((cat) => (
+
+
+
+ ))}
+
+
+
+
+
+ {cat.category}
+ + Community requested + +-
+ {cat.topics.map((topic) => (
+
- + + {topic} + + ))} +
+
+
+
+ + Our Process +
++ Community-driven, always +
+
+ {[
+ {
+ num: '01',
+ title: 'Listen',
+ desc: 'We survey our Navigators and members to understand what skills, topics, and support they need most right now.',
+ },
+ {
+ num: '02',
+ title: 'Source',
+ desc: 'We find speakers, build workshops, partner with experts, and curate content that directly addresses those needs.',
+ },
+ {
+ num: '03',
+ title: 'Deliver',
+ desc: 'Resources launch through our events, online hub, and community channels — then we listen again and iterate.',
+ },
+ ].map((step) => (
+
+
+
+ {step.num}
+
+
+ ))}
+ {step.title}
++ {step.desc} +
+
+
+
+
+
+ + Have a topic in mind?{' '} + Tell us. +
++ Whether it's a speaker you want to hear, a skill you want to + build, or a resource you wish existed — we're listening. +
+
+
+ Suggest a Resource
+
+
+ Join the Community
+
+
+