Fixed design and texts
This commit is contained in:
Lucas
@@ -1,275 +1,42 @@
|
||||
<script setup>
|
||||
import AboutHero from "@/components/sections/about/AboutHero.vue";
|
||||
import AboutTheProblem from "@/components/sections/about/AboutTheProblem.vue";
|
||||
import AboutOurMission from "@/components/sections/about/AboutOurMission.vue";
|
||||
import AboutTechnology from "@/components/sections/about/AboutTechnology.vue";
|
||||
import AboutCTA from "@/components/sections/about/AboutCTA.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
||||
Taking Control Back from Big Tech
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
In a world where social media platforms control what you see, what you can say,
|
||||
and how your data is used, we're building something different.
|
||||
</p>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<AboutHero/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- The Problem -->
|
||||
<section class="border-t border-border 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
|
||||
</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 corporations that control the
|
||||
digital lives of billions. These platforms:
|
||||
</p>
|
||||
|
||||
<ul class="space-y-2 list-disc list-inside">
|
||||
<li>Censor content based on opaque algorithms and pressure</li>
|
||||
<li>Surveil users and track every click</li>
|
||||
<li>Sell your personal data</li>
|
||||
<li>Manipulate reach with algorithms</li>
|
||||
<li>Ban users without warning</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
This centralized control contradicts the promise of free communication.
|
||||
</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>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<AboutTheProblem />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<Card class="border-2 order-2 lg:order-1">
|
||||
<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-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">No Central Authority</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Peer-to-peer connections remove central control
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">End-to-End Encryption</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Communications secured and private
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">User Ownership</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
You own your identity and data
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">Open Source</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Transparency through open code
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="order-1 lg:order-2">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10
|
||||
text-primary rounded-full border border-primary/20 mb-6"
|
||||
>
|
||||
<Target class="h-4 w-4" />
|
||||
Our Mission
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Giving Control Back to Users
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
We're building a social network based on privacy, free expression and autonomy.
|
||||
</p>
|
||||
|
||||
<p class="text-lg font-semibold text-foreground">
|
||||
A truly peer-to-peer network where no one can censor or exploit you.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Decentralization + encryption + open source = independence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<AboutOurMission />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technology -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-accent/10
|
||||
text-accent rounded-full border border-accent/20 mb-6"
|
||||
>
|
||||
<Zap class="h-4 w-4" />
|
||||
Technology
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Built on Modern P2P Technology
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Modern decentralized tech for privacy and reliability.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Peer-to-Peer Architecture</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Direct peer communication without servers.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Strong Encryption</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
End-to-end encrypted messages and posts.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Modular Design</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Expand with modules: chat, files, social media, etc.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Distributed Network</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
No servers to shut down, no central DB to hack.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Join the Movement</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Download the app and experience social media without corporate control.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<RouterLink to="/downloads">
|
||||
<Button size="lg">Download Now</Button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/how-it-works">
|
||||
<Button size="lg" variant="outline">Learn How It Works</Button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<section class="border-b border-border">
|
||||
<div class="container mx-auto">
|
||||
<AboutTechnology />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="">
|
||||
<div class="container mx-auto">
|
||||
<AboutCTA/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
|
||||
import { AlertCircle, Target, Zap } from "lucide-vue-next"
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user