Initial React project
This commit is contained in:
Johan
174
public/homepage.html
Normal file
174
public/homepage.html
Normal file
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="da" class="scroll-smooth"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Arbejd - Danmarks Nye Jobportal</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(20, 184, 166, 0.2); border-radius: 20px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 184, 166, 0.4); }
|
||||
|
||||
@keyframes float-slow {
|
||||
0%, 100% { transform: translateY(0) scale(1); }
|
||||
50% { transform: translateY(-15px) scale(1.02); }
|
||||
}
|
||||
@keyframes float-medium {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
@keyframes float-fast {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
|
||||
.animate-float-medium { animation: float-medium 6s ease-in-out infinite; }
|
||||
.animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #0f172a 0%, #0d9488 50%, #4338ca 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.text-gradient-subtle {
|
||||
background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#f8fafc] relative min-h-screen text-gray-600 selection:bg-teal-100 selection:text-teal-900 overflow-x-hidden flex flex-col font-normal custom-scrollbar">
|
||||
|
||||
<div class="fixed top-[-15%] left-[-10%] w-[60vw] h-[60vw] rounded-full bg-gradient-to-br from-teal-400/30 to-emerald-300/10 blur-[140px] pointer-events-none z-0"></div>
|
||||
<div class="fixed bottom-[-15%] right-[-10%] w-[70vw] h-[70vw] rounded-full bg-gradient-to-tl from-indigo-500/20 to-purple-400/10 blur-[160px] pointer-events-none z-0"></div>
|
||||
<div class="fixed top-[20%] right-[15%] w-[40vw] h-[40vw] rounded-full bg-gradient-to-tr from-cyan-400/20 to-blue-300/10 blur-[130px] pointer-events-none z-0"></div>
|
||||
|
||||
<nav class="fixed top-0 inset-x-0 z-50 h-16 bg-white/20 backdrop-blur-2xl border-b border-white/50 shadow-[0_4px_30px_rgba(0,0,0,0.03)] flex items-center justify-between px-6 lg:px-12 transition-all">
|
||||
<a href="#" class="flex items-center gap-2 group outline-none">
|
||||
<svg viewBox="0 0 100 100" class="w-8 h-8 rounded-lg shadow-[0_4px_15px_rgba(49,103,201,0.2)] group-hover:shadow-[0_6px_20px_rgba(49,103,201,0.3)] transition-all group-hover:scale-105">
|
||||
<defs>
|
||||
<linearGradient id="navLogoBg" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#1A9A75"></stop>
|
||||
<stop offset="100%" stop-color="#3167C9"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="navLogoFg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#6ACEEB"></stop>
|
||||
<stop offset="100%" stop-color="#46D3B6"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="100" height="100" fill="url(#navLogoBg)"></rect>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M 60 15 L 72 15 L 72 85 L 60 85 L 60 72.98 A 28 28 0 1 1 60 27.02 Z M 44 34 A 16 16 0 1 0 44 66 A 16 16 0 1 0 44 34 Z" fill="url(#navLogoFg)"></path>
|
||||
</svg>
|
||||
<span class="text-xl font-normal tracking-tight text-gray-900 uppercase">ARBEJD</span>
|
||||
</a>
|
||||
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a href="#" class="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Sådan virker det</a>
|
||||
<a href="#" class="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Gratis hjælp</a>
|
||||
<a href="#" class="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Priser</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="#" class="hidden sm:block text-base font-normal text-gray-700 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Log ind</a>
|
||||
<a href="#" class="text-base font-normal text-white bg-gradient-to-r from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-700 px-5 py-2.5 rounded-full transition-all shadow-[0_4px_15px_rgba(0,0,0,0.1)] outline-none border border-gray-700">Opret dig</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="flex-1 relative z-10 pt-16">
|
||||
<section class="relative pt-24 pb-32 px-6 lg:px-12 max-w-7xl mx-auto flex flex-col items-center text-center">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl aspect-[2/1] bg-gradient-to-tr from-white/40 via-white/10 to-teal-50/30 backdrop-blur-3xl border border-white/60 rounded-[3rem] shadow-[0_8px_40px_rgba(0,0,0,0.06)] -z-10 animate-float-slow"></div>
|
||||
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-white/60 to-white/30 backdrop-blur-xl border border-white/80 text-teal-800 text-sm font-medium uppercase tracking-wider mb-8 shadow-[0_4px_20px_rgba(20,184,166,0.1)]">
|
||||
<iconify-icon icon="solar:magic-stick-3-linear" class="text-base" style="stroke-width: 1.5;"></iconify-icon>
|
||||
Fremtidens rekruttering
|
||||
</div>
|
||||
|
||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-medium tracking-tight text-gradient mb-8 leading-tight max-w-4xl drop-shadow-sm">
|
||||
Arbejd, Danmarks Nye Jobportal
|
||||
</h1>
|
||||
|
||||
<p class="text-xl md:text-2xl text-gray-600 mb-10 max-w-2xl font-normal leading-relaxed drop-shadow-sm">
|
||||
Opdag drømmejobbet med kraften fra AI. Vi matcher dine færdigheder med de perfekte muligheder og hjælper dig hele vejen til samtalen.
|
||||
</p>
|
||||
|
||||
<button class="group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white rounded-full font-normal text-lg overflow-hidden shadow-[0_8px_25px_rgba(17,24,39,0.25)] hover:shadow-[0_12px_35px_rgba(17,24,39,0.35)] transition-all outline-none border border-gray-700 hover:-translate-y-0.5">
|
||||
<span class="relative z-10">Udforsk Arbejd.com</span>
|
||||
<iconify-icon icon="solar:arrow-right-linear" class="text-xl group-hover:translate-x-1 transition-transform relative z-10" style="stroke-width: 1.5;"></iconify-icon>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="py-12 border-y border-white/40 bg-gradient-to-r from-white/10 via-white/30 to-white/10 backdrop-blur-xl shadow-[0_4px_30px_rgba(0,0,0,0.02)]">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-12">
|
||||
<p class="text-center text-sm font-medium text-gray-500 uppercase tracking-widest mb-8 drop-shadow-sm">Stoles på af innovative virksomheder</p>
|
||||
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
|
||||
<iconify-icon icon="solar:box-linear" class="text-3xl text-gray-800" style="stroke-width: 1.5;"></iconify-icon>
|
||||
<iconify-icon icon="solar:medal-ribbon-linear" class="text-3xl text-gray-800" style="stroke-width: 1.5;"></iconify-icon>
|
||||
<iconify-icon icon="solar:global-linear" class="text-3xl text-gray-800" style="stroke-width: 1.5;"></iconify-icon>
|
||||
<iconify-icon icon="solar:buildings-2-linear" class="text-3xl text-gray-800" style="stroke-width: 1.5;"></iconify-icon>
|
||||
<iconify-icon icon="solar:laptop-linear" class="text-3xl text-gray-800" style="stroke-width: 1.5;"></iconify-icon>
|
||||
<iconify-icon icon="solar:database-linear" class="text-3xl text-gray-800" style="stroke-width: 1.5;"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
|
||||
<div class="text-center mb-16 relative z-10">
|
||||
<h2 class="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Succeshistorier</h2>
|
||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto font-normal drop-shadow-sm">Se hvordan andre har brugt Arbejd til at lande drømmejobbet.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
|
||||
<div class="text-center mb-16 relative z-10">
|
||||
<h2 class="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Mød holdet bag</h2>
|
||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto font-normal drop-shadow-sm">Passionerede mennesker der brænder for at revolutionere måden, vi finder arbejde på.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
|
||||
<div class="text-center mb-16 relative z-10">
|
||||
<h2 class="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Gennemsigtige priser</h2>
|
||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto font-normal drop-shadow-sm">Vælg den plan, der passer bedst til din karriererejse.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-24 px-6 lg:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<div class="bg-gradient-to-br from-teal-400/20 via-indigo-400/10 to-purple-400/20 backdrop-blur-3xl border border-white/60 rounded-[3rem] p-10 md:p-16 text-center shadow-[0_20px_60px_rgba(0,0,0,0.05)] relative overflow-hidden group">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-white/60 to-white/20 z-0"></div>
|
||||
<div class="relative z-10 max-w-3xl mx-auto flex flex-col items-center">
|
||||
<iconify-icon icon="solar:rocket-linear" class="text-5xl text-teal-600 mb-6 drop-shadow-sm" style="stroke-width: 1.5;"></iconify-icon>
|
||||
<h2 class="text-3xl md:text-5xl font-medium tracking-tight text-gradient-subtle mb-6 leading-tight drop-shadow-sm">
|
||||
Klar til at tage styringen over din karriere?
|
||||
</h2>
|
||||
<p class="text-xl text-gray-700 mb-10 font-normal leading-relaxed drop-shadow-sm">
|
||||
Din næste store chance venter.
|
||||
</p>
|
||||
<button class="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 border border-gray-700 hover:border-gray-600 text-white rounded-full font-normal text-lg transition-all shadow-[0_8px_25px_rgba(17,24,39,0.2)] outline-none hover:-translate-y-0.5">
|
||||
Tilmeld dig Arbejd.com i dag
|
||||
<iconify-icon icon="solar:arrow-right-linear" class="text-xl" style="stroke-width: 1.5;"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="bg-white/60 backdrop-blur-xl border-t border-white/80 mt-10 pt-16 pb-12 relative z-10 shadow-[0_-10px_40px_rgba(0,0,0,0.02)]">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-12">
|
||||
<div class="pt-8 border-t border-gray-200/60 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p class="text-sm text-gray-400 font-normal">© 2026 Arbejd.com. Alle rettigheder forbeholdes.</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="#" class="text-sm text-gray-400 hover:text-gray-900 transition-colors font-normal">Privatlivspolitik</a>
|
||||
<a href="#" class="text-sm text-gray-400 hover:text-gray-900 transition-colors font-normal">Handelsbetingelser</a>
|
||||
<a href="#" class="text-sm text-gray-400 hover:text-gray-900 transition-colors font-normal">Cookies</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user