[CSSG-12]: Add global navbar and public pages (Home, About, Contact, Projects)#8
[CSSG-12]: Add global navbar and public pages (Home, About, Contact, Projects)#8pmoharana-cmd merged 15 commits intomainfrom
Conversation
pmoharana-cmd
left a comment
pmoharana-cmd
left a comment
There was a problem hiding this comment.
Review focused on keeping pages smaller, reusing components, and passing data via props. Inline comments are on the specific files/lines below.
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
|
|
||
| const navLinks = [ |
There was a problem hiding this comment.
Component reuse / props: Consider accepting nav links via an optional prop (e.g. links?: { href: string; label: string }[]) with a default to the current list. That keeps the navbar reusable and testable if links ever differ by context (e.g. logged-in vs public).
| { href: "/contact", label: "Contact" }, | ||
| ]; | ||
|
|
||
| export function PublicNavbar() { |
There was a problem hiding this comment.
Props: PublicNavbar currently takes no props. Adding optional props for links and possibly auth CTAs (e.g. showAuth?: boolean or loginHref / signupHref) would make the component more flexible and ensure call sites pass the right data.
There was a problem hiding this comment.
Just for the first iteration make a type that has href and label in the object type
apps/frontend/app/about/page.tsx
Outdated
|
|
||
| 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%)]"> |
There was a problem hiding this comment.
Avoid large pages / reuse: This page shell (gradient background + overlay) is duplicated on Contact and Projects. Consider extracting a PublicPageLayout (or PublicPageShell) that renders the gradient + overlay and accepts children (and optionally className), then use it on all four public pages so the shell lives in one place.
| <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> | ||
|
|
There was a problem hiding this comment.
Reuse: The numbered goal block is a repeated structure. Consider a small GoalItem (or generic numbered content block) that takes index and children so the page stays thin and the pattern is reusable.
apps/frontend/app/about/page.tsx
Outdated
|
|
||
| <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"> |
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 PublicCard or SectionCard with props like title, description (or children), and optional icon so styling and structure are defined once and each page passes the right props.
| </svg> | ||
| ), | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
Reuse: Same page shell as About and Projects (gradient + overlay). Consider using a shared PublicPageLayout component so this isn’t duplicated in three files.
apps/frontend/app/contact/page.tsx
Outdated
| <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. |
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. PublicCard) with title and children/description would reduce duplication and ensure consistent props at each call site.
3 participants
Linear
Issue: CSSG-12
What changes
Why it's being done
This PR implements the public-facing frontend pages and shared navigation required by CSSG-12. It also replaces placeholder content so the site is closer to the current CSSG branding and ready for team review.
Summary
This PR builds the foundational public website experience for CSSG, including the shared navbar and the four main public pages. It also updates page content and styling to better reflect the current organization site and reviewed requirements.
How to verify
bun run lint:all,bun run format:check:all,bun run test:all)cd apps/frontend && bun run buildcd apps/frontend && bun run dev/,/about,/contact, and/projectsNotes
/loginand/signupremain placeholders until the auth routes from the other team are merged.bun run lintandbun run build.