add alt page
This commit is contained in:
Jiajun Xu
@ -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>
|
||||
|
||||
147
src/pages/WhatWereWorkingOnPages/Alternatives.astro
Normal file
147
src/pages/WhatWereWorkingOnPages/Alternatives.astro
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user