bdnugget/linuxservice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First vibe version

Browse Source
This commit is contained in:
bdnugget
2025-07-04 14:31:50 +02:00
commit 35b8434bcf
6 changed files with 1124 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
README.md Normal file
View File

@ -0,0 +1,105 @@
# poepiescheet - Linux Migratie Service Website
Een Nederlandse website voor Linux migratie services in lijn met de endof10.org beweging.
## Overzicht
Deze website helpt mensen bij het migreren van Windows 10 naar Linux, met focus op:
- Duurzame computing en het voorkomen van e-waste
- Voordelen van FOSS (Free and Open Source Software)
- Hergebruik van oude hardware
- Professionele Linux installatie services
## Technische Details
- **Backend**: Go met html/template
- **Frontend**: Modern CSS met responsive design
- **Stijl**: Minimalistisch en toegankelijk voor alle leeftijden
- **Taal**: Nederlands
## Installatie en Gebruik
### Vereisten
- Go 1.24.4 of hoger
- Moderne webbrowser
### Website Starten
```bash
# Start de server
go run main.go
# De website is nu beschikbaar op:
# http://localhost:8080
```
### Structuur
```
linuxservice/
├── main.go # Go webserver
├── templates/ # HTML templates
│ ├── index.html # Hoofdpagina
│ └── contact.html # Contact pagina
├── static/ # Statische bestanden
│ └── style.css # CSS styling
└── README.md # Dit bestand
```
## Aanpassing Contactgegevens
Om uw eigen contactgegevens in te vullen, pas de volgende waarden aan in `main.go`:
```go
// Vervang deze waarden met uw eigen gegevens:
KVK: "12345678", // Uw KVK nummer
Email: "info@poepiescheet.nl", // Uw email adres
Phone: "+31 6 12345678", // Uw telefoonnummer
```
## Pagina's
### Hoofdpagina (/)
- Hero sectie met duidelijke boodschap
- Voordelen van Linux migratie
- Informatie over Windows 10 End of Life
- Diensten overzicht
- Call-to-action
### Contact Pagina (/contact)
- Contactformulier
- Bedrijfsinformatie
- Openingstijden
- Waarom klanten voor u moeten kiezen
## Styling
Het design is:
- **Minimalistisch**: Schoon en overzichtelijk
- **Toegankelijk**: Geschikt voor alle leeftijden
- **Responsive**: Werkt op desktop, tablet en mobiel
- **Professioneel**: Vertrouwen opwekkend voor bedrijven
## Belangrijke Boodschappen
De website benadrukt:
- **Duurzaamheid**: Tegengaan van e-waste
- **Kostenbesparing**: Gratis Linux vs dure Windows licenties
- **Veiligheid**: Linux is veiliger dan Windows
- **Hardware hergebruik**: Oude computers krijgen nieuw leven
- **Privacy**: Geen tracking of gegevensverzameling
## Deployment
Voor productie gebruik:
1. Vervang alle placeholder contactgegevens
2. Configureer een reverse proxy (nginx/Apache)
3. Gebruik HTTPS certificaten
4. Overweeg een proper database voor contactformulieren
## Ondersteuning
Deze website ondersteunt de [endof10.org](https://endof10.org) beweging voor duurzame computing.
## Licentie
Open source - voel je vrij om aan te passen voor eigen gebruik.

3
go.mod Normal file
View File

@ -0,0 +1,3 @@
module linuxservice
go 1.24.4

59
main.go Normal file
View File

@ -0,0 +1,59 @@
package main
import (
"html/template"
"log"
"net/http"
)
type PageData struct {
CompanyName string
Title string
KVK string
Email string
Phone string
}
func main() {
// Parse templates
tmpl := template.Must(template.ParseGlob("templates/*.html"))
// Static files
fs := http.FileServer(http.Dir("static/"))
http.Handle("/static/", http.StripPrefix("/static/", fs))
// Home page
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
data := PageData{
CompanyName: "poepiescheet",
Title: "Linux Migratie Service - Uw Computer Nieuw Leven Geven",
KVK: "12345678", // Replace with actual KVK number
Email: "info@poepiescheet.nl",
Phone: "+31 6 12345678",
}
if err := tmpl.ExecuteTemplate(w, "index.html", data); err != nil {
log.Printf("Template execution error: %v", err)
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
}
})
// Contact page
http.HandleFunc("/contact", func(w http.ResponseWriter, r *http.Request) {
data := PageData{
CompanyName: "poepiescheet",
Title: "Contact - poepiescheet",
KVK: "12345678", // Replace with actual KVK number
Email: "info@poepiescheet.nl",
Phone: "+31 6 12345678",
}
if err := tmpl.ExecuteTemplate(w, "contact.html", data); err != nil {
log.Printf("Template execution error: %v", err)
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
}
})
log.Println("Server starting on :8080")
log.Fatal(http.ListenAndServe(":8080", nil))
}

