fix: add permissions to github workflow

.github/workflows/build-and-push.yml

@@ -1,5 +1,7 @@
-# .github/workflows/docker-build-and-push.yml
 name: build & push the images
+permissions:
+  contents: read
+  pull-requests: write
 
 on:
   push:

.github/workflows/test.yml

@@ -1,4 +1,7 @@
 name: test & build
+permissions:
+  contents: read
+  pull-requests: write
 
 on:
   push:

README.md

@@ -7,7 +7,7 @@ Like the cactus, great events bloom under any condition when managed with care.
 <p align="center">
   <a href="https://cactoide.org/" target="blank">
     <picture>
-      <img alt="actoide" src="https://github.com/user-attachments/assets/30b87181-1e3b-49d0-869e-bef6dcf7f777" width="840">
+      <img alt="actoide" src="https://github.com/user-attachments/assets/a7f7a732-1279-486e-808c-1d2348c68780" width="840">
     </picture>
   </a>
 </p>

src/lib/components/FeatureCard.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { t } from '$lib/i18n/i18n.js';
+
+	interface Props {
+		emoji: string;
+		titleKey: string;
+		descriptionKey: string;
+	}
+
+	let { emoji, titleKey, descriptionKey }: Props = $props();
+</script>
+
+<div class="rounded-sm border p-4 text-center">
+	<div class="mx-auto mb-2 flex h-20 w-20 items-center justify-center rounded-full">
+		<span class="text-4xl">{emoji}</span>
+	</div>
+	<h3 class="mb-4 text-xl font-bold text-white">{t(titleKey)}</h3>
+	<p class="">{t(descriptionKey)}</p>
+</div>

src/lib/i18n/messages.json

@@ -107,7 +107,10 @@
 		"description": "Create and manage event RSVPs. No registration required, instant sharing.",
 		"mainTitle": "Cactoide(ea)",
 		"subtitle": "The Ultimate RSVP Platform",
-		"tagline": "Create, share, and manage events with zero friction.",
+		"tagline": "A federated mobile-first event RSVP platform that lets you create events, share unique URLs, and collect RSVPs without any registration required. With built-in federation, discover and share events across a decentralized network of instances.",
+		"openSourceTitle": "Open Source & Self-Hostable",
+		"openSourceDescription": "Cactoide is open source and easily self-hostable. View the source code, contribute, or host your own instance.",
+		"viewOnGitHub": "View on GitHub",
 		"whyCactoideTitle": "Why Cactoide(ae)?🌵",
 		"whyCactoideDescription": "Like the cactus, great events bloom under any condition when managed with care. Cactoide(ae) helps you streamline RSVPs, simplify coordination, and keep every detail efficient—so your gatherings are resilient, vibrant, and unforgettable.",
 		"createEventNow": "Create Event Now",
@@ -127,6 +130,10 @@
 		"smartLimitsDescription": "Choose between unlimited RSVPs or set a limited capacity. Perfect for any event size.",
 		"effortlessSimplicityTitle": "Effortless Simplicity",
 		"effortlessSimplicityDescription": "Designed to be instantly clear and easy. No learning curve — just open, create, and go.",
+		"inviteLinksTitle": "Invite Links",
+		"inviteLinksDescription": "Create invite-only events with special links. Only people with the specific invite link can RSVP, giving you full control over who can attend.",
+		"federationTitle": "Federation",
+		"federationDescription": "Connect with other Cactoide instances to discover events across the network. Share your public events and create a decentralized event discovery network.",
 		"howItWorksTitle": "How It Works",
 		"step1Title": "Create Event",
 		"step1Description": "Fill out a simple form with event details. Choose between limited or unlimited capacity.",

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/i18n/i18n.js';
+	import FeatureCard from '$lib/components/FeatureCard.svelte';
 </script>
 
 <svelte:head>
@@ -22,6 +23,34 @@
 				{t('home.tagline')}
 			</p>
 
+			<!-- Open Source Section -->
+			<div class="mt-8 flex items-center justify-center gap-3">
+				<a
+					href="https://github.com/polaroi8d/cactoide"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="group flex items-center gap-2 rounded-sm border-2 border-violet-500/50 px-6 py-3 text-sm font-medium transition-all duration-300 hover:scale-105 hover:border-violet-500 hover:bg-violet-500/10 md:text-base"
+					aria-label={t('home.viewOnGitHub')}
+				>
+					<svg
+						class="h-5 w-5 transition-transform group-hover:scale-110"
+						fill="currentColor"
+						viewBox="0 0 24 24"
+						aria-hidden="true"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+					<span>{t('home.viewOnGitHub')}</span>
+				</a>
+			</div>
+			<p class="mt-4 text-sm text-slate-400 md:text-base">
+				{t('home.openSourceDescription')}
+			</p>
+
 			<h2 class="mt-6 pt-8 text-xl md:text-2xl">
 				{t('home.whyCactoideTitle')}<span class="text-violet-400"
 					><a href="https://en.wikipedia.org/wiki/Cactoideae" target="_blank">*</a></span
