lucas/nosys_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed design and texts

Browse Source
This commit is contained in:
Lucas
2026-01-04 01:33:29 +10:00
parent c9b78fe66b
commit 6d0acc8e04
52 changed files with 2087 additions and 1700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/sections/about/AboutTheProblem.vue Normal file
View File

@@ -0,0 +1,109 @@
<script setup>
import Card from '@/components/ui/Card.vue';
import CardContent from '@/components/ui/CardContent.vue';
import { AlertCircle } from 'lucide-vue-next';
</script>
<template>
<section class=" bg-card">
<div class="container py-24">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<div
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-destructive/10
text-destructive rounded-full border border-destructive/20 mb-6"
>
<AlertCircle class="h-4 w-4" />
The Problem of Centralization
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">
Centralized Platforms Are Broken
</h2>
<div class="space-y-4 text-muted-foreground leading-relaxed">
<p>
Today's social media landscape is dominated by centralized corporations that
control the digital lives of billions and operate under state jurisdiction.
These platforms:
</p>
<ul class="space-y-2 list-disc list-inside">
<li>Censor content based on opaque algorithms and legal pressure</li>
<li>Are subject to state laws, regulations, and political influence</li>
<li>Surveil users and track every interaction</li>
<li>Sell personal data as a business model</li>
<li>Manipulate visibility through proprietary algorithms</li>
</ul>
<p>
When communication infrastructure is centralized and bound by state authority,
true freedom of expression becomes structurally impossible.
</p>
</div>
</div>
<Card class="border-2">
<CardContent class="p-8">
<div class="space-y-6 ">
<div class="flex items-start gap-4">
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
<div>
<h3 class="font-semibold mb-1">Censorship</h3>
<p class="text-sm text-muted-foreground">
Arbitrary content removal without transparency
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
<div>
<h3 class="font-semibold mb-1">Surveillance</h3>
<p class="text-sm text-muted-foreground">
Constant tracking of user activities
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="h-2 w-2 rounded-full bg-destructive mt-2"> </div>
<div>
<h3 class="font-semibold mb-1">Data Exploitation</h3>
<p class="text-sm text-muted-foreground">
Personal information sold as a commodity
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
<div>
<h3 class="font-semibold mb-1">Algorithmic Control</h3>
<p class="text-sm text-muted-foreground">
Manipulation of what content you see
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
<div>
<h3 class="font-semibold mb-1">State Dependency</h3>
<p class="text-sm text-muted-foreground">
User expression limited by government authority
</p>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</section>
</template>