feat(content): add support resources and trans rights information; re…

…move outdated API examples

content/.vitepress/examples/support.md

@@ -0,0 +1,21 @@
+# Support Resources
+
+## Finding Help
+
+If you're looking for support, you're not alone. Here are some resources that can help:
+
+::: info Helplines
+- Trevor Project (24/7): 1-866-488-7386
+- Trans Lifeline: 877-565-8860
+:::
+
+## Support Organizations
+
+- GLAAD
+- National Center for Transgender Equality
+- Trans Youth Equality Foundation
+- PFLAG
+
+::: tip Community Support
+Remember, you are valid, loved, and worthy of respect. Your identity matters, and there are people and organizations ready to support you.
+:::

content/.vitepress/examples/what-are-trans-rights.md

@@ -0,0 +1,25 @@
+# What Are Trans Rights?
+
+Trans rights are human rights that ensure transgender individuals can live freely and authentically without discrimination. These rights include:
+
+::: info Key Rights
+- The right to self-identification
+- Access to healthcare
+- Protection from discrimination
+- Equal employment opportunities
+- Safe access to public facilities
+:::
+
+## Why Trans Rights Matter
+
+Trans rights are fundamental human rights that affect real people in their daily lives. Supporting trans rights means:
+
+- Creating a more inclusive society
+- Saving lives through acceptance and support
+- Fighting discrimination and prejudice
+- Ensuring equal access to opportunities
+- Protecting vulnerable individuals
+
+::: tip Did You Know?
+Studies show that acceptance and support significantly improve mental health outcomes for trans individuals.
+:::

content/archive.md

@@ -0,0 +1,57 @@
+---
+title: Archive
+---
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as d3 from 'd3'
+
+const posts = ref([
+  { date: '2024-04-20', title: 'Understanding Gender Identity' },
+  { date: '2024-04-15', title: 'Supporting Trans Youth' },
+  { date: '2024-04-10', title: 'Trans Healthcare Guide' },
+  { date: '2024-04-05', title: 'Allies in Action' },
+  { date: '2024-04-01', title: 'Legal Rights Update' }
+])
+
+onMounted(() => {
+  // Timeline Visualization
+  const timeline = d3.select('#timeline')
+    .append('svg')
+    .attr('width', '100%')
+    .attr('height', 400)
+
+  // Activity Graph
+  const activityData = d3.group(posts.value, d => d3.timeMonth(new Date(d.date)))
+  const graph = d3.select('#activity-graph')
+    .append('svg')
+    .attr('width', '100%')
+    .attr('height', 200)
+})
+</script>
+
+# Archive
+
+<div class="timeline-container">
+  <div class="timeline-line"></div>
+  <div class="space-y-8">
+    <template v-for="post in posts" :key="post.date">
+      <div class="flex items-center justify-between">
+        <div class="w-5/12 text-right pr-8">
+          <h3 class="font-semibold">{{ post.title }}</h3>
+        </div>
+        <div class="w-2/12 flex justify-center">
+          <div class="w-4 h-4 rounded-full bg-[#5bcefa] border-4 border-[#f5a9b8]"></div>
+        </div>
+        <div class="w-5/12 pl-8">
+          <p class="text-sm text-gray-400">{{ new Date(post.date).toLocaleDateString() }}</p>
+        </div>
+      </div>
+    </template>
+  </div>
+</div>
+
+<div class="activity-graph mt-12">
+  <h2 class="text-2xl font-bold mb-4">Publishing Activity</h2>
+  <div id="activity-graph"></div>
+</div>

content/calendar.md

