Initial commit: SiteLoft.nl website
Full-service digital agency website built with Astro 5, Tailwind CSS v4, and TypeScript. Includes 10 pages: homepage, diensten (development, hosting, growth), pakketten, over ons, blog met eerste GEO-artikel, en contact. Features: dark theme design system, glassmorphism UI, structured data/schema markup voor SEO en GEO, content collections voor blog, responsive design, sitemap generation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ubuntu
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# jetbrains setting folder
|
||||||
|
.idea/
|
||||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["astro-build.astro-vscode"],
|
||||||
|
"unwantedRecommendations": []
|
||||||
|
}
|
||||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "./node_modules/.bin/astro dev",
|
||||||
|
"name": "Development server",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
43
README.md
Normal file
43
README.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# Astro Starter Kit: Minimal
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm create astro@latest -- --template minimal
|
||||||
|
```
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```text
|
||||||
|
/
|
||||||
|
├── public/
|
||||||
|
├── src/
|
||||||
|
│ └── pages/
|
||||||
|
│ └── index.astro
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||||
|
|
||||||
|
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||||
|
|
||||||
|
Any static assets, like images, can be placed in the `public/` directory.
|
||||||
|
|
||||||
|
## 🧞 Commands
|
||||||
|
|
||||||
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
| :------------------------ | :----------------------------------------------- |
|
||||||
|
| `npm install` | Installs dependencies |
|
||||||
|
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||||
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
| `npm run preview` | Preview your build locally, before deploying |
|
||||||
|
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||||
|
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||||
|
|
||||||
|
## 👀 Want to learn more?
|
||||||
|
|
||||||
|
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||||
19
astro.config.mjs
Normal file
19
astro.config.mjs
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
// @ts-check
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
|
import sitemap from '@astrojs/sitemap';
|
||||||
|
import mdx from '@astrojs/mdx';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
site: 'https://siteloft.nl',
|
||||||
|
integrations: [sitemap(), mdx()],
|
||||||
|
vite: {
|
||||||
|
plugins: [tailwindcss()]
|
||||||
|
},
|
||||||
|
markdown: {
|
||||||
|
shikiConfig: {
|
||||||
|
theme: 'github-dark',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
6919
package-lock.json
generated
Normal file
6919
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
package.json
Normal file
20
package.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "siteloft",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tailwindcss/vite": "^4.2.1",
|
||||||
|
"astro": "^5.17.1",
|
||||||
|
"tailwindcss": "^4.2.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@astrojs/mdx": "^4.3.13",
|
||||||
|
"@astrojs/sitemap": "^3.7.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 655 B |
10
public/favicon.svg
Normal file
10
public/favicon.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||||
|
<rect width="32" height="32" rx="8" fill="url(#grad)"/>
|
||||||
|
<text x="16" y="22" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="18" font-weight="800" fill="#0a0e1a">S</text>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="grad" x1="0" y1="0" x2="32" y2="32">
|
||||||
|
<stop offset="0%" stop-color="#22d3ee"/>
|
||||||
|
<stop offset="100%" stop-color="#06b6d4"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 479 B |
105
src/components/Footer.astro
Normal file
105
src/components/Footer.astro
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
---
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
{ href: '/diensten/development', label: 'Web Development' },
|
||||||
|
{ href: '/diensten/hosting', label: 'Managed Hosting' },
|
||||||
|
{ href: '/diensten/growth', label: 'Growth Services' },
|
||||||
|
{ href: '/pakketten', label: 'Pakketten & Pricing' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const company = [
|
||||||
|
{ href: '/over', label: 'Over SiteLoft' },
|
||||||
|
{ href: '/blog', label: 'Blog & Insights' },
|
||||||
|
{ href: '/contact', label: 'Contact' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const legal = [
|
||||||
|
{ href: '/privacy', label: 'Privacybeleid' },
|
||||||
|
{ href: '/voorwaarden', label: 'Algemene Voorwaarden' },
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<footer class="relative border-t border-slate-800/60">
|
||||||
|
<!-- Glow effect -->
|
||||||
|
<div class="absolute inset-x-0 -top-px h-px bg-gradient-to-r from-transparent via-accent-500/30 to-transparent"></div>
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<!-- Main footer -->
|
||||||
|
<div class="grid grid-cols-1 gap-12 py-16 md:grid-cols-4">
|
||||||
|
<!-- Brand -->
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<a href="/" class="flex items-center gap-2.5 mb-4">
|
||||||
|
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-accent-400 to-accent-600">
|
||||||
|
<span class="text-base font-bold text-slate-950">S</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold text-slate-50 tracking-tight">
|
||||||
|
Site<span class="text-accent-400">Loft</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<p class="text-sm text-slate-500 leading-relaxed">
|
||||||
|
Jouw website, professioneel beheerd. Van development tot hosting tot online groei.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Services -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-semibold text-slate-200 mb-4">Diensten</h3>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
{services.map((link) => (
|
||||||
|
<li>
|
||||||
|
<a href={link.href} class="text-sm text-slate-500 hover:text-accent-400 transition-colors">
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Company -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-semibold text-slate-200 mb-4">SiteLoft</h3>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
{company.map((link) => (
|
||||||
|
<li>
|
||||||
|
<a href={link.href} class="text-sm text-slate-500 hover:text-accent-400 transition-colors">
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact / CTA -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-semibold text-slate-200 mb-4">Klaar om te starten?</h3>
|
||||||
|
<p class="text-sm text-slate-500 mb-4">
|
||||||
|
Laten we samen bespreken hoe we jouw online aanwezigheid naar het volgende niveau tillen.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
class="inline-flex items-center gap-2 rounded-lg bg-slate-800 px-4 py-2.5 text-sm font-medium text-slate-200 ring-1 ring-slate-700 transition-all hover:bg-slate-700 hover:text-accent-400"
|
||||||
|
>
|
||||||
|
Neem contact op
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom bar -->
|
||||||
|
<div class="flex flex-col items-center justify-between gap-4 border-t border-slate-800/60 py-6 sm:flex-row">
|
||||||
|
<p class="text-xs text-slate-600">
|
||||||
|
© {currentYear} SiteLoft. Alle rechten voorbehouden.
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-6">
|
||||||
|
{legal.map((link) => (
|
||||||
|
<a href={link.href} class="text-xs text-slate-600 hover:text-slate-400 transition-colors">
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
137
src/components/Header.astro
Normal file
137
src/components/Header.astro
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
---
|
||||||
|
const currentPath = Astro.url.pathname;
|
||||||
|
|
||||||
|
const navLinks = [
|
||||||
|
{ href: '/diensten', label: 'Diensten' },
|
||||||
|
{ href: '/pakketten', label: 'Pakketten' },
|
||||||
|
{ href: '/over', label: 'Over Ons' },
|
||||||
|
{ href: '/blog', label: 'Blog' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function isActive(href: string): boolean {
|
||||||
|
if (href === '/') return currentPath === '/';
|
||||||
|
return currentPath.startsWith(href);
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<header id="header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
|
||||||
|
<nav class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex h-20 items-center justify-between">
|
||||||
|
<!-- Logo -->
|
||||||
|
<a href="/" class="flex items-center gap-2.5 group">
|
||||||
|
<div class="relative flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-accent-400 to-accent-600 transition-transform group-hover:scale-105">
|
||||||
|
<span class="text-lg font-bold text-slate-950">S</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-xl font-bold text-slate-50 tracking-tight">
|
||||||
|
Site<span class="text-accent-400">Loft</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Desktop Navigation -->
|
||||||
|
<div class="hidden md:flex items-center gap-1">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<a
|
||||||
|
href={link.href}
|
||||||
|
class:list={[
|
||||||
|
'relative px-4 py-2 text-sm font-medium rounded-lg transition-colors',
|
||||||
|
isActive(link.href)
|
||||||
|
? 'text-accent-400'
|
||||||
|
: 'text-slate-400 hover:text-slate-100',
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
{isActive(link.href) && (
|
||||||
|
<span class="absolute bottom-0 left-1/2 -translate-x-1/2 h-0.5 w-5 rounded-full bg-accent-400" />
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA Button -->
|
||||||
|
<div class="hidden md:flex items-center gap-3">
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
class="inline-flex items-center gap-2 rounded-lg bg-accent-500 px-5 py-2.5 text-sm font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-lg hover:shadow-accent-500/25"
|
||||||
|
>
|
||||||
|
Start je project
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile menu button -->
|
||||||
|
<button
|
||||||
|
id="mobile-menu-btn"
|
||||||
|
class="md:hidden flex items-center justify-center w-10 h-10 rounded-lg text-slate-400 hover:text-slate-100 hover:bg-slate-800/50 transition-colors"
|
||||||
|
aria-label="Menu openen"
|
||||||
|
>
|
||||||
|
<svg id="menu-icon" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
<svg id="close-icon" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Mobile menu -->
|
||||||
|
<div id="mobile-menu" class="hidden md:hidden">
|
||||||
|
<div class="mx-4 mt-2 rounded-2xl glass p-4 space-y-1">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<a
|
||||||
|
href={link.href}
|
||||||
|
class:list={[
|
||||||
|
'block rounded-lg px-4 py-3 text-sm font-medium transition-colors',
|
||||||
|
isActive(link.href)
|
||||||
|
? 'text-accent-400 bg-accent-500/10'
|
||||||
|
: 'text-slate-300 hover:text-slate-100 hover:bg-slate-800/50',
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
<div class="pt-2">
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
class="block w-full rounded-lg bg-accent-500 px-4 py-3 text-center text-sm font-semibold text-slate-950 transition-colors hover:bg-accent-400"
|
||||||
|
>
|
||||||
|
Start je project
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Header scroll effect
|
||||||
|
const header = document.getElementById('header');
|
||||||
|
let lastScroll = 0;
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const currentScroll = window.scrollY;
|
||||||
|
|
||||||
|
if (currentScroll > 50) {
|
||||||
|
header?.classList.add('glass', 'shadow-lg', 'shadow-slate-950/50');
|
||||||
|
} else {
|
||||||
|
header?.classList.remove('glass', 'shadow-lg', 'shadow-slate-950/50');
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScroll = currentScroll;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mobile menu toggle
|
||||||
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||||
|
const mobileMenu = document.getElementById('mobile-menu');
|
||||||
|
const menuIcon = document.getElementById('menu-icon');
|
||||||
|
const closeIcon = document.getElementById('close-icon');
|
||||||
|
|
||||||
|
mobileMenuBtn?.addEventListener('click', () => {
|
||||||
|
const isOpen = !mobileMenu?.classList.contains('hidden');
|
||||||
|
mobileMenu?.classList.toggle('hidden');
|
||||||
|
menuIcon?.classList.toggle('hidden');
|
||||||
|
closeIcon?.classList.toggle('hidden');
|
||||||
|
mobileMenuBtn.setAttribute('aria-label', isOpen ? 'Menu openen' : 'Menu sluiten');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
108
src/components/SEO.astro
Normal file
108
src/components/SEO.astro
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
image?: string;
|
||||||
|
type?: 'website' | 'article';
|
||||||
|
publishDate?: Date;
|
||||||
|
noindex?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
image = '/og-default.jpg',
|
||||||
|
type = 'website',
|
||||||
|
publishDate,
|
||||||
|
noindex = false,
|
||||||
|
} = Astro.props;
|
||||||
|
|
||||||
|
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||||
|
const fullTitle = title === 'Home' ? 'SiteLoft — Webhosting, Development & Growth' : `${title} | SiteLoft`;
|
||||||
|
const ogImageURL = new URL(image, Astro.site);
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- Primary Meta Tags -->
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>{fullTitle}</title>
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<link rel="canonical" href={canonicalURL} />
|
||||||
|
{noindex && <meta name="robots" content="noindex, nofollow" />}
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
|
||||||
|
<!-- Fonts -->
|
||||||
|
<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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||||
|
|
||||||
|
<!-- Open Graph -->
|
||||||
|
<meta property="og:type" content={type} />
|
||||||
|
<meta property="og:url" content={canonicalURL} />
|
||||||
|
<meta property="og:title" content={fullTitle} />
|
||||||
|
<meta property="og:description" content={description} />
|
||||||
|
<meta property="og:image" content={ogImageURL} />
|
||||||
|
<meta property="og:locale" content="nl_NL" />
|
||||||
|
<meta property="og:site_name" content="SiteLoft" />
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content={fullTitle} />
|
||||||
|
<meta name="twitter:description" content={description} />
|
||||||
|
<meta name="twitter:image" content={ogImageURL} />
|
||||||
|
|
||||||
|
<!-- Article specific -->
|
||||||
|
{publishDate && <meta property="article:published_time" content={publishDate.toISOString()} />}
|
||||||
|
|
||||||
|
<!-- Structured Data: Organization -->
|
||||||
|
{type === 'website' && (
|
||||||
|
<script type="application/ld+json" set:html={JSON.stringify({
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "SiteLoft",
|
||||||
|
"url": "https://siteloft.nl",
|
||||||
|
"logo": "https://siteloft.nl/logo.svg",
|
||||||
|
"description": "Full-service digital bureau voor webhosting, development en online groei.",
|
||||||
|
"address": {
|
||||||
|
"@type": "PostalAddress",
|
||||||
|
"addressCountry": "NL"
|
||||||
|
},
|
||||||
|
"sameAs": [
|
||||||
|
"https://www.linkedin.com/company/siteloft"
|
||||||
|
],
|
||||||
|
"knowsAbout": [
|
||||||
|
"Web Development",
|
||||||
|
"Webhosting",
|
||||||
|
"SEO",
|
||||||
|
"Generative Engine Optimization",
|
||||||
|
"Google Ads",
|
||||||
|
"AI Chatbots"
|
||||||
|
]
|
||||||
|
})} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<!-- Structured Data: LocalBusiness -->
|
||||||
|
{type === 'website' && (
|
||||||
|
<script type="application/ld+json" set:html={JSON.stringify({
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "ProfessionalService",
|
||||||
|
"name": "SiteLoft",
|
||||||
|
"url": "https://siteloft.nl",
|
||||||
|
"description": "Managed webhosting, custom web development en online growth services. Van website tot vindbaar in Google en AI search.",
|
||||||
|
"priceRange": "$$",
|
||||||
|
"areaServed": {
|
||||||
|
"@type": "Country",
|
||||||
|
"name": "Netherlands"
|
||||||
|
},
|
||||||
|
"serviceType": [
|
||||||
|
"Web Development",
|
||||||
|
"Managed Web Hosting",
|
||||||
|
"Search Engine Optimization",
|
||||||
|
"Generative Engine Optimization",
|
||||||
|
"Google Ads Management"
|
||||||
|
]
|
||||||
|
})} />
|
||||||
|
)}
|
||||||
18
src/content.config.ts
Normal file
18
src/content.config.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { defineCollection, z } from 'astro:content';
|
||||||
|
import { glob } from 'astro/loaders';
|
||||||
|
|
||||||
|
const blog = defineCollection({
|
||||||
|
loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
|
||||||
|
schema: z.object({
|
||||||
|
title: z.string(),
|
||||||
|
description: z.string(),
|
||||||
|
pubDate: z.coerce.date(),
|
||||||
|
updatedDate: z.coerce.date().optional(),
|
||||||
|
author: z.string().default('SiteLoft'),
|
||||||
|
image: z.string().optional(),
|
||||||
|
tags: z.array(z.string()).default([]),
|
||||||
|
draft: z.boolean().default(false),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = { blog };
|
||||||
87
src/content/blog/wat-is-geo.md
Normal file
87
src/content/blog/wat-is-geo.md
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
---
|
||||||
|
title: "Wat is GEO? Waarom AI Search Optimization de toekomst is"
|
||||||
|
description: "Generative Engine Optimization (GEO) is de volgende stap na SEO. Leer hoe je jouw bedrijf vindbaar maakt in ChatGPT, Perplexity en Google AI Overviews."
|
||||||
|
pubDate: 2026-03-01
|
||||||
|
author: "SiteLoft"
|
||||||
|
tags: ["GEO", "AI", "SEO", "Marketing"]
|
||||||
|
---
|
||||||
|
|
||||||
|
De manier waarop mensen informatie zoeken verandert fundamenteel. Waar we jarenlang gewend waren om een zoekopdracht in Google te typen en door blauwe links te scrollen, stellen steeds meer mensen hun vragen direct aan AI-systemen als ChatGPT, Perplexity, Google Gemini en Copilot. Dit heeft enorme gevolgen voor hoe bedrijven gevonden worden online — en het vraagt om een nieuwe aanpak: **Generative Engine Optimization**, oftewel **GEO**.
|
||||||
|
|
||||||
|
## Wat is GEO precies?
|
||||||
|
|
||||||
|
GEO staat voor Generative Engine Optimization. Het is de praktijk van het optimaliseren van je online aanwezigheid zodat AI-gestuurde zoekmachines — ook wel *generative engines* genoemd — jouw bedrijf, producten of diensten aanbevelen in hun antwoorden.
|
||||||
|
|
||||||
|
Waar traditionele SEO zich richt op het ranken in de zoekresultaten van Google (de bekende blauwe links), richt GEO zich op een bredere vraag: **hoe zorg je dat AI-systemen jouw bedrijf kennen, begrijpen en citeren?**
|
||||||
|
|
||||||
|
Het verschil is subtiel maar cruciaal. Bij SEO optimaliseer je voor een algoritme dat pagina's rangschikt. Bij GEO optimaliseer je voor AI-modellen die informatie uit het hele web samenvatten en als antwoord presenteren. Je wilt niet alleen gevonden worden — je wilt **geciteerd en aanbevolen** worden.
|
||||||
|
|
||||||
|
## Waarom is GEO nu zo belangrijk?
|
||||||
|
|
||||||
|
De cijfers liegen niet:
|
||||||
|
|
||||||
|
- **25% van alle zoekopdrachten** gaat inmiddels via AI-gestuurde platformen
|
||||||
|
- **357% groei** in AI-verwijzingen naar websites jaar-op-jaar
|
||||||
|
- **34% minder clicks** op traditionele zoekresultaten door AI Overviews
|
||||||
|
- **1,5 miljard maandelijkse gebruikers** maken al gebruik van Google AI Overviews
|
||||||
|
- Gartner voorspelt een **25% daling** in traditioneel zoekvolume tegen 2026
|
||||||
|
|
||||||
|
Zelfs als je op positie 1 staat in Google, klikken steeds minder mensen door omdat het antwoord al bovenaan de pagina staat — samengesteld door AI. Dit betekent dat alleen SEO niet meer genoeg is.
|
||||||
|
|
||||||
|
## Hoe werkt GEO in de praktijk?
|
||||||
|
|
||||||
|
GEO is geen eenmalige technische truc. Het is een doorlopende strategie met meerdere pijlers:
|
||||||
|
|
||||||
|
### 1. Gestructureerde data en technische optimalisatie
|
||||||
|
|
||||||
|
AI-modellen begrijpen je website beter wanneer je informatie gestructureerd aanbiedt:
|
||||||
|
|
||||||
|
- **Schema.org markup** (LocalBusiness, Product, FAQ, HowTo)
|
||||||
|
- Duidelijke koppen, lijsten en tabellen die AI makkelijk kan parsen
|
||||||
|
- Een snelle, technisch schone website
|
||||||
|
- Actuele sitemap die AI-crawlers toegang geeft
|
||||||
|
|
||||||
|
### 2. Multi-platform aanwezigheid
|
||||||
|
|
||||||
|
AI-modellen halen hun kennis niet alleen van je website. Ze raadplegen tientallen bronnen:
|
||||||
|
|
||||||
|
- Google Business Profile met actuele informatie
|
||||||
|
- Relevante directories en platforms in jouw branche
|
||||||
|
- LinkedIn, Medium en professionele netwerken
|
||||||
|
- Review-platformen zoals Trustpilot en Google Reviews
|
||||||
|
|
||||||
|
Hoe vaker en consistenter je bedrijfsinformatie voorkomt op betrouwbare bronnen, hoe groter de kans dat AI-systemen je als autoriteit zien.
|
||||||
|
|
||||||
|
### 3. Verse, kwalitatieve content
|
||||||
|
|
||||||
|
AI geeft de voorkeur aan actuele informatie. Perplexity prefereert content die **binnen 90 dagen** is gepubliceerd. Dit betekent:
|
||||||
|
|
||||||
|
- Regelmatig nieuwe content publiceren
|
||||||
|
- Bestaande content actueel houden
|
||||||
|
- Originele inzichten delen die nergens anders te vinden zijn
|
||||||
|
- Schrijven in een toon die duidelijk, feitelijk en citeerbaar is
|
||||||
|
|
||||||
|
## Wat betekent dit voor jouw bedrijf?
|
||||||
|
|
||||||
|
**Nu investeren in GEO is vergelijkbaar met investeren in SEO in 2010.** De bedrijven die er vroeg bij waren, domineren nog steeds de zoekresultaten. Hetzelfde gaat gelden voor AI search.
|
||||||
|
|
||||||
|
Concreet:
|
||||||
|
|
||||||
|
- **Audit je aanwezigheid**: is je bedrijfsinformatie consistent op alle platformen?
|
||||||
|
- **Investeer in content**: beantwoord echte vragen van echte klanten
|
||||||
|
- **Denk in antwoorden**: schrijf content die een AI kan citeren
|
||||||
|
- **Monitor je AI-zichtbaarheid**: controleer hoe AI-systemen je bedrijf noemen
|
||||||
|
|
||||||
|
## Hoe SiteLoft hiermee helpt
|
||||||
|
|
||||||
|
Bij SiteLoft zijn we een van de eerste bureaus in Nederland die GEO actief aanbieden. Wat we doen:
|
||||||
|
|
||||||
|
- **AI Visibility Audit**: hoe kennen AI-systemen jouw bedrijf nu?
|
||||||
|
- **GEO-strategie**: plan om je zichtbaarheid in AI search te vergroten
|
||||||
|
- **Technische optimalisatie**: structured data en content structurering
|
||||||
|
- **Content strategie**: content die voor mensen én AI waardevol is
|
||||||
|
- **Monitoring**: maandelijkse rapportages over je AI search visibility
|
||||||
|
|
||||||
|
GEO is geen vervanging van SEO — het is een aanvulling die steeds belangrijker wordt. De slimste strategie is om beide te combineren.
|
||||||
|
|
||||||
|
**Wil je weten hoe jouw bedrijf scoort in AI search?** [Neem contact op](/contact) voor een vrijblijvende AI Visibility Audit.
|
||||||
31
src/layouts/Layout.astro
Normal file
31
src/layouts/Layout.astro
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
import '../styles/global.css';
|
||||||
|
import SEO from '../components/SEO.astro';
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
image?: string;
|
||||||
|
type?: 'website' | 'article';
|
||||||
|
publishDate?: Date;
|
||||||
|
noindex?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="nl">
|
||||||
|
<head>
|
||||||
|
<SEO {...props} />
|
||||||
|
</head>
|
||||||
|
<body class="min-h-screen flex flex-col">
|
||||||
|
<Header />
|
||||||
|
<main class="flex-1 pt-20">
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
57
src/pages/blog/[...slug].astro
Normal file
57
src/pages/blog/[...slug].astro
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
---
|
||||||
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
import { getCollection, render } from 'astro:content';
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const posts = await getCollection('blog', ({ data }) => data.draft !== true);
|
||||||
|
return posts.map((post) => ({ params: { slug: post.id }, props: { post } }));
|
||||||
|
}
|
||||||
|
|
||||||
|
const { post } = Astro.props;
|
||||||
|
const { Content } = await render(post);
|
||||||
|
|
||||||
|
function formatDate(date: Date): string {
|
||||||
|
return date.toLocaleDateString('nl-NL', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title={post.data.title} description={post.data.description} type="article" publishDate={post.data.pubDate}>
|
||||||
|
<article class="relative">
|
||||||
|
<div class="absolute inset-0 -z-10"><div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div></div>
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
||||||
|
<a href="/blog" class="inline-flex items-center gap-2 text-sm font-medium text-slate-500 hover:text-accent-400 transition-colors mb-8">
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
|
||||||
|
Terug naar blog
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{post.data.tags.length > 0 && (
|
||||||
|
<div class="flex flex-wrap gap-2 mb-6">
|
||||||
|
{post.data.tags.map((tag: string) => (
|
||||||
|
<span class="inline-flex rounded-full bg-accent-500/10 px-3 py-1 text-xs font-medium text-accent-400">{tag}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.15] mb-6">{post.data.title}</h1>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-4 text-sm text-slate-500 pb-8 border-b border-slate-800/40">
|
||||||
|
<span>{post.data.author}</span>
|
||||||
|
<span class="text-slate-700">|</span>
|
||||||
|
<time datetime={post.data.pubDate.toISOString()}>{formatDate(post.data.pubDate)}</time>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 pb-24 sm:pb-32">
|
||||||
|
<div class="prose">
|
||||||
|
<Content />
|
||||||
|
</div>
|
||||||
|
<div class="mt-16 pt-8 border-t border-slate-800/40">
|
||||||
|
<a href="/blog" class="group inline-flex items-center gap-2 text-sm font-medium text-slate-500 hover:text-accent-400 transition-colors">
|
||||||
|
<svg class="h-4 w-4 transition-transform group-hover:-translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
|
||||||
|
Terug naar blog
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</Layout>
|
||||||
59
src/pages/blog/index.astro
Normal file
59
src/pages/blog/index.astro
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
---
|
||||||
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
|
||||||
|
const allPosts = await getCollection('blog', ({ data }) => data.draft !== true);
|
||||||
|
const posts = allPosts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
|
||||||
|
|
||||||
|
function formatDate(date: Date): string {
|
||||||
|
return date.toLocaleDateString('nl-NL', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Blog" description="Artikelen over web development, managed hosting, SEO, GEO en online groei. Praktische kennis en inzichten van SiteLoft.">
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 -z-10"><div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div></div>
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
||||||
|
<div class="mx-auto max-w-3xl text-center">
|
||||||
|
<p class="text-sm font-semibold text-accent-400 uppercase tracking-widest mb-3">Blog</p>
|
||||||
|
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">Blog & <span class="text-gradient">Insights</span></h1>
|
||||||
|
<p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">Kennis delen over web development, managed hosting, SEO en GEO. Praktische artikelen om je online aanwezigheid te versterken.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="relative pb-24 sm:pb-32">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
{posts.length === 0 ? (
|
||||||
|
<div class="text-center py-16">
|
||||||
|
<p class="text-slate-500 text-lg">Binnenkort verschijnen hier onze eerste artikelen.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{posts.map((post) => (
|
||||||
|
<a href={`/blog/${post.id}`} class="group rounded-2xl glass-light overflow-hidden transition-all hover:border-accent-500/20 hover:glow-accent flex flex-col">
|
||||||
|
<div class="p-6 flex flex-col flex-1">
|
||||||
|
{post.data.tags.length > 0 && (
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
{post.data.tags.map((tag: string) => (
|
||||||
|
<span class="inline-flex rounded-full bg-accent-500/10 px-2.5 py-0.5 text-xs font-medium text-accent-400">{tag}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h2 class="text-lg font-semibold text-slate-100 mb-2 group-hover:text-accent-400 transition-colors leading-snug">{post.data.title}</h2>
|
||||||
|
<p class="text-sm text-slate-400 leading-relaxed mb-4 flex-1">{post.data.description}</p>
|
||||||
|
<div class="flex items-center justify-between pt-4 border-t border-slate-800/60">
|
||||||
|
<time class="text-xs text-slate-600" datetime={post.data.pubDate.toISOString()}>{formatDate(post.data.pubDate)}</time>
|
||||||
|
<span class="inline-flex items-center gap-1 text-xs font-medium text-accent-400 group-hover:gap-2 transition-all">
|
||||||
|
Lees meer
|
||||||
|
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</Layout>
|
||||||
119
src/pages/contact.astro
Normal file
119
src/pages/contact.astro
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Contact" description="Neem contact op met SiteLoft. Vertel ons over je project en we reageren binnen 24 uur met een vrijblijvend voorstel.">
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 -z-10"><div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div></div>
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
||||||
|
<div class="mx-auto max-w-3xl text-center mb-16">
|
||||||
|
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">Laten we <span class="text-gradient">kennismaken</span></h1>
|
||||||
|
<p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">Vertel ons over je project. We reageren binnen 24 uur op werkdagen met een vrijblijvend voorstel.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-5 gap-12">
|
||||||
|
<!-- FORM -->
|
||||||
|
<div class="lg:col-span-3">
|
||||||
|
<div class="rounded-2xl glass p-8">
|
||||||
|
<form action="#" method="POST" class="space-y-6">
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="block text-sm font-medium text-slate-300 mb-2">Naam *</label>
|
||||||
|
<input type="text" id="name" name="name" required class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="Je naam" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="email" class="block text-sm font-medium text-slate-300 mb-2">Email *</label>
|
||||||
|
<input type="email" id="email" name="email" required class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="naam@bedrijf.nl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="phone" class="block text-sm font-medium text-slate-300 mb-2">Telefoon</label>
|
||||||
|
<input type="tel" id="phone" name="phone" class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="06 12345678" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="company" class="block text-sm font-medium text-slate-300 mb-2">Bedrijf</label>
|
||||||
|
<input type="text" id="company" name="company" class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="Je bedrijfsnaam" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="budget" class="block text-sm font-medium text-slate-300 mb-2">Budget indicatie</label>
|
||||||
|
<select id="budget" name="budget" class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-500/50">
|
||||||
|
<option value="">Selecteer een range</option>
|
||||||
|
<option value="<2500">Minder dan €2.500</option>
|
||||||
|
<option value="2500-5000">€2.500 - €5.000</option>
|
||||||
|
<option value="5000-10000">€5.000 - €10.000</option>
|
||||||
|
<option value=">10000">Meer dan €10.000</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="message" class="block text-sm font-medium text-slate-300 mb-2">Bericht *</label>
|
||||||
|
<textarea id="message" name="message" rows="5" required class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50 resize-none" placeholder="Vertel ons over je project, wensen en doelen..."></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="group w-full inline-flex items-center justify-center gap-2 rounded-xl bg-accent-500 px-8 py-3.5 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25">
|
||||||
|
Verstuur bericht
|
||||||
|
<svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
<div class="lg:col-span-2 space-y-8">
|
||||||
|
<div class="rounded-2xl glass-light p-8">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-100 mb-6">Contactgegevens</h3>
|
||||||
|
<div class="space-y-5">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-500/10 text-accent-400">
|
||||||
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-slate-300">Email</p>
|
||||||
|
<a href="mailto:info@siteloft.nl" class="text-sm text-accent-400 hover:text-accent-300 transition-colors">info@siteloft.nl</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-500/10 text-accent-400">
|
||||||
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-slate-300">Locatie</p>
|
||||||
|
<p class="text-sm text-slate-500">Nederland</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-500/10 text-accent-400">
|
||||||
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-slate-300">Bereikbaarheid</p>
|
||||||
|
<p class="text-sm text-slate-500">Ma - Vr, 09:00 - 17:00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded-2xl glass-light p-8">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-100 mb-6">Wat kun je verwachten?</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
{[
|
||||||
|
{ step: '1', title: 'Reactie binnen 24 uur', desc: 'We lezen je bericht en reageren op werkdagen binnen 24 uur.' },
|
||||||
|
{ step: '2', title: 'Vrijblijvend gesprek', desc: 'We plannen een kort gesprek om je wensen en doelen te bespreken.' },
|
||||||
|
{ step: '3', title: 'Voorstel op maat', desc: 'Je ontvangt een duidelijk voorstel met scope, planning en kosten.' },
|
||||||
|
{ step: '4', title: 'Start van je project', desc: 'Na akkoord starten we direct. Je bent altijd betrokken bij het proces.' },
|
||||||
|
].map(item => (
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent-500/20 text-accent-400 text-xs font-bold">{item.step}</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-slate-300">{item.title}</p>
|
||||||
|
<p class="text-xs text-slate-500">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</Layout>
|
||||||
72
src/pages/diensten/development.astro
Normal file
72
src/pages/diensten/development.astro
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
---
|
||||||
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Web Development" description="Custom websites en webshops die razendsnel laden en perfect scoren. WordPress, Next.js, Astro — wij kiezen de beste stack voor jouw doel.">
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 -z-10"><div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div></div>
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
||||||
|
<div class="mx-auto max-w-3xl text-center">
|
||||||
|
<a href="/diensten" class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-accent-400 transition-colors mb-6">
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
|
||||||
|
Alle diensten
|
||||||
|
</a>
|
||||||
|
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">Websites die <span class="text-gradient">werken</span></h1>
|
||||||
|
<p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">Geen templates van de plank. Wij bouwen custom websites en webshops die passen bij jouw merk, razendsnel laden en gebouwd zijn om te converteren.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- TECH -->
|
||||||
|
<section class="relative pb-24 sm:pb-32">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-50 mb-8 text-center">Onze technologieën</h2>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{[
|
||||||
|
{ name: 'WordPress', desc: 'Het populairste CMS ter wereld. Ideaal voor bedrijfswebsites en blogs met een makkelijk te beheren backend.' },
|
||||||
|
{ name: 'Next.js', desc: 'React-framework voor razendsnelle, interactieve webapplicaties. Perfect voor complexe projecten.' },
|
||||||
|
{ name: 'Astro', desc: 'Ultra-snel framework dat standaard zero JavaScript naar de browser stuurt. Ideaal voor content-sites.' },
|
||||||
|
{ name: 'WooCommerce', desc: 'Krachtige e-commerce op WordPress. Van simpele webshop tot complete online winkel met duizenden producten.' },
|
||||||
|
].map(tech => (
|
||||||
|
<div class="rounded-2xl glass-light p-6">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-100 mb-2">{tech.name}</h3>
|
||||||
|
<p class="text-sm text-slate-400 leading-relaxed">{tech.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- PROCESS -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-50 mb-12 text-center">Ons proces</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||||
|
{[
|
||||||
|
{ step: '01', title: 'Gesprek', desc: 'We bespreken je wensen, doelen en doelgroep. Wat moet de site bereiken?' },
|
||||||
|
{ step: '02', title: 'Ontwerp', desc: 'We maken een design dat past bij je merk. Je geeft feedback tot het perfect is.' },
|
||||||
|
{ step: '03', title: 'Development', desc: 'We bouwen de site met de beste technologie. Snel, veilig en SEO-proof.' },
|
||||||
|
{ step: '04', title: 'Lancering', desc: 'Na goedkeuring gaat de site live op SiteLoft hosting. Wij blijven beheren.' },
|
||||||
|
].map(item => (
|
||||||
|
<div class="relative">
|
||||||
|
<span class="text-5xl font-black text-accent-500/10 mb-2 block">{item.step}</span>
|
||||||
|
<h3 class="text-lg font-semibold text-slate-100 mb-2">{item.title}</h3>
|
||||||
|
<p class="text-sm text-slate-400 leading-relaxed">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<h2 class="text-3xl font-bold text-slate-50 mb-4">Klaar voor een website die echt werkt?</h2>
|
||||||
|
<p class="text-slate-400 mb-8 max-w-lg mx-auto">Vertel ons over je project. We bespreken vrijblijvend de mogelijkheden.</p>
|
||||||
|
<a href="/contact" class="inline-flex items-center gap-2 rounded-xl bg-accent-500 px-8 py-4 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25">
|
||||||
|
Start je project
|
||||||
|
<svg class="h-4 w-4" 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>
|
||||||
|
</Layout>
|
||||||
125
src/pages/diensten/growth.astro
Normal file
125
src/pages/diensten/growth.astro
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
---
|
||||||
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Growth Services" description="SEO, GEO (Generative Engine Optimization) en Google Ads. Gevonden worden in Google én in AI search zoals ChatGPT en Perplexity.">
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 -z-10"><div class="absolute top-1/4 left-1/3 h-96 w-96 rounded-full bg-violet-500/5 blur-3xl"></div></div>
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
||||||
|
<div class="mx-auto max-w-3xl text-center">
|
||||||
|
<a href="/diensten" class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-accent-400 transition-colors mb-6">
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
|
||||||
|
Alle diensten
|
||||||
|
</a>
|
||||||
|
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">Gevonden worden,<br /><span class="text-gradient">online groeien</span></h1>
|
||||||
|
<p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">SEO, Google Ads én GEO — wij zorgen dat je gevonden wordt, ongeacht hoe je klanten zoeken. In Google, in ChatGPT, in Perplexity.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SERVICES -->
|
||||||
|
<section class="relative pb-24 sm:pb-32">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-16">
|
||||||
|
<!-- SEO -->
|
||||||
|
<div class="rounded-2xl glass-light p-8 sm:p-12">
|
||||||
|
<div class="flex items-start gap-4 mb-6">
|
||||||
|
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-accent-500/10 text-accent-400">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold text-slate-50">SEO — Zoekmachine Optimalisatie</h2>
|
||||||
|
<p class="text-slate-500">Hoger ranken in Google</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-slate-400 leading-relaxed mb-6">We optimaliseren je website technisch, qua content en autoriteit zodat je organisch hoger rankt in Google. Van keyword research tot linkbuilding, van technische SEO tot content strategie.</p>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||||
|
{['Technische SEO audit', 'Keyword research & strategie', 'Content optimalisatie', 'Linkbuilding', 'Core Web Vitals', 'Maandelijkse rapportage'].map(item => (
|
||||||
|
<span class="flex items-center gap-2 text-sm text-slate-300">
|
||||||
|
<svg class="h-4 w-4 text-accent-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
|
||||||
|
{item}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- GEO -->
|
||||||
|
<div class="rounded-2xl glass p-8 sm:p-12 ring-1 ring-accent-500/20 glow-accent">
|
||||||
|
<div class="inline-flex items-center gap-2 rounded-full border border-violet-500/20 bg-violet-500/5 px-4 py-1.5 mb-6">
|
||||||
|
<span class="text-xs font-medium text-violet-400">Exclusief bij SiteLoft</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 mb-6">
|
||||||
|
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-accent-500/10 text-accent-400">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" /></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold text-slate-50">GEO — Generative Engine Optimization</h2>
|
||||||
|
<p class="text-slate-500">Vindbaar in AI search</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-slate-300 leading-relaxed mb-6">De manier waarop mensen zoeken verandert fundamenteel. 25% van alle zoekopdrachten gaat al via AI — ChatGPT, Perplexity, Google AI Overviews. Met GEO zorgen wij dat jouw bedrijf wordt <strong class="text-slate-100">geciteerd en aanbevolen</strong> door deze AI-systemen.</p>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
|
||||||
|
<div class="rounded-xl bg-slate-950/50 p-5 text-center">
|
||||||
|
<p class="text-3xl font-bold text-accent-400 mb-1">357%</p>
|
||||||
|
<p class="text-xs text-slate-500">groei AI-verwijzingen j-o-j</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl bg-slate-950/50 p-5 text-center">
|
||||||
|
<p class="text-3xl font-bold text-accent-400 mb-1">25%</p>
|
||||||
|
<p class="text-xs text-slate-500">van search via AI</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl bg-slate-950/50 p-5 text-center">
|
||||||
|
<p class="text-3xl font-bold text-accent-400 mb-1">34%</p>
|
||||||
|
<p class="text-xs text-slate-500">minder clicks traditioneel</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||||
|
{['AI Visibility Audit', 'Structured data optimalisatie', 'Multi-platform aanwezigheid', 'Content strategie voor AI', 'AI search monitoring', 'Concurrentie benchmarking'].map(item => (
|
||||||
|
<span class="flex items-center gap-2 text-sm text-slate-300">
|
||||||
|
<svg class="h-4 w-4 text-accent-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
|
||||||
|
{item}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div class="mt-6">
|
||||||
|
<a href="/blog/wat-is-geo" class="inline-flex items-center gap-2 text-sm font-medium text-accent-400 hover:text-accent-300 transition-colors">
|
||||||
|
Lees meer over GEO in ons blogartikel
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SEA -->
|
||||||
|
<div class="rounded-2xl glass-light p-8 sm:p-12">
|
||||||
|
<div class="flex items-start gap-4 mb-6">
|
||||||
|
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-accent-500/10 text-accent-400">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold text-slate-50">SEA — Google Ads</h2>
|
||||||
|
<p class="text-slate-500">Direct resultaat met betaald adverteren</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-slate-400 leading-relaxed mb-6">Terwijl SEO en GEO bouwen aan langetermijn vindbaarheid, levert Google Ads direct verkeer. Wij zetten doelgerichte campagnes op, optimaliseren continu en zorgen dat elke euro telt.</p>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||||
|
{['Campagne setup & strategie', 'Keyword targeting', 'Ad copy optimalisatie', 'Conversie tracking', 'A/B testing', 'Maandelijks budget advies'].map(item => (
|
||||||
|
<span class="flex items-center gap-2 text-sm text-slate-300">
|
||||||
|
<svg class="h-4 w-4 text-accent-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
|
||||||
|
{item}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<h2 class="text-3xl font-bold text-slate-50 mb-4">Klaar om gevonden te worden?</h2>
|
||||||
|
<p class="text-slate-400 mb-8 max-w-lg mx-auto">Laten we bespreken welke growth strategie het beste past bij jouw bedrijf.</p>
|
||||||
|
<a href="/contact" class="inline-flex items-center gap-2 rounded-xl bg-accent-500 px-8 py-4 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25">
|
||||||
|
Plan een gesprek
|
||||||
|
<svg class="h-4 w-4" 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>
|
||||||
|
</Layout>
|
||||||
93
src/pages/diensten/hosting.astro
Normal file
93
src/pages/diensten/hosting.astro
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
---
|
||||||
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Managed Hosting" description="Managed webhosting op eigen servers. Geïsoleerde containers, SSL, CDN, dagelijkse backups en volledige onderhoud. Hosting zonder zorgen.">
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 -z-10"><div class="absolute top-1/4 right-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div></div>
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
||||||
|
<div class="mx-auto max-w-3xl text-center">
|
||||||
|
<a href="/diensten" class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-accent-400 transition-colors mb-6">
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
|
||||||
|
Alle diensten
|
||||||
|
</a>
|
||||||
|
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">Hosting <span class="text-gradient">zonder zorgen</span></h1>
|
||||||
|
<p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">Jouw website draait geïsoleerd op onze eigen servers in Nederland. SSL, CDN, backups en updates — wij regelen alles zodat jij je kunt focussen op je bedrijf.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- COMPARISON -->
|
||||||
|
<section class="relative pb-24 sm:pb-32">
|
||||||
|
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-50 mb-8 text-center">Traditionele hosting vs. SiteLoft</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div class="rounded-2xl bg-slate-900/50 ring-1 ring-red-500/10 p-8">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-400 mb-4 flex items-center gap-2">
|
||||||
|
<svg class="h-5 w-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||||
|
Traditionele hosting
|
||||||
|
</h3>
|
||||||
|
<ul class="space-y-3 text-sm text-slate-500">
|
||||||
|
<li>Gedeelde server met honderden sites</li>
|
||||||
|
<li>Jij moet zelf updaten en beveiligen</li>
|
||||||
|
<li>cPanel interface, zelf uitzoeken</li>
|
||||||
|
<li>Trage support via ticketsysteem</li>
|
||||||
|
<li>FTP uploads, handmatig beheer</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-2xl glass ring-1 ring-accent-500/20 p-8 glow-accent">
|
||||||
|
<h3 class="text-lg font-semibold text-accent-400 mb-4 flex items-center gap-2">
|
||||||
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
|
||||||
|
SiteLoft Managed Hosting
|
||||||
|
</h3>
|
||||||
|
<ul class="space-y-3 text-sm text-slate-300">
|
||||||
|
<li>Geïsoleerde Docker container, alleen jouw site</li>
|
||||||
|
<li>Wij doen alle updates en security patches</li>
|
||||||
|
<li>Jij krijgt een beheerde, snelle website</li>
|
||||||
|
<li>Direct contact, persoonlijke support</li>
|
||||||
|
<li>Git deploys, staging omgevingen, CI/CD</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FEATURES -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-50 mb-12 text-center">Wat zit er allemaal in?</h2>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{[
|
||||||
|
{ title: 'Geïsoleerde Containers', desc: 'Elke website draait in een eigen Docker container. Geen buren die je performance beïnvloeden.', icon: 'M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375' },
|
||||||
|
{ title: 'SSL & CDN', desc: 'Automatische SSL-certificaten en Cloudflare CDN voor maximale snelheid en beveiliging.', icon: 'M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z' },
|
||||||
|
{ title: 'Dagelijkse Backups', desc: 'Elke dag een off-site backup naar externe storage. Mocht er iets misgaan, dan herstellen we snel.', icon: 'M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0l-3-3m3 3l3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z' },
|
||||||
|
{ title: '99.9% Uptime', desc: 'We monitoren je website 24/7. Bij problemen krijg je direct bericht en lossen we het op.', icon: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z' },
|
||||||
|
{ title: 'Updates & Onderhoud', desc: 'WordPress core, plugins, themes — wij houden alles up-to-date en veilig. Jij hoeft niks te doen.', icon: 'M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182' },
|
||||||
|
{ title: 'Nederlandse Servers', desc: 'Jouw data staat in Nederland. Snel voor Nederlandse bezoekers en compliant met de AVG/GDPR.', icon: 'M15 10.5a3 3 0 11-6 0 3 3 0 016 0z M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z' },
|
||||||
|
].map(feature => (
|
||||||
|
<div class="rounded-2xl glass-light p-6">
|
||||||
|
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-accent-500/10 text-accent-400">
|
||||||
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d={feature.icon} />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-base font-semibold text-slate-100 mb-2">{feature.title}</h3>
|
||||||
|
<p class="text-sm text-slate-400 leading-relaxed">{feature.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<h2 class="text-3xl font-bold text-slate-50 mb-4">Klaar voor hosting zonder zorgen?</h2>
|
||||||
|
<p class="text-slate-400 mb-8 max-w-lg mx-auto">Managed hosting vanaf €49/maand. Inclusief SSL, CDN, backups en onderhoud.</p>
|
||||||
|
<a href="/contact" class="inline-flex items-center gap-2 rounded-xl bg-accent-500 px-8 py-4 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25">
|
||||||
|
Bekijk de mogelijkheden
|
||||||
|
<svg class="h-4 w-4" 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>
|
||||||
|
</Layout>
|
||||||
124
src/pages/diensten/index.astro
Normal file
124
src/pages/diensten/index.astro
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
---
|
||||||
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
title: 'Web Development',
|
||||||
|
description: 'Custom websites en webshops die er niet alleen goed uitzien, maar ook razendsnel laden en perfect scoren op SEO.',
|
||||||
|
features: ['Custom maatwerk design', 'Responsive op elk apparaat', 'Razendsnel (Core Web Vitals)', 'SEO-geoptimaliseerd', 'CMS naar keuze'],
|
||||||
|
icon: 'code',
|
||||||
|
href: '/diensten/development',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Managed Hosting',
|
||||||
|
description: 'Geen gedeelde servers met honderden sites. Jouw website draait geïsoleerd op onze eigen infrastructuur met SSL, CDN en dagelijkse backups.',
|
||||||
|
features: ['Geïsoleerde Docker containers', 'SSL & CDN via Cloudflare', 'Dagelijkse off-site backups', '99.9% uptime garantie', 'Eigen servers in Nederland'],
|
||||||
|
icon: 'server',
|
||||||
|
href: '/diensten/hosting',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Growth Services',
|
||||||
|
description: 'SEO, Google Ads én GEO — Generative Engine Optimization. Gevonden worden in Google én in AI search zoals ChatGPT en Perplexity.',
|
||||||
|
features: ['SEO optimalisatie', 'GEO (AI Search Optimization)', 'Google Ads management', 'Analytics dashboard', 'Maandelijkse rapportage'],
|
||||||
|
icon: 'growth',
|
||||||
|
href: '/diensten/growth',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout
|
||||||
|
title="Diensten"
|
||||||
|
description="SiteLoft biedt web development, managed hosting en growth services (SEO, GEO, SEA). Alles voor je online succes, onder één dak."
|
||||||
|
>
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 -z-10">
|
||||||
|
<div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div>
|
||||||
|
<div class="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-violet-500/5 blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 -z-10 bg-[linear-gradient(rgba(134,148,178,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(134,148,178,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
||||||
|
<div class="mx-auto max-w-3xl text-center">
|
||||||
|
<p class="text-sm font-semibold text-accent-400 uppercase tracking-widest mb-3">Onze diensten</p>
|
||||||
|
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">
|
||||||
|
Van idee tot<br /><span class="text-gradient">online succes</span>
|
||||||
|
</h1>
|
||||||
|
<p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Wij combineren development, hosting en marketing zodat jij je kunt focussen op je bedrijf. Alles onder één dak, met één aanspreekpunt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SERVICES -->
|
||||||
|
<section class="relative pb-24 sm:pb-32">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-16">
|
||||||
|
{services.map((service, i) => (
|
||||||
|
<div class:list={['grid grid-cols-1 lg:grid-cols-2 gap-12 items-center', i % 2 === 1 && 'lg:direction-rtl']}>
|
||||||
|
<div class:list={[i % 2 === 1 && 'lg:order-2']}>
|
||||||
|
<h2 class="text-3xl font-bold text-slate-50 mb-4">{service.title}</h2>
|
||||||
|
<p class="text-slate-400 leading-relaxed mb-6">{service.description}</p>
|
||||||
|
<ul class="space-y-3 mb-8">
|
||||||
|
{service.features.map((f) => (
|
||||||
|
<li class="flex items-center gap-3 text-sm text-slate-300">
|
||||||
|
<svg class="h-4 w-4 text-accent-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
{f}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href={service.href} class="inline-flex items-center gap-2 text-sm font-semibold text-accent-400 hover:text-accent-300 transition-colors">
|
||||||
|
Meer over {service.title.toLowerCase()}
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class:list={['rounded-2xl glass p-8', i % 2 === 1 && 'lg:order-1']}>
|
||||||
|
<div class="aspect-video rounded-xl bg-slate-900/50 ring-1 ring-slate-800 flex items-center justify-center">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-accent-500/10 text-accent-400">
|
||||||
|
{service.icon === 'code' && (
|
||||||
|
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
{service.icon === 'server' && (
|
||||||
|
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
{service.icon === 'growth' && (
|
||||||
|
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-slate-500">{service.title}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="relative rounded-3xl glass p-12 sm:p-16 text-center glow-accent overflow-hidden">
|
||||||
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 h-px w-3/4 bg-gradient-to-r from-transparent via-accent-500/40 to-transparent"></div>
|
||||||
|
<h2 class="text-3xl sm:text-4xl font-bold text-slate-50 mb-4">Weten wat we voor jou kunnen doen?</h2>
|
||||||
|
<p class="text-lg text-slate-400 mb-8 max-w-xl mx-auto">Vertel ons over je project. We reageren binnen 24 uur met een vrijblijvend voorstel.</p>
|
||||||
|
<a href="/contact" class="group inline-flex items-center gap-2 rounded-xl bg-accent-500 px-8 py-4 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25">
|
||||||
|
Neem contact op
|
||||||
|
<svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" 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>
|
||||||
|
</Layout>
|
||||||
425
src/pages/index.astro
Normal file
425
src/pages/index.astro
Normal file
@@ -0,0 +1,425 @@
|
|||||||
|
---
|
||||||
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout
|
||||||
|
title="Home"
|
||||||
|
description="SiteLoft is jouw full-service digital partner. Managed webhosting, custom web development en online groei door SEO, GEO en Google Ads. Alles onder één dak."
|
||||||
|
>
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<!-- Background effects -->
|
||||||
|
<div class="absolute inset-0 -z-10">
|
||||||
|
<div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div>
|
||||||
|
<div class="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-violet-500/5 blur-3xl"></div>
|
||||||
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(6,182,212,0.03)_0%,transparent_70%)]"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Grid pattern -->
|
||||||
|
<div class="absolute inset-0 -z-10 bg-[linear-gradient(rgba(134,148,178,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(134,148,178,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32 lg:py-40">
|
||||||
|
<div class="mx-auto max-w-4xl text-center">
|
||||||
|
<!-- Badge -->
|
||||||
|
<div class="animate-fade-in-up inline-flex items-center gap-2 rounded-full border border-accent-500/20 bg-accent-500/5 px-4 py-1.5 mb-8">
|
||||||
|
<span class="h-1.5 w-1.5 rounded-full bg-accent-400 animate-pulse"></span>
|
||||||
|
<span class="text-xs font-medium text-accent-400">Nu ook met GEO — vindbaar in AI search</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Heading -->
|
||||||
|
<h1 class="animate-fade-in-up delay-100 text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">
|
||||||
|
Jouw website,<br />
|
||||||
|
<span class="text-gradient">professioneel beheerd</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<!-- Subheading -->
|
||||||
|
<p class="animate-fade-in-up delay-200 mt-6 text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Van custom development tot managed hosting tot online groei.
|
||||||
|
Wij bouwen, hosten en laten je vinden — in Google én in AI search.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- CTAs -->
|
||||||
|
<div class="animate-fade-in-up delay-300 mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
class="group inline-flex items-center gap-2 rounded-xl bg-accent-500 px-7 py-3.5 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25"
|
||||||
|
>
|
||||||
|
Start je project
|
||||||
|
<svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" 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"
|
||||||
|
class="inline-flex items-center gap-2 rounded-xl px-7 py-3.5 text-base font-medium text-slate-300 ring-1 ring-slate-700 transition-all hover:bg-slate-800/50 hover:text-slate-100"
|
||||||
|
>
|
||||||
|
Bekijk pakketten
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Trust indicators -->
|
||||||
|
<div class="animate-fade-in-up delay-500 mt-16 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-slate-600">
|
||||||
|
<span class="flex items-center gap-2">
|
||||||
|
<svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
100% uptime SLA
|
||||||
|
</span>
|
||||||
|
<span class="flex items-center gap-2">
|
||||||
|
<svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
Eigen servers in NL
|
||||||
|
</span>
|
||||||
|
<span class="flex items-center gap-2">
|
||||||
|
<svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
Persoonlijk contact
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SERVICES OVERVIEW -->
|
||||||
|
<section class="relative py-24 sm:py-32">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<p class="text-sm font-semibold text-accent-400 uppercase tracking-widest mb-3">Wat we doen</p>
|
||||||
|
<h2 class="text-3xl sm:text-4xl font-bold text-slate-50">
|
||||||
|
Alles voor je online succes,<br class="hidden sm:block" /> onder één dak
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<!-- Development -->
|
||||||
|
<a href="/diensten/development" class="group relative rounded-2xl glass-light p-8 transition-all hover:border-accent-500/20 hover:glow-accent">
|
||||||
|
<div class="mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-accent-500/10 text-accent-400 transition-colors group-hover:bg-accent-500/20">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-slate-100 mb-3">Web Development</h3>
|
||||||
|
<p class="text-sm text-slate-400 leading-relaxed mb-4">
|
||||||
|
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>
|
||||||
|
<span class="inline-flex items-center gap-1 text-sm font-medium text-accent-400 group-hover:gap-2 transition-all">
|
||||||
|
Meer over development
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Hosting -->
|
||||||
|
<a href="/diensten/hosting" class="group relative rounded-2xl glass-light p-8 transition-all hover:border-accent-500/20 hover:glow-accent">
|
||||||
|
<div class="mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-accent-500/10 text-accent-400 transition-colors group-hover:bg-accent-500/20">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-slate-100 mb-3">Managed Hosting</h3>
|
||||||
|
<p class="text-sm text-slate-400 leading-relaxed mb-4">
|
||||||
|
Geen shared hosting met 200 andere sites. Jouw website draait geïsoleerd op onze eigen servers. SSL, backups, CDN en updates — wij regelen alles.
|
||||||
|
</p>
|
||||||
|
<span class="inline-flex items-center gap-1 text-sm font-medium text-accent-400 group-hover:gap-2 transition-all">
|
||||||
|
Meer over hosting
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Growth -->
|
||||||
|
<a href="/diensten/growth" class="group relative rounded-2xl glass-light p-8 transition-all hover:border-accent-500/20 hover:glow-accent">
|
||||||
|
<div class="mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-accent-500/10 text-accent-400 transition-colors group-hover:bg-accent-500/20">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-slate-100 mb-3">Growth Services</h3>
|
||||||
|
<p class="text-sm text-slate-400 leading-relaxed mb-4">
|
||||||
|
SEO, Google Ads én GEO — Generative Engine Optimization. Wij zorgen dat je gevonden wordt, in Google én in AI search zoals ChatGPT en Perplexity.
|
||||||
|
</p>
|
||||||
|
<span class="inline-flex items-center gap-1 text-sm font-medium text-accent-400 group-hover:gap-2 transition-all">
|
||||||
|
Meer over growth
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- WHY SITELOFT -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-semibold text-accent-400 uppercase tracking-widest mb-3">Waarom SiteLoft</p>
|
||||||
|
<h2 class="text-3xl sm:text-4xl font-bold text-slate-50 mb-6">
|
||||||
|
Geen losse freelancers.<br />
|
||||||
|
Geen dure bureaus.<br />
|
||||||
|
<span class="text-gradient">Eén partner voor alles.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-slate-400 leading-relaxed mb-8">
|
||||||
|
Bij de meeste bureaus heb je één partij voor je website, een ander voor hosting, en weer een ander voor marketing. Bij SiteLoft krijg je alles onder één dak — met één aanspreekpunt en één factuur.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-accent-500/10">
|
||||||
|
<svg class="h-4 w-4 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-base font-semibold text-slate-200">Eigen servers, volledige controle</h3>
|
||||||
|
<p class="text-sm text-slate-500">Geen reseller hosting. Wij beheren de servers zelf voor maximale snelheid en betrouwbaarheid.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-accent-500/10">
|
||||||
|
<svg class="h-4 w-4 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-base font-semibold text-slate-200">Voorloper in AI Search (GEO)</h3>
|
||||||
|
<p class="text-sm text-slate-500">Een van de eerste bureaus in Nederland die je actief vindbaar maakt in ChatGPT, Perplexity en Google AI.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-accent-500/10">
|
||||||
|
<svg class="h-4 w-4 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-base font-semibold text-slate-200">Persoonlijk en direct</h3>
|
||||||
|
<p class="text-sm text-slate-500">Geen ticketnummers of wachtrijen. Je spreekt altijd direct met de persoon die aan je project werkt.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: terminal mockup -->
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl glass p-8 glow-accent">
|
||||||
|
<div class="rounded-xl bg-slate-950 p-6 ring-1 ring-slate-800">
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<div class="h-3 w-3 rounded-full bg-red-500/60"></div>
|
||||||
|
<div class="h-3 w-3 rounded-full bg-yellow-500/60"></div>
|
||||||
|
<div class="h-3 w-3 rounded-full bg-emerald-500/60"></div>
|
||||||
|
<span class="ml-2 text-xs text-slate-600 font-mono">siteloft-deploy</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2 font-mono text-sm">
|
||||||
|
<p><span class="text-accent-400">$</span> <span class="text-slate-300">siteloft deploy --production</span></p>
|
||||||
|
<p class="text-slate-500">Deploying jouwwebsite.nl...</p>
|
||||||
|
<p class="text-slate-500">Building optimized bundle...</p>
|
||||||
|
<p class="text-emerald-400">✓ SSL certificate configured</p>
|
||||||
|
<p class="text-emerald-400">✓ CDN cache invalidated</p>
|
||||||
|
<p class="text-emerald-400">✓ Backup created</p>
|
||||||
|
<p class="text-emerald-400">✓ Performance score: 98/100</p>
|
||||||
|
<p class="mt-2"><span class="text-accent-400">$</span> <span class="text-slate-400 animate-pulse">_</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -top-4 -right-4 h-24 w-24 rounded-full bg-accent-500/10 blur-2xl"></div>
|
||||||
|
<div class="absolute -bottom-4 -left-4 h-32 w-32 rounded-full bg-violet-500/10 blur-2xl"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- PACKAGES PREVIEW -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<p class="text-sm font-semibold text-accent-400 uppercase tracking-widest mb-3">Pakketten</p>
|
||||||
|
<h2 class="text-3xl sm:text-4xl font-bold text-slate-50 mb-4">
|
||||||
|
Duidelijke pakketten, eerlijke prijzen
|
||||||
|
</h2>
|
||||||
|
<p class="text-slate-400 max-w-2xl mx-auto">
|
||||||
|
Kies het pakket dat bij je past. Geen verborgen kosten, geen verrassingen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
|
||||||
|
<!-- Starter -->
|
||||||
|
<div class="rounded-2xl glass-light p-8 flex flex-col">
|
||||||
|
<div class="mb-6">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-200 mb-1">Starter</h3>
|
||||||
|
<p class="text-sm text-slate-500">Perfect voor starters en ZZP'ers</p>
|
||||||
|
</div>
|
||||||
|
<div class="mb-6">
|
||||||
|
<div class="flex items-baseline gap-1">
|
||||||
|
<span class="text-4xl font-bold text-slate-50">€99</span>
|
||||||
|
<span class="text-slate-500">/maand</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-slate-600 mt-1">+ eenmalige setup vanaf €1.500</p>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-3 mb-8 flex-1">
|
||||||
|
{['Professionele website (5-8 pagina\'s)', 'Managed hosting (SSL, CDN, backups)', 'Maandelijkse updates & onderhoud', 'Email support (24u responstijd)'].map(item => (
|
||||||
|
<li class="flex items-center gap-2 text-sm text-slate-400">
|
||||||
|
<svg class="h-4 w-4 text-accent-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href="/contact" class="block w-full rounded-xl py-3 text-center text-sm font-semibold text-slate-300 ring-1 ring-slate-700 transition-all hover:bg-slate-800 hover:text-slate-100">
|
||||||
|
Meer info
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Growth (featured) -->
|
||||||
|
<div class="relative rounded-2xl glass p-8 flex flex-col ring-1 ring-accent-500/30 glow-accent">
|
||||||
|
<div class="absolute -top-3.5 left-1/2 -translate-x-1/2">
|
||||||
|
<span class="inline-flex rounded-full bg-accent-500 px-4 py-1 text-xs font-semibold text-slate-950">Populair</span>
|
||||||
|
</div>
|
||||||
|
<div class="mb-6">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-200 mb-1">Growth</h3>
|
||||||
|
<p class="text-sm text-slate-500">Voor bedrijven die willen groeien</p>
|
||||||
|
</div>
|
||||||
|
<div class="mb-6">
|
||||||
|
<div class="flex items-baseline gap-1">
|
||||||
|
<span class="text-4xl font-bold text-slate-50">€349</span>
|
||||||
|
<span class="text-slate-500">/maand</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-slate-600 mt-1">+ eenmalige setup vanaf €3.500</p>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-3 mb-8 flex-1">
|
||||||
|
{['Custom website of webshop', 'Premium hosting met staging', 'SEO + GEO optimalisatie', 'Analytics dashboard', 'Livechat support (8u responstijd)'].map(item => (
|
||||||
|
<li class="flex items-center gap-2 text-sm text-slate-400">
|
||||||
|
<svg class="h-4 w-4 text-accent-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href="/contact" class="block w-full rounded-xl bg-accent-500 py-3 text-center text-sm font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-lg hover:shadow-accent-500/25">
|
||||||
|
Start met Growth
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enterprise -->
|
||||||
|
<div class="rounded-2xl glass-light p-8 flex flex-col">
|
||||||
|
<div class="mb-6">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-200 mb-1">Enterprise</h3>
|
||||||
|
<p class="text-sm text-slate-500">Voor bedrijven die willen domineren</p>
|
||||||
|
</div>
|
||||||
|
<div class="mb-6">
|
||||||
|
<div class="flex items-baseline gap-1">
|
||||||
|
<span class="text-4xl font-bold text-slate-50">Op maat</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-slate-600 mt-1">Vanaf €749/maand</p>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-3 mb-8 flex-1">
|
||||||
|
{['Alles uit Growth, plus:', 'Google Ads management', 'AI Chatbot op je website', 'Security monitoring & audits', 'Dedicated contactpersoon (4u SLA)'].map(item => (
|
||||||
|
<li class="flex items-center gap-2 text-sm text-slate-400">
|
||||||
|
<svg class="h-4 w-4 text-accent-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href="/contact" class="block w-full rounded-xl py-3 text-center text-sm font-semibold text-slate-300 ring-1 ring-slate-700 transition-all hover:bg-slate-800 hover:text-slate-100">
|
||||||
|
Neem contact op
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center mt-8">
|
||||||
|
<a href="/pakketten" class="text-sm text-slate-500 hover:text-accent-400 transition-colors">
|
||||||
|
Alle pakketten in detail bekijken →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- GEO HIGHLIGHT -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40 overflow-hidden">
|
||||||
|
<div class="absolute inset-0 -z-10 bg-gradient-to-b from-slate-950 via-accent-950/5 to-slate-950"></div>
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="mx-auto max-w-3xl text-center">
|
||||||
|
<div class="inline-flex items-center gap-2 rounded-full border border-violet-500/20 bg-violet-500/5 px-4 py-1.5 mb-6">
|
||||||
|
<span class="text-xs font-medium text-violet-400">Nieuw: Generative Engine Optimization</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-3xl sm:text-4xl font-bold text-slate-50 mb-6">
|
||||||
|
Word gevonden waar je klanten <span class="text-gradient">echt zoeken</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-lg text-slate-400 leading-relaxed mb-8">
|
||||||
|
25% van alle zoekopdrachten gaat al via AI — ChatGPT, Perplexity, Google AI Overviews.
|
||||||
|
Traditionele SEO alleen is niet meer genoeg. Met <strong class="text-slate-200">GEO</strong> zorgen
|
||||||
|
wij dat jouw bedrijf wordt geciteerd en aanbevolen door AI search engines.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-10">
|
||||||
|
<div class="rounded-xl glass-light p-6">
|
||||||
|
<p class="text-3xl font-bold text-accent-400 mb-1">357%</p>
|
||||||
|
<p class="text-sm text-slate-500">groei AI-verwijzingen<br />jaar-op-jaar</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl glass-light p-6">
|
||||||
|
<p class="text-3xl font-bold text-accent-400 mb-1">25%</p>
|
||||||
|
<p class="text-sm text-slate-500">van search gaat<br />al via AI</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl glass-light p-6">
|
||||||
|
<p class="text-3xl font-bold text-accent-400 mb-1">34%</p>
|
||||||
|
<p class="text-sm text-slate-500">minder clicks op<br />traditionele resultaten</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="/diensten/growth"
|
||||||
|
class="inline-flex items-center gap-2 rounded-xl bg-accent-500 px-7 py-3.5 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25"
|
||||||
|
>
|
||||||
|
Ontdek GEO
|
||||||
|
<svg class="h-4 w-4" 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 class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="relative rounded-3xl glass p-12 sm:p-16 text-center glow-accent overflow-hidden">
|
||||||
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 h-px w-3/4 bg-gradient-to-r from-transparent via-accent-500/40 to-transparent"></div>
|
||||||
|
|
||||||
|
<h2 class="text-3xl sm:text-4xl font-bold text-slate-50 mb-4">
|
||||||
|
Klaar om online te groeien?
|
||||||
|
</h2>
|
||||||
|
<p class="text-lg text-slate-400 mb-8 max-w-xl mx-auto">
|
||||||
|
Vertel ons over je project en we laten je binnen 24 uur weten wat we voor je kunnen betekenen. Vrijblijvend.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
class="group inline-flex items-center gap-2 rounded-xl bg-accent-500 px-8 py-4 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25"
|
||||||
|
>
|
||||||
|
Plan een gesprek
|
||||||
|
<svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" 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"
|
||||||
|
class="inline-flex items-center gap-2 text-base font-medium text-slate-400 hover:text-slate-200 transition-colors"
|
||||||
|
>
|
||||||
|
Of bekijk de pakketten eerst
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</Layout>
|
||||||
82
src/pages/over.astro
Normal file
82
src/pages/over.astro
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
---
|
||||||
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Over SiteLoft" description="De mens achter SiteLoft. Een solo-ondernemer met passie voor technologie, die jouw online aanwezigheid naar het volgende niveau tilt.">
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 -z-10"><div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div></div>
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
||||||
|
<div class="mx-auto max-w-3xl text-center">
|
||||||
|
<p class="text-sm font-semibold text-accent-400 uppercase tracking-widest mb-3">Over ons</p>
|
||||||
|
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">De mens achter <span class="text-gradient">SiteLoft</span></h1>
|
||||||
|
<p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">Geen groot bureau met lagen management. SiteLoft is opgericht door een developer die gelooft dat technologie toegankelijk moet zijn voor elk bedrijf.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- STORY -->
|
||||||
|
<section class="relative pb-24 sm:pb-32">
|
||||||
|
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="rounded-2xl glass p-8 sm:p-12">
|
||||||
|
<div class="prose max-w-none">
|
||||||
|
<p class="text-slate-300 leading-relaxed text-lg mb-6">
|
||||||
|
SiteLoft is ontstaan vanuit een simpele frustratie: waarom moet je als ondernemer drie verschillende partijen inhuren voor een website, hosting en marketing? Waarom kan dat niet gewoon bij één persoon die het allemaal begrijpt?
|
||||||
|
</p>
|
||||||
|
<p class="text-slate-400 leading-relaxed mb-6">
|
||||||
|
Als developer beheer ik mijn eigen servers, bouw ik websites in diverse technologieën en help ik bedrijven groeien online. Ik combineer technische kennis met een scherp oog voor wat commercieel werkt. Het resultaat: een full-service bureau zonder de overhead van een groot kantoor.
|
||||||
|
</p>
|
||||||
|
<p class="text-slate-400 leading-relaxed">
|
||||||
|
Wat mij drijft is de overtuiging dat een goede online aanwezigheid niet duur of ingewikkeld hoeft te zijn. Met de juiste technologie en een persoonlijke aanpak kan elk bedrijf professioneel online staan — en gevonden worden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- VALUES -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-50 mb-12 text-center">Waar we voor staan</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{[
|
||||||
|
{ title: 'Transparantie', desc: 'Geen verborgen kosten, geen kleine lettertjes. Je weet altijd precies waar je aan toe bent — qua prijs, planning en verwachtingen.', icon: 'M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z M15 12a3 3 0 11-6 0 3 3 0 016 0z' },
|
||||||
|
{ title: 'Kwaliteit', desc: 'Liever iets goed doen dan snel en half. Elke website die we opleveren voldoet aan onze hoge standaarden voor snelheid, veiligheid en design.', icon: 'M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z' },
|
||||||
|
{ title: 'Persoonlijk', desc: 'Je spreekt altijd met dezelfde persoon. Geen account managers, geen doorverbinden. Direct contact met de developer die je project kent.', icon: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z' },
|
||||||
|
].map(value => (
|
||||||
|
<div class="rounded-2xl glass-light p-8 text-center">
|
||||||
|
<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-accent-500/10 text-accent-400">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d={value.icon} /></svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-slate-100 mb-2">{value.title}</h3>
|
||||||
|
<p class="text-sm text-slate-400 leading-relaxed">{value.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- TECH STACK -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-50 mb-4 text-center">Onze tools</h2>
|
||||||
|
<p class="text-slate-500 text-center mb-12 max-w-lg mx-auto">We gebruiken moderne, bewezen technologie om het beste resultaat te leveren.</p>
|
||||||
|
<div class="flex flex-wrap items-center justify-center gap-4">
|
||||||
|
{['Astro', 'Next.js', 'WordPress', 'WooCommerce', 'Docker', 'Cloudflare', 'Tailwind CSS', 'TypeScript', 'Node.js', 'Git'].map(tech => (
|
||||||
|
<span class="rounded-full bg-slate-800/50 px-4 py-2 text-sm font-medium text-slate-400 ring-1 ring-slate-700/50">{tech}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<h2 class="text-3xl font-bold text-slate-50 mb-4">Laten we kennismaken</h2>
|
||||||
|
<p class="text-slate-400 mb-8 max-w-lg mx-auto">Benieuwd wat SiteLoft voor jou kan betekenen? Plan een vrijblijvend gesprek.</p>
|
||||||
|
<a href="/contact" class="inline-flex items-center gap-2 rounded-xl bg-accent-500 px-8 py-4 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25">
|
||||||
|
Neem contact op
|
||||||
|
<svg class="h-4 w-4" 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>
|
||||||
|
</Layout>
|
||||||
92
src/pages/pakketten.astro
Normal file
92
src/pages/pakketten.astro
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
|
||||||
|
const faqs = [
|
||||||
|
{ q: 'Wat zit er in de eenmalige setup?', a: 'De setup omvat het volledige traject: kennismakingsgesprek, design, development, content plaatsing, technische optimalisatie en lancering. Je betaalt voor een complete, kant-en-klare website.' },
|
||||||
|
{ q: 'Kan ik later upgraden naar een hoger pakket?', a: 'Ja, upgraden kan op elk moment. We schalen naadloos mee met je groei, zonder downtime of dataverlies.' },
|
||||||
|
{ q: 'Zijn er verborgen kosten?', a: 'Nee. De maandprijs is inclusief hosting, onderhoud, updates en support. Eventuele extra\'s (zoals Google Ads budget) worden altijd vooraf besproken.' },
|
||||||
|
{ q: 'Wat als ik wil opzeggen?', a: 'Na een minimale looptijd van 3 maanden kun je maandelijks opzeggen. Je website en alle data blijven van jou.' },
|
||||||
|
{ q: 'Beheer ik zelf mijn website?', a: 'Dat kan! Bij WordPress krijg je een wp-admin login voor content aanpassingen. Technisch beheer, updates en hosting doen wij. Bij andere stacks overleggen we de beste workflow.' },
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Pakketten" description="Duidelijke pakketten, eerlijke prijzen. Kies Starter, Growth of Enterprise — hosting en service slim gecombineerd.">
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 -z-10"><div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div></div>
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
||||||
|
<div class="mx-auto max-w-3xl text-center">
|
||||||
|
<p class="text-sm font-semibold text-accent-400 uppercase tracking-widest mb-3">Pakketten</p>
|
||||||
|
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">Duidelijke pakketten,<br /><span class="text-gradient">eerlijke prijzen</span></h1>
|
||||||
|
<p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">Hosting en diensten slim gecombineerd. Kies het pakket dat bij je past — upgraden kan altijd.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- PRICING CARDS -->
|
||||||
|
<section class="relative pb-24 sm:pb-32">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
<!-- Starter -->
|
||||||
|
<div class="rounded-2xl glass-light p-8 flex flex-col">
|
||||||
|
<h3 class="text-xl font-bold text-slate-100 mb-1">Starter</h3>
|
||||||
|
<p class="text-sm text-slate-500 mb-6">Perfect voor starters en ZZP'ers</p>
|
||||||
|
<div class="mb-6"><span class="text-5xl font-extrabold text-slate-50">€99</span><span class="text-slate-500 ml-1">/maand</span></div>
|
||||||
|
<p class="text-xs text-slate-600 mb-8">+ eenmalige setup vanaf €1.500</p>
|
||||||
|
<ul class="space-y-3 mb-8 flex-1">
|
||||||
|
{['Professionele website (5-8 pagina\'s)', 'Managed hosting (geïsoleerde container)', 'SSL-certificaat & CDN', 'Dagelijkse off-site backups', 'Maandelijkse updates & onderhoud', 'Basis analytics dashboard', 'Email support (24u responstijd)'].map(i => (
|
||||||
|
<li class="flex items-start gap-2 text-sm text-slate-400"><svg class="h-4 w-4 mt-0.5 text-accent-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>{i}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href="/contact" class="block w-full rounded-xl py-3.5 text-center text-sm font-semibold text-slate-300 ring-1 ring-slate-700 transition-all hover:bg-slate-800 hover:text-slate-100">Meer info</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Growth -->
|
||||||
|
<div class="relative rounded-2xl glass p-8 flex flex-col ring-1 ring-accent-500/30 glow-accent lg:scale-105">
|
||||||
|
<div class="absolute -top-3.5 left-1/2 -translate-x-1/2"><span class="inline-flex rounded-full bg-accent-500 px-4 py-1 text-xs font-semibold text-slate-950">Populair</span></div>
|
||||||
|
<h3 class="text-xl font-bold text-slate-100 mb-1">Growth</h3>
|
||||||
|
<p class="text-sm text-slate-500 mb-6">Voor bedrijven die willen groeien</p>
|
||||||
|
<div class="mb-6"><span class="text-5xl font-extrabold text-slate-50">€349</span><span class="text-slate-500 ml-1">/maand</span></div>
|
||||||
|
<p class="text-xs text-slate-600 mb-8">+ eenmalige setup vanaf €3.500</p>
|
||||||
|
<ul class="space-y-3 mb-8 flex-1">
|
||||||
|
{['Custom website of webshop (10-20+ pagina\'s)', 'Premium hosting met staging omgeving', 'Wekelijkse updates + security hardening', 'SEO optimalisatie + maandelijks rapport', 'GEO (AI search visibility monitoring)', 'Analytics dashboard', 'Email + livechat support (8u responstijd)'].map(i => (
|
||||||
|
<li class="flex items-start gap-2 text-sm text-slate-300"><svg class="h-4 w-4 mt-0.5 text-accent-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>{i}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href="/contact" class="block w-full rounded-xl bg-accent-500 py-3.5 text-center text-sm font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-lg hover:shadow-accent-500/25">Start met Growth</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enterprise -->
|
||||||
|
<div class="rounded-2xl glass-light p-8 flex flex-col">
|
||||||
|
<h3 class="text-xl font-bold text-slate-100 mb-1">Enterprise</h3>
|
||||||
|
<p class="text-sm text-slate-500 mb-6">Voor bedrijven die willen domineren</p>
|
||||||
|
<div class="mb-6"><span class="text-5xl font-extrabold text-slate-50">Op maat</span></div>
|
||||||
|
<p class="text-xs text-slate-600 mb-8">Vanaf €749/maand + setup vanaf €7.500</p>
|
||||||
|
<ul class="space-y-3 mb-8 flex-1">
|
||||||
|
{['Volledig maatwerk development', 'Dedicated hosting resources', 'Alles uit Growth, plus:', 'Google Ads management', 'AI Chatbot op je website', 'Security monitoring & maandelijkse audits', 'Dedicated contactpersoon (4u SLA)'].map(i => (
|
||||||
|
<li class="flex items-start gap-2 text-sm text-slate-400"><svg class="h-4 w-4 mt-0.5 text-accent-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>{i}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a href="/contact" class="block w-full rounded-xl py-3.5 text-center text-sm font-semibold text-slate-300 ring-1 ring-slate-700 transition-all hover:bg-slate-800 hover:text-slate-100">Neem contact op</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section class="relative py-24 sm:py-32 border-t border-slate-800/40">
|
||||||
|
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-50 mb-12 text-center">Veelgestelde vragen</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
{faqs.map(faq => (
|
||||||
|
<details class="group rounded-2xl glass-light p-6">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none text-base font-semibold text-slate-200">
|
||||||
|
{faq.q}
|
||||||
|
<svg class="h-5 w-5 text-slate-500 transition-transform group-open:rotate-45 shrink-0 ml-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-sm text-slate-400 leading-relaxed">{faq.a}</p>
|
||||||
|
</details>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</Layout>
|
||||||
212
src/styles/global.css
Normal file
212
src/styles/global.css
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
/* ─── SiteLoft Design System ─── */
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
/* Brand Colors */
|
||||||
|
--color-slate-950: #0a0e1a;
|
||||||
|
--color-slate-900: #0f1629;
|
||||||
|
--color-slate-800: #1a2340;
|
||||||
|
--color-slate-700: #253052;
|
||||||
|
--color-slate-600: #384466;
|
||||||
|
--color-slate-500: #5a6a8a;
|
||||||
|
--color-slate-400: #8694b2;
|
||||||
|
--color-slate-300: #b0bdd6;
|
||||||
|
--color-slate-200: #d4dce9;
|
||||||
|
--color-slate-100: #edf1f7;
|
||||||
|
--color-slate-50: #f7f9fc;
|
||||||
|
|
||||||
|
/* Accent: Electric Cyan */
|
||||||
|
--color-accent-50: #ecfeff;
|
||||||
|
--color-accent-100: #cffafe;
|
||||||
|
--color-accent-200: #a5f3fc;
|
||||||
|
--color-accent-300: #67e8f9;
|
||||||
|
--color-accent-400: #22d3ee;
|
||||||
|
--color-accent-500: #06b6d4;
|
||||||
|
--color-accent-600: #0891b2;
|
||||||
|
--color-accent-700: #0e7490;
|
||||||
|
--color-accent-800: #155e75;
|
||||||
|
--color-accent-900: #164e63;
|
||||||
|
|
||||||
|
/* Secondary: Warm Violet */
|
||||||
|
--color-violet-400: #a78bfa;
|
||||||
|
--color-violet-500: #8b5cf6;
|
||||||
|
--color-violet-600: #7c3aed;
|
||||||
|
|
||||||
|
/* Success green */
|
||||||
|
--color-emerald-400: #34d399;
|
||||||
|
--color-emerald-500: #10b981;
|
||||||
|
|
||||||
|
/* Fonts */
|
||||||
|
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||||
|
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base styles */
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
background-color: var(--color-slate-950);
|
||||||
|
color: var(--color-slate-200);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selection */
|
||||||
|
::selection {
|
||||||
|
background-color: var(--color-accent-500);
|
||||||
|
color: var(--color-slate-950);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom utilities */
|
||||||
|
@utility glass {
|
||||||
|
background: rgba(15, 22, 41, 0.6);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
border: 1px solid rgba(134, 148, 178, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility glass-light {
|
||||||
|
background: rgba(26, 35, 64, 0.4);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border: 1px solid rgba(134, 148, 178, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility text-gradient {
|
||||||
|
background: linear-gradient(135deg, var(--color-accent-400), var(--color-violet-400));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility glow-accent {
|
||||||
|
box-shadow: 0 0 40px rgba(6, 182, 212, 0.15), 0 0 80px rgba(6, 182, 212, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility glow-accent-strong {
|
||||||
|
box-shadow: 0 0 30px rgba(6, 182, 212, 0.25), 0 0 60px rgba(6, 182, 212, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes fade-in-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(24px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0%, 100% { opacity: 0.4; }
|
||||||
|
50% { opacity: 0.8; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility animate-fade-in-up {
|
||||||
|
animation: fade-in-up 0.7s ease-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility animate-fade-in {
|
||||||
|
animation: fade-in 0.5s ease-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility delay-100 {
|
||||||
|
animation-delay: 100ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility delay-200 {
|
||||||
|
animation-delay: 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility delay-300 {
|
||||||
|
animation-delay: 300ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility delay-400 {
|
||||||
|
animation-delay: 400ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility delay-500 {
|
||||||
|
animation-delay: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prose styles for blog */
|
||||||
|
.prose {
|
||||||
|
max-width: 72ch;
|
||||||
|
}
|
||||||
|
.prose h1, .prose h2, .prose h3 {
|
||||||
|
color: var(--color-slate-50);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.prose h2 {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.prose h3 {
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
.prose p {
|
||||||
|
color: var(--color-slate-300);
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
.prose a {
|
||||||
|
color: var(--color-accent-400);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
}
|
||||||
|
.prose a:hover {
|
||||||
|
color: var(--color-accent-300);
|
||||||
|
}
|
||||||
|
.prose strong {
|
||||||
|
color: var(--color-slate-100);
|
||||||
|
}
|
||||||
|
.prose ul, .prose ol {
|
||||||
|
color: var(--color-slate-300);
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
.prose li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.prose code {
|
||||||
|
background: var(--color-slate-800);
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: var(--color-accent-300);
|
||||||
|
}
|
||||||
|
.prose pre {
|
||||||
|
background: var(--color-slate-900) !important;
|
||||||
|
border: 1px solid rgba(134, 148, 178, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1.25rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.prose blockquote {
|
||||||
|
border-left: 3px solid var(--color-accent-500);
|
||||||
|
padding-left: 1rem;
|
||||||
|
color: var(--color-slate-400);
|
||||||
|
font-style: italic;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
5
tsconfig.json
Normal file
5
tsconfig.json
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"include": [".astro/types.d.ts", "**/*"],
|
||||||
|
"exclude": ["dist"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user