remove this website from what we are working on + add alternatives page
This commit is contained in:
Jiajun Xu
24
src/components/Card.astro
Normal file
24
src/components/Card.astro
Normal file
@ -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-xl mb-4">Big Tech Option: {bigTech}</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>
|
||||||
@ -3,6 +3,10 @@ import Navbar from "../../components/Navbar";
|
|||||||
import Footer from "../../components/Footer";
|
import Footer from "../../components/Footer";
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../../layouts/Layout.astro";
|
||||||
import "../../styles/globals.css";
|
import "../../styles/globals.css";
|
||||||
|
|
||||||
|
|
||||||
|
import Card from "../../components/Card.astro";
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
@ -14,131 +18,81 @@ import "../../styles/globals.css";
|
|||||||
<p class="mb-4">Explore open-source and privacy-focused alternatives to popular big tech software.</p>
|
<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="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">
|
<Card
|
||||||
<h2 class="text-2xl font-semibold mb-4">Browsers</h2>
|
title="Browsers"
|
||||||
<p class="text-xl mb-4">Big Tech Option: Chrome (Google)</p>
|
bigTech="Chrome (Google)"
|
||||||
<ul class="space-y-4">
|
alternatives={[
|
||||||
<li>
|
{ name: 'Firefox', description: 'Privacy-focused browser.', url: 'https://www.mozilla.org/firefox' },
|
||||||
<h3 class="text-lg font-bold">Firefox</h3>
|
{ name: 'Brave', description: 'Ad-blocking browser.', url: 'https://brave.com' }
|
||||||
<p>Privacy-focused browser.</p>
|
]}
|
||||||
<a href="https://www.mozilla.org/firefox" class="text-blue-500 hover:text-blue-700">Website</a>
|
bgClass="bg-blue-50"
|
||||||
</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">
|
<Card
|
||||||
<h2 class="text-2xl font-semibold mb-4">Search Engines</h2>
|
title="Cloud Storage"
|
||||||
<p class="text-xl mb-4">Big Tech Option: Google Search</p>
|
bigTech="Google Drive"
|
||||||
<ul class="space-y-4">
|
alternatives={[
|
||||||
<li>
|
{ name: 'Nextcloud', description: 'Self-hosted file sync and share.', url: 'https://nextcloud.com' }
|
||||||
<h3 class="text-lg font-bold">DuckDuckGo</h3>
|
]}
|
||||||
<p>Privacy-protecting search.</p>
|
bgClass="bg-indigo-50"
|
||||||
<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">
|
<Card
|
||||||
<h2 class="text-2xl font-semibold mb-4">Email</h2>
|
title="Email"
|
||||||
<p class="text-xl mb-4">Big Tech Option: Gmail (Google)</p>
|
bigTech="Gmail (Google)"
|
||||||
<ul class="space-y-4">
|
alternatives={[
|
||||||
<li>
|
{ name: 'ProtonMail', description: 'Encrypted email.', url: 'https://protonmail.com' },
|
||||||
<h3 class="text-lg font-bold">ProtonMail</h3>
|
]}
|
||||||
<p>Encrypted email.</p>
|
bgClass="bg-yellow-50"
|
||||||
<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">
|
<Card
|
||||||
<h2 class="text-2xl font-semibold mb-4">Social Media</h2>
|
title="Maps"
|
||||||
<p class="text-xl mb-4">Big Tech Options: Twitter (X), Facebook (Meta)</p>
|
bigTech="Google Maps"
|
||||||
<ul class="space-y-4">
|
alternatives={[
|
||||||
<li>
|
{ name: 'OpenStreetMap', description: 'Community-driven maps.', url: 'https://www.openstreetmap.org' }
|
||||||
<h3 class="text-lg font-bold">Mastodon</h3>
|
]}
|
||||||
<p>Decentralized social network (alternative to Twitter).</p>
|
bgClass="bg-teal-50"
|
||||||
<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">
|
<Card
|
||||||
<h2 class="text-2xl font-semibold mb-4">Video Platforms</h2>
|
title="Messaging"
|
||||||
<p class="text-xl mb-4">Big Tech Option: YouTube (Google)</p>
|
bigTech="WhatsApp (Meta), Slack"
|
||||||
<ul class="space-y-4">
|
alternatives={[
|
||||||
<li>
|
{ name: 'Signal', description: 'Encrypted messaging (alternative to WhatsApp).', url: 'https://signal.org' },
|
||||||
<h3 class="text-lg font-bold">PeerTube</h3>
|
{ name: 'Element', description: 'Matrix-based chat (alternative to Slack).', url: 'https://element.io' }
|
||||||
<p>Decentralized video hosting.</p>
|
]}
|
||||||
<a href="https://joinpeertube.org" class="text-blue-500 hover:text-blue-700">Website</a>
|
bgClass="bg-red-50"
|
||||||
</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">
|
<Card
|
||||||
<h2 class="text-2xl font-semibold mb-4">Cloud Storage</h2>
|
title="Search Engines"
|
||||||
<p class="text-xl mb-4">Big Tech Option: Google Drive</p>
|
bigTech="Google Search"
|
||||||
<ul class="space-y-4">
|
alternatives={[
|
||||||
<li>
|
{ name: 'DuckDuckGo', description: 'Privacy-protecting search.', url: 'https://duckduckgo.com' },
|
||||||
<h3 class="text-lg font-bold">Nextcloud</h3>
|
]}
|
||||||
<p>Self-hosted file sync and share.</p>
|
bgClass="bg-green-50"
|
||||||
<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">
|
<Card
|
||||||
<h2 class="text-2xl font-semibold mb-4">Messaging</h2>
|
title="Social Media"
|
||||||
<p class="text-xl mb-4">Big Tech Options: WhatsApp (Meta), Slack</p>
|
bigTech="Twitter (X), Facebook (Meta)"
|
||||||
<ul class="space-y-4">
|
alternatives={[
|
||||||
<li>
|
{ name: 'Mastodon', description: 'Decentralized social network (alternative to Twitter).', url: 'https://joinmastodon.org' },
|
||||||
<h3 class="text-lg font-bold">Signal</h3>
|
{ name: 'Diaspora', description: 'Decentralized social network (alternative to Facebook).', url: 'https://diasporafoundation.org' }
|
||||||
<p>Encrypted messaging (alternative to WhatsApp).</p>
|
]}
|
||||||
<a href="https://signal.org" class="text-blue-500 hover:text-blue-700">Website</a>
|
bgClass="bg-purple-50"
|
||||||
</li>
|
/>
|
||||||
<li>
|
|
||||||
<h3 class="text-lg font-bold">Element</h3>
|
<Card
|
||||||
<p>Matrix-based chat (alternative to Slack).</p>
|
title="Video Platforms"
|
||||||
<a href="https://element.io" class="text-blue-500 hover:text-blue-700">Website</a>
|
bigTech="YouTube (Google)"
|
||||||
</li>
|
alternatives={[
|
||||||
</ul>
|
{ name: 'PeerTube', description: 'Decentralized video hosting.', url: 'https://joinpeertube.org' },
|
||||||
</div>
|
]}
|
||||||
|
bgClass="bg-pink-50"
|
||||||
|
/>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user