[CSSG-12]: Add global navbar and public pages (Home, About, Contact, Projects) by youzThomas · Pull Request #8 · cssgunc/cssg-admin

youzThomas · 2026-03-10T19:54:32Z

Linear

Issue: CSSG-12

What changes

Added the shared public-site navigation and page shell
Built the core public-facing pages for Home, About, Contact, and Projects
Replaced placeholder content with updated CSSG-specific content and contact details
Refined styling, spacing, metadata, and utility-class cleanup across the frontend

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

Lint, format, and tests pass locally (bun run lint:all, bun run format:check:all, bun run test:all)
Run cd apps/frontend && bun run build
Run cd apps/frontend && bun run dev
Review /, /about, /contact, and /projects
Confirm the navbar appears across public pages and the links/layout render correctly
Confirm the About, Contact, and Projects pages show the updated non-placeholder content

Notes

/login and /signup remain placeholders until the auth routes from the other team are merged.
I validated the frontend app with bun run lint and bun run build.

…t fetch code

…styles

…adata

…sg info

…ssg project info

linear · 2026-03-10T19:54:35Z

CSSG-12 Frontend: Implement Public-Facing Pages & Global Navbar

pmoharana-cmd

Review focused on keeping pages smaller, reusing components, and passing data via props. Inline comments are on the specific files/lines below.

pmoharana-cmd · 2026-03-14T03:52:27Z

apps/frontend/components/public-navbar.tsx

+import Image from "next/image";
+import Link from "next/link";
+
+const navLinks = [


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).

pmoharana-cmd · 2026-03-14T03:52:28Z

apps/frontend/components/public-navbar.tsx

+  { href: "/contact", label: "Contact" },
+];
+
+export function PublicNavbar() {


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.

Just for the first iteration make a type that has href and label in the object type

pmoharana-cmd · 2026-03-14T03:52:28Z

apps/frontend/app/about/page.tsx

+
+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%)]">


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.

pmoharana-cmd · 2026-03-14T03:52:28Z

apps/frontend/app/about/page.tsx

+      <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>
+


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.

pmoharana-cmd · 2026-03-14T03:52:28Z

apps/frontend/app/about/page.tsx

+
+        <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">


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.

pmoharana-cmd · 2026-03-14T03:52:28Z

apps/frontend/app/contact/page.tsx

+      </svg>
+    ),
+  },
+];


Reuse: Same page shell as About and Projects (gradient + overlay). Consider using a shared PublicPageLayout component so this isn’t duplicated in three files.

pmoharana-cmd · 2026-03-14T03:52:28Z

apps/frontend/app/contact/page.tsx

+        <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.


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.

pmoharana-cmd · 2026-03-14T03:52:28Z

apps/frontend/app/projects/page.tsx

+  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)]" />
+


Reuse: Same gradient + overlay shell as About and Contact. Consider a PublicPageLayout component used across all public pages so the shell is defined once.

pmoharana-cmd · 2026-03-14T03:52:28Z

apps/frontend/app/projects/page.tsx

+          {projects.map((project) => (
+            <article
+              key={project.title}
+              className="rounded-2xl border border-cyan-100/15 bg-cyan-100/5 p-6"


Reuse: This card structure (rounded border, title, description) matches Contact and About. Consider a shared PublicCard or SectionCard with title and description (or children) props so all pages use the same component and pass the correct data.

pmoharana-cmd · 2026-03-14T03:52:28Z

apps/frontend/app/page.tsx

+};

+export default function Home() {
  return (


Consistency: Home uses the same gradient + overlay as About, Contact, and Projects. For consistency and to avoid duplication, consider using the same PublicPageLayout (or PublicPageShell) here so the background and overlay are defined in one place.

cherg0607yl-coder and others added 13 commits March 4, 2026 10:30

test-commit

2cf633e

Basic homepage and about us

908880e

feat(frontend): add shared public navbar shell

609a94c

feat(frontend): add public contact and projects pages

1920e39

refactor(frontend): clean up home/about pages and remove unused clien…

2217a4b

…t fetch code

style(frontend): add global design tokens and responsive navbar base …

b31d452

…styles

chore(frontend): add project metadata defaults and page-level SEO met…

3631ff3

…adata

style(frontend): replace top-left corner with cssg logo

b9e6983

refactor(frontend): replacing placeholding info in about page with cs…

83b0e31

…sg info

refactor(frontend): replaced contact page with correct info

ec3ed28

refactor(frontend): replaced placeholding info in project page with c…

74772ea

…ssg project info

refactor(frontend): navbar distance adjustment

0c1202a

fix: problems fixed

9bc2e7f

youzThomas self-assigned this Mar 10, 2026

youzThomas requested a review from pmoharana-cmd March 10, 2026 19:54

fix: CI failure fixed

a5fe0d3

pmoharana-cmd reviewed Mar 14, 2026

View reviewed changes

Conversation

youzThomas commented Mar 10, 2026

Linear

What changes

Why it's being done

Summary

How to verify

Notes

Uh oh!

linear bot commented Mar 10, 2026

Uh oh!

pmoharana-cmd left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants