youztech/siteloft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 3 homepage design variants for comparison

Browse Source 
- /home1: Swiss Editorial (light mode, Space Grotesk, vermilion red)
- /home2: Digital Brutalism (dark, Clash Display, sharp yellow, fullscreen menu)
- /home3: Warm Luxury (warm dark, Instrument Serif, gold, floating pill nav, GSAP)

Each variant has unique typography, color palette, layout, and navigation.
Includes lenis smooth scroll and GSAP ScrollTrigger for animations.
This commit is contained in:
Ubuntu
2026-03-01 20:45:44 +00:00
parent e0e263b6bb
commit 051fede019
8 changed files with 1062 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
package-lock.json generated
View File

@@ -10,6 +10,8 @@
"dependencies": {
"@tailwindcss/vite": "^4.2.1",
"astro": "^5.17.1",
"gsap": "^3.14.2",
"lenis": "^1.3.17",
"tailwindcss": "^4.2.1"
},
"devDependencies": {
@@ -3019,6 +3021,12 @@
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"license": "ISC"
},
"node_modules/gsap": {
"version": "3.14.2",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
"integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
"license": "Standard 'no charge' license: https://gsap.com/standard-license."
},
"node_modules/h3": {
"version": "1.15.5",
"resolved": "https://registry.npmjs.org/h3/-/h3-1.15.5.tgz",
@@ -3465,6 +3473,32 @@
"node": ">=6"
}
},
"node_modules/lenis": {
"version": "1.3.17",
"resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.17.tgz",
"integrity": "sha512-k9T9rgcxne49ggJOvXCraWn5dt7u2mO+BNkhyu6yxuEnm9c092kAW5Bus5SO211zUvx7aCCEtzy9UWr0RB+oJw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/darkroomengineering"
},
"peerDependencies": {
"@nuxt/kit": ">=3.0.0",
"react": ">=17.0.0",
"vue": ">=3.0.0"
},
"peerDependenciesMeta": {
"@nuxt/kit": {
"optional": true
},
"react": {
"optional": true
},
"vue": {
"optional": true
}
}
},
"node_modules/lightningcss": {
"version": "1.31.1",
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",

2
package.json
View File

@@ -11,6 +11,8 @@
"dependencies": {
"@tailwindcss/vite": "^4.2.1",
"astro": "^5.17.1",
"gsap": "^3.14.2",
"lenis": "^1.3.17",
"tailwindcss": "^4.2.1"
},
"devDependencies": {

95
src/layouts/LayoutHome1.astro Normal file
View File

@@ -0,0 +1,95 @@
---
interface Props {
title: string;
description: string;
}
const { title, description } = Astro.props;
---
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta name="description" content={description} />
<meta name="robots" content="noindex" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
</head>
<body>
<slot />
<script>
import Lenis from 'lenis';
const lenis = new Lenis({ duration: 1.1, easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
requestAnimationFrame(raf);
// Simple scroll reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>
</body>
</html>
<style is:global>
:root {
--bg: #FAFAF7;
--surface: #F0EDE6;
--text: #1A1714;
--text-muted: #9C9585;
--accent: #C23A22;
--accent-hover: #A83020;
--secondary: #2C5545;
--border: #D8D2C6;
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
font-family: var(--font-body);
background-color: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
line-height: 1.1;
letter-spacing: -0.02em;
}
a { color: inherit; text-decoration: none; }
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
</style>

79
src/layouts/LayoutHome2.astro Normal file
View File

@@ -0,0 +1,79 @@
---
interface Props {
title: string;
description: string;
}
const { title, description } = Astro.props;
---
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta name="description" content={description} />
<meta name="robots" content="noindex" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Clash Display & Cabinet Grotesk from Fontshare -->
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=cabinet-grotesk@400,500,700&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
</head>
<body>
<slot />
</body>
</html>
<style is:global>
:root {
--bg: #111111;
--surface: #1C1C1C;
--text: #E8E8E8;
--text-muted: #666666;
--accent: #FFD60A;
--accent-hover: #E8C200;
--secondary: #FF6B35;
--border: #333333;
--font-display: 'Clash Display', system-ui, sans-serif;
--font-body: 'Cabinet Grotesk', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-body);
background-color: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
line-height: 1.05;
text-transform: uppercase;
letter-spacing: -0.02em;
}
a { color: inherit; text-decoration: none; }
::selection {
background: var(--accent);
color: var(--bg);
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes word-reveal {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
</style>

152
src/layouts/LayoutHome3.astro Normal file
View File

@@ -0,0 +1,152 @@
---
interface Props {
title: string;
description: string;
}
const { title, description } = Astro.props;
---
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta name="description" content={description} />
<meta name="robots" content="noindex" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
</head>
<body>
<slot />
<script>
import Lenis from 'lenis';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const lenis = new Lenis({ duration: 1.2, easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => { lenis.raf(time * 1000); });
gsap.ticker.lagSmoothing(0);
// Floating nav: hide on scroll down, show on scroll up
let lastScroll = 0;
const pill = document.getElementById('pill-nav');
window.addEventListener('scroll', () => {
const current = window.scrollY;
if (current > 100) {
if (current > lastScroll) {
pill!.style.transform = 'translateX(-50%) translateY(-120px)';
} else {
pill!.style.transform = 'translateX(-50%) translateY(0)';
}
} else {
pill!.style.transform = 'translateX(-50%) translateY(0)';
}
lastScroll = current;
});
// Scroll-triggered reveals
gsap.utils.toArray('.gsap-reveal').forEach((el: any) => {
gsap.from(el, {
y: 30,
opacity: 0,
duration: 0.9,
ease: 'power3.out',
scrollTrigger: {
trigger: el,
start: 'top 85%',
toggleActions: 'play none none none',
}
});
});
// Staggered reveals
document.querySelectorAll('.gsap-stagger').forEach((container: any) => {
gsap.from(container.children, {
y: 30,
opacity: 0,
duration: 0.8,
stagger: 0.15,
ease: 'power3.out',
scrollTrigger: {
trigger: container,
start: 'top 85%',
}
});
});
// Counter animation for stats
document.querySelectorAll('.counter').forEach((el: any) => {
const target = parseInt(el.dataset.target);
ScrollTrigger.create({
trigger: el,
start: 'top 85%',
onEnter: () => {
gsap.to({ val: 0 }, {
val: target,
duration: 1.5,
ease: 'power2.out',
onUpdate: function() {
el.textContent = Math.round(this.targets()[0].val) + '%';
}
});
},
once: true,
});
});
</script>
</body>
</html>
<style is:global>
:root {
--bg: #0E0C0A;
--surface: #1A1714;
--text: #F5F0E8;
--text-muted: #6B6458;
--accent: #C8A96E;
--accent-hover: #E8D5A3;
--secondary: #8B7355;
--border: #2A2520;
--font-display: 'Instrument Serif', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
font-family: var(--font-body);
background-color: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.15;
}
a { color: inherit; text-decoration: none; }
::selection {
background: var(--accent);
color: var(--bg);
}
@keyframes float-chevron {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(8px); opacity: 1; }
}
</style>

246
src/pages/home1.astro Normal file
View File

@@ -0,0 +1,246 @@
---
import LayoutHome1 from '../layouts/LayoutHome1.astro';
---
<LayoutHome1 title="SiteLoft — Webhosting, Development & Growth" description="SiteLoft is jouw full-service digital partner. Managed webhosting, custom web development en online groei door SEO, GEO en Google Ads.">
<!-- ═══════════════ NAVIGATION ═══════════════ -->
<header id="nav" style="position:fixed;top:0;left:0;right:0;z-index:50;background:var(--bg);transition:box-shadow 0.3s ease,border-color 0.3s ease;border-bottom:1px solid transparent;">
<div style="max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:72px;">
<a href="/home1" style="display:flex;align-items:center;gap:0.5rem;">
<div style="width:32px;height:32px;background:var(--accent);border-radius:6px;display:flex;align-items:center;justify-content:center;">
<span style="font-family:var(--font-display);font-weight:700;font-size:16px;color:white;">S</span>
</div>
<span style="font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--text);">SiteLoft</span>
</a>
<nav style="display:flex;align-items:center;gap:2rem;" class="desktop-nav">
<a href="/diensten" style="font-family:var(--font-body);font-size:0.9rem;font-weight:500;color:var(--text-muted);transition:color 0.2s;" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--text-muted)'">Diensten</a>
<a href="/pakketten" style="font-family:var(--font-body);font-size:0.9rem;font-weight:500;color:var(--text-muted);transition:color 0.2s;" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--text-muted)'">Pakketten</a>
<a href="/over" style="font-family:var(--font-body);font-size:0.9rem;font-weight:500;color:var(--text-muted);transition:color 0.2s;" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--text-muted)'">Over Ons</a>
<a href="/blog" style="font-family:var(--font-body);font-size:0.9rem;font-weight:500;color:var(--text-muted);transition:color 0.2s;" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--text-muted)'">Blog</a>
</nav>
<a href="/contact" class="btn-primary" style="font-family:var(--font-display);font-size:0.875rem;font-weight:600;background:var(--accent);color:white;padding:0.6rem 1.5rem;border-radius:8px;transition:background 0.2s;" onmouseover="this.style.background='var(--accent-hover)'" onmouseout="this.style.background='var(--accent)'">Start je project</a>
</div>
</header>
<script>
const nav = document.getElementById('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 10) {
nav!.style.borderBottomColor = 'var(--border)';
nav!.style.boxShadow = '0 1px 3px rgba(0,0,0,0.04)';
} else {
nav!.style.borderBottomColor = 'transparent';
nav!.style.boxShadow = 'none';
}
});
</script>
<!-- ═══════════════ HERO ═══════════════ -->
<section style="padding-top:72px;">
<div style="max-width:1280px;margin:0 auto;padding:6rem 2rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;" class="hero-grid">
<div>
<div class="reveal" style="display:inline-flex;align-items:center;gap:0.5rem;padding:0.35rem 1rem;border:1px solid var(--border);border-radius:999px;margin-bottom:1.5rem;">
<span style="width:6px;height:6px;border-radius:50%;background:var(--secondary);"></span>
<span style="font-family:var(--font-mono);font-size:0.75rem;color:var(--text-muted);letter-spacing:0.02em;">Nu met GEO — AI Search Optimization</span>
</div>
<h1 class="reveal reveal-d1" style="font-size:clamp(2.5rem, 5vw, 4rem);font-weight:700;color:var(--text);margin-bottom:1.5rem;">
Jouw website,<br/>
<span style="color:var(--accent);">professioneel</span> beheerd.
</h1>
<p class="reveal reveal-d2" style="font-size:1.125rem;color:var(--text-muted);max-width:480px;line-height:1.7;margin-bottom:2rem;">
Van custom development tot managed hosting tot online groei. Wij bouwen, hosten en laten je vinden — in Google én in AI search.
</p>
<div class="reveal reveal-d3" style="display:flex;gap:1rem;flex-wrap:wrap;">
<a href="/contact" style="display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-display);font-weight:600;font-size:0.95rem;background:var(--accent);color:white;padding:0.85rem 2rem;border-radius:8px;transition:all 0.2s;" onmouseover="this.style.background='var(--accent-hover)';this.style.transform='translateY(-1px)'" onmouseout="this.style.background='var(--accent)';this.style.transform='translateY(0)'">
Start je project
<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>
<a href="/pakketten" style="display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:600;font-size:0.95rem;color:var(--text);padding:0.85rem 2rem;border-radius:8px;border:1.5px solid var(--border);transition:all 0.2s;" onmouseover="this.style.borderColor='var(--text-muted)'" onmouseout="this.style.borderColor='var(--border)'">
Bekijk pakketten
</a>
</div>
</div>
<!-- Geometric visual -->
<div class="reveal hero-visual" style="position:relative;aspect-ratio:1;max-width:520px;margin-left:auto;">
<div style="position:absolute;top:10%;left:10%;width:65%;height:65%;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;"></div>
<div style="position:absolute;top:25%;left:25%;width:65%;height:65%;background:var(--accent);border-radius:12px;opacity:0.9;"></div>
<div style="position:absolute;top:40%;left:5%;width:50%;height:40%;background:var(--secondary);border-radius:12px;opacity:0.85;"></div>
<div style="position:absolute;bottom:10%;right:10%;background:white;border:1.5px solid var(--border);border-radius:10px;padding:1rem 1.25rem;box-shadow:0 4px 24px rgba(0,0,0,0.06);">
<div style="font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);margin-bottom:0.25rem;">Performance Score</div>
<div style="font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--secondary);">98<span style="font-size:0.9rem;color:var(--text-muted);">/100</span></div>
</div>
</div>
</div>
</section>
<!-- ═══════════════ DIENSTEN — BENTO GRID ═══════════════ -->
<section style="max-width:1280px;margin:0 auto;padding:4rem 2rem 6rem;">
<div class="reveal" style="margin-bottom:3rem;">
<span style="font-family:var(--font-mono);font-size:0.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:0.1em;">Wat we doen</span>
<h2 style="font-size:clamp(1.75rem, 3vw, 2.5rem);font-weight:700;margin-top:0.5rem;">Alles voor je online succes</h2>
</div>
<div class="bento-grid">
<!-- Development — groot -->
<a href="/diensten/development" class="reveal bento-main" style="grid-column:span 2;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:2.5rem;display:flex;flex-direction:column;justify-content:space-between;min-height:320px;transition:border-color 0.3s,transform 0.2s;position:relative;overflow:hidden;" onmouseover="this.style.borderColor='var(--accent)'" onmouseout="this.style.borderColor='var(--border)'">
<div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);"></div>
<div>
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;">01</span>
<h3 style="font-size:1.75rem;font-weight:700;margin-top:0.75rem;margin-bottom:1rem;">Web Development</h3>
<p style="color:var(--text-muted);max-width:500px;line-height:1.7;">Custom websites en webshops die er niet alleen goed uitzien, maar ook razendsnel laden. WordPress, Next.js, Astro — wij kiezen de beste stack voor jouw doel.</p>
</div>
<div style="display:flex;gap:0.5rem;margin-top:1.5rem;flex-wrap:wrap;">
{['WordPress', 'Next.js', 'Astro', 'WooCommerce', 'Headless CMS'].map(tech => (
<span style="font-family:var(--font-mono);font-size:0.7rem;padding:0.3rem 0.75rem;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);">{tech}</span>
))}
</div>
</a>
<!-- Hosting — klein -->
<a href="/diensten/hosting" class="reveal reveal-d1 bento-side" style="background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;transition:border-color 0.3s;position:relative;overflow:hidden;" onmouseover="this.style.borderColor='var(--secondary)'" onmouseout="this.style.borderColor='var(--border)'">
<div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--secondary);"></div>
<div>
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;">02</span>
<h3 style="font-size:1.25rem;font-weight:700;margin-top:0.75rem;margin-bottom:0.75rem;">Managed Hosting</h3>
<p style="font-size:0.9rem;color:var(--text-muted);line-height:1.6;">Geïsoleerde containers, SSL, backups, CDN. Wij regelen alles.</p>
</div>
<span style="font-family:var(--font-display);font-size:0.85rem;font-weight:600;color:var(--secondary);margin-top:1rem;">Meer info →</span>
</a>
<!-- Growth — klein -->
<a href="/diensten/growth" class="reveal reveal-d2 bento-side" style="background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;transition:border-color 0.3s;position:relative;overflow:hidden;" onmouseover="this.style.borderColor='var(--accent)'" onmouseout="this.style.borderColor='var(--border)'">
<div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);"></div>
<div>
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;">03</span>
<h3 style="font-size:1.25rem;font-weight:700;margin-top:0.75rem;margin-bottom:0.75rem;">Growth Services</h3>
<p style="font-size:0.9rem;color:var(--text-muted);line-height:1.6;">SEO, Google Ads én GEO — vindbaar in Google én in AI search.</p>
</div>
<span style="font-family:var(--font-display);font-size:0.85rem;font-weight:600;color:var(--accent);margin-top:1rem;">Meer info →</span>
</a>
</div>
</section>
<!-- ═══════════════ FEATURES — HORIZONTAL STRIP ═══════════════ -->
<section style="border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border);">
<div style="max-width:1280px;margin:0 auto;padding:0 2rem;">
<div class="feature-strip">
{[
{ num: '01', title: 'Eigen servers', desc: 'Geen reseller hosting. Wij beheren de servers zelf voor maximale snelheid.' },
{ num: '02', title: 'AI Search pioneer', desc: 'Een van de eerste bureaus in NL die je vindbaar maakt in ChatGPT en Perplexity.' },
{ num: '03', title: 'Eén aanspreekpunt', desc: 'Geen ticketnummers. Je spreekt altijd direct met wie aan je project werkt.' },
{ num: '04', title: 'Eerlijke prijzen', desc: 'Duidelijke pakketten, geen verborgen kosten, geen verrassingen achteraf.' },
].map((item, i) => (
<div class={`reveal reveal-d${i + 1} feature-item`}>
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--accent);letter-spacing:0.08em;">{item.num}</span>
<h3 style="font-size:1.125rem;font-weight:700;margin:0.75rem 0 0.5rem;">{item.title}</h3>
<p style="font-size:0.875rem;color:var(--text-muted);line-height:1.6;">{item.desc}</p>
</div>
))}
</div>
</div>
</section>
<!-- ═══════════════ GEO HIGHLIGHT — RED SECTION ═══════════════ -->
<section style="background:var(--accent);color:white;padding:6rem 2rem;">
<div style="max-width:1280px;margin:0 auto;">
<div class="reveal" style="max-width:640px;margin-bottom:3rem;">
<span style="font-family:var(--font-mono);font-size:0.75rem;opacity:0.7;text-transform:uppercase;letter-spacing:0.1em;">Generative Engine Optimization</span>
<h2 style="font-size:clamp(1.75rem, 3.5vw, 2.75rem);font-weight:700;margin-top:0.75rem;line-height:1.15;">
Gevonden worden in ChatGPT, Perplexity en Google AI.
</h2>
<p style="margin-top:1rem;opacity:0.8;line-height:1.7;font-size:1.05rem;">
25% van alle zoekopdrachten gaat al via AI. Wij zorgen dat jouw bedrijf daar verschijnt — niet je concurrent.
</p>
</div>
<div class="geo-stats">
{[
{ value: '357%', label: 'Groei AI-verwijzingen naar websites' },
{ value: '25%', label: 'Van alle search gaat nu via AI' },
{ value: '34%', label: 'Minder clicks op traditionele resultaten' },
].map((stat, i) => (
<div class={`reveal reveal-d${i + 1}`}>
<div style="font-family:var(--font-display);font-size:clamp(3rem, 8vw, 6rem);font-weight:700;line-height:1;letter-spacing:-0.03em;">{stat.value}</div>
<p style="font-size:0.875rem;opacity:0.75;margin-top:0.5rem;max-width:240px;line-height:1.5;">{stat.label}</p>
</div>
))}
</div>
<a href="/diensten/growth" class="reveal reveal-d4" style="display:inline-flex;align-items:center;gap:0.5rem;margin-top:3rem;font-family:var(--font-display);font-weight:600;font-size:0.95rem;background:white;color:var(--accent);padding:0.85rem 2rem;border-radius:8px;transition:all 0.2s;" onmouseover="this.style.transform='translateY(-1px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='none'">
Ontdek GEO
<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>
</div>
</section>
<!-- ═══════════════ CTA ═══════════════ -->
<section style="padding:8rem 2rem;text-align:center;">
<div style="max-width:640px;margin:0 auto;">
<h2 class="reveal" style="font-size:clamp(2rem, 4vw, 3rem);font-weight:700;margin-bottom:1rem;">
Klaar om te beginnen?
</h2>
<p class="reveal reveal-d1" style="color:var(--text-muted);font-size:1.05rem;line-height:1.7;margin-bottom:2rem;">
Vertel ons over je project. We reageren binnen 24 uur met een vrijblijvend voorstel.
</p>
<a href="/contact" class="reveal reveal-d2" style="display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-display);font-weight:600;font-size:1rem;background:var(--accent);color:white;padding:1rem 2.5rem;border-radius:8px;transition:all 0.2s;" onmouseover="this.style.background='var(--accent-hover)';this.style.transform='translateY(-1px)'" onmouseout="this.style.background='var(--accent)';this.style.transform='translateY(0)'">
Neem contact op
<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>
</div>
</section>
<!-- ═══════════════ FOOTER ═══════════════ -->
<footer style="border-top:1.5px solid var(--border);padding:3rem 2rem;">
<div style="max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
<span style="font-family:var(--font-body);font-size:0.8rem;color:var(--text-muted);">© 2026 SiteLoft. Alle rechten voorbehouden.</span>
<div style="display:flex;gap:1.5rem;">
<a href="/contact" style="font-size:0.8rem;color:var(--text-muted);transition:color 0.2s;" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--text-muted)'">Contact</a>
<a href="#" style="font-size:0.8rem;color:var(--text-muted);transition:color 0.2s;" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--text-muted)'">Privacy</a>
</div>
</div>
</footer>
</LayoutHome1>
<style>
.bento-grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto auto;
gap: 1rem;
}
.bento-main { grid-row: span 2; }
@media (max-width: 768px) {
.bento-grid { grid-template-columns: 1fr; }
.bento-main { grid-row: span 1; grid-column: span 1; }
.hero-grid { grid-template-columns: 1fr !important; }
.hero-visual { display: none; }
.desktop-nav { display: none !important; }
}
.feature-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.feature-item {
padding: 2.5rem 2rem;
border-right: 1.5px solid var(--border);
}
.feature-item:last-child { border-right: none; }
@media (max-width: 768px) {
.feature-strip { grid-template-columns: 1fr 1fr; }
.feature-item:nth-child(2) { border-right: none; }
.feature-item { border-bottom: 1.5px solid var(--border); }
.feature-item:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 480px) {
.feature-strip { grid-template-columns: 1fr; }
.feature-item { border-right: none; }
.feature-item:last-child { border-bottom: none; }
}
.geo-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 640px) {
.geo-stats { grid-template-columns: 1fr; gap: 2.5rem; }
}
</style>