623
static/style.css Normal file
View File

@ -0,0 +1,623 @@
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
margin-bottom: 1rem;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
p {
margin-bottom: 1rem;
color: #666;
}
/* Navigation */
.navbar {
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 20px;
max-width: 1200px;
margin: 0 auto;
}
.nav-logo h1 {
color: #2563eb;
font-size: 1.8rem;
margin: 0;
}
.nav-logo a {
text-decoration: none;
color: inherit;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
text-decoration: none;
color: #666;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover,
.nav-links a.active {
color: #2563eb;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 4rem 0;
display: flex;
align-items: center;
min-height: 80vh;
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-content h2 {
font-size: 3rem;
color: #1e293b;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.25rem;
color: #64748b;
margin-bottom: 2rem;
}
.hero-buttons {
display: flex;
gap: 1rem;
}
.hero-image {
display: flex;
justify-content: center;
align-items: center;
}
.computer-icon {
font-size: 8rem;
opacity: 0.8;
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border: 2px solid transparent;
cursor: pointer;
font-size: 1rem;
}
.btn-primary {
background: #2563eb;
color: white;
}
.btn-primary:hover {
background: #1d4ed8;
transform: translateY(-2px);
}
.btn-secondary {
background: transparent;
color: #2563eb;
border-color: #2563eb;
}
.btn-secondary:hover {
background: #2563eb;
color: white;
}
.btn-large {
padding: 16px 32px;
font-size: 1.1rem;
}
/* Benefits Section */
.benefits {
padding: 5rem 0;
background: #fff;
}
.benefits h2 {
text-align: center;
margin-bottom: 3rem;
color: #1e293b;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.benefit-card {
background: #f8fafc;
padding: 2rem;
border-radius: 12px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.benefit-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.benefit-card h3 {
color: #1e293b;
margin-bottom: 1rem;
}
/* Windows EOL Section */
.windows-eol {
padding: 5rem 0;
background: #fef2f2;
}
.windows-eol h2 {
text-align: center;
margin-bottom: 3rem;
color: #dc2626;
}
.eol-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3rem;
align-items: center;
}
.eol-text ul {
list-style: none;
margin: 2rem 0;
}
.eol-text li {
padding: 0.5rem 0;
font-size: 1.1rem;
}
.highlight {
background: #dcfce7;
padding: 1.5rem;
border-radius: 8px;
border-left: 4px solid #16a34a;
font-weight: 500;
color: #166534;
}
.eol-stats {
display: flex;
flex-direction: column;
gap: 2rem;
}
.stat {
text-align: center;
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.stat h3 {
font-size: 2rem;
color: #dc2626;
margin-bottom: 0.5rem;
}
/* Services Section */
.services {
padding: 5rem 0;
background: #fff;
}
.services h2 {
text-align: center;
margin-bottom: 3rem;
color: #1e293b;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.service-card {
background: #f1f5f9;
padding: 2rem;
border-radius: 12px;
border-left: 4px solid #2563eb;
transition: transform 0.3s ease;
}
.service-card:hover {
transform: translateY(-3px);
}
.service-card h3 {
color: #1e293b;
margin-bottom: 1rem;
}
/* CTA Section */
.cta {
padding: 5rem 0;
background: #2563eb;
color: white;
text-align: center;
}
.cta h2 {
color: white;
margin-bottom: 1rem;
}
.cta p {
color: #bfdbfe;
font-size: 1.1rem;
margin-bottom: 2rem;
}
/* Contact Page Styles */
.contact-hero {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 3rem 0;
text-align: center;
}
.contact-hero h1 {
color: #1e293b;
margin-bottom: 1rem;
}
.contact-content {
padding: 4rem 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.contact-info {
background: #f8fafc;
padding: 2rem;
border-radius: 12px;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.contact-icon {
font-size: 2rem;
min-width: 3rem;
}
.contact-item h3 {
margin-bottom: 0.5rem;
color: #1e293b;
}
.contact-item a {
color: #2563eb;
text-decoration: none;
}
.contact-item a:hover {
text-decoration: underline;
}
.contact-hours {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #e2e8f0;
}
.contact-hours h3 {
color: #1e293b;
margin-bottom: 1rem;
}
/* Form Styles */
.contact-form {
background: #fff;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #374151;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.contact-cta {
padding: 4rem 0;
background: #f8fafc;
}
.contact-cta h2 {
text-align: center;
margin-bottom: 3rem;
color: #1e293b;
}
.cta-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.cta-benefit {
text-align: center;
padding: 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.cta-benefit .benefit-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.cta-benefit h3 {
color: #1e293b;
margin-bottom: 1rem;
}
/* Footer */
footer {
background: #1e293b;
color: #94a3b8;
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
color: white;
margin-bottom: 1rem;
}
.footer-section a {
color: #94a3b8;
text-decoration: none;
}
.footer-section a:hover {
color: #2563eb;
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #334155;
color: #64748b;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.hero-content h2 {
font-size: 2.5rem;
}
.hero-buttons {
justify-content: center;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.eol-content {
grid-template-columns: 1fr;
}
.contact-grid {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: 1fr;
}
.cta-benefits {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
}
@media (max-width: 480px) {
.hero-content h2 {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.hero-buttons {
flex-direction: column;
gap: 1rem;
}
.computer-icon {
font-size: 6rem;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.benefit-card,
.service-card,
.cta-benefit {
animation: fadeInUp 0.6s ease-out;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}
/* Print Styles */
@media print {
.navbar,
.hero-buttons,
.btn,
.contact-form {
display: none;
}
body {
font-size: 12pt;
line-height: 1.4;
}
.hero-content {
grid-template-columns: 1fr;
}
}

169
templates/contact.html Normal file
View File

@ -0,0 +1,169 @@
<!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><a href="/">{{.CompanyName}}</a></h1>
</div>
<ul class="nav-links">
<li><a href="/">Home</a></li>
<li><a href="/#voordelen">Voordelen</a></li>
<li><a href="/#diensten">Diensten</a></li>
<li><a href="/contact" class="active">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<section class="contact-hero">
<div class="container">
<h1>Neem Contact Op</h1>
<p>Heeft u vragen over Linux migratie? Wij helpen u graag verder!</p>
</div>
</section>
<section class="contact-content">
<div class="container">
<div class="contact-grid">
<div class="contact-info">
<h2>Contactgegevens</h2>
<div class="contact-item">
<div class="contact-icon">📧</div>
<div>
<h3>Email</h3>
<p><a href="mailto:{{.Email}}">{{.Email}}</a></p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">📞</div>
<div>
<h3>Telefoon</h3>
<p><a href="tel:{{.Phone}}">{{.Phone}}</a></p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">🏢</div>
<div>
<h3>KVK Nummer</h3>
<p>{{.KVK}}</p>
</div>
</div>
<div class="contact-hours">
<h3>Openingstijden</h3>
<p>Maandag - Vrijdag: 09:00 - 17:00</p>
<p>Weekend: Op afspraak</p>
</div>
</div>
<div class="contact-form">
<h2>Stuur een bericht</h2>
<form action="#" method="POST">
<div class="form-group">
<label for="name">Naam *</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Telefoon</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="computer">Huidige computer</label>
<input type="text" id="computer" name="computer" placeholder="Bijv. Dell Inspiron 2015, HP Pavilion 2018">
</div>
<div class="form-group">
<label for="service">Gewenste service</label>
<select id="service" name="service">
<option value="">Selecteer een optie</option>
<option value="advice">Gratis advies</option>
<option value="installation">Linux installatie</option>
<option value="migration">Data migratie</option>
<option value="training">Training & ondersteuning</option>
<option value="other">Anders</option>
</select>
</div>
<div class="form-group">
<label for="message">Bericht *</label>
<textarea id="message" name="message" rows="5" required placeholder="Vertel ons over uw situatie en hoe wij u kunnen helpen..."></textarea>
</div>
<button type="submit" class="btn btn-primary">Verstuur bericht</button>
</form>
</div>
</div>
</div>
</section>
<section class="contact-cta">
<div class="container">
<h2>Waarom kiezen voor {{.CompanyName}}?</h2>
<div class="cta-benefits">
<div class="cta-benefit">
<div class="benefit-icon">🎯</div>
<h3>Persoonlijke aanpak</h3>
<p>Elke klant is uniek, en wij bieden maatwerkoplossingen.</p>
</div>
<div class="cta-benefit">
<div class="benefit-icon">🛠️</div>
<h3>Professionele service</h3>
<p>Jarenlange ervaring met Linux systemen en migraties.</p>
</div>
<div class="cta-benefit">
<div class="benefit-icon">🤝</div>
<h3>Volledige ondersteuning</h3>
<p>Van installatie tot training, wij begeleiden u door het hele proces.</p>
</div>
<div class="cta-benefit">
<div class="benefit-icon">💚</div>
<h3>Duurzame keuze</h3>
<p>Samen bouwen we aan een duurzamere digitale toekomst.</p>
</div>
</div>
</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>

165
templates/index.html Normal file
View File

@ -0,0 +1,165 @@
<!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="#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="computer-icon">💻</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">
<h3>1+ miljard</h3>
<p>Windows 10 computers wereldwijd</p>
</div>
<div class="stat">
<h3>240 miljoen ton</h3>
<p>Potentiële e-waste zonder migratie</p>
</div>
</div>
</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="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>