@@ -65,72 +94,54 @@
 			<h2 class=" mb-16 text-center text-4xl font-bold">
 				{t('home.whyCactoideFeatureTitle')}
 			</h2>
-			<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-				<!-- Feature 1 -->
-				<div class="rounded-sm border p-8 text-center">
-					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
-						<span class="text-4xl">🎯</span>
-					</div>
-					<h3 class="mb-4 text-xl font-bold text-white">{t('home.instantEventCreationTitle')}</h3>
-					<p class="">
-						{t('home.instantEventCreationDescription')}
-					</p>
-				</div>
+			<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+				<FeatureCard
+					emoji="🎯"
+					titleKey="home.instantEventCreationTitle"
+					descriptionKey="home.instantEventCreationDescription"
+				/>
 
-				<!-- Feature 2 -->
-				<div class="rounded-sm border p-8 text-center">
-					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
-						<span class="text-4xl">🔗</span>
-					</div>
-					<h3 class="mb-4 text-xl font-bold text-white">{t('home.oneClickSharingTitle')}</h3>
-					<p class="">
-						{t('home.oneClickSharingDescription')}
-					</p>
-				</div>
+				<FeatureCard
+					emoji="🔗"
+					titleKey="home.oneClickSharingTitle"
+					descriptionKey="home.oneClickSharingDescription"
+				/>
 
-				<!-- Feature 2 -->
-				<div class="rounded-sm border p-8 text-center">
-					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
-						<span class="text-4xl">🔍</span>
-					</div>
-					<h3 class="mb-4 text-xl font-bold text-white">{t('home.allInOneClarityTitle')}</h3>
-					<p class="">
-						{t('home.allInOneClarityDescription')}
-					</p>
-				</div>
+				<FeatureCard
+					emoji="🔍"
+					titleKey="home.allInOneClarityTitle"
+					descriptionKey="home.allInOneClarityDescription"
+				/>
 
-				<!-- Feature 4 -->
-				<div class="rounded-sm border p-8 text-center">
-					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
-						<span class="text-4xl">👤</span>
-					</div>
-					<h3 class="mb-4 text-xl font-bold text-white">{t('home.noHassleNoSignUpsTitle')}</h3>
-					<p class="">
-						{t('home.noHassleNoSignUpsDescription')}
-					</p>
-				</div>
+				<FeatureCard
+					emoji="👤"
+					titleKey="home.noHassleNoSignUpsTitle"
+					descriptionKey="home.noHassleNoSignUpsDescription"
+				/>
 
-				<!-- Feature 5 -->
-				<div class="rounded-sm border p-8 text-center">
-					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
-						<span class="text-4xl">🛡️</span>
-					</div>
-					<h3 class="mb-4 text-xl font-bold text-white">{t('home.smartLimitsTitle')}</h3>
-					<p class="">
-						{t('home.smartLimitsDescription')}
-					</p>
-				</div>
+				<FeatureCard
+					emoji="🛡️"
+					titleKey="home.smartLimitsTitle"
+					descriptionKey="home.smartLimitsDescription"
+				/>
 
-				<!-- Feature 5 -->
-				<div class="rounded-sm border p-8 text-center">
-					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
-						<span class="text-4xl">✨</span>
-					</div>
-					<h3 class="mb-4 text-xl font-bold text-white">{t('home.effortlessSimplicityTitle')}</h3>
-					<p class="">
-						{t('home.effortlessSimplicityDescription')}
-					</p>
-				</div>
+				<FeatureCard
+					emoji="✨"
+					titleKey="home.effortlessSimplicityTitle"
+					descriptionKey="home.effortlessSimplicityDescription"
+				/>
+
+				<FeatureCard
+					emoji="🎫"
+					titleKey="home.inviteLinksTitle"
+					descriptionKey="home.inviteLinksDescription"
+				/>
+
+				<FeatureCard
+					emoji="🌐"
+					titleKey="home.federationTitle"
+					descriptionKey="home.federationDescription"
+				/>
 			</div>
 		</div>
 	</section>