Updated home page

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

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<navbarProps> = ({ links }) => {
+  return (
+    <nav>
+      <ul>
+        {links.map((link, index) => (
+          <li key={index}>
+            <a href={link.url}>{link.text}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export default Navbar

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,16 @@ 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 +68,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: 0.75rem;
   font-size: clamp(3rem, 10vw, 6.5rem);
 }
 
@@ -102,7 +106,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 +129,7 @@ h2 {
 }
 
 h3 {
-  font-size: 1.35rem;
+  font-size: 1rem;
 }
 
 .principles__list p {
@@ -134,7 +138,7 @@ h3 {
 
 @media (min-width: 48rem) {
   .hero {
-    padding: 5rem 3rem;
+    padding: 5rem 1.5rem;
   }
 
   .principles {

app/layout.tsx

@@ -2,19 +2,30 @@ 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',
-  description:
-    'Find a community service opportunity, make a difference, and share what was completed.',
+  title: 'SideCause',
+  description: '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 (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <div>
+          <Navbar links={navLinks} />
+        </div>
+        {children}
+      </body>
     </html>
   )
 }

app/page.tsx

@@ -1,41 +1,37 @@
+import Navbar from './Navbar'
 export default function HomePage() {
   return (
     <main>
       <section className="hero" aria-labelledby="hero-title">
         <div className="hero__content">
-          <p className="eyebrow">Sidecause</p>
-          <h1 id="hero-title">Small acts can move a community forward.</h1>
+          <p className="eyebrow">SideCause</p>
+          <h2 id="hero-title">Find community service projects and level up!</h2>
           <p className="hero__lede">
-            Sidecause will help neighbors find practical ways to contribute
-            their time, from a one-hour errand to a weekend project.
-          </p>
-          <p className="hero__note">
-            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.
           </p>
         </div>
       </section>
 
       <section className="principles" aria-labelledby="principles-title">
         <div className="section-heading">
           <p className="eyebrow">How it works</p>
-          <h2 id="principles-title">A clear path from need to impact.</h2>
         </div>
         <ol className="principles__list">
           <li>
             <span aria-hidden="true">01</span>
-            <h3>Find a cause</h3>
-            <p>Browse opportunities that need a neighbor’s help.</p>
+            <h3>Post a Quest!</h3>
+            <p>Users can share work that needs to be done.</p>
           </li>
           <li>
             <span aria-hidden="true">02</span>
-            <h3>Make a commitment</h3>
-            <p>Claim one task at a time and know exactly what is needed.</p>
+            <h3>Accept a Quest!</h3>
+            <p>Users can accept work from the community board.</p>
           </li>
           <li>
             <span aria-hidden="true">03</span>
-            <h3>See it through</h3>
-            <p>Mark the work finished so the community can see progress.</p>
+            <h3>Level Up!</h3>
+            <p>Once complete, earn XP and level up.</p>
           </li>
         </ol>
       </section>