Exodai/Arbejd.com-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial React project

Browse Source
This commit is contained in:
Johan
2026-03-14 20:19:22 +01:00
parent 4803e966b5
commit efa11c1fc6
12 changed files with 372 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/assets/index-B4NkXYHm.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

18
dist/assets/index-BVCTZizG.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-BelhbTgc.css vendored
View File

File diff suppressed because one or more lines are too long

18
dist/assets/index-DeWQcLLZ.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@@ -7,8 +7,8 @@
<title>arbejd-react</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script type="module" crossorigin src="/assets/index-BVCTZizG.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BelhbTgc.css">
<script type="module" crossorigin src="/assets/index-DeWQcLLZ.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B4NkXYHm.css">
</head>
<body>
<div id="root"></div>

2
node_modules/.tmp/tsconfig.app.tsbuildinfo generated vendored
View File

File diff suppressed because one or more lines are too long

6
src/App.tsx
View File

@@ -18,6 +18,7 @@ import { NewsletterPage } from './presentation/newsletter/pages/NewsletterPage';
import { ForVirksomhederPage } from './presentation/companies/pages/ForVirksomhederPage';
import { JobSearchersPage } from './presentation/jobseekers/pages/JobSearchersPage';
import { ContactPage } from './presentation/contact/pages/ContactPage';
import { FaqPage } from './presentation/faq/pages/FaqPage';
import {
SimulatorPage,
type SimulatorEvaluationSelection,
@@ -41,6 +42,7 @@ function App() {
const isCompaniesRoute = useMemo(() => window.location.pathname === '/for-virksomheder' || window.location.pathname === '/virksomheder', []);
const isJobseekersRoute = useMemo(() => window.location.pathname === '/for-jobsogere' || window.location.pathname === '/jobsearchers', []);
const isContactRoute = useMemo(() => window.location.pathname === '/kontakt' || window.location.pathname === '/contact', []);
const isFaqRoute = useMemo(() => window.location.pathname === '/faq', []);
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')), []);
@@ -131,6 +133,10 @@ function App() {
return <ContactPage />;
}
if (isFaqRoute) {
return <FaqPage />;
}
if (isJobordbogenEntryRoute) {
return <JobordbogenEntryPage />;
}

303
src/presentation/faq/pages/FaqPage.tsx Normal file
View File

@@ -0,0 +1,303 @@
import { useMemo, useState, type CSSProperties } from 'react';
import './faq.css';
import { SiteFooter } from '../../shared/components/SiteFooter';
import { SiteNavbar } from '../../shared/components/SiteNavbar';
interface IconifyIconProps {
className?: string;
icon: string;
style?: CSSProperties;
}
function IconifyIcon({ className, icon, style }: IconifyIconProps) {
return <iconify-icon className={className} icon={icon} style={style} />;
}
type FaqCategory = 'jobseekers' | 'companies' | 'account' | 'payment';
interface FaqItem {
answer: string;
question: string;
}
interface FaqSection {
description: string;
icon: string;
items: FaqItem[];
label: string;
title: string;
}
const faqSections: Record<FaqCategory, FaqSection> = {
jobseekers: {
label: 'For jobsøgere',
title: 'For jobsøgere',
icon: 'solar:user-search-linear',
description:
'Vi har gjort det enkelt at komme i gang med din jobsøgning. Opret en profil, bliv matchet med relevante virksomheder, og ansøg med ét klik.',
items: [
{
question: 'Hvad er fordelene ved at oprette en profil?',
answer:
'Når du opretter en profil, bliver du synlig for virksomheder, der leder efter kandidater med netop dine kompetencer. Du får også personlige jobforslag og et samlet overblik over din jobsøgning.',
},
{
question: 'Hvordan søger jeg job med ét klik?',
answer:
'Når din profil er sat op, kan du ansøge direkte på relevante stillinger med få klik. Systemet genbruger dine oplysninger, så du kan søge hurtigere.',
},
{
question: 'Hvordan bliver jeg matchet med de rette job?',
answer:
'Vores matching tager udgangspunkt i din profil, erfaring, præferencer og de krav, virksomhederne har i deres opslag. Jo mere komplet din profil er, desto bedre bliver matchene.',
},
{
question: 'Hvordan fungerer priserne for jobsøgere?',
answer:
'Du kan starte gratis og opgradere, når du ønsker adgang til flere funktioner. På prissiden kan du vælge mellem forskellige pakker afhængigt af dit behov.',
},
{
question: 'Hvilke abonnementsmuligheder har I?',
answer:
'Vi tilbyder flere forløb, så du kan vælge den periode, der passer bedst til din jobsøgning. Alle premium pakker giver adgang til de avancerede værktøjer.',
},
{
question: 'Hvordan fungerer notifikationer?',
answer:
'Du modtager notifikationer, når der er nye job, som matcher din profil, eller når der sker opdateringer på dine ansøgninger.',
},
{
question: 'Hvad er Arbejd.com Karriere Agent?',
answer:
'Karriere Agenten hjælper dig med anbefalinger til din profil og peger på muligheder, der kan øge dine chancer for at komme i samtale.',
},
{
question: 'Hvordan kontakter jeg support?',
answer:
'Du kan kontakte os via kontaktsiden, hvis du har spørgsmål til din profil, abonnement eller brug af platformen.',
},
],
},
companies: {
label: 'For virksomheder',
title: 'For virksomheder',
icon: 'solar:buildings-2-linear',
description:
'Arbejd.com giver virksomheder adgang til effektiv rekruttering med ubegrænset oprettelse af jobannoncer og mulighed for at matche med relevante kandidater.',
items: [
{
question: 'Hvordan opretter man en jobannonce?',
answer:
'Du kan oprette jobannoncer direkte på platformen gennem et enkelt flow. Når annoncen er aktiv, bliver den synlig for relevante kandidater.',
},
{
question: 'Hvordan fungerer betalingen?',
answer:
'Det er gratis at oprette annoncer. Betaling sker først, når du ønsker adgang til kontaktoplysninger på ansøgere og kandidater.',
},
{
question: 'Er der ingen begrænsning på antal jobannoncer?',
answer:
'Nej. Du kan oprette så mange jobannoncer, du har behov for, uden ekstra oprettelsesomkostning.',
},
{
question: 'Hvordan matcher vi med relevante kandidater?',
answer:
'Systemet bruger kriterier fra jobannoncen og kandidatprofiler til at foreslå de mest relevante matches, så du hurtigere kan finde de rigtige personer.',
},
{
question: 'Hvordan kontakter vi kandidater?',
answer:
'Når du har valgt de kandidater, du vil gå videre med, får du adgang til kontaktoplysninger og kan starte dialogen direkte.',
},
{
question: 'Tilbyder I support til virksomheder?',
answer:
'Ja. Vi hjælper med onboarding, spørgsmål til platformen og løbende optimering af jeres rekrutteringsflow.',
},
],
},
account: {
label: 'Brugerprofil og login',
title: 'Brugerprofil og login',
icon: 'solar:login-3-linear',
description:
'Her finder du svar på de mest almindelige spørgsmål om konto, login, profiloprettelse og sikkerhed.',
items: [
{
question: 'Hvordan opretter jeg en brugerprofil?',
answer:
'Du opretter en profil ved at vælge “Opret dig” og udfylde dine grundoplysninger. Herefter kan du færdiggøre din profil og begynde at bruge platformen.',
},
{
question: 'Hvad gør jeg, hvis jeg har glemt mit password?',
answer:
'Brug “Glemt password” på login-siden. Du modtager en e-mail med vejledning til at nulstille dit kodeord.',
},
{
question: 'Hvordan redigerer jeg min profil?',
answer:
'Når du er logget ind, kan du opdatere profiloplysninger, erfaring og præferencer løbende i dine profilindstillinger.',
},
{
question: 'Kan jeg have flere profiler?',
answer:
'Vi anbefaler én profil pr. bruger for at sikre den mest præcise matching og den bedste oplevelse på platformen.',
},
{
question: 'Hvordan sikrer I mine data?',
answer:
'Vi arbejder med tekniske og organisatoriske sikkerhedstiltag, så dine data håndteres ansvarligt og i overensstemmelse med gældende regler.',
},
],
},
payment: {
label: 'Abonnement og betaling',
title: 'Abonnement og betaling',
icon: 'solar:wallet-money-linear',
description:
'Få overblik over abonnementstyper, opgradering, betaling og fakturering på Arbejd.com.',
items: [
{
question: 'Hvilke abonnementer tilbyder I?',
answer:
'Vi tilbyder flere pakker, så både jobsøgere og virksomheder kan vælge en løsning, der passer til deres behov og tidsramme.',
},
{
question: 'Kan jeg starte gratis?',
answer:
'Ja, du kan komme i gang gratis. Du kan opgradere senere, hvis du ønsker adgang til premium funktioner.',
},
{
question: 'Hvordan opgraderer jeg mit abonnement?',
answer:
'Du kan opgradere direkte fra platformen ved at vælge den ønskede plan. Ændringen træder i kraft med det samme.',
},
{
question: 'Hvordan fungerer betaling for virksomheder?',
answer:
'Virksomheder betaler først, når de ønsker adgang til kontaktoplysninger på relevante kandidater.',
},
{
question: 'Kan jeg opsige mit abonnement?',
answer:
'Ja, abonnement kan opsiges fra dine kontoindstillinger. Eventuelle ændringer følger den valgte planperiode.',
},
],
},
};
const categoryOrder: FaqCategory[] = ['jobseekers', 'companies', 'account', 'payment'];
function initialCategoryFromHash(): FaqCategory {
const hash = window.location.hash.toLowerCase();
if (hash.includes('for-jobs-gere') || hash.includes('for-jobsogere')) return 'jobseekers';
if (hash.includes('for-virksomheder')) return 'companies';
if (hash.includes('brugerprofil')) return 'account';
if (hash.includes('betaling') || hash.includes('abonnement')) return 'payment';
return 'jobseekers';
}
export function FaqPage() {
const [activeCategory, setActiveCategory] = useState<FaqCategory>(initialCategoryFromHash);
const [openItem, setOpenItem] = useState<number>(0);
const activeSection = useMemo(() => faqSections[activeCategory], [activeCategory]);
return (
<div className="faq-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 faq-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" />
<SiteNavbar />
<main className="flex-1 relative z-10 pt-16">
<section className="pt-24 pb-10 px-6 lg:px-12 max-w-7xl mx-auto text-center">
<h1 className="text-4xl md:text-6xl font-medium tracking-tight text-gradient-subtle mb-5">
FAQ
</h1>
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
Få svar på de mest stillede spørgsmål om Arbejd.com for jobsøgere, virksomheder, profil/login og betaling.
</p>
</section>
<section className="pb-24 px-6 lg:px-12 max-w-7xl mx-auto w-full">
<div className="flex justify-center mb-10">
<div className="inline-flex p-1.5 bg-white/45 backdrop-blur-xl border border-white/80 rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.03)] flex-wrap gap-1">
{categoryOrder.map((category) => {
const isActive = activeCategory === category;
return (
<button
key={category}
type="button"
className={`px-4 md:px-6 py-2.5 text-sm md:text-base font-medium rounded-full transition-all outline-none ${isActive ? 'text-gray-900 bg-white shadow-sm border border-gray-100' : 'text-gray-500 hover:text-gray-900'}`}
onClick={() => {
setActiveCategory(category);
setOpenItem(0);
}}
>
{faqSections[category].label}
</button>
);
})}
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-8">
<div className="rounded-[2.2rem] p-7 md:p-9 bg-gradient-to-br from-white/70 to-white/25 border border-white/80 backdrop-blur-2xl shadow-[0_12px_40px_rgba(0,0,0,0.05)] h-fit">
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-teal-50 to-white border border-teal-100/60 shadow-sm flex items-center justify-center mb-5">
<IconifyIcon icon={activeSection.icon} className="text-2xl text-teal-600" style={{ strokeWidth: 1.5 }} />
</div>
<h2 className="text-2xl md:text-3xl font-medium text-gray-900 tracking-tight mb-4">{activeSection.title}</h2>
<p className="text-base md:text-lg text-gray-600 leading-relaxed">{activeSection.description}</p>
</div>
<div className="rounded-[2.2rem] p-4 md:p-5 bg-gradient-to-br from-white/75 to-white/35 border border-white/80 backdrop-blur-2xl shadow-[0_12px_40px_rgba(0,0,0,0.05)]">
<div className="space-y-3">
{activeSection.items.map((item, index) => {
const isOpen = openItem === index;
return (
<article key={item.question} className="rounded-2xl border border-white/90 bg-white/70 shadow-sm overflow-hidden">
<button
type="button"
className="w-full px-5 py-4 text-left flex items-center justify-between gap-4"
onClick={() => setOpenItem(isOpen ? -1 : index)}
>
<span className="text-base md:text-lg font-medium text-gray-900 leading-snug">{item.question}</span>
<IconifyIcon
icon={isOpen ? 'solar:minus-circle-linear' : 'solar:add-circle-linear'}
className={`text-2xl flex-shrink-0 transition-transform ${isOpen ? 'text-teal-600 rotate-180' : 'text-gray-500'}`}
style={{ strokeWidth: 1.5 }}
/>
</button>
<div className={`grid transition-all duration-300 ${isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'}`}>
<div className="overflow-hidden">
<p className="px-5 pb-5 text-sm md:text-base text-gray-600 leading-relaxed">{item.answer}</p>
</div>
</div>
</article>
);
})}
</div>
</div>
</div>
<div className="mt-10 rounded-[2rem] p-6 md:p-8 bg-gradient-to-br from-teal-400/15 via-indigo-400/10 to-cyan-400/15 border border-white/70 backdrop-blur-xl shadow-[0_10px_30px_rgba(0,0,0,0.04)] flex flex-col md:flex-row md:items-center md:justify-between gap-5">
<div>
<h3 className="text-xl md:text-2xl font-medium text-gray-900 tracking-tight mb-2">Har du stadig spørgsmål?</h3>
<p className="text-base text-gray-600">Hvis du ikke fandt det, du søgte, kan du kontakte os direkte.</p>
</div>
<a href="/kontakt" className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-2xl bg-gray-900 text-white border border-gray-800 hover:bg-gray-800 transition-all shadow-[0_8px_20px_rgba(17,24,39,0.2)]">
Kontakt os
<IconifyIcon icon="solar:arrow-right-linear" className="text-lg" style={{ strokeWidth: 1.5 }} />
</a>
</div>
</section>
</main>
<SiteFooter />
</div>
);
}

18
src/presentation/faq/pages/faq.css Normal file
View File

@@ -0,0 +1,18 @@
.faq-react-root {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
.faq-scrollbar::-webkit-scrollbar { width: 6px; }
.faq-scrollbar::-webkit-scrollbar-track { background: transparent; }
.faq-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(20, 184, 166, 0.2); border-radius: 20px; }
.faq-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 184, 166, 0.4); }
.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;
}

