Initial React project
This commit is contained in:
Johan
1
dist/assets/index-50E0dQjK.css
vendored
1
dist/assets/index-50E0dQjK.css
vendored
File diff suppressed because one or more lines are too long
1
dist/assets/index-AhWpbe-c.css
vendored
Normal file
1
dist/assets/index-AhWpbe-c.css
vendored
Normal file
File diff suppressed because one or more lines are too long
11
dist/assets/index-BLITCir6.js
vendored
Normal file
11
dist/assets/index-BLITCir6.js
vendored
Normal file
File diff suppressed because one or more lines are too long
11
dist/assets/index-NzuLru3R.js
vendored
11
dist/assets/index-NzuLru3R.js
vendored
File diff suppressed because one or more lines are too long
174
dist/homepage.html
vendored
Normal file
174
dist/homepage.html
vendored
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>
|
||||
6
dist/index.html
vendored
6
dist/index.html
vendored
@@ -5,8 +5,10 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>arbejd-react</title>
|
||||
<script type="module" crossorigin src="/assets/index-NzuLru3R.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-50E0dQjK.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-BLITCir6.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-AhWpbe-c.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>arbejd-react</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
2
node_modules/.tmp/tsconfig.app.tsbuildinfo
generated
vendored
2
node_modules/.tmp/tsconfig.app.tsbuildinfo
generated
vendored
File diff suppressed because one or more lines are too long
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>
|
||||
@@ -6,6 +6,7 @@ import { CareerAgentPage } from './presentation/ai-agent/pages/CareerAgentPage';
|
||||
import { CvPage } from './presentation/cv/pages/CvPage';
|
||||
import type { DashboardNavKey } from './presentation/dashboard/components/DashboardSidebar';
|
||||
import { DashboardPage } from './presentation/dashboard/pages/DashboardPage';
|
||||
import { HomePage } from './presentation/home/pages/HomePage';
|
||||
import { JobDetailPage } from './presentation/jobs/pages/JobDetailPage';
|
||||
import { JobsPage } from './presentation/jobs/pages/JobsPage';
|
||||
import { MessagesPage } from './presentation/messages/pages/MessagesPage';
|
||||
@@ -25,6 +26,7 @@ interface JobDetailSelection {
|
||||
}
|
||||
|
||||
function App() {
|
||||
const isHomeRoute = useMemo(() => window.location.pathname === '/home', []);
|
||||
const initialAuthenticated = useMemo(() => Boolean(window.localStorage.getItem('token')), []);
|
||||
const initialTheme = useMemo<'light' | 'dark'>(() => {
|
||||
const stored = window.localStorage.getItem('theme');
|
||||
@@ -85,6 +87,10 @@ function App() {
|
||||
});
|
||||
}
|
||||
|
||||
if (isHomeRoute) {
|
||||
return <HomePage />;
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <AuthPage onAuthenticated={() => setIsAuthenticated(true)} />;
|
||||
}
|
||||
|
||||
13
src/iconify-icon.d.ts
vendored
Normal file
13
src/iconify-icon.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
import type { DetailedHTMLProps, HTMLAttributes } from 'react';
|
||||
|
||||
declare module 'react' {
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'iconify-icon': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
|
||||
icon?: string;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
@@ -13,6 +13,7 @@ interface DashboardTopbarProps {
|
||||
export function DashboardTopbar({ actions, imageUrl, name, onLogout, onToggleTheme, theme = 'light' }: DashboardTopbarProps) {
|
||||
return (
|
||||
<header className="dash-topbar">
|
||||
<a href="/home" className="dash-home-btn">HomePage</a>
|
||||
{onToggleTheme ? (
|
||||
<button type="button" className="dash-theme-btn" onClick={onToggleTheme}>
|
||||
{theme === 'dark' ? <Sun size={15} strokeWidth={1.8} /> : <Moon size={15} strokeWidth={1.8} />}
|
||||
|
||||
@@ -299,6 +299,22 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dash-home-btn {
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.62);
|
||||
border-radius: 999px;
|
||||
padding: 8px 12px;
|
||||
color: #111827;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dash-home-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
.dash-theme-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
@@ -1031,6 +1047,7 @@
|
||||
}
|
||||
|
||||
.theme-dark .dash-topbar .dash-theme-btn,
|
||||
.theme-dark .dash-home-btn,
|
||||
.theme-dark .dash-profile-btn {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
@@ -1038,6 +1055,7 @@
|
||||
}
|
||||
|
||||
.theme-dark .dash-topbar .dash-theme-btn:hover,
|
||||
.theme-dark .dash-home-btn:hover,
|
||||
.theme-dark .dash-profile-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
598
src/presentation/home/pages/HomePage.tsx
Normal file
598
src/presentation/home/pages/HomePage.tsx
Normal file
@@ -0,0 +1,598 @@
|
||||
import { useEffect, useState, type CSSProperties } from 'react';
|
||||
import './homepage.css';
|
||||
|
||||
interface IconifyIconProps {
|
||||
className?: string;
|
||||
icon: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
function IconifyIcon({ className, icon, style }: IconifyIconProps) {
|
||||
return <iconify-icon className={className} icon={icon} style={style} />;
|
||||
}
|
||||
|
||||
export function HomePage() {
|
||||
const [isNavOpen, setIsNavOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNavOpen) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const previousOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
function handleEscape(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
setIsNavOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', handleEscape);
|
||||
return () => {
|
||||
document.body.style.overflow = previousOverflow;
|
||||
window.removeEventListener('keydown', handleEscape);
|
||||
};
|
||||
}, [isNavOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
if (window.innerWidth > 990) {
|
||||
setIsNavOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="homepage-react-root scroll-smooth 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 className="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 className="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 className="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" />
|
||||
|
||||
<nav className="homepage-nav 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="#" className="flex items-center gap-2 group outline-none">
|
||||
<svg viewBox="0 0 100 100" className="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%" stopColor="#1A9A75" />
|
||||
<stop offset="100%" stopColor="#3167C9" />
|
||||
</linearGradient>
|
||||
<linearGradient id="navLogoFg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#6ACEEB" />
|
||||
<stop offset="100%" stopColor="#46D3B6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="100" height="100" fill="url(#navLogoBg)" />
|
||||
<path fillRule="evenodd" clipRule="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)" />
|
||||
</svg>
|
||||
<span className="text-xl font-normal tracking-tight text-gray-900 uppercase">ARBEJD</span>
|
||||
</a>
|
||||
|
||||
<div className="homepage-nav-links flex items-center gap-8">
|
||||
<a href="#" className="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="#" className="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Gratis hjælp</a>
|
||||
<a href="#" className="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Priser</a>
|
||||
</div>
|
||||
|
||||
<div className="homepage-nav-actions flex items-center gap-4">
|
||||
<a href="#" className="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="#" className="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>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="homepage-nav-hamburger"
|
||||
aria-expanded={isNavOpen}
|
||||
aria-label={isNavOpen ? 'Luk menu' : 'Åbn menu'}
|
||||
onClick={() => setIsNavOpen((current) => !current)}
|
||||
>
|
||||
<IconifyIcon icon={isNavOpen ? 'solar:close-circle-linear' : 'solar:hamburger-menu-linear'} className="text-xl text-gray-800" style={{ strokeWidth: 1.8 }} />
|
||||
</button>
|
||||
|
||||
<div className={isNavOpen ? 'homepage-nav-popup open' : 'homepage-nav-popup'}>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Gratis hjælp</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Priser</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Log ind</a>
|
||||
<a href="#" className="homepage-nav-popup-cta" onClick={() => setIsNavOpen(false)}>Opret dig</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="flex-1 relative z-10 pt-16">
|
||||
<section className="relative pt-24 pb-32 px-6 lg:px-12 max-w-7xl mx-auto flex flex-col items-center text-center">
|
||||
<div className="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 className="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)]">
|
||||
<IconifyIcon icon="solar:magic-stick-3-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
|
||||
Fremtidens rekruttering
|
||||
</div>
|
||||
|
||||
<h1 className="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
|
||||
<br />
|
||||
Nye Jobportal
|
||||
</h1>
|
||||
|
||||
<p className="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 type="button" className="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 className="relative z-10">Udforsk Arbejd.com</span>
|
||||
<IconifyIcon icon="solar:arrow-right-linear" className="text-xl group-hover:translate-x-1 transition-transform relative z-10" style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section className="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 className="max-w-7xl mx-auto px-6 lg:px-12">
|
||||
<p className="text-center text-sm font-medium text-gray-500 uppercase tracking-widest mb-8 drop-shadow-sm">Stoles på af innovative virksomheder</p>
|
||||
<div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
|
||||
<IconifyIcon icon="solar:box-linear" className="text-3xl text-gray-800" style={{ strokeWidth: 1.5 }} />
|
||||
<IconifyIcon icon="solar:medal-ribbon-linear" className="text-3xl text-gray-800" style={{ strokeWidth: 1.5 }} />
|
||||
<IconifyIcon icon="solar:global-linear" className="text-3xl text-gray-800" style={{ strokeWidth: 1.5 }} />
|
||||
<IconifyIcon icon="solar:buildings-2-linear" className="text-3xl text-gray-800" style={{ strokeWidth: 1.5 }} />
|
||||
<IconifyIcon icon="solar:laptop-linear" className="text-3xl text-gray-800" style={{ strokeWidth: 1.5 }} />
|
||||
<IconifyIcon icon="solar:database-linear" className="text-3xl text-gray-800" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-32 px-6 lg:px-12 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative w-full aspect-square md:aspect-[4/3] lg:aspect-square flex items-center justify-center group">
|
||||
<div className="absolute w-[88%] h-[60%] top-[4%] left-[6%] bg-gradient-to-br from-white/50 to-white/10 backdrop-blur-2xl border border-white/60 rounded-t-3xl rounded-b-xl shadow-[0_20px_50px_rgba(0,0,0,0.06)] overflow-hidden animate-float-slow z-0 flex flex-col transition-transform duration-700 group-hover:scale-[1.02]">
|
||||
<div className="w-full flex-1 p-3 flex flex-col relative bg-white/10">
|
||||
<div className="h-3 w-full flex justify-center absolute top-2 left-0 z-20">
|
||||
<div className="w-1.5 h-1.5 bg-gray-800/30 rounded-full backdrop-blur-md shadow-inner" />
|
||||
</div>
|
||||
<div className="w-full h-full bg-white/40 backdrop-blur-xl border border-white/50 rounded-xl overflow-hidden relative shadow-sm">
|
||||
<div className="absolute top-0 left-0 w-full h-8 bg-white/30 border-b border-white/40 flex items-center px-4">
|
||||
<div className="w-1/4 h-2 bg-gray-300/50 rounded-full" />
|
||||
</div>
|
||||
<div className="p-4 flex gap-4 mt-8 opacity-60">
|
||||
<div className="w-1/3 h-16 bg-teal-200/20 rounded-lg" />
|
||||
<div className="w-1/3 h-16 bg-indigo-200/20 rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-5 w-full bg-gradient-to-b from-white/90 to-gray-100/60 border-t border-white/80 rounded-b-xl relative shadow-md flex justify-center z-20">
|
||||
<div className="w-1/5 h-1 bg-gray-300/60 rounded-b-md mt-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute w-[75%] h-[50%] top-[18%] left-[12.5%] bg-gradient-to-br from-white/80 to-white/30 backdrop-blur-3xl border border-white/90 rounded-2xl shadow-[0_30px_60px_rgba(0,0,0,0.08)] overflow-hidden animate-float-medium [animation-delay:-2s] z-10 transition-transform duration-700 group-hover:-translate-y-2">
|
||||
<div className="h-8 bg-gradient-to-r from-white/70 to-white/40 border-b border-white/70 flex items-center px-4 gap-2 backdrop-blur-2xl">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-red-400 shadow-sm" />
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-amber-400 shadow-sm" />
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-emerald-400 shadow-sm" />
|
||||
<div className="ml-4 w-1/2 h-4 bg-white/60 rounded-md border border-white/80 shadow-inner flex items-center px-2">
|
||||
<div className="w-1/3 h-1.5 bg-gray-300/60 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5 h-full flex flex-col gap-3 relative">
|
||||
<div className="w-1/3 h-4 bg-gray-300/40 rounded-md" />
|
||||
<div className="w-2/3 h-3 bg-gray-200/40 rounded-md" />
|
||||
<div className="mt-2 grid grid-cols-2 gap-3">
|
||||
<div className="h-16 bg-gradient-to-br from-teal-100/50 to-white/40 border border-white/70 rounded-xl shadow-sm" />
|
||||
<div className="h-16 bg-gradient-to-br from-indigo-100/50 to-white/40 border border-white/70 rounded-xl shadow-sm" />
|
||||
</div>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-14 h-14 bg-white rounded-2xl shadow-xl flex items-center justify-center border border-white/80">
|
||||
<IconifyIcon icon="solar:layers-linear" className="text-2xl text-teal-500" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute w-[26%] h-[60%] bottom-[8%] left-[8%] bg-gradient-to-tr from-white/80 via-white/50 to-teal-50/50 backdrop-blur-3xl border border-white/90 rounded-[1.75rem] shadow-[0_25px_50px_rgba(0,0,0,0.12)] overflow-hidden animate-float-fast [animation-delay:-1s] z-20 flex flex-col transition-transform duration-700 group-hover:-translate-x-3 group-hover:-rotate-2">
|
||||
<div className="h-5 w-full flex justify-center pt-2.5 relative z-10">
|
||||
<div className="w-2 h-2 bg-gray-800/40 rounded-full shadow-inner backdrop-blur-md" />
|
||||
</div>
|
||||
<div className="flex-1 p-2.5 flex flex-col gap-2.5 relative z-0 mt-1">
|
||||
<div className="w-full h-8 bg-white/70 border border-white/80 shadow-sm rounded-full flex items-center px-3 gap-2">
|
||||
<IconifyIcon icon="solar:magnifer-linear" className="text-gray-400 text-xs" />
|
||||
<div className="w-1/2 h-1.5 bg-gray-300/80 rounded-full" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 mt-1">
|
||||
<div className="aspect-square bg-gradient-to-br from-teal-400/30 to-cyan-400/20 rounded-xl border border-white/70 shadow-sm" />
|
||||
<div className="aspect-square bg-gradient-to-br from-amber-400/30 to-orange-400/20 rounded-xl border border-white/70 shadow-sm" />
|
||||
</div>
|
||||
<div className="w-full h-12 bg-white/80 backdrop-blur-xl rounded-xl border border-white/90 shadow-sm mt-auto mb-1 p-2 flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-tr from-teal-200 to-teal-100 flex-shrink-0" />
|
||||
<div className="w-1/2 h-1.5 bg-gray-300/80 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-3 w-full flex justify-center pb-2">
|
||||
<div className="w-1/4 h-0.5 bg-gray-400/50 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute w-[28%] h-[65%] bottom-[5%] right-[8%] bg-gradient-to-b from-white/80 to-white/40 backdrop-blur-3xl border border-white/90 rounded-[2rem] shadow-[0_30px_60px_rgba(0,0,0,0.15)] overflow-hidden animate-float-medium [animation-delay:-3s] z-30 flex flex-col transition-transform duration-700 group-hover:translate-x-3 group-hover:rotate-2">
|
||||
<div className="h-5 w-full flex justify-center pt-1.5">
|
||||
<div className="w-1/3 h-3 bg-gray-900/20 rounded-full backdrop-blur-md" />
|
||||
</div>
|
||||
<div className="flex-1 p-3 flex flex-col gap-2.5 mt-1">
|
||||
<div className="w-full h-8 bg-white/60 border border-white/70 shadow-sm rounded-lg" />
|
||||
<div className="w-full h-20 bg-gradient-to-br from-indigo-400/30 to-purple-400/20 rounded-xl border border-white/70 shadow-sm" />
|
||||
<div className="w-full h-10 bg-white/80 backdrop-blur-xl rounded-xl border border-white/90 shadow-sm flex items-center px-2 gap-2">
|
||||
<div className="w-5 h-5 rounded-full bg-gradient-to-tr from-indigo-200 to-indigo-100 flex-shrink-0" />
|
||||
<div className="w-1/2 h-1.5 bg-gray-300/80 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-3 w-full flex justify-center pb-2">
|
||||
<div className="w-1/3 h-1 bg-gray-400/50 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center">
|
||||
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-6">
|
||||
En intelligent genvej
|
||||
<br />
|
||||
til dit næste job
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 mb-10 font-normal leading-relaxed drop-shadow-sm">
|
||||
Arbejd.com kombinerer det nyeste inden for kunstig intelligens med et intuitivt design, der gør din jobsøgning hurtigere, skarpere og mere succesfuld.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="group flex items-start gap-5 p-5 bg-gradient-to-br from-white/50 to-white/10 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:shadow-[0_12px_40px_rgba(20,184,166,0.08)] hover:border-teal-200/60 transition-all cursor-default">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-teal-50 to-white border border-teal-100/50 shadow-sm flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
|
||||
<IconifyIcon icon="solar:document-text-linear" className="text-2xl text-teal-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-gray-900 tracking-tight mb-1">AI-understøttet CV-optimering</h3>
|
||||
<p className="text-base text-gray-600 font-normal">Få skræddersyet dit CV til præcis den stilling du søger, så du altid står skarpest muligt.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group flex items-start gap-5 p-5 bg-gradient-to-br from-white/50 to-white/10 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:shadow-[0_12px_40px_rgba(99,102,241,0.08)] hover:border-indigo-200/60 transition-all cursor-default">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-50 to-white border border-indigo-100/50 shadow-sm flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
|
||||
<IconifyIcon icon="solar:pen-new-square-linear" className="text-2xl text-indigo-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-gray-900 tracking-tight mb-1">AI Ansøgninger</h3>
|
||||
<p className="text-base text-gray-600 font-normal">Generer målrettede og personlige ansøgninger, der fanger arbejdsgiverens opmærksomhed.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group flex items-start gap-5 p-5 bg-gradient-to-br from-white/50 to-white/10 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:shadow-[0_12px_40px_rgba(6,182,212,0.08)] hover:border-cyan-200/60 transition-all cursor-default">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-cyan-50 to-white border border-cyan-100/50 shadow-sm flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
|
||||
<IconifyIcon icon="solar:gamepad-linear" className="text-2xl text-cyan-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-gray-900 tracking-tight mb-1">AI-interview Simulator</h3>
|
||||
<p className="text-base text-gray-600 font-normal">Øv dig til samtalen med vores AI. Få øjeblikkelig feedback og personlige anbefalinger.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group flex items-start gap-5 p-5 bg-gradient-to-br from-white/50 to-white/10 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:shadow-[0_12px_40px_rgba(245,158,11,0.08)] hover:border-amber-200/60 transition-all cursor-default">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-50 to-white border border-amber-100/50 shadow-sm flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
|
||||
<IconifyIcon icon="solar:radar-linear" className="text-2xl text-amber-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-gray-900 tracking-tight mb-1">AI-agenter søger for dig</h3>
|
||||
<p className="text-base text-gray-600 font-normal">Lad vores intelligente agenter overvåge markedet og finde det perfekte match til din profil.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
|
||||
<div className="text-center mb-16 relative z-10">
|
||||
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Succeshistorier</h2>
|
||||
<p className="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 og starte næste kapitel i deres career.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 relative z-10">
|
||||
<div className="bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all group">
|
||||
<div className="aspect-video bg-gray-100 relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80" alt="Team" className="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/40 to-transparent flex items-center justify-center">
|
||||
<button type="button" className="w-14 h-14 rounded-full bg-white/30 backdrop-blur-md border border-white/60 shadow-xl flex items-center justify-center text-white hover:scale-110 hover:bg-white/50 transition-all outline-none">
|
||||
<IconifyIcon icon="solar:play-linear" className="text-2xl ml-1" style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 relative">
|
||||
<p className="text-base text-gray-700 italic mb-6 leading-relaxed">"Simulatoren var en gamechanger. Jeg var super nervøs for min samtale, men feedbacken gav mig roen til at performe 100%."</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<img src="https://i.pravatar.cc/150?img=32" alt="Sofie" className="w-10 h-10 rounded-full border-2 border-white shadow-sm" />
|
||||
<div>
|
||||
<h4 className="text-base font-medium text-gray-900">Sofie Jensen</h4>
|
||||
<p className="text-sm text-teal-600 font-normal">Landed job som Marketing Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all group">
|
||||
<div className="aspect-video bg-gray-100 relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&q=80" alt="Meeting" className="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/40 to-transparent flex items-center justify-center">
|
||||
<button type="button" className="w-14 h-14 rounded-full bg-white/30 backdrop-blur-md border border-white/60 shadow-xl flex items-center justify-center text-white hover:scale-110 hover:bg-white/50 transition-all outline-none">
|
||||
<IconifyIcon icon="solar:play-linear" className="text-2xl ml-1" style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-base text-gray-700 italic mb-6 leading-relaxed">"AI-ansøgningerne sparede mig timevis af arbejde. Det ramte den professionelle tone perfekt fra første forsøg."</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<img src="https://i.pravatar.cc/150?img=12" alt="Mikkel" className="w-10 h-10 rounded-full border-2 border-white shadow-sm" />
|
||||
<div>
|
||||
<h4 className="text-base font-medium text-gray-900">Mikkel Larsen</h4>
|
||||
<p className="text-sm text-indigo-600 font-normal">Landed job som Frontend Udvikler</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all group md:col-span-2 lg:col-span-1">
|
||||
<div className="aspect-video bg-gray-100 relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&q=80" alt="Success" className="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/40 to-transparent flex items-center justify-center">
|
||||
<button type="button" className="w-14 h-14 rounded-full bg-white/30 backdrop-blur-md border border-white/60 shadow-xl flex items-center justify-center text-white hover:scale-110 hover:bg-white/50 transition-all outline-none">
|
||||
<IconifyIcon icon="solar:play-linear" className="text-2xl ml-1" style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-base text-gray-700 italic mb-6 leading-relaxed">"Agenten fandt et job jeg aldrig selv ville have søgt på. Det viste sig at være det helt rigtige match for mig."</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<img src="https://i.pravatar.cc/150?img=47" alt="Amalie" className="w-10 h-10 rounded-full border-2 border-white shadow-sm" />
|
||||
<div>
|
||||
<h4 className="text-base font-medium text-gray-900">Amalie Nielsen</h4>
|
||||
<p className="text-sm text-cyan-600 font-normal">Landed job som Projektleder</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
|
||||
<div className="text-center mb-16 relative z-10">
|
||||
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Mød holdet bag</h2>
|
||||
<p className="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>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto relative z-10">
|
||||
<div className="bg-gradient-to-b from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl p-6 text-center shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:-translate-y-1 hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all duration-300">
|
||||
<div className="w-24 h-24 mx-auto mb-4 rounded-full p-1 bg-gradient-to-tr from-teal-400 to-emerald-300 shadow-md">
|
||||
<img src="https://i.pravatar.cc/150?img=11" alt="Lasse Nielsen" className="w-full h-full rounded-full border-2 border-white object-cover" />
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-gray-900 tracking-tight">Lasse Nielsen</h3>
|
||||
<p className="text-base text-teal-600 font-normal mb-6">CEO & Founder</p>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
|
||||
<span className="text-sm font-medium">in</span>
|
||||
</a>
|
||||
<a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
|
||||
<IconifyIcon icon="solar:camera-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
|
||||
</a>
|
||||
<a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
|
||||
<IconifyIcon icon="solar:letter-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-b from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl p-6 text-center shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:-translate-y-1 hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all duration-300">
|
||||
<div className="w-24 h-24 mx-auto mb-4 rounded-full p-1 bg-gradient-to-tr from-indigo-400 to-purple-300 shadow-md">
|
||||
<img src="https://i.pravatar.cc/150?img=5" alt="Emma" className="w-full h-full rounded-full border-2 border-white object-cover" />
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-gray-900 tracking-tight">Emma Schmidt</h3>
|
||||
<p className="text-base text-indigo-600 font-normal mb-6">Head of AI</p>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
|
||||
<span className="text-sm font-medium">in</span>
|
||||
</a>
|
||||
<a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
|
||||
<IconifyIcon icon="solar:camera-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
|
||||
</a>
|
||||
<a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
|
||||
<IconifyIcon icon="solar:letter-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-b from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl p-6 text-center shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:-translate-y-1 hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all duration-300 sm:col-span-2 lg:col-span-1">
|
||||
<div className="w-24 h-24 mx-auto mb-4 rounded-full p-1 bg-gradient-to-tr from-cyan-400 to-blue-300 shadow-md">
|
||||
<img src="https://i.pravatar.cc/150?img=60" alt="Christian" className="w-full h-full rounded-full border-2 border-white object-cover" />
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-gray-900 tracking-tight">Christian Berg</h3>
|
||||
<p className="text-base text-cyan-600 font-normal mb-6">Lead Designer</p>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
|
||||
<span className="text-sm font-medium">in</span>
|
||||
</a>
|
||||
<a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
|
||||
<IconifyIcon icon="solar:camera-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
|
||||
</a>
|
||||
<a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
|
||||
<IconifyIcon icon="solar:letter-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
|
||||
<div className="text-center mb-16 relative z-10">
|
||||
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Gennemsigtige priser</h2>
|
||||
<p className="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. Start din rejse i dag.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto relative z-10 items-stretch">
|
||||
<div className="bg-gradient-to-br from-white/60 to-white/10 backdrop-blur-3xl border border-white/60 rounded-[2rem] p-8 shadow-[0_8px_30px_rgba(0,0,0,0.04)] flex flex-col relative overflow-hidden">
|
||||
<h3 className="text-2xl font-medium text-gray-900 tracking-tight mb-2">30 dage</h3>
|
||||
<p className="text-base text-gray-600 mb-6">Perfekt til at komme hurtigt i gang.</p>
|
||||
<div className="mb-8">
|
||||
<span className="text-5xl font-medium text-gray-900 tracking-tight">49 kr</span>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8 flex-1">
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Download et professionelt CV - Klar til brug med et enkelt klik</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Karriereagent med personlige anbefalinger</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Øget synlighed – bliv fundet af virksomheder</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Lad systemet lave din ansøgning for dig</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Optimer dit CV med intelligente forslag</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Job simulatoren – træn til din næste jobsamtale</span></li>
|
||||
</ul>
|
||||
<button type="button" className="w-full py-3 rounded-xl bg-white/60 backdrop-blur-md border border-white hover:bg-white/90 text-gray-900 font-medium text-base transition-colors shadow-sm outline-none mt-auto">Vælg 30 dage</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 backdrop-blur-3xl border border-gray-700/50 rounded-[2rem] p-8 shadow-[0_20px_50px_rgba(0,0,0,0.2)] flex flex-col relative overflow-hidden transform lg:-translate-y-4">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-teal-400 via-cyan-400 to-indigo-400" />
|
||||
<div className="absolute top-[-20%] right-[-20%] w-[60%] h-[60%] bg-gradient-to-bl from-teal-500/30 to-cyan-500/10 blur-[60px] rounded-full pointer-events-none" />
|
||||
|
||||
<div className="flex justify-between items-start mb-2 relative z-10">
|
||||
<h3 className="text-2xl font-medium text-white tracking-tight drop-shadow-md">90 dage</h3>
|
||||
<span className="px-3 py-1.5 text-xs font-medium text-teal-900 bg-gradient-to-r from-teal-300 to-emerald-300 rounded-lg uppercase tracking-wider shadow-[0_0_15px_rgba(45,212,191,0.3)]">Mest populær</span>
|
||||
</div>
|
||||
<p className="text-base text-gray-400 mb-6 relative z-10">Ideelt til den dedikerede jobsøgende.</p>
|
||||
<div className="mb-8 relative z-10">
|
||||
<span className="text-5xl font-medium text-white tracking-tight drop-shadow-md">129 kr</span>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8 flex-1 relative z-10">
|
||||
<li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Download et professionelt CV - Klar til brug med et enkelt klik</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Karriereagent med personlige anbefalinger</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Øget synlighed – bliv fundet af virksomheder</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Lad systemet lave din ansøgning for dig</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Optimer dit CV med intelligente forslag</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Job simulatoren – træn til din næste jobsamtale</span></li>
|
||||
</ul>
|
||||
<button type="button" className="w-full py-3 rounded-xl bg-gradient-to-r from-white to-gray-100 text-gray-900 font-medium text-base hover:from-gray-50 hover:to-white transition-all shadow-[0_4px_15px_rgba(255,255,255,0.1)] outline-none relative z-10 mt-auto">Vælg 90 dage</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-white/60 to-white/10 backdrop-blur-3xl border border-white/60 rounded-[2rem] p-8 shadow-[0_8px_30px_rgba(0,0,0,0.04)] flex flex-col relative overflow-hidden">
|
||||
<h3 className="text-2xl font-medium text-gray-900 tracking-tight mb-2">365 dage</h3>
|
||||
<p className="text-base text-gray-600 mb-6">Det bedste langsigtede valg til din karriere.</p>
|
||||
<div className="mb-5 relative">
|
||||
<span className="text-5xl font-medium text-gray-900 tracking-tight">249 kr</span>
|
||||
<span className="block text-sm text-teal-600 font-medium mt-1">Svarer til 0.68 kr. pr. dag</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 p-4 rounded-xl bg-gradient-to-br from-teal-50/80 to-emerald-50/80 border border-teal-200/50 shadow-sm relative overflow-hidden">
|
||||
<div className="absolute -right-3 -top-3 text-teal-500/10">
|
||||
<IconifyIcon icon="solar:gift-bold" className="text-7xl" />
|
||||
</div>
|
||||
<h4 className="text-sm font-medium text-teal-900 mb-1 relative z-10 flex items-center gap-2">
|
||||
<IconifyIcon icon="solar:gift-linear" className="text-base text-teal-600" style={{ strokeWidth: 1.5 }} />
|
||||
Giv en gave
|
||||
</h4>
|
||||
<p className="text-xs text-teal-800 relative z-10 leading-snug">Få en gratis 3-måneders Premium-kode med i købet til en ven.</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8 flex-1">
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Download et professionelt CV - Klar til brug med et enkelt klik</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Karriereagent med personlige anbefalinger</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Øget synlighed – bliv fundet af virksomheder</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Lad systemet lave din ansøgning for dig</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Optimer dit CV med intelligente forslag</span></li>
|
||||
<li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Job simulatoren – træn til din næste jobsamtale</span></li>
|
||||
</ul>
|
||||
<button type="button" className="w-full py-3 rounded-xl bg-white/60 backdrop-blur-md border border-white hover:bg-white/90 text-gray-900 font-medium text-base transition-colors shadow-sm outline-none mt-auto">Vælg 365 dage</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<div className="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 className="absolute inset-0 bg-gradient-to-t from-white/60 to-white/20 z-0" />
|
||||
<div className="absolute top-0 right-0 w-[40%] h-[100%] bg-gradient-to-l from-white/40 to-transparent skew-x-12 translate-x-[150%] group-hover:translate-x-[-250%] transition-transform duration-1000 z-0" />
|
||||
|
||||
<div className="relative z-10 max-w-3xl mx-auto flex flex-col items-center">
|
||||
<IconifyIcon icon="solar:rocket-linear" className="text-5xl text-teal-600 mb-6 drop-shadow-sm" style={{ strokeWidth: 1.5 }} />
|
||||
<h2 className="text-3xl md:text-5xl font-medium tracking-tight text-gradient-subtle mb-6 leading-tight drop-shadow-sm">
|
||||
Klar til at tage styringen
|
||||
<br />
|
||||
over din karriere?
|
||||
</h2>
|
||||
<p className="text-xl text-gray-700 mb-10 font-normal leading-relaxed drop-shadow-sm">
|
||||
Lad ikke de bedste muligheder gå til andre. Tilslut dig tusindvis af ambitiøse jobsøgere, der allerede bruger fremtidens værktøjer på Arbejd.com. Din næste store chance venter.
|
||||
</p>
|
||||
<button type="button" className="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
|
||||
<IconifyIcon icon="solar:arrow-right-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="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 className="max-w-7xl mx-auto px-6 lg:px-12">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-10 mb-16">
|
||||
<div className="col-span-2 lg:col-span-2">
|
||||
<a href="#" className="flex items-center gap-2 mb-6 group outline-none inline-flex">
|
||||
<svg viewBox="0 0 100 100" className="w-8 h-8 rounded-lg shadow-sm transition-transform group-hover:scale-105">
|
||||
<defs>
|
||||
<linearGradient id="footerLogoBg" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#1A9A75" />
|
||||
<stop offset="100%" stopColor="#3167C9" />
|
||||
</linearGradient>
|
||||
<linearGradient id="footerLogoFg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#6ACEEB" />
|
||||
<stop offset="100%" stopColor="#46D3B6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="100" height="100" fill="url(#footerLogoBg)" />
|
||||
<path fillRule="evenodd" clipRule="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(#footerLogoFg)" />
|
||||
</svg>
|
||||
<span className="text-xl font-normal tracking-tight text-gray-900 uppercase">ARBEJD</span>
|
||||
</a>
|
||||
<p className="text-base text-gray-600 font-normal leading-relaxed max-w-xs mb-6 drop-shadow-sm">
|
||||
Danmarks nye, intelligente jobportal, der bringer virksomheder og talent sammen gennem avanceret AI-teknologi.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-base font-medium text-gray-900 mb-5">Sådan virker det</h4>
|
||||
<ul className="space-y-3">
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">For virksomheder</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">For jobsøgere</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Priser</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">FAQ</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Nyhedsbrev</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-base font-medium text-gray-900 mb-5">Opret dig</h4>
|
||||
<ul className="space-y-3">
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Opret virksomhed</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Opret jobsøger</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal flex items-center gap-2">Download app <span className="px-2 py-0.5 bg-gradient-to-r from-gray-100 to-gray-50 border border-gray-200 text-xs font-medium text-gray-600 rounded">Snart</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-base font-medium text-gray-900 mb-5">Om Arbejd.com</h4>
|
||||
<ul className="space-y-3">
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Vores mission</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Presse</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Kontakt</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Gratis hjælp</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Stories</a></li>
|
||||
<li><a href="#" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Jobordbogen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-gray-200/60 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-sm text-gray-400 font-normal">© 2026 Arbejd.com. Alle rettigheder forbeholdes.</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<a href="#" className="text-sm text-gray-400 hover:text-gray-900 transition-colors font-normal">Privatlivspolitik</a>
|
||||
<a href="#" className="text-sm text-gray-400 hover:text-gray-900 transition-colors font-normal">Handelsbetingelser</a>
|
||||
<a href="#" className="text-sm text-gray-400 hover:text-gray-900 transition-colors font-normal">Cookies</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
src/presentation/home/pages/homepage.css
Normal file
108
src/presentation/home/pages/homepage.css
Normal file
@@ -0,0 +1,108 @@
|
||||
.homepage-react-root {
|
||||
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;
|
||||
}
|
||||
|
||||
.homepage-nav {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.homepage-nav-hamburger {
|
||||
display: none;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.homepage-nav-popup {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
right: 0;
|
||||
width: min(320px, calc(100vw - 2rem));
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.75rem;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.homepage-nav-popup a {
|
||||
text-decoration: none;
|
||||
color: #374151;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.85rem;
|
||||
padding: 0.7rem 0.9rem;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.homepage-nav-popup a:hover {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.homepage-nav-popup-cta {
|
||||
color: #ffffff !important;
|
||||
background: linear-gradient(to right, #111827, #1f2937);
|
||||
border: 1px solid rgba(55, 65, 81, 0.8);
|
||||
}
|
||||
|
||||
.homepage-nav-popup.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 990px) {
|
||||
.homepage-nav-links,
|
||||
.homepage-nav-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homepage-nav-hamburger {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCheck,
|
||||
Info,
|
||||
Paperclip,
|
||||
@@ -169,6 +170,8 @@ export function MessagesPage({ onLogout, onNavigate, onToggleTheme, theme }: Mes
|
||||
const [filter, setFilter] = useState<ThreadFilter>('all');
|
||||
const [activeThreadId, setActiveThreadId] = useState<string>('');
|
||||
const [draft, setDraft] = useState('');
|
||||
const [isMobileLayout, setIsMobileLayout] = useState(() => (typeof window !== 'undefined' ? window.innerWidth <= 1000 : false));
|
||||
const [mobileView, setMobileView] = useState<'threads' | 'chat'>('threads');
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
@@ -209,6 +212,22 @@ export function MessagesPage({ onLogout, onNavigate, onToggleTheme, theme }: Mes
|
||||
};
|
||||
}, [viewModel]);
|
||||
|
||||
useEffect(() => {
|
||||
function updateLayout() {
|
||||
const mobile = window.innerWidth <= 1000;
|
||||
setIsMobileLayout(mobile);
|
||||
if (!mobile) {
|
||||
setMobileView('chat');
|
||||
} else if (!activeThreadId) {
|
||||
setMobileView('threads');
|
||||
}
|
||||
}
|
||||
|
||||
updateLayout();
|
||||
window.addEventListener('resize', updateLayout);
|
||||
return () => window.removeEventListener('resize', updateLayout);
|
||||
}, [activeThreadId]);
|
||||
|
||||
const filteredThreads = useMemo(() => {
|
||||
const term = search.trim().toLowerCase();
|
||||
|
||||
@@ -238,6 +257,9 @@ export function MessagesPage({ onLogout, onNavigate, onToggleTheme, theme }: Mes
|
||||
|
||||
async function handleSelectThread(thread: MessageThreadItem) {
|
||||
setActiveThreadId(thread.id);
|
||||
if (isMobileLayout) {
|
||||
setMobileView('chat');
|
||||
}
|
||||
const lastUnread = [...thread.allMessages].reverse().find((item) => isUnreadMessage(item));
|
||||
|
||||
if (lastUnread?.id) {
|
||||
@@ -254,6 +276,10 @@ export function MessagesPage({ onLogout, onNavigate, onToggleTheme, theme }: Mes
|
||||
}
|
||||
}
|
||||
|
||||
function handleBackToThreads() {
|
||||
setMobileView('threads');
|
||||
}
|
||||
|
||||
async function handleMarkAllRead() {
|
||||
const latestUnread = threads
|
||||
.flatMap((thread) => thread.allMessages)
|
||||
@@ -338,7 +364,8 @@ export function MessagesPage({ onLogout, onNavigate, onToggleTheme, theme }: Mes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="msg-layout">
|
||||
<div className={`msg-layout ${isMobileLayout && mobileView === 'chat' ? 'mobile-chat' : 'mobile-threads'}`}>
|
||||
{!isMobileLayout || mobileView === 'threads' ? (
|
||||
<section className="msg-threads">
|
||||
<div className="msg-threads-head">
|
||||
<div className="msg-search-wrap">
|
||||
@@ -381,12 +408,19 @@ export function MessagesPage({ onLogout, onNavigate, onToggleTheme, theme }: Mes
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{!isMobileLayout || mobileView === 'chat' ? (
|
||||
<section className="msg-chat">
|
||||
<div className="msg-chat-head">
|
||||
{activeThread ? (
|
||||
<>
|
||||
<div className="msg-chat-company">
|
||||
{isMobileLayout ? (
|
||||
<button type="button" className="msg-mobile-back-btn" onClick={handleBackToThreads} aria-label="Tilbage til beskeder">
|
||||
<ArrowLeft size={16} strokeWidth={1.9} />
|
||||
</button>
|
||||
) : null}
|
||||
{threadAvatar(activeThread)
|
||||
? <img src={threadAvatar(activeThread)} alt={activeThread.companyName} className="msg-chat-avatar" />
|
||||
: <div className="msg-chat-avatar-fallback">{activeThread.companyName.slice(0, 1).toUpperCase()}</div>}
|
||||
@@ -454,6 +488,7 @@ export function MessagesPage({ onLogout, onNavigate, onToggleTheme, theme }: Mes
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
@@ -368,6 +368,30 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.msg-mobile-back-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(229, 231, 235, 0.85);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
color: #374151;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.msg-mobile-back-btn:hover {
|
||||
background: #ffffff;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.theme-dark .msg-mobile-back-btn {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.msg-chat-company p {
|
||||
margin: 2px 0 0;
|
||||
color: #0f766e;
|
||||
@@ -621,6 +645,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.msg-layout {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.msg-layout.mobile-threads .msg-threads,
|
||||
.msg-layout.mobile-chat .msg-chat {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.msg-layout.mobile-threads .msg-threads {
|
||||
height: calc(100vh - 230px);
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.msg-layout.mobile-chat .msg-chat {
|
||||
height: calc(100vh - 230px);
|
||||
min-height: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.msg-head {
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user