addressing feedback

2. add book club page

.dockerignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

.drone.yml

@@ -0,0 +1,24 @@
+---
+kind: pipeline
+name: default
+
+steps:
+- name: build and publish docker image
+  image: plugins/docker
+  settings:
+    repo: git.coopcloud.tech/rtm/rtmwebsite
+    tags:
+      - main
+      - latest
+      - 0.0.8
+    platform: linux/amd64
+    username:
+      from_secret: USERNAME
+    password:
+      from_secret: PASSWORD
+    registry: git.coopcloud.tech
+trigger:
+  branch:
+    - main
+  event:
+    - push

.gitignore

@@ -22,3 +22,9 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+# Emacs
+*~
+
+# Drone
+.drone.secrets

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:lts AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine AS runtime
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 8080

README.md

@@ -1,3 +1,5 @@
+[![Build Status](https://build.coopcloud.tech/api/badges/RTM/rtm-website/status.svg)](https://build.coopcloud.tech/RTM/rtm-website)
+
 # hello friends !
 
 
@@ -40,4 +42,87 @@ npx astro dev
 - [Astro](https://astro.build/) - The core framework
 - [React](https://reactjs.org/) - For interactive components
 - [Tailwind CSS](https://tailwindcss.com/) - For styling (find docs [here](https://tailwindcss.com/docs/installation/using-vite))
-- [TypeScript](https://www.typescriptlang.org/) - For type safety
+- [TypeScript](https://www.typescriptlang.org/) - For type safety
+  
+# To release a new version
+
+## Build in the docker image (make sure you have Docker installed!)
+
+Set the version to the next [semantic version](https://semver.org/) after the version posted at [our co-op cloud's packages site](https://git.coopcloud.tech/RTM/-/packages) under "rtmwebsite":
+
+``` bash
+version=<specify-version>
+docker build --platform linux/amd64 -t git.coopcloud.tech/rtm/rtmwebsite:$version .
+```
+
+## Push the image to gitea registery
+
+Check out [this documentation](https://docs.gitea.com/next/usage/packages/container) for how to login with gitea registery.
+
+``` bash
+# If not in the same terminal session, rerun `version=...` line from last step
+docker push git.coopcloud.tech/rtm/rtmwebsite:$version
+```
+
+At [our co-op cloud's packages site](https://git.coopcloud.tech/RTM/-/packages), click on "rtmwebsite" and check that the version mentioned is the version you specified!
+
+## Update recipe
+
+We use a [private recipe](https://git.coopcloud.tech/RTM/rtm-astro-recipe) to deploy this website. This step needs Wireguard to be activated (download Wireguard and ask Sootie's owner to create a config for you and give you Docker permissions). The following examples will assume your name in Sootie's config is "blueberry"!
+
+You will need to have wget (`brew install wget` on mac) and [abra](https://docs.coopcloud.tech/abra/) installed.
+
+Create an SSH key to use with Sootie with the following command. Take note of the file where you save the key. The following examples will assume it is saved to `rtm` and that the `.ssh` directory is in your home directory (which you can find with the command `echo $HOME`).
+
+```ssh-keygen -t ed25519```
+
+
+Run the following commands to install the SSH key to Sootie as an authorized key:
+
+```
+ssh-copy-id -i $HOME/.ssh/rtm.pub blueberry@resisttechmonopolies.online
+ssh -i $HOME/.ssh/rtm 'blueberry@resisttechmonopolies.online'          
+```
+
+
+In the `$HOME/.ssh/config` file (which you may have to create if it does not exist), paste the following:
+
+```
+Host resisttechmonopolies.online
+  Hostname resisttechmonopolies.online
+  User blueberry
+  UseKeychain yes
+  IdentityFile ~/.ssh/rtm
+```
+
+You should now be able to SSH into Sootie with just the command `ssh resisttechmonopolies.online`
+
+
+Run the following command (outside of the terminal in which you ran ssh in the previous step)
+
+```abra server add resisttechmonopolies.online```
+
+Clone the `sootie-config` repo into your `$HOME/.abra/servers/resisttechmonopolies.online` directory:
+
+``` bash
+git clone https://git.coopcloud.tech/RTM/sootie-config.git .
+# DON'T FORGET THE . AT THE END OF THE COMMAND
+```
+
+Clone the `rtm-astro-recipe` repo into your `$HOME/.abra/recipes` directory:
+
+```git clone https://git.coopcloud.tech/RTM/rtm-astro-recipe.git```
+
+
+Update the version number to the latest in 
+
+``` bash
+.abra/servers/resisttechmonopolies.online/resisttechmonopolies.online.env
+```
+
+Then
+``` bash
+abra app undeploy resisttechmonopolies.online
+# wait 10 seconds
+abra app deploy resisttechmonopolies.online
+```

nginx/nginx.conf

@@ -0,0 +1,31 @@
+worker_processes  1;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  server {
+    listen 8080;
+    server_name   _;
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    include /etc/nginx/mime.types;
+
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+    error_page 404 /404.html;
+    location = /404.html {
+            root /usr/share/nginx/html;
+            internal;
+    }
+
+    location / {
+            try_files $uri $uri/index.html =404;
+    }
+  }
+}

src/assets/astro.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

src/assets/background.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

src/components/Card.astro

@@ -0,0 +1,24 @@
+---
+export interface Props {
+  title: string;
+  bigTech: string;
+  alternatives: Array<{ name: string; description: string; url: string }>;
+  bgClass: string;
+}
+
+const { title, bigTech, alternatives, bgClass } = Astro.props;
+---
+
+<div class={`border rounded-lg p-6 shadow-md ${bgClass} text-gray-900`}>
+  <h2 class="text-2xl font-semibold mb-4">{title}</h2>
+  <p class="text-base mb-4"><span class="line-through">Big Tech Option: {bigTech}</span></p>
+  <ul class="space-y-4">
+    {alternatives.map(alt => (
+      <li>
+        <h3 class="text-lg font-bold underline">{alt.name}</h3>
+        <p>{alt.description}</p>
+        <a href={alt.url} class="text-blue-500 hover:text-blue-700">Website</a>
+      </li>
+    ))}
+  </ul>
+</div>

src/components/Navbar.tsx

@@ -1,52 +1,58 @@
 import { cn } from "@/lib/utils";
 
-export default function Navbar() {
+interface NavbarProps {
+  activePage?: string;
+}
+
+export default function Navbar({ activePage = "" }: NavbarProps) {
   return (
     <>
       <div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}>
         <div>
           <strong className={cn("sm:text-2xl md:text-4xl")}>
-            <a href="/">Resist Tech Monopolies</a>
+            <a 
+                className={cn(
+                  activePage === "Home" && "border-b-2 border-black-500",
+                )}
+            href="/">Resist Tech Monopolies</a>
           </strong>
         </div>
-        <strong className={cn("sm:text-1xl flex gap-4 md:text-4xl")}>
-          <a href="/GetInvolved/" className={cn("text-blue-500")}>
-            Get Involved
-          </a>
-          <a href="/PointsOfUnity/" className={cn("text-green-500")}>
+        <strong className={cn("sm:text-1xl flex gap-10 md:text-4xl")}>
+       
+          <a
+            href="/PointsOfUnity/"
+            className={cn(
+              "text-green-500",
+              activePage === "PointsOfUnity" && "border-b-2 border-green-500",
+            )}
+          >
             Points of Unity
           </a>
-          <a href="/WhatWereWorkingOn/" className={cn("text-red-500")}>
+          <a
+            href="/WhatWereWorkingOn/"
+            className={cn(
+              "text-red-500",
+              activePage === "WhatWereWorkingOn" && "border-b-2 border-red-500",
+            )}
+          >
             What We're Working On
           </a>
         </strong>
       </div>
 
       <div className={cn("flex flex-row justify-between pb-8")}>
-        {[
-          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
-        ].map(() => (
-          <>
-            <a
-              href="https://www.flaticon.com/free-icons/computer"
-              title="computer icons"
-            >
-              <img
-                src="/computer.png"
-                alt="computer icon"
-                width="30"
-                height="30"
+        <div className="w-full grid grid-flow-col">
+          {Array.from({ length: 12 }).map((_, index) => (
+            <div key={index} className="flex justify-center">
+              <img 
+                src={index % 2 === 0 ? "/assets/computer.png" : "/assets/people.png"} 
+                alt={index % 2 === 0 ? "computer icon" : "people icon"} 
+                width="30" 
+                height="30" 
               />
-            </a>
-
-            <a
-              href="https://www.flaticon.com/free-icons/people"
-              title="people icons"
-            >
-              <img src="/people.png" alt="people icon" width="30" height="30" />
-            </a>
-          </>
-        ))}
+            </div>
+          ))}
+        </div>
       </div>
     </>
   );

src/pages/GetInvolved.astro

@@ -8,20 +8,11 @@ import "../styles/globals.css";
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load activePage="GetInvolved" />
       <div class="pl-4 pr-4">
         <h1 class="text-3xl font-semibold">Get Involved</h1>
         
-        <div class="my-8">
-          <a 
-            href="https://shlink.resisttechmonopolies.online/HNrZG" 
-            class="px-6 py-3 bg-[#80aaff] text-white font-semibold rounded-md hover:bg-[#6090e0] transition-colors"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Sign Up Here
-          </a>
-        </div>
+        
       </div>
     </div>
     <Footer />

src/pages/PointsOfUnity.astro

@@ -8,33 +8,44 @@ import "../styles/globals.css";
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load activePage="PointsOfUnity" />
       <div class="pl-4 pr-4">
         <h1 class="text-3xl font-semibold">Points of Unity</h1>
-        <p>
+
+        <p class="mb-4">
           We situate ourselves in our context - as Seattle residents and as
           users and creators of the technologies we aim to resist. We are seeing
-          long-spanning rise of fascism within all levels of governance, from
-          Seattle city council to national governments here and abroad. In
-          parallel is the increasing power of tech companies over our lives
+          a long-spanning rise of fascism within all levels of governance, from
+          Seattle city council to national governments here and abroad.
+        </p>
+
+        <p class="mb-4">
+          In parallel is the increasing power of tech companies over our lives
           through surveillance and the provisioning of everyday needs, from
           employment to how we get our internet utilities in the first place.
           There are rising income disparities across the nation, but also more
           specifically across everyone who can be considered a "tech worker":
           from a CEO to a software engineer to a contractor to a child slave
-          mining cobalt in the Congo. Technology contributes to gentrification
-          both through the tech-enabled financialization of real estate as well
-          as the gentrifying waves of tech workers moving into cities. Increased
-          technical sophisication of militaries and carceral systems have
-          created the first "AI genocide" in Palestine; increased militarization
-          of borders such as the US-Mexico and the surveillance of migrants;
-          increased police brutality worldwide, all disparately impacting people
-          of the global majority. All of these crises are enabled and worsened
-          by technology companies. As tech workers of various kinds living in
-          the imperial core, on stolen Coast Salish land covered by the broken
-          Treaty of Point Elliot of 1855, we understand how our labor is
-          contributing - directly or indirectly - to these oppressions, and seek
-          to use our skills towards more liberatory ends.
+          mining cobalt in the Congo.
+        </p>
+
+        <p class="mb-4">
+          Technology contributes to gentrification both through the tech-enabled
+          financialization of real estate as well as the gentrifying waves of
+          tech workers moving into cities. Increased technical sophisication of
+          militaries and carceral systems have created the first "AI genocide"
+          in Palestine; increased militarization of borders such as the
+          US-Mexico and the surveillance of migrants; increased police brutality
+          worldwide, all disparately impacting people of the global majority.
+        </p>
+
+        <p class="mb-4">
+          All of these crises are enabled and worsened by technology companies.
+          As tech workers of various kinds living in the imperial core, on
+          stolen Coast Salish land covered by the broken Treaty of Point Elliot
+          of 1855, we understand how our labor is contributing - directly or
+          indirectly - to these oppressions, and seek to use our skills towards
+          more liberatory ends. &lt;3
         </p>
       </div>
     </div>

src/pages/WhatWereWorkingOn.astro

@@ -8,10 +8,60 @@ import "../styles/globals.css";
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load activePage="WhatWereWorkingOn" />
       <div class="pl-4 pr-4">
-        <h1 class="text-3xl font-semibold">What We're Working On</h1>
-        <p>Pihole Workshop</p>
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">What We're Working On</h1>
+        <div class="flex flex-row gap-8">
+          <!-- <div class="justify-items-center">
+            <img
+              src="/assets/calendar.png"
+              alt="stack of books"
+              width="250"
+              class="border pb-4"
+            />
+
+            <a
+              href="/WhatWereWorkingOnPages/Calendar/"
+              class="underline decoration-solid">Calendar</a
+            >
+          </div> -->
+
+          <div class="justify-items-center">
+            <img
+              src="/assets/pihole.jpeg"
+              alt="pihole parts"
+              width="250"
+              class="border"
+            />
+            <a
+              href="/WhatWereWorkingOnPages/Pihole/"
+              class="underline decoration-solid">Pihole Workshop</a
+            >
+          </div>
+
+          <div class="justify-items-center">
+            <img
+              src="/assets/book-club.jpg"
+              alt="stack of books"
+              width="280"
+              class="border"
+            />
+            <a
+              href="/WhatWereWorkingOnPages/BookClub/"
+              class="underline decoration-solid">Book Club</a
+            >
+          </div>
+
+          <div class="justify-items-center">
+            <img
+              src="/assets/computer.png"
+              alt="computer"
+              width="250"
+              class="border"
+            />
+            <a href="/WhatWereWorkingOnPages/Alternatives/" class="underline decoration-solid">Big Tech Alternatives</a>
+          </div>
+        </div>
       </div>
     </div>
     <Footer />

src/pages/WhatWereWorkingOnPages/Alternatives.astro

@@ -0,0 +1,101 @@
+---
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Layout from "../../layouts/Layout.astro";
+import "../../styles/globals.css";
+
+
+import Card from "../../components/Card.astro";
+
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load activePage="WhatWereWorkingOn" />
+      <div class="pl-4 pr-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Big Tech Alternatives</h1>
+        <p class="mb-4">Explore open-source and privacy-focused alternatives to popular big tech software.</p>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <Card 
+            title="Browsers" 
+            bigTech="Chrome (Google)" 
+            alternatives={[
+              { name: 'Firefox', description: 'Privacy-focused browser.', url: 'https://www.mozilla.org/firefox' },
+              { name: 'Brave', description: 'Ad-blocking browser.', url: 'https://brave.com' }
+            ]}
+            bgClass="bg-blue-50" 
+          />
+
+          <Card 
+            title="Cloud Storage" 
+            bigTech="Google Drive" 
+            alternatives={[
+              { name: 'Nextcloud', description: 'Self-hosted file sync and share.', url: 'https://nextcloud.com' }
+            ]}
+            bgClass="bg-indigo-50" 
+          />
+
+          <Card 
+            title="Email" 
+            bigTech="Gmail (Google)" 
+            alternatives={[
+              { name: 'ProtonMail', description: 'Encrypted email.', url: 'https://protonmail.com' },
+            ]}
+            bgClass="bg-yellow-50" 
+          />
+
+          <Card 
+            title="Maps" 
+            bigTech="Google Maps" 
+            alternatives={[
+              { name: 'OpenStreetMap', description: 'Community-driven maps.', url: 'https://www.openstreetmap.org' }
+            ]}
+            bgClass="bg-teal-50" 
+          />
+
+          <Card 
+            title="Messaging" 
+            bigTech="WhatsApp (Meta), Slack" 
+            alternatives={[
+              { name: 'Signal', description: 'Encrypted messaging (alternative to WhatsApp).', url: 'https://signal.org' },
+              { name: 'Element', description: 'Matrix-based chat (alternative to Slack).', url: 'https://element.io' }
+            ]}
+            bgClass="bg-red-50" 
+          />
+
+          <Card 
+            title="Search Engines" 
+            bigTech="Google Search" 
+            alternatives={[
+              { name: 'DuckDuckGo', description: 'Privacy-protecting search.', url: 'https://duckduckgo.com' },
+            ]}
+            bgClass="bg-green-50" 
+          />
+
+          <Card 
+            title="Social Media" 
+            bigTech="Twitter (X), Facebook (Meta)" 
+            alternatives={[
+              { name: 'Mastodon', description: 'Decentralized social network (alternative to Twitter).', url: 'https://joinmastodon.org' },
+              { name: 'Diaspora', description: 'Decentralized social network (alternative to Facebook).', url: 'https://diasporafoundation.org' }
+            ]}
+            bgClass="bg-purple-50" 
+          />
+
+          <Card 
+            title="Video Platforms" 
+            bigTech="YouTube (Google)" 
+            alternatives={[
+              { name: 'PeerTube', description: 'Decentralized video hosting.', url: 'https://joinpeertube.org' },
+            ]}
+            bgClass="bg-pink-50" 
+          />
+
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>

src/pages/WhatWereWorkingOnPages/BookClub.astro

@@ -0,0 +1,48 @@
+---
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Layout from "../../layouts/Layout.astro";
+import "../../styles/globals.css";
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load activePage="WhatWereWorkingOn" />
+      <div class="pl-4 pr-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Book Club</h1>
+        <p class="mb-4">
+          We read and discuss books about technology, power, and resistance. If
+          you have book suggestions, fill out the interest form on our <a
+            href="/"
+            class="underline">website homepage</a
+          > and let us know when we get in contact with you!
+        </p>
+
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold">Current Book</h2>
+            <div>
+              Race After Technology - Ruha Benjamin (see <a
+                class="underline"
+                href="https://www.dropbox.com/scl/fi/jnzvtiry7jn3xrts2n703/RAT-Discussion-Guide.pdf?rlkey=pq6ovaeydhcm8yi2u7lzzmiuj&e=2&dl=0"
+                >discussion guide</a
+              >)
+            </div>
+          </div>
+
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold">Past Books</h2>
+            <div class="flex flex-col gap-4">
+              <ul class="list-disc pl-6">
+                <li>Common Circuits - Luis Felipe R. Murillo</li>
+                <li>Internet for the People - Ben Tarnoff</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>

src/pages/WhatWereWorkingOnPages/Calendar.astro

@@ -0,0 +1,21 @@
+---
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Layout from "../../layouts/Layout.astro";
+import "../../styles/globals.css";
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load activePage="Calendar" />
+      <div class="pl-4 pr-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Calendar</h1>
+        <div class="flex flex-col gap-4">
+          <p class="mb-4">See what we're doing next!</p>
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>

src/pages/WhatWereWorkingOnPages/Pihole.astro

@@ -0,0 +1,19 @@
+---
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Layout from "../../layouts/Layout.astro";
+import "../../styles/globals.css";
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar />
+      <div class="pl-4 pr-4">
+        <h1 class="text-3xl font-semibold">Pihole</h1>
+       
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>

src/pages/index.astro

@@ -8,15 +8,26 @@ import "@/styles/globals.css";
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load activePage="Home" />
 
-      <div class="pl-4 pr-4">
+      <div class="pl-4 pr-4 text-xl leading-[2]">
         <p>
           Do you believe technology can and should be used for good? Do you
           think a democratic internet could liberate us? Join us!
         </p>
 
         <p>We share this vision, and we want to work together to achieve it.</p>
+
+        <div class="my-8">
+          <a 
+            href="https://shlink.resisttechmonopolies.online/HNrZG" 
+            class="px-6 py-3 bg-[#80aaff] text-white font-semibold rounded-md hover:bg-[#6090e0] transition-colors"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Fill Out Our Interest Form!
+          </a>
+        </div>
       </div>
     </div>