Fixed design and texts

src/components/sections/home/HomePrinciples.vue

@@ -0,0 +1,62 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Shield, Unlock, Users } from 'lucide-vue-next';
+
+
+</script>
+
+<template>
+    <section class="container py-24">
+      <div class="text-center mb-16">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">Built on Three Core Principles</h2>
+        <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
+          Our mission is to give you back control of your digital life
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+        <Card class="border-2">
+          <CardContent class="pt-6">
+            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Shield class="h-6 w-6" />
+            </div>
+            <h3 class="text-2xl font-bold mb-3">Privacy</h3>
+            <p class="text-muted-foreground leading-relaxed">
+              End-to-end encryption ensures your data belongs only to you.
+              No corporate surveillance, no data mining, no third-party access.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card class="border-2">
+          <CardContent class="pt-6">
+            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Unlock class="h-6 w-6 text-primary" />
+            </div>
+            <h3 class="text-2xl font-bold mb-3">Autonomy</h3>
+            <p class="text-muted-foreground leading-relaxed">
+              You own your content, connections, and identity.
+              No platform can ban you, shadow ban you, or restrict your reach.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card class="border-2">
+          <CardContent class="pt-6">
+            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Users class="h-6 w-6 text-primary" />
+            </div>
+            <h3 class="text-2xl font-bold mb-3">Decentralization</h3>
+            <p class="text-muted-foreground leading-relaxed">
+              No single point of failure or control.
+              The network runs on peer-to-peer connections,
+              making it resilient and censorship-resistant.
+            </p>
+          </CardContent>
+        </Card>
+
+      </div>
+    </section>
+</template>