From 88f6919e7353e7e06952e65d38a31774fa7d3554 Mon Sep 17 00:00:00 2001
From: Jiajun Xu <jiajunxu@Jiajuns-MacBook-Pro-2.local>
Date: Tue, 19 Aug 2025 16:08:26 -0700
Subject: [PATCH] add alt page

---
 src/pages/WhatWereWorkingOn.astro             |  22 ++-
 .../WhatWereWorkingOnPages/Alternatives.astro | 147 ++++++++++++++++++
 2 files changed, 157 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/WhatWereWorkingOnPages/Alternatives.astro

diff --git a/src/pages/WhatWereWorkingOn.astro b/src/pages/WhatWereWorkingOn.astro
index 518371d..ebee20d 100644
--- a/src/pages/WhatWereWorkingOn.astro
+++ b/src/pages/WhatWereWorkingOn.astro
@@ -39,17 +39,6 @@ import "../styles/globals.css";
             >
           </div>
 
-          <div class="justify-items-center">
-            <img
-              src="/assets/this-website.png"
-              alt="screenshot of this website including screenshot of this website including screenshot of this website..."
-              width="250"
-              class="border pb-4"
-            />
-
-            <a href="/" class="underline decoration-solid">This website!</a>
-          </div>
-
           <div class="justify-items-center">
             <img
               src="/assets/book-club.png"
@@ -57,12 +46,21 @@ import "../styles/globals.css";
               width="250"
               class="border pb-4"
             />
-
             <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 pb-4"
+            />
+            <a href="/WhatWereWorkingOnPages/Alternatives/" class="underline decoration-solid">Big Tech Alternatives</a>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/WhatWereWorkingOnPages/Alternatives.astro b/src/pages/WhatWereWorkingOnPages/Alternatives.astro
new file mode 100644
index 0000000..ed71973
--- /dev/null
+++ b/src/pages/WhatWereWorkingOnPages/Alternatives.astro
@@ -0,0 +1,147 @@
+---
+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">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">
+          <div class="border rounded-lg p-6 shadow-md bg-blue-50 text-gray-900">
+            <h2 class="text-2xl font-semibold mb-4">Browsers</h2>
+            <p class="text-xl mb-4">Big Tech Option: Chrome (Google)</p>
+            <ul class="space-y-4">
+              <li>
+                <h3 class="text-lg font-bold">Firefox</h3>
+                <p>Privacy-focused browser.</p>
+                <a href="https://www.mozilla.org/firefox" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+              <li>
+                <h3 class="text-lg font-bold">Brave</h3>
+                <p>Ad-blocking browser.</p>
+                <a href="https://brave.com" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="border rounded-lg p-6 shadow-md bg-green-50 text-gray-900">
+            <h2 class="text-2xl font-semibold mb-4">Search Engines</h2>
+            <p class="text-xl mb-4">Big Tech Option: Google Search</p>
+            <ul class="space-y-4">
+              <li>
+                <h3 class="text-lg font-bold">DuckDuckGo</h3>
+                <p>Privacy-protecting search.</p>
+                <a href="https://duckduckgo.com" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+              <li>
+                <h3 class="text-lg font-bold">Searx</h3>
+                <p>Metasearch engine.</p>
+                <a href="https://searx.space" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="border rounded-lg p-6 shadow-md bg-yellow-50 text-gray-900">
+            <h2 class="text-2xl font-semibold mb-4">Email</h2>
+            <p class="text-xl mb-4">Big Tech Option: Gmail (Google)</p>
+            <ul class="space-y-4">
+              <li>
+                <h3 class="text-lg font-bold">ProtonMail</h3>
+                <p>Encrypted email.</p>
+                <a href="https://protonmail.com" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+              <li>
+                <h3 class="text-lg font-bold">Tutanota</h3>
+                <p>Secure email service.</p>
+                <a href="https://tutanota.com" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="border rounded-lg p-6 shadow-md bg-purple-50 text-gray-900">
+            <h2 class="text-2xl font-semibold mb-4">Social Media</h2>
+            <p class="text-xl mb-4">Big Tech Options: Twitter (X), Facebook (Meta)</p>
+            <ul class="space-y-4">
+              <li>
+                <h3 class="text-lg font-bold">Mastodon</h3>
+                <p>Decentralized social network (alternative to Twitter).</p>
+                <a href="https://joinmastodon.org" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+              <li>
+                <h3 class="text-lg font-bold">Diaspora</h3>
+                <p>Decentralized social network (alternative to Facebook).</p>
+                <a href="https://diasporafoundation.org" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="border rounded-lg p-6 shadow-md bg-pink-50 text-gray-900">
+            <h2 class="text-2xl font-semibold mb-4">Video Platforms</h2>
+            <p class="text-xl mb-4">Big Tech Option: YouTube (Google)</p>
+            <ul class="space-y-4">
+              <li>
+                <h3 class="text-lg font-bold">PeerTube</h3>
+                <p>Decentralized video hosting.</p>
+                <a href="https://joinpeertube.org" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+              <li>
+                <h3 class="text-lg font-bold">Odysee</h3>
+                <p>Blockchain-based video platform.</p>
+                <a href="https://odysee.com" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="border rounded-lg p-6 shadow-md bg-indigo-50 text-gray-900">
+            <h2 class="text-2xl font-semibold mb-4">Cloud Storage</h2>
+            <p class="text-xl mb-4">Big Tech Option: Google Drive</p>
+            <ul class="space-y-4">
+              <li>
+                <h3 class="text-lg font-bold">Nextcloud</h3>
+                <p>Self-hosted file sync and share.</p>
+                <a href="https://nextcloud.com" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="border rounded-lg p-6 shadow-md bg-red-50 text-gray-900">
+            <h2 class="text-2xl font-semibold mb-4">Messaging</h2>
+            <p class="text-xl mb-4">Big Tech Options: WhatsApp (Meta), Slack</p>
+            <ul class="space-y-4">
+              <li>
+                <h3 class="text-lg font-bold">Signal</h3>
+                <p>Encrypted messaging (alternative to WhatsApp).</p>
+                <a href="https://signal.org" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+              <li>
+                <h3 class="text-lg font-bold">Element</h3>
+                <p>Matrix-based chat (alternative to Slack).</p>
+                <a href="https://element.io" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="border rounded-lg p-6 shadow-md bg-teal-50 text-gray-900">
+            <h2 class="text-2xl font-semibold mb-4">Maps</h2>
+            <p class="text-xl mb-4">Big Tech Option: Google Maps</p>
+            <ul class="space-y-4">
+              <li>
+                <h3 class="text-lg font-bold">OpenStreetMap</h3>
+                <p>Community-driven maps.</p>
+                <a href="https://www.openstreetmap.org" class="text-blue-500 hover:text-blue-700">Website</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>