From e01a7d2e321ff3a0e65a7f51f823364a89f76f80 Mon Sep 17 00:00:00 2001 From: Parker Close Date: Mon, 5 Oct 2026 11:14:34 -0700 Subject: [PATCH 1/2] Updated home page - navbar added, but only links to homepage for now --- app/Navbar.css | 25 +++++++++++++++++++++++++ app/Navbar.tsx | 22 ++++++++++++++++++++++ app/globals.css | 18 +++++++++--------- app/layout.tsx | 19 ++++++++++++++++--- app/page.tsx | 25 ++++++++++--------------- 5 files changed, 82 insertions(+), 27 deletions(-) create mode 100644 app/Navbar.css create mode 100644 app/Navbar.tsx diff --git a/app/Navbar.css b/app/Navbar.css new file mode 100644 index 0000000..39a3770 --- /dev/null +++ b/app/Navbar.css @@ -0,0 +1,25 @@ +nav { + background-color: rgba(75, 207, 141, 0.473); + color: black; +} + +ul { + list-style-type: none; + margin: 1rem; + padding: 0; + display: flex; + justify-content: space-around; +} + +li { + padding: 15px; +} + +a { + color: black; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/app/Navbar.tsx b/app/Navbar.tsx new file mode 100644 index 0000000..a13d528 --- /dev/null +++ b/app/Navbar.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import './Navbar.css'; + +type navbarProps = { + links: { text: string; url: string }[]; +}; + +const Navbar: React.FC = ({ links }) => { + return ( + + ); +}; + +export default Navbar; diff --git a/app/globals.css b/app/globals.css index f26b700..931371d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -17,7 +17,7 @@ html { } body { - margin: 0; + margin: 10px; color: var(--ink); background: var(--canvas); font-family: Arial, Helvetica, sans-serif; @@ -33,12 +33,12 @@ p { } .hero { - min-height: 66vh; + min-height: 33vh; display: grid; align-items: end; - padding: 3rem 1.5rem; + padding: 1.5rem 1.5rem; background: - linear-gradient(130deg, transparent 0 62%, rgb(225 182 117 / 44%) 62% 100%), + linear-gradient(15deg, transparent 0 22%, rgba(75, 194, 188, 0.44) 82% 100%), var(--accent-soft); } @@ -64,13 +64,13 @@ h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; - font-weight: 500; + font-weight: 250; line-height: 1.08; } h1 { max-width: 12ch; - margin-top: 1rem; + margin-top: .75rem; font-size: clamp(3rem, 10vw, 6.5rem); } @@ -102,7 +102,7 @@ h2 { .principles__list { display: grid; gap: 0; - margin: 3rem 0 0; + margin: 1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); @@ -125,7 +125,7 @@ h2 { } h3 { - font-size: 1.35rem; + font-size: 1rem; } .principles__list p { @@ -134,7 +134,7 @@ h3 { @media (min-width: 48rem) { .hero { - padding: 5rem 3rem; + padding: 5rem 1.5rem; } .principles { diff --git a/app/layout.tsx b/app/layout.tsx index 52d30d6..e9505b6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,19 +2,32 @@ import type { Metadata } from 'next' import type { ReactNode } from 'react' import './globals.css' +import Navbar from './Navbar' export const metadata: Metadata = { - title: 'Sidecause | Community service, made practical', + title: 'SideCause', description: - 'Find a community service opportunity, make a difference, and share what was completed.', + 'Complete community service projects and level up!', } + +const navLinks = [ + { text: 'SideCause', url: '/' }, + { text: 'Posts', url: '/' }, + { text: 'Login', url: '/' } +]; + export default function RootLayout({ children, }: Readonly<{ children: ReactNode }>) { return ( - {children} + +
+ +
+ {children} + ) } diff --git a/app/page.tsx b/app/page.tsx index fec621a..8a69a34 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,17 +1,13 @@ +import Navbar from './Navbar' export default function HomePage() { return (
-

Sidecause

-

Small acts can move a community forward.

+

SideCause

+

Find community service projects and level up!

- Sidecause will help neighbors find practical ways to contribute - their time, from a one-hour errand to a weekend project. -

-

- The community board is being built. Check back soon to browse - opportunities or share one of your own. + SideCause is a community post board for posting and completing community service in your neighborhood.

@@ -19,23 +15,22 @@ export default function HomePage() {

How it works

-

A clear path from need to impact.

  1. -

    Find a cause

    -

    Browse opportunities that need a neighbor’s help.

    +

    Post a Quest!

    +

    Users can share work that needs to be done.

  2. -

    Make a commitment

    -

    Claim one task at a time and know exactly what is needed.

    +

    Accept a Quest!

    +

    Users can accept work from the community board.

  3. -

    See it through

    -

    Mark the work finished so the community can see progress.

    +

    Level Up!

    +

    Once complete, earn XP and level up.

From 4a9925e0a36b6d24b9f5e84d156e90b26d072dae Mon Sep 17 00:00:00 2001 From: Parker Close Date: Mon, 5 Oct 2026 14:43:01 -0700 Subject: [PATCH 2/2] prettier ran on app/ --- app/Navbar.css | 50 ++++++++++++++++++++++++------------------------- app/Navbar.tsx | 44 +++++++++++++++++++++---------------------- app/globals.css | 8 ++++++-- app/layout.tsx | 10 ++++------ app/page.tsx | 3 ++- 5 files changed, 59 insertions(+), 56 deletions(-) diff --git a/app/Navbar.css b/app/Navbar.css index 39a3770..1b8c4c8 100644 --- a/app/Navbar.css +++ b/app/Navbar.css @@ -1,25 +1,25 @@ -nav { - background-color: rgba(75, 207, 141, 0.473); - color: black; -} - -ul { - list-style-type: none; - margin: 1rem; - padding: 0; - display: flex; - justify-content: space-around; -} - -li { - padding: 15px; -} - -a { - color: black; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} \ No newline at end of file +nav { + background-color: rgba(75, 207, 141, 0.473); + color: black; +} + +ul { + list-style-type: none; + margin: 1rem; + padding: 0; + display: flex; + justify-content: space-around; +} + +li { + padding: 15px; +} + +a { + color: black; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} diff --git a/app/Navbar.tsx b/app/Navbar.tsx index a13d528..666e49a 100644 --- a/app/Navbar.tsx +++ b/app/Navbar.tsx @@ -1,22 +1,22 @@ -import React from 'react'; -import './Navbar.css'; - -type navbarProps = { - links: { text: string; url: string }[]; -}; - -const Navbar: React.FC = ({ links }) => { - return ( - - ); -}; - -export default Navbar; +import React from 'react' +import './Navbar.css' + +type navbarProps = { + links: { text: string; url: string }[] +} + +const Navbar: React.FC = ({ links }) => { + return ( + + ) +} + +export default Navbar diff --git a/app/globals.css b/app/globals.css index 931371d..b1b960d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -38,7 +38,11 @@ p { align-items: end; padding: 1.5rem 1.5rem; background: - linear-gradient(15deg, transparent 0 22%, rgba(75, 194, 188, 0.44) 82% 100%), + linear-gradient( + 15deg, + transparent 0 22%, + rgba(75, 194, 188, 0.44) 82% 100% + ), var(--accent-soft); } @@ -70,7 +74,7 @@ h3 { h1 { max-width: 12ch; - margin-top: .75rem; + margin-top: 0.75rem; font-size: clamp(3rem, 10vw, 6.5rem); } diff --git a/app/layout.tsx b/app/layout.tsx index e9505b6..1fd14f7 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -6,23 +6,21 @@ import Navbar from './Navbar' export const metadata: Metadata = { title: 'SideCause', - description: - 'Complete community service projects and level up!', + description: 'Complete community service projects and level up!', } - const navLinks = [ { text: 'SideCause', url: '/' }, { text: 'Posts', url: '/' }, - { text: 'Login', url: '/' } -]; + { text: 'Login', url: '/' }, +] export default function RootLayout({ children, }: Readonly<{ children: ReactNode }>) { return ( - +
diff --git a/app/page.tsx b/app/page.tsx index 8a69a34..548bfc5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,7 +7,8 @@ export default function HomePage() {

SideCause

Find community service projects and level up!

- SideCause is a community post board for posting and completing community service in your neighborhood. + SideCause is a community post board for posting and completing + community service in your neighborhood.