@@ -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 & amp ; 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 >
) ;
}
Johan