Files
linuxservice/templates/index.html
2025-07-04 15:47:24 +02:00

398 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Title}}</title>
<link rel="stylesheet" href="/static/style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<h1>{{.CompanyName}}</h1>
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#voordelen">Voordelen</a></li>
<li><a href="#distros">Linux Keuze</a></li>
<li><a href="#diensten">Diensten</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<section id="home" class="hero">
<div class="hero-content">
<h2>Geef uw computer een tweede leven</h2>
<p class="hero-subtitle">Windows 10 ondersteuning eindigt binnenkort? Geen probleem! Ontdek hoe Linux uw hardware nieuw leven kan geven.</p>
<div class="hero-buttons">
<a href="#voordelen" class="btn btn-primary">Meer weten</a>
<a href="/contact" class="btn btn-secondary">Gratis advies</a>
</div>
</div>
<div class="hero-image">
<div class="terminal-window">
<div class="terminal-header">
<div class="terminal-buttons">
<span class="btn-close"></span>
<span class="btn-minimize"></span>
<span class="btn-maximize"></span>
</div>
<div class="terminal-title">Terminal</div>
</div>
<div class="terminal-body">
<div class="terminal-line">
<span class="prompt">ainrommer@computer:~$</span>
<span class="command">sudo pacman -Syu</span>
</div>
<div class="terminal-line">
<span class="output">:: Synchronizing package databases...</span>
</div>
<div class="terminal-line">
<span class="output">✓ Everything is up to date.</span>
</div>
<div class="terminal-line">
<span class="prompt">ainrommer@computer:~$</span>
<span class="command">fastfetch</span>
</div>
<div class="terminal-line">
<span class="output">🔥 Garuda Linux (Dragonized Gaming)</span>
</div>
<div class="terminal-line">
<span class="output">🐧 Linux 6.11.2-zen1-1-zen</span>
</div>
<div class="terminal-line">
<span class="output">💾 8.2 GiB / 16.0 GiB (51%)</span>
</div>
<div class="terminal-line">
<span class="prompt">ainrommer@computer:~$</span>
<span class="cursor">_</span>
</div>
</div>
</div>
</div>
</section>
<section id="voordelen" class="benefits">
<div class="container">
<h2>Waarom Linux kiezen?</h2>
<div class="benefits-grid">
<div class="benefit-card">
<div class="benefit-icon">🛡️</div>
<h3>Veilig & Betrouwbaar</h3>
<p>Linux is van nature veiliger dan Windows. Minder virussen, geen gedwongen updates, en volledige controle over uw systeem.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">💰</div>
<h3>Volledig Gratis</h3>
<p>Geen licentiekosten, geen abonnementen. Linux en alle software zijn gratis en open source.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">🔄</div>
<h3>Oude Hardware Hergebruiken</h3>
<p>Uw computer van 10 jaar oud? Linux maakt hem weer snel! Geen nieuwe hardware nodig.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">🌱</div>
<h3>Milieuvriendelijk</h3>
<p>Stop e-waste! Door Linux te gebruiken houdt u uw apparaten langer werkend en uit de afvalberg.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">🔒</div>
<h3>Privacy Bescherming</h3>
<p>Geen tracking, geen verborgen gegevensverzameling. Uw privacy blijft van uzelf.</p>
</div>
<div class="benefit-card">
<div class="benefit-icon"></div>
<h3>Snel & Efficiënt</h3>
<p>Linux gebruikt minder systeembronnen, waardoor uw computer sneller opstart en soepeler werkt.</p>
</div>
</div>
</div>
</section>
<section id="windows10-eol" class="windows-eol">
<div class="container">
<h2>Windows 10 Ondersteuning Eindigt</h2>
<div class="eol-content">
<div class="eol-text">
<p>Microsoft stopt de ondersteuning voor Windows 10 in <strong>oktober 2025</strong>. Dit betekent:</p>
<ul>
<li>❌ Geen beveiligingsupdates meer</li>
<li>❌ Geen technische ondersteuning</li>
<li>❌ Uw computer wordt kwetsbaar voor cyberaanvallen</li>
<li>❌ Mogelijk niet meer compatibel met nieuwe software</li>
</ul>
<p class="highlight">Maar u hoeft geen nieuwe computer te kopen! Linux biedt een moderne, veilige alternatief dat perfect werkt op uw huidige hardware.</p>
</div>
<div class="eol-stats">
<div class="stat">
<div class="stat-icon">💻</div>
<h3>1+ miljard</h3>
<p>Windows 10 computers wereldwijd</p>
</div>
<div class="stat">
<div class="stat-icon">🗑️</div>
<h3>240 miljoen ton</h3>
<p>Potentiële e-waste zonder migratie</p>
</div>
<div class="stat">
<div class="stat-icon">🔒</div>
<h3>0 updates</h3>
<p>Na oktober 2025</p>
</div>
</div>
</div>
</div>
</section>
<section id="distros" class="distros">
<div class="container">
<h2>Welke Linux Past Bij U?</h2>
<p class="section-subtitle">Er zijn vele Linux distributies, elk met hun eigen voordelen. Wij helpen u de perfecte keuze maken.</p>
<div class="distros-grid">
<div class="distro-card">
<div class="distro-header">
<div class="distro-logo">🐧</div>
<h3>Ubuntu</h3>
<span class="distro-tag">Populair</span>
</div>
<p class="distro-description">Perfect voor beginners die van Windows komen. Gebruiksvriendelijk met veel ondersteuning.</p>
<div class="distro-features">
<span class="feature">✓ Eenvoudig</span>
<span class="feature">✓ Grote community</span>
<span class="feature">✓ LTS versies</span>
</div>
<p class="distro-ideal">Ideaal voor: <strong>Beginners, kantoorwerk, algemeen gebruik</strong></p>
</div>
<div class="distro-card">
<div class="distro-header">
<div class="distro-logo">🍃</div>
<h3>Linux Mint</h3>
<span class="distro-tag">Windows-achtig</span>
</div>
<p class="distro-description">Ziet er vertrouwd uit voor Windows gebruikers. Stabiel en betrouwbaar.</p>
<div class="distro-features">
<span class="feature">✓ Vertrouwd interface</span>
<span class="feature">✓ Multimedia support</span>
<span class="feature">✓ Zeer stabiel</span>
</div>
<p class="distro-ideal">Ideaal voor: <strong>Windows migratie, ouderen, conservatieve gebruikers</strong></p>
</div>
<div class="distro-card">
<div class="distro-header">
<div class="distro-logo">🚀</div>
<h3>Pop!_OS</h3>
<span class="distro-tag">Gaming</span>
</div>
<p class="distro-description">Gemaakt door System76. Excellent voor gaming en creatief werk.</p>
<div class="distro-features">
<span class="feature">✓ Gaming optimized</span>
<span class="feature">✓ NVIDIA support</span>
<span class="feature">✓ Modern design</span>
</div>
<p class="distro-ideal">Ideaal voor: <strong>Gamers, developers, jongeren</strong></p>
</div>
<div class="distro-card">
<div class="distro-header">
<div class="distro-logo">🎨</div>
<h3>Elementary OS</h3>
<span class="distro-tag">Mooi</span>
</div>
<p class="distro-description">Prachtig design geïnspireerd door macOS. Eenvoudig en elegant.</p>
<div class="distro-features">
<span class="feature">✓ Elegant design</span>
<span class="feature">✓ Privacy-focused</span>
<span class="feature">✓ Mac-achtig</span>
</div>
<p class="distro-ideal">Ideaal voor: <strong>Mac gebruikers, designers, stijlbewuste mensen</strong></p>
</div>
<div class="distro-card">
<div class="distro-header">
<div class="distro-logo">🔧</div>
<h3>Fedora</h3>
<span class="distro-tag">Geavanceerd</span>
</div>
<p class="distro-description">Nieuwste technologieën en features. Voor technische gebruikers.</p>
<div class="distro-features">
<span class="feature">✓ Cutting-edge</span>
<span class="feature">✓ Red Hat basis</span>
<span class="feature">✓ Developer tools</span>
</div>
<p class="distro-ideal">Ideaal voor: <strong>Developers, IT professionals, tech enthusiasts</strong></p>
</div>
<div class="distro-card">
<div class="distro-header">
<div class="distro-logo">🔥</div>
<h3>Garuda Linux</h3>
<span class="distro-tag">Performance</span>
</div>
<p class="distro-description">Arch-based met extreme prestaties. Prachtig design en gaming-geoptimaliseerd.</p>
<div class="distro-features">
<span class="feature">✓ Arch basis</span>
<span class="feature">✓ Gaming ready</span>
<span class="feature">✓ Beautiful UI</span>
</div>
<p class="distro-ideal">Ideaal voor: <strong>Power users, gamers, performance enthusiasts</strong></p>
</div>
</div>
<div class="distro-cta">
<h3>Niet zeker welke te kiezen?</h3>
<p>Geen probleem! Wij adviseren u graag over de beste distributie voor uw specifieke situatie en behoeften.</p>
<a href="/contact" class="btn btn-primary">Persoonlijk advies</a>
</div>
</div>
</section>
<section id="diensten" class="services">
<div class="container">
<h2>Onze Diensten</h2>
<div class="services-grid">
<div class="service-card">
<h3>Gratis Advies</h3>
<p>Wij bekijken uw huidige computer en adviseren over de beste Linux distributie voor uw behoeften.</p>
</div>
<div class="service-card">
<h3>Installatie Service</h3>
<p>Professionele installatie van Linux op uw computer, inclusief alle benodigde software.</p>
</div>
<div class="service-card">
<h3>Data Migratie</h3>
<p>Veilige overdracht van al uw bestanden, foto's, documenten van Windows naar Linux.</p>
</div>
<div class="service-card">
<h3>Training & Ondersteuning</h3>
<p>Persoonlijke begeleiding om u vertrouwd te maken met uw nieuwe Linux systeem.</p>
</div>
</div>
</div>
</section>
<section class="linux-features">
<div class="container">
<h2>Linux in Actie</h2>
<p class="section-subtitle">Zie hoe Linux eruitziet en werkt op verschillende apparaten</p>
<div class="features-grid">
<div class="feature-showcase">
<div class="feature-mockup desktop-mockup">
<div class="mockup-header">
<div class="mockup-buttons">
<span></span><span></span><span></span>
</div>
<div class="mockup-title">Garuda Linux Desktop</div>
</div>
<div class="mockup-content">
<div class="desktop-wallpaper">
<div class="desktop-panel">
<div class="panel-left">
<span class="app-icon">🏠</span>
<span class="app-icon">📁</span>
<span class="app-icon">🌐</span>
<span class="app-icon">✉️</span>
</div>
<div class="panel-right">⚙️ 📶 🔋 12:34</div>
</div>
</div>
</div>
</div>
<h3>Bekende Desktop Interface</h3>
<p>Linux ziet er vertrouwd uit met een moderne, gebruiksvriendelijke interface.</p>
</div>
<div class="feature-showcase">
<div class="feature-mockup app-mockup">
<div class="mockup-header">
<div class="mockup-buttons">
<span></span><span></span><span></span>
</div>
<div class="mockup-title">Software Center</div>
</div>
<div class="mockup-content">
<div class="app-list">
<div class="app-item">📄 LibreOffice <span class="install-btn">Installeren</span></div>
<div class="app-item">🎨 GIMP <span class="install-btn">Installeren</span></div>
<div class="app-item">🎵 Spotify <span class="install-btn">Installeren</span></div>
<div class="app-item">💬 Discord <span class="install-btn">Installeren</span></div>
</div>
</div>
</div>
<h3>Eenvoudig Software Installeren</h3>
<p>Duizenden gratis programma's met één klik installeren, net als een app store.</p>
</div>
<div class="feature-showcase">
<div class="feature-mockup performance-mockup">
<div class="performance-bars">
<div class="performance-item">
<div class="perf-label">🚀 Opstarttijd</div>
<div class="perf-bar">
<div class="perf-fill windows" style="width: 80%">Windows: 45s</div>
</div>
<div class="perf-bar">
<div class="perf-fill linux" style="width: 35%">Linux: 15s</div>
</div>
</div>
<div class="performance-item">
<div class="perf-label">💾 RAM gebruik</div>
<div class="perf-bar">
<div class="perf-fill windows" style="width: 70%">Windows: 3.5GB</div>
</div>
<div class="perf-bar">
<div class="perf-fill linux" style="width: 30%">Linux: 1.5GB</div>
</div>
</div>
</div>
</div>
<h3>Superieure Prestaties</h3>
<p>Linux maakt uw computer sneller en gebruikt minder geheugen dan Windows.</p>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<h2>Klaar voor de overstap?</h2>
<p>Laat uw computer niet eindigen als e-waste. Geef hem een tweede leven met Linux!</p>
<a href="/contact" class="btn btn-primary btn-large">Neem contact op</a>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>{{.CompanyName}}</h3>
<p>Specialist in Linux migratie en duurzame computing oplossingen.</p>
</div>
<div class="footer-section">
<h3>Contact</h3>
<p>Email: {{.Email}}</p>
<p>Telefoon: {{.Phone}}</p>
<p>KVK: {{.KVK}}</p>
</div>
<div class="footer-section">
<h3>Ondersteuning</h3>
<p>Wij ondersteunen de <a href="https://endof10.org" target="_blank">End of 10</a> beweging voor duurzame computing.</p>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 {{.CompanyName}}. Alle rechten voorbehouden.</p>
</div>
</div>
</footer>
</body>
</html>