Fixed design and texts

src/components/sections/community/CommunityHowToContribute.vue

@@ -0,0 +1,62 @@
+<script setup>
+import Card from '@/components/ui/Card.vue';
+import CardContent from '@/components/ui/CardContent.vue';
+import { Code } from 'lucide-vue-next';
+
+const contributionItems = [
+  {
+    title: "Code Contributions",
+    description: "We welcome contributions to the core platform and modules. Fork the repository, make your changes, and submit a pull request.",
+    points: [
+      "Follow the existing code style and conventions",
+      "Write tests for new features",
+      "Update documentation as needed",
+      "Ensure all tests pass before submitting",
+    ],
+  },
+  {
+    title: "Documentation",
+    description: "Help improve our documentation by fixing errors, adding examples, or writing guides. Clear documentation makes the platform more accessible to everyone.",
+  },
+  {
+    title: "Bug Reports",
+    description: "Found a bug? Report it on our issue tracker with detailed steps to reproduce, your system information, and any relevant logs.",
+  },
+  {
+    title: "Feature Requests",
+    description: "Have an idea for a new feature? Open an issue describing the feature, its use case, and how it fits with the project's goals of decentralization and privacy.",
+  },
+  {
+    title: "Testing",
+    description: "Test beta releases, provide feedback, and help us identify issues before they reach stable releases.",
+  },
+]
+</script>
+
+<template>
+    <section class="">
+    <div class="container py-24">
+      <div class="max-w-3xl mx-auto">
+        <div class="flex items-center gap-3 mb-8">
+          <Code class="h-8 w-8 text-primary" />
+          <h2 class="text-3xl md:text-4xl font-bold">How to Contribute</h2>
+        </div>
+
+        <div class="space-y-6">
+          <Card v-for="(item, index) in contributionItems" :key="index">
+            <CardContent class="pt-6">
+              <h3 class="text-xl font-bold mb-3">{{ item.title }}</h3>
+              <p class="text-muted-foreground leading-relaxed mb-4" v-if="item.description">{{ item.description }}</p>
+              <ul class="space-y-2 text-muted-foreground text-sm" v-if="item.points">
+                <li class="flex gap-2" v-for="(point, i) in item.points" :key="i">
+                  <span class="text-primary">•</span>
+                  <span>{{ point }}</span>
+                </li>
+              </ul>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>