227
src/pages/home2.astro Normal file
View File

@@ -0,0 +1,227 @@
---
import LayoutHome2 from '../layouts/LayoutHome2.astro';
---
<LayoutHome2 title="SiteLoft — Webhosting, Development & Growth" description="SiteLoft is jouw full-service digital partner. Managed webhosting, custom web development en online groei door SEO, GEO en Google Ads.">
<!-- ═══════════════ NAVIGATION (Minimal + Fullscreen Overlay) ═══════════════ -->
<header style="position:fixed;top:0;left:0;right:0;z-index:50;padding:1.5rem 2rem;">
<div style="max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;">
<a href="/home2" style="display:flex;align-items:center;gap:0.75rem;">
<div style="width:36px;height:36px;background:var(--accent);display:flex;align-items:center;justify-content:center;">
<span style="font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--bg);">S</span>
</div>
<span style="font-family:var(--font-display);font-weight:600;font-size:1.1rem;text-transform:uppercase;letter-spacing:0.05em;">SiteLoft</span>
</a>
<button id="menu-trigger" style="background:none;border:2px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:0.8rem;padding:0.5rem 1.25rem;cursor:pointer;letter-spacing:0.1em;text-transform:uppercase;transition:all 0.2s;" onmouseover="this.style.borderColor='var(--accent)';this.style.color='var(--accent)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--text)'">
MENU
</button>
</div>
</header>
<!-- Fullscreen Menu Overlay -->
<div id="menu-overlay" style="position:fixed;inset:0;z-index:100;background:var(--bg);display:none;flex-direction:column;justify-content:center;padding:3rem;">
<button id="menu-close" style="position:absolute;top:1.5rem;right:2rem;background:none;border:2px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:0.8rem;padding:0.5rem 1.25rem;cursor:pointer;letter-spacing:0.1em;text-transform:uppercase;transition:all 0.2s;" onmouseover="this.style.borderColor='var(--accent)';this.style.color='var(--accent)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--text)'">
CLOSE
</button>
<nav style="max-width:800px;margin:0 auto;width:100%;">
{[
{ num: '01', label: 'Diensten', href: '/diensten' },
{ num: '02', label: 'Pakketten', href: '/pakketten' },
{ num: '03', label: 'Over Ons', href: '/over' },
{ num: '04', label: 'Blog', href: '/blog' },
{ num: '05', label: 'Contact', href: '/contact' },
].map(item => (
<a href={item.href} class="menu-link" style="display:flex;align-items:baseline;gap:1.5rem;padding:1rem 0;border-bottom:2px solid var(--border);transition:all 0.2s;text-decoration:none;">
<span style="font-family:var(--font-mono);font-size:0.85rem;color:var(--text-muted);min-width:2.5rem;">{item.num}</span>
<span style="font-family:var(--font-display);font-size:clamp(2rem, 6vw, 4.5rem);font-weight:600;text-transform:uppercase;letter-spacing:-0.01em;">{item.label}</span>
</a>
))}
<div style="margin-top:3rem;font-family:var(--font-mono);font-size:0.8rem;color:var(--text-muted);">
info@siteloft.nl
</div>
</nav>
</div>
<script>
const trigger = document.getElementById('menu-trigger');
const overlay = document.getElementById('menu-overlay');
const close = document.getElementById('menu-close');
trigger?.addEventListener('click', () => { overlay!.style.display = 'flex'; document.body.style.overflow = 'hidden'; });
close?.addEventListener('click', () => { overlay!.style.display = 'none'; document.body.style.overflow = ''; });
document.querySelectorAll('.menu-link').forEach(link => {
link.addEventListener('mouseover', () => { (link as HTMLElement).style.borderBottomColor = 'var(--accent)'; (link as HTMLElement).style.color = 'var(--accent)'; });
link.addEventListener('mouseout', () => { (link as HTMLElement).style.borderBottomColor = 'var(--border)'; (link as HTMLElement).style.color = 'var(--text)'; });
});
</script>
<!-- ═══════════════ HERO — FULLSCREEN TYPOGRAPHIC ═══════════════ -->
<section style="min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 2rem;position:relative;">
<div style="max-width:1400px;margin:0 auto;width:100%;">
<div style="overflow:hidden;margin-bottom:0.25rem;">
<h1 class="hero-word" style="font-size:clamp(3rem, 10vw, 8rem);font-weight:700;line-height:0.95;animation:word-reveal 0.8s cubic-bezier(0.22,1,0.36,1) 0.2s both;">JOUW WEBSITE,</h1>
</div>
<div style="overflow:hidden;margin-bottom:0.25rem;">
<h1 class="hero-word" style="font-size:clamp(3rem, 10vw, 8rem);font-weight:700;line-height:0.95;animation:word-reveal 0.8s cubic-bezier(0.22,1,0.36,1) 0.4s both;">PROFESSIONEEL</h1>
</div>
<div style="overflow:hidden;">
<h1 class="hero-word" style="font-size:clamp(3rem, 10vw, 8rem);font-weight:700;line-height:0.95;color:var(--accent);animation:word-reveal 0.8s cubic-bezier(0.22,1,0.36,1) 0.6s both;">BEHEERD<span style="color:var(--secondary);">.</span></h1>
</div>
<div style="margin-top:2.5rem;display:flex;align-items:flex-start;gap:3rem;flex-wrap:wrap;">
<p style="font-family:var(--font-mono);font-size:0.85rem;color:var(--text-muted);max-width:420px;line-height:1.7;animation:word-reveal 0.8s cubic-bezier(0.22,1,0.36,1) 0.8s both;">
Van custom development tot managed hosting tot online groei. Wij bouwen, hosten en laten je vinden — in Google én in AI search.
</p>
<div style="display:flex;gap:0.75rem;animation:word-reveal 0.8s cubic-bezier(0.22,1,0.36,1) 1s both;">
<a href="/contact" style="font-family:var(--font-display);font-weight:600;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;background:var(--accent);color:var(--bg);padding:0.85rem 2rem;border:2px solid var(--accent);transition:all 0.2s;" onmouseover="this.style.background='transparent';this.style.color='var(--accent)'" onmouseout="this.style.background='var(--accent)';this.style.color='var(--bg)'">
START PROJECT
</a>
<a href="/pakketten" style="font-family:var(--font-display);font-weight:600;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text);padding:0.85rem 2rem;border:2px solid var(--border);transition:all 0.2s;" onmouseover="this.style.borderColor='var(--text)'" onmouseout="this.style.borderColor='var(--border)'">
PAKKETTEN
</a>
</div>
</div>
</div>
</section>
<!-- ═══════════════ MARQUEE TICKER ═══════════════ -->
<section style="border-top:2px solid var(--border);border-bottom:2px solid var(--border);overflow:hidden;padding:1rem 0;">
<div style="display:flex;white-space:nowrap;animation:marquee 25s linear infinite;">
{Array(2).fill(null).map(() => (
<div style="display:flex;align-items:center;gap:2rem;padding-right:2rem;">
{['ASTRO', 'NEXT.JS', 'WORDPRESS', 'DOCKER', 'GEO', 'MANAGED HOSTING', 'SSL', 'CDN', 'SEO', 'GOOGLE ADS'].map(item => (
<span style="font-family:var(--font-mono);font-size:0.8rem;color:var(--accent);letter-spacing:0.08em;display:flex;align-items:center;gap:2rem;">
{item}<span style="color:var(--border);">●</span>
</span>
))}
</div>
))}
</div>
</section>
<!-- ═══════════════ DIENSTEN — BORDERED GRID ═══════════════ -->
<section style="max-width:1400px;margin:0 auto;padding:6rem 2rem;">
<div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3rem;flex-wrap:wrap;gap:1rem;">
<div>
<span style="font-family:var(--font-mono);font-size:0.75rem;color:var(--accent);letter-spacing:0.1em;">WAT WE DOEN</span>
<h2 style="font-size:clamp(1.75rem, 4vw, 3rem);font-weight:700;margin-top:0.5rem;">DRIE PIJLERS</h2>
</div>
</div>
<div class="service-grid">
{[
{ num: '01', title: 'Web Development', desc: 'Custom websites en webshops. WordPress, Next.js, Astro — wij kiezen de beste stack voor jouw doel. Pixel-perfect, razendsnel, gebouwd om te schalen.' },
{ num: '02', title: 'Managed Hosting', desc: 'Geen shared hosting met 200 andere sites. Jouw website draait geïsoleerd op onze eigen servers. SSL, backups, CDN en updates — wij regelen alles.' },
{ num: '03', title: 'Growth Services', desc: 'SEO, Google Ads én GEO — Generative Engine Optimization. Wij zorgen dat je gevonden wordt in Google én in AI search zoals ChatGPT en Perplexity.' },
].map((service, i) => (
<a href={`/diensten/${['development','hosting','growth'][i]}`} class="service-card" style="border:2px solid var(--border);padding:2.5rem;display:flex;flex-direction:column;gap:1.5rem;transition:all 0.3s;">
<span style="font-family:var(--font-mono);font-size:2.5rem;font-weight:600;color:var(--border);transition:color 0.3s;">{service.num}</span>
<h3 style="font-size:1.5rem;font-weight:600;">{service.title}</h3>
<p style="font-family:var(--font-body);font-size:0.9rem;color:var(--text-muted);line-height:1.7;text-transform:none;">{service.desc}</p>
<span style="font-family:var(--font-mono);font-size:0.8rem;letter-spacing:0.05em;margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--border);transition:color 0.3s;">BEKIJK →</span>
</a>
))}
</div>
</section>
<!-- ═══════════════ GEO HIGHLIGHT — SPLIT ═══════════════ -->
<section style="border-top:2px solid var(--border);border-bottom:2px solid var(--border);">
<div style="max-width:1400px;margin:0 auto;padding:0 2rem;">
<div class="geo-split">
<!-- Left: Stats -->
<div style="padding:4rem 0;border-right:2px solid var(--border);" class="geo-left">
{[
{ value: '357%', label: 'Groei AI-verwijzingen' },
{ value: '25%', label: 'Search via AI platformen' },
{ value: '34%', label: 'Minder traditionele clicks' },
].map((stat, i) => (
<div style={`padding:2rem 2rem 2rem 0;${i < 2 ? 'border-bottom:1px solid var(--border);' : ''}`}>
<div style="font-family:var(--font-display);font-size:clamp(3rem, 6vw, 5rem);font-weight:700;color:var(--accent);line-height:1;">{stat.value}</div>
<p style="font-family:var(--font-mono);font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;letter-spacing:0.02em;">{stat.label}</p>
</div>
))}
</div>
<!-- Right: Text -->
<div style="padding:4rem 0 4rem 3rem;display:flex;flex-direction:column;justify-content:center;" class="geo-right">
<span style="font-family:var(--font-mono);font-size:0.75rem;color:var(--secondary);letter-spacing:0.1em;text-transform:uppercase;">GEO — AI SEARCH</span>
<h2 style="font-size:clamp(1.5rem, 3vw, 2.25rem);font-weight:700;margin-top:1rem;margin-bottom:1.5rem;">GEVONDEN WORDEN IN CHATGPT.</h2>
<p style="font-family:var(--font-body);color:var(--text-muted);line-height:1.7;max-width:480px;margin-bottom:2rem;text-transform:none;">
25% van alle zoekopdrachten gaat via AI-platformen. SiteLoft is een van de eerste bureaus in Nederland die je actief vindbaar maakt in ChatGPT, Perplexity en Google AI Overviews.
</p>
<a href="/diensten/growth" style="font-family:var(--font-display);font-weight:600;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--bg);background:var(--accent);padding:0.85rem 2rem;border:2px solid var(--accent);display:inline-block;width:fit-content;transition:all 0.2s;" onmouseover="this.style.background='transparent';this.style.color='var(--accent)'" onmouseout="this.style.background='var(--accent)';this.style.color='var(--bg)'">
ONTDEK GEO →
</a>
</div>
</div>
</div>
</section>
<!-- ═══════════════ CTA — YELLOW BLOCK ═══════════════ -->
<section style="background:var(--accent);color:var(--bg);padding:6rem 2rem;">
<div style="max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2rem;">
<div>
<h2 style="font-size:clamp(2rem, 5vw, 3.5rem);font-weight:700;line-height:1.05;">KLAAR OM TE<br/>BEGINNEN?</h2>
<p style="font-family:var(--font-mono);font-size:0.85rem;color:var(--bg);opacity:0.7;margin-top:1rem;max-width:400px;line-height:1.6;text-transform:none;">
Vertel ons over je project. We reageren binnen 24 uur met een vrijblijvend voorstel.
</p>
</div>
<a href="/contact" style="font-family:var(--font-display);font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:0.05em;background:var(--bg);color:var(--accent);padding:1rem 3rem;border:2px solid var(--bg);transition:all 0.2s;" onmouseover="this.style.background='transparent';this.style.color='var(--bg)';this.style.borderColor='var(--bg)'" onmouseout="this.style.background='var(--bg)';this.style.color='var(--accent)'">
START PROJECT →
</a>
</div>
</section>
<!-- ═══════════════ FOOTER ═══════════════ -->
<footer style="border-top:2px solid var(--border);padding:2rem;">
<div style="max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
<span style="font-family:var(--font-mono);font-size:0.75rem;color:var(--text-muted);">© 2026 SITELOFT</span>
<div style="display:flex;gap:2rem;">
<a href="/contact" style="font-family:var(--font-mono);font-size:0.75rem;color:var(--text-muted);letter-spacing:0.05em;transition:color 0.2s;" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-muted)'">CONTACT</a>
<a href="#" style="font-family:var(--font-mono);font-size:0.75rem;color:var(--text-muted);letter-spacing:0.05em;transition:color 0.2s;" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-muted)'">PRIVACY</a>
</div>
</div>
</footer>
</LayoutHome2>
<style>
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.service-card:hover {
background: var(--accent) !important;
color: var(--bg) !important;
border-color: var(--accent) !important;
}
.service-card:hover span,
.service-card:hover p {
color: var(--bg) !important;
}
/* Remove gap between cards — shared borders */
.service-card + .service-card { border-left: none; }
.geo-split {
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
.service-grid {
grid-template-columns: 1fr;
}
.service-card + .service-card {
border-left: 2px solid var(--border);
border-top: none;
}
.geo-split {
grid-template-columns: 1fr;
}
.geo-left {
border-right: none !important;
border-bottom: 2px solid var(--border);
}
.geo-right {
padding-left: 0 !important;
padding-top: 2rem !important;
}
}
</style>

