finally finished??

src/components/BlogPost.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="flex flex-col items-center pt-8 pb-8">
-    <h1 class="text-5xl text-center max-w-[600px]">
+    <h1 class="text-5xl text-center max-w-[700px]">
         <slot name="title">Title</slot>
     </h1>
     <img class="w-60" src={scribble} alt="Scribble" />

src/components/Header.svelte

@@ -1,14 +1,15 @@
 <script>
     import logo from "$lib/graphics/logo.svg";
+    import facebook from "$lib/graphics/facebook-circle.svg";
 
     let scrollY = 0;
 </script>
 
 <svelte:window bind:scrollY />
 
 <header
-    class={`sticky top-0 z-50 grid items-center grid-cols-3 p-6 ${
-        scrollY > 100 ? "bg-palette-100" : "bg-none"
+    class={`sticky top-0 z-50 grid items-center grid-cols-3 p-4 ${
+        scrollY > 50 ? "bg-palette-100" : "bg-none"
     }`}
 >
     <a class="flex flex-row items-center gap-x-2" href="/">
@@ -26,4 +27,10 @@
             <a class="text-lg font-bold" href="/volunteer">Volunteer</a>
         </li>
     </ul>
+    <a
+        class="justify-self-end"
+        href="https://www.facebook.com/profile.php?id=61553471998676"
+    >
+        <img class="w-6" src={facebook} alt="Facebook" />
+    </a>
 </header>

src/components/OrgCard.svelte

@@ -0,0 +1,31 @@
+<script>
+    import placeholder from "$lib/img/placeholder-square.png";
+    export let image = placeholder;
+    export let link = "/";
+</script>
+
+<div class="flex flex-row items-center justify-around w-[100%]">
+    <a class="w-48" href={link}>
+        <img
+            class="rounded-full outline-dashed outline-2 outline-offset-2 outline-palette-900"
+            src={image}
+            alt="Logo"
+        />
+    </a>
+    <div class="flex flex-col items-center gap-y-12">
+        <a
+            href={link}
+            class="text-4xl text-center underline underline-offset-8 w-[600px]"
+        >
+            <slot name="name">Name</slot>
+        </a>
+        <p class="text-xl text-center w-[800px]">
+            <slot name="content"
+                >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat.</slot
+            >
+        </p>
+    </div>
+</div>

src/routes/+page.svelte

@@ -47,7 +47,7 @@
 
     <!-- SUSTAINABLE DEFINITION -->
 
-    <div class="flex flex-row items-center justify-around mt-8">
+    <div class="flex flex-row items-center justify-around mt-16 mb-16">
         <div class="flex flex-row items-center gap-x-4">
             <img class="w-16" src={logo} alt="Logo" />
             <div class="flex flex-col items-center gap-y-1">

src/routes/blog/+page.svelte

@@ -1,5 +1,6 @@
 <script>
     import BlogPost from "../../components/BlogPost.svelte";
+    import scribble from "$lib/graphics/scribble.svg";
     import infographic1 from "$lib/img/infographic-1.jpg";
     import infographic2 from "$lib/img/infographic-2.jpg";
     import infographic3 from "$lib/img/infographic-3.jpg";
@@ -11,7 +12,7 @@
 
 <div class="flex flex-col gap-y-16">
     <BlogPost author="Chlsy Velasco" published="November 11, 2023">
-        <h1 slot="title">We Are so Young and Naive. And We Got Things Done.</h1>
+        <h1 slot="title">We are so Young and Naive. And We Got Things Done.</h1>
         <p slot="content">
             According to Climate Education from Yale's Program on Climate Change
             Communication, younger generations (generation Z) are more engaged

src/routes/volunteer/+page.svelte

@@ -1 +1,30 @@
-volunteer
+<script>
+    import scribble from "$lib/graphics/scribble.svg";
+    import OrgCard from "../../components/OrgCard.svelte";
+    import { orgStore } from "../../stores/stores";
+</script>
+
+<div class="flex flex-col items-center mt-8 -space-y-2">
+    <h1 class="text-4xl text-center">The Sustainable<br />Organizations</h1>
+    <img class="w-56" src={scribble} alt="Scribble" />
+</div>
+
+<div class="flex flex-col items-center mt-8">
+    <p class="text-xl text-center w-[800px]">
+        Consider choosing one organization that resonates with your passion and
+        values. Whether it's reforestation, marine conservation, or sustainable
+        development, your unique skills and dedication can contribute to
+        positive change. By volunteering your time, you become an integral part
+        of the solution, actively working towards a healthier and more
+        sustainable future.
+    </p>
+</div>
+
+<div class="flex flex-col items-center mt-24 mb-8 gap-y-16">
+    {#each $orgStore as org}
+        <OrgCard image={org.image} link={org.link}>
+            <h1 slot="name">{org.name}</h1>
+            <p slot="content">{org.content}</p>
+        </OrgCard>
+    {/each}
+</div>