@@ -0,0 +1,53 @@
+---
+title: Events Calendar
+---
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import ical from 'ical-generator'
+
+const events = ref([
+  {
+    title: 'Trans Pride March',
+    start: new Date('2024-06-15T10:00:00'),
+    end: new Date('2024-06-15T16:00:00'),
+    description: 'Annual Trans Pride March celebrating visibility and equality'
+  },
+  {
+    title: 'Healthcare Rights Workshop',
+    start: new Date('2024-05-01T14:00:00'),
+    end: new Date('2024-05-01T16:00:00'),
+    description: 'Learn about your healthcare rights and available resources'
+  }
+])
+
+onMounted(() => {
+  const calendar = ical({
+    name: 'Trans Rights Events',
+    events: events.value.map(event => ({
+      start: event.start,
+      end: event.end,
+      summary: event.title,
+      description: event.description
+    }))
+  })
+})
+</script>
+
+# Upcoming Events
+
+<div class="space-y-6">
+  <div v-for="event in events" :key="event.title" class="announcement-card">
+    <h3 class="text-xl font-semibold mb-2">{{ event.title }}</h3>
+    <p class="text-sm text-gray-400 mb-2">
+      {{ event.start.toLocaleDateString() }} {{ event.start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}
+    </p>
+    <p>{{ event.description }}</p>
+  </div>
+</div>
+
+<div class="mt-8">
+  <a href="#" class="inline-block px-6 py-3 rounded-lg bg-gradient-to-r from-[#5bcefa] to-[#f5a9b8] text-white font-semibold hover:opacity-90 transition-opacity">
+    Add to Calendar (iCal)
+  </a>
+</div>

content/index.md

@@ -1,25 +1,108 @@
 ---
-# https://vitepress.dev/reference/default-theme-home-page
 layout: home
-
 hero:
   name: "Harmony Within Us"
-  text: "Fostering serenity and connection, a dedicated space for transgender individuals navigating life."
-  tagline: lorem ipsum
+  tagline: Fostering serenity and connection, a dedicated space for transgender individuals navigating life.
+
   actions:
     - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
+      text: Learn More
+      link: /what-are-trans-rights
     - theme: alt
-      text: API Examples
-      link: /api-examples
-
+      text: Get Support
+      link: /support
 features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - icon: 💕
+    title: Acceptance
+    details: Everyone deserves to live authentically and be accepted for who they are
+  - icon: 🌈
+    title: Equality
+    details: Trans rights are fundamental human rights that must be protected
+  - icon: 🤝
+    title: Support
+    details: Find resources and support for trans individuals and allies
 ---
 
+<script setup>
+import { ref, onMounted } from 'vue'
+import { format } from 'date-fns'
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
+
+const announcements = ref([
+ /* {
+    title: "New Healthcare Resources Available",
+    date: "2024-05-01",
+    content: "We've updated our healthcare resources section with new information about trans-inclusive healthcare providers.",
+    image: "/images/healthcare.jpg"
+  },*/
+  {
+    title: "Lorem Ipsum",
+    date: "2024-01-01",
+    content: "Lorem ipsum...",
+    image: "/images"
+  }
+])
+
+const posts = ref([
+  {
+    title: "Understanding Gender Identity",
+    date: "2024-04-20",
+    excerpt: "Exploring the spectrum of gender identity and expression...",
+    image: "/images/gender-identity.jpg"
+  },
+  {
+    title: "Supporting Trans Youth",
+    date: "2024-04-15",
+    excerpt: "Resources and guidance for families and educators...",
+    image: "/images/trans-youth.jpg"
+  }
+])
+
+const formatDate = (date) => format(new Date(date), 'MMMM d, yyyy')
+</script>
+
+<div class="max-w-6xl mx-auto px-4 space-y-16">
+  <section class="mb-12">
+    <h2 class="text-4xl font-bold mb-8 bg-gradient-to-r from-[#5bcefa] via-[#f5a9b8] to-white bg-clip-text text-transparent">
+      Latest Announcements
+    </h2>
+  <Splide :options="{ type: 'loop', perPage: 1, autoplay: true, interval: 4000, pagination: false }">
+      <SplideSlide v-for="announcement in announcements" :key="announcement.title">
+        <div class="announcement-card flex flex-col md:flex-row items-center gap-8">
+          <div class="md:w-1/2">
+            <h3 class="text-2xl font-semibold mb-3">{{ announcement.title }}</h3>
+            <p class="text-sm text-gray-400 mb-3">{{ formatDate(announcement.date) }}</p>
+            <p class="text-lg">{{ announcement.content }}</p>
+          </div>
+          <div class="md:w-1/2 h-64 bg-gradient-to-br from-[#5bcefa]/20 to-[#f5a9b8]/20 rounded-xl"></div>
+        </div>
+      </SplideSlide>
+    </Splide>
+  </section>
+
+  <section class="mb-12">
+    <h2 class="text-4xl font-bold mb-8 bg-gradient-to-r from-[#5bcefa] via-[#f5a9b8] to-white bg-clip-text text-transparent">
+      Recent Blog Posts
+    </h2>
+    <div class="grid md:grid-cols-2 gap-8">
+      <div v-for="post in posts" :key="post.title" class="blog-card group">
+        <div class="h-48 mb-4 bg-gradient-to-br from-[#5bcefa]/20 to-[#f5a9b8]/20 rounded-xl 
+                    transform transition-transform group-hover:scale-105"></div>
+        <h3 class="text-2xl font-semibold mb-3">{{ post.title }}</h3>
+        <p class="text-sm text-gray-400 mb-3">{{ formatDate(post.date) }}</p>
+        <p class="mb-4">{{ post.excerpt }}</p>
+        <a href="#" class="inline-block text-[#5bcefa] hover:text-[#f5a9b8] transition-colors">
+          Read more →
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- <section class="grid md:grid-cols-3 gap-8">
+    <div v-for="feature in $frontmatter.features" :key="feature.title" class="feature-card">
+      <div class="text-4xl mb-4">{{ feature.icon }}</div>
+      <h3 class="text-xl font-semibold mb-2">{{ feature.title }}</h3>
+      <p>{{ feature.details }}</p>
+    </div>
+  </section> -->
+</div>

content/posts/testing copy 2.md

@@ -0,0 +1,8 @@
+---
+title: testing
+date: 2024-10-22
+---
+
+# bla bla
+
+sgtsrgrgregegegr

content/posts/testing copy 3.md

@@ -0,0 +1,9 @@
+---
+title: testing
+date: 2024-10-22
+tags: announcement
+---
+
+# bla bla
+
+sgtsrgrgregegegr

content/posts/testing copy.md

@@ -0,0 +1,8 @@
+---
+title: testing
+date: 2024-10-22
+---
+
+# bla bla
+
+sgtsrgrgregegegr