227
src/pages/home3.astro Normal file
View File

@@ -0,0 +1,227 @@
---
import LayoutHome3 from '../layouts/LayoutHome3.astro';
---
<LayoutHome3 title="SiteLoft — Webhosting, Development & Growth" description="SiteLoft is jouw full-service digital partner. Managed webhosting, custom web development en online groei door SEO, GEO en Google Ads.">
<!-- ═══════════════ FLOATING PILL NAVIGATION ═══════════════ -->
<nav id="pill-nav" style="position:fixed;top:1.25rem;left:50%;transform:translateX(-50%);z-index:50;background:rgba(14,12,10,0.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:999px;padding:0.5rem 0.5rem 0.5rem 1.25rem;display:flex;align-items:center;gap:0.25rem;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);">
<a href="/home3" style="display:flex;align-items:center;gap:0.5rem;margin-right:0.75rem;">
<div style="width:28px;height:28px;background:linear-gradient(135deg, var(--accent), var(--secondary));border-radius:6px;display:flex;align-items:center;justify-content:center;">
<span style="font-family:var(--font-display);font-size:15px;color:var(--bg);font-style:italic;">S</span>
</div>
</a>
<a href="/diensten" class="pill-link" style="font-family:var(--font-body);font-size:0.825rem;font-weight:500;color:var(--text-muted);padding:0.45rem 0.85rem;border-radius:999px;transition:all 0.2s;">Diensten</a>
<a href="/pakketten" class="pill-link" style="font-family:var(--font-body);font-size:0.825rem;font-weight:500;color:var(--text-muted);padding:0.45rem 0.85rem;border-radius:999px;transition:all 0.2s;">Pakketten</a>
<a href="/over" class="pill-link" style="font-family:var(--font-body);font-size:0.825rem;font-weight:500;color:var(--text-muted);padding:0.45rem 0.85rem;border-radius:999px;transition:all 0.2s;">Over</a>
<a href="/blog" class="pill-link" style="font-family:var(--font-body);font-size:0.825rem;font-weight:500;color:var(--text-muted);padding:0.45rem 0.85rem;border-radius:999px;transition:all 0.2s;">Blog</a>
<a href="/contact" style="font-family:var(--font-body);font-size:0.825rem;font-weight:600;color:var(--bg);background:var(--accent);padding:0.45rem 1.1rem;border-radius:999px;transition:all 0.2s;margin-left:0.25rem;" onmouseover="this.style.background='var(--accent-hover)'" onmouseout="this.style.background='var(--accent)'">Contact</a>
</nav>
<script>
document.querySelectorAll('.pill-link').forEach(link => {
link.addEventListener('mouseover', () => { (link as HTMLElement).style.color = 'var(--text)'; (link as HTMLElement).style.background = 'rgba(255,255,255,0.05)'; });
link.addEventListener('mouseout', () => { (link as HTMLElement).style.color = 'var(--text-muted)'; (link as HTMLElement).style.background = 'transparent'; });
});
</script>
<!-- ═══════════════ HERO ═══════════════ -->
<section style="min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 2rem;position:relative;overflow:hidden;">
<!-- Warm radial glow -->
<div style="position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle, rgba(200,169,110,0.06) 0%, transparent 70%);pointer-events:none;"></div>
<div style="position:relative;z-index:1;max-width:800px;">
<div style="display:inline-flex;align-items:center;gap:0.5rem;padding:0.35rem 1rem;border:1px solid var(--border);border-radius:999px;margin-bottom:2rem;opacity:0;animation:fadeIn 0.8s 0.3s forwards;">
<span style="width:6px;height:6px;border-radius:50%;background:var(--accent);"></span>
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);">Nu met GEO — AI Search Optimization</span>
</div>
<h1 style="font-size:clamp(2.75rem, 6vw, 4.5rem);color:var(--text);margin-bottom:1.5rem;opacity:0;animation:fadeIn 0.8s 0.5s forwards;">
Jouw website,<br/>
<em style="color:var(--accent);">professioneel</em> beheerd.
</h1>
<p style="font-family:var(--font-body);font-size:1.1rem;color:var(--text-muted);max-width:560px;margin:0 auto 2.5rem;line-height:1.75;opacity:0;animation:fadeIn 0.8s 0.7s forwards;">
Van custom development tot managed hosting tot online groei. Wij bouwen, hosten en laten je vinden — in Google én in AI search.
</p>
<div style="display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;opacity:0;animation:fadeIn 0.8s 0.9s forwards;">
<a href="/contact" style="font-family:var(--font-body);font-weight:600;font-size:0.95rem;background:var(--accent);color:var(--bg);padding:0.9rem 2.25rem;border-radius:10px;transition:all 0.3s;" onmouseover="this.style.background='var(--accent-hover)';this.style.transform='translateY(-2px)';this.style.boxShadow='0 12px 32px rgba(200,169,110,0.2)'" onmouseout="this.style.background='var(--accent)';this.style.transform='translateY(0)';this.style.boxShadow='none'">
Start je project
</a>
<a href="/pakketten" style="font-family:var(--font-body);font-weight:500;font-size:0.95rem;color:var(--text-muted);padding:0.9rem 2.25rem;border:1px solid var(--border);border-radius:10px;transition:all 0.3s;" onmouseover="this.style.borderColor='var(--secondary)';this.style.color='var(--text)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--text-muted)'">
Bekijk pakketten
</a>
</div>
</div>
<!-- Scroll indicator -->
<div style="position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.5rem;">
<span style="font-family:var(--font-mono);font-size:0.65rem;color:var(--text-muted);letter-spacing:0.1em;">SCROLL</span>
<svg width="16" height="24" viewBox="0 0 16 24" fill="none" style="animation:float-chevron 2s ease-in-out infinite;">
<path d="M8 4v16m0 0l-5-5m5 5l5-5" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</section>
<!-- ═══════════════ DIENSTEN — BENTO GRID ═══════════════ -->
<section style="max-width:1200px;margin:0 auto;padding:6rem 2rem;">
<div class="gsap-reveal" style="margin-bottom:3rem;">
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--accent);text-transform:uppercase;letter-spacing:0.12em;">Wat we doen</span>
<h2 style="font-size:clamp(1.75rem, 3.5vw, 2.75rem);margin-top:0.75rem;">Alles voor je online succes,<br/>onder één dak.</h2>
</div>
<div class="bento-grid gsap-stagger">
<!-- Development — large -->
<a href="/diensten/development" class="bento-main" style="grid-column:span 2;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2.5rem;display:flex;flex-direction:column;justify-content:space-between;min-height:300px;transition:all 0.4s;position:relative;overflow:hidden;">
<div>
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);letter-spacing:0.08em;">01</span>
<h3 style="font-size:clamp(1.5rem, 2.5vw, 2rem);margin-top:0.75rem;margin-bottom:1rem;">Web Development</h3>
<p style="font-family:var(--font-body);color:var(--text-muted);max-width:480px;line-height:1.7;">Custom websites en webshops die razendsnel laden. WordPress, Next.js, Astro — wij kiezen de beste stack voor jouw doel.</p>
</div>
<div style="display:flex;gap:0.5rem;margin-top:1.5rem;flex-wrap:wrap;">
{['WordPress', 'Next.js', 'Astro', 'WooCommerce'].map(t => (
<span style="font-family:var(--font-mono);font-size:0.65rem;padding:0.3rem 0.7rem;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);">{t}</span>
))}
</div>
</a>
<!-- Hosting -->
<a href="/diensten/hosting" class="bento-side" style="background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;transition:all 0.4s;">
<div>
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);letter-spacing:0.08em;">02</span>
<h3 style="font-size:1.25rem;margin-top:0.75rem;margin-bottom:0.75rem;">Managed Hosting</h3>
<p style="font-family:var(--font-body);font-size:0.875rem;color:var(--text-muted);line-height:1.65;">Geïsoleerde containers, SSL, backups, CDN. Wij regelen alles.</p>
</div>
<span style="font-family:var(--font-body);font-size:0.85rem;font-weight:500;color:var(--accent);margin-top:1rem;">Meer info →</span>
</a>
<!-- Growth -->
<a href="/diensten/growth" class="bento-side" style="background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;transition:all 0.4s;">
<div>
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);letter-spacing:0.08em;">03</span>
<h3 style="font-size:1.25rem;margin-top:0.75rem;margin-bottom:0.75rem;">Growth Services</h3>
<p style="font-family:var(--font-body);font-size:0.875rem;color:var(--text-muted);line-height:1.65;">SEO, Google Ads én GEO — vindbaar in Google én in AI search.</p>
</div>
<span style="font-family:var(--font-body);font-size:0.85rem;font-weight:500;color:var(--accent);margin-top:1rem;">Meer info →</span>
</a>
</div>
</section>
<!-- ═══════════════ FEATURES — SCROLL DRIVEN ═══════════════ -->
<section style="max-width:1200px;margin:0 auto;padding:4rem 2rem 6rem;">
<div class="gsap-reveal" style="text-align:center;margin-bottom:4rem;">
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--accent);text-transform:uppercase;letter-spacing:0.12em;">Waarom SiteLoft</span>
<h2 style="font-size:clamp(1.75rem, 3.5vw, 2.75rem);margin-top:0.75rem;">Eén partner<br/>voor <em style="color:var(--accent);">alles.</em></h2>
</div>
<div class="features-list gsap-stagger">
{[
{ num: '01', title: 'Eigen servers, volledige controle', desc: 'Geen reseller hosting. Wij beheren de servers zelf voor maximale snelheid en betrouwbaarheid.' },
{ num: '02', title: 'Voorloper in AI Search', desc: 'Een van de eerste bureaus in Nederland die je actief vindbaar maakt in ChatGPT, Perplexity en Google AI.' },
{ num: '03', title: 'Persoonlijk en direct', desc: 'Geen ticketnummers of wachtrijen. Je spreekt altijd direct met de persoon die aan je project werkt.' },
].map(item => (
<div style="display:grid;grid-template-columns:4rem 1fr;gap:2rem;padding:2.5rem 0;border-bottom:1px solid var(--border);">
<span style="font-family:var(--font-display);font-size:2rem;color:var(--accent);font-style:italic;">{item.num}</span>
<div>
<h3 style="font-size:1.35rem;margin-bottom:0.5rem;">{item.title}</h3>
<p style="font-family:var(--font-body);color:var(--text-muted);line-height:1.7;max-width:520px;">{item.desc}</p>
</div>
</div>
))}
</div>
</section>
<!-- ═══════════════ GEO HIGHLIGHT — AMBER WORLD ═══════════════ -->
<section class="geo-section" style="position:relative;padding:6rem 2rem;overflow:hidden;">
<!-- Amber wash background -->
<div style="position:absolute;inset:0;background:linear-gradient(180deg, var(--bg) 0%, rgba(200,169,110,0.06) 30%, rgba(200,169,110,0.08) 70%, var(--bg) 100%);pointer-events:none;"></div>
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:400px;background:radial-gradient(ellipse, rgba(200,169,110,0.08) 0%, transparent 70%);pointer-events:none;"></div>
<div style="position:relative;z-index:1;max-width:1200px;margin:0 auto;">
<div class="gsap-reveal" style="text-align:center;margin-bottom:4rem;">
<span style="font-family:var(--font-mono);font-size:0.7rem;color:var(--accent);text-transform:uppercase;letter-spacing:0.12em;">Generative Engine Optimization</span>
<h2 style="font-size:clamp(2rem, 4vw, 3.25rem);margin-top:1rem;max-width:700px;margin-left:auto;margin-right:auto;">
<em style="color:var(--accent);">Gevonden worden</em> in ChatGPT, Perplexity en Google AI.
</h2>
<p style="font-family:var(--font-body);color:var(--text-muted);margin-top:1rem;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.7;">
25% van alle zoekopdrachten gaat al via AI. Wij zorgen dat jouw bedrijf daar verschijnt — niet je concurrent.
</p>
</div>
<div class="geo-stats gsap-stagger" style="display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center;margin-bottom:3rem;">
<div>
<div class="counter" data-target="357" style="font-family:var(--font-display);font-size:clamp(3rem, 6vw, 4.5rem);color:var(--accent);font-style:italic;line-height:1;">0%</div>
<p style="font-family:var(--font-body);font-size:0.85rem;color:var(--text-muted);margin-top:0.5rem;">Groei AI-verwijzingen</p>
</div>
<div>
<div class="counter" data-target="25" style="font-family:var(--font-display);font-size:clamp(3rem, 6vw, 4.5rem);color:var(--accent);font-style:italic;line-height:1;">0%</div>
<p style="font-family:var(--font-body);font-size:0.85rem;color:var(--text-muted);margin-top:0.5rem;">Search via AI platformen</p>
</div>
<div>
<div class="counter" data-target="34" style="font-family:var(--font-display);font-size:clamp(3rem, 6vw, 4.5rem);color:var(--accent);font-style:italic;line-height:1;">0%</div>
<p style="font-family:var(--font-body);font-size:0.85rem;color:var(--text-muted);margin-top:0.5rem;">Minder traditionele clicks</p>
</div>
</div>
<div class="gsap-reveal" style="text-align:center;">
<a href="/diensten/growth" style="display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-body);font-weight:600;font-size:0.95rem;background:var(--accent);color:var(--bg);padding:0.9rem 2.25rem;border-radius:10px;transition:all 0.3s;" onmouseover="this.style.background='var(--accent-hover)';this.style.transform='translateY(-2px)';this.style.boxShadow='0 12px 32px rgba(200,169,110,0.2)'" onmouseout="this.style.background='var(--accent)';this.style.transform='translateY(0)';this.style.boxShadow='none'">
Ontdek GEO
<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>
</div>
</div>
</section>
<!-- ═══════════════ CTA ═══════════════ -->
<section style="padding:8rem 2rem;text-align:center;">
<div style="max-width:640px;margin:0 auto;">
<h2 class="gsap-reveal" style="font-size:clamp(2rem, 4vw, 3rem);margin-bottom:1rem;">
Klaar om te <em style="color:var(--accent);">beginnen?</em>
</h2>
<p class="gsap-reveal" style="font-family:var(--font-body);color:var(--text-muted);font-size:1.05rem;line-height:1.7;margin-bottom:2rem;">
Vertel ons over je project. We reageren binnen 24 uur met een vrijblijvend voorstel.
</p>
<a href="/contact" class="gsap-reveal" style="display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-body);font-weight:600;font-size:1rem;background:var(--accent);color:var(--bg);padding:1rem 2.5rem;border-radius:10px;transition:all 0.3s;" onmouseover="this.style.background='var(--accent-hover)';this.style.transform='translateY(-2px)';this.style.boxShadow='0 12px 32px rgba(200,169,110,0.2)'" onmouseout="this.style.background='var(--accent)';this.style.transform='translateY(0)';this.style.boxShadow='none'">
Neem contact op
<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>
</div>
</section>
<!-- ═══════════════ FOOTER ═══════════════ -->
<footer style="border-top:1px solid var(--border);padding:3rem 2rem;">
<div style="max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
<span style="font-family:var(--font-body);font-size:0.8rem;color:var(--text-muted);">© 2026 SiteLoft. Alle rechten voorbehouden.</span>
<div style="display:flex;gap:1.5rem;">
<a href="/contact" style="font-size:0.8rem;color:var(--text-muted);transition:color 0.2s;" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-muted)'">Contact</a>
<a href="#" style="font-size:0.8rem;color:var(--text-muted);transition:color 0.2s;" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-muted)'">Privacy</a>
</div>
</div>
</footer>
</LayoutHome3>
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.bento-grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto auto;
gap: 1rem;
}
.bento-main { grid-row: span 2; }
.bento-main:hover,
.bento-side:hover {
border-color: var(--accent) !important;
box-shadow: 0 0 40px rgba(200,169,110,0.08);
}
.features-list > div:first-child { border-top: 1px solid var(--border); }
@media (max-width: 768px) {
.bento-grid { grid-template-columns: 1fr; }
.bento-main { grid-row: span 1; grid-column: span 1; }
.geo-stats { grid-template-columns: 1fr !important; gap: 2rem !important; }
#pill-nav { display: none; }
.features-list > div { grid-template-columns: 3rem 1fr !important; gap: 1rem !important; }
}
</style>