|
|
<!DOCTYPE html> |
|
|
<html lang="da"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Om SoulMatch - Bekæmp ensomhed gennem meningsfulde forbindelser</title> |
|
|
<link rel="icon" type="image/x-icon" href="https://q1f3.c3.e2-9.dev/soulmatch-uploads-public/SoulMatch%20logo.jpeg"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet"> |
|
|
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#006B76', |
|
|
'primary-light': '#E6F0F1', |
|
|
'primary-dark': '#005F69', |
|
|
accent: '#8A2BE2', |
|
|
background: '#F8F9FA', |
|
|
'text-primary': '#212529', |
|
|
'text-secondary': '#6C757D', |
|
|
'dark-background': '#121826', |
|
|
'dark-surface': '#1d2432', |
|
|
'dark-surface-light': '#2a3343', |
|
|
'dark-border': '#3c465b', |
|
|
'dark-text-primary': '#e2e8f0', |
|
|
'dark-text-secondary': '#94a3b8' |
|
|
} |
|
|
} |
|
|
}, |
|
|
darkMode: 'class' |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Nunito', sans-serif; |
|
|
} |
|
|
.hero-bg { |
|
|
background: linear-gradient(135deg, #016a75 0%, #016a75 100%); |
|
|
} |
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #016a75 0%, #016a75 100%); |
|
|
} |
|
|
.btn-primary:hover { |
|
|
background: linear-gradient(135deg, #016a75 0%, #016a75 100%); |
|
|
} |
|
|
.icon-primary { |
|
|
color: #016a75; |
|
|
} |
|
|
.timeline-item:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 2px; |
|
|
height: 100%; |
|
|
background: #016a75; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-background dark:bg-dark-background text-text-primary dark:text-dark-text-primary"> |
|
|
|
|
|
<header class="sticky top-0 z-50 bg-white dark:bg-dark-surface shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<a href="index.html"> |
|
|
<img src="https://q1f3.c3.e2-9.dev/soulmatch-uploads-public/SoulMatch%20logo.jpeg" alt="SoulMatch Logo" class="h-10 w-10 rounded-full"> |
|
|
</a> |
|
|
<span class="text-xl font-bold text-primary">SoulMatch</span> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="index.html" class="font-semibold hover:text-primary transition">Hjem</a> |
|
|
<a href="om-os.html" class="font-semibold text-primary transition">Om os</a> |
|
|
<a href="#" class="font-semibold hover:text-primary transition">Funktioner</a> |
|
|
<a href="#" class="font-semibold hover:text-primary transition">Sikkerhed</a> |
|
|
<a href="partner-invitation.html" class="font-semibold hover:text-primary transition">Bliv Partner</a> |
|
|
<a href="#" class="font-semibold hover:text-primary transition">Kontakt</a> |
|
|
</nav> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<button class="px-4 py-2 rounded-full bg-primary text-white font-bold hover:bg-primary-dark transition">Download</button> |
|
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-dark-surface-light"> |
|
|
<i data-feather="moon" class="dark:hidden"></i> |
|
|
<i data-feather="sun" class="hidden dark:block"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero-bg text-white py-16 md:py-24"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-up">Om SoulMatch</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">En revolutionerende platform der bekæmper ensomhed gennem meningsfulde fysiske møder</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white dark:bg-dark-surface"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div data-aos="fade-right"> |
|
|
<img src="http://static.photos/people/640x360/87" alt="Buster - Stifter af SoulMatch" class="rounded-2xl shadow-lg"> |
|
|
</div> |
|
|
<div data-aos="fade-left"> |
|
|
<h2 class="text-3xl font-bold mb-6">Vores Historie</h2> |
|
|
<p class="text-lg mb-4">SoulMatch blev skabt ud fra personlig erfaring med ensomhed hos vores stifter, Buster, som selv har ADHD og autisme. Hans rejse med at navigere i sociale situationer og finde meningsfulde forbindelser inspirerede til at skabe en løsning, der virkelig gør en forskel.</p> |
|
|
<p class="text-lg mb-6">Projektet er udviklet i tæt samarbejde med Aalborg Universitet, Psykologi, for at sikre en solid faglig finansiering og videnskabeligt underbyggede metoder.</p> |
|
|
<div class="bg-primary-light dark:bg-dark-surface-light rounded-xl p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Vores Motto</h3> |
|
|
<p class="text-primary dark:text-white text-lg font-semibold">"Gem mobilen væk, og vær sammen som mennesker"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-primary-light dark:bg-dark-surface"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-2 gap-12"> |
|
|
<div data-aos="fade-up"> |
|
|
<div class="bg-white dark:bg-dark-background rounded-2xl p-8 shadow-lg h-full"> |
|
|
<div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6"> |
|
|
<i data-feather="target" class="text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4 text-text-primary dark:text-dark-text-primary">Mission</h3> |
|
|
<p class="text-lg text-text-primary dark:text-dark-text-primary">At gøre det nemmere, sjovere og mere trygt for folk at mødes fysisk og få samtalen i gang. Vi skaber rammerne for autentiske menneskelige forbindelser.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="bg-white dark:bg-dark-background rounded-2xl p-8 shadow-lg h-full"> |
|
|
<div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6"> |
|
|
<i data-feather="eye" class="text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4 text-text-primary dark:text-dark-text-primary">Vision</h3> |
|
|
<p class="text-lg text-text-primary dark:text-dark-text-primary">At skabe Danmarks mest brugte og anerkendte platform for sociale events, der hjælper folk med at mødes i virkeligheden, med en fremtidig udvidelse til udlandet.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white dark:bg-dark-background"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Vores Kerneværdier</h2> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
<div class="text-center p-6" data-aos="fade-up"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="shield" class="text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Tryghed</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Vi sætter sikkerhed og tryghed for alle brugere først</p> |
|
|
</div> |
|
|
<div class="text-center p-6" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="users" class="text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Nye Venner</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Vi faciliterer meningsfulde relationer og venskaber</p> |
|
|
</div> |
|
|
<div class="text-center p-6" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="gift" class="text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Fordele</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Rabatkoder og belønninger for social deltagelse</p> |
|
|
</div> |
|
|
<div class="text-center p-6" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="lock" class="text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Sikkerhed</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">MitID-verificering og SOS-funktion</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-primary-light dark:bg-dark-surface"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Hvem er SoulMatch for?</h2> |
|
|
<div class="grid md:grid-cols-2 gap-12"> |
|
|
<div data-aos="fade-right"> |
|
|
<h3 class="text-2xl font-bold mb-6">Primær Målgruppe</h3> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
|
<i data-feather="user" class="text-white text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold">Ensomme individer, især unge (16-24 år)</h4> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Hver fjerde ung føler sig ensom i længere perioder</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
|
<i data-feather="heart" class="text-white text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold">Unge med ADHD og autisme</h4> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Struktureret og tryg ramme for at finde ligesindede</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
|
<i data-feather="users" class="text-white text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold">Individer i generel mistrivsel</h4> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Søger meningsfulde relationer og fællesskaber</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div data-aos="fade-left"> |
|
|
<h3 class="text-2xl font-bold mb-6">Sekundær Målgruppe</h3> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
|
<i data-feather="building" class="text-white text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold">Kommuner og medarbejdere</h4> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Administration af sociale tilbud og events</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
|
<i data-feather="calendar" class="text-white text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold">Foreningsliv og organisationer</h4> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Tilbud af sociale aktiviteter og frivilligt arbejde</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
|
<i data-feather="briefcase" class="text-white text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold">Virksomheder og partnere</h4> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Rabatordninger og støtte til kampen mod ensomhed</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white dark:bg-dark-background"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Avanceret Teknologi</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 mb-16"> |
|
|
<div data-aos="fade-right"> |
|
|
<img src="http://static.photos/technology/640x360/23" alt="AI Matching teknologi" class="rounded-2xl shadow-lg"> |
|
|
</div> |
|
|
<div data-aos="fade-left"> |
|
|
<h3 class="text-2xl font-bold mb-4">AI-Drevet Matching System</h3> |
|
|
<p class="mb-4">Vores avancerede AI-teknologi matcher brugere baseret på en bred vifte af kriterier for at skabe de mest meningsfulde forbindelser:</p> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>Personlighed (Jungiansk psykologi og Big Five modeller)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>Interesser, hobbyer og passioner</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>Kultur, opvækst og baggrund</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>Dybdegående personlighedsanalyse</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12"> |
|
|
<div class="md:order-2" data-aos="fade-left"> |
|
|
<img src="http://static.photos/technology/640x360/45" alt="NFC bekræftelse teknologi" class="rounded-2xl shadow-lg"> |
|
|
</div> |
|
|
<div class="md:order-1" data-aos="fade-right"> |
|
|
<h3 class="text-2xl font-bold mb-4">Unik NFC-Bekræftelse</h3> |
|
|
<p class="mb-4">Vores revolutionerende system sikrer, at online forbindelser bliver til virkelige møder:</p> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>3-dages chatgrænse med NFC-bekræftelse</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>Fysisk møde bekræftes ved telefon-kontakt</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>Chatten bevares kun ved fysisk fremmøde</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>Motiverer til at omsætte online interesse til offline interaktion</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-primary-light dark:bg-dark-surface"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Vores Udviklingsrejse</h2> |
|
|
|
|
|
<div class="relative max-w-4xl mx-auto"> |
|
|
<div class="absolute left-4 md:left-1/2 transform md:-translate-x-1/2 h-full w-1 bg-primary"></div> |
|
|
|
|
|
<div class="space-y-12"> |
|
|
|
|
|
<div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up"> |
|
|
<div class="flex-1 md:pr-8 md:text-right mb-4 md:mb-0"> |
|
|
<h3 class="text-xl font-bold mb-2">Beta Fase</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Opbygning af database over foreninger og sociale tilbud. Samarbejde med kommuner og organisationer.</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mx-4"> |
|
|
<span class="text-white font-bold">1</span> |
|
|
</div> |
|
|
<div class="flex-1 md:pl-8 md:text-left"> |
|
|
<div class="bg-white dark:bg-dark-surface p-4 rounded-lg shadow"> |
|
|
<h4 class="font-bold mb-2">Nuværende Fokus</h4> |
|
|
<ul class="text-sm space-y-1"> |
|
|
<li>• Kommunal database integration</li> |
|
|
<li>• Foreningslogin og administration</li> |
|
|
<li>• Mailkampagner til partnere</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="flex-1 md:pr-8 md:text-right mb-4 md:mb-0"> |
|
|
<div class="bg-white dark:bg-dark-surface p-4 rounded-lg shadow"> |
|
|
<h4 class="font-bold mb-2">Kommende Funktioner</h4> |
|
|
<ul class="text-sm space-y-1"> |
|
|
<li>• AI-match baseret på personlighed</li> |
|
|
<li>• Personlighedstest integration</li> |
|
|
<li>• NFC-bekræftelsessystem</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mx-4"> |
|
|
<span class="text-white font-bold">2</span> |
|
|
</div> |
|
|
<div class="flex-1 md:pl-8 md:text-left"> |
|
|
<h3 class="text-xl font-bold mb-2">App Lancering</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Fuldskala lancering til den almene dansker med gratis oprettelse og alle kernefunktioner aktiveret.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="flex-1 md:pr-8 md:text-right mb-4 md:mb-0"> |
|
|
<h3 class="text-xl font-bold mb-2">Vækst & Skalering</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Udvidelse til andre nordiske lande og premium funktioner for avancerede brugere.</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mx-4"> |
|
|
<span class="text-white font-bold">3</span> |
|
|
</div> |
|
|
<div class="flex-1 md:pl-8 md:text-left"> |
|
|
<div class="bg-white dark:bg-dark-surface p-4 rounded-lg shadow"> |
|
|
<h4 class="font-bold mb-2">Ekspansion</h4> |
|
|
<ul class="text-sm space-y-1"> |
|
|
<li>• International udvidelse</li> |
|
|
<li>• Premium abonnementsmuligheder</li> |
|
|
<li>• Virksomhedspartnerskaber</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white dark:bg-dark-background"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Fakta om Ensomhed</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="text-center" data-aos="fade-up"> |
|
|
<div class="text-5xl font-bold text-primary mb-4">25%</div> |
|
|
<h3 class="text-xl font-bold mb-2">Unge Danskere</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">føler sig ensomme i længere perioder</p> |
|
|
</div> |
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="text-5xl font-bold text-primary mb-4">40%</div> |
|
|
<h3 class="text-xl font-bold mb-2">Stigning</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">i ensomhed blandt unge siden 2020</p> |
|
|
</div> |
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="text-5xl font-bold text-primary mb-4">€13 mia</div> |
|
|
<h3 class="text-xl font-bold mb-2">Omkostning</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">ensomhed koster EU samfundet årligt</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-primary to-primary-dark text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">Klar til at gøre en forskel?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">Bliv en del af SoulMatch og hjælp med at bekæmpe ensomhed i Danmark</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4" data-aos="fade-up" data-aos-delay="200"> |
|
|
<button class="px-8 py-3 bg-white text-primary font-bold rounded-full hover:bg-gray-100 transition">Download Appen</button> |
|
|
<a href="partner-invitation.html" class="px-8 py-3 border-2 border-white text-white font-bold rounded-full hover:bg-white hover:text-primary transition">Bliv Partner</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<img src="https://q1f3.c3.e2-9.dev/soulmatch-uploads-public/SoulMatch%20logo.jpeg" alt="SoulMatch Logo" class="h-8 w-8 rounded-full"> |
|
|
<span class="text-xl font-bold">SoulMatch</span> |
|
|
</div> |
|
|
<p class="text-gray-400">Bekæmp ensomhed gennem meningsfulde forbindelser</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Platform</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white">Funktioner</a></li> |
|
|
<li><a href="#" class="hover:text-white">Sikkerhed</a></li |
