add zines to our projects

src/pages/OurProjects.astro

@@ -104,6 +104,7 @@ import "../styles/globals.css";
 
           <div class="justify-items-center">
             <img
+<<<<<<< HEAD
               src="/assets/pet-calendar-2026-cover.jpg"
               alt="photo collage of cats"
               width="330"
@@ -116,6 +117,15 @@ import "../styles/globals.css";
             >
           </div>
 
+=======
+              src="/assets/zines-thumbnail.png"
+              alt="zines"
+              width="250"
+              class="border object-cover w-[250px] h-[250px]"
+            />
+            <a href="/OurProjectsPages/Zines/" class="underline decoration-solid">Zines</a>
+          </div>
+>>>>>>> 01fd965 (add zines to our projects)
         </div>
       </div>
     </div>

src/pages/OurProjectsPages/Zines.astro

@@ -0,0 +1,45 @@
+---
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Layout from "../../layouts/Layout.astro";
+import { ZineGrid } from "../../components/zines/ZineGrid";
+import "../../styles/globals.css";
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load activePage="OurProjects" />
+      <div class="px-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Zines</h1>
+        <p class="mb-6">
+          We create and share zines about technology, power, and resistance.
+          Click on a zine to read it in our interactive flipbook viewer!
+        </p>
+
+        <ZineGrid client:load />
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>
+
+<style>
+  :global(.flipbook-container) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 520px;
+  }
+
+  :global(.flipbook) {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  }
+
+  :global(.page) {
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>