12e7594f30
Deletes .NET server-side project structure and replaces it with a static HTML sales page for Plantempus Removes server-side components including: - Language and localization services - Menu and user role models - Controllers and routing configuration Adds comprehensive marketing landing page with responsive design and interactive sections
1896 lines
No EOL
62 KiB
HTML
1896 lines
No EOL
62 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Plantempus - Din salon digitaliseret og optimeret</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css">
|
|
<style>
|
|
/* ==========================================
|
|
FONT FACE (Poppins)
|
|
========================================== */
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('fonts/Poppins-Regular.woff') format('woff');
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('fonts/Poppins-Medium.woff') format('woff');
|
|
font-weight: 500;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('fonts/Poppins-SemiBold.woff') format('woff');
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('fonts/Poppins-Bold.woff') format('woff');
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ==========================================
|
|
VARIABLES
|
|
========================================== */
|
|
:root {
|
|
--color-primary: #6B8CAE;
|
|
--color-primary-light: #E8EDF3;
|
|
--color-primary-dark: #4A6B8A;
|
|
--color-accent: #E07B39;
|
|
--color-accent-light: #FCF0E8;
|
|
--color-surface: #ffffff;
|
|
--color-background: #f8f9fa;
|
|
--color-border: #e0e0e0;
|
|
--color-text: #2c3e50;
|
|
--color-text-secondary: #6c757d;
|
|
--color-text-muted: #95a5a6;
|
|
--color-green: #52A675;
|
|
--color-blue: #6B8CAE;
|
|
--color-purple: #9B87B5;
|
|
--color-amber: #E07B39;
|
|
--font-family: 'Poppins', -apple-system, sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family);
|
|
color: var(--color-text);
|
|
line-height: 1.6;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
/* ==========================================
|
|
NAVIGATION
|
|
========================================== */
|
|
.navbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.navbar-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 32px;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--color-text-secondary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.nav-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: background 150ms ease;
|
|
}
|
|
|
|
.nav-cta:hover {
|
|
background: var(--color-primary-dark);
|
|
}
|
|
|
|
/* ==========================================
|
|
HERO SECTION
|
|
========================================== */
|
|
.hero {
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
|
color: white;
|
|
padding: 120px 24px;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.hero-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 24px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
opacity: 0.95;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.hero-cta-group {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 16px 32px;
|
|
background: white;
|
|
color: var(--color-primary);
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
transition: transform 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 16px 32px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
border: 2px solid white;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
transition: background 150ms ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* ==========================================
|
|
SECTIONS
|
|
========================================== */
|
|
.section {
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.section-alt {
|
|
background: var(--color-background);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.section-badge {
|
|
display: inline-block;
|
|
padding: 6px 16px;
|
|
background: var(--color-primary-light);
|
|
color: var(--color-primary);
|
|
border-radius: 24px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 42px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 20px;
|
|
color: var(--color-text-secondary);
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ==========================================
|
|
PITCH SECTION
|
|
========================================== */
|
|
.pitch-box {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 40px;
|
|
background: var(--color-surface);
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
|
|
font-size: 18px;
|
|
line-height: 1.8;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.pitch-highlight {
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ==========================================
|
|
FEATURE GRID
|
|
========================================== */
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.feature-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.feature-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.feature-card {
|
|
padding: 32px;
|
|
background: var(--color-surface);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--color-border);
|
|
transition: transform 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(0, 137, 123, 0.15);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: var(--color-primary-light);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.feature-icon i {
|
|
font-size: 28px;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.feature-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.feature-desc {
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ==========================================
|
|
AI SECTION
|
|
========================================== */
|
|
.ai-showcase {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 48px;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.ai-showcase {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.ai-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-amber) 100%);
|
|
color: white;
|
|
border-radius: 24px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ai-title {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.ai-desc {
|
|
font-size: 18px;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 32px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.ai-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
|
|
.ai-stat {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: var(--color-background);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.ai-stat-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ai-stat-label {
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.ai-visual {
|
|
background: var(--color-background);
|
|
border-radius: 16px;
|
|
padding: 40px;
|
|
border: 2px solid var(--color-border);
|
|
}
|
|
|
|
/* ==========================================
|
|
BENEFITS SECTION
|
|
========================================== */
|
|
.benefits-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 40px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.benefits-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.benefit-item {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.benefit-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--color-primary);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.benefit-icon i {
|
|
font-size: 24px;
|
|
color: white;
|
|
}
|
|
|
|
.benefit-content h3 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.benefit-content p {
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ==========================================
|
|
PRICING SECTION
|
|
========================================== */
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32px;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.pricing-grid {
|
|
grid-template-columns: 1fr;
|
|
max-width: 400px;
|
|
}
|
|
}
|
|
|
|
.pricing-card {
|
|
background: var(--color-surface);
|
|
border: 2px solid var(--color-border);
|
|
border-radius: 16px;
|
|
padding: 40px 32px;
|
|
position: relative;
|
|
transition: transform 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.pricing-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 12px 32px rgba(0, 137, 123, 0.15);
|
|
}
|
|
|
|
.pricing-card.featured {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 8px 32px rgba(0, 137, 123, 0.2);
|
|
}
|
|
|
|
.pricing-badge {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 6px 16px;
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border-radius: 24px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.pricing-name {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.pricing-users {
|
|
color: var(--color-text-secondary);
|
|
font-size: 14px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.pricing-price {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.pricing-amount {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.pricing-period {
|
|
font-size: 18px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.pricing-features {
|
|
list-style: none;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.pricing-features li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.pricing-features i {
|
|
color: var(--color-accent);
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.pricing-cta {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 14px 24px;
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
font-family: var(--font-family);
|
|
cursor: pointer;
|
|
transition: background 150ms ease;
|
|
}
|
|
|
|
.pricing-cta:hover {
|
|
background: var(--color-primary-dark);
|
|
}
|
|
|
|
.pricing-card.featured .pricing-cta {
|
|
background: var(--color-primary-dark);
|
|
}
|
|
|
|
.pricing-card:not(.featured) .pricing-cta {
|
|
background: transparent;
|
|
color: var(--color-primary);
|
|
border: 2px solid var(--color-primary);
|
|
}
|
|
|
|
/* ==========================================
|
|
TESTIMONIALS
|
|
========================================== */
|
|
.testimonials-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.testimonials-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.testimonial-card {
|
|
background: var(--color-surface);
|
|
padding: 32px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.testimonial-quote {
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
color: var(--color-text);
|
|
margin-bottom: 24px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.testimonial-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.testimonial-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--color-accent);
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.testimonial-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.testimonial-name {
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.testimonial-title {
|
|
font-size: 14px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ==========================================
|
|
ROI SECTION
|
|
========================================== */
|
|
.roi-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 32px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.roi-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.roi-card {
|
|
text-align: center;
|
|
padding: 32px 24px;
|
|
background: var(--color-surface);
|
|
border-radius: 12px;
|
|
border: 2px solid var(--color-border);
|
|
}
|
|
|
|
.roi-value {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.roi-label {
|
|
font-size: 14px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ==========================================
|
|
CTA SECTION
|
|
========================================== */
|
|
.cta-section {
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
|
color: white;
|
|
padding: 80px 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.cta-section h2 {
|
|
font-size: 42px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.cta-section p {
|
|
font-size: 20px;
|
|
opacity: 0.95;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* ==========================================
|
|
FOOTER
|
|
========================================== */
|
|
.footer {
|
|
background: var(--color-text);
|
|
color: var(--color-text-secondary);
|
|
padding: 60px 24px 32px;
|
|
}
|
|
|
|
.footer-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
|
gap: 48px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.footer-container {
|
|
grid-template-columns: 1fr;
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
.footer-logo {
|
|
color: white;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.footer-desc {
|
|
line-height: 1.7;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.footer-title {
|
|
color: white;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.footer-links {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--color-text-secondary);
|
|
text-decoration: none;
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.footer-bottom {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding-top: 32px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ==========================================
|
|
MODULE CARDS (for detailed features)
|
|
========================================== */
|
|
.module-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.module-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.module-card {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 12px;
|
|
padding: 28px;
|
|
transition: border-color 150ms ease;
|
|
}
|
|
|
|
.module-card:hover {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.module-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.module-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--color-primary-light);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.module-icon i {
|
|
font-size: 24px;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.module-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.module-features {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.module-features li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.module-features i {
|
|
color: var(--color-accent);
|
|
font-size: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ==========================================
|
|
STATS BAR
|
|
========================================== */
|
|
.stats-bar {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 24px;
|
|
padding: 60px 24px;
|
|
background: var(--color-primary-dark);
|
|
color: white;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-bar {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
font-family: var(--font-mono);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 16px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* ==========================================
|
|
RESPONSIVE
|
|
========================================== */
|
|
@media (max-width: 768px) {
|
|
.hero h1 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar">
|
|
<div class="navbar-container">
|
|
<a href="#" class="logo">
|
|
<div class="logo-icon">P</div>
|
|
<span>Plantempus</span>
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#ai">AI-Innovation</a></li>
|
|
<li><a href="#pricing">Priser</a></li>
|
|
<li><a href="#demo">Demo</a></li>
|
|
</ul>
|
|
<a href="#pricing" class="nav-cta">
|
|
<i class="ph ph-rocket-launch"></i>
|
|
Kom i gang
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-container">
|
|
<div class="hero-badge">
|
|
<i class="ph ph-scissors"></i>
|
|
Til professionelle frisører og skønhedssaloner
|
|
</div>
|
|
<h1>Mere tid til det du er god til</h1>
|
|
<p class="hero-subtitle">
|
|
Plantempus tager sig af booking, administration og papirarbejde - så du kan fokusere på dine kunder og dit håndværk.
|
|
</p>
|
|
<div class="hero-cta-group">
|
|
<a href="#pricing" class="btn-primary">
|
|
<i class="ph ph-rocket-launch"></i>
|
|
Prøv gratis i 14 dage
|
|
</a>
|
|
<a href="#demo" class="btn-secondary">
|
|
<i class="ph ph-play"></i>
|
|
Se demo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Bar -->
|
|
<div class="stats-bar">
|
|
<div class="stat-item">
|
|
<div class="stat-value">10t</div>
|
|
<div class="stat-label">Mere tid til kunder om ugen</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">0 kr</div>
|
|
<div class="stat-label">I tabte bookinger</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">24/7</div>
|
|
<div class="stat-label">Kunderne kan selv booke</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">5 min</div>
|
|
<div class="stat-label">At lukke kassen dagligt</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elevator Pitch Section -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-badge">For professionelle frisører</div>
|
|
<h2 class="section-title">Gør det du elsker - ikke papirarbejde</h2>
|
|
</div>
|
|
|
|
<div class="pitch-box">
|
|
<p>
|
|
<strong class="pitch-highlight">Du blev frisør for at klippe hår - ikke for at sidde med papirarbejde.</strong>
|
|
Plantempus håndterer booking, påmindelser og løn automatisk.
|
|
Kunderne booker selv online. Du får tid til det du er god til.
|
|
</p>
|
|
<p style="margin-top: 20px;">
|
|
<strong class="pitch-highlight">10 timer mere om ugen til dine kunder.</strong>
|
|
Ingen dobbeltbookinger. Ingen glemte påmindelser. Ingen timer ved Excel.
|
|
Bare en fyldt kalender og tilfredse kunder.
|
|
</p>
|
|
<p style="margin-top: 20px;">
|
|
<strong class="pitch-highlight">Gratis i 14 dage.</strong>
|
|
Ingen binding. Intet kreditkort.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Core Features Section -->
|
|
<section id="features" class="section section-alt">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-badge">Kernefunktionalitet</div>
|
|
<h2 class="section-title">Alt hvad din salon har brug for - i ét system</h2>
|
|
<p class="section-subtitle">
|
|
Fra online booking til lønudbetaling. Plantempus dækker hele din forretning.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="ph ph-calendar-check"></i>
|
|
</div>
|
|
<h3 class="feature-title">Booking der kører sig selv</h3>
|
|
<p class="feature-desc">
|
|
Kunderne booker selv online når det passer dem - også klokken 22 om aftenen.
|
|
Systemet sender selv påmindelser, så du slipper for no-shows.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="ph ph-users-three"></i>
|
|
</div>
|
|
<h3 class="feature-title">Husk hver kunde</h3>
|
|
<p class="feature-desc">
|
|
Gem farveformler, noter og præferencer direkte i systemet.
|
|
Næste gang kunden kommer, har du alt ved hånden - selv om det er 6 måneder siden.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="ph ph-shopping-cart"></i>
|
|
</div>
|
|
<h3 class="feature-title">Nem betaling</h3>
|
|
<p class="feature-desc">
|
|
Tag imod kort, kontant, MobilePay og gavekort - alt sammen i samme system.
|
|
Scan stregkoder på produkter og de kommer automatisk med på kvitteringen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="ph ph-user-circle-gear"></i>
|
|
</div>
|
|
<h3 class="feature-title">Styr på medarbejdere</h3>
|
|
<p class="feature-desc">
|
|
Planlæg vagter, hold styr på ferie og sygedage.
|
|
Løn og provision bliver beregnet automatisk - eksporter direkte til dit lønsystem.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="ph ph-coins"></i>
|
|
</div>
|
|
<h3 class="feature-title">Nemt kassearbejde</h3>
|
|
<p class="feature-desc">
|
|
Luk kassen på 5 minutter i stedet for 30.
|
|
Systemet tæller op for dig og viser hvor meget der skal være i skuffen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="ph ph-chart-line-up"></i>
|
|
</div>
|
|
<h3 class="feature-title">Se hvordan det går</h3>
|
|
<p class="feature-desc">
|
|
Simpelt dashboard der viser hvad du tjener, hvilke kunder der kommer tilbage,
|
|
og hvor meget hver medarbejder omsætter for. Ingen komplicerede rapporter.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Smart Features Section -->
|
|
<section id="ai" class="section">
|
|
<div class="container">
|
|
<div class="ai-showcase">
|
|
<div>
|
|
<div class="ai-badge">
|
|
<i class="ph ph-lightbulb"></i>
|
|
Smart hjælp
|
|
</div>
|
|
<h2 class="ai-title">Systemet arbejder for dig - ikke omvendt</h2>
|
|
<p class="ai-desc">
|
|
Plantempus gør det tunge arbejde. Det foreslår de bedste tider til dine kunder (så de ikke ringer midt i en klipning),
|
|
giver dig besked når du har huller i kalenderen der kan fyldes, og husker hvilke produkter dine kunder plejer at købe.
|
|
Det er som at have en ekstra medarbejder - der aldrig har fri.
|
|
</p>
|
|
<div class="ai-stats">
|
|
<div class="ai-stat">
|
|
<div class="ai-stat-value">10t</div>
|
|
<div class="ai-stat-label">Mere tid til kunder/uge</div>
|
|
</div>
|
|
<div class="ai-stat">
|
|
<div class="ai-stat-value">0</div>
|
|
<div class="ai-stat-label">Glemte påmindelser</div>
|
|
</div>
|
|
<div class="ai-stat">
|
|
<div class="ai-stat-value">+8</div>
|
|
<div class="ai-stat-label">Ekstra kunder/uge</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ai-visual">
|
|
<img src="data:image/svg+xml,%3Csvg width='400' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='400' height='300' fill='%23f5f5f5'/%3E%3Ctext x='200' y='150' text-anchor='middle' font-family='Poppins' font-size='18' fill='%2300897b'%3EAI Dashboard Preview%3C/text%3E%3C/svg%3E" alt="AI Dashboard" style="width: 100%; border-radius: 8px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Detailed Modules Section -->
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-badge">Alt du har brug for</div>
|
|
<h2 class="section-title">Ét system der klarer det hele</h2>
|
|
<p class="section-subtitle">
|
|
Fra booking til løn. Fra kundejournal til kasseafstemning. Alt samlet ét sted.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="module-grid">
|
|
<!-- Booking & Kalender -->
|
|
<div class="module-card">
|
|
<div class="module-header">
|
|
<div class="module-icon">
|
|
<i class="ph ph-calendar-check"></i>
|
|
</div>
|
|
<h3 class="module-title">Booking & Kalender</h3>
|
|
</div>
|
|
<ul class="module-features">
|
|
<li><i class="ph ph-check"></i> Kunderne booker selv online</li>
|
|
<li><i class="ph ph-check"></i> Forslag til ledige tider</li>
|
|
<li><i class="ph ph-check"></i> Venteliste når I er fyldt op</li>
|
|
<li><i class="ph ph-check"></i> Flyt bookinger med træk-og-slip</li>
|
|
<li><i class="ph ph-check"></i> Book flere medarbejdere til samme kunde</li>
|
|
<li><i class="ph ph-check"></i> Automatiske påmindelser</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Kunde-management -->
|
|
<div class="module-card">
|
|
<div class="module-header">
|
|
<div class="module-icon">
|
|
<i class="ph ph-address-book"></i>
|
|
</div>
|
|
<h3 class="module-title">Kunde-management</h3>
|
|
</div>
|
|
<ul class="module-features">
|
|
<li><i class="ph ph-check"></i> Alle kunder ét sted</li>
|
|
<li><i class="ph ph-check"></i> Marker VIP-kunder og stamkunder</li>
|
|
<li><i class="ph ph-check"></i> Gem noter og observationer</li>
|
|
<li><i class="ph ph-check"></i> Farveformler der følger med</li>
|
|
<li><i class="ph ph-check"></i> Link familie-medlemmer</li>
|
|
<li><i class="ph ph-check"></i> Håndter marketing-tilladelser</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Medarbejder & HR -->
|
|
<div class="module-card">
|
|
<div class="module-header">
|
|
<div class="module-icon">
|
|
<i class="ph ph-users"></i>
|
|
</div>
|
|
<h3 class="module-title">Medarbejdere</h3>
|
|
</div>
|
|
<ul class="module-features">
|
|
<li><i class="ph ph-check"></i> Planlæg vagter for hele ugen</li>
|
|
<li><i class="ph ph-check"></i> Løn regnes automatisk ud</li>
|
|
<li><i class="ph ph-check"></i> Gem kontrakter og dokumenter</li>
|
|
<li><i class="ph ph-check"></i> Hold styr på ferie og sygdom</li>
|
|
<li><i class="ph ph-check"></i> Påmindelser om certificeringer</li>
|
|
<li><i class="ph ph-check"></i> Se hvem der tjener mest</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Økonomi & Kasse -->
|
|
<div class="module-card">
|
|
<div class="module-header">
|
|
<div class="module-icon">
|
|
<i class="ph ph-credit-card"></i>
|
|
</div>
|
|
<h3 class="module-title">Økonomi & Kasse</h3>
|
|
</div>
|
|
<ul class="module-features">
|
|
<li><i class="ph ph-check"></i> Tag imod kort, kontant, MobilePay</li>
|
|
<li><i class="ph ph-check"></i> Sælg og administrer gavekort</li>
|
|
<li><i class="ph ph-check"></i> Kasseafstemning på 5 minutter</li>
|
|
<li><i class="ph ph-check"></i> Del betalingen på flere metoder</li>
|
|
<li><i class="ph ph-check"></i> Print eller email kvitteringer</li>
|
|
<li><i class="ph ph-check"></i> Scan produkter ind</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- AI & Analyse -->
|
|
<div class="module-card">
|
|
<div class="module-header">
|
|
<div class="module-icon">
|
|
<i class="ph ph-lightbulb"></i>
|
|
</div>
|
|
<h3 class="module-title">Smart hjælp</h3>
|
|
</div>
|
|
<ul class="module-features">
|
|
<li><i class="ph ph-check"></i> Foreslår de bedste booking-tider</li>
|
|
<li><i class="ph ph-check"></i> Finder huller i din kalender</li>
|
|
<li><i class="ph ph-check"></i> Advarer når kunder er ved at stoppe</li>
|
|
<li><i class="ph ph-check"></i> Anbefaler produkter til kunder</li>
|
|
<li><i class="ph ph-check"></i> Viser hvad der sælger bedst</li>
|
|
<li><i class="ph ph-check"></i> Giver dig overblik hver dag</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Automatisering -->
|
|
<div class="module-card">
|
|
<div class="module-header">
|
|
<div class="module-icon">
|
|
<i class="ph ph-lightning"></i>
|
|
</div>
|
|
<h3 class="module-title">Ting der sker selv</h3>
|
|
</div>
|
|
<ul class="module-features">
|
|
<li><i class="ph ph-check"></i> SMS går automatisk ud</li>
|
|
<li><i class="ph ph-check"></i> Emails når noget ændres</li>
|
|
<li><i class="ph ph-check"></i> Send løn direkte til revisor</li>
|
|
<li><i class="ph ph-check"></i> Kvitteringer til sygeforsikring</li>
|
|
<li><i class="ph ph-check"></i> Synk med din telefon-kalender</li>
|
|
<li><i class="ph ph-check"></i> Kvitteringer printes eller sendes</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Integration -->
|
|
<div class="module-card">
|
|
<div class="module-header">
|
|
<div class="module-icon">
|
|
<i class="ph ph-plugs-connected"></i>
|
|
</div>
|
|
<h3 class="module-title">Virker med det du har</h3>
|
|
</div>
|
|
<ul class="module-features">
|
|
<li><i class="ph ph-check"></i> Intect, Proløn, Zenegy og flere</li>
|
|
<li><i class="ph ph-check"></i> Sender til "danmark" sygeforsikring</li>
|
|
<li><i class="ph ph-check"></i> Tæl besøgende på hjemmesiden</li>
|
|
<li><i class="ph ph-check"></i> Beskyt kundernes privatliv</li>
|
|
<li><i class="ph ph-check"></i> Synk med Google/Apple kalender</li>
|
|
<li><i class="ph ph-check"></i> Kan kobles til andre systemer</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Indstillinger -->
|
|
<div class="module-card">
|
|
<div class="module-header">
|
|
<div class="module-icon">
|
|
<i class="ph ph-sliders"></i>
|
|
</div>
|
|
<h3 class="module-title">Gør det til dit eget</h3>
|
|
</div>
|
|
<ul class="module-features">
|
|
<li><i class="ph ph-check"></i> Slå funktioner til og fra</li>
|
|
<li><i class="ph ph-check"></i> Dit logo og dine farver</li>
|
|
<li><i class="ph ph-check"></i> Skriv dine egne beskeder</li>
|
|
<li><i class="ph ph-check"></i> Sæt åbningstider og helligdage</li>
|
|
<li><i class="ph ph-check"></i> Flere saloner i samme system</li>
|
|
<li><i class="ph ph-check"></i> Mørkt tema til aftenvagter</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ROI & Benefits -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-badge">Resultater</div>
|
|
<h2 class="section-title">Det virker i praksis</h2>
|
|
<p class="section-subtitle">
|
|
Tal fra saloner der allerede bruger Plantempus
|
|
</p>
|
|
</div>
|
|
|
|
<div class="roi-grid">
|
|
<div class="roi-card">
|
|
<div class="roi-value">10t</div>
|
|
<div class="roi-label">Mere tid til kunder hver uge</div>
|
|
</div>
|
|
<div class="roi-card">
|
|
<div class="roi-value">95%</div>
|
|
<div class="roi-label">Kunder møder op (ingen no-shows)</div>
|
|
</div>
|
|
<div class="roi-card">
|
|
<div class="roi-value">8</div>
|
|
<div class="roi-label">Ekstra kunder om ugen</div>
|
|
</div>
|
|
<div class="roi-card">
|
|
<div class="roi-value">0 kr</div>
|
|
<div class="roi-label">Tabte bookinger om måneden</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Benefits Section -->
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-badge">Fordele</div>
|
|
<h2 class="section-title">Hvorfor vælge Plantempus?</h2>
|
|
</div>
|
|
|
|
<div class="benefits-grid">
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon">
|
|
<i class="ph ph-rocket-launch"></i>
|
|
</div>
|
|
<div class="benefit-content">
|
|
<h3>Start i dag</h3>
|
|
<p>
|
|
Intet at installere. Ingen kompliceret opsætning.
|
|
Du kan være klar til at modtage bookinger samme dag du starter.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon">
|
|
<i class="ph ph-currency-circle-dollar"></i>
|
|
</div>
|
|
<div class="benefit-content">
|
|
<h3>Ingen overraskelser</h3>
|
|
<p>
|
|
Fast pris hver måned. Ingen skjulte gebyrer. Ubegrænsede bookinger og SMS inkluderet.
|
|
Du betaler kun for antallet af medarbejdere.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon">
|
|
<i class="ph ph-shield-check"></i>
|
|
</div>
|
|
<div class="benefit-content">
|
|
<h3>Sikkerhed & GDPR</h3>
|
|
<p>
|
|
Dine data er krypteret og hostet sikkert i EU. Fuld GDPR-compliance,
|
|
automatisk backup og 99.9% uptime garanti.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon">
|
|
<i class="ph ph-headset"></i>
|
|
</div>
|
|
<div class="benefit-content">
|
|
<h3>Hjælp når du har brug for det</h3>
|
|
<p>
|
|
Skriv eller ring på dansk til folk der kender til frisørbranchen.
|
|
Vi svarer hurtigt og forklarer tingene i et sprog du forstår.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon">
|
|
<i class="ph ph-device-mobile"></i>
|
|
</div>
|
|
<div class="benefit-content">
|
|
<h3>Virker på mobilen</h3>
|
|
<p>
|
|
Kunderne booker fra deres telefon. Du kan tjekke kalenderen og ændre bookinger fra din tablet.
|
|
Intet kræver at du sidder ved en computer.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon">
|
|
<i class="ph ph-arrows-clockwise"></i>
|
|
</div>
|
|
<div class="benefit-content">
|
|
<h3>Bliver bedre hele tiden</h3>
|
|
<p>
|
|
Nye funktioner tilføjes løbende uden du skal betale mere.
|
|
Vi lytter til hvad I har brug for og bygger det ind.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section id="pricing" class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-badge">Priser</div>
|
|
<h2 class="section-title">Vælg den plan der passer til dig</h2>
|
|
<p class="section-subtitle">
|
|
Alle planer inkluderer 14 dages gratis prøveperiode. Ingen binding. Opsig når som helst.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="pricing-grid">
|
|
<!-- Basis Plan -->
|
|
<div class="pricing-card">
|
|
<h3 class="pricing-name">Basis</h3>
|
|
<p class="pricing-users">1-3 brugere</p>
|
|
<div class="pricing-price">
|
|
<span class="pricing-amount">299</span>
|
|
<span class="pricing-period">kr/md</span>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li><i class="ph ph-check-circle"></i> Op til 3 brugere</li>
|
|
<li><i class="ph ph-check-circle"></i> Online booking</li>
|
|
<li><i class="ph ph-check-circle"></i> Kalender & aftalestyring</li>
|
|
<li><i class="ph ph-check-circle"></i> Kundekartotek</li>
|
|
<li><i class="ph ph-check-circle"></i> SMS-påmindelser</li>
|
|
<li><i class="ph ph-check-circle"></i> Email-notifikationer</li>
|
|
<li><i class="ph ph-check-circle"></i> Basis rapporter</li>
|
|
<li><i class="ph ph-check-circle"></i> Email support</li>
|
|
</ul>
|
|
<button class="pricing-cta">Start gratis prøveperiode</button>
|
|
</div>
|
|
|
|
<!-- Pro Plan (Featured) -->
|
|
<div class="pricing-card featured">
|
|
<div class="pricing-badge">Mest populær</div>
|
|
<h3 class="pricing-name">Pro</h3>
|
|
<p class="pricing-users">4-8 brugere</p>
|
|
<div class="pricing-price">
|
|
<span class="pricing-amount">599</span>
|
|
<span class="pricing-period">kr/md</span>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li><i class="ph ph-check-circle"></i> Op til 8 brugere</li>
|
|
<li><i class="ph ph-check-circle"></i> <strong>Alt fra Basis</strong></li>
|
|
<li><i class="ph ph-check-circle"></i> <strong>AI-optimering</strong></li>
|
|
<li><i class="ph ph-check-circle"></i> Lønberegning & eksport</li>
|
|
<li><i class="ph ph-check-circle"></i> Gavekort & klippekort</li>
|
|
<li><i class="ph ph-check-circle"></i> Kasseafstemning</li>
|
|
<li><i class="ph ph-check-circle"></i> Avancerede rapporter</li>
|
|
<li><i class="ph ph-check-circle"></i> Prioriteret support</li>
|
|
</ul>
|
|
<button class="pricing-cta">Start gratis prøveperiode</button>
|
|
</div>
|
|
|
|
<!-- Enterprise Plan -->
|
|
<div class="pricing-card">
|
|
<h3 class="pricing-name">Enterprise</h3>
|
|
<p class="pricing-users">8+ brugere</p>
|
|
<div class="pricing-price">
|
|
<span class="pricing-amount" style="font-size: 32px;">Kontakt os</span>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li><i class="ph ph-check-circle"></i> Ubegrænset brugere</li>
|
|
<li><i class="ph ph-check-circle"></i> <strong>Alt fra Pro</strong></li>
|
|
<li><i class="ph ph-check-circle"></i> Flere lokationer</li>
|
|
<li><i class="ph ph-check-circle"></i> Tilpasset integration</li>
|
|
<li><i class="ph ph-check-circle"></i> Dedikeret kontaktperson</li>
|
|
<li><i class="ph ph-check-circle"></i> SLA & uptime garanti</li>
|
|
<li><i class="ph ph-check-circle"></i> On-premise option</li>
|
|
<li><i class="ph ph-check-circle"></i> 24/7 prioriteret support</li>
|
|
</ul>
|
|
<button class="pricing-cta">Kontakt salg</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Comparison Matrix -->
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-badge">Sammenligning</div>
|
|
<h2 class="section-title">Plantempus vs. Traditionelle Systemer</h2>
|
|
<p class="section-subtitle">
|
|
Se forskellen på et system bygget til moderne saloner
|
|
</p>
|
|
</div>
|
|
|
|
<div style="max-width: 900px; margin: 0 auto; background: var(--color-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.1);">
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr style="background: var(--color-primary); color: white;">
|
|
<th style="padding: 20px; text-align: left; font-weight: 600; font-size: 16px;">Feature</th>
|
|
<th style="padding: 20px; text-align: center; font-weight: 600; font-size: 16px;">Plantempus</th>
|
|
<th style="padding: 20px; text-align: center; font-weight: 600; font-size: 16px; opacity: 0.7;">Andre systemer</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="border-bottom: 1px solid var(--color-border);">
|
|
<td style="padding: 16px 20px; font-weight: 500;">Avanceret kundesøgning</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--color-border); background: var(--color-background);">
|
|
<td style="padding: 16px 20px; font-weight: 500;">Detaljerede statistikker med grafer</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">△</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--color-border);">
|
|
<td style="padding: 16px 20px; font-weight: 500;">Farveformler & håranalyser</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--color-border); background: var(--color-background);">
|
|
<td style="padding: 16px 20px; font-weight: 500;">Automatisk lønberegning med provision</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--color-border);">
|
|
<td style="padding: 16px 20px; font-weight: 500;">Multi-payment checkout (flere metoder)</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">△</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--color-border); background: var(--color-background);">
|
|
<td style="padding: 16px 20px; font-weight: 500;">Kasseafstemning</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--color-border);">
|
|
<td style="padding: 16px 20px; font-weight: 500;">Stregkodescanner med produkt-genkendelse</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--color-border); background: var(--color-background);">
|
|
<td style="padding: 16px 20px; font-weight: 500;">Smart tidsforslag til kunder</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--color-border);">
|
|
<td style="padding: 16px 20px; font-weight: 500;">Moderne, hurtig grænseflade</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">△</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 16px 20px; font-weight: 500;">Eksport til 5+ lønsystemer</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
|
|
<td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">△</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div style="padding: 20px; text-align: center; background: var(--color-accent-light); color: var(--color-text-secondary); font-size: 13px;">
|
|
✓ = Inkluderet · △ = Begrænset · — = Ikke tilgængelig
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Screenshot Gallery -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-badge">Se det rigtige system</div>
|
|
<h2 class="section-title">Ikke bare infographics - det her er rigtigt</h2>
|
|
<p class="section-subtitle">
|
|
Vi er stolte af vores UX og performance. Se hvordan systemet faktisk ser ud.
|
|
</p>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 32px;">
|
|
<div style="background: var(--color-surface); border-radius: 12px; padding: 24px; border: 2px solid var(--color-border);">
|
|
<h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--color-text);">
|
|
<i class="ph ph-chart-line-up" style="color: var(--color-accent);"></i>
|
|
Dashboard med rigtige data
|
|
</h3>
|
|
<p style="color: var(--color-text-secondary); margin-bottom: 16px;">
|
|
Se dagens omsætning, bookinger og medarbejder-status på ét blik. Ikke bare tal - visuelle grafer der giver mening.
|
|
</p>
|
|
<a href="poc-dashboard.html" target="_blank" style="display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 500; text-decoration: none;">
|
|
Se live demo <i class="ph ph-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div style="background: var(--color-surface); border-radius: 12px; padding: 24px; border: 2px solid var(--color-border);">
|
|
<h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--color-text);">
|
|
<i class="ph ph-magnifying-glass" style="color: var(--color-accent);"></i>
|
|
Kunde-søgning der virker
|
|
</h3>
|
|
<p style="color: var(--color-text-secondary); margin-bottom: 16px;">
|
|
Find kunder på navn, telefon, email - med det samme. Filtrér på VIP, stamkunder eller nye kunder. Hurtigt og præcist.
|
|
</p>
|
|
<a href="poc-customer-list.html" target="_blank" style="display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 500; text-decoration: none;">
|
|
Se live demo <i class="ph ph-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div style="background: var(--color-surface); border-radius: 12px; padding: 24px; border: 2px solid var(--color-border);">
|
|
<h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--color-text);">
|
|
<i class="ph ph-user-circle" style="color: var(--color-accent);"></i>
|
|
Kundeprofiler med detaljer
|
|
</h3>
|
|
<p style="color: var(--color-text-secondary); margin-bottom: 16px;">
|
|
Farveformler, håranalyser, præferencer og købs-historie. Alt organiseret og nemt at finde.
|
|
</p>
|
|
<a href="poc-customer-detail.html" target="_blank" style="display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 500; text-decoration: none;">
|
|
Se live demo <i class="ph ph-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div style="background: var(--color-surface); border-radius: 12px; padding: 24px; border: 2px solid var(--color-border);">
|
|
<h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--color-text);">
|
|
<i class="ph ph-calculator" style="color: var(--color-accent);"></i>
|
|
Løn & Provision
|
|
</h3>
|
|
<p style="color: var(--color-text-secondary); margin-bottom: 16px;">
|
|
Se præcis hvad hver medarbejder har tjent. Eksportér direkte til Intect, Proløn eller Zenegy med et klik.
|
|
</p>
|
|
<a href="poc-loen-provision.html" target="_blank" style="display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 500; text-decoration: none;">
|
|
Se live demo <i class="ph ph-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; padding: 32px; background: var(--color-primary-light); border-radius: 12px;">
|
|
<p style="font-size: 18px; font-weight: 500; color: var(--color-text); margin-bottom: 12px;">
|
|
<i class="ph ph-rocket-launch" style="color: var(--color-accent); font-size: 24px;"></i>
|
|
Alle demos er interaktive - klik og prøv dem
|
|
</p>
|
|
<p style="color: var(--color-text-secondary);">
|
|
Ikke mock-ups. Ikke static billeder. Det her er det rigtige system i aktion.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Performance & UX -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-badge">Performance & Design</div>
|
|
<h2 class="section-title">Bygget med omtanke - mærkes i hverdagen</h2>
|
|
</div>
|
|
|
|
<div class="benefits-grid" style="max-width: 900px; margin: 0 auto;">
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon" style="background: var(--color-accent);">
|
|
<i class="ph ph-lightning"></i>
|
|
</div>
|
|
<div class="benefit-content">
|
|
<h3>Lynhurtigt</h3>
|
|
<p>
|
|
Under 1 sekund load-tid. Ingen langsomme overgang
|
|
|
|
er.
|
|
Systemet reagerer med det samme - som det skal være.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon" style="background: var(--color-accent);">
|
|
<i class="ph ph-eye"></i>
|
|
</div>
|
|
<div class="benefit-content">
|
|
<h3>Gennemtænkt UX</h3>
|
|
<p>
|
|
Hver knap, hver farve, hver animation er testet.
|
|
Designet så det er intuitivt - også for den der ikke er teknisk.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon" style="background: var(--color-accent);">
|
|
<i class="ph ph-chart-bar"></i>
|
|
</div>
|
|
<div class="benefit-content">
|
|
<h3>Statistik der giver mening</h3>
|
|
<p>
|
|
Ikke bare tal på en side. Visuelle grafer, trends og indsigter.
|
|
Se med det samme hvad der virker og hvad der ikke gør.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon" style="background: var(--color-accent);">
|
|
<i class="ph ph-palette"></i>
|
|
</div>
|
|
<div class="benefit-content">
|
|
<h3>Moderne design</h3>
|
|
<p>
|
|
Ikke et system fra 2010. Rent, moderne interface der matcher
|
|
det professionelle udtryk din salon har.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials -->
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-badge">Kundeudtalelser</div>
|
|
<h2 class="section-title">Hvad siger vores brugere?</h2>
|
|
</div>
|
|
|
|
<div class="testimonials-grid">
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-quote">
|
|
"Nu har jeg faktisk tid til at snakke med mine kunder i stedet for at rende efter telefonen.
|
|
Bookinger sker automatisk, påmindelser går selv ud, og jeg kan se hele ugen med et blik. Det er befriende."
|
|
</div>
|
|
<div class="testimonial-author">
|
|
<div class="testimonial-avatar">KK</div>
|
|
<div class="testimonial-info">
|
|
<div class="testimonial-name">Karina Knudsen</div>
|
|
<div class="testimonial-title">Ejer, KARINA KNUDSEN®</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-quote">
|
|
"Mine kunder elsker at de kan booke online klokken 22 om aftenen når de lige kommer i tanke om det.
|
|
Og jeg slipper for at svare på telefonen hele dagen. Win-win."
|
|
</div>
|
|
<div class="testimonial-author">
|
|
<div class="testimonial-avatar">MH</div>
|
|
<div class="testimonial-info">
|
|
<div class="testimonial-name">Maria Hansen</div>
|
|
<div class="testimonial-title">Salonchef, Salon Bellezza</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-quote">
|
|
"Før brugte jeg en hel formiddag hver måned på løn. Nu tager det 10 minutter.
|
|
Systemet har styr på hvem der har arbejdet hvornår, og sender det hele til min revisor."
|
|
</div>
|
|
<div class="testimonial-author">
|
|
<div class="testimonial-avatar">AS</div>
|
|
<div class="testimonial-info">
|
|
<div class="testimonial-name">Anna Sørensen</div>
|
|
<div class="testimonial-title">Økonomiansvarlig, Beauty Studio</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section id="demo" class="cta-section">
|
|
<div class="container">
|
|
<h2>Klar til at optimere din salon?</h2>
|
|
<p>Start din gratis 14-dages prøveperiode i dag. Ingen kreditkort påkrævet.</p>
|
|
<div class="hero-cta-group">
|
|
<a href="#pricing" class="btn-primary">
|
|
<i class="ph ph-rocket-launch"></i>
|
|
Kom i gang gratis
|
|
</a>
|
|
<a href="mailto:sales@plantempus.dk" class="btn-secondary">
|
|
<i class="ph ph-envelope"></i>
|
|
Kontakt salg
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-container">
|
|
<div>
|
|
<div class="footer-logo">Plantempus</div>
|
|
<p class="footer-desc">
|
|
Moderne salon-management med AI-drevet optimering.
|
|
Bygget til danske saloner og skønhedsklinikker.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="footer-title">Produkt</div>
|
|
<ul class="footer-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#ai">AI-Innovation</a></li>
|
|
<li><a href="#pricing">Priser</a></li>
|
|
<li><a href="#demo">Demo</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="footer-title">Ressourcer</div>
|
|
<ul class="footer-links">
|
|
<li><a href="#">Hjælpecenter</a></li>
|
|
<li><a href="#">API Dokumentation</a></li>
|
|
<li><a href="#">Blog</a></li>
|
|
<li><a href="#">Status</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="footer-title">Firma</div>
|
|
<ul class="footer-links">
|
|
</a></li>
|
|
<li><a href="#">Karriere</a></li>
|
|
<li><a href="#">Kontakt</a></li>
|
|
<li><a href="#">Privatlivspolitik</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>© 2026 Plantempus. Alle rettigheder forbeholdes.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Smooth scroll for navigation
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// CTA button handlers
|
|
document.querySelectorAll('.pricing-cta').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
alert('Tak for din interesse! Kontakt sales@plantempus.dk for at komme i gang.');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
<li><a href="#">Om os |