[CSSG-12]: Add global navbar and public pages (Home, About, Contact, Projects) #8
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import type { Metadata } from "next"; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: "About Us", | ||
| description: | ||
| "Learn about CS + Social Good at UNC Chapel Hill, our mission, and how we build technology for community impact.", | ||
| }; | ||
|
|
||
| const goals = [ | ||
| "Complete impactful, technically challenging projects for nonprofit clients, pro bono, to lighten the heavy burden these organizations face.", | ||
| "Provide a space for students to learn about the intersection of computer science and social good, and to connect with other students who are interested in this field.", | ||
| "Create opportunities for professional development and industry connections for our members, with an emphasis on partners who make a positive impact.", | ||
| ]; | ||
|
|
||
| const structureItems = [ | ||
| { | ||
| title: "Projects", | ||
| icon: "</>", | ||
| description: | ||
| "The projects team is responsible for building projects benefiting nonprofits in the Chapel Hill area and beyond.", | ||
| }, | ||
| { | ||
| title: "Education", | ||
| icon: "Edu", | ||
| description: | ||
| "The education team is responsible for running semester-long classes to teach members the technical skills required for membership on a project team.", | ||
| }, | ||
| { | ||
| title: "Engagement", | ||
| icon: "Com", | ||
| description: | ||
| "The engagement team is responsible for organizing events, performing marketing, and hosting workshops for our members.", | ||
| }, | ||
| { | ||
| title: "Strategy", | ||
| icon: "Plan", | ||
| description: | ||
| "The strategy team is responsible for developing and executing the long-term vision and strategy for CS+SG.", | ||
| }, | ||
| ]; | ||
|
|
||
| export default function AboutPage() { | ||
| return ( | ||
| <main className="relative min-h-[calc(100vh)] overflow-hidden bg-[radial-gradient(circle_at_center,#2f6f9f_0%,#184566_40%,#081c2e_100%)]"> | ||
| <div className="pointer-events-none absolute inset-0 shadow-[inset_0_0_180px_rgba(0,0,0,0.55)]" /> | ||
|
|
||
| <div className="relative mx-auto max-w-6xl px-6 py-20 text-white"> | ||
| <section className="rounded-4xl bg-white/92 border border-cyan-100/15 px-6 py-10 text-slate-900 shadow-[0_25px_90px_rgba(4,18,33,0.22)] md:px-12 md:py-14"> | ||
| <h1 className="font-mono text-2xl font-bold tracking-tight md:text-3xl">Our Goals</h1> | ||
|
|
||
|
Member
There was a problem hiding this comment. Reuse: The numbered goal block is a repeated structure. Consider a small |
||
| <div className="mt-10 space-y-8 md:space-y-10"> | ||
| {goals.map((goal, index) => ( | ||
| <div | ||
| key={goal} | ||
| className="grid gap-3 md:grid-cols-[72px_1fr] md:items-start md:gap-10" | ||
| > | ||
| <div className="text-(--color-accent) text-3xl font-bold leading-none md:text-5xl"> | ||
| {index + 1} | ||
| </div> | ||
| <p className="max-w-4xl text-base leading-8 text-slate-900 md:text-[1.45rem] md:leading-[1.45]"> | ||
| {goal} | ||
| </p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </section> | ||
|
|
||
| <div className="mx-auto my-8 h-10 w-full max-w-6xl rounded-full bg-[linear-gradient(90deg,#173654_0%,#245c83_50%,#173654_100%)] opacity-95" /> | ||
|
|
||
| <section className="rounded-4xl bg-white/92 border border-cyan-100/15 px-6 py-10 text-slate-900 shadow-[0_25px_90px_rgba(4,18,33,0.22)] md:px-12 md:py-14"> | ||
| <h2 className="font-mono text-2xl font-bold tracking-tight md:text-3xl">Our Structure</h2> | ||
| <p className="mt-4 max-w-3xl text-sm text-slate-500 md:text-lg"> | ||
|
Member
There was a problem hiding this comment. Reuse: This card pattern (rounded border, title, icon, description) is similar to Contact’s info cards and Projects’ project cards. Consider a shared |
||
| CS+SG is comprised of a variety of components, each with a unique focus. | ||
| </p> | ||
|
|
||
| <div className="mt-12 grid gap-8 md:grid-cols-2 xl:grid-cols-4"> | ||
| {structureItems.map((item) => ( | ||
| <article | ||
| key={item.title} | ||
| className="flex h-full flex-col items-center rounded-3xl border border-slate-200 bg-white px-6 py-8 text-center shadow-[0_18px_40px_rgba(15,23,42,0.08)]" | ||
| > | ||
| <h3 className="text-xl font-medium text-slate-950">{item.title}</h3> | ||
| <div className="text-(--color-accent) mt-4 text-xl font-bold uppercase tracking-wide"> | ||
| {item.icon} | ||
| </div> | ||
| <p className="mt-5 text-sm leading-7 text-slate-500 md:text-base"> | ||
| {item.description} | ||
| </p> | ||
| </article> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </main> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import type { Metadata } from "next"; | ||
| import Link from "next/link"; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: "Contact Us", | ||
| description: | ||
| "Contact CS + Social Good at UNC Chapel Hill for general questions, partnerships, and collaboration opportunities.", | ||
| }; | ||
|
|
||
| const socialLinks = [ | ||
|
Member
There was a problem hiding this comment. Data vs presentation: |
||
| { | ||
| name: "GitHub", | ||
| href: "https://github.com/cssgunc", | ||
| icon: ( | ||
| <svg viewBox="0 0 24 24" aria-hidden="true" className="h-5 w-5 fill-current"> | ||
| <path d="M12 1.5a10.5 10.5 0 0 0-3.32 20.46c.53.1.72-.23.72-.51v-1.79c-2.93.64-3.55-1.25-3.55-1.25-.48-1.22-1.17-1.54-1.17-1.54-.96-.65.07-.64.07-.64 1.07.07 1.63 1.1 1.63 1.1.94 1.62 2.47 1.15 3.07.88.1-.68.37-1.15.67-1.42-2.34-.27-4.81-1.17-4.81-5.22 0-1.15.41-2.08 1.08-2.82-.11-.27-.47-1.38.1-2.88 0 0 .88-.28 2.88 1.08a9.97 9.97 0 0 1 5.24 0c2-1.36 2.88-1.08 2.88-1.08.57 1.5.21 2.61.1 2.88.67.74 1.08 1.67 1.08 2.82 0 4.06-2.48 4.95-4.84 5.21.38.33.72.97.72 1.96v2.91c0 .28.19.62.73.51A10.5 10.5 0 0 0 12 1.5Z" /> | ||
| </svg> | ||
| ), | ||
| }, | ||
| { | ||
| name: "LinkedIn", | ||
| href: "https://www.linkedin.com/company/unc-cs-social-good/", | ||
| icon: ( | ||
| <svg viewBox="0 0 24 24" aria-hidden="true" className="h-5 w-5 fill-current"> | ||
| <path d="M6.94 8.5H3.56V20h3.38V8.5Zm.22-3.56C7.15 3.83 6.28 3 5.25 3S3.34 3.83 3.34 4.94c0 1.1.85 1.94 1.88 1.94h.03c1.04 0 1.91-.84 1.91-1.94ZM20.66 13.08c0-3.47-1.85-5.08-4.33-5.08-2 0-2.89 1.1-3.39 1.88V8.5H9.56c.04.91 0 11.5 0 11.5h3.38v-6.42c0-.34.02-.67.12-.91.27-.67.89-1.36 1.93-1.36 1.36 0 1.91 1.03 1.91 2.54V20H20.3v-6.92c0-.37.01-.73.01-1Z" /> | ||
| </svg> | ||
| ), | ||
| }, | ||
| { | ||
| name: "Instagram", | ||
| href: "https://www.instagram.com/unc_cssg/", | ||
| icon: ( | ||
| <svg | ||
| viewBox="0 0 24 24" | ||
| aria-hidden="true" | ||
| className="h-5 w-5 fill-none stroke-current stroke-[1.8]" | ||
| > | ||
| <rect x="3.5" y="3.5" width="17" height="17" rx="4.5" /> | ||
| <circle cx="12" cy="12" r="4.2" /> | ||
| <circle cx="17.4" cy="6.6" r="1" fill="currentColor" stroke="none" /> | ||
| </svg> | ||
| ), | ||
| }, | ||
| ]; | ||
|
Member
There was a problem hiding this comment. Reuse: Same page shell as About and Projects (gradient + overlay). Consider using a shared |
||
|
|
||
| export default function ContactPage() { | ||
| return ( | ||
| <main className="relative min-h-[calc(100vh)] overflow-hidden bg-[radial-gradient(circle_at_center,#2f6f9f_0%,#184566_40%,#081c2e_100%)]"> | ||
| <div className="pointer-events-none absolute inset-0 shadow-[inset_0_0_180px_rgba(0,0,0,0.55)]" /> | ||
|
|
||
| <div className="relative mx-auto max-w-5xl px-6 py-20 text-white"> | ||
| <h1 className="text-3xl font-bold text-[#63e8c7] md:text-4xl">Contact Us</h1> | ||
| <p className="mt-4 max-w-3xl text-base leading-7 text-white/85 md:text-lg"> | ||
| Interested in partnering with CS + Social Good or joining our team? Reach out and we can | ||
| connect you with the right people. | ||
|
Member
There was a problem hiding this comment. Reuse: These article cards share the same visual pattern as About’s structure cards and Projects’ project cards. A shared card component (e.g. |
||
| </p> | ||
|
|
||
| <section className="mt-12 grid gap-6 md:grid-cols-2"> | ||
| <article className="rounded-2xl border border-cyan-100/15 bg-cyan-100/5 p-6"> | ||
| <h2 className="text-xl font-semibold text-[#63e8c7]">General Inquiries</h2> | ||
| <p className="mt-3 text-sm leading-6 text-white/80 md:text-base"> | ||
| For questions about meetings, membership, or events, email us and we will reply as | ||
| soon as possible. | ||
| </p> | ||
| <Link | ||
| href="mailto:cssgunc@gmail.com" | ||
| className="mt-4 inline-block text-sm font-medium text-[#63e8c7] underline-offset-4 transition hover:underline" | ||
| > | ||
| cssgunc@gmail.com | ||
| </Link> | ||
| </article> | ||
|
|
||
| <article className="rounded-2xl border border-cyan-100/15 bg-cyan-100/5 p-6"> | ||
| <h2 className="text-xl font-semibold text-[#63e8c7]">Socials</h2> | ||
| <p className="mt-3 text-sm leading-6 text-white/80 md:text-base"> | ||
| Follow CS + Social Good online for updates on projects, events, and campus activity. | ||
| </p> | ||
| <div className="mt-5 space-y-3"> | ||
| {socialLinks.map((link) => ( | ||
| <Link | ||
| key={link.name} | ||
| href={link.href} | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="flex items-center gap-3 rounded-xl border border-cyan-100/10 bg-white/5 px-4 py-3 text-sm font-medium text-white/90 transition hover:border-cyan-300/40 hover:text-[#63e8c7]" | ||
| > | ||
| <span className="text-[#63e8c7]">{link.icon}</span> | ||
| <span>{link.name}</span> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| </article> | ||
| </section> | ||
| </div> | ||
| </main> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,50 @@ | ||
| @import "tailwindcss"; | ||
|
|
||
| :root { | ||
| --color-surface-950: #081c2e; | ||
| --color-surface-900: #0b2031; | ||
| --color-surface-700: #184566; | ||
| --color-accent: #63e8c7; | ||
| --color-accent-strong: #7ff2d6; | ||
| --color-text-primary: #f4fbff; | ||
| --color-text-muted: rgba(244, 251, 255, 0.82); | ||
| --color-border-soft: rgba(186, 232, 255, 0.2); | ||
| --navbar-height: 72px; | ||
| } | ||
|
|
||
| @theme inline { | ||
| --color-background: var(--color-surface-950); | ||
| --color-foreground: var(--color-text-primary); | ||
| --font-sans: var(--font-geist-sans); | ||
| --font-mono: var(--font-geist-mono); | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| html, | ||
| body { | ||
| min-height: 100%; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| background: var(--color-surface-950); | ||
| color: var(--color-text-primary); | ||
| font-family: | ||
| var(--font-geist-sans), | ||
| ui-sans-serif, | ||
| system-ui, | ||
| -apple-system, | ||
| sans-serif; | ||
| line-height: 1.5; | ||
| } | ||
|
|
||
| a { | ||
| color: inherit; | ||
| } | ||
|
|
||
| main { | ||
| min-height: calc(100vh - var(--navbar-height)); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Avoid large pages / reuse: This page shell (gradient background + overlay) is duplicated on Contact and Projects. Consider extracting a
PublicPageLayout(orPublicPageShell) that renders the gradient + overlay and acceptschildren(and optionallyclassName), then use it on all four public pages so the shell lives in one place.