14
src/presentation/home/pages/HomePage.tsx
View File

@@ -91,9 +91,13 @@ export function HomePage() {
</h1>
<p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-2xl font-normal leading-relaxed drop-shadow-sm">
CV, ansøgninger, jobmatch og interviewtræning – samlet ét sted med din personlige AI-assistent.
Organiser hele din jobsøgning med din egen personlige AI-assistent. Få hjælp til CV, ansøgninger, jobmatch og interviewtræning – samlet ét sted.
</p>
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-white/60 to-white/30 backdrop-blur-xl border border-white/80 text-teal-800 text-sm font-medium mb-8 shadow-[0_4px_20px_rgba(20,184,166,0.1)]">
Kom i gang nu – dit næste job venter
</div>
<a href="/for-jobsogere" className="group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white rounded-full font-normal text-lg overflow-hidden shadow-[0_8px_25px_rgba(17,24,39,0.25)] hover:shadow-[0_12px_35px_rgba(17,24,39,0.35)] transition-all outline-none border border-gray-700 hover:-translate-y-0.5">
<span className="relative z-10">Udforsk Arbejd.com</span>
<IconifyIcon icon="solar:arrow-right-linear" className="text-xl group-hover:translate-x-1 transition-transform relative z-10" style={{ strokeWidth: 1.5 }} />
@@ -675,8 +679,8 @@ export function HomePage() {
</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 flex items-center gap-3">
<span className="text-5xl font-medium text-white tracking-tight drop-shadow-md">129 kr</span>
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-white/15 text-teal-200 border border-white/20">1,43 kr/dag</span>
<span className="text-5xl font-medium text-white tracking-tight drop-shadow-md">99 kr</span>
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-white/15 text-teal-200 border border-white/20">1,10 kr/dag</span>
</div>
<ul className="space-y-4 mb-8 flex-1 relative z-10">
@@ -773,9 +777,7 @@ export function HomePage() {
<div className="relative z-10 max-w-3xl mx-auto flex flex-col items-center">
<IconifyIcon icon="solar:rocket-linear" className="text-5xl text-teal-600 mb-6 drop-shadow-sm" style={{ strokeWidth: 1.5 }} />
<h2 className="text-3xl md:text-5xl font-medium tracking-tight text-gradient-subtle mb-6 leading-tight drop-shadow-sm">
Klar til at tage styringen
<br />
over din karriere?
Klar til at tage styringen over din jobsøgning?
</h2>
<p className="text-xl text-gray-700 mb-10 font-normal leading-relaxed drop-shadow-sm">
Lad ikke de bedste muligheder gå til andre. Tilslut dig tusindvis af ambitiøse jobsøgere, der allerede bruger fremtidens værktøjer på Arbejd.com. Din næste store chance venter.

20
src/presentation/jobseekers/pages/JobSearchersPage.tsx
View File

@@ -9,7 +9,6 @@ import cvMacImage from '../../../assets/cv-mac.png';
import jobAnsogningIphoneImage from '../../../assets/jobansogning-iphone.png';
import jobSearchIphoneImage from '../../../assets/jobsearch-iphone.png';
import jobSearchMacImage from '../../../assets/jobsearch-mac.png';
import oneClickIphoneImage from '../../../assets/one-click-iphone.png';
import oneClickMacImage from '../../../assets/once-click-mac.png';
import simulatorIphoneImage from '../../../assets/simulatior-iphone.png';
import simulatorMacImage from '../../../assets/simulator-mac.png';
@@ -107,16 +106,16 @@ type FeatureSection = {
const featureSections: FeatureSection[] = [
{
title: 'Job Search',
title: 'Jobsøgning',
description:
'Appen viser de stillinger, der matcher dig bedst, baseret på dit CV, dine kompetencer, ønsket geografi, arbejdstid, branche og de filtre, du selv vælger. Resultaterne bliver løbende forbedret, når du interagerer med opslag og opdaterer dine præferencer.',
'Find job, der matcher din profil. Arbejd.com viser relevante stillinger baseret på dit CV, dine kompetencer, ønsket geografi, branche og de præferencer, du selv vælger. Jo mere du bruger platformen og opdaterer din profil, jo bedre bliver dine jobforslag.',
mobileImage: jobSearchIphoneImage,
desktopImage: jobSearchMacImage,
},
{
title: 'CV Management',
title: 'CV-styring',
description:
'Tilføj erfaring, uddannelse, kvalifikationer, certifikater, sprog og kørekort i ét samlet flow. Når din profil er komplet, bliver du lettere fundet af relevante arbejdsgivere, og dine ansøgninger står stærkere i match-processen.',
'Opbyg og opdatér dit CV ét sted. Tilføj erfaring, uddannelse, kompetencer, certifikater, sprog og kørekort i et enkelt og samlet flow. Upload dit CV, og lad systemet automatisk strukturere dine erfaringer, uddannelser og kompetencer. Få intelligente forslag til formuleringer og layout, så dit CV står skarpere. Download et professionelt CV med ét klik – klar til at sende til arbejdsgivere.',
mobileImage: cvIphoneImage,
desktopImage: cvMacImage,
pills: [
@@ -131,7 +130,7 @@ const featureSections: FeatureSection[] = [
{
title: 'AI-agenter',
description:
'Dine AI-agenter søger hver dag efter de bedste jobmatches, sender dig relevante notifikationer og giver konkrete anbefalinger til forbedringer i dit CV. Det gør din jobsøgning mere målrettet, uden at du selv skal overvåge alle nye opslag.',
'Dine AI-agenter arbejder for dig hver dag. De finder relevante jobmatches, sender notifikationer om nye muligheder og hjælper med at gøre din jobsøgning mere målrettet. Samtidig får du forslag til forbedringer i dit CV, så du står stærkere over for arbejdsgivere. Du får også en karriereagent, der giver personlige anbefalinger til uddannelser, kurser, opkvalificering og relevante jobmuligheder.',
mobileImage: aiAgentIphoneImage,
desktopImage: aiAgentMacImage,
pills: [
@@ -144,7 +143,7 @@ const featureSections: FeatureSection[] = [
{
title: 'Simulator',
description:
'Simulatoren hjælper dig med at træne jobsamtaler i realistiske scenarier. Efter hver session får du en tydelig evaluering med forbedringspunkter til svar, struktur, gennemslagskraft og forberedelse til den konkrete stilling.',
'Træn jobsamtaler i realistiske scenarier og bliv bedre forberedt til den rigtige samtale. Simulatoren stiller spørgsmål baseret på din profil og den type stilling, du søger. Efter hver session får du en tydelig evaluering med konkrete forbedringspunkter til dine svar, struktur, gennemslagskraft og forberedelse. På den måde kan du styrke dine svar og stå stærkere – allerede inden du sender din ansøgning.',
mobileImage: simulatorIphoneImage,
desktopImage: simulatorMacImage,
},
@@ -155,13 +154,6 @@ const featureSections: FeatureSection[] = [
mobileImage: jobAnsogningIphoneImage,
desktopImage: oneClickMacImage,
},
{
title: 'Ansøg med ét klik',
description:
'Når din profil er sat op, kan du søge relevante stillinger med minimal friktion og følge hele processen ét sted. Du får overblik over gemte jobs, ansøgninger, svar og næste skridt direkte i appen.',
mobileImage: oneClickIphoneImage,
desktopImage: oneClickMacImage,
},
];
const experienceCards = [

28
src/presentation/pricing/pages/PricingPage.tsx
View File

@@ -87,21 +87,11 @@ export function PricingPage() {
</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">
<section className="hidden 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">
@@ -159,8 +149,8 @@ export function PricingPage() {
<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>
<h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Prøv Arbejd.com gratis</h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto font-normal drop-shadow-sm">Du kan starte gratis og oprette din profil med det samme. Når du vil have mere effekt i din jobsøgning, kan du opgradere til en premium pakke med fuld adgang til CV-værktøjer, målrettede ansøgninger, jobmatch og interviewtræning i 30, 90 eller 365 dage.</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto relative z-10 items-stretch">
@@ -191,8 +181,8 @@ export function PricingPage() {
</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 flex items-center gap-3">
<span className="text-5xl font-medium text-white tracking-tight drop-shadow-md">129 kr</span>
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-white/15 text-teal-200 border border-white/20">1,43 kr/dag</span>
<span className="text-5xl font-medium text-white tracking-tight drop-shadow-md">99 kr</span>
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-white/15 text-teal-200 border border-white/20">1,10 kr/dag</span>
</div>
<ul className="space-y-4 mb-8 flex-1 relative z-10">
@@ -200,7 +190,7 @@ export function PricingPage() {
<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>
<CheckItem small dark circle>Spar 48 kr. i forhold til 30 dage</CheckItem>
</ul>
<a href="https://app.arbejd.com" 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 inline-flex items-center justify-center">Vælg 90 dage</a>
</div>
@@ -293,7 +283,7 @@ export function PricingPage() {
<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">
<a href="/for-jobsogere" 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>
@@ -301,7 +291,7 @@ export function PricingPage() {
<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">
<a href="/faq" 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>
@@ -309,7 +299,7 @@ export function PricingPage() {
<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">
<a href="/for-jobsogere" 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>