|
|
<!DOCTYPE html> |
|
|
<html lang="da"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SoulMatch - Bekæmp ensomhed gennem fysiske møder</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; |
|
|
} |
|
|
</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"> |
|
|
<img src="https://q1f3.c3.e2-9.dev/soulmatch-uploads-public/SoulMatch%20logo.jpeg" alt="SoulMatch Logo" class="h-10 w-10 rounded-full"> |
|
|
<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 hover: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">Gem mobilen væk, og vær sammen som mennesker</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">SoulMatch forbinder dig med ligesindede og skaber meningsfulde fysiske møder i virkeligheden</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200"> |
|
|
<button class="px-8 py-4 bg-white text-[#016a75] font-bold rounded-full shadow-lg hover:bg-gray-100 transition">Download Appen</button> |
|
|
<button class="px-8 py-4 bg-transparent border-2 border-white text-white font-bold rounded-full hover:bg-white/10 transition">Lær Mere</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white dark:bg-dark-surface"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Et stigende samfundsproblem</h2> |
|
|
<p class="text-xl text-text-secondary dark:text-dark-text-secondary max-w-3xl mx-auto">Ensomhed påvirker tusindvis af danskere, især unge. SoulMatch tager fat om kernen i problemet</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div data-aos="fade-right"> |
|
|
<img src="http://static.photos/people/640x360/42" alt="Ensom person i Danmark" class="rounded-2xl shadow-lg"> |
|
|
</div> |
|
|
<div data-aos="fade-left"> |
|
|
<h3 class="text-2xl font-bold mb-4">Hver fjerde ung føler sig ensom</h3> |
|
|
<p class="mb-4 text-text-secondary dark:text-dark-text-secondary">Langvarig ensomhed har alvorlige konsekvenser for både mental og fysisk sundhed. Det koster samfundet over 8 mia. kroner årligt.</p> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>22% af unge (16-24 år) føler sig alvorligt ensomme</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>Svært for unge med ADHD og autisme at finde fællesskaber</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="icon-primary mt-1 mr-2"></i> |
|
|
<span>Mange tilbud, men svært at finde det rigtige lokalt</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"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Hvordan SoulMatch hjælper</h2> |
|
|
<p class="text-xl text-text-secondary dark:text-dark-text-secondary max-w-3xl mx-auto">Vi kombinerer avanceret teknologi med menneskelige behov for at skabe meningsfulde forbindelser</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white dark:bg-dark-surface rounded-2xl p-6 shadow-lg feature-card transition" data-aos="fade-up"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mb-4"> |
|
|
<i data-feather="users" class="text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">AI-Drevet Matching</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Matcher dig med ligesindede baseret på personlighed, interesser og baggrund</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-dark-surface rounded-2xl p-6 shadow-lg feature-card transition" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mb-4"> |
|
|
<i data-feather="map-pin" class="text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Fysiske Møder</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">Chatten kræver NFC-bekræftelse inden for 3 dage for at fortsætte samtalen</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-dark-surface rounded-2xl p-6 shadow-lg feature-card transition" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mb-4"> |
|
|
<i data-feather="shield" class="text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Sikkerhed & Tryghed</h3> |
|
|
<p class="text-text-secondary dark:text-dark-text-secondary">MitID-verificering, ansigtsgenkendelse og SOS-funktion skaber trygge møder</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white dark:bg-dark-background"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Funktioner der skaber forbindelse</h2> |
|
|
<p class="text-xl text-text-secondary dark:text-dark-text-secondary max-w-3xl mx-auto">SoulMatch kombinerer teknologi og menneskelige behov for at skabe autentiske relationer</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-16"> |
|
|
<div class="flex flex-col md:flex-row items-center gap-8"> |
|
|
<div class="md:w-1/2" data-aos="fade-right"> |
|
|
<img src="http://static.photos/technology/640x360/12" alt="AI Personlighedsmatching teknologi" class="rounded-2xl shadow-lg"> |
|
|
</div> |
|
|
<div class="md:w-1/2" data-aos="fade-left"> |
|
|
<h3 class="text-2xl font-bold mb-4">Dybdegående Personlighedsmatching</h3> |
|
|
<p class="mb-4 text-text-secondary dark:text-dark-text-secondary">Vores AI analyserer din personlighed og matcher dig med ligesindede baseret på Jungiansk psykologi og Big Five-modellen.</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="icon-primary mr-2"></i> |
|
|
<span>Valgfri personlighedstest for præcis matching</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="icon-primary mr-2"></i> |
|
|
<span>Match på interesser, kultur og opvækst</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row-reverse items-center gap-8"> |
|
|
<div class="md:w-1/2" data-aos="fade-left"> |
|
|
<img src="http://static.photos/people/640x360/78" alt="Let's Go funktion - fysiske møder" class="rounded-2xl shadow-lg"> |
|
|
</div> |
|
|
<div class="md:w-1/2" data-aos="fade-right"> |
|
|
<h3 class="text-2xl font-bold mb-4">"Let's Go" Funktion</h3> |
|
|
<p class="mb-4 text-text-secondary dark:text-dark-text-secondary">Find personer i dit område med fælles interesser og foreslå konkrete møder. Vores system hjælper med at organisere og planlægge.</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="icon-primary mr-2"></i> |
|
|
<span>Foreslå møder baseret på fælles interesser</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="icon-primary mr-2"></i> |
|
|
<span>Vælg gruppestørrelse og mødested</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-8"> |
|
|
<div class="md:w-1/2" data-aos="fade-right"> |
|
|
<img src="http://static.photos/cityscape/640x360/34" alt="Events og mødesteder i byen" class="rounded-2xl shadow-lg"> |
|
|
</div> |
|
|
<div class="md:w-1/2" data-aos="fade-left"> |
|
|
<h3 class="text-2xl font-bold mb-4">Events & Mødesteder</h3> |
|
|
<p class="mb-4 text-text-secondary dark:text-dark-text-secondary">Find og opret events i dit lokalsamfund. Vores database samler alle sociale tilbud på ét sted.</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="icon-primary mr-2"></i> |
|
|
<span>Database over lokale mødesteder og events</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="icon-primary mr-2"></i> |
|
|
<span>Opret dine egne events og inviter andre</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-[#016a75] text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Vil du være med til at bekæmpe ensomheden?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Download SoulMatch i dag og tag det første skridt mod meningsfulde forbindelser</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<button class="px-8 py-4 bg-white text-[#016a75] font-bold rounded-full shadow-lg hover:bg-gray-100 transition flex items-center justify-center"> |
|
|
<i data-feather="download" class="mr-2"></i> Download til iOS |
|
|
</button> |
|
|
<button class="px-8 py-4 bg-transparent border-2 border-white text-white font-bold rounded-full hover:bg-white/10 transition flex items-center justify-center"> |
|
|
<i data-feather="download" class="mr-2"></i> Download til Android |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-dark-surface text-dark-text-primary 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 text-white">SoulMatch</span> |
|
|
</div> |
|
|
<p class="text-dark-text-secondary mb-4">Skaber meningsfulde forbindelser gennem fysiske møder og AI-drevet matching.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-dark-text-secondary hover:text-white transition"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-dark-text-secondary hover:text-white transition"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-dark-text-secondary hover:text-white transition"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold text-white mb-4">Produkt</h3> |
|
|
<ul class="space-y-2 text-dark-text-secondary"> |
|
|
<li><a href="#" class="hover:text-white transition">Funktioner</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Sikkerhed</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Download</a></li> |
|
|
<li><a href="partner-invitation.html" class="hover:text-white transition">Bliv Partner</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold text-white mb-4">Virksomhed</h3> |
|
|
<ul class="space-y-2 text-dark-text-secondary"> |
|
|
<li><a href="om-os.html" class="hover:text-white transition">Om os</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Blog</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Karriere</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Presse</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold text-white mb-4">Support</h3> |
|
|
<ul class="space-y-2 text-dark-text-secondary"> |
|
|
<li><a href="#" class="hover:text-white transition">Hjælp & FAQ</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Kontakt os</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Privatlivspolitik</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Vilkår for brug</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-dark-border mt-12 pt-8 text-center text-dark-text-secondary"> |
|
|
<p>© 2023 SoulMatch. Alle rettigheder forbeholdes.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} else { |
|
|
document.documentElement.classList.remove('dark'); |
|
|
} |
|
|
|
|
|
|
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-out-cubic' |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
themeToggle.addEventListener('click', function() { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
if (document.documentElement.classList.contains('dark')) { |
|
|
localStorage.setItem('theme', 'dark'); |
|
|
} else { |
|
|
localStorage.setItem('theme', 'light'); |
|
|
} |
|
|
|
|
|
|
|
|
const sunIcon = themeToggle.querySelector('[data-feather="sun"]'); |
|
|
const moonIcon = themeToggle.querySelector('[data-feather="moon"]'); |
|
|
|
|
|
if (document.documentElement.classList.contains('dark')) { |
|
|
sunIcon.classList.remove('hidden'); |
|
|
moonIcon.classList.add('hidden'); |
|
|
} else { |
|
|
sunIcon.classList.add('hidden'); |
|
|
moonIcon.classList.remove('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function updateThemeIcon() { |
|
|
const sunIcon = themeToggle.querySelector('[data-feather="sun"]'); |
|
|
const moonIcon = themeToggle.querySelector('[data-feather="moon"]'); |
|
|
|
|
|
if (document.documentElement.classList.contains('dark')) { |
|
|
sunIcon.classList.remove('hidden'); |
|
|
moonIcon.classList.add('hidden'); |
|
|
} else { |
|
|
sunIcon.classList.add('hidden'); |
|
|
moonIcon.classList.remove('hidden'); |
|
|
} |
|
|
feather.replace(); |
|
|
} |
|
|
|
|
|
|
|
|
updateThemeIcon(); |
|
|
|
|
|
|
|
|
themeToggle.addEventListener('click', updateThemeIcon); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
