Initial React project
This commit is contained in:
Johan
1
dist/assets/index-BjZr6zWx.css
vendored
1
dist/assets/index-BjZr6zWx.css
vendored
File diff suppressed because one or more lines are too long
11
dist/assets/index-CsUgS6kN.js
vendored
11
dist/assets/index-CsUgS6kN.js
vendored
File diff suppressed because one or more lines are too long
11
dist/assets/index-DC25ZOar.js
vendored
Normal file
11
dist/assets/index-DC25ZOar.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/assets/index-HggOSgEE.css
vendored
Normal file
1
dist/assets/index-HggOSgEE.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4
dist/index.html
vendored
4
dist/index.html
vendored
@@ -7,8 +7,8 @@
|
|||||||
<title>arbejd-react</title>
|
<title>arbejd-react</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||||
<script type="module" crossorigin src="/assets/index-CsUgS6kN.js"></script>
|
<script type="module" crossorigin src="/assets/index-DC25ZOar.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-BjZr6zWx.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-HggOSgEE.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import './homepage.css';
|
|||||||
import { SiteFooter } from '../../shared/components/SiteFooter';
|
import { SiteFooter } from '../../shared/components/SiteFooter';
|
||||||
import screen1Image from '../../../assets/screen1.png';
|
import screen1Image from '../../../assets/screen1.png';
|
||||||
import screen2Image from '../../../assets/screen2.png';
|
import screen2Image from '../../../assets/screen2.png';
|
||||||
|
import appIcon from '../../../assets/appicon.png';
|
||||||
|
|
||||||
interface IconifyIconProps {
|
interface IconifyIconProps {
|
||||||
className?: string;
|
className?: string;
|
||||||
@@ -26,6 +27,43 @@ const trustedCompanyLogos = [
|
|||||||
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b302bd1bed78e2c84ebe_Midtfjord.svg',
|
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b302bd1bed78e2c84ebe_Midtfjord.svg',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const floatingPeople = Array.from({ length: 36 }, (_, index) => {
|
||||||
|
const row = Math.floor(index / 9);
|
||||||
|
const col = index % 9;
|
||||||
|
const top = Math.min(92, Math.max(6, 10 + row * 22 + ((index * 13) % 9) - 4));
|
||||||
|
const left = Math.min(96, Math.max(4, 6 + col * 11 + ((index * 17) % 7) - 3));
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: index,
|
||||||
|
src: `https://i.pravatar.cc/60?img=${(index % 70) + 1}`,
|
||||||
|
top,
|
||||||
|
left,
|
||||||
|
duration: 5 + (index % 5),
|
||||||
|
delay: -(index % 7) * 0.8,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const foundJobs = [
|
||||||
|
'Elektriker',
|
||||||
|
'Kok',
|
||||||
|
'Tjener',
|
||||||
|
'Pædagog',
|
||||||
|
'SOSU-hjælper',
|
||||||
|
'Sygeplejerske',
|
||||||
|
'Murer',
|
||||||
|
'Tømrer',
|
||||||
|
'Lagermedarbejder',
|
||||||
|
'Butiksassistent',
|
||||||
|
'Rengøringsassistent',
|
||||||
|
'Chauffør',
|
||||||
|
'Kontorassistent',
|
||||||
|
'Receptionist',
|
||||||
|
'Mekaniker',
|
||||||
|
'Maler',
|
||||||
|
'VVS-montør',
|
||||||
|
'Bager',
|
||||||
|
];
|
||||||
|
|
||||||
export function HomePage() {
|
export function HomePage() {
|
||||||
const [isNavOpen, setIsNavOpen] = useState(false);
|
const [isNavOpen, setIsNavOpen] = useState(false);
|
||||||
const [isTipsOpen, setIsTipsOpen] = useState(false);
|
const [isTipsOpen, setIsTipsOpen] = useState(false);
|
||||||
@@ -90,21 +128,14 @@ export function HomePage() {
|
|||||||
|
|
||||||
<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">
|
<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">
|
<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">
|
<img
|
||||||
<defs>
|
src={appIcon}
|
||||||
<linearGradient id="navLogoBg" x1="0%" y1="100%" x2="100%" y2="0%">
|
alt="Arbejd logo"
|
||||||
<stop offset="0%" stopColor="#1A9A75" />
|
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 object-cover"
|
||||||
<stop offset="100%" stopColor="#3167C9" />
|
/>
|
||||||
</linearGradient>
|
<span className="text-xl font-normal tracking-tight text-gray-900">
|
||||||
<linearGradient id="navLogoFg" x1="0%" y1="0%" x2="100%" y2="100%">
|
ARBEJD<span className="text-base">.com</span>
|
||||||
<stop offset="0%" stopColor="#6ACEEB" />
|
</span>
|
||||||
<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>
|
</a>
|
||||||
|
|
||||||
<div className="homepage-nav-links">
|
<div className="homepage-nav-links">
|
||||||
@@ -151,8 +182,8 @@ export function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="homepage-nav-actions">
|
<div className="homepage-nav-actions">
|
||||||
<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="https://app.arbejd.com/" 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>
|
<a href="https://app.arbejd.com/welcome" 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>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
@@ -214,8 +245,8 @@ export function HomePage() {
|
|||||||
<a href="/jobordbogen" onClick={() => setIsNavOpen(false)}>Jobordbogen</a>
|
<a href="/jobordbogen" onClick={() => setIsNavOpen(false)}>Jobordbogen</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="#" onClick={() => setIsNavOpen(false)}>Log ind</a>
|
<a href="https://app.arbejd.com/" onClick={() => setIsNavOpen(false)}>Log ind</a>
|
||||||
<a href="#" className="homepage-nav-popup-cta" onClick={() => setIsNavOpen(false)}>Opret dig</a>
|
<a href="https://app.arbejd.com/welcome" className="homepage-nav-popup-cta" onClick={() => setIsNavOpen(false)}>Opret dig</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
@@ -238,10 +269,10 @@ export function HomePage() {
|
|||||||
Opdag drømmejobbet med kraften fra AI. Vi matcher dine færdigheder med de perfekte muligheder og hjælper dig hele vejen til samtalen.
|
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>
|
</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">
|
<a href="https://app.arbejd.com" 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>
|
<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 }} />
|
<IconifyIcon icon="solar:arrow-right-linear" className="text-xl group-hover:translate-x-1 transition-transform relative z-10" style={{ strokeWidth: 1.5 }} />
|
||||||
</button>
|
</a>
|
||||||
</section>
|
</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)]">
|
<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)]">
|
||||||
@@ -266,11 +297,11 @@ export function HomePage() {
|
|||||||
<section className="py-32 px-6 lg:px-12 max-w-7xl mx-auto">
|
<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="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
<div className="relative w-full md:w-[112%] lg:w-[118%] md:-ml-[6%] lg:-ml-[9%] h-[660px] sm:h-[730px] md:h-[800px] lg:h-[860px] flex items-center justify-center overflow-visible">
|
<div className="relative w-full md:w-[112%] lg:w-[118%] md:-ml-[6%] lg:-ml-[9%] h-[660px] sm:h-[730px] md:h-[800px] lg:h-[860px] flex items-center justify-center overflow-visible">
|
||||||
<div className="absolute top-1/4 left-[10%] w-24 h-24 rounded-full bg-gradient-to-tr from-white/40 via-white/10 to-teal-50/30 backdrop-blur-xl border border-white/60 shadow-[0_8px_40px_rgba(0,0,0,0.06)] z-0 animate-float-ambient-home" />
|
<div className="absolute top-1/4 left-[10%] w-24 h-24 rounded-full bg-gradient-to-tr from-white/40 via-white/10 to-teal-50/30 backdrop-blur-xl border border-white/60 shadow-[0_8px_40px_rgba(0,0,0,0.06)] z-0 animate-float-ambient-store" />
|
||||||
<div className="absolute bottom-1/5 right-[10%] w-32 h-32 rounded-[2rem] rotate-12 bg-gradient-to-tr from-white/40 via-white/10 to-indigo-50/30 backdrop-blur-xl border border-white/60 shadow-[0_8px_40px_rgba(0,0,0,0.06)] z-0 animate-float-ambient-home [animation-delay:2s]" />
|
<div className="absolute bottom-1/5 right-[10%] w-32 h-32 rounded-[2rem] rotate-12 bg-gradient-to-tr from-white/40 via-white/10 to-indigo-50/30 backdrop-blur-xl border border-white/60 shadow-[0_8px_40px_rgba(0,0,0,0.06)] z-0 animate-float-ambient-store [animation-delay:2s]" />
|
||||||
|
|
||||||
<div className="relative flex items-center justify-center w-full max-w-5xl mx-auto transform scale-[0.55] sm:scale-75 md:scale-90 lg:scale-100 -space-x-12 sm:-space-x-16 md:-space-x-20">
|
<div className="relative flex items-center justify-center w-full max-w-5xl mx-auto transform scale-[0.55] sm:scale-75 md:scale-90 lg:scale-100 -space-x-12 sm:-space-x-16 md:-space-x-20">
|
||||||
<div className="homepage-glass-glare relative shrink-0 w-[320px] h-[680px] sm:w-[360px] sm:h-[740px] rounded-[3.5rem] p-3 bg-gradient-to-br from-white/40 to-white/10 backdrop-blur-3xl border border-white/50 shadow-[0_30px_60px_rgba(0,0,0,0.15),inset_0_0_20px_rgba(255,255,255,0.6)] animate-float-1-home z-20">
|
<div className="homepage-glass-glare relative shrink-0 w-[320px] h-[680px] sm:w-[360px] sm:h-[740px] rounded-[3.5rem] p-3 bg-gradient-to-br from-white/40 to-white/10 backdrop-blur-3xl border border-white/50 shadow-[0_30px_60px_rgba(0,0,0,0.15),inset_0_0_20px_rgba(255,255,255,0.6)] animate-float-1-store z-20">
|
||||||
<div className="absolute -left-[2px] top-28 w-1 h-8 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
|
<div className="absolute -left-[2px] top-28 w-1 h-8 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
|
||||||
<div className="absolute -left-[2px] top-40 w-1 h-14 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
|
<div className="absolute -left-[2px] top-40 w-1 h-14 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
|
||||||
<div className="absolute -left-[2px] top-56 w-1 h-14 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
|
<div className="absolute -left-[2px] top-56 w-1 h-14 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
|
||||||
@@ -391,6 +422,273 @@ export function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section className="py-20 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div className="flex flex-col justify-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-6">
|
||||||
|
Nu i App Store
|
||||||
|
<br />
|
||||||
|
og Google Play
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600 mb-10 font-normal leading-relaxed drop-shadow-sm">
|
||||||
|
Du kan nu bruge Arbejd.com direkte fra mobilen. Download appen og få adgang til jobsøgning, CV og samtaletræning, uanset hvor du er.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a
|
||||||
|
href="https://apps.apple.com/dk/app/arbejd-com/id1466763785"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center justify-center gap-3 px-6 py-3.5 bg-gray-900 text-white rounded-2xl shadow-[0_8px_25px_rgba(17,24,39,0.22)] hover:bg-gray-800 transition-all outline-none border border-gray-800"
|
||||||
|
>
|
||||||
|
<IconifyIcon icon="mdi:apple" className="text-2xl" />
|
||||||
|
<span className="text-sm font-medium tracking-wide">Download på App Store</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://play.google.com/store/apps/details?id=arbejd.com"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center justify-center gap-3 px-6 py-3.5 bg-white/70 backdrop-blur-xl text-gray-900 rounded-2xl border border-white/90 shadow-[0_8px_25px_rgba(15,23,42,0.08)] hover:bg-white transition-all outline-none"
|
||||||
|
>
|
||||||
|
<IconifyIcon icon="mdi:google-play" className="text-xl text-teal-600" />
|
||||||
|
<span className="text-sm font-medium tracking-wide">Hent i Google Play</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative w-full md:w-[112%] lg:w-[118%] md:-mr-[6%] lg:-mr-[9%] h-[660px] sm:h-[730px] md:h-[800px] lg:h-[860px] flex items-center justify-center overflow-visible">
|
||||||
|
<div className="absolute top-1/4 left-[10%] w-24 h-24 rounded-full bg-gradient-to-tr from-white/40 via-white/10 to-teal-50/30 backdrop-blur-xl border border-white/60 shadow-[0_8px_40px_rgba(0,0,0,0.06)] z-0 animate-float-ambient-home" />
|
||||||
|
<div className="absolute bottom-1/5 right-[10%] w-32 h-32 rounded-[2rem] rotate-12 bg-gradient-to-tr from-white/40 via-white/10 to-indigo-50/30 backdrop-blur-xl border border-white/60 shadow-[0_8px_40px_rgba(0,0,0,0.06)] z-0 animate-float-ambient-home [animation-delay:2s]" />
|
||||||
|
|
||||||
|
<div className="relative flex items-center justify-center w-full max-w-5xl mx-auto transform scale-[0.55] sm:scale-75 md:scale-90 lg:scale-100 -space-x-12 sm:-space-x-16 md:-space-x-20">
|
||||||
|
<div className="homepage-glass-glare relative shrink-0 w-[320px] h-[680px] sm:w-[360px] sm:h-[740px] rounded-[3.5rem] p-3 bg-gradient-to-br from-white/40 to-white/10 backdrop-blur-3xl border border-white/50 shadow-[0_30px_60px_rgba(0,0,0,0.15),inset_0_0_20px_rgba(255,255,255,0.6)] animate-float-1-home z-20">
|
||||||
|
<div className="absolute -left-[2px] top-28 w-1 h-8 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
|
||||||
|
<div className="absolute -left-[2px] top-40 w-1 h-14 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
|
||||||
|
<div className="absolute -left-[2px] top-56 w-1 h-14 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
|
||||||
|
<div className="absolute -right-[2px] top-44 w-1 h-20 bg-white/40 border border-white/50 rounded-r-md shadow-sm" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full rounded-[2.8rem] bg-black overflow-hidden shadow-[inset_0_0_10px_rgba(0,0,0,0.1)] border border-gray-800/50 isolate"
|
||||||
|
style={{ WebkitMaskImage: '-webkit-radial-gradient(white, black)' }}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-black overflow-y-auto homepage-no-scrollbar pb-16">
|
||||||
|
<div className="h-16 w-full" />
|
||||||
|
|
||||||
|
<div className="flex gap-4 px-5 pb-4">
|
||||||
|
<div className="w-24 h-24 rounded-[1.4rem] bg-gradient-to-br from-indigo-500 to-teal-400 p-[1px] shrink-0 shadow-lg">
|
||||||
|
<div className="w-full h-full bg-gray-900/20 backdrop-blur-sm rounded-[1.3rem] flex items-center justify-center">
|
||||||
|
<IconifyIcon icon="solar:case-minimalistic-linear" className="text-4xl text-white drop-shadow-md" style={{ strokeWidth: 1.5 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col pt-1 w-full">
|
||||||
|
<h1 className="text-white text-xl tracking-tight font-medium leading-tight">Arbejd.com</h1>
|
||||||
|
<p className="text-gray-400 text-xs mt-0.5">Ansæt & find jobs</p>
|
||||||
|
<div className="mt-auto flex items-center justify-between">
|
||||||
|
<button type="button" className="bg-blue-600 text-white text-sm font-medium rounded-full px-5 py-1.5">HENT</button>
|
||||||
|
<IconifyIcon icon="solar:export-linear" className="text-blue-500 text-xl" style={{ strokeWidth: 1.5 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between px-5 py-3 border-y border-gray-800/60 mt-2">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<span className="text-gray-500 text-xs font-medium tracking-wide uppercase">1.2K anmeld.</span>
|
||||||
|
<span className="text-gray-300 text-lg font-medium">4.8</span>
|
||||||
|
<div className="flex text-gray-500 text-xs gap-0.5 mt-0.5">
|
||||||
|
<IconifyIcon icon="solar:star-linear" className="text-white" style={{ strokeWidth: 1.5 }} />
|
||||||
|
<IconifyIcon icon="solar:star-linear" className="text-white" style={{ strokeWidth: 1.5 }} />
|
||||||
|
<IconifyIcon icon="solar:star-linear" className="text-white" style={{ strokeWidth: 1.5 }} />
|
||||||
|
<IconifyIcon icon="solar:star-linear" className="text-white" style={{ strokeWidth: 1.5 }} />
|
||||||
|
<IconifyIcon icon="solar:star-linear" className="text-white" style={{ strokeWidth: 1.5 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-px h-8 bg-gray-800/60" />
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<span className="text-gray-500 text-xs font-medium tracking-wide uppercase">Alder</span>
|
||||||
|
<span className="text-gray-300 text-lg font-medium">4+</span>
|
||||||
|
<span className="text-gray-500 text-xs mt-1">År</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-px h-8 bg-gray-800/60" />
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<span className="text-gray-500 text-xs font-medium tracking-wide uppercase">Hitliste</span>
|
||||||
|
<span className="text-gray-300 text-lg font-medium">#1</span>
|
||||||
|
<span className="text-gray-500 text-xs mt-1">Erhverv</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-5">
|
||||||
|
<div className="flex gap-3 overflow-x-auto px-5 pb-4 snap-x snap-mandatory homepage-no-scrollbar">
|
||||||
|
<div className="w-48 h-[22rem] rounded-[1.5rem] bg-[#0a0a0a] border border-gray-800 shrink-0 snap-center relative overflow-hidden flex flex-col items-center pt-6 px-4">
|
||||||
|
<div className="w-full text-left text-white/90 text-sm font-medium mb-4">Find jobs</div>
|
||||||
|
<div className="w-full h-24 rounded-xl bg-gray-900 border border-gray-800 mb-3 relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-teal-500/10" />
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-12 rounded-lg bg-gray-900 border border-gray-800 mb-2" />
|
||||||
|
<div className="w-full h-12 rounded-lg bg-gray-900 border border-gray-800" />
|
||||||
|
</div>
|
||||||
|
<div className="w-48 h-[22rem] rounded-[1.5rem] bg-[#0a0a0a] border border-gray-800 shrink-0 snap-center relative overflow-hidden flex flex-col items-center pt-6 px-4">
|
||||||
|
<div className="w-full text-left text-white/90 text-sm font-medium mb-4">Håndter talent</div>
|
||||||
|
<div className="w-full h-16 rounded-xl bg-gray-900 border border-gray-800 mb-2 flex items-center px-3 gap-3">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-gray-800" />
|
||||||
|
<div className="flex-1 h-2 rounded bg-gray-800" />
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-16 rounded-xl bg-gray-900 border border-gray-800 mb-2 flex items-center px-3 gap-3">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-gray-800" />
|
||||||
|
<div className="flex-1 h-2 rounded bg-gray-800" />
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-16 rounded-xl bg-gray-900 border border-gray-800 mb-2 flex items-center px-3 gap-3">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-gray-800" />
|
||||||
|
<div className="flex-1 h-2 rounded bg-gray-800" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="px-5 mt-2 pb-8">
|
||||||
|
<h2 className="text-white text-sm font-medium mb-2">Beskrivelse</h2>
|
||||||
|
<p className="text-gray-400 text-xs leading-relaxed font-normal">
|
||||||
|
Arbejd.com er den ultimative platform til at finde jobs og ansætte de bedste freelancere. Uanset om du vil fremme din karriere eller opbygge dit drømmehold, forbinder vi dig med de rigtige muligheder globalt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-0 inset-x-0 h-24 bg-gradient-to-b from-black/80 via-black/40 to-transparent z-10 pointer-events-none" />
|
||||||
|
<div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-[100px] h-[30px] bg-black rounded-full z-50 shadow-[0_4px_10px_rgba(0,0,0,0.3)] flex items-center justify-between px-3">
|
||||||
|
<div className="w-2.5 h-2.5 rounded-full bg-gray-800 flex items-center justify-center">
|
||||||
|
<div className="w-1 h-1 rounded-full bg-indigo-500 blur-[1px]" />
|
||||||
|
</div>
|
||||||
|
<div className="w-2.5 h-2.5 rounded-full bg-gray-800" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-0 inset-x-0 h-12 flex items-center justify-between px-6 pt-1 z-40 text-xs font-medium text-white/95">
|
||||||
|
<span>9:41</span>
|
||||||
|
<div className="flex items-center gap-1.5 drop-shadow-md">
|
||||||
|
<IconifyIcon icon="solar:cellular-network-linear" className="text-xs" style={{ strokeWidth: 1.5 }} />
|
||||||
|
<IconifyIcon icon="solar:wi-fi-linear" className="text-xs" style={{ strokeWidth: 1.5 }} />
|
||||||
|
<IconifyIcon icon="solar:battery-charge-linear" className="text-sm" style={{ strokeWidth: 1.5 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-0 inset-x-0 h-16 bg-gradient-to-t from-black/80 to-transparent z-10 pointer-events-none" />
|
||||||
|
<div className="absolute bottom-1.5 left-1/2 -translate-x-1/2 w-1/3 h-[4px] bg-white/90 rounded-full z-50 shadow-sm" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="homepage-glass-glare relative shrink-0 w-[320px] h-[680px] sm:w-[360px] sm:h-[740px] rounded-[3.5rem] p-3 bg-gradient-to-br from-white/30 to-white/5 backdrop-blur-2xl border border-white/40 shadow-[0_20px_50px_rgba(0,0,0,0.1),inset_0_0_20px_rgba(255,255,255,0.4)] animate-float-2-store z-10">
|
||||||
|
<div className="absolute -right-[2px] top-32 w-1 h-24 bg-white/30 border border-white/40 rounded-r-md shadow-sm" />
|
||||||
|
<div className="absolute -right-[2px] top-64 w-1 h-12 bg-white/30 border border-white/40 rounded-r-md shadow-sm" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full rounded-[2.8rem] bg-[#121212] overflow-hidden shadow-[inset_0_0_10px_rgba(0,0,0,0.1)] border border-gray-800/50 isolate"
|
||||||
|
style={{ WebkitMaskImage: '-webkit-radial-gradient(white, black)' }}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-[#121212] overflow-y-auto homepage-no-scrollbar pb-16">
|
||||||
|
<div className="flex items-center justify-between px-4 pt-14 pb-3 text-white/90">
|
||||||
|
<IconifyIcon icon="solar:arrow-left-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<IconifyIcon icon="solar:magnifer-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
|
||||||
|
<IconifyIcon icon="solar:menu-dots-vertical-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-5 px-5 pt-1 pb-5">
|
||||||
|
<div className="w-20 h-20 rounded-[1.2rem] bg-gradient-to-br from-indigo-500 to-teal-400 p-[1px] shrink-0 shadow-md">
|
||||||
|
<div className="w-full h-full bg-gray-900/20 backdrop-blur-sm rounded-[1.1rem] flex items-center justify-center">
|
||||||
|
<IconifyIcon icon="solar:case-minimalistic-linear" className="text-3xl text-white drop-shadow-md" style={{ strokeWidth: 1.5 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col justify-center">
|
||||||
|
<h1 className="text-white text-xl tracking-tight font-medium leading-tight">Arbejd.com - Jobs</h1>
|
||||||
|
<span className="text-teal-400 text-sm font-normal mt-0.5">Arbejd Inc.</span>
|
||||||
|
<span className="text-gray-400 text-xs mt-1">Indeholder annoncer · Køb i appen</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-center gap-6 px-5 py-2">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className="flex items-center gap-1 text-white text-sm font-medium">4.8 <IconifyIcon icon="solar:star-linear" className="text-xs" style={{ strokeWidth: 1.5 }} /></div>
|
||||||
|
<span className="text-gray-400 text-xs mt-0.5">1M anmeldelser</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-px h-6 bg-gray-700/60" />
|
||||||
|
<div className="flex flex-col items-center text-white text-sm font-medium">
|
||||||
|
10M+
|
||||||
|
<span className="text-gray-400 text-xs font-normal mt-0.5">Downloads</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-px h-6 bg-gray-700/60" />
|
||||||
|
<div className="flex flex-col items-center text-white text-sm font-medium">
|
||||||
|
<div className="border border-white/60 rounded-[3px] px-1 text-xs leading-tight mt-0.5">E</div>
|
||||||
|
<span className="text-gray-400 text-xs font-normal mt-0.5">Alle</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="px-5 py-5">
|
||||||
|
<button type="button" className="w-full bg-[#01875F] text-white text-sm font-medium py-2.5 rounded-full transition-colors">Installer</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-1">
|
||||||
|
<div className="flex gap-3 overflow-x-auto px-5 pb-4 snap-x snap-mandatory homepage-no-scrollbar">
|
||||||
|
<div className="w-[140px] h-[260px] rounded-xl bg-[#1c1c1c] border border-white/5 shrink-0 snap-center relative overflow-hidden flex flex-col pt-5 px-3">
|
||||||
|
<div className="w-full text-left text-white/90 text-sm font-medium mb-4">Udforsk</div>
|
||||||
|
<div className="flex gap-2 mb-3">
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-[#2a2a2a]" />
|
||||||
|
<div className="flex-1 h-10 rounded-lg bg-[#2a2a2a]" />
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-16 rounded-lg bg-[#2a2a2a] mb-2" />
|
||||||
|
<div className="w-full h-16 rounded-lg bg-[#2a2a2a]" />
|
||||||
|
</div>
|
||||||
|
<div className="w-[140px] h-[260px] rounded-xl bg-[#1c1c1c] border border-white/5 shrink-0 snap-center relative overflow-hidden flex flex-col pt-5 px-3">
|
||||||
|
<div className="w-full text-left text-white/90 text-sm font-medium mb-4">Beskeder</div>
|
||||||
|
<div className="w-full h-12 rounded-lg bg-[#2a2a2a] mb-2 flex items-center px-2 gap-2">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-[#3a3a3a]" />
|
||||||
|
<div className="flex-1 h-2 rounded bg-[#3a3a3a]" />
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-12 rounded-lg bg-[#2a2a2a] mb-2 flex items-center px-2 gap-2">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-[#3a3a3a]" />
|
||||||
|
<div className="flex-1 h-2 rounded bg-[#3a3a3a]" />
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-12 rounded-lg bg-[#2a2a2a] mb-2 flex items-center px-2 gap-2">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-[#3a3a3a]" />
|
||||||
|
<div className="flex-1 h-2 rounded bg-[#3a3a3a]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="px-5 mt-2 pb-8">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<h2 className="text-white text-sm font-medium">Om denne app</h2>
|
||||||
|
<IconifyIcon icon="solar:arrow-right-linear" className="text-white text-lg" style={{ strokeWidth: 1.5 }} />
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400 text-xs leading-relaxed font-normal">
|
||||||
|
Kom i kontakt med tusindvis af fagfolk. Find fjernarbejde, freelanceopgaver og kontraktarbejde globalt på Arbejd.com.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-0 inset-x-0 h-20 bg-gradient-to-b from-[#121212]/90 via-[#121212]/50 to-transparent z-10 pointer-events-none" />
|
||||||
|
|
||||||
|
<div className="absolute top-3.5 left-1/2 -translate-x-1/2 w-5 h-5 bg-[#0a0a0a] border border-black/80 rounded-full z-50 shadow-[inset_0_0_4px_rgba(0,0,0,0.8)] flex items-center justify-center">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-gray-900 shadow-[inset_0_0_2px_rgba(255,255,255,0.1)] flex items-center justify-center">
|
||||||
|
<div className="w-1 h-1 rounded-full bg-teal-500/30 blur-[0.5px]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-0 inset-x-0 h-12 flex items-center justify-between px-6 pt-1 z-40 text-xs font-medium text-white/95">
|
||||||
|
<span>10:00</span>
|
||||||
|
<div className="flex items-center gap-1.5 drop-shadow-md">
|
||||||
|
<IconifyIcon icon="solar:wi-fi-linear" className="text-xs" style={{ strokeWidth: 1.5 }} />
|
||||||
|
<IconifyIcon icon="solar:cellular-network-linear" className="text-xs" style={{ strokeWidth: 1.5 }} />
|
||||||
|
<IconifyIcon icon="solar:battery-charge-linear" className="text-sm" style={{ strokeWidth: 1.5 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 inset-x-0 h-16 bg-gradient-to-t from-[#121212]/90 to-transparent z-10 pointer-events-none" />
|
||||||
|
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-1/4 h-[3px] bg-white/90 rounded-full z-50 shadow-sm" />
|
||||||
|
</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">
|
<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">
|
<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>
|
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Succeshistorier</h2>
|
||||||
@@ -463,7 +761,8 @@ export function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
|
{false ? (
|
||||||
|
<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">
|
<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>
|
<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>
|
<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>
|
||||||
@@ -527,7 +826,8 @@ export function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
) : null}
|
||||||
|
|
||||||
<section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
|
<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">
|
<div className="text-center mb-16 relative z-10">
|
||||||
@@ -535,6 +835,15 @@ export function HomePage() {
|
|||||||
<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>
|
<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>
|
||||||
|
|
||||||
|
<div className="w-full max-w-2xl mx-auto flex items-center justify-center gap-4 p-4 rounded-2xl bg-gradient-to-r from-teal-50/80 to-indigo-50/80 border border-white shadow-sm backdrop-blur-md mb-10 relative z-10">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center flex-shrink-0 border border-teal-100">
|
||||||
|
<IconifyIcon icon="solar:star-fall-minimalistic-linear" className="text-xl text-teal-600" style={{ strokeWidth: 1.5 }} />
|
||||||
|
</div>
|
||||||
|
<p className="text-base text-gray-700 text-left leading-snug">
|
||||||
|
<span className="font-medium text-gray-900">Kom i gang koster ikke noget.</span> Prøv appen gratis, og opgrader når du er klar til at udnytte vores premium funktioner.
|
||||||
|
</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="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">
|
<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>
|
<h3 className="text-2xl font-medium text-gray-900 tracking-tight mb-2">30 dage</h3>
|
||||||
@@ -610,6 +919,49 @@ export function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
|
||||||
|
<div className="max-w-5xl mx-auto text-center relative z-10 mb-10">
|
||||||
|
<h2 className="text-2xl md:text-4xl font-medium tracking-tight text-gradient-subtle leading-tight">
|
||||||
|
48.000 har allerede fundet deres job gennem Arbejd.com – så hvorfor ikke lade jobbet finde dig? ✨
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-5xl mx-auto relative">
|
||||||
|
<div className="relative h-[360px] sm:h-[420px] rounded-[2.5rem] bg-gradient-to-br from-white/65 to-white/20 border border-white/70 backdrop-blur-2xl shadow-[0_12px_40px_rgba(0,0,0,0.05)] overflow-visible">
|
||||||
|
<div className="absolute -top-20 -left-16 w-56 h-56 rounded-full bg-teal-300/25 blur-[70px] pointer-events-none" />
|
||||||
|
<div className="absolute -bottom-20 -right-16 w-64 h-64 rounded-full bg-indigo-300/20 blur-[80px] pointer-events-none" />
|
||||||
|
{floatingPeople.map((person) => (
|
||||||
|
<div
|
||||||
|
key={person.id}
|
||||||
|
className="homepage-avatar-float group absolute w-[30px] h-[30px]"
|
||||||
|
style={{
|
||||||
|
top: `${person.top}%`,
|
||||||
|
left: `${person.left}%`,
|
||||||
|
animationDuration: `${person.duration}s`,
|
||||||
|
animationDelay: `${person.delay}s`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="relative -translate-x-1/2 -translate-y-1/2">
|
||||||
|
<div className="w-[30px] h-[30px] rounded-full bg-white/45 backdrop-blur-xl border border-white/80 shadow-[0_8px_18px_rgba(15,23,42,0.12)] overflow-hidden transition-transform duration-300 group-hover:scale-[1.35] group-hover:z-30">
|
||||||
|
<img
|
||||||
|
src={person.src}
|
||||||
|
alt={`Profil ${person.id + 1}`}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
referrerPolicy="no-referrer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={`pointer-events-none absolute top-full mt-2 whitespace-nowrap rounded-xl border border-white/80 bg-white/75 backdrop-blur-xl px-3 py-1.5 text-[11px] font-medium text-gray-700 shadow-[0_10px_25px_rgba(15,23,42,0.12)] opacity-0 translate-y-1 transition-all duration-200 group-hover:opacity-100 group-hover:translate-y-0 ${person.left < 18 ? 'left-0' : person.left > 82 ? 'right-0' : 'left-1/2 -translate-x-1/2'}`}>
|
||||||
|
Fandt job: {foundJobs[person.id % foundJobs.length]}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto relative z-10">
|
<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="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 inset-0 bg-gradient-to-t from-white/60 to-white/20 z-0" />
|
||||||
@@ -632,6 +984,39 @@ export function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section className="pb-24 px-6 lg:px-12 max-w-7xl mx-auto relative z-10">
|
||||||
|
<div className="max-w-3xl mx-auto bg-gradient-to-br from-white/70 to-white/30 backdrop-blur-2xl border border-white/70 rounded-[2.25rem] p-8 md:p-10 shadow-[0_12px_40px_rgba(0,0,0,0.05)]">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h2 className="text-2xl md:text-3xl font-medium tracking-tight text-gradient-subtle mb-3">Få nyt fra Arbejd.com</h2>
|
||||||
|
<p className="text-base md:text-lg text-gray-600 font-normal">
|
||||||
|
Tilmeld dig nyhedsbrevet og få tips, produktnyheder og nye jobmuligheder direkte i din indbakke.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form className="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
||||||
|
<label htmlFor="newsletter-email" className="sr-only">E-mail</label>
|
||||||
|
<input
|
||||||
|
id="newsletter-email"
|
||||||
|
type="email"
|
||||||
|
required
|
||||||
|
placeholder="Din e-mail"
|
||||||
|
className="w-full px-5 py-3.5 rounded-2xl bg-white/70 border border-white/80 text-gray-900 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-300 focus:border-teal-200 shadow-sm"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-2xl bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white font-medium border border-gray-700 hover:from-gray-800 hover:to-gray-700 transition-all shadow-[0_8px_20px_rgba(17,24,39,0.2)]"
|
||||||
|
>
|
||||||
|
Tilmeld
|
||||||
|
<IconifyIcon icon="solar:arrow-right-linear" className="text-lg" style={{ strokeWidth: 1.5 }} />
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p className="text-xs text-gray-500 mt-4 text-center">
|
||||||
|
Du kan altid afmelde dig igen med ét klik.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<SiteFooter />
|
<SiteFooter />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,6 +7,15 @@
|
|||||||
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(20, 184, 166, 0.2); border-radius: 20px; }
|
.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); }
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 184, 166, 0.4); }
|
||||||
|
|
||||||
|
.homepage-no-scrollbar {
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homepage-no-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes float-slow {
|
@keyframes float-slow {
|
||||||
0%, 100% { transform: translateY(0) scale(1); }
|
0%, 100% { transform: translateY(0) scale(1); }
|
||||||
50% { transform: translateY(-15px) scale(1.02); }
|
50% { transform: translateY(-15px) scale(1.02); }
|
||||||
@@ -37,17 +46,49 @@
|
|||||||
50% { transform: translateY(-15px) rotate(5deg); }
|
50% { transform: translateY(-15px) rotate(5deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes float-1-store {
|
||||||
|
0%, 100% { transform: translateY(0) rotate(-4deg); }
|
||||||
|
50% { transform: translateY(-3.5%) rotate(-2deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-2-store {
|
||||||
|
0%, 100% { transform: translateY(3%) rotate(4deg) scale(0.95); }
|
||||||
|
50% { transform: translateY(-0.5%) rotate(2deg) scale(0.95); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-ambient-store {
|
||||||
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||||
|
50% { transform: translateY(-15%) rotate(5deg); }
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes glare-home {
|
@keyframes glare-home {
|
||||||
0% { left: -50%; }
|
0% { left: -50%; }
|
||||||
20%, 100% { left: 150%; }
|
20%, 100% { left: 150%; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes avatar-cloud-float {
|
||||||
|
0%, 100% { transform: translate3d(0, 0, 0); }
|
||||||
|
25% { transform: translate3d(5px, -7px, 0); }
|
||||||
|
50% { transform: translate3d(-3px, -11px, 0); }
|
||||||
|
75% { transform: translate3d(4px, -4px, 0); }
|
||||||
|
}
|
||||||
|
|
||||||
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
|
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
|
||||||
.animate-float-medium { animation: float-medium 6s 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; }
|
.animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
|
||||||
.animate-float-1-home { animation: float-1-home 8s ease-in-out infinite; }
|
.animate-float-1-home { animation: float-1-home 8s ease-in-out infinite; }
|
||||||
.animate-float-2-home { animation: float-2-home 10s ease-in-out infinite; animation-delay: 1s; }
|
.animate-float-2-home { animation: float-2-home 10s ease-in-out infinite; animation-delay: 1s; }
|
||||||
.animate-float-ambient-home { animation: float-ambient-home 12s ease-in-out infinite; }
|
.animate-float-ambient-home { animation: float-ambient-home 12s ease-in-out infinite; }
|
||||||
|
.animate-float-1-store { animation: float-1-store 8s ease-in-out infinite; }
|
||||||
|
.animate-float-2-store { animation: float-2-store 10s ease-in-out infinite; animation-delay: 1s; }
|
||||||
|
.animate-float-ambient-store { animation: float-ambient-store 12s ease-in-out infinite; }
|
||||||
|
|
||||||
|
.homepage-avatar-float {
|
||||||
|
animation-name: avatar-cloud-float;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
.homepage-glass-glare::before {
|
.homepage-glass-glare::before {
|
||||||
content: '';
|
content: '';
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
|
import { Facebook, Instagram, Linkedin } from 'lucide-react';
|
||||||
|
|
||||||
export function SiteFooter() {
|
export function SiteFooter() {
|
||||||
return (
|
return (
|
||||||
<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)]">
|
<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="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="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-10 mb-16">
|
||||||
<div className="col-span-2 lg:col-span-2">
|
<div className="col-span-2 lg:col-span-2">
|
||||||
<a href="/home" className="flex items-center gap-2 mb-6 group outline-none inline-flex">
|
<a href="/home" 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">
|
<svg viewBox="0 0 100 100" className="w-8 h-8 rounded-lg shadow-sm transition-transform group-hover:scale-105">
|
||||||
@@ -24,6 +26,29 @@ export function SiteFooter() {
|
|||||||
<p className="text-base text-gray-600 font-normal leading-relaxed max-w-xs mb-6 drop-shadow-sm">
|
<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.
|
Danmarks nye, intelligente jobportal, der bringer virksomheder og talent sammen gennem avanceret AI-teknologi.
|
||||||
</p>
|
</p>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
aria-label="Facebook"
|
||||||
|
className="w-10 h-10 rounded-xl bg-white/70 border border-white/90 text-gray-500 hover:text-gray-900 hover:bg-white transition-colors inline-flex items-center justify-center shadow-sm"
|
||||||
|
>
|
||||||
|
<Facebook size={18} strokeWidth={1.8} />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
aria-label="Instagram"
|
||||||
|
className="w-10 h-10 rounded-xl bg-white/70 border border-white/90 text-gray-500 hover:text-gray-900 hover:bg-white transition-colors inline-flex items-center justify-center shadow-sm"
|
||||||
|
>
|
||||||
|
<Instagram size={18} strokeWidth={1.8} />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
aria-label="LinkedIn"
|
||||||
|
className="w-10 h-10 rounded-xl bg-white/70 border border-white/90 text-gray-500 hover:text-gray-900 hover:bg-white transition-colors inline-flex items-center justify-center shadow-sm"
|
||||||
|
>
|
||||||
|
<Linkedin size={18} strokeWidth={1.8} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@@ -46,17 +71,6 @@ export function SiteFooter() {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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="/stories" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Stories</a></li>
|
|
||||||
<li><a href="/jobordbogen" className="text-base text-gray-500 hover:text-gray-900 transition-colors font-normal">Jobordbogen</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pt-8 border-t border-gray-200/60 flex flex-col md:flex-row justify-between items-center gap-4">
|
<div className="pt-8 border-t border-gray-200/60 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user