Initial React project
This commit is contained in:
Johan
30
src/App.tsx
30
src/App.tsx
@@ -10,6 +10,11 @@ import { HomePage } from './presentation/home/pages/HomePage';
|
||||
import { JobDetailPage } from './presentation/jobs/pages/JobDetailPage';
|
||||
import { JobsPage } from './presentation/jobs/pages/JobsPage';
|
||||
import { MessagesPage } from './presentation/messages/pages/MessagesPage';
|
||||
import { PricingPage } from './presentation/pricing/pages/PricingPage';
|
||||
import { JobordbogenPage } from './presentation/jobordbogen/pages/JobordbogenPage';
|
||||
import { JobordbogenEntryPage } from './presentation/jobordbogen/pages/JobordbogenEntryPage';
|
||||
import { StoriesPage } from './presentation/stories/pages/StoriesPage';
|
||||
import { NewsletterPage } from './presentation/newsletter/pages/NewsletterPage';
|
||||
import {
|
||||
SimulatorPage,
|
||||
type SimulatorEvaluationSelection,
|
||||
@@ -27,6 +32,11 @@ interface JobDetailSelection {
|
||||
|
||||
function App() {
|
||||
const isHomeRoute = useMemo(() => window.location.pathname === '/home', []);
|
||||
const isPricingRoute = useMemo(() => window.location.pathname === '/pricing' || window.location.pathname === '/priser', []);
|
||||
const isStoriesRoute = useMemo(() => window.location.pathname === '/stories', []);
|
||||
const isNewsletterRoute = useMemo(() => window.location.pathname === '/newsletter', []);
|
||||
const isJobordbogenEntryRoute = useMemo(() => window.location.pathname.startsWith('/jobordbogen/') && window.location.pathname !== '/jobordbogen/', []);
|
||||
const isJobordbogenRoute = useMemo(() => window.location.pathname === '/jobordbogen' || window.location.pathname === '/academy', []);
|
||||
const initialAuthenticated = useMemo(() => Boolean(window.localStorage.getItem('token')), []);
|
||||
const initialTheme = useMemo<'light' | 'dark'>(() => {
|
||||
const stored = window.localStorage.getItem('theme');
|
||||
@@ -91,6 +101,26 @@ function App() {
|
||||
return <HomePage />;
|
||||
}
|
||||
|
||||
if (isPricingRoute) {
|
||||
return <PricingPage />;
|
||||
}
|
||||
|
||||
if (isStoriesRoute) {
|
||||
return <StoriesPage />;
|
||||
}
|
||||
|
||||
if (isNewsletterRoute) {
|
||||
return <NewsletterPage />;
|
||||
}
|
||||
|
||||
if (isJobordbogenEntryRoute) {
|
||||
return <JobordbogenEntryPage />;
|
||||
}
|
||||
|
||||
if (isJobordbogenRoute) {
|
||||
return <JobordbogenPage />;
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <AuthPage onAuthenticated={() => setIsAuthenticated(true)} />;
|
||||
}
|
||||
|
||||
BIN
src/assets/screen1.png
Normal file
BIN
src/assets/screen1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 534 KiB |
BIN
src/assets/screen2.png
Normal file
BIN
src/assets/screen2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 831 KiB |
BIN
src/assets/screen3.png
Normal file
BIN
src/assets/screen3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
@@ -1,5 +1,8 @@
|
||||
import { useEffect, useState, type CSSProperties } from 'react';
|
||||
import './homepage.css';
|
||||
import { SiteFooter } from '../../shared/components/SiteFooter';
|
||||
import screen1Image from '../../../assets/screen1.png';
|
||||
import screen2Image from '../../../assets/screen2.png';
|
||||
|
||||
interface IconifyIconProps {
|
||||
className?: string;
|
||||
@@ -11,8 +14,22 @@ function IconifyIcon({ className, icon, style }: IconifyIconProps) {
|
||||
return <iconify-icon className={className} icon={icon} style={style} />;
|
||||
}
|
||||
|
||||
const trustedCompanyLogos = [
|
||||
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/60939fdba79df07cd812c88d_gws-logo-300x137.png',
|
||||
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b30145fcb24b0fbeed48_horse.svg',
|
||||
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b30482be352ae620de93_St%C3%A6rmose.svg',
|
||||
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b303b480060b735069de_plast-line.svg',
|
||||
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b30019b62383f496b96e_DKM.svg',
|
||||
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/608fa2bec9c901a64c864a6e_29a1c682_logo.jpeg',
|
||||
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b302fde5303d3b057be1_JPD.svg',
|
||||
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b300089747750fea09bd_find%20job%20abroad.svg',
|
||||
'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b302bd1bed78e2c84ebe_Midtfjord.svg',
|
||||
];
|
||||
|
||||
export function HomePage() {
|
||||
const [isNavOpen, setIsNavOpen] = useState(false);
|
||||
const [isTipsOpen, setIsTipsOpen] = useState(false);
|
||||
const [isHowOpen, setIsHowOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNavOpen) {
|
||||
@@ -46,6 +63,21 @@ export function HomePage() {
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement | null;
|
||||
if (!target?.closest('.homepage-how-dropdown')) {
|
||||
setIsHowOpen(false);
|
||||
}
|
||||
if (!target?.closest('.homepage-tips-dropdown')) {
|
||||
setIsTipsOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
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" />
|
||||
@@ -71,13 +103,50 @@ export function HomePage() {
|
||||
<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 className="homepage-nav-links">
|
||||
<a href="/pricing" className="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Priser</a>
|
||||
<div className="homepage-how-dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="homepage-how-trigger text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm"
|
||||
onClick={() => {
|
||||
setIsHowOpen((current) => !current);
|
||||
setIsTipsOpen(false);
|
||||
}}
|
||||
aria-expanded={isHowOpen}
|
||||
>
|
||||
Sådan virker det
|
||||
<IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isHowOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
<div className={isHowOpen ? 'homepage-how-menu open' : 'homepage-how-menu'}>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>For virksomheder</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>For jobsøgere</a>
|
||||
<a href="/pricing" onClick={() => setIsHowOpen(false)}>Priser</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>FAQ</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>Nyhedsbrev</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="homepage-tips-dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="homepage-tips-trigger text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm"
|
||||
onClick={() => {
|
||||
setIsTipsOpen((current) => !current);
|
||||
setIsHowOpen(false);
|
||||
}}
|
||||
aria-expanded={isTipsOpen}
|
||||
>
|
||||
Tips og tricks
|
||||
<IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isTipsOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
<div className={isTipsOpen ? 'homepage-tips-menu open' : 'homepage-tips-menu'}>
|
||||
<a href="/stories" onClick={() => setIsTipsOpen(false)}>Stories</a>
|
||||
<a href="/jobordbogen" onClick={() => setIsTipsOpen(false)}>Jobordbogen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="homepage-nav-actions flex items-center gap-4">
|
||||
<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="#" 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>
|
||||
@@ -93,9 +162,13 @@ export function HomePage() {
|
||||
</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="/pricing" onClick={() => setIsNavOpen(false)}>Priser</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: For virksomheder</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: For jobsøgere</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: FAQ</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: Nyhedsbrev</a>
|
||||
<a href="/stories" onClick={() => setIsNavOpen(false)}>Tips og tricks: Stories</a>
|
||||
<a href="/jobordbogen" onClick={() => setIsNavOpen(false)}>Tips og tricks: Jobordbogen</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Log ind</a>
|
||||
<a href="#" className="homepage-nav-popup-cta" onClick={() => setIsNavOpen(false)}>Opret dig</a>
|
||||
</div>
|
||||
@@ -130,99 +203,85 @@ export function HomePage() {
|
||||
<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 }} />
|
||||
{trustedCompanyLogos.map((logo, index) => (
|
||||
<img
|
||||
key={`${logo}-${index}`}
|
||||
src={logo}
|
||||
alt={`Virksomhedslogo ${index + 1}`}
|
||||
className="h-8 md:h-10 w-auto object-contain transition-transform duration-300 hover:scale-105"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
))}
|
||||
</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 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 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.65] 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 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-white overflow-hidden shadow-[inset_0_0_10px_rgba(255,255,255,0.1)] border border-white/60 isolate">
|
||||
<img src={screen1Image} alt="App UI Design 1" className="absolute inset-0 w-full h-full object-cover z-0" />
|
||||
|
||||
<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="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 className="absolute top-0 inset-x-0 h-12 flex items-center justify-between px-6 pt-1 z-40 text-[0.65rem] 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>
|
||||
</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 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="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="homepage-glass-glare relative 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-home z-10">
|
||||
<div className="absolute -left-[2px] top-28 w-1 h-8 bg-white/30 border border-white/40 rounded-l-md shadow-sm" />
|
||||
<div className="absolute -left-[2px] top-40 w-1 h-14 bg-white/30 border border-white/40 rounded-l-md shadow-sm" />
|
||||
<div className="absolute -left-[2px] top-56 w-1 h-14 bg-white/30 border border-white/40 rounded-l-md shadow-sm" />
|
||||
<div className="absolute -right-[2px] top-44 w-1 h-20 bg-white/30 border border-white/40 rounded-r-md shadow-sm" />
|
||||
|
||||
<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 className="relative w-full h-full rounded-[2.8rem] bg-white overflow-hidden shadow-[inset_0_0_10px_rgba(255,255,255,0.1)] border border-white/60 isolate">
|
||||
<img src={screen2Image} alt="App UI Design 2" className="absolute inset-0 w-full h-full object-cover z-0" />
|
||||
|
||||
<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-teal-400 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-[0.65rem] 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-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="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>
|
||||
|
||||
@@ -523,76 +582,7 @@ export function HomePage() {
|
||||
</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>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -22,17 +22,60 @@
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
@keyframes float-1-home {
|
||||
0%, 100% { transform: translateY(0) rotate(-4deg); }
|
||||
50% { transform: translateY(-24px) rotate(-2deg); }
|
||||
}
|
||||
|
||||
@keyframes float-2-home {
|
||||
0%, 100% { transform: translateY(20px) rotate(4deg) scale(0.95); }
|
||||
50% { transform: translateY(-4px) rotate(2deg) scale(0.95); }
|
||||
}
|
||||
|
||||
@keyframes float-ambient-home {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-15px) rotate(5deg); }
|
||||
}
|
||||
|
||||
@keyframes glare-home {
|
||||
0% { left: -50%; }
|
||||
20%, 100% { left: 150%; }
|
||||
}
|
||||
|
||||
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
|
||||
.animate-float-medium { animation: float-medium 6s ease-in-out infinite; }
|
||||
.animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
|
||||
.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-ambient-home { animation: float-ambient-home 12s ease-in-out infinite; }
|
||||
|
||||
.homepage-glass-glare::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
|
||||
transform: skewX(-25deg);
|
||||
animation: glare-home 6s infinite;
|
||||
pointer-events: none;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.08em;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #0d9488 50%, #4338ca 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.text-gradient-subtle {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.08em;
|
||||
background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@@ -42,6 +85,108 @@
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.homepage-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.homepage-nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.homepage-tips-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.homepage-how-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.homepage-tips-trigger {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.homepage-how-trigger {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.homepage-tips-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.65rem);
|
||||
left: 0;
|
||||
min-width: 190px;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homepage-how-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.65rem);
|
||||
left: 0;
|
||||
min-width: 220px;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homepage-tips-menu.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.homepage-how-menu.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.homepage-tips-menu a {
|
||||
display: block;
|
||||
border-radius: 0.7rem;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.homepage-how-menu a {
|
||||
display: block;
|
||||
border-radius: 0.7rem;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.homepage-tips-menu a:hover {
|
||||
background: transparent;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.homepage-how-menu a:hover {
|
||||
background: transparent;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.homepage-nav-hamburger {
|
||||
display: none;
|
||||
width: 42px;
|
||||
@@ -99,7 +244,7 @@
|
||||
@media (max-width: 990px) {
|
||||
.homepage-nav-links,
|
||||
.homepage-nav-actions {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.homepage-nav-hamburger {
|
||||
|
||||
193
src/presentation/jobordbogen/pages/JobordbogenEntryPage.tsx
Normal file
193
src/presentation/jobordbogen/pages/JobordbogenEntryPage.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import { useEffect, useMemo, useState, type CSSProperties } from 'react';
|
||||
import { SiteFooter } from '../../shared/components/SiteFooter';
|
||||
import { dictCards, slugifyJobordbogenTitle } from './JobordbogenPage';
|
||||
import './jobordbogen.css';
|
||||
|
||||
interface IconifyIconProps {
|
||||
className?: string;
|
||||
icon: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
function IconifyIcon({ className, icon, style }: IconifyIconProps) {
|
||||
return <iconify-icon className={className} icon={icon} style={style} />;
|
||||
}
|
||||
|
||||
function Logo() {
|
||||
return (
|
||||
<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="jobEntryNavBg" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#1A9A75" />
|
||||
<stop offset="100%" stopColor="#3167C9" />
|
||||
</linearGradient>
|
||||
<linearGradient id="jobEntryNavFg" 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(#jobEntryNavBg)" />
|
||||
<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(#jobEntryNavFg)" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function JobordbogenEntryPage() {
|
||||
const path = useMemo(() => window.location.pathname, []);
|
||||
const slug = path.split('/').filter(Boolean).at(-1) ?? '';
|
||||
const currentCard = useMemo(() => dictCards.find((card) => slugifyJobordbogenTitle(card.title) === slug) ?? null, [slug]);
|
||||
const relatedCards = useMemo(() => dictCards.filter((card) => card.title !== currentCard?.title).slice(0, 3), [currentCard?.title]);
|
||||
const [isNavOpen, setIsNavOpen] = useState(false);
|
||||
const [isTipsOpen, setIsTipsOpen] = useState(false);
|
||||
const [isHowOpen, setIsHowOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNavOpen) return undefined;
|
||||
const previousOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => {
|
||||
document.body.style.overflow = previousOverflow;
|
||||
};
|
||||
}, [isNavOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
if (window.innerWidth > 990) setIsNavOpen(false);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
if (!currentCard) {
|
||||
return (
|
||||
<div className="job-react-root min-h-screen bg-[#f8fafc] flex flex-col items-center justify-center px-6 text-center">
|
||||
<h1 className="text-3xl font-medium text-gray-900 mb-3">Begrebet blev ikke fundet</h1>
|
||||
<a href="/jobordbogen" className="text-teal-600 hover:text-teal-700">Tilbage til Jobordbogen</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="job-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="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="/home" className="flex items-center gap-2 group outline-none">
|
||||
<Logo />
|
||||
<span className="text-xl font-normal tracking-tight text-gray-900 uppercase">ARBEJD</span>
|
||||
</a>
|
||||
<div className="job-nav-links">
|
||||
<a href="/pricing" className="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Priser</a>
|
||||
<div className="job-how-dropdown">
|
||||
<button type="button" className="job-how-trigger text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm" onClick={() => { setIsHowOpen((c) => !c); setIsTipsOpen(false); }} aria-expanded={isHowOpen}>
|
||||
Sådan virker det
|
||||
<IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isHowOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
<div className={isHowOpen ? 'job-how-menu open' : 'job-how-menu'}>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>For virksomheder</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>For jobsøgere</a>
|
||||
<a href="/pricing" onClick={() => setIsHowOpen(false)}>Priser</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>FAQ</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>Nyhedsbrev</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="job-tips-dropdown">
|
||||
<button type="button" className="job-tips-trigger text-base font-normal text-gray-900 transition-colors outline-none drop-shadow-sm border-b-2 border-teal-500 pb-0.5" onClick={() => { setIsTipsOpen((c) => !c); setIsHowOpen(false); }} aria-expanded={isTipsOpen}>
|
||||
Tips og tricks
|
||||
<IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isTipsOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
<div className={isTipsOpen ? 'job-tips-menu open' : 'job-tips-menu'}>
|
||||
<a href="/stories" onClick={() => setIsTipsOpen(false)}>Stories</a>
|
||||
<a href="/jobordbogen" className="active" onClick={() => setIsTipsOpen(false)}>Jobordbogen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="job-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="#" 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="job-nav-hamburger" aria-expanded={isNavOpen} aria-label={isNavOpen ? 'Luk menu' : 'Åbn menu'} onClick={() => setIsNavOpen((c) => !c)}>
|
||||
<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 ? 'job-nav-popup open' : 'job-nav-popup'}>
|
||||
<a href="/pricing" onClick={() => setIsNavOpen(false)}>Priser</a>
|
||||
<a href="/stories" onClick={() => setIsNavOpen(false)}>Tips og tricks: Stories</a>
|
||||
<a href="/jobordbogen" onClick={() => setIsNavOpen(false)}>Tips og tricks: Jobordbogen</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Log ind</a>
|
||||
<a href="#" className="job-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-12 px-6 lg:px-12 max-w-7xl mx-auto flex flex-col items-center text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-white/80 to-white/40 backdrop-blur-xl border border-white/80 text-gray-800 text-xs font-medium uppercase tracking-wider mb-8 shadow-sm relative z-30 transition-all">
|
||||
<IconifyIcon icon="solar:document-text-linear" className="text-base text-teal-600" style={{ strokeWidth: 1.5 }} />
|
||||
Definition
|
||||
</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 relative z-30 transition-all">{currentCard.title}</h1>
|
||||
<p className="text-xl md:text-2xl text-gray-600 max-w-3xl font-normal leading-relaxed drop-shadow-sm relative z-30 transition-all min-h-[5rem]">Hvad betyder det?</p>
|
||||
</section>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-12 relative z-20 pb-24">
|
||||
<button type="button" onClick={() => window.location.assign('/jobordbogen')} className="mb-10 inline-flex items-center gap-2 px-5 py-2.5 bg-white/60 backdrop-blur-md border border-gray-200/60 shadow-sm rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 hover:shadow-md transition-all outline-none">
|
||||
<IconifyIcon icon="solar:arrow-left-linear" className="text-lg" />
|
||||
Tilbage til oversigten
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
|
||||
<div className="flex flex-col">
|
||||
<div className="text-base text-gray-600 font-normal leading-relaxed space-y-6">
|
||||
<p>{currentCard.body}</p>
|
||||
</div>
|
||||
<div className="mt-12 flex flex-col sm:flex-row items-start sm:items-center gap-5 p-6 bg-gradient-to-r from-white/80 to-white/40 backdrop-blur-xl border border-white/80 rounded-[2rem] shadow-[0_8px_30px_rgba(0,0,0,0.03)]">
|
||||
<div className="relative">
|
||||
<img src="https://ui-avatars.com/api/?name=Magnus+Villumsen&background=0d9488&color=fff&size=150" alt="Magnus" className="w-16 h-16 rounded-full shadow-md object-cover" />
|
||||
<div className="absolute bottom-0 right-0 w-4 h-4 rounded-full bg-green-400 border-2 border-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-xs font-semibold text-teal-600 uppercase tracking-wider mb-1">Defineret af Arbejd.coms</div>
|
||||
<h4 className="text-xl font-medium tracking-tight text-gray-900">Magnus Villumsen</h4>
|
||||
<div className="text-sm font-medium text-gray-500">Content Creator</div>
|
||||
</div>
|
||||
<div className="sm:text-right mt-4 sm:mt-0 pt-4 sm:pt-0 border-t sm:border-t-0 border-gray-100 sm:border-l sm:pl-5 w-full sm:w-auto">
|
||||
<div className="text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Sidst opdateret</div>
|
||||
<div className="text-sm font-medium text-gray-800">March 7, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full aspect-square md:aspect-[4/3] rounded-[3rem] bg-gradient-to-br from-teal-500/5 to-indigo-500/5 backdrop-blur-3xl border border-white/60 shadow-[0_8px_40px_rgba(0,0,0,0.04)] flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute w-3/4 h-3/4 bg-teal-400/20 blur-[80px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
|
||||
<div className="absolute w-1/2 h-1/2 bg-indigo-400/10 blur-[60px] rounded-full top-1/4 right-1/4" />
|
||||
<div className="relative z-10 w-32 h-32 rounded-[2rem] bg-gradient-to-tr from-white/80 to-white/30 backdrop-blur-xl border border-white/80 shadow-[0_20px_40px_rgba(0,0,0,0.1)] flex items-center justify-center animate-float-medium">
|
||||
<IconifyIcon icon="solar:user-id-linear" className="text-6xl text-teal-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-24 border-t border-gray-200/50 pt-16">
|
||||
<h2 className="text-3xl font-medium tracking-tight text-gray-900 mb-10">Relaterede begreber</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{relatedCards.map((card) => (
|
||||
<a key={card.title} href={`/jobordbogen/${slugifyJobordbogenTitle(card.title)}`} className="group flex flex-col p-8 bg-gradient-to-br from-white/80 to-white/40 backdrop-blur-2xl border border-white/80 rounded-3xl shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300 outline-none">
|
||||
<div className="w-12 h-12 rounded-2xl bg-teal-50/50 border border-teal-100/50 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<IconifyIcon icon="solar:document-text-linear" className="text-2xl text-teal-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-gray-900 tracking-tight mb-3 group-hover:text-teal-600 transition-colors">{card.title}</h3>
|
||||
<p className="text-base text-gray-600 leading-relaxed font-normal mb-8 line-clamp-4 flex-1">{card.body}</p>
|
||||
<div className="mt-auto flex items-center gap-2 text-sm font-medium text-teal-600 group-hover:text-teal-700 transition-colors">
|
||||
Se definitionen
|
||||
<IconifyIcon icon="solar:arrow-right-linear" className="text-lg group-hover:translate-x-1 transition-transform" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
938
src/presentation/jobordbogen/pages/JobordbogenPage.tsx
Normal file
938
src/presentation/jobordbogen/pages/JobordbogenPage.tsx
Normal file
@@ -0,0 +1,938 @@
|
||||
import { useEffect, useMemo, useState, type CSSProperties } from 'react';
|
||||
import './jobordbogen.css';
|
||||
import { SiteFooter } from '../../shared/components/SiteFooter';
|
||||
|
||||
type ViewMode = 'dict' | 'academy';
|
||||
|
||||
interface IconifyIconProps {
|
||||
className?: string;
|
||||
icon: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
function IconifyIcon({ className, icon, style }: IconifyIconProps) {
|
||||
return <iconify-icon className={className} icon={icon} style={style} />;
|
||||
}
|
||||
|
||||
function Logo({ nav = true }: { nav?: boolean }) {
|
||||
const idPrefix = nav ? 'jobNav' : 'jobFooter';
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 100 100" className={nav ? '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' : 'w-8 h-8 rounded-lg shadow-sm transition-transform group-hover:scale-105'}>
|
||||
<defs>
|
||||
<linearGradient id={`${idPrefix}Bg`} x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#1A9A75" />
|
||||
<stop offset="100%" stopColor="#3167C9" />
|
||||
</linearGradient>
|
||||
<linearGradient id={`${idPrefix}Fg`} 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(#${idPrefix}Bg)`} />
|
||||
<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(#${idPrefix}Fg)`} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export interface DictCard {
|
||||
accent: string;
|
||||
body: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export function slugifyJobordbogenTitle(title: string) {
|
||||
return title
|
||||
.toLowerCase()
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.replace(/æ/g, 'ae')
|
||||
.replace(/ø/g, 'oe')
|
||||
.replace(/å/g, 'aa')
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '');
|
||||
}
|
||||
|
||||
export const dictCards: DictCard[] = [
|
||||
{
|
||||
accent: 'teal',
|
||||
title: '2-ugers reglen',
|
||||
body: 'For at opnå retten til dagpenge skal du melde dig ind i en A-kasse inden for to uger af, at du afslutter din uddannelse. Når du har meldt dig ind i en A-kasse er der en obligatorisk karensmåned, hvilket betyder at du først får udbetalt dagpenge en måned efter at din uddannelse slutter.',
|
||||
},
|
||||
{
|
||||
accent: 'indigo',
|
||||
title: 'Afslag',
|
||||
body: 'Et afslag fra en arbejdsgiver er et klart svar på, at du ikke får det job, du har søgt. Afslag er en naturlig del af livet som jobsøgende, uanset hvor uønsket det kan være. Måske har du sendt en motiveret ansøgning, du har måske endda været til samtale og følt, at kemien var perfekt.',
|
||||
},
|
||||
{
|
||||
accent: 'amber',
|
||||
title: 'Agil',
|
||||
body: 'Et af de seneste års store buzzwords i erhvervslivet har været udtrykket “agil”, hvilket i sin essens betyder smidighed. Ordet har forskellige betydninger hvor det bruges, f.eks. har “agil ledelse” og “agil systemudvikling” forskellige karakteristika.',
|
||||
},
|
||||
{
|
||||
accent: 'rose',
|
||||
title: 'A-kasse',
|
||||
body: 'En arbejdsløshedskasse eller a-kasse, som det oftest kaldes i folkemunde, er en organisation der sikrer dig økonomisk i tilfælde af arbejdsløshed. A-kasser er ofte tilknyttet bestemte faggrupper eller brancher, men der findes også tværfaglige a-kasser. Det er som udgangspunkt frivilligt at være medlem af en a-kasse.',
|
||||
},
|
||||
{
|
||||
accent: 'emerald',
|
||||
title: 'Anciennitet',
|
||||
body: 'Anciennitet er et udtryk for, hvor længe du har været ansat på en arbejdsplads eller i en bestemt branche. Høj anciennitet kan ofte medføre bedre vilkår, højere løn og længere opsigelsesvarsler, afhængigt af din kontrakt eller overenskomst.',
|
||||
},
|
||||
{
|
||||
accent: 'cyan',
|
||||
title: 'ATP',
|
||||
body: 'ATP står for Arbejdsmarkedets Tillægspension og er en lovpligtig pensionsordning for næsten alle lønmodtagere i Danmark. Både du og din arbejdsgiver betaler til ordningen, og pengene bliver udbetalt, når du når folkepensionsalderen.',
|
||||
},
|
||||
{
|
||||
accent: 'violet',
|
||||
title: 'Bruttoløn',
|
||||
body: 'Bruttoløn er den løn, du har tjent før skat, arbejdsmarkedsbidrag og pension er trukket fra. Det er oftest dette beløb, der tales om, når du forhandler løn til en jobsamtale, modsat nettoløn, som er det, du reelt får udbetalt på kontoen.',
|
||||
},
|
||||
{
|
||||
accent: 'fuchsia',
|
||||
title: 'Dagpenge',
|
||||
body: 'Dagpenge er en økonomisk ydelse, du kan få som forsikret ledig i en a-kasse. Det er et økonomisk sikkerhedsnet for dig, som står uden arbejde, indtil du finder dit næste job. Der er særlige krav, du skal opfylde for at være berettiget til at modtage dagpenge.',
|
||||
},
|
||||
{
|
||||
accent: 'orange',
|
||||
title: 'Elevatortale',
|
||||
body: 'En elevatortale er en kort, præcis præsentation af dig selv, dine kernekompetencer og hvad du søger. Tanken bag begrebet er, at du skal kunne levere dit budskab og skabe interesse på den tid, det tager at køre en tur i en elevator.',
|
||||
},
|
||||
{
|
||||
accent: 'sky',
|
||||
title: 'Fagforening',
|
||||
body: 'En organisation der varetager lønmodtagernes interesser på arbejdsmarkedet. En fagforening kan hjælpe dig med rådgivning omkring løn, kontrakter, arbejdsmiljø og ved eventuelle konflikter på din arbejdsplads.',
|
||||
},
|
||||
{
|
||||
accent: 'pink',
|
||||
title: 'Feriepenge',
|
||||
body: 'Som lønmodtager optjener du automatisk retten til betalt ferie. For hver måned du er ansat, optjener du 2,08 dages ferie. Feriepengene udbetales typisk, når du afholder ferie, eller når du fratræder en stilling.',
|
||||
},
|
||||
{
|
||||
accent: 'lime',
|
||||
title: 'Funktionær',
|
||||
body: 'En lønmodtager, der typisk udfører kontorarbejde, handelsarbejde eller klinisk arbejde. Som funktionær er du dækket af funktionærloven, som sikrer dig særlige rettigheder i forhold til opsigelsesvarsler, løn under sygdom og fratrædelsesgodtgørelse.',
|
||||
},
|
||||
{
|
||||
accent: 'teal',
|
||||
title: 'Akkord',
|
||||
body: 'En akkordløn er en aflønning, som afhænger af din præsterede produktionsmængde og ikke den anvendte arbejdstid. Du bliver lønnet efter resultat, ofte kombineret med en grundtimeløn.',
|
||||
},
|
||||
{
|
||||
accent: 'indigo',
|
||||
title: 'Aktivering',
|
||||
body: 'Aktivering giver dig som jobsøgende muligheder for at udvikle kompetencer og få erhvervserfaring. Forløbet sker gennem jobcenteret med fx virksomhedspraktik, løntilskud eller opkvalificering.',
|
||||
},
|
||||
{
|
||||
accent: 'amber',
|
||||
title: 'Ambitiøs',
|
||||
body: 'At være ambitiøs handler om at arbejde målrettet mod det, du ønsker at opnå, fx dit drømmejob. Det handler om vedholdenhed, udvikling og høje standarder i din jobsøgning.',
|
||||
},
|
||||
{
|
||||
accent: 'rose',
|
||||
title: 'Analytisk',
|
||||
body: 'At være analytisk betyder at tænke systematisk, logisk og grundigt i arbejdsopgaver. Kompetencen kan trænes og er værdifuld i mange roller.',
|
||||
},
|
||||
{
|
||||
accent: 'emerald',
|
||||
title: 'Ansættelsesdato',
|
||||
body: 'Ansættelsesdatoen er den dag, hvor du officielt anses som ansat. Løn, pension og øvrige vilkår træder typisk i kraft fra denne dato.',
|
||||
},
|
||||
{
|
||||
accent: 'cyan',
|
||||
title: 'Ansøgningsfrist',
|
||||
body: 'Ansøgningsfristen er den sidste dato for indsendelse af ansøgning til et jobopslag. Efter fristen bliver ansøgninger som udgangspunkt ikke taget i betragtning.',
|
||||
},
|
||||
{
|
||||
accent: 'violet',
|
||||
title: 'Ansvarsområder',
|
||||
body: 'Ansvarsområder er de opgaver, du forventes at levere på i en stilling. En klar afstemning af ansvar skaber tryghed og bedre samarbejde.',
|
||||
},
|
||||
{
|
||||
accent: 'fuchsia',
|
||||
title: 'Arbejdsforhold',
|
||||
body: 'Arbejdsforhold dækker de samlede vilkår på en arbejdsplads, fx arbejdsmiljø, arbejdstid og aflønning. Gode arbejdsforhold giver trivsel og fair rammer.',
|
||||
},
|
||||
{
|
||||
accent: 'orange',
|
||||
title: 'Arbejdsgiver',
|
||||
body: 'En arbejdsgiver er den virksomhed eller person, der ansætter dig, udbetaler løn og fordeler opgaver. Det er også arbejdsgiveren, der udbyder stillinger.',
|
||||
},
|
||||
{
|
||||
accent: 'sky',
|
||||
title: 'Arbejdsløs',
|
||||
body: 'Når du står uden job, er du arbejdsløs eller ledig. Begrebet bruges også samfundsøkonomisk om personer uden beskæftigelse, som står til rådighed for arbejdsmarkedet.',
|
||||
},
|
||||
{
|
||||
accent: 'pink',
|
||||
title: 'Arbejdsmiljø',
|
||||
body: 'Arbejdsmiljø beskriver de fysiske, sociale og psykiske forhold på en arbejdsplads. Et godt arbejdsmiljø handler om trivsel, tryghed og ordentlige rammer.',
|
||||
},
|
||||
{
|
||||
accent: 'lime',
|
||||
title: 'Arbejdsskade',
|
||||
body: 'En arbejdsskade er en skade eller sygdom, som opstår pga. dit arbejde eller arbejdsmiljø. Det kan være både fysiske og psykiske skader.',
|
||||
},
|
||||
{
|
||||
accent: 'teal',
|
||||
title: 'Arbejdsskade-forsikring',
|
||||
body: 'Arbejdsskadeforsikring er lovpligtig for erhvervsdrivende og dækker arbejdsskader og erhvervssygdomme. Forsikringen beskytter ansatte ved arbejdsrelaterede skader.',
|
||||
},
|
||||
{
|
||||
accent: 'indigo',
|
||||
title: 'Arbejdstager',
|
||||
body: 'En arbejdstager er en person, der sælger sin arbejdskraft og er ansat eller søger ansættelse. Modsætningen er selvstændigt erhvervsdrivende.',
|
||||
},
|
||||
{
|
||||
accent: 'amber',
|
||||
title: 'Arbejdsudbud',
|
||||
body: 'Arbejdsudbud er det samlede antal timer, befolkningen ønsker at arbejde for en given løn. Det handler ikke om antallet af ledige stillinger.',
|
||||
},
|
||||
{
|
||||
accent: 'rose',
|
||||
title: 'Arbejdsvilkår',
|
||||
body: 'Arbejdsvilkår omfatter løn, arbejdsmiljø, tid og de generelle betingelser, du arbejder under. Ændringer i vilkår skal varsles korrekt.',
|
||||
},
|
||||
{
|
||||
accent: 'emerald',
|
||||
title: 'Bachelor',
|
||||
body: 'En bachelor er en mellemlang videregående uddannelse. Universitetsbachelor tager normalt 3 år og professionsbachelor 3,5-4 år afhængigt af uddannelsen.',
|
||||
},
|
||||
{
|
||||
accent: 'cyan',
|
||||
title: 'Barselsvikariat',
|
||||
body: 'Et barselsvikariat er en midlertidig stilling, hvor du dækker en ansat under barsel. Det kan være en vej ind i senere fastansættelse.',
|
||||
},
|
||||
{
|
||||
accent: 'violet',
|
||||
title: 'Bortvisning',
|
||||
body: 'Bortvisning er arbejdsgivers mest alvorlige sanktion, hvor ansættelsen ophører med øjeblikkelig virkning ved grov misligholdelse.',
|
||||
},
|
||||
{
|
||||
accent: 'fuchsia',
|
||||
title: 'Brancheområde',
|
||||
body: 'Et brancheområde er en bred kategori med flere forskellige jobfunktioner. Ét område kan rumme mange roller og kompetenceprofiler.',
|
||||
},
|
||||
{
|
||||
accent: 'orange',
|
||||
title: 'Certifikat',
|
||||
body: 'Et certifikat dokumenterer konkrete kompetencer opnået gennem kursus, træning eller uddannelse. Det kan være krav i bestemte jobfunktioner.',
|
||||
},
|
||||
{
|
||||
accent: 'sky',
|
||||
title: 'Coach',
|
||||
body: 'En coach hjælper med professionel eller personlig udvikling gennem sparring, struktur og målretning. Coaching kan støtte både karriere og trivsel.',
|
||||
},
|
||||
{
|
||||
accent: 'pink',
|
||||
title: 'CSR',
|
||||
body: 'CSR står for Corporate Social Responsibility og handler om virksomhedens sociale, miljømæssige og etiske ansvar i samfundet.',
|
||||
},
|
||||
{
|
||||
accent: 'lime',
|
||||
title: 'CV',
|
||||
body: 'Et CV er en oversigt over dine erfaringer, kompetencer og uddannelse. Det giver arbejdsgiver et hurtigt billede af, om du matcher stillingen.',
|
||||
},
|
||||
{
|
||||
accent: 'lime',
|
||||
title: 'CVR-nummer',
|
||||
body: 'Et CVR-nummer er virksomhedens unikke identifikationsnummer i Det Centrale Virksomhedsregister. Det bruges ved bl.a. fakturering og kontakt med myndigheder.',
|
||||
},
|
||||
{
|
||||
accent: 'teal',
|
||||
title: 'Deltid',
|
||||
body: 'Deltid betyder normalt under 30 timer om ugen. Deltidsansatte har som udgangspunkt ret til vilkår på niveau med sammenlignelige fuldtidsansatte.',
|
||||
},
|
||||
{
|
||||
accent: 'indigo',
|
||||
title: 'Detaljeorienteret',
|
||||
body: 'At være detaljeorienteret betyder at arbejde grundigt, kvalitetssikre og have fokus på præcision. Det er en efterspurgt kompetence i mange jobtyper.',
|
||||
},
|
||||
{
|
||||
accent: 'amber',
|
||||
title: 'Dynamisk',
|
||||
body: 'Dynamisk beskriver en fleksibel, omstillingsparat og handlekraftig arbejdsstil eller arbejdsplads. Forandring er typisk en naturlig del af hverdagen.',
|
||||
},
|
||||
{
|
||||
accent: 'rose',
|
||||
title: 'Efteruddannelses-rettigheder',
|
||||
body: 'Efteruddannelsesrettigheder afhænger af overenskomst og ansættelsesforhold. Mange ansatte har ret til selvvalgt uddannelse med løn i en given periode.',
|
||||
},
|
||||
{
|
||||
accent: 'emerald',
|
||||
title: 'Engageret',
|
||||
body: 'At være engageret betyder at vise ægte interesse og ansvar i arbejdet. Engagement er vigtigt i ansøgninger, samtaler og daglig opgaveløsning.',
|
||||
},
|
||||
{
|
||||
accent: 'cyan',
|
||||
title: 'Faglært',
|
||||
body: 'Faglært betyder, at du har en relevant uddannelse inden for et fagområde. Betegnelsen bruges ofte i håndværk, service, handel og industri.',
|
||||
},
|
||||
{
|
||||
accent: 'violet',
|
||||
title: 'Faglige kompetencer',
|
||||
body: 'Faglige kompetencer er konkrete evner opnået gennem uddannelse, arbejde eller praksis. De viser, hvad du kan levere i en specifik rolle.',
|
||||
},
|
||||
{
|
||||
accent: 'fuchsia',
|
||||
title: 'Feriedagpenge',
|
||||
body: 'Feriedagpenge kan udbetales via A-kasse, hvis du ikke har ferie med løn eller feriepenge. Der gælder særlige krav og frister for at få dem.',
|
||||
},
|
||||
{
|
||||
accent: 'orange',
|
||||
title: 'Ferieloven',
|
||||
body: 'Ferieloven fastsætter regler for optjening og afholdelse af ferie samt feriebetaling. Som lønmodtager har du som minimum ret til 25 feriedage om året.',
|
||||
},
|
||||
{
|
||||
accent: 'orange',
|
||||
title: 'Fleksjob',
|
||||
body: 'Fleksjob er en ansættelsesordning for personer med varigt nedsat arbejdsevne. Jobbet tilpasses den enkeltes skånebehov og kapacitet.',
|
||||
},
|
||||
{
|
||||
accent: 'sky',
|
||||
title: 'Forlængelse og optjening af dagpengeperiode',
|
||||
body: 'Dagpengeperioden kan i visse tilfælde forlænges eller genoptjenes gennem arbejde. Reglerne afhænger af løntimer, periode og tidligere dagpengeret.',
|
||||
},
|
||||
{
|
||||
accent: 'pink',
|
||||
title: 'Forstå din lønseddel',
|
||||
body: 'Lønsedlen viser bl.a. løn, pension, AM-bidrag, skat og eventuelle tillæg eller fradrag. At forstå felterne giver bedre overblik over din økonomi.',
|
||||
},
|
||||
{
|
||||
accent: 'lime',
|
||||
title: 'Freelance',
|
||||
body: 'Freelancearbejde er selvstændigt opgavebaseret arbejde uden traditionel ansættelse. Du styrer typisk selv vilkår, pris og samarbejdsaftaler.',
|
||||
},
|
||||
{
|
||||
accent: 'teal',
|
||||
title: 'Frivilligt arbejde',
|
||||
body: 'Frivilligt arbejde er ulønnet indsats af fri vilje til gavn for andre. Det kan give social værdi, netværk og erfaring.',
|
||||
},
|
||||
{
|
||||
accent: 'indigo',
|
||||
title: 'G-dage',
|
||||
body: 'G-dage er arbejdsgivers kompensation i de første ledighedsdage efter opsigelse eller hjemsendelse. Der gælder særlige betingelser og frister.',
|
||||
},
|
||||
{
|
||||
accent: 'amber',
|
||||
title: 'Gode samarbejdsevner',
|
||||
body: 'Gode samarbejdsevner handler om kommunikation, lytning, feedback og evnen til at arbejde konstruktivt med andre.',
|
||||
},
|
||||
{
|
||||
accent: 'rose',
|
||||
title: 'Grundløn',
|
||||
body: 'Grundløn er den faste løn før tillæg, overtid og bonus. Den fastsættes via overenskomst eller individuel lønforhandling.',
|
||||
},
|
||||
{
|
||||
accent: 'emerald',
|
||||
title: 'Headhunter',
|
||||
body: 'En headhunter rekrutterer kandidater til stillinger, ofte uden at kandidaterne aktivt har søgt jobbet. Processen foregår typisk diskret.',
|
||||
},
|
||||
{
|
||||
accent: 'cyan',
|
||||
title: 'Jobafklaringsforløb',
|
||||
body: 'Et jobafklaringsforløb gives til sygemeldte, som ikke længere kan få sygedagpenge. Målet er at støtte tilbagevenden til job eller uddannelse.',
|
||||
},
|
||||
{
|
||||
accent: 'violet',
|
||||
title: 'Jobagent',
|
||||
body: 'En jobagent sender automatisk besked om nye jobopslag, der matcher dine kriterier. Det gør jobsøgning hurtigere og mere målrettet.',
|
||||
},
|
||||
{
|
||||
accent: 'fuchsia',
|
||||
title: 'Jobannonce',
|
||||
body: 'En jobannonce beskriver stilling, krav og kontaktinfo. Den er ofte første møde mellem arbejdsgiver og jobsøger.',
|
||||
},
|
||||
{
|
||||
accent: 'orange',
|
||||
title: 'Jobbank',
|
||||
body: 'En jobbank er en digital platform med ledige stillinger og søgefiltre. Den hjælper jobsøgere med at finde relevante job hurtigere.',
|
||||
},
|
||||
{
|
||||
accent: 'sky',
|
||||
title: 'Jobcenter',
|
||||
body: 'Jobcenteret er din kommunale base som ledig og hjælper med plan, aktivering, opfølgning og vejledning i jobsøgning.',
|
||||
},
|
||||
{
|
||||
accent: 'pink',
|
||||
title: 'Jobsøgningsstrategi',
|
||||
body: 'En jobsøgningsstrategi er din plan for hvordan du arbejder struktureret og målrettet med at finde det rigtige job.',
|
||||
},
|
||||
{
|
||||
accent: 'lime',
|
||||
title: 'Kandidatgrad',
|
||||
body: 'En kandidatgrad er en videregående universitetsuddannelse på typisk 2 år efter en relevant bachelor.',
|
||||
},
|
||||
{
|
||||
accent: 'teal',
|
||||
title: 'Karens',
|
||||
body: 'Karens betyder perioder uden dagpengeudbetaling, selv når du ellers er berettiget. Reglerne afhænger af din konkrete dagpengesituation.',
|
||||
},
|
||||
{
|
||||
accent: 'indigo',
|
||||
title: 'Dagpengeregler',
|
||||
body: 'Dagpengereglerne beskriver krav til medlemskab, jobsøgning, rådighed, registrering på Jobnet og beskæftigelse for at kunne modtage dagpenge.',
|
||||
},
|
||||
{
|
||||
accent: 'indigo',
|
||||
title: 'Kreativ',
|
||||
body: 'At være kreativ handler om at skabe nye idéer og løsninger. Det er en central kompetence i innovation, udvikling og forandring.',
|
||||
},
|
||||
{
|
||||
accent: 'amber',
|
||||
title: 'Kurser for ledige',
|
||||
body: 'Ledige kan i visse tilfælde få bevilget jobrettede kurser, fx 6-ugers forløb, der styrker mulighederne for ansættelse.',
|
||||
},
|
||||
{
|
||||
accent: 'rose',
|
||||
title: 'Ledig som selvstændig',
|
||||
body: 'Selvstændige kan under bestemte regler få dagpenge, hvis virksomheden ophører eller drives som bibeskæftigelse med rådighed for arbejdsmarkedet.',
|
||||
},
|
||||
{
|
||||
accent: 'emerald',
|
||||
title: 'Lønmodtagerens Garantifond',
|
||||
body: 'Garantifonden kan dække løn, feriepenge og pension, hvis en arbejdsgiver går konkurs eller bliver insolvent.',
|
||||
},
|
||||
{
|
||||
accent: 'cyan',
|
||||
title: 'Lønsikring',
|
||||
body: 'Lønsikring er en ekstra forsikring, der kan supplere dagpenge ved ledighed og dække en større del af din tidligere løn.',
|
||||
},
|
||||
{
|
||||
accent: 'violet',
|
||||
title: 'Løntilskud',
|
||||
body: 'Løntilskud er en ordning, hvor det offentlige giver tilskud til løn i en periode for at hjælpe ledige tættere på ordinær ansættelse.',
|
||||
},
|
||||
{
|
||||
accent: 'fuchsia',
|
||||
title: 'Målrettet',
|
||||
body: 'Målrettethed er evnen til at arbejde fokuseret mod et konkret mål over tid. Det er en stærk egenskab i både jobsøgning og arbejde.',
|
||||
},
|
||||
{
|
||||
accent: 'orange',
|
||||
title: 'Metodefaglige kompetencer',
|
||||
body: 'Metodefaglige kompetencer kan bruges på tværs af brancher, fx struktur, salg, kommunikation eller projektstyring.',
|
||||
},
|
||||
{
|
||||
accent: 'sky',
|
||||
title: 'Motiveret ansøgning',
|
||||
body: 'En motiveret ansøgning forklarer hvorfor netop du passer til stillingen, og hvorfor jobbet giver mening for dig.',
|
||||
},
|
||||
{
|
||||
accent: 'pink',
|
||||
title: 'Networking',
|
||||
body: 'Networking er at opbygge og vedligeholde professionelle relationer, som kan skabe viden, muligheder og samarbejde over tid.',
|
||||
},
|
||||
{
|
||||
accent: 'lime',
|
||||
title: 'Nyledig',
|
||||
body: 'Som nyledig skal du hurtigt registrere dig på Jobnet, kontakte A-kasse/jobcenter og oprette CV for at sikre rettigheder og støtte.',
|
||||
},
|
||||
{
|
||||
accent: 'teal',
|
||||
title: 'Offshore arbejde',
|
||||
body: 'Offshore arbejde foregår væk fra land, fx på platforme eller havvind. Det kræver ofte særlige certifikater og helbredsgodkendelse.',
|
||||
},
|
||||
{
|
||||
accent: 'indigo',
|
||||
title: 'Opsigelse',
|
||||
body: 'Opsigelse er afslutning af ansættelse fra medarbejder eller arbejdsgiver. Regler, formkrav og varsler afhænger af kontrakt og lovgrundlag.',
|
||||
},
|
||||
{
|
||||
accent: 'amber',
|
||||
title: 'Opsigelsesvarsel',
|
||||
body: 'Opsigelsesvarsel er perioden fra opsigelse til fratrædelse. Længden afhænger af ansættelsesforhold, anciennitet og aftale.',
|
||||
},
|
||||
{
|
||||
accent: 'rose',
|
||||
title: 'Personlige kompetencer',
|
||||
body: 'Personlige kompetencer beskriver hvordan du arbejder og samarbejder, fx om du er struktureret, selvstændig, kreativ eller analytisk.',
|
||||
},
|
||||
{
|
||||
accent: 'emerald',
|
||||
title: 'Personlighedstest',
|
||||
body: 'Personlighedstests bruges ofte i rekruttering til at vurdere adfærd, præferencer og match til rolle og arbejdsmiljø.',
|
||||
},
|
||||
{
|
||||
accent: 'cyan',
|
||||
title: 'Rekruttering',
|
||||
body: 'Rekruttering er processen med at finde, vurdere og ansætte kandidater til en stilling. Den kan være intern, ekstern eller via bureau.',
|
||||
},
|
||||
{
|
||||
accent: 'violet',
|
||||
title: 'Skattekort',
|
||||
body: 'Skattekort (hovedkort, bikort, frikort) styrer hvordan din indkomst beskattes. Korrekt brug er vigtig for at undgå restskat.',
|
||||
},
|
||||
{
|
||||
accent: 'fuchsia',
|
||||
title: 'Søgnehelligdage',
|
||||
body: 'Søgnehelligdage er helligdage på hverdage. Regler for løn og arbejde afhænger af ansættelsesform og overenskomst.',
|
||||
},
|
||||
{
|
||||
accent: 'orange',
|
||||
title: 'Strategisk',
|
||||
body: 'At være strategisk betyder at kunne planlægge, prioritere og handle med blik for langsigtede mål og konsekvenser.',
|
||||
},
|
||||
{
|
||||
accent: 'sky',
|
||||
title: 'Struktureret',
|
||||
body: 'Struktureret arbejde betyder orden, systematik og klare processer. Det skaber forudsigelighed og højere kvalitet i opgaveløsning.',
|
||||
},
|
||||
{
|
||||
accent: 'pink',
|
||||
title: 'SU-klip',
|
||||
body: 'SU-klip er antallet af månedlige SU-udbetalinger, du kan modtage under videregående uddannelse. Ét klip svarer til én måneds SU.',
|
||||
},
|
||||
{
|
||||
accent: 'lime',
|
||||
title: 'Supplerende dagpenge',
|
||||
body: 'Ved deltidsarbejde kan du i visse tilfælde få supplerende dagpenge for resterende timer op til dit forsikringsniveau.',
|
||||
},
|
||||
{
|
||||
accent: 'teal',
|
||||
title: 'SU vs. studiejob',
|
||||
body: 'Når du har studiejob, skal du holde øje med fribeløbet for at undgå tilbagebetaling af SU. Beløbsgrænser afhænger af din situation.',
|
||||
},
|
||||
{
|
||||
accent: 'indigo',
|
||||
title: 'Tidsbegrænset stilling',
|
||||
body: 'En tidsbegrænset stilling har en kendt slutdato eller opgaveafgrænsning. Ansættelsen skal have en saglig begrundelse.',
|
||||
},
|
||||
{
|
||||
accent: 'amber',
|
||||
title: 'Timelønnet',
|
||||
body: 'Timelønnede aflønnes efter faktisk arbejdstid. Regler om ferie, pension og varsler afhænger af overenskomst og ansættelsesforhold.',
|
||||
},
|
||||
{
|
||||
accent: 'rose',
|
||||
title: 'Ufaglært',
|
||||
body: 'Ufaglært betyder at du ikke har en formel erhvervsuddannelse inden for faget. Betegnelsen bruges stadig i flere brancher.',
|
||||
},
|
||||
{
|
||||
accent: 'emerald',
|
||||
title: 'Ungarbejder',
|
||||
body: 'Ungarbejdere er under 18 år og omfattet af særlige regler for arbejdstid, opgavetyper og sikkerhed på arbejdspladsen.',
|
||||
},
|
||||
{
|
||||
accent: 'cyan',
|
||||
title: 'Uopfordret ansøgning',
|
||||
body: 'En uopfordret ansøgning sendes uden aktivt jobopslag. Den kan skabe muligheder ved at vise motivation og initiativ.',
|
||||
},
|
||||
{
|
||||
accent: 'violet',
|
||||
title: 'Videoansøgning',
|
||||
body: 'En videoansøgning er en kort præsentationsvideo som supplement til CV/ansøgning. Den giver arbejdsgiver et hurtigt personligt indtryk.',
|
||||
},
|
||||
{
|
||||
accent: 'fuchsia',
|
||||
title: 'Vikar',
|
||||
body: 'En vikar er midlertidigt ansat, enten direkte eller via bureau. Vikarer har som udgangspunkt ret til vilkår på niveau med fastansatte i tilsvarende roller.',
|
||||
},
|
||||
{
|
||||
accent: 'orange',
|
||||
title: 'Vikarbureau',
|
||||
body: 'Et vikarbureau matcher virksomheder og midlertidige medarbejdere. Bureauet håndterer ofte kontraktforhold og dele af administrationen.',
|
||||
},
|
||||
{
|
||||
accent: 'sky',
|
||||
title: 'Vikar regler i fh.t. dagpenge',
|
||||
body: 'Vikararbejde kan kombineres med dagpenge efter særlige regler. Fuldtid og deltid påvirker dagpenge forskelligt.',
|
||||
},
|
||||
{
|
||||
accent: 'pink',
|
||||
title: 'Virksomhedspraktik',
|
||||
body: 'Virksomhedspraktik er et afklarings- og opkvalificeringsforløb gennem jobcenteret, som kan styrke vejen til ordinært job.',
|
||||
},
|
||||
];
|
||||
|
||||
interface AcademyCard {
|
||||
badge: string;
|
||||
color: string;
|
||||
duration: string;
|
||||
image: string;
|
||||
title: string;
|
||||
views: string;
|
||||
body: string;
|
||||
}
|
||||
|
||||
const academyCards: AcademyCard[] = [
|
||||
{
|
||||
badge: 'Jobsamtalen',
|
||||
color: 'teal',
|
||||
duration: '05:42',
|
||||
image: 'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=1000&q=80',
|
||||
title: 'Den perfekte elevatortale',
|
||||
views: '1.2k visninger',
|
||||
body: 'Lær hvordan du præsenterer dig selv professionelt og fængende på under et minut. Skab det absolut bedste førstehåndsindtryk til samtalen.',
|
||||
},
|
||||
{
|
||||
badge: 'CV & Ansøgning',
|
||||
color: 'indigo',
|
||||
duration: '08:15',
|
||||
image: 'https://images.unsplash.com/photo-1586281380349-632531db7ed4?auto=format&fit=crop&w=1000&q=80',
|
||||
title: 'Opbygning af det moderne CV',
|
||||
views: '3.4k visninger',
|
||||
body: 'Få styr på de elementer arbejdsgiverne reelt kigger efter. Gør dit CV overskueligt og målrettet fremtidens digitale arbejdsmarked.',
|
||||
},
|
||||
{
|
||||
badge: 'Lønforhandling',
|
||||
color: 'amber',
|
||||
duration: '12:30',
|
||||
image: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=1000&q=80',
|
||||
title: 'Få den løn du fortjener',
|
||||
views: '2.8k visninger',
|
||||
body: 'Hvordan forbereder du dig bedst til lønforhandlingen? Lær strategier til at kende din markedsværdi og få de bedste argumenter klar.',
|
||||
},
|
||||
{
|
||||
badge: 'Netværk',
|
||||
color: 'rose',
|
||||
duration: '09:18',
|
||||
image: 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=1000&q=80',
|
||||
title: 'Brug LinkedIn effektivt',
|
||||
views: '4.1k visninger',
|
||||
body: 'Lær at opbygge en stærk profil, skabe indhold der bliver set, og række ud til relevante profiler i din branche på den rigtige måde.',
|
||||
},
|
||||
];
|
||||
|
||||
const accentMap = {
|
||||
teal: {
|
||||
card: 'bg-teal-50/50 border-teal-100/50 text-teal-600',
|
||||
hover: 'group-hover:text-teal-600',
|
||||
hoverStrong: 'group-hover:text-teal-700',
|
||||
},
|
||||
indigo: {
|
||||
card: 'bg-indigo-50/50 border-indigo-100/50 text-indigo-600',
|
||||
hover: 'group-hover:text-indigo-600',
|
||||
hoverStrong: 'group-hover:text-indigo-700',
|
||||
},
|
||||
amber: {
|
||||
card: 'bg-amber-50/50 border-amber-100/50 text-amber-600',
|
||||
hover: 'group-hover:text-amber-600',
|
||||
hoverStrong: 'group-hover:text-amber-700',
|
||||
},
|
||||
rose: {
|
||||
card: 'bg-rose-50/50 border-rose-100/50 text-rose-600',
|
||||
hover: 'group-hover:text-rose-600',
|
||||
hoverStrong: 'group-hover:text-rose-700',
|
||||
},
|
||||
emerald: {
|
||||
card: 'bg-emerald-50/50 border-emerald-100/50 text-emerald-600',
|
||||
hover: 'group-hover:text-emerald-600',
|
||||
hoverStrong: 'group-hover:text-emerald-700',
|
||||
},
|
||||
cyan: {
|
||||
card: 'bg-cyan-50/50 border-cyan-100/50 text-cyan-600',
|
||||
hover: 'group-hover:text-cyan-600',
|
||||
hoverStrong: 'group-hover:text-cyan-700',
|
||||
},
|
||||
violet: {
|
||||
card: 'bg-violet-50/50 border-violet-100/50 text-violet-600',
|
||||
hover: 'group-hover:text-violet-600',
|
||||
hoverStrong: 'group-hover:text-violet-700',
|
||||
},
|
||||
fuchsia: {
|
||||
card: 'bg-fuchsia-50/50 border-fuchsia-100/50 text-fuchsia-600',
|
||||
hover: 'group-hover:text-fuchsia-600',
|
||||
hoverStrong: 'group-hover:text-fuchsia-700',
|
||||
},
|
||||
orange: {
|
||||
card: 'bg-orange-50/50 border-orange-100/50 text-orange-600',
|
||||
hover: 'group-hover:text-orange-600',
|
||||
hoverStrong: 'group-hover:text-orange-700',
|
||||
},
|
||||
sky: {
|
||||
card: 'bg-sky-50/50 border-sky-100/50 text-sky-600',
|
||||
hover: 'group-hover:text-sky-600',
|
||||
hoverStrong: 'group-hover:text-sky-700',
|
||||
},
|
||||
pink: {
|
||||
card: 'bg-pink-50/50 border-pink-100/50 text-pink-600',
|
||||
hover: 'group-hover:text-pink-600',
|
||||
hoverStrong: 'group-hover:text-pink-700',
|
||||
},
|
||||
lime: {
|
||||
card: 'bg-lime-50/50 border-lime-100/50 text-lime-600',
|
||||
hover: 'group-hover:text-lime-600',
|
||||
hoverStrong: 'group-hover:text-lime-700',
|
||||
},
|
||||
} as const;
|
||||
|
||||
export function JobordbogenPage() {
|
||||
const path = useMemo(() => window.location.pathname, []);
|
||||
const [mode, setMode] = useState<ViewMode>(path === '/academy' ? 'academy' : 'dict');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [isNavOpen, setIsNavOpen] = useState(false);
|
||||
const [isTipsOpen, setIsTipsOpen] = useState(false);
|
||||
const [isHowOpen, setIsHowOpen] = 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);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement | null;
|
||||
if (!target?.closest('.job-how-dropdown')) {
|
||||
setIsHowOpen(false);
|
||||
}
|
||||
if (!target?.closest('.job-tips-dropdown')) {
|
||||
setIsTipsOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const isDict = mode === 'dict';
|
||||
const normalizedSearch = searchQuery.trim().toLowerCase();
|
||||
const filteredDictCards = useMemo(() => {
|
||||
if (!normalizedSearch) {
|
||||
return dictCards;
|
||||
}
|
||||
|
||||
return dictCards.filter((card) => card.title.toLowerCase().includes(normalizedSearch));
|
||||
}, [normalizedSearch]);
|
||||
|
||||
return (
|
||||
<div className="job-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="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="/home" className="flex items-center gap-2 group outline-none">
|
||||
<Logo nav />
|
||||
<span className="text-xl font-normal tracking-tight text-gray-900 uppercase">ARBEJD</span>
|
||||
</a>
|
||||
|
||||
<div className="job-nav-links">
|
||||
<a href="/pricing" className="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Priser</a>
|
||||
<div className="job-how-dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="job-how-trigger text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm"
|
||||
onClick={() => {
|
||||
setIsHowOpen((current) => !current);
|
||||
setIsTipsOpen(false);
|
||||
}}
|
||||
aria-expanded={isHowOpen}
|
||||
>
|
||||
Sådan virker det
|
||||
<IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isHowOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
<div className={isHowOpen ? 'job-how-menu open' : 'job-how-menu'}>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>For virksomheder</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>For jobsøgere</a>
|
||||
<a href="/pricing" onClick={() => setIsHowOpen(false)}>Priser</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>FAQ</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>Nyhedsbrev</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="job-tips-dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="job-tips-trigger text-base font-normal text-gray-900 transition-colors outline-none drop-shadow-sm border-b-2 border-teal-500 pb-0.5"
|
||||
onClick={() => {
|
||||
setIsTipsOpen((current) => !current);
|
||||
setIsHowOpen(false);
|
||||
}}
|
||||
aria-expanded={isTipsOpen}
|
||||
>
|
||||
Tips og tricks
|
||||
<IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isTipsOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
<div className={isTipsOpen ? 'job-tips-menu open' : 'job-tips-menu'}>
|
||||
<a href="/stories" onClick={() => setIsTipsOpen(false)}>Stories</a>
|
||||
<a href="/jobordbogen" className="active" onClick={() => setIsTipsOpen(false)}>Jobordbogen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="job-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="#" 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="job-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 ? 'job-nav-popup open' : 'job-nav-popup'}>
|
||||
<a href="/pricing" onClick={() => setIsNavOpen(false)}>Priser</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: For virksomheder</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: For jobsøgere</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: FAQ</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: Nyhedsbrev</a>
|
||||
<a href="/stories" onClick={() => setIsNavOpen(false)}>Tips og tricks: Stories</a>
|
||||
<a href="/jobordbogen" onClick={() => setIsNavOpen(false)}>Tips og tricks: Jobordbogen</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Log ind</a>
|
||||
<a href="#" className="job-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-12 px-6 lg:px-12 max-w-7xl mx-auto flex flex-col items-center text-center">
|
||||
<div className="hidden md:flex absolute top-20 left-[10%] px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_20px_rgba(0,0,0,0.04)] text-sm text-gray-800 font-medium rotate-[-3deg] animate-float-slow z-20 items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-teal-400" />
|
||||
Jobsøgning
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex absolute top-40 right-[10%] lg:right-[15%] px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_20px_rgba(0,0,0,0.04)] text-sm text-gray-800 font-medium rotate-[4deg] animate-float-medium z-20 items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-indigo-400" />
|
||||
A-kasse
|
||||
</div>
|
||||
|
||||
<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/80 to-white/40 backdrop-blur-xl border border-white/80 text-gray-800 text-xs font-medium uppercase tracking-wider mb-8 shadow-sm relative z-30 transition-all">
|
||||
<IconifyIcon icon={isDict ? 'solar:notebook-bookmark-linear' : 'solar:videocamera-record-linear'} className={`text-base ${isDict ? 'text-teal-600' : 'text-indigo-600'}`} style={{ strokeWidth: 1.5 }} />
|
||||
{isDict ? 'Opslagsværk' : 'Videokurser'}
|
||||
</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 relative z-30 transition-all">
|
||||
{isDict ? 'Jobordbogen' : 'Arbejd Academy'}
|
||||
</h1>
|
||||
|
||||
<p className="text-xl md:text-2xl text-gray-600 max-w-3xl font-normal leading-relaxed drop-shadow-sm relative z-30 transition-all min-h-[5rem]">
|
||||
{isDict
|
||||
? 'Du er ikke alene – det er en jungle at finde rundt i jobsøgning. Vi har sammensat en handy ordbog med de mest almindelige begreber du vil støde på.'
|
||||
: 'Lær alt du behøver for at lande drømmejobhandlinger.'}
|
||||
</p>
|
||||
|
||||
<div className="relative flex items-center p-1.5 mt-12 bg-white/50 backdrop-blur-2xl border border-gray-200/60 rounded-full w-max mx-auto shadow-inner z-30">
|
||||
<button
|
||||
type="button"
|
||||
className={`relative w-36 sm:w-44 py-2.5 text-sm font-medium rounded-full transition-colors duration-300 z-10 outline-none ${isDict ? 'text-gray-900' : 'text-gray-500 hover:text-gray-800'}`}
|
||||
onClick={() => setMode('dict')}
|
||||
>
|
||||
Jobordbogen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative w-36 sm:w-44 py-2.5 text-sm font-medium rounded-full transition-colors duration-300 z-10 outline-none ${!isDict ? 'text-gray-900' : 'text-gray-500 hover:text-gray-800'}`}
|
||||
onClick={() => setMode('academy')}
|
||||
>
|
||||
Academy
|
||||
</button>
|
||||
<div className={`absolute top-1.5 left-1.5 bottom-1.5 w-36 sm:w-44 bg-white rounded-full shadow-[0_2px_15px_rgba(0,0,0,0.06)] border border-gray-100 transition-transform duration-400 ease-[cubic-bezier(0.4,0,0.2,1)] z-0 ${isDict ? 'translate-x-0' : 'translate-x-full'}`} />
|
||||
</div>
|
||||
|
||||
{isDict && (
|
||||
<div className="w-full max-w-2xl mt-8 relative z-30">
|
||||
<div className="flex items-center gap-3 px-5 py-3 rounded-full bg-gradient-to-r from-white/80 to-white/40 backdrop-blur-xl border border-white/80 shadow-[0_8px_24px_rgba(0,0,0,0.04)]">
|
||||
<IconifyIcon icon="solar:magnifer-linear" className="text-xl text-teal-600 flex-shrink-0" style={{ strokeWidth: 1.5 }} />
|
||||
<input
|
||||
type="search"
|
||||
value={searchQuery}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
placeholder="Søg i begreber (fx A-kasse)"
|
||||
className="w-full bg-transparent text-base text-gray-800 placeholder:text-gray-500 outline-none"
|
||||
aria-label="Søg i Jobordbogen"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="text-gray-400 hover:text-gray-700 transition-colors outline-none"
|
||||
aria-label="Ryd søgning"
|
||||
>
|
||||
<IconifyIcon icon="solar:close-circle-linear" className="text-xl" style={{ strokeWidth: 1.8 }} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-12 relative z-20 pb-24">
|
||||
<div className={`${isDict ? 'opacity-100' : 'opacity-0 hidden'} transition-opacity duration-500 ease-in-out`}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredDictCards.map((card) => {
|
||||
const accent = accentMap[card.accent as keyof typeof accentMap];
|
||||
return (
|
||||
<a key={card.title} href={`/jobordbogen/${slugifyJobordbogenTitle(card.title)}`} className="group flex flex-col p-8 bg-gradient-to-br from-white/80 to-white/40 backdrop-blur-2xl border border-white/80 rounded-3xl shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300 outline-none">
|
||||
<div className={`w-12 h-12 rounded-2xl border flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 ${accent.card}`}>
|
||||
<IconifyIcon icon="solar:document-text-linear" className="text-2xl" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className={`text-xl font-medium text-gray-900 tracking-tight mb-3 transition-colors ${accent.hover}`}>{card.title}</h3>
|
||||
<p className="text-base text-gray-600 leading-relaxed font-normal mb-8 line-clamp-4 flex-1">{card.body}</p>
|
||||
<div className={`mt-auto flex items-center gap-2 text-sm font-medium transition-colors ${accent.card.split(' ').at(-1)} ${accent.hoverStrong}`}>
|
||||
Se definitionen
|
||||
<IconifyIcon icon="solar:arrow-right-linear" className="text-lg group-hover:translate-x-1 transition-transform" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{filteredDictCards.length === 0 && (
|
||||
<div className="mt-8 p-8 rounded-3xl bg-gradient-to-r from-white/70 to-white/40 backdrop-blur-xl border border-white/80 text-center text-gray-600">
|
||||
Ingen begreber matcher din søgning.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`${!isDict ? 'opacity-100' : 'opacity-0 hidden'} transition-opacity duration-500 ease-in-out`}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{academyCards.map((card) => (
|
||||
<div key={card.title} className="group relative flex flex-col bg-gradient-to-br from-white/80 to-white/40 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-5 shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_20px_50px_rgba(0,0,0,0.08)] transition-all duration-500">
|
||||
<div className="relative w-full aspect-video rounded-3xl overflow-hidden bg-gray-900 mb-6 shadow-inner cursor-pointer">
|
||||
<img src={card.image} alt={card.title} className="object-cover w-full h-full opacity-70 group-hover:opacity-90 group-hover:scale-105 transition-all duration-700 ease-out" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className={`w-20 h-20 rounded-full bg-white/20 backdrop-blur-md border border-white/50 flex items-center justify-center text-white shadow-[0_8px_32px_rgba(0,0,0,0.2)] group-hover:scale-110 transition-all duration-300 ${card.color === 'teal' ? 'group-hover:bg-teal-500 group-hover:border-teal-400' : card.color === 'indigo' ? 'group-hover:bg-indigo-500 group-hover:border-indigo-400' : card.color === 'amber' ? 'group-hover:bg-amber-500 group-hover:border-amber-400' : 'group-hover:bg-rose-500 group-hover:border-rose-400'}`}>
|
||||
<IconifyIcon icon="solar:play-bold" className="text-3xl ml-1 drop-shadow-md" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-4 right-4 px-3 py-1 bg-gray-900/60 backdrop-blur-md rounded-lg text-white text-xs font-medium tracking-wide border border-white/20">
|
||||
{card.duration}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 pb-3 flex-1 flex flex-col">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className={`px-3 py-1 text-xs font-semibold rounded-full border ${card.color === 'teal' ? 'text-teal-700 bg-teal-100/80 border-teal-200/50' : card.color === 'indigo' ? 'text-indigo-700 bg-indigo-100/80 border-indigo-200/50' : card.color === 'amber' ? 'text-amber-700 bg-amber-100/80 border-amber-200/50' : 'text-rose-700 bg-rose-100/80 border-rose-200/50'}`}>{card.badge}</span>
|
||||
<span className="flex items-center gap-1 text-sm text-gray-500 font-medium">
|
||||
<IconifyIcon icon="solar:eye-linear" /> {card.views}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className={`text-2xl font-medium text-gray-900 mb-3 transition-colors cursor-pointer tracking-tight ${card.color === 'teal' ? 'group-hover:text-teal-600' : card.color === 'indigo' ? 'group-hover:text-indigo-600' : card.color === 'amber' ? 'group-hover:text-amber-600' : 'group-hover:text-rose-600'}`}>{card.title}</h3>
|
||||
<p className="text-gray-600 font-normal leading-relaxed text-base flex-1">{card.body}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
161
src/presentation/jobordbogen/pages/jobordbogen.css
Normal file
161
src/presentation/jobordbogen/pages/jobordbogen.css
Normal file
@@ -0,0 +1,161 @@
|
||||
.job-react-root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(20, 184, 166, 0.2); border-radius: 20px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 184, 166, 0.4); }
|
||||
|
||||
@keyframes float-slow {
|
||||
0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
|
||||
50% { transform: translateY(-15px) scale(1.02) rotate(1deg); }
|
||||
}
|
||||
|
||||
@keyframes float-medium {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-10px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
@keyframes float-fast {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
|
||||
.animate-float-medium { animation: float-medium 6s ease-in-out infinite; }
|
||||
.animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
|
||||
|
||||
.text-gradient {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.08em;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #0d9488 50%, #4338ca 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.job-nav-links,
|
||||
.job-nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.job-nav-links { gap: 2rem; }
|
||||
.job-nav-actions { gap: 1rem; }
|
||||
|
||||
.job-how-dropdown,
|
||||
.job-tips-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.job-how-trigger,
|
||||
.job-tips-trigger {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.job-how-menu,
|
||||
.job-tips-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.65rem);
|
||||
left: 0;
|
||||
min-width: 220px;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.job-how-menu.open,
|
||||
.job-tips-menu.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.job-how-menu a,
|
||||
.job-tips-menu a {
|
||||
display: block;
|
||||
border-radius: 0.7rem;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.job-how-menu a:hover,
|
||||
.job-tips-menu a:hover,
|
||||
.job-tips-menu a.active {
|
||||
background: transparent;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.job-nav-hamburger {
|
||||
display: none;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.job-nav-popup {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
right: 0;
|
||||
width: min(320px, calc(100vw - 2rem));
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.75rem;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.job-nav-popup a {
|
||||
text-decoration: none;
|
||||
color: #374151;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.85rem;
|
||||
padding: 0.7rem 0.9rem;
|
||||
}
|
||||
|
||||
.job-nav-popup a:hover {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.job-nav-popup-cta {
|
||||
color: #ffffff !important;
|
||||
background: linear-gradient(to right, #111827, #1f2937);
|
||||
border: 1px solid rgba(55, 65, 81, 0.8);
|
||||
}
|
||||
|
||||
.job-nav-popup.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 990px) {
|
||||
.job-nav-links,
|
||||
.job-nav-actions {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.job-nav-hamburger {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
208
src/presentation/newsletter/pages/NewsletterPage.tsx
Normal file
208
src/presentation/newsletter/pages/NewsletterPage.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
import './newsletter.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 NewsletterPage() {
|
||||
return (
|
||||
<div className="newsletter-react-root 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 scroll-smooth">
|
||||
<div className="fixed top-[-10%] left-[-10%] w-[70vw] h-[70vw] rounded-full bg-gradient-to-br from-teal-400/20 to-emerald-300/10 blur-[150px] pointer-events-none z-0" />
|
||||
<div className="fixed top-[40%] right-[-10%] w-[60vw] h-[60vw] rounded-full bg-gradient-to-tl from-indigo-500/10 to-purple-400/5 blur-[160px] pointer-events-none z-0" />
|
||||
<div className="fixed bottom-[-10%] left-[15%] w-[50vw] h-[50vw] rounded-full bg-gradient-to-tr from-cyan-400/10 to-blue-300/10 blur-[140px] pointer-events-none z-0" />
|
||||
|
||||
<main className="w-full max-w-3xl mx-auto pt-10 md:pt-16 pb-20 px-4 sm:px-6 relative z-10 flex flex-col items-center">
|
||||
<header className="w-full bg-gradient-to-r from-white/70 to-white/40 backdrop-blur-2xl border border-white/80 rounded-3xl p-6 md:px-8 flex items-center justify-between shadow-[0_8px_30px_rgba(0,0,0,0.03)] mb-8 transition-all hover:shadow-[0_12px_40px_rgba(0,0,0,0.05)]">
|
||||
<a href="/home" className="flex items-center gap-3 group outline-none">
|
||||
<svg viewBox="0 0 100 100" className="w-10 h-10 rounded-xl shadow-[0_4px_15px_rgba(49,103,201,0.15)] group-hover:scale-105 transition-transform duration-500">
|
||||
<defs>
|
||||
<linearGradient id="newsletterLogoBg" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#1A9A75" />
|
||||
<stop offset="100%" stopColor="#3167C9" />
|
||||
</linearGradient>
|
||||
<linearGradient id="newsletterLogoFg" 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(#newsletterLogoBg)" />
|
||||
<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(#newsletterLogoFg)" />
|
||||
</svg>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xl font-normal tracking-tight text-gray-900 uppercase leading-none">ARBEJD</span>
|
||||
<span className="text-xs text-gray-500 font-medium tracking-wide uppercase mt-1">Produkt Nyt</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div className="text-right flex flex-col items-end">
|
||||
<span className="text-sm font-medium text-teal-700 bg-teal-50/50 px-3 py-1 rounded-full border border-teal-100/50 mb-1 backdrop-blur-sm">Opdatering #42</span>
|
||||
<span className="text-xs text-gray-400 font-normal tracking-wide">24. Oktober 2026</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article className="w-full bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-3xl border border-white/80 rounded-[2.5rem] shadow-[0_15px_50px_rgba(0,0,0,0.06)] overflow-hidden flex flex-col group animate-float-slow">
|
||||
<div className="w-full aspect-[16/9] sm:aspect-[21/9] bg-gray-100 relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1200" alt="Team working on new features" className="w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-1000 ease-out" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-gray-900/20 to-transparent" />
|
||||
|
||||
<div className="absolute top-6 left-6 inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/20 backdrop-blur-xl border border-white/40 text-white text-xs font-medium uppercase tracking-wider shadow-lg">
|
||||
<IconifyIcon icon="solar:rocket-linear" style={{ strokeWidth: 1.5 }} /> Stor Lancering
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-6 left-6 md:left-10 right-6">
|
||||
<h1 className="text-2xl md:text-4xl font-medium tracking-tight text-white mb-2 drop-shadow-md">Introduktion af Samtale-Simulatoren</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 md:p-10 relative">
|
||||
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/80 to-transparent" />
|
||||
<p className="text-base md:text-lg text-gray-600 font-normal leading-relaxed mb-8 drop-shadow-sm">
|
||||
Vi har netop lanceret en af vores mest efterspurgte funktioner på platformen. Træn dine fremtidige jobsamtaler i et trygt miljø med vores nye AI-drevne simulator, der automatisk tilpasser sig din branche, erfaring og det specifikke jobopslag. Få direkte, konstruktiv feedback og forbedr dine chancer markant.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
|
||||
<a href="#" className="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white rounded-full font-normal text-base w-full sm:w-auto shadow-[0_8px_25px_rgba(17,24,39,0.2)] hover:shadow-[0_12px_30px_rgba(17,24,39,0.3)] transition-all outline-none border border-gray-700 hover:-translate-y-0.5 group/btn">
|
||||
<span>Prøv Simulatoren</span>
|
||||
<IconifyIcon icon="solar:arrow-right-linear" className="text-lg group-hover/btn:translate-x-1 transition-transform" style={{ strokeWidth: 1.5 }} />
|
||||
</a>
|
||||
<a href="#" className="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-white/50 backdrop-blur-md border border-white/80 text-gray-700 rounded-full font-normal text-base w-full sm:w-auto hover:bg-white/80 transition-all outline-none shadow-sm">
|
||||
Se release notes
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div className="w-24 h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent my-12" />
|
||||
|
||||
<section className="w-full">
|
||||
<div className="flex flex-col sm:flex-row sm:items-end justify-between mb-6 px-2 gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl md:text-3xl font-medium tracking-tight text-gradient-subtle mb-1">Seneste Nyt & Indhold</h2>
|
||||
<p className="text-base text-gray-500 font-normal">Hvad vi har bygget og skrevet til dig i denne uge</p>
|
||||
</div>
|
||||
<a href="#" className="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center gap-1 transition-colors outline-none bg-teal-50/50 px-4 py-2 rounded-full border border-teal-100/50 backdrop-blur-sm">
|
||||
Se alle opdateringer <IconifyIcon icon="solar:alt-arrow-right-linear" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-gradient-to-br from-white/70 to-white/30 backdrop-blur-2xl border border-white/80 rounded-[2rem] p-5 md:p-6 flex flex-col md:flex-row items-start md:items-center gap-5 md:gap-6 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-pointer group animate-float-medium">
|
||||
<div className="w-16 h-16 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 duration-300 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-indigo-500/10 to-transparent" />
|
||||
<IconifyIcon icon="solar:layers-linear" className="text-2xl text-indigo-700" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Ny Funktion</span>
|
||||
<span className="w-1 h-1 rounded-full bg-gray-300" />
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">Rullet ud i dag</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-gray-900 tracking-tight mb-2 group-hover:text-teal-700 transition-colors">Avancerede Filtre til Løn & Fleksibilitet</h3>
|
||||
<p className="text-sm text-gray-600 mb-3 line-clamp-2 md:line-clamp-none">Nu kan du præcisere din søgning endnu mere. Find de jobs, der matcher dine specifikke krav til lønpakke og antal hjemmearbejdsdage direkte i oversigten.</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="px-2.5 py-1 rounded-lg border border-gray-200 bg-white/50 text-xs text-gray-600">Platform</span>
|
||||
<span className="px-2.5 py-1 rounded-lg border border-gray-200 bg-white/50 text-xs text-gray-600">Søgning</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row md:flex-col items-center md:items-end justify-between w-full md:w-auto mt-4 md:mt-0 gap-4 md:gap-3">
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-gradient-to-r from-teal-50 to-emerald-50 border border-teal-100/80 text-teal-700 text-sm font-medium shadow-sm">
|
||||
<IconifyIcon icon="solar:star-linear" style={{ strokeWidth: 1.5 }} /> Nyhed
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 group-hover:bg-gray-900 group-hover:text-white group-hover:border-gray-900 transition-all">
|
||||
<IconifyIcon icon="solar:arrow-right-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-white/70 to-white/30 backdrop-blur-2xl border border-white/80 rounded-[2rem] p-5 md:p-6 flex flex-col md:flex-row items-start md:items-center gap-5 md:gap-6 shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:shadow-[0_12px_40px_rgba(59,130,246,0.08)] hover:border-blue-200/60 transition-all cursor-pointer group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-50 to-white border border-blue-100/50 shadow-sm flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform duration-300 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-blue-500/10 to-transparent" />
|
||||
<IconifyIcon icon="solar:document-text-linear" className="text-2xl text-blue-700" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Ny Artikel</span>
|
||||
<span className="w-1 h-1 rounded-full bg-gray-300" />
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1"><IconifyIcon icon="solar:clock-circle-linear" /> 4 min læsetid</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-gray-900 tracking-tight mb-2 group-hover:text-blue-700 transition-colors">Guide: Det perfekte CV i 2026</h3>
|
||||
<p className="text-sm text-gray-600 mb-3 line-clamp-2 md:line-clamp-none">Vores rekrutteringseksperter har samlet de vigtigste trends for i år. Lær hvordan du bedst fremhæver dine kompetencer og fanger virksomhedernes opmærksomhed.</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="px-2.5 py-1 rounded-lg border border-gray-200 bg-white/50 text-xs text-gray-600">Karriere</span>
|
||||
<span className="px-2.5 py-1 rounded-lg border border-gray-200 bg-white/50 text-xs text-gray-600">Tips & Tricks</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row md:flex-col items-center md:items-end justify-between w-full md:w-auto mt-4 md:mt-0 gap-4 md:gap-3">
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-100/80 text-blue-700 text-sm font-medium shadow-sm">
|
||||
<IconifyIcon icon="solar:book-linear" style={{ strokeWidth: 1.5 }} /> Læs nu
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 group-hover:bg-gray-900 group-hover:text-white group-hover:border-gray-900 transition-all">
|
||||
<IconifyIcon icon="solar:arrow-right-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="w-24 h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent my-12" />
|
||||
|
||||
<section className="w-full bg-gradient-to-br from-amber-50/60 to-white/30 backdrop-blur-3xl border border-amber-100/60 rounded-[2rem] p-6 md:p-8 flex flex-col md:flex-row gap-6 md:gap-8 items-center shadow-[0_10px_40px_rgba(245,158,11,0.05)] relative overflow-hidden group">
|
||||
<div className="absolute -right-20 -top-20 w-64 h-64 bg-amber-300/10 rounded-full blur-[40px] pointer-events-none group-hover:bg-amber-300/20 transition-colors duration-700" />
|
||||
|
||||
<div className="w-20 h-20 rounded-[1.5rem] bg-gradient-to-br from-amber-100 to-white border border-amber-200/50 shadow-sm flex items-center justify-center flex-shrink-0 z-10 group-hover:rotate-6 transition-transform duration-500">
|
||||
<IconifyIcon icon="solar:lightbulb-bolt-linear" className="text-4xl text-amber-500" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 z-10 text-center md:text-left">
|
||||
<span className="text-xs font-medium uppercase tracking-widest text-amber-600 mb-2 block">Ugens Tip</span>
|
||||
<h3 className="text-2xl font-medium tracking-tight text-gray-900 mb-3">Få mest ud af de nye filtre</h3>
|
||||
<p className="text-base text-gray-600 font-normal leading-relaxed mb-5">
|
||||
Vidste du, at du nu kan gemme dine nye præferencer for løn og fleksibilitet? Gå til dine profilindstillinger og sæt dem som standard, så din AI-agent udelukkende præsenterer dig for relevante virksomheder fremadrettet.
|
||||
</p>
|
||||
<button type="button" className="inline-flex items-center gap-2 px-5 py-2.5 bg-white/60 backdrop-blur-md border border-amber-200/50 hover:bg-white text-amber-800 rounded-xl font-medium text-sm transition-all shadow-sm outline-none hover:shadow-md">
|
||||
Gå til indstillinger <IconifyIcon icon="solar:alt-arrow-right-linear" className="text-base" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="w-full mt-16 pt-10 border-t border-gray-200/50 text-center flex flex-col items-center relative z-10">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<a href="#" className="w-12 h-12 rounded-2xl bg-white/50 backdrop-blur-xl border border-white/80 shadow-[0_4px_15px_rgba(0,0,0,0.02)] flex items-center justify-center text-gray-400 hover:text-gray-900 hover:bg-white hover:shadow-[0_8px_20px_rgba(0,0,0,0.06)] transition-all outline-none hover:-translate-y-1">
|
||||
<span className="text-base font-medium">in</span>
|
||||
</a>
|
||||
<a href="#" className="w-12 h-12 rounded-2xl bg-white/50 backdrop-blur-xl border border-white/80 shadow-[0_4px_15px_rgba(0,0,0,0.02)] flex items-center justify-center text-gray-400 hover:text-gray-900 hover:bg-white hover:shadow-[0_8px_20px_rgba(0,0,0,0.06)] transition-all outline-none hover:-translate-y-1">
|
||||
<IconifyIcon icon="solar:camera-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
|
||||
</a>
|
||||
<a href="#" className="w-12 h-12 rounded-2xl bg-white/50 backdrop-blur-xl border border-white/80 shadow-[0_4px_15px_rgba(0,0,0,0.02)] flex items-center justify-center text-gray-400 hover:text-gray-900 hover:bg-white hover:shadow-[0_8px_20px_rgba(0,0,0,0.06)] transition-all outline-none hover:-translate-y-1">
|
||||
<IconifyIcon icon="solar:global-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-500 font-normal mb-6 max-w-sm drop-shadow-sm">
|
||||
Du modtager denne email fordi du ønsker at supercharge din karriere med Arbejd.com.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center items-center gap-x-6 gap-y-2 text-xs font-medium text-gray-400 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full border border-white/60">
|
||||
<a href="#" className="hover:text-gray-900 transition-colors outline-none">Min Profil</a>
|
||||
<span className="text-gray-300">•</span>
|
||||
<a href="#" className="hover:text-gray-900 transition-colors outline-none">Indstillinger</a>
|
||||
<span className="text-gray-300">•</span>
|
||||
<a href="#" className="hover:text-red-500 transition-colors outline-none">Afmeld nyhedsbrev</a>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 text-xs text-gray-400 font-normal">© 2026 Arbejd.com. Fremtidens rekruttering.</div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
src/presentation/newsletter/pages/newsletter.css
Normal file
39
src/presentation/newsletter/pages/newsletter.css
Normal file
@@ -0,0 +1,39 @@
|
||||
.newsletter-react-root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(20, 184, 166, 0.2); border-radius: 20px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 184, 166, 0.4); }
|
||||
|
||||
@keyframes float-slow {
|
||||
0%, 100% { transform: translateY(0) scale(1); }
|
||||
50% { transform: translateY(-10px) scale(1.01); }
|
||||
}
|
||||
|
||||
@keyframes float-medium {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
|
||||
.animate-float-medium { animation: float-medium 6s ease-in-out infinite; }
|
||||
|
||||
.text-gradient {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.08em;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #0d9488 50%, #4338ca 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.text-gradient-subtle {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.08em;
|
||||
background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
600
src/presentation/pricing/pages/PricingPage.tsx
Normal file
600
src/presentation/pricing/pages/PricingPage.tsx
Normal file
@@ -0,0 +1,600 @@
|
||||
import { useEffect, useMemo, useState, type CSSProperties } from 'react';
|
||||
import './pricing.css';
|
||||
import { SiteFooter } from '../../shared/components/SiteFooter';
|
||||
|
||||
type PricingAudience = 'jobseekers' | 'companies';
|
||||
|
||||
interface IconifyIconProps {
|
||||
className?: string;
|
||||
icon: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
function IconifyIcon({ className, icon, style }: IconifyIconProps) {
|
||||
return <iconify-icon className={className} icon={icon} style={style} />;
|
||||
}
|
||||
|
||||
function Logo({ nav = true }: { nav?: boolean }) {
|
||||
const idPrefix = nav ? 'nav' : 'footer';
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 100 100" className={nav ? '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' : 'w-8 h-8 rounded-lg shadow-sm transition-transform group-hover:scale-105'}>
|
||||
<defs>
|
||||
<linearGradient id={`${idPrefix}LogoBg`} x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#1A9A75" />
|
||||
<stop offset="100%" stopColor="#3167C9" />
|
||||
</linearGradient>
|
||||
<linearGradient id={`${idPrefix}LogoFg`} 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(#${idPrefix}LogoBg)`} />
|
||||
<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(#${idPrefix}LogoFg)`}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
interface CheckItemProps {
|
||||
children: string;
|
||||
dark?: boolean;
|
||||
small?: boolean;
|
||||
circle?: boolean;
|
||||
}
|
||||
|
||||
function CheckItem({ children, dark = false, small = false, circle = false }: CheckItemProps) {
|
||||
const wrapper = small
|
||||
? 'flex items-start gap-3 text-sm leading-snug'
|
||||
: 'flex items-start gap-3 text-base leading-snug';
|
||||
|
||||
if (circle) {
|
||||
return (
|
||||
<li className={`${wrapper} ${dark ? 'text-gray-300' : 'text-gray-700'}`}>
|
||||
<IconifyIcon icon="solar:check-circle-linear" className={`text-lg ${dark ? 'text-teal-400' : 'text-teal-500'} flex-shrink-0 mt-0.5`} style={{ strokeWidth: 1.5 }} />
|
||||
<span>{children}</span>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li className={`${wrapper} ${dark ? 'text-gray-300' : 'text-gray-700'}`}>
|
||||
<div className={`w-6 h-6 rounded-full ${dark ? 'bg-white/20 border border-white/30 backdrop-blur-sm' : 'bg-teal-500'} flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm`}>
|
||||
<IconifyIcon icon="solar:check-read-linear" className={`text-sm ${dark ? 'text-white' : 'text-white'}`} style={{ strokeWidth: 2 }} />
|
||||
</div>
|
||||
<span>{children}</span>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export function PricingPage() {
|
||||
const pathname = useMemo(() => window.location.pathname, []);
|
||||
const initialAudience: PricingAudience = pathname.includes('virksomhed') ? 'companies' : 'jobseekers';
|
||||
const [audience, setAudience] = useState<PricingAudience>(initialAudience);
|
||||
const [isNavOpen, setIsNavOpen] = useState(false);
|
||||
const [isTipsOpen, setIsTipsOpen] = useState(false);
|
||||
const [isHowOpen, setIsHowOpen] = 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);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement | null;
|
||||
if (!target?.closest('.pricing-how-dropdown')) {
|
||||
setIsHowOpen(false);
|
||||
}
|
||||
if (!target?.closest('.pricing-tips-dropdown')) {
|
||||
setIsTipsOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const isJobseekers = audience === 'jobseekers';
|
||||
|
||||
return (
|
||||
<div className="pricing-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="pricing-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="/home" className="flex items-center gap-2 group outline-none">
|
||||
<Logo nav />
|
||||
<span className="text-xl font-normal tracking-tight text-gray-900 uppercase">ARBEJD</span>
|
||||
</a>
|
||||
|
||||
<div className="pricing-nav-links">
|
||||
<a href="/pricing" className="text-base font-normal text-gray-900 transition-colors outline-none drop-shadow-sm border-b border-gray-900 pb-0.5">Priser</a>
|
||||
<div className="pricing-how-dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="pricing-how-trigger text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm"
|
||||
onClick={() => {
|
||||
setIsHowOpen((current) => !current);
|
||||
setIsTipsOpen(false);
|
||||
}}
|
||||
aria-expanded={isHowOpen}
|
||||
>
|
||||
Sådan virker det
|
||||
<IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isHowOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
<div className={isHowOpen ? 'pricing-how-menu open' : 'pricing-how-menu'}>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>For virksomheder</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>For jobsøgere</a>
|
||||
<a href="/pricing" onClick={() => setIsHowOpen(false)}>Priser</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>FAQ</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>Nyhedsbrev</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pricing-tips-dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="pricing-tips-trigger text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm"
|
||||
onClick={() => {
|
||||
setIsTipsOpen((current) => !current);
|
||||
setIsHowOpen(false);
|
||||
}}
|
||||
aria-expanded={isTipsOpen}
|
||||
>
|
||||
Tips og tricks
|
||||
<IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isTipsOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
<div className={isTipsOpen ? 'pricing-tips-menu open' : 'pricing-tips-menu'}>
|
||||
<a href="/stories" onClick={() => setIsTipsOpen(false)}>Stories</a>
|
||||
<a href="/jobordbogen" onClick={() => setIsTipsOpen(false)}>Jobordbogen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pricing-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="#" 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="pricing-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 ? 'pricing-nav-popup open' : 'pricing-nav-popup'}>
|
||||
<a href="/pricing" onClick={() => setIsNavOpen(false)}>Priser</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: For virksomheder</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: For jobsøgere</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: FAQ</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: Nyhedsbrev</a>
|
||||
<a href="/stories" onClick={() => setIsNavOpen(false)}>Tips og tricks: Stories</a>
|
||||
<a href="/jobordbogen" onClick={() => setIsNavOpen(false)}>Tips og tricks: Jobordbogen</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Log ind</a>
|
||||
<a href="#" className="pricing-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-16 px-6 lg:px-12 max-w-7xl mx-auto flex flex-col items-center text-center">
|
||||
<h1 className="text-5xl md:text-6xl font-medium tracking-tight text-gradient mb-6 leading-tight max-w-4xl drop-shadow-sm">
|
||||
{isJobseekers ? (
|
||||
<>Match med spændende<br />virksomheder</>
|
||||
) : (
|
||||
<>Opret et ubegrænset<br />antal annoncer</>
|
||||
)}
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl text-gray-600 mb-10 max-w-3xl font-normal leading-relaxed drop-shadow-sm">
|
||||
{isJobseekers
|
||||
? 'Lad jobbet finde dig. Det tager to minutter at oprette en profil på Arbejd.com, hvor du får adgang til vores machine learning algoritme, der dagligt matcher dig med de mest relevante stillinger i dit område.'
|
||||
: 'Det er gratis at oprette annoncer på Arbejd.com. Match med de bedste kandidater i Danmark og start samtalen når du er klar.'}
|
||||
</p>
|
||||
|
||||
<div className={`inline-flex p-1.5 bg-white/40 backdrop-blur-xl border border-white/80 rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.03)] relative ${isJobseekers ? 'mb-12' : 'mb-4'}`}>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative z-10 px-8 py-3 text-sm md:text-base font-medium rounded-full transition-all outline-none ${!isJobseekers ? 'text-gray-900 bg-white shadow-sm border border-gray-100' : 'text-gray-500 hover:text-gray-900'}`}
|
||||
onClick={() => setAudience('companies')}
|
||||
>
|
||||
For virksomheder
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative z-10 px-8 py-3 text-sm md:text-base font-medium rounded-full transition-all outline-none ${isJobseekers ? 'text-gray-900 bg-white shadow-sm border border-gray-100' : 'text-gray-500 hover:text-gray-900'}`}
|
||||
onClick={() => setAudience('jobseekers')}
|
||||
>
|
||||
For jobsøgere
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isJobseekers ? (
|
||||
<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">
|
||||
<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>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
{isJobseekers ? (
|
||||
<>
|
||||
<section className="py-12 px-6 lg:px-12 max-w-6xl mx-auto relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch">
|
||||
<div className="bg-gradient-to-br from-white/80 to-white/40 backdrop-blur-3xl border border-white/90 rounded-[2.5rem] p-10 shadow-[0_8px_40px_rgba(0,0,0,0.04)] flex flex-col relative overflow-hidden transition-transform hover:-translate-y-1 duration-300">
|
||||
<div className="mb-6">
|
||||
<span className="inline-block px-3 py-1.5 bg-gray-100/80 border border-gray-200 text-gray-600 text-xs font-medium rounded-lg uppercase tracking-wider mb-4">Jobsøgende</span>
|
||||
<h3 className="text-3xl font-medium text-gray-900 tracking-tight mb-2">Gratis</h3>
|
||||
<div className="flex items-baseline gap-1 mt-4">
|
||||
<span className="text-5xl font-medium text-gray-900 tracking-tight">0 kr</span>
|
||||
<span className="text-lg text-gray-500 font-normal">/måneden</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-10 flex-1 mt-6">
|
||||
<CheckItem>Gratis oprettelse</CheckItem>
|
||||
<CheckItem>Adgang til over 20.000 jobopslag</CheckItem>
|
||||
<CheckItem>Ansøg med ét klik</CheckItem>
|
||||
<CheckItem>Søgefiltre der passer til din profil</CheckItem>
|
||||
<CheckItem>Chat support</CheckItem>
|
||||
<CheckItem>Dashboard med overblik over søgte stillinger, igangværende samtaler med virksomheder og din profil</CheckItem>
|
||||
<CheckItem>Notifikationer med matches</CheckItem>
|
||||
<CheckItem>Øget synlighed – bliv fundet af virksomheder</CheckItem>
|
||||
</ul>
|
||||
<button type="button" className="w-full py-4 rounded-2xl bg-gray-100 hover:bg-gray-200 text-gray-900 font-medium text-lg transition-colors shadow-sm border border-gray-200/50 outline-none mt-auto">Opret Gratis</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 backdrop-blur-3xl border border-gray-700/80 rounded-[2.5rem] p-10 shadow-[0_20px_50px_rgba(0,0,0,0.2)] flex flex-col relative overflow-hidden transition-transform hover:-translate-y-1 duration-300 md:-translate-y-4">
|
||||
<div className="absolute top-0 left-0 w-full h-1.5 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/20 to-cyan-500/10 blur-[60px] rounded-full pointer-events-none" />
|
||||
|
||||
<div className="mb-6 relative z-10">
|
||||
<span className="inline-block px-3 py-1.5 bg-gradient-to-r from-teal-300 to-emerald-300 text-teal-900 text-xs font-medium rounded-lg uppercase tracking-wider mb-4 shadow-[0_0_15px_rgba(45,212,191,0.2)]">Jobsøgende</span>
|
||||
<h3 className="text-3xl font-medium text-white tracking-tight mb-2">Premium</h3>
|
||||
<div className="flex items-baseline gap-1 mt-4">
|
||||
<span className="text-5xl font-medium text-white tracking-tight drop-shadow-md">49 kr</span>
|
||||
<span className="text-lg text-gray-400 font-normal">/måneden</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-10 flex-1 mt-6 relative z-10">
|
||||
<li className="flex items-start gap-3 text-base text-gray-300 leading-snug">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 border border-white/30 backdrop-blur-sm flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm">
|
||||
<IconifyIcon icon="solar:check-read-linear" className="text-sm text-white" style={{ strokeWidth: 2 }} />
|
||||
</div>
|
||||
<span className="text-white font-medium">Alt fra Gratis versionen</span>
|
||||
</li>
|
||||
<CheckItem dark>Upload dit CV - Systemet strukturerer automatisk dine erfaringer, uddannelse og kompetencer</CheckItem>
|
||||
<CheckItem dark>Optimer dit CV - Få intelligente forslag til forbedringer – fra formulering og layout til synliggørelse af dine styrker.</CheckItem>
|
||||
<CheckItem dark>Download et professionelt CV - Ét klik – og du har et klart, overskueligt og arbejdsgiver-klart CV i hånden</CheckItem>
|
||||
<CheckItem dark>Karriereagent - Få personlige anbefalinger til opkvalificering, videreuddannelse og skræddersyede jobveje</CheckItem>
|
||||
<CheckItem dark>Systemet genererer både CV og ansøgning til din jobsøgning – klar til brug og tilpasning.</CheckItem>
|
||||
</ul>
|
||||
<button type="button" className="w-full py-4 rounded-2xl bg-gradient-to-r from-white to-gray-100 text-gray-900 font-medium text-lg hover:from-gray-50 hover:to-white transition-all shadow-[0_4px_20px_rgba(255,255,255,0.15)] outline-none relative z-10 mt-auto hover:-translate-y-0.5">Opret Premium</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Længere forløb</h2>
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto font-normal drop-shadow-sm">Få alle fordelene fra Premium som engangsbetaling og spar penge på den lange bane.</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 hover:-translate-y-1 transition-transform duration-300">
|
||||
<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">
|
||||
<CheckItem small circle>Fuld adgang til alle Premium funktioner</CheckItem>
|
||||
<CheckItem small circle>Download et professionelt CV</CheckItem>
|
||||
<CheckItem small circle>Karriereagent med personlige anbefalinger</CheckItem>
|
||||
<CheckItem small circle>Job simulatoren – træn til din jobsamtale</CheckItem>
|
||||
</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 hover:-translate-y-2 transition-transform duration-300">
|
||||
<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">
|
||||
<CheckItem small dark circle>Fuld adgang til alle Premium funktioner</CheckItem>
|
||||
<CheckItem small dark circle>Download et professionelt CV</CheckItem>
|
||||
<CheckItem small dark circle>Karriereagent med personlige anbefalinger</CheckItem>
|
||||
<CheckItem small dark circle>Job simulatoren – træn til din jobsamtale</CheckItem>
|
||||
<CheckItem small dark circle>Spar 18 kr. i forhold til 30 dage</CheckItem>
|
||||
</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 hover:-translate-y-1 transition-transform duration-300">
|
||||
<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">
|
||||
<CheckItem small circle>Fuld adgang til alle Premium funktioner</CheckItem>
|
||||
<CheckItem small circle>Download et professionelt CV</CheckItem>
|
||||
<CheckItem small circle>Karriereagent med personlige anbefalinger</CheckItem>
|
||||
<CheckItem small circle>Job simulatoren – træn til din jobsamtale</CheckItem>
|
||||
</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 border-t border-white/40 relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">En ny måde at finde jobs på</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-teal-200/50 transition-all group">
|
||||
<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 mb-6 group-hover:scale-110 transition-transform">
|
||||
<IconifyIcon icon="solar:bolt-linear" className="text-2xl text-teal-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Hurtig oprettelse</h3>
|
||||
<p className="text-base text-gray-600 font-normal leading-relaxed">Opret en profil i vores app på ingen tid gennem en intuitiv profil-oprettelse.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-indigo-200/50 transition-all group">
|
||||
<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 mb-6 group-hover:scale-110 transition-transform">
|
||||
<IconifyIcon icon="solar:bolt-circle-linear" className="text-2xl text-indigo-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Ledige stillinger i hele DK</h3>
|
||||
<p className="text-base text-gray-600 font-normal leading-relaxed">Appen giver dig adgang til over 20.000 ledige stillinger i hele Danmark.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-blue-200/50 transition-all group">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-50 to-white border border-blue-100/50 shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<IconifyIcon icon="solar:hand-shake-linear" className="text-2xl text-blue-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">1-1 match</h3>
|
||||
<p className="text-base text-gray-600 font-normal leading-relaxed">Vores algoritme matcher & giver dig forslag baseret på dine jobønsker & profil.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-cyan-200/50 transition-all group">
|
||||
<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 mb-6 group-hover:scale-110 transition-transform">
|
||||
<IconifyIcon icon="solar:pointer-linear" className="text-2xl text-cyan-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Ansøg med et klik</h3>
|
||||
<p className="text-base text-gray-600 font-normal leading-relaxed">Spar tid på CV & lange skriv - med Arbejd.com ansøger du kun med kun ét klik.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-amber-200/50 transition-all group">
|
||||
<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 mb-6 group-hover:scale-110 transition-transform">
|
||||
<IconifyIcon icon="solar:lock-password-linear" className="text-2xl text-amber-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Ingen begrænsning</h3>
|
||||
<p className="text-base text-gray-600 font-normal leading-relaxed">Få direkte adgang til alle virksomheder & ansøg deres ledige stillinger.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-purple-200/50 transition-all group">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-50 to-white border border-purple-100/50 shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<IconifyIcon icon="solar:chat-round-line-linear" className="text-2xl text-purple-600" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Henvendelser</h3>
|
||||
<p className="text-base text-gray-600 font-normal leading-relaxed">Få uopfordrede henvendelser fra virksomheder som matcher din profil.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pb-24 pt-12 px-6 lg:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||
<a href="#" className="flex flex-col items-center text-center p-8 bg-white/40 backdrop-blur-xl border border-white/80 rounded-3xl hover:bg-white/60 transition-colors group outline-none">
|
||||
<div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mb-4 group-hover:bg-teal-50 group-hover:text-teal-600 transition-colors text-gray-700">
|
||||
<IconifyIcon icon="solar:box-minimalistic-linear" className="text-2xl" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-1">Produktet</h3>
|
||||
<p className="text-sm text-gray-500 font-normal">Effektiviser din jobsøgning</p>
|
||||
</a>
|
||||
|
||||
<a href="#" className="flex flex-col items-center text-center p-8 bg-white/40 backdrop-blur-xl border border-white/80 rounded-3xl hover:bg-white/60 transition-colors group outline-none">
|
||||
<div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mb-4 group-hover:bg-indigo-50 group-hover:text-indigo-600 transition-colors text-gray-700">
|
||||
<IconifyIcon icon="solar:question-circle-linear" className="text-2xl" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-1">FAQ</h3>
|
||||
<p className="text-sm text-gray-500 font-normal">Oftest stillede spørgsmål</p>
|
||||
</a>
|
||||
|
||||
<a href="#" className="flex flex-col items-center text-center p-8 bg-white/40 backdrop-blur-xl border border-white/80 rounded-3xl hover:bg-white/60 transition-colors group outline-none">
|
||||
<div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mb-4 group-hover:bg-amber-50 group-hover:text-amber-600 transition-colors text-gray-700">
|
||||
<IconifyIcon icon="solar:letter-linear" className="text-2xl" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-1">Kontakt</h3>
|
||||
<p className="text-sm text-gray-500 font-normal">Start samtalen i dag</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<section className="py-12 px-6 lg:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch">
|
||||
<div className="bg-gradient-to-br from-white/80 to-white/40 backdrop-blur-3xl border border-white/90 rounded-[2.5rem] p-8 shadow-[0_8px_40px_rgba(0,0,0,0.04)] flex flex-col relative overflow-hidden transition-transform hover:-translate-y-1 duration-300">
|
||||
<div className="mb-6">
|
||||
<span className="inline-block px-3 py-1.5 bg-gray-100/80 border border-gray-200 text-gray-600 text-xs font-medium rounded-lg uppercase tracking-wider mb-4">Gratis</span>
|
||||
<h3 className="text-3xl font-medium text-gray-900 tracking-tight mb-4">Standard</h3>
|
||||
<p className="text-base text-gray-600 leading-relaxed min-h-[4.5rem]">Opret annoncer enkeltvist. Du har gratis adgang til alle funktioner og du betaler først 995,- når du vil kontakte ansøgere</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-10 flex-1 mt-2">
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>Gratis annonceoprettelse</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>Ubegrænset antal annoncer</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>Adgang til anonymiserede kandidater og ansøgere</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>Chat support</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>SaaS-løsning til sortering, screening og match</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>SaaS-løsning til afslag- og beskedsystem</span></li>
|
||||
</ul>
|
||||
<div className="mt-auto">
|
||||
<button type="button" className="w-full py-4 rounded-2xl bg-gray-100 hover:bg-gray-200 text-gray-900 font-medium text-lg transition-colors shadow-sm border border-gray-200/50 outline-none">Opret Gratis</button>
|
||||
<p className="text-xs text-center text-gray-500 mt-3">Kræver ikke kreditkort.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 backdrop-blur-3xl border border-gray-700/80 rounded-[2.5rem] p-8 shadow-[0_20px_50px_rgba(0,0,0,0.2)] flex flex-col relative overflow-hidden transition-transform hover:-translate-y-1 duration-300 md:-translate-y-4">
|
||||
<div className="absolute top-0 left-0 w-full h-1.5 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/20 to-cyan-500/10 blur-[60px] rounded-full pointer-events-none" />
|
||||
|
||||
<div className="mb-6 relative z-10">
|
||||
<span className="inline-block px-3 py-1.5 bg-gradient-to-r from-teal-300 to-emerald-300 text-teal-900 text-xs font-medium rounded-lg uppercase tracking-wider mb-4 shadow-[0_0_15px_rgba(45,212,191,0.2)]">DKK 995</span>
|
||||
<h3 className="text-3xl font-medium text-white tracking-tight mb-4">Fuld Adgang</h3>
|
||||
<p className="text-base text-gray-300 leading-relaxed min-h-[4.5rem]">Opret annoncer enkeltvist. Det er gratis, og du betaler først 995,- når du vil kontakte ansøgere</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-10 flex-1 mt-2 relative z-10">
|
||||
<CheckItem dark>Gratis annonceoprettelse</CheckItem>
|
||||
<CheckItem dark>Ubegrænset antal annoncer</CheckItem>
|
||||
<CheckItem dark>Fuld adgang til kandidater og ansøgere</CheckItem>
|
||||
<CheckItem dark>Chat support</CheckItem>
|
||||
<CheckItem dark>SaaS-løsning til sortering, screening og match</CheckItem>
|
||||
<CheckItem dark>SaaS-løsning til afslag- og beskedsystem</CheckItem>
|
||||
</ul>
|
||||
<div className="mt-auto relative z-10">
|
||||
<button type="button" className="w-full py-4 rounded-2xl bg-gradient-to-r from-white to-gray-100 text-gray-900 font-medium text-lg hover:from-gray-50 hover:to-white transition-all shadow-[0_4px_20px_rgba(255,255,255,0.15)] outline-none hover:-translate-y-0.5">Opret Gratis</button>
|
||||
<p className="text-xs text-center text-gray-400 mt-3">Kræver ikke kreditkort.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-white/80 to-white/40 backdrop-blur-3xl border border-white/90 rounded-[2.5rem] p-8 shadow-[0_8px_40px_rgba(0,0,0,0.04)] flex flex-col relative overflow-hidden transition-transform hover:-translate-y-1 duration-300">
|
||||
<div className="mb-6">
|
||||
<span className="inline-block px-3 py-1.5 bg-gray-100/80 border border-gray-200 text-gray-600 text-xs font-medium rounded-lg uppercase tracking-wider mb-4">Tilpasset</span>
|
||||
<h3 className="text-3xl font-medium text-gray-900 tracking-tight mb-4">Enterprise</h3>
|
||||
<p className="text-base text-gray-600 leading-relaxed min-h-[4.5rem]">Få en skræddersyet plan til din virksomhed, vikar- eller rekrutteringsbureau</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-10 flex-1 mt-2">
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>Gratis annonceoprettelse</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>Ubegrænset antal annoncer</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>Adgang til anonymiserede kandidater og ansøgere</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>Chat support</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>Dedikeret assistance</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>SaaS-løsning til sortering, screening og match</span></li>
|
||||
<li className="flex items-start gap-3 text-base text-gray-700 leading-snug"><div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"><IconifyIcon icon="solar:check-read-linear" className="text-sm text-purple-600" style={{ strokeWidth: 2 }} /></div><span>SaaS-løsning til afslag- og beskedsystem</span></li>
|
||||
</ul>
|
||||
<div className="mt-auto">
|
||||
<button type="button" className="w-full py-4 rounded-2xl bg-white hover:bg-gray-50 text-gray-900 font-medium text-lg transition-colors shadow-sm border border-gray-200 outline-none">Kontakt os</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative z-10 mt-12">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Designet til din virksomhed</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-teal-200/50 transition-all group"><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 mb-6 group-hover:scale-110 transition-transform"><IconifyIcon icon="solar:wallet-money-linear" className="text-2xl text-teal-600" style={{ strokeWidth: 1.5 }} /></div><h3 className="text-lg font-medium text-gray-900 mb-2 tracking-tight">Gratis oprettelse</h3><p className="text-base text-gray-600 font-normal leading-relaxed">Hurtig og ubegrænset gratis oprettelse af jobannoncer</p></div>
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-indigo-200/50 transition-all group"><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 mb-6 group-hover:scale-110 transition-transform"><IconifyIcon icon="solar:bolt-linear" className="text-2xl text-indigo-600" style={{ strokeWidth: 1.5 }} /></div><h3 className="text-lg font-medium text-gray-900 mb-2 tracking-tight">Effektivt</h3><p className="text-base text-gray-600 font-normal leading-relaxed">Reducer rekrutteringsudgifter med op til 90%</p></div>
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-blue-200/50 transition-all group"><div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-50 to-white border border-blue-100/50 shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"><IconifyIcon icon="solar:hand-shake-linear" className="text-2xl text-blue-600" style={{ strokeWidth: 1.5 }} /></div><h3 className="text-lg font-medium text-gray-900 mb-2 tracking-tight">1-1 match</h3><p className="text-base text-gray-600 font-normal leading-relaxed">Systematiserer, sorterer og matcher op med dine krav</p></div>
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-cyan-200/50 transition-all group"><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 mb-6 group-hover:scale-110 transition-transform"><IconifyIcon icon="solar:pointer-linear" className="text-2xl text-cyan-600" style={{ strokeWidth: 1.5 }} /></div><h3 className="text-lg font-medium text-gray-900 mb-2 tracking-tight">Beslut med et klik</h3><p className="text-base text-gray-600 font-normal leading-relaxed">Træf beslutningerne hurtigt og effektivt</p></div>
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-amber-200/50 transition-all group"><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 mb-6 group-hover:scale-110 transition-transform"><IconifyIcon icon="solar:lock-unlocked-linear" className="text-2xl text-amber-600" style={{ strokeWidth: 1.5 }} /></div><h3 className="text-lg font-medium text-gray-900 mb-2 tracking-tight">Ingen begrænsninger</h3><p className="text-base text-gray-600 font-normal leading-relaxed">Direkte adgang til ansøgerne og kandidaterne</p></div>
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-purple-200/50 transition-all group"><div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-50 to-white border border-purple-100/50 shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"><IconifyIcon icon="solar:chat-round-line-linear" className="text-2xl text-purple-600" style={{ strokeWidth: 1.5 }} /></div><h3 className="text-lg font-medium text-gray-900 mb-2 tracking-tight">Dialog</h3><p className="text-base text-gray-600 font-normal leading-relaxed">Gå i dialog med kandidaterne med det samme</p></div>
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-emerald-200/50 transition-all group"><div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-emerald-50 to-white border border-emerald-100/50 shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"><IconifyIcon icon="solar:close-circle-linear" className="text-2xl text-emerald-600" style={{ strokeWidth: 1.5 }} /></div><h3 className="text-lg font-medium text-gray-900 mb-2 tracking-tight">Afslå med et klik</h3><p className="text-base text-gray-600 font-normal leading-relaxed">Afslag og samtale invitationer sendes med et enkelt klik</p></div>
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-rose-200/50 transition-all group"><div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-rose-50 to-white border border-rose-100/50 shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"><IconifyIcon icon="solar:wad-of-money-linear" className="text-2xl text-rose-600" style={{ strokeWidth: 1.5 }} /></div><h3 className="text-lg font-medium text-gray-900 mb-2 tracking-tight">Nem betaling</h3><p className="text-base text-gray-600 font-normal leading-relaxed">Betal kun hvis I ønsker adgang til kontaktoplysninger</p></div>
|
||||
<div className="p-8 bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] hover:border-fuchsia-200/50 transition-all group"><div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-fuchsia-50 to-white border border-fuchsia-100/50 shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"><IconifyIcon icon="solar:network-linear" className="text-2xl text-fuchsia-600" style={{ strokeWidth: 1.5 }} /></div><h3 className="text-lg font-medium text-gray-900 mb-2 tracking-tight">Spar tid</h3><p className="text-base text-gray-600 font-normal leading-relaxed">Ingen manuel screeningsproces</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pb-24 pt-12 px-6 lg:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||
<a href="#" className="flex flex-col items-center text-center p-8 bg-white/40 backdrop-blur-xl border border-white/80 rounded-3xl hover:bg-white/60 transition-colors group outline-none">
|
||||
<div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mb-4 group-hover:bg-teal-50 group-hover:text-teal-600 transition-colors text-gray-700">
|
||||
<IconifyIcon icon="solar:box-minimalistic-linear" className="text-2xl" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-1">Produktet</h3>
|
||||
<p className="text-sm text-gray-500 font-normal">Effektiviser din rekruttering</p>
|
||||
</a>
|
||||
|
||||
<a href="#" className="flex flex-col items-center text-center p-8 bg-white/40 backdrop-blur-xl border border-white/80 rounded-3xl hover:bg-white/60 transition-colors group outline-none">
|
||||
<div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mb-4 group-hover:bg-indigo-50 group-hover:text-indigo-600 transition-colors text-gray-700">
|
||||
<IconifyIcon icon="solar:question-circle-linear" className="text-2xl" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-1">FAQ</h3>
|
||||
<p className="text-sm text-gray-500 font-normal">Oftest stillede spørgsmål</p>
|
||||
</a>
|
||||
|
||||
<a href="#" className="flex flex-col items-center text-center p-8 bg-white/40 backdrop-blur-xl border border-white/80 rounded-3xl hover:bg-white/60 transition-colors group outline-none">
|
||||
<div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mb-4 group-hover:bg-amber-50 group-hover:text-amber-600 transition-colors text-gray-700">
|
||||
<IconifyIcon icon="solar:letter-linear" className="text-2xl" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-1">Kontakt</h3>
|
||||
<p className="text-sm text-gray-500 font-normal">Få hjælp til at vælge en løsning</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
216
src/presentation/pricing/pages/pricing.css
Normal file
216
src/presentation/pricing/pages/pricing.css
Normal file
@@ -0,0 +1,216 @@
|
||||
.pricing-react-root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(20, 184, 166, 0.2); border-radius: 20px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 184, 166, 0.4); }
|
||||
|
||||
@keyframes float-slow {
|
||||
0%, 100% { transform: translateY(0) scale(1); }
|
||||
50% { transform: translateY(-15px) scale(1.02); }
|
||||
}
|
||||
|
||||
@keyframes float-medium {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes float-fast {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
|
||||
.animate-float-medium { animation: float-medium 6s ease-in-out infinite; }
|
||||
.animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
|
||||
|
||||
.text-gradient {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.08em;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #0d9488 50%, #4338ca 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.text-gradient-subtle {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.08em;
|
||||
background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.pricing-nav {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.pricing-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.pricing-nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.pricing-tips-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pricing-how-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pricing-tips-trigger {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pricing-how-trigger {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pricing-tips-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.65rem);
|
||||
left: 0;
|
||||
min-width: 190px;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pricing-how-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.65rem);
|
||||
left: 0;
|
||||
min-width: 220px;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pricing-tips-menu.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pricing-how-menu.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pricing-tips-menu a {
|
||||
display: block;
|
||||
border-radius: 0.7rem;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.pricing-how-menu a {
|
||||
display: block;
|
||||
border-radius: 0.7rem;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.pricing-tips-menu a:hover {
|
||||
background: transparent;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.pricing-how-menu a:hover {
|
||||
background: transparent;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.pricing-nav-hamburger {
|
||||
display: none;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.pricing-nav-popup {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
right: 0;
|
||||
width: min(320px, calc(100vw - 2rem));
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.75rem;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.pricing-nav-popup a {
|
||||
text-decoration: none;
|
||||
color: #374151;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.85rem;
|
||||
padding: 0.7rem 0.9rem;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.pricing-nav-popup a:hover {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.pricing-nav-popup-cta {
|
||||
color: #ffffff !important;
|
||||
background: linear-gradient(to right, #111827, #1f2937);
|
||||
border: 1px solid rgba(55, 65, 81, 0.8);
|
||||
}
|
||||
|
||||
.pricing-nav-popup.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 990px) {
|
||||
.pricing-nav-links,
|
||||
.pricing-nav-actions {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.pricing-nav-hamburger {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
73
src/presentation/shared/components/SiteFooter.tsx
Normal file
73
src/presentation/shared/components/SiteFooter.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
export function SiteFooter() {
|
||||
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)]">
|
||||
<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="/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">
|
||||
<defs>
|
||||
<linearGradient id="siteFooterLogoBg" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#1A9A75" />
|
||||
<stop offset="100%" stopColor="#3167C9" />
|
||||
</linearGradient>
|
||||
<linearGradient id="siteFooterLogoFg" 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(#siteFooterLogoBg)" />
|
||||
<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(#siteFooterLogoFg)" />
|
||||
</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="/pricing" 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="/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 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>
|
||||
);
|
||||
}
|
||||
273
src/presentation/stories/pages/StoriesPage.tsx
Normal file
273
src/presentation/stories/pages/StoriesPage.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
import { useEffect, useState, type CSSProperties } from 'react';
|
||||
import './stories.css';
|
||||
import { SiteFooter } from '../../shared/components/SiteFooter';
|
||||
|
||||
interface IconifyIconProps {
|
||||
className?: string;
|
||||
icon: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
function IconifyIcon({ className, icon, style }: IconifyIconProps) {
|
||||
return <iconify-icon className={className} icon={icon} style={style} />;
|
||||
}
|
||||
|
||||
function Logo({ nav = true }: { nav?: boolean }) {
|
||||
const idPrefix = nav ? 'storiesNav' : 'storiesFooter';
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 100 100" className={nav ? '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' : 'w-8 h-8 rounded-lg shadow-sm transition-transform group-hover:scale-105'}>
|
||||
<defs>
|
||||
<linearGradient id={`${idPrefix}Bg`} x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#1A9A75" />
|
||||
<stop offset="100%" stopColor="#3167C9" />
|
||||
</linearGradient>
|
||||
<linearGradient id={`${idPrefix}Fg`} 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(#${idPrefix}Bg)`} />
|
||||
<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(#${idPrefix}Fg)`} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const seriesCards = [
|
||||
{ image: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=600&q=80', audience: 'For jobansøgere', episodes: '2 Episoder', tone: 'teal' },
|
||||
{ image: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=600&q=80', audience: 'For jobansøgere', episodes: '8 Episoder', tone: 'teal' },
|
||||
{ image: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=600&q=80', audience: 'For jobansøgere', episodes: '4 Episoder', tone: 'teal' },
|
||||
{ image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&q=80', audience: 'For virksomheder', episodes: '4 Episoder', tone: 'amber' },
|
||||
{ image: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?w=600&q=80', audience: 'For virksomheder', episodes: '3 Episoder', tone: 'amber' },
|
||||
{ image: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?w=600&q=80', audience: 'For virksomheder', episodes: '3 Episoder', tone: 'amber' },
|
||||
{ image: 'https://images.unsplash.com/photo-1543269664-56d74c658cce?w=600&q=80', audience: 'For virksomheder', episodes: '5 Episoder', tone: 'amber' },
|
||||
{ image: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&q=80', audience: 'For virksomheder', episodes: '3 Episoder', tone: 'amber' },
|
||||
] as const;
|
||||
|
||||
export function StoriesPage() {
|
||||
const [isNavOpen, setIsNavOpen] = useState(false);
|
||||
const [isTipsOpen, setIsTipsOpen] = useState(false);
|
||||
const [isHowOpen, setIsHowOpen] = 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);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement | null;
|
||||
if (!target?.closest('.stories-how-dropdown')) {
|
||||
setIsHowOpen(false);
|
||||
}
|
||||
if (!target?.closest('.stories-tips-dropdown')) {
|
||||
setIsTipsOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="stories-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="stories-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="/home" className="flex items-center gap-2 group outline-none">
|
||||
<Logo nav />
|
||||
<span className="text-xl font-normal tracking-tight text-gray-900 uppercase">ARBEJD</span>
|
||||
</a>
|
||||
|
||||
<div className="stories-nav-links">
|
||||
<a href="/pricing" className="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Priser</a>
|
||||
<div className="stories-how-dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="stories-how-trigger text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm"
|
||||
onClick={() => {
|
||||
setIsHowOpen((current) => !current);
|
||||
setIsTipsOpen(false);
|
||||
}}
|
||||
aria-expanded={isHowOpen}
|
||||
>
|
||||
Sådan virker det
|
||||
<IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isHowOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
<div className={isHowOpen ? 'stories-how-menu open' : 'stories-how-menu'}>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>For virksomheder</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>For jobsøgere</a>
|
||||
<a href="/pricing" onClick={() => setIsHowOpen(false)}>Priser</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>FAQ</a>
|
||||
<a href="#" onClick={() => setIsHowOpen(false)}>Nyhedsbrev</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stories-tips-dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="stories-tips-trigger text-base font-normal text-gray-900 transition-colors outline-none drop-shadow-sm border-b-2 border-teal-500 pb-0.5"
|
||||
onClick={() => {
|
||||
setIsTipsOpen((current) => !current);
|
||||
setIsHowOpen(false);
|
||||
}}
|
||||
aria-expanded={isTipsOpen}
|
||||
>
|
||||
Tips og tricks
|
||||
<IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isTipsOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
<div className={isTipsOpen ? 'stories-tips-menu open' : 'stories-tips-menu'}>
|
||||
<a href="/stories" className="active" onClick={() => setIsTipsOpen(false)}>Stories</a>
|
||||
<a href="/jobordbogen" onClick={() => setIsTipsOpen(false)}>Jobordbogen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stories-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="#" 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="stories-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 ? 'stories-nav-popup open' : 'stories-nav-popup'}>
|
||||
<a href="/pricing" onClick={() => setIsNavOpen(false)}>Priser</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: For virksomheder</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: For jobsøgere</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: FAQ</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: Nyhedsbrev</a>
|
||||
<a href="/stories" onClick={() => setIsNavOpen(false)}>Tips og tricks: Stories</a>
|
||||
<a href="/jobordbogen" onClick={() => setIsNavOpen(false)}>Tips og tricks: Jobordbogen</a>
|
||||
<a href="#" onClick={() => setIsNavOpen(false)}>Log ind</a>
|
||||
<a href="#" className="stories-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-20 px-6 lg:px-12 max-w-7xl mx-auto flex flex-col items-center text-center min-h-[500px]">
|
||||
<div className="hidden md:flex absolute top-20 left-[10%] px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_20px_rgba(0,0,0,0.04)] text-sm text-gray-800 font-medium rotate-[-3deg] animate-float-slow z-20 items-center gap-2"><span className="w-2 h-2 rounded-full bg-teal-400" />Byggebranchen</div>
|
||||
<div className="hidden md:flex absolute top-40 right-[10%] lg:right-[15%] px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_20px_rgba(0,0,0,0.04)] text-sm text-gray-800 font-medium rotate-[4deg] animate-float-medium z-20 items-center gap-2"><span className="w-2 h-2 rounded-full bg-indigo-400" />Milennials</div>
|
||||
<div className="hidden lg:flex absolute top-32 right-[32%] px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_20px_rgba(0,0,0,0.04)] text-sm text-gray-800 font-medium rotate-[-6deg] animate-float-slow z-20 items-center gap-2"><span className="w-2 h-2 rounded-full bg-amber-400" />Ledelse</div>
|
||||
<div className="hidden md:flex absolute bottom-12 left-[18%] px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_20px_rgba(0,0,0,0.04)] text-sm text-gray-800 font-medium rotate-[5deg] animate-float-fast z-20 items-center gap-2"><span className="w-2 h-2 rounded-full bg-rose-400" />IT & Tech</div>
|
||||
<div className="hidden lg:flex absolute top-52 left-[25%] px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_20px_rgba(0,0,0,0.04)] text-sm text-gray-800 font-medium rotate-[8deg] animate-float-fast z-20 items-center gap-2"><span className="w-2 h-2 rounded-full bg-blue-400" />Iværksætteri</div>
|
||||
<div className="hidden md:flex absolute bottom-24 right-[12%] px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_20px_rgba(0,0,0,0.04)] text-sm text-gray-800 font-medium rotate-[-2deg] animate-float-medium z-20 items-center gap-2"><span className="w-2 h-2 rounded-full bg-emerald-400" />Gen Z</div>
|
||||
<div className="absolute top-1/3 left-[5%] w-14 h-14 rounded-2xl bg-gradient-to-br from-white/80 to-white/30 backdrop-blur-xl border border-white shadow-xl flex items-center justify-center animate-float-fast z-20 rotate-[-10deg]"><IconifyIcon icon="solar:chat-round-dots-linear" className="text-3xl text-blue-500" style={{ strokeWidth: 1.5 }} /></div>
|
||||
<div className="absolute bottom-16 right-[5%] w-14 h-14 rounded-2xl bg-gradient-to-br from-white/80 to-white/30 backdrop-blur-xl border border-white shadow-xl flex items-center justify-center animate-float-medium z-20 rotate-[15deg]"><IconifyIcon icon="solar:bolt-linear" className="text-3xl text-amber-500" style={{ strokeWidth: 1.5 }} /></div>
|
||||
<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/80 to-white/40 backdrop-blur-xl border border-white/80 text-gray-800 text-xs font-medium uppercase tracking-wider mb-8 shadow-sm relative z-30">
|
||||
<IconifyIcon icon="solar:play-linear" className="text-base text-teal-600" style={{ strokeWidth: 1.5 }} />
|
||||
Nye korte og inspirerende videoer hver uge
|
||||
</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 relative z-30">Succeshistorier</h1>
|
||||
<p className="text-xl md:text-2xl text-gray-600 max-w-3xl font-normal leading-relaxed drop-shadow-sm relative z-30">
|
||||
Få klar besked fra mennesker der har stået i samme situation som dig. I snack-sized videoer guider vi dig i jagten på dit drømmejob eller din virksomheds talentfulde nye profil.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="max-w-6xl mx-auto px-6 lg:px-12 relative z-20 pb-24 border-b border-white/40">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="group relative aspect-video rounded-3xl overflow-hidden shadow-[0_15px_40px_rgba(0,0,0,0.12)] cursor-pointer">
|
||||
<img src="https://images.unsplash.com/photo-1556761175-5973dc0f32d7?w=1000&q=80" alt="Man behind title" className="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/90 via-gray-900/40 to-transparent flex flex-col justify-end p-8">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<button type="button" className="w-16 h-16 rounded-full bg-white/20 backdrop-blur-md border border-white/40 shadow-2xl flex items-center justify-center text-white group-hover:bg-white/40 group-hover:scale-110 transition-all outline-none">
|
||||
<IconifyIcon icon="solar:play-linear" className="text-3xl ml-1" style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-medium text-white tracking-tight leading-snug drop-shadow-lg max-w-md relative z-10">"Which things about a resume can catch your attention?"</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group relative aspect-video rounded-3xl overflow-hidden shadow-[0_15px_40px_rgba(0,0,0,0.12)] cursor-pointer">
|
||||
<img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=1000&q=80" alt="Woman behind title" className="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/90 via-gray-900/40 to-transparent flex flex-col justify-end p-8">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<button type="button" className="w-16 h-16 rounded-full bg-white/20 backdrop-blur-md border border-white/40 shadow-2xl flex items-center justify-center text-white group-hover:bg-white/40 group-hover:scale-110 transition-all outline-none">
|
||||
<IconifyIcon icon="solar:play-linear" className="text-3xl ml-1" style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-medium text-white tracking-tight leading-snug drop-shadow-lg max-w-md relative z-10">"What do you wish to see in a motivated application?"</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pt-24 pb-12 px-6 lg:px-12 max-w-7xl mx-auto text-center relative z-10">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-50 to-amber-100/50 border border-amber-200/50 shadow-sm mb-6">
|
||||
<IconifyIcon icon="solar:bolt-linear" className="text-3xl text-amber-500" style={{ strokeWidth: 1.5 }} />
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Autentiske råd</h2>
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto font-normal drop-shadow-sm">
|
||||
Snack-sized videoer direkte fra inspirerende arbejdsgivere og jobsøgende Danmark over
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="pb-32 px-6 lg:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{seriesCards.map((card, index) => (
|
||||
<div key={`${card.image}-${index}`} 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 flex flex-col">
|
||||
<div className="aspect-video bg-gray-100 relative overflow-hidden">
|
||||
<img src={card.image} alt="Video cover" className="w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent flex items-center justify-center">
|
||||
<button type="button" className="w-12 h-12 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-xl ml-1" style={{ strokeWidth: 1.5 }} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 relative flex flex-col flex-1">
|
||||
<div className="mb-3">
|
||||
<span className={`px-2.5 py-1 text-[10px] font-medium rounded-full uppercase tracking-widest border ${card.tone === 'teal' ? 'text-teal-700 bg-teal-100/80 border-teal-200/50' : 'text-amber-700 bg-amber-100/80 border-amber-200/50'}`}>Helt ny serie</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-gray-900 tracking-tight mb-6">The motivated application</h3>
|
||||
<div className="mt-auto space-y-3">
|
||||
<div className="flex items-center gap-3 text-sm text-gray-600 font-normal">
|
||||
<IconifyIcon icon="solar:magnifer-linear" className="text-lg text-indigo-500" style={{ strokeWidth: 1.5 }} />
|
||||
{card.audience}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-600 font-normal">
|
||||
<IconifyIcon icon="solar:clapperboard-play-linear" className="text-lg text-cyan-500" style={{ strokeWidth: 1.5 }} />
|
||||
{card.episodes}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
209
src/presentation/stories/pages/stories.css
Normal file
209
src/presentation/stories/pages/stories.css
Normal file
@@ -0,0 +1,209 @@
|
||||
.stories-react-root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(20, 184, 166, 0.2); border-radius: 20px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 184, 166, 0.4); }
|
||||
|
||||
@keyframes float-slow {
|
||||
0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
|
||||
50% { transform: translateY(-15px) scale(1.02) rotate(1deg); }
|
||||
}
|
||||
|
||||
@keyframes float-medium {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-10px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
@keyframes float-fast {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
|
||||
.animate-float-medium { animation: float-medium 6s ease-in-out infinite; }
|
||||
.animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
|
||||
|
||||
.text-gradient {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.08em;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #0d9488 50%, #4338ca 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.text-gradient-subtle {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.08em;
|
||||
background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.stories-nav-links,
|
||||
.stories-nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stories-nav-links { gap: 2rem; }
|
||||
.stories-nav-actions { gap: 1rem; }
|
||||
|
||||
.stories-tips-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stories-how-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stories-tips-trigger {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stories-how-trigger {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stories-tips-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.65rem);
|
||||
left: 0;
|
||||
min-width: 190px;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stories-how-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.65rem);
|
||||
left: 0;
|
||||
min-width: 220px;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stories-tips-menu.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stories-how-menu.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stories-tips-menu a {
|
||||
display: block;
|
||||
border-radius: 0.7rem;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.stories-how-menu a {
|
||||
display: block;
|
||||
border-radius: 0.7rem;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.stories-tips-menu a:hover,
|
||||
.stories-tips-menu a.active {
|
||||
background: transparent;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.stories-how-menu a:hover {
|
||||
background: transparent;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.stories-nav-hamburger {
|
||||
display: none;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.stories-nav-popup {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
right: 0;
|
||||
width: min(320px, calc(100vw - 2rem));
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.75rem;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.stories-nav-popup a {
|
||||
text-decoration: none;
|
||||
color: #374151;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.85rem;
|
||||
padding: 0.7rem 0.9rem;
|
||||
}
|
||||
|
||||
.stories-nav-popup a:hover {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.stories-nav-popup-cta {
|
||||
color: #ffffff !important;
|
||||
background: linear-gradient(to right, #111827, #1f2937);
|
||||
border: 1px solid rgba(55, 65, 81, 0.8);
|
||||
}
|
||||
|
||||
.stories-nav-popup.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 990px) {
|
||||
.stories-nav-links,
|
||||
.stories-nav-actions {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.stories-nav-hamburger {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user