lgtm

Partials take styling class for section as param
Getting there, I think
2025-09-05 12:13:23 +02:00 · 2025-09-05 11:39:14 +02:00 · 2025-09-03 15:33:02 +02:00 · 2025-09-03 14:17:26 +02:00 · 2025-09-03 13:06:02 +02:00 · 2025-09-03 10:09:53 +02:00
45 changed files with 1382 additions and 346 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,29 @@
+# Binaries
+linuxservice
+*.exe
+*.dll
+*.so
+*.dylib
+
+# Build directories
+/bin/
+/build/
+/dist/
+
+# Logs and caches
+*.log
+*.cache
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Editor/project files
+.vscode/
+.idea/
+
+# Go
+*.test
+coverage.out
+
+/wiki/
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@ -22,6 +22,7 @@ The application supports the following environment variables:
 | `STREET` | `Voorstraat 123` | Street address |
 | `POSTAL_CODE` | `9967 AA` | Postal code |
 | `VILLAGE` | `Eenrum` | Village/city name |
+| `DOMAIN` | `hogelandlinux.nl` | Your website domain (used for SEO and social media meta tags) |
 | `TELEGRAM_BOT_TOKEN` | *(empty)* | Telegram bot token for contact form notifications |
 | `TELEGRAM_CHAT_ID` | *(empty)* | Telegram chat ID where notifications will be sent |

@ -90,6 +91,7 @@ PHONE=+31 6 12345678
 STREET=Voorstraat 123
 POSTAL_CODE=9967 AA
 VILLAGE=Eenrum
+DOMAIN=hogelandlinux.nl
 TELEGRAM_BOT_TOKEN=your_bot_token_here
 TELEGRAM_CHAT_ID=your_chat_id_here
 ```
--- a/README.md
+++ b/README.md
@ -1,29 +1,31 @@
-# Hogeland Linux - Linux Migratie Service Website
+# Hogeland Linux - Linux-migratieservice-website

-Een Nederlandse website voor Linux migratie services in lijn met de endof10.org beweging.
+Een Nederlandstalige website voor Linux-migratieservices, in lijn met de End-of-10-beweging.

 ## Overzicht

-Deze website helpt mensen bij het migreren van Windows 10 naar Linux, met focus op:
+Deze website helpt mensen bij de migratie van Windows 10 naar Linux, met de focus op:
+
 - Duurzaam computergebruik en het voorkomen van e-waste
 - Voordelen van FOSS (Free and Open Source Software)
 - Hergebruik van oude hardware
- Professionele Linux installatie services
+- Professionele Linux-installatieservices

-## Technische Details
+## Technische details

 - **Backend**: Go met html/template
- **Frontend**: Modern CSS met responsive design
- **Stijl**: Minimalistisch en toegankelijk voor alle leeftijden
+- **Frontend**: modern CSS met responsive design
+- **Stijl**: minimalistisch en toegankelijk voor alle leeftijden
 - **Taal**: Nederlands

-## Installatie en Gebruik
+## Installatie en gebruik

 ### Vereisten
+
 - Go 1.24.4 of hoger
 - Moderne webbrowser

-### Website Starten
+### Website starten

 ```bash
 # Start de server
@ -34,7 +36,8 @@ go run main.go
 ```

 ### Structuur
-```
+
+```text
 linuxservice/
 ├── main.go           # Go webserver
 ├── templates/        # HTML templates
@ -45,29 +48,31 @@ linuxservice/
 └── README.md        # Dit bestand
 ```

-## Aanpassing Contactgegevens
+## Aanpassen van contactgegevens

-Om uw eigen contactgegevens in te vullen, pas de volgende waarden aan in `main.go`:
+Om uw eigen contactgegevens in te vullen, past u de volgende waarden aan in `main.go`:

 ```go
-// Vervang deze waarden met uw eigen gegevens:
-KVK:         "12345678",              // Uw KVK nummer
-Email:       "info@hogelandlinux.nl",  // Uw email adres
+// Vervang deze waarden door uw eigen gegevens:
+KVK:         "12345678",              // Uw KvK-nummer
+Email:       "info@hogelandlinux.nl",  // Uw e-mailadres
 Phone:       "+31 6 12345678",        // Uw telefoonnummer
 ```

 ## Pagina's

 ### Hoofdpagina (/)
- Hero sectie met duidelijke call-to-action
- Voordelen van Linux migratie
- Informatie over Windows 10 End of Life
- Linux distributies showcase met aanbevelingen
- Linux features met visuele mockups
- Diensten overzicht
+
+- Hero-sectie met duidelijke call-to-action
+- Voordelen van Linux-migratie
+- Informatie over Windows 10 end-of-life
+- Showcase van Linux-distributies met aanbevelingen
+- Linuxfuncties met visuele mock-ups
+- Overzicht van diensten
 - Call-to-action

-### Contact Pagina (/contact)
+### Contactpagina (/contact)
+
 - Contactformulier
 - Bedrijfsinformatie
 - Openingstijden
@ -76,55 +81,61 @@ Phone:       "+31 6 12345678",        // Uw telefoonnummer
 ## 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
- **Eco-vriendelijk**: Groene kleurenpalet die duurzaamheid benadrukt
- **Tech-georiënteerd**: Visuele mockups en functionaliteit demonstraties

-## Technische Features
+- **Minimalistisch**: schoon en overzichtelijk
+- **Toegankelijk**: geschikt voor alle leeftijden
+- **Responsive**: werkt op desktop, tablet en mobiel
+- **Professioneel**: wekt vertrouwen bij bedrijven
+- **Milieuvriendelijk**: groen kleurenpalet dat duurzaamheid benadrukt
+- **Techgeoriënteerd**: visuele mock-ups en demonstraties van functionaliteit

-### Visual Elements
- **Clean Design**: Moderne en professionele interface zonder technische complexiteit
- **Distro Showcase**: 6 populaire Linux distributies met doelgroepen
- **Desktop Mockups**: Visuele representaties van Linux interfaces
- **Performance Vergelijkingen**: Grafische weergave van Linux vs Windows prestaties
- **Responsive Design**: Optimaal op alle apparaten
+## Technische features
+
+### Visuele elementen
+
+- **Clean design**: moderne en professionele interface zonder technische complexiteit
+- **Distro-showcase**: zes populaire Linux-distributies met doelgroepen
+- **Desktopmock-ups**: visuele representaties van Linux-interfaces
+- **Prestatievergelijkingen**: grafische weergave van Linux- versus Windows-prestaties
+- **Responsive design**: optimaal op alle apparaten
+
+### Linux-distributies

-### Linux Distributies
 De website toont:
- **Ubuntu**: Voor beginners en algemeen gebruik
- **Linux Mint**: Voor Windows gebruikers die overstappen
- **Pop!_OS**: Voor gamers en developers
- **Elementary OS**: Voor Mac gebruikers en designers
- **Fedora**: Voor tech enthusiasts en IT professionals
- **Garuda Linux**: Voor power users en performance enthusiasts

-## Belangrijke Boodschappen
+- **Ubuntu**: voor beginners en algemeen gebruik
+- **Linux Mint**: voor Windows-gebruikers die overstappen
+- **Pop!_OS**: voor gamers en developers
+- **Elementary OS**: voor Mac-gebruikers en designers
+- **Fedora**: voor tech-enthousiastelingen en IT-professionals
+- **Garuda Linux**: voor power users en prestatie-enthousiastelingen
+
+## Belangrijke boodschappen

 De website benadrukt:
- **Duurzaamheid**: Tegengaan van e-waste
- **Kostenbesparing**: Gratis Linux vs dure Windows licenties
+
+- **Duurzaamheid**: tegengaan van e-waste
+- **Kostenbesparing**: gratis Linux versus dure Windows-licenties
 - **Veiligheid**: Linux is veiliger dan Windows
- **Hardware hergebruik**: Oude computers krijgen nieuw leven
- **Privacy**: Geen tracking of gegevensverzameling
+- **Hergebruik van hardware**: oude computers krijgen nieuw leven
+- **Privacy**: geen tracking of gegevensverzameling

 ## Deployment

-Dit project komt met een Dockerfile voor eenvoudige deployment met bijvoorbeeld Coolify.
-Zie voor instructies [DEPLOYMENT.md](DEPLOYMENT.md)
+Dit project bevat een Dockerfile voor eenvoudige deployment met bijvoorbeeld Coolify.
+Zie voor instructies [DEPLOYMENT.md](DEPLOYMENT.md).

-Voor productie gebruik:
-1. Vervang alle placeholder contactgegevens
+Voor productiegebruik:
+
+1. Vervang alle placeholdercontactgegevens
 2. Configureer een reverse proxy (nginx/Apache)
-3. Gebruik HTTPS certificaten
-4. Overweeg een proper database voor contactformulieren
+3. Gebruik HTTPS-certificaten
+4. Overweeg een degelijke database voor contactformulieren

 ## Ondersteuning

-Deze website ondersteunt de [endof10.org](https://endof10.org) beweging voor duurzaam computergebruik.
+Deze website ondersteunt de [End-of-10-beweging](https://endof10.org) voor duurzaam computergebruik.

 ## Licentie

-Open source - voel je vrij om aan te passen voor eigen gebruik. 
+Open source - voel u vrij om aan te passen voor eigen gebruik.
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -8,12 +8,16 @@ services:
    environment:
      - PORT=8080
      - COMPANY_NAME=Hogeland Linux
-      - KVK=12345678
-      - EMAIL=info@hogelandlinux.nl
+      - KVK=91927935
+      - EMAIL=info@chemistry.software
      - PHONE=+31 6 12345678
      - STREET=Voorstraat 123
      - POSTAL_CODE=9967 AA
      - VILLAGE=Eenrum
+      - DOMAIN=hogelandlinux.nl         # Set your actual domain here
      - TELEGRAM_BOT_TOKEN=  # Set your Telegram bot token here
      - TELEGRAM_CHAT_ID=    # Set your Telegram chat ID here
+      - ABOUT_NAME=Bdnugget
+      - BIRTH_DATE=1990-01-01
+      - SON_BIRTH_DATE=2022-01-01
    restart: unless-stopped 
--- a/main.go
+++ b/main.go
@ -9,6 +9,7 @@ import (
 	"log"
 	"net/http"
 	"os"
+	"path/filepath"
 	"strings"
 	"sync"
 	"time"
@ -23,9 +24,13 @@ type Config struct {
 	Street           string
 	PostalCode       string
 	Village          string
+	Domain           string
 	Port             string
 	TelegramBotToken string
 	TelegramChatID   string
+	AboutName        string
+	BirthDate        string
+	SonBirthDate     string
 }

 // PageData holds data for template rendering
@ -37,6 +42,9 @@ type PageData struct {
 	ErrorMessage   string
 	SuccessMessage string
 	FormData       ContactForm
+	AboutName      string
+	AgeYears       int
+	SonAgeYears    int
 }

 // ContactForm holds form data
@ -75,22 +83,50 @@ func NewServer() *Server {
 	// Configuration - can be overridden with environment variables
 	config := Config{
 		CompanyName:      getEnv("COMPANY_NAME", "Hogeland Linux"),
-		KVK:              getEnv("KVK", "12345678"), // Replace with actual KVK number
-		Email:            getEnv("EMAIL", "info@hogelandlinux.nl"),
+		KVK:              getEnv("KVK", "91927935"), // Replace with actual KVK number
+		Email:            getEnv("EMAIL", "info@chemistry.software"),
 		Phone:            getEnv("PHONE", "+31 6 12345678"),
 		Street:           getEnv("STREET", "Voorstraat 123"),
 		PostalCode:       getEnv("POSTAL_CODE", "9967 AA"),
 		Village:          getEnv("VILLAGE", "Eenrum"),
+		Domain:           getEnv("DOMAIN", "hogelandlinux.nl"), // Replace with actual domain
 		Port:             ":" + getEnv("PORT", "8080"),
 		TelegramBotToken: getEnv("TELEGRAM_BOT_TOKEN", ""), // Set this in environment
 		TelegramChatID:   getEnv("TELEGRAM_CHAT_ID", ""),   // Set this in environment
+		AboutName:        getEnv("ABOUT_NAME", "Bdnugget"),
+		BirthDate:        getEnv("BIRTH_DATE", "1990-01-01"),
+		SonBirthDate:     getEnv("SON_BIRTH_DATE", "2022-01-01"),
+	}
+
+	// Template Funcs
+	funcs := template.FuncMap{
+		"dict": func(values ...interface{}) (map[string]interface{}, error) {
+			if len(values)%2 != 0 {
+				return nil, fmt.Errorf("dict expects even number of args")
+			}
+			m := make(map[string]interface{}, len(values)/2)
+			for i := 0; i < len(values); i += 2 {
+				k, ok := values[i].(string)
+				if !ok {
+					return nil, fmt.Errorf("dict keys must be strings")
+				}
+				m[k] = values[i+1]
+			}
+			return m, nil
+		},
 	}

 	// Parse templates with error handling
-	templates, err := template.ParseGlob("templates/*.html")
+	templates, err := template.New("").Funcs(funcs).ParseGlob("templates/*.html")
 	if err != nil {
 		log.Fatalf("Failed to parse templates: %v", err)
 	}
+	// Optionally parse partials if any exist
+	if matches, _ := filepath.Glob("templates/partials/*.html"); len(matches) > 0 {
+		if _, err := templates.ParseFiles(matches...); err != nil {
+			log.Fatalf("Failed to parse partial templates: %v", err)
+		}
+	}

 	return &Server{
 		config:    config,
@ -98,6 +134,21 @@ func NewServer() *Server {
 	}
 }

+// cleanupOldSubmissions periodically purges stale rate-limit entries
+func cleanupOldSubmissions() {
+	for {
+		time.Sleep(10 * time.Minute)
+		mu.Lock()
+		cutoff := time.Now().Add(-submissionCooldown)
+		for ip, t := range lastSubmissionTime {
+			if t.Before(cutoff) {
+				delete(lastSubmissionTime, ip)
+			}
+		}
+		mu.Unlock()
+	}
+}
+
 // createPageData creates PageData with the given title and current page
 func (s *Server) createPageData(title, currentPage string) PageData {
 	return PageData{
@ -118,7 +169,7 @@ func (s *Server) renderTemplate(w http.ResponseWriter, templateName string, data

 // homeHandler handles the home page
 func (s *Server) homeHandler(w http.ResponseWriter, r *http.Request) {
-	data := s.createPageData("Linux Migratie Service - Uw Computer Nieuw Leven Geven", "home")
+	data := s.createPageData("Linux-migratieservice - uw computer nieuw leven geven", "home")
 	s.renderTemplate(w, "index.html", data)
 }

@ -144,7 +195,7 @@ func (s *Server) handleContactForm(w http.ResponseWriter, r *http.Request, data
 	if lastTime, exists := lastSubmissionTime[ip]; exists {
 		if time.Since(lastTime) < submissionCooldown {
 			mu.Unlock()
-			data.ErrorMessage = "U heeft recent al een bericht verstuurd. Probeer het over een paar minuten opnieuw."
+			data.ErrorMessage = "U hebt recent al een bericht verstuurd. Probeer het over een paar minuten opnieuw."
 			s.renderTemplate(w, "contact.html", *data)
 			return
 		}
@ -175,7 +226,7 @@ func (s *Server) handleContactForm(w http.ResponseWriter, r *http.Request, data

 	// Validate required fields
 	if form.Name == "" || form.Email == "" || form.Message == "" {
-		data.ErrorMessage = "Vul alle verplichte velden in (naam, email, bericht)."
+		data.ErrorMessage = "Vul alle verplichte velden in (naam, e-mail, bericht)."
 		s.renderTemplate(w, "contact.html", *data)
 		return
 	}
@ -197,7 +248,7 @@ func (s *Server) handleContactForm(w http.ResponseWriter, r *http.Request, data
 	mu.Unlock()

 	// On success, render success message
-	data.SuccessMessage = "Bedankt voor uw bericht! Wij nemen zo snel mogelijk contact met u op."
+	data.SuccessMessage = "Bedankt voor uw bericht! Ik neem zo snel mogelijk contact met u op."
 	data.FormData = ContactForm{} // Clear form data
 	s.renderTemplate(w, "contact.html", *data)
 }
@ -227,7 +278,7 @@ func (s *Server) sendToTelegram(form ContactForm) error {
 	payload := map[string]interface{}{
 		"chat_id":    s.config.TelegramChatID,
 		"text":       message,
-		"parse_mode": "Markdown",
+		"parse_mode": "MarkdownV2",
 	}

 	jsonData, err := json.Marshal(payload)
@ -309,22 +360,83 @@ func (s *Server) healthHandler(w http.ResponseWriter, r *http.Request) {
 	w.Write([]byte(`{"status":"healthy","service":"linuxservice"}`))
 }

+// aboutHandler handles the About Me page
+func (s *Server) aboutHandler(w http.ResponseWriter, r *http.Request) {
+	data := s.createPageData("Over mij - "+s.config.CompanyName, "about")
+	// Populate dynamic About fields from config/env
+	data.AboutName = s.config.AboutName
+	now := time.Now()
+	// Parse BirthDate (ISO YYYY-MM-DD)
+	if t, err := time.Parse("2006-01-02", s.config.BirthDate); err == nil {
+		age := now.Year() - t.Year()
+		if now.Month() < t.Month() || (now.Month() == t.Month() && now.Day() < t.Day()) {
+			age--
+		}
+		data.AgeYears = age
+	}
+	// Parse SonBirthDate (ISO YYYY-MM-DD)
+	if t, err := time.Parse("2006-01-02", s.config.SonBirthDate); err == nil {
+		sonAge := now.Year() - t.Year()
+		if now.Month() < t.Month() || (now.Month() == t.Month() && now.Day() < t.Day()) {
+			sonAge--
+		}
+		data.SonAgeYears = sonAge
+	}
+
+	s.renderTemplate(w, "over-mij.html", data)
+}
+
+// dienstenHandler handles the services page
+func (s *Server) dienstenHandler(w http.ResponseWriter, r *http.Request) {
+	data := s.createPageData("Diensten en tarieven - "+s.config.CompanyName, "diensten")
+	s.renderTemplate(w, "diensten.html", data)
+}
+
+// linuxHandler handles the Linux page (distributions + features)
+func (s *Server) linuxHandler(w http.ResponseWriter, r *http.Request) {
+	data := s.createPageData("Linux distributies en functies - "+s.config.CompanyName, "linux")
+	s.renderTemplate(w, "linux.html", data)
+}
+
 // setupRoutes configures all HTTP routes
 func (s *Server) setupRoutes() {
 	// Static files
 	fs := http.FileServer(http.Dir("static/"))
-	http.Handle("/static/", http.StripPrefix("/static/", fs))
+	http.Handle("/static/", http.StripPrefix("/static/", cacheControlMiddleware(fs)))

 	// Page routes
 	http.HandleFunc("/", s.homeHandler)
 	http.HandleFunc("/contact", s.contactHandler)
+	http.HandleFunc("/over-mij", s.aboutHandler)
+	http.HandleFunc("/diensten", s.dienstenHandler)
+	http.HandleFunc("/linux", s.linuxHandler)
 	http.HandleFunc("/health", s.healthHandler)
 }

 func main() {
 	server := NewServer()
 	server.setupRoutes()
+	// Start background cleanup for rate limiting map
+	go cleanupOldSubmissions()

 	log.Printf("Server starting on %s", server.config.Port)
 	log.Fatal(http.ListenAndServe(server.config.Port, nil))
 }
+
+// cacheControlMiddleware sets Cache-Control headers for static assets
+func cacheControlMiddleware(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		path := r.URL.Path
+		switch {
+		case strings.HasSuffix(path, ".css") || strings.HasSuffix(path, ".js") ||
+			strings.HasSuffix(path, ".png") || strings.HasSuffix(path, ".jpg") ||
+			strings.HasSuffix(path, ".jpeg") || strings.HasSuffix(path, ".webp") ||
+			strings.HasSuffix(path, ".svg") || strings.HasSuffix(path, ".ico") ||
+			strings.HasSuffix(path, ".woff2"):
+			w.Header().Set("Cache-Control", "public, max-age=31536000, immutable")
+		default:
+			w.Header().Set("Cache-Control", "public, max-age=300")
+		}
+		next.ServeHTTP(w, r)
+	})
+}
--- a/static/GamingBenchmarkLinuxvsWindows.jpg
+++ b/static/GamingBenchmarkLinuxvsWindows.jpg
--- a/static/LinuxMintCinnamonSoftwareManager.jpg
+++ b/static/LinuxMintCinnamonSoftwareManager.jpg
--- a/static/TuxAinrom.png
+++ b/static/TuxAinrom.png
--- a/static/Zorin-17-desktop.jpg
+++ b/static/Zorin-17-desktop.jpg
--- a/static/cinnamon.png
+++ b/static/cinnamon.png
--- a/static/css/style.css
+++ b/static/css/style.css
@ -157,7 +157,7 @@ p {

 /* Hero Section */
 .hero {
-    background: linear-gradient(135deg, rgba(236, 253, 245, 0.85) 0%, rgba(209, 250, 229, 0.85) 100%), url('/static/TuxAinrom.webp');
+    background: linear-gradient(135deg, rgba(236, 253, 245, 0.85) 0%, rgba(209, 250, 229, 0.85) 100%), url('/static/images/TuxAinrom.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
@ -197,6 +197,127 @@ p {
    gap: 1rem;
 }

+/* Two-row hero button layout */
+.hero-buttons--stack {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.hero-buttons-row {
+    display: flex;
+    gap: 1rem;
+}
+
+.hero-buttons-row--secondary {
+    justify-content: center;
+}
+
+.hero-buttons-row--primary {
+    justify-content: center;
+}
+
+@media (max-width: 480px) {
+    .hero-buttons-row {
+        flex-direction: column;
+        width: 100%;
+        max-width: 320px;
+    }
+}
+
+/* Universal Card Base Class */
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border: 1px solid transparent;
+    display: flex;
+    flex-direction: column;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(5, 150, 105, 0.15);
+}
+
+.card h3 {
+    color: #047857;
+    margin-bottom: 1rem;
+}
+
+/* Card Variants */
+.card--benefit {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+    text-align: center;
+}
+
+.card--benefit:hover {
+    border-color: #34d399;
+}
+
+.card--service {
+    background: #f0fdf4;
+    border-left: 4px solid #059669;
+    border-radius: 12px;
+}
+
+.card--service:hover {
+    transform: translateY(-3px);
+}
+
+.card--distro {
+    background: white;
+    border-radius: 16px;
+    min-height: 400px;
+    position: relative;
+    overflow: hidden;
+}
+
+.card--distro::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #059669, #10b981);
+}
+
+.card--distro:hover {
+    transform: translateY(-8px);
+    border-color: #a7f3d0;
+}
+
+.card--cta {
+    text-align: center;
+    border: 2px solid #bbf7d0;
+}
+
+/* Card Content Components */
+.card__icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.card--benefit .card__icon {
+    font-size: 3rem;
+}
+
+.card--cta .card__icon {
+    font-size: 3rem;
+}
+
+/* Clickable Card Utility */
+.card-link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+
 /* Buttons */
 .btn {
    padding: 12px 24px;
@ -240,12 +361,66 @@ p {
    font-size: 1.1rem;
 }

-/* Benefits Section */
-.benefits {
-    padding: 5rem 0;
+/* Universal Section Classes */
+.section {
+    padding: 3.5rem 0;
+}
+
+.section--light {
    background: #fff;
 }

+.section--light-green {
+    background: #f9fafb;
+}
+
+/* Brand-tinted light background for callouts and CTAs */
+.section--brand {
+    background: #f0fdf4;
+}
+
+.section--hero {
+    padding: 4rem 0;
+    min-height: 80vh;
+}
+
+/* Section Headers */
+.section__title {
+    text-align: center;
+    margin-bottom: 3rem;
+    color: #047857;
+}
+
+.section__subtitle {
+    text-align: center;
+    font-size: 1.1rem;
+    color: #6b7280;
+    margin-bottom: 4rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Universal Grid Classes */
+.grid {
+    display: grid;
+    gap: 2rem;
+}
+
+.grid--2-col {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.grid--3-col {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+.grid--responsive-cards {
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+/* Legacy Section Classes - Cleaned Up */
+
 .benefits h2 {
    text-align: center;
    margin-bottom: 3rem;
@ -258,48 +433,70 @@ p {
    gap: 2rem;
 }

-.benefit-card {
-    background: #f0fdf4;
-    padding: 2rem;
-    border-radius: 12px;
-    text-align: center;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    border: 1px solid #bbf7d0;
-}
-
-.benefit-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(5, 150, 105, 0.15);
-    border-color: #34d399;
-}
-
-.benefit-icon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-}
-
-.benefit-card h3 {
-    color: #047857;
-    margin-bottom: 1rem;
-}
-
 /* Windows EOL Section */
 .windows-eol {
-    padding: 5rem 0;
    background: #fffbeb;
+    position: relative;
+    overflow: hidden;
+}
+
+.windows-eol::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        radial-gradient(circle at 20% 30%, rgba(217, 119, 6, 0.05) 15%, transparent 15%),
+        radial-gradient(circle at 80% 70%, rgba(217, 119, 6, 0.05) 15%, transparent 15%),
+        radial-gradient(circle at 60% 20%, rgba(217, 119, 6, 0.03) 20%, transparent 20%),
+        radial-gradient(circle at 40% 80%, rgba(217, 119, 6, 0.03) 20%, transparent 20%);
+    pointer-events: none;
+    z-index: 1;
+}
+
+.windows-eol .container {
+    position: relative;
+    z-index: 2;
 }

 .windows-eol h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: #d97706;
+    position: relative;
 }

 .eol-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
-    align-items: center;
+    align-items: start;
+}
+
+.eol-main {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.eol-clippy-image {
+    text-align: center;
+    order: -1; /* Ensure Clippy appears first */
+}
+
+.eol-clippy-image img {
+    max-width: 350px;
+    max-height: 350px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    overflow: hidden;
+}
+
+.eol-text {
+    order: 1; /* Ensure text appears after Clippy */
 }

 .eol-text ul {
@ -352,10 +549,6 @@ p {
 }

 /* Distributions Section */
-.distros {
-    padding: 5rem 0;
-    background: #f9fafb;
-}

 .distros h2 {
    text-align: center;
@ -381,36 +574,6 @@ p {
    align-items: stretch;
 }

-.distro-card {
-    background: white;
-    border-radius: 16px;
-    padding: 2rem;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-    transition: all 0.3s ease;
-    border: 2px solid transparent;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-height: 400px;
-}
-
-.distro-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, #059669, #10b981);
-}
-
-.distro-card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 12px 40px rgba(5, 150, 105, 0.15);
-    border-color: #a7f3d0;
-}
-
 .distro-header {
    display: flex;
    align-items: flex-start;
@ -511,10 +674,6 @@ p {
 }

 /* Services Section */
-.services {
-    padding: 5rem 0;
-    background: #fff;
-}

 .services h2 {
    text-align: center;
@ -528,28 +687,55 @@ p {
    gap: 2rem;
 }

-.service-card {
-    background: #f0fdf4;
-    padding: 2rem;
+/* Steps grid: balanced layout 3/2/1 across breakpoints */
+.steps-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+}
+
+@media (max-width: 1024px) {
+    .steps-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 640px) {
+    .steps-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Distro tiles */
+.distro-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+}
+
+.distro-tile {
+    background: #fff;
+    border: 1px solid #e5e7eb;
    border-radius: 12px;
-    border-left: 4px solid #059669;
-    transition: transform 0.3s ease;
+    padding: 1.25rem;
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

-.service-card:hover {
-    transform: translateY(-3px);
+.distro-tile:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 20px rgba(5,150,105,0.12);
 }

-.service-card h3 {
-    color: #047857;
-    margin-bottom: 1rem;
+.distro-tile__img {
+    width: 72px;
+    height: 72px;
+    object-fit: contain;
+    margin-bottom: 0.75rem;
 }

 /* Linux Features Section */
-.linux-features {
-    padding: 5rem 0;
-    background: #f9fafb;
-}

 .linux-features h2 {
    text-align: center;
@ -597,9 +783,17 @@ p {
    bottom: 0;
    left: 0;
    right: 0;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.9);
    padding: 0.4rem 1rem;
    border-radius: 0 0 12px 12px;
+    opacity: 0;
+    transform: translateY(100%);
+    transition: all 0.3s ease;
+}
+
+.feature-image:hover .image-caption {
+    opacity: 1;
+    transform: translateY(0);
 }

 .image-caption small {
@ -618,6 +812,18 @@ p {
 }


+/* Intro GNOME section overrides */
+.intro-gnome .feature-image img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+}
+
+.intro-gnome .feature-image {
+    aspect-ratio: auto;
+}
+
+

 .feature-showcase h3 {
    color: #047857;
@ -641,7 +847,6 @@ p {

 /* CTA Section */
 .cta {
-    padding: 5rem 0;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    text-align: center;
@ -659,12 +864,43 @@ p {
 }

 /* Contact Page Styles */
-.contact-hero {
+/* Deprecated: contact-hero replaced by .page-hero */
+
+/* Generic page hero reused across pages */
+.page-hero {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
-    padding: 3rem 0;
+    padding: 2.25rem 0;
    text-align: center;
 }

+/* Match heading color for reusable hero */
+.page-hero h1 {
+    color: #047857;
+    margin-bottom: 1rem;
+}
+
+/* Keep heading links visually identical to headings */
+h2 a {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* Ensure card titles with links look identical to non-linked titles */
+.card h3 a,
+.card h3 a:visited,
+.card h3 a:hover,
+.card h3 a:active {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* Reusable link wrapper to make whole cards clickable */
+.card-link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+
 .contact-hero h1 {
    color: #047857;
    margin-bottom: 1rem;
@ -796,10 +1032,6 @@ p {
    min-height: 120px;
 }

-.contact-cta {
-    padding: 4rem 0;
-    background: #f0fdf4;
-}

 .contact-cta h2 {
    text-align: center;
@ -813,22 +1045,58 @@ p {
    gap: 2rem;
 }

+/* Pricing/Tarieven benefit cards */
 .cta-benefit {
-    text-align: center;
-    padding: 2rem;
-    background: white;
+    background: #fff;
+    border: 1px solid #e5e7eb;
    border-radius: 12px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

-.cta-benefit .benefit-icon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
+.cta-benefit:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 20px rgba(5,150,105,0.12);
 }

-.cta-benefit h3 {
+.benefit-icon {
+    width: 56px;
+    height: 56px;
+    border-radius: 9999px;
+    background: #ecfdf5;
+    border: 2px solid #bbf7d0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 0.75rem auto;
+}
+
+.benefit-icon__glyph {
+    font-weight: 700;
    color: #047857;
-    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    line-height: 1;
+}
+
+/* Collapsible disclaimer styles */
+details.disclaimer {
+    margin-top: 0.5rem;
+}
+
+details.disclaimer summary {
+    cursor: pointer;
+    color: #047857;
+    font-weight: 600;
+}
+
+details.disclaimer .disclaimer-body {
+    background: #f9fafb;
+    border-left: 4px solid #059669;
+    padding: 1rem 1rem 1rem 1.25rem;
+    border-radius: 6px;
+    margin-top: 0.75rem;
 }

 /* Footer */
@ -871,6 +1139,59 @@ footer {
    color: #6b7280;
 }

+/* About page */
+.section {
+    padding: 3.5rem 0;
+}
+
+.about-grid {
+    display: grid;
+    grid-template-columns: 1.5fr 1fr;
+    gap: 3rem;
+    align-items: start;
+}
+
+.about-text p {
+    margin: 1rem 0;
+    line-height: 1.8;
+    color: #374151;
+}
+
+.about-cta {
+    margin-top: 2rem;
+}
+
+.about-photo img {
+    width: 100%;
+    height: auto;
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+}
+
+/* Photo visibility control */
+.about-photo-mobile {
+    display: none; /* Hidden on desktop */
+    margin: 2rem 0;
+}
+
+.about-photo-desktop {
+    display: block; /* Shown on desktop */
+}
+
+@media (max-width: 900px) {
+    .about-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .about-photo-mobile {
+        display: block; /* Show mobile photo after first paragraph */
+    }
+    
+    .about-photo-desktop {
+        display: none; /* Hide desktop photo */
+    }
+}
+
 /* Responsive Design */
@media (max-width: 1024px) {
    .container {
@ -929,9 +1250,7 @@ footer {
        gap: 1.5rem;
    }
    
-    .benefit-card {
-        padding: 1.5rem;
-    }
+
    
    .eol-content {
        grid-template-columns: 1fr;
@ -943,9 +1262,7 @@ footer {
        gap: 1.5rem;
    }
    
-    .distro-card {
-        padding: 1.5rem;
-    }
+
    
    .contact-grid {
        grid-template-columns: 1fr;
@ -974,8 +1291,11 @@ footer {
    }
    
    /* Section padding adjustments */
-    .benefits, .windows-eol, .distros, .services, .linux-features, .cta {
-        padding: 3rem 0;
+    .page-hero {
+        padding: 1.75rem 0;
+    }
+    .section {
+        padding: 2.25rem 0;
    }
    
    /* Typography adjustments */
@ -1021,12 +1341,12 @@ footer {
    }
    
    /* Card padding adjustments */
-    .benefit-card, .service-card, .distro-card, .cta-benefit {
+    .card {
        padding: 1.25rem;
    }
    
    /* Icon size adjustments */
-    .benefit-icon, .cta-benefit .benefit-icon {
+    .card__icon {
        font-size: 2.5rem;
    }
    
@ -1058,8 +1378,11 @@ footer {
    }
    
    /* Section padding for very small screens */
-    .benefits, .windows-eol, .distros, .services, .linux-features, .cta {
-        padding: 2rem 0;
+    .page-hero {
+        padding: 1.5rem 0;
+    }
+    .section {
+        padding: 1.75rem 0;
    }
    
    /* Typography for very small screens */
@ -1139,7 +1462,7 @@ footer {
        font-size: 1rem;
    }
    
-    .benefit-card, .service-card, .distro-card, .cta-benefit {
+    .card {
        padding: 1rem;
    }
    
@ -1149,11 +1472,6 @@ footer {
    }
 }

-/* High DPI screens */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-    /* No terminal-specific styles needed */
-}
-
 /* Animations */
@keyframes fadeInUp {
    from {
@ -1166,9 +1484,7 @@ footer {
    }
 }

-.benefit-card,
-.service-card,
-.cta-benefit {
+.card {
    animation: fadeInUp 0.6s ease-out;
 }

--- a/static/garuda-dr460nized-gaming.webp
+++ b/static/garuda-dr460nized-gaming.webp
--- a/static/icons/favicon.ico
+++ b/static/icons/favicon.ico
--- a/static/icons/manifest.json
+++ b/static/icons/manifest.json
@ -0,0 +1,21 @@
+{
+    "name": "Hogeland Linux - Linux Migratie Service",
+    "short_name": "Hogeland Linux",
+    "description": "Linux migratie service voor Windows 10 end-of-life. Geef uw computer nieuw leven met Linux!",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#059669",
+    "icons": [
+        {
+            "src": "/static/images/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/images/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+} 
--- a/static/images/DutchOpen2024.jpg
+++ b/static/images/DutchOpen2024.jpg
--- a/static/images/GamingBenchmarkLinuxvsWindows.webp
+++ b/static/images/GamingBenchmarkLinuxvsWindows.webp
--- a/static/images/LinuxMintCinnamonSoftwareManager.webp
+++ b/static/images/LinuxMintCinnamonSoftwareManager.webp
--- a/static/images/Tux.svg
+++ b/static/images/Tux.svg
--- a/static/images/TuxAinrom.png
+++ b/static/images/TuxAinrom.png
--- a/static/images/TuxAinrom.webp
+++ b/static/images/TuxAinrom.webp
--- a/static/images/Zorin-17-desktop.webp
+++ b/static/images/Zorin-17-desktop.webp
--- a/static/images/android-chrome-192x192.png
+++ b/static/images/android-chrome-192x192.png
--- a/static/images/android-chrome-512x512.png
+++ b/static/images/android-chrome-512x512.png
--- a/static/images/apple-touch-icon.png
+++ b/static/images/apple-touch-icon.png
--- a/static/images/clippy.png
+++ b/static/images/clippy.png
--- a/static/images/clippy_transparent.png
+++ b/static/images/clippy_transparent.png
--- a/static/images/elementary.png
+++ b/static/images/elementary.png
--- a/static/images/favicon-16x16.png
+++ b/static/images/favicon-16x16.png
--- a/static/images/favicon-32x32.png
+++ b/static/images/favicon-32x32.png
--- a/static/images/fedora.png
+++ b/static/images/fedora.png
--- a/static/images/garuda.svg
+++ b/static/images/garuda.svg
@ -0,0 +1,3 @@
+                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
+                                <path fill="#1e88e5" d="M28.465,38.611c0.419-1.105,0.664-2.365,0.664-3.714c0-4.133-2.211-7.494-4.929-7.494	c-2.741,0-4.951,3.361-4.951,7.494c0,1.326,0.221,2.586,0.641,3.669c-9.041,0.951-15.407,4.731-17.993,6.432	c4.355-6.278,8.909-13.638,13.262-22.105c1.083-2.101,2.101-4.178,3.05-6.211c0.375,0.243,0.751,0.509,1.171,0.775	c1.945,1.215,3.759,1.879,5.084,2.233c-0.973-0.73-2.033-1.613-3.116-2.697c-0.817-0.817-1.547-1.637-2.167-2.433	C21.016,10.538,22.608,6.669,24,3c2.32,6.144,5.217,12.842,8.841,19.893c2.343,4.531,4.731,8.754,7.117,12.644	c-0.685-0.375-1.437-0.73-2.233-1.039c-1.371-0.53-2.652-0.862-3.759-1.06c1.503,0.751,3.25,1.747,5.084,3.073	c1.194,0.885,2.254,1.769,3.161,2.631c0.021,0.021,0.021,0.021,0.045,0.045c1.26,2.056,2.565,3.957,3.846,5.813	C43.561,43.319,37.306,39.605,28.465,38.611z"></path>
+                                </svg>
--- a/static/images/gnome.jpg
+++ b/static/images/gnome.jpg
--- a/static/images/gnome.webp
+++ b/static/images/gnome.webp
--- a/static/images/mint.svg
+++ b/static/images/mint.svg
@ -0,0 +1,3 @@
+                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
+                                    <path fill="#c5e1a5" d="M21.5,44C13.492,44,7,37.508,7,29.5V18H2V4h29.031C39.298,4,46,10.702,46,18.969V44H21.5z"></path><path fill="#689f38" d="M30.031,8H6v6h2c1.657,0,3,1.343,3,3v0v11.5C11,34.851,16.149,40,22.5,40H38c2.209,0,4-1.791,4-4 V19.969C42,13.359,36.641,8,30.031,8z"></path><path fill="#fff" d="M33.5,15c-1.577,0-2.996,0.672-4,1.74c-1.004-1.069-2.423-1.74-4-1.74c-3.033,0-5.5,2.473-5.5,5.512 V28h3v-7.488c0-1.381,1.122-2.505,2.5-2.505S28,19.13,28,20.512V28h3v-7.488v0c0-1.381,1.122-2.505,2.5-2.505S36,19.13,36,20.512 V28.5c0,1.93-1.57,3.5-3.5,3.5h-12c-1.93,0-3.5-1.57-3.5-3.5V12h-3v16.5c0,3.584,2.916,6.5,6.5,6.5h12c3.584,0,6.5-2.916,6.5-6.5 v-7.988C39,17.472,36.533,15,33.5,15z"></path>
+                                </svg>
--- a/static/images/popos.svg
+++ b/static/images/popos.svg
@ -0,0 +1 @@
+                                <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="inxzwh639poeU1X9W8tTQa" x1="7.037" x2="45.033" y1="7.037" y2="45.033" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#05acb3"/><stop offset="1" stop-color="#038387"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQa)" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><linearGradient id="inxzwh639poeU1X9W8tTQb" x1="22.277" x2="31.658" y1="31.726" y2="57.724" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQb)" d="M15.5,38.5h17c1.105,0,2-0.895,2-2v0c0-1.105-0.895-2-2-2h-17c-1.105,0-2,0.895-2,2v0	C13.5,37.605,14.395,38.5,15.5,38.5z"/><linearGradient id="inxzwh639poeU1X9W8tTQc" x1="30.056" x2="40.896" y1="16.127" y2="46.17" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQc)" d="M34,16c-3-1-3.5,0.5-4,2.5c-0.618,2.473-1,7-1,8.5s1,2,2,0.5s4-6.5,4.5-8S35.956,16.652,34,16	z"/><linearGradient id="inxzwh639poeU1X9W8tTQd" x1="28.561" x2="31.626" y1="29.85" y2="38.346" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQd)" d="M27.996,30.447c-0.642,0.833-0.433,2.571,1.067,2.589c0.938,0.011,1.584-0.887,1.509-2.029	C30.518,30.184,29.104,29.01,27.996,30.447z"/><linearGradient id="inxzwh639poeU1X9W8tTQe" x1="17.026" x2="40.638" y1="8.349" y2="73.788" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0f0f0"/><stop offset="1" stop-color="#fff"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQe)" d="M26,12c-3.056-5.239-8.399-4.379-13.366-0.748c-1.265,0.924-1.651,2.649-0.91,4.029	l8.91,16.606c0.49,0.913,1.596,1.3,2.549,0.892h0c1.006-0.431,1.479-1.591,1.059-2.602c-0.819-1.975-2.095-5.059-2.742-6.677	C23.5,22.5,29.846,18.592,26,12z M21.352,19.609c-0.515,0.303-1.907,0.452-3.239-2.812c-1.213-2.971-0.849-4.335-0.212-4.547	s1.971,0.485,3.244,3.001C22.418,17.767,21.868,19.306,21.352,19.609z"/></svg>
--- a/static/images/ubuntu.png
+++ b/static/images/ubuntu.png
--- a/templates/contact.html
+++ b/templates/contact.html
@ -4,21 +4,67 @@
    <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">
+    
+    <!-- Basic SEO Meta Tags -->
+    <meta name="description" content="Neem contact op met {{.CompanyName}} voor Linux-migratieservice. Gratis advies, installatie, datamigratie en ondersteuning in gemeente Het Hogeland.">
+    <meta name="keywords" content="contact, Linux service, Windows 10 migratie, Het Hogeland, Eenrum, gratis advies, installatie">
+    <meta name="author" content="{{.CompanyName}}">
+    <meta name="robots" content="index, follow">
+    <meta name="language" content="nl">
+    
+    <!-- Open Graph Meta Tags for Social Media -->
+    <meta property="og:title" content="{{.Title}}">
+    <meta property="og:description" content="Neem contact op met {{.CompanyName}} voor Linux-migratieservice. Gratis advies, installatie, datamigratie en ondersteuning in gemeente Het Hogeland.">
+    <meta property="og:image" content="https://{{.Domain}}/static/images/TuxAinrom.webp">
+    <meta property="og:image:alt" content="Tux Linux mascotte banner voor Hogeland Linux service">
+    <meta property="og:url" content="https://{{.Domain}}/contact">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="{{.CompanyName}}">
+    <meta property="og:locale" content="nl_NL">
+    
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="{{.Title}}">
+    <meta name="twitter:description" content="Neem contact op met {{.CompanyName}} voor Linux-migratieservice. Gratis advies en ondersteuning.">
+    <meta name="twitter:image" content="https://{{.Domain}}/static/images/TuxAinrom.webp">
+    <meta name="twitter:image:alt" content="Tux Linux mascotte banner voor Hogeland Linux service">
+    
+    <!-- Favicon Links -->
+    <link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
+    <link rel="manifest" href="/static/icons/manifest.json">
+    
+    <!-- Theme Color for Mobile Browsers -->
+    <meta name="theme-color" content="#059669">
+    <meta name="msapplication-TileColor" content="#059669">
+    
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://{{.Domain}}/contact">
+    
+    <!-- Preload Critical Resources -->
+    <link rel="preload" href="/static/css/style.css" as="style">
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" as="style">
+    
+    <!-- CSS and Fonts -->
+    <link rel="stylesheet" href="/static/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
    {{template "header" .}}

    <main>
-        <section class="contact-hero">
+        <section class="page-hero">
            <div class="container">
-                <h1>Neem Contact Op</h1>
-                <p>Heeft u vragen over Linux migratie? Wij helpen u graag verder!</p>
+                <h1>Neem contact op</h1>
+                <p>Heeft u vragen over Linux-migratie? Ik help u graag verder!</p>
            </div>
        </section>

-        <section class="contact-content">
+        <section class="section">
            <div class="container">
                <div class="contact-grid">
                    <div class="contact-info">
@ -34,7 +80,7 @@
                        <div class="contact-item">
                            <div class="contact-icon">📧</div>
                            <div>
-                                <h3>Email</h3>
+                                <h3>E-mail</h3>
                                <p><a href="mailto:{{.Email}}">{{.Email}}</a></p>
                            </div>
                        </div>
@ -48,15 +94,15 @@
                        <div class="contact-item">
                            <div class="contact-icon">🏢</div>
                            <div>
-                                <h3>KvK Nummer</h3>
+                                <h3>KvK-nummer</h3>
                                <p>{{.KVK}}</p>
                            </div>
                        </div>
                        
                        <div class="contact-hours">
                            <h3>Openingstijden</h3>
-                            <p>Maandag - Vrijdag: 09:00 - 17:00 (Op afspraak)</p>
-                            <p>Weekend: Op afspraak</p>
+                            <p>Maandag - vrijdag: 09:00 - 17:00 (op afspraak)</p>
+                            <p>Weekend: op afspraak</p>
                        </div>
                    </div>

@ -82,7 +128,7 @@
                            </div>
                            
                            <div class="form-group">
-                                <label for="email">Email *</label>
+                                <label for="email">E-mail *</label>
                                <input type="email" id="email" name="email" value="{{.FormData.Email}}" required>
                            </div>
                            
@ -101,16 +147,16 @@
                                <select id="service" name="service">
                                    <option value="">Selecteer een optie</option>
                                    <option value="advice" {{if eq .FormData.Service "advice"}}selected{{end}}>Gratis advies</option>
-                                    <option value="installation" {{if eq .FormData.Service "installation"}}selected{{end}}>Linux installatie</option>
-                                    <option value="migration" {{if eq .FormData.Service "migration"}}selected{{end}}>Data migratie</option>
-                                    <option value="training" {{if eq .FormData.Service "training"}}selected{{end}}>Training & ondersteuning</option>
+                                    <option value="installation" {{if eq .FormData.Service "installation"}}selected{{end}}>Linux-installatie</option>
+                                    <option value="migration" {{if eq .FormData.Service "migration"}}selected{{end}}>Datamigratie</option>
+                                    <option value="training" {{if eq .FormData.Service "training"}}selected{{end}}>Training en ondersteuning</option>
                                    <option value="other" {{if eq .FormData.Service "other"}}selected{{end}}>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...">{{.FormData.Message}}</textarea>
+                                <textarea id="message" name="message" rows="5" required placeholder="Vertel iets over uw situatie en hoe ik u kan helpen...">{{.FormData.Message}}</textarea>
                            </div>
                            
                            <button type="submit" class="btn btn-primary">Verstuur bericht</button>
@ -120,29 +166,29 @@
            </div>
        </section>

-        <section class="contact-cta">
+        <section class="section section--light-green contact-cta">
            <div class="container">
                <h2>Waarom kiezen voor {{.CompanyName}}?</h2>
                <div class="cta-benefits">
-                    <div class="cta-benefit">
-                        <div class="benefit-icon">🎯</div>
+                    <div class="card card--cta">
+                        <div class="card__icon">🎯</div>
                        <h3>Persoonlijke aanpak</h3>
-                        <p>Elke klant is uniek, en wij bieden maatwerkoplossingen.</p>
+                        <p>Elke klant is uniek. Ik lever maatwerkoplossingen.</p>
                    </div>
-                    <div class="cta-benefit">
-                        <div class="benefit-icon">🛠️</div>
+                    <div class="card card--cta">
+                        <div class="card__icon">🛠️</div>
                        <h3>Professionele service</h3>
                        <p>Ruim 20 jaar ervaring met Linux systemen en migraties.</p>
                    </div>
-                    <div class="cta-benefit">
-                        <div class="benefit-icon">🤝</div>
+                    <div class="card card--cta">
+                        <div class="card__icon">🤝</div>
                        <h3>Volledige ondersteuning</h3>
-                        <p>Van installatie tot training, wij begeleiden u door het hele proces.</p>
+                        <p>Van installatie tot training: ik begeleid u door het hele proces.</p>
                    </div>
-                    <div class="cta-benefit">
-                        <div class="benefit-icon">💚</div>
+                    <div class="card card--cta">
+                        <div class="card__icon">💚</div>
                        <h3>Duurzame keuze</h3>
-                        <p>Samen bouwen we aan een duurzamere digitale toekomst.</p>
+                        <p>U kiest voor een duurzamere digitale toekomst.</p>
                    </div>
                </div>
            </div>
--- a/templates/diensten.html
+++ b/templates/diensten.html
@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{.Title}}</title>
+    
+    <!-- Basic SEO Meta Tags -->
+    <meta name="description" content="Diensten en tarieven van {{.CompanyName}}: Linux-installaties, advies, datamigratie en ondersteuning. Tarief: €20 per half uur.">
+    <meta name="keywords" content="diensten, tarieven, Linux installatie, datamigratie, ondersteuning, Het Hogeland">
+    <meta name="author" content="{{.CompanyName}}">
+    <meta name="robots" content="index, follow">
+    <meta name="language" content="nl">
+    
+    <!-- Open Graph Meta Tags for Social Media -->
+    <meta property="og:title" content="{{.Title}}">
+    <meta property="og:description" content="Diensten en tarieven: Linux-installaties, advies, datamigratie en ondersteuning. Tarief: €20 per half uur.">
+    <meta property="og:image" content="https://{{.Domain}}/static/images/TuxAinrom.webp">
+    <meta property="og:image:alt" content="Diensten van {{.CompanyName}}">
+    <meta property="og:url" content="https://{{.Domain}}/diensten">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="{{.CompanyName}}">
+    <meta property="og:locale" content="nl_NL">
+    
+    <!-- Favicon Links -->
+    <link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
+    <link rel="manifest" href="/static/icons/manifest.json">
+    
+    <!-- Theme Color for Mobile Browsers -->
+    <meta name="theme-color" content="#059669">
+    <meta name="msapplication-TileColor" content="#059669">
+    
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://{{.Domain}}/diensten">
+    
+    <!-- CSS and Fonts -->
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    {{template "header" .}}
+
+    <main>
+        <section class="page-hero">
+            <div class="container">
+                <h1>Diensten en tarieven</h1>
+                <p>Linux blijft vrij. Mijn hulp is betaalbaar, met duidelijke afspraken vooraf.</p>
+            </div>
+        </section>
+
+        <section class="section section--light services">
+            <div class="container">
+                <h2>Wat ik voor u kan doen</h2>
+                <div class="services-grid">
+                    <div class="card card--service">
+                        <h3>Gratis advies</h3>
+                        <p>Ik bekijk uw huidige computer en adviseer over de beste Linux-distributie en aanpak.</p>
+                    </div>
+                    <div class="card card--service">
+                        <h3>Installatieservice</h3>
+                        <p>Professionele Linux-installatie met basissoftware, updates en drivers waar nodig.</p>
+                    </div>
+                    <div class="card card--service">
+                        <h3>Datamigratie</h3>
+                        <p>Overzetten van bestanden, documenten en foto’s van uw oude systeem naar Linux. Zie ook de <a href="#backup-disclaimer">back-updisclaimer</a> hieronder.</p>
+                    </div>
+                    <div class="card card--service">
+                        <h3>Training en ondersteuning</h3>
+                        <p>Uitleg en begeleiding zodat u direct prettig aan de slag kunt met Linux.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section section--light">
+            <div class="container">
+                <h2>Waarom betalen voor hulp bij Linux?</h2>
+                <p>Linux zelf is vrije software. Iedereen kan het downloaden en gebruiken. Wat ik aanbied, is mijn tijd, kennis en zorg: ik neem u het uitzoekwerk, de installatie en de uitleg uit handen. Zo kunt u zonder stress meteen prettig aan de slag.</p>
+            </div>
+        </section>
+
+        <section class="section section--brand contact-cta">
+            <div class="container">
+                <h2>Tarieven</h2>
+                <div class="cta-benefits">
+                    <div class="cta-benefit">
+                        <div class="benefit-icon" aria-hidden="true"><span class="benefit-icon__glyph">€</span></div>
+                        <h3>€20 per half uur</h3>
+                        <p>Transparant, zonder verborgen kosten. Reistijd in overleg, binnen Het Hogeland vaak kosteloos.</p>
+                    </div>
+                    <div class="cta-benefit">
+                        <div class="benefit-icon" aria-hidden="true"><span class="benefit-icon__glyph">i</span></div>
+                        <h3>Voorbeelden</h3>
+                        <p>Installatie + basisinrichting + uitleg: 1 à 2 uur. Migratie van gegevens: afhankelijk van volume en snelheid van opslag.</p>
+                    </div>
+                    <div class="cta-benefit">
+                        <div class="benefit-icon" aria-hidden="true"><span class="benefit-icon__glyph">+</span></div>
+                        <h3>Extra service</h3>
+                        <p>Optioneel kan ik data kopiëren naar uw USB-stick(s) of externe schijf. Zie de <a href="#backup-disclaimer">back-updisclaimer</a>.</p>
+                    </div>
+                </div>
+                <div style="margin-top:1.5rem">
+                    <h3>Toegankelijkheid</h3>
+                    <p>Mijn standaardtarief is €20 per half uur. Dat is een eerlijke vergoeding voor mijn werk, waarmee ik deze service in Het Hogeland kan blijven aanbieden.</p>
+                    <p>Heeft u een smalle beurs of zit u in een moeilijke situatie? Dan kijken we samen naar een oplossing. Ik vind dat financiële drempels geen reden mogen zijn om de overstap naar Linux te missen.</p>
+                    <p>Ik organiseer regelmatig <b>gratis informatiebijeenkomsten</b> en help bij Repair Cafés. Dat blijft kosteloos.</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="section section--light-green services">
+            <div class="container">
+                <h2>Mijn aanpak</h2>
+                <div class="steps-grid">
+                    <div class="card card--service"><h3>1. Kennismaking (gratis)</h3><p>We bespreken wensen, hardware en gebruik.</p></div>
+                    <div class="card card--service"><h3>2. Proefstart</h3><p>Linux live vanaf USB om te testen op uw pc.</p></div>
+                    <div class="card card--service"><h3>3. Installatie</h3><p>Compleet ingericht met updates, drivers en basissoftware.</p></div>
+                    <div class="card card--service"><h3>4. Migratie</h3><p>Bestanden, foto’s en documenten veilig overzetten.</p></div>
+                    <div class="card card--service"><h3>5. Uitleg & nazorg</h3><p>Korte training en laagdrempelige ondersteuning.</p></div>
+                </div>
+            </div>
+        </section>
+
+        <section class="contact-content">
+            <div class="container">
+                <h2 id="backup-disclaimer">Belangrijk over back-ups</h2>
+                <details class="disclaimer">
+                    <summary>Lees de back-updisclaimer</summary>
+                    <div class="disclaimer-body">
+                        <p>Ik lever een Linux-installatie- en migratieservice. <strong>Back-ups maken en bewaren is in principe de verantwoordelijkheid van de klant.</strong> Als extra service kan ik, op uw verzoek, data kopiëren naar door u aangeleverde USB-sticks of een externe schijf. Als u geen opslag bij de hand heeft, kan ik USB-sticks van verschillende groottes meebrengen en leveren tegen een normale, eerlijke prijs.</p>
+                        <p>Hoewel ik zorgvuldig werk, kan er bij datakopie of migratie altijd een risico op dataverlies bestaan, bijvoorbeeld door defecte schijven, corrupte data of hardwarefouten. <strong>U blijft verantwoordelijk voor uw eigen data</strong>. Ik ben niet aansprakelijk voor verlies of beschadiging van gegevens. Ik adviseer altijd om vooraf een eigen back-up te maken.</p>
+                    </div>
+                </details>
+                <div class="about-cta">
+                    <a href="/contact" class="btn btn-primary">Vrijblijvend contact opnemen</a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    {{template "footer" .}}
+</body>
+</html>
+
+
--- a/templates/footer.html
+++ b/templates/footer.html
@ -4,7 +4,7 @@
            <div class="footer-content">
                <div class="footer-section">
                    <h3>{{.CompanyName}}</h3>
-                    <p>Specialist in Linux migratie en duurzaam computergebruik.</p>
+                    <p>Specialist in Linux-migratie en duurzaam computergebruik.</p>
                    <p><strong>📍 Gevestigd in Eenrum</strong></p>
                    <p><em>Werkzaam in heel gemeente Het Hogeland</em></p>
                </div>
@ -20,7 +20,8 @@
                    <h3>Gemeenschap</h3>
                    <p>Lid van <a href="https://nllgg.nl" target="_blank">Nederlandse Linux Gebruikers Groep</a> (NLLGG.nl)</p>
                    <p>Actief bij <a href="https://buurtlinux.nl" target="_blank">Buurtlinux.nl</a> initiatief</p>
-                    <p>Wij ondersteunen de <a href="https://endof10.org" target="_blank">End of 10</a> beweging voor duurzaam computergebruik.</p>
+                    <p>Ik ondersteun de <a href="https://endof10.org" target="_blank">End-of-10</a>-beweging voor duurzaam computergebruik.</p>
+                    <p><a href="/over-mij">Over mij</a> · <a href="/contact">Contact</a></p>
                </div>
            </div>
            <div class="footer-bottom">
--- a/templates/header.html
+++ b/templates/header.html
@ -4,15 +4,15 @@
            <div class="nav-container">
                <div class="nav-logo">
                    <a href="/">
-                        <img src="/static/Tux.svg" alt="Tux the Linux Penguin" class="tux-icon">
+                        <img src="/static/images/Tux.svg" alt="Tux the Linux Penguin" class="tux-icon">
                        <h1>{{.CompanyName}}</h1>
                    </a>
                </div>
                <div class="nav-links">
                    <a href="/"{{if eq .CurrentPage "home"}} class="active"{{end}}>Home</a>
-                    <a href="#voordelen">↓ Voordelen</a>
-                    <a href="#distros">↓ Linux Keuze</a>
-                    <a href="#diensten">↓ Diensten</a>
+                    <a href="/linux"{{if eq .CurrentPage "linux"}} class="active"{{end}}>Waarom Linux</a>
+                    <a href="/diensten"{{if eq .CurrentPage "diensten"}} class="active"{{end}}>Diensten</a>
+                    <a href="/over-mij"{{if eq .CurrentPage "about"}} class="active"{{end}}>Over mij</a>
                    <a href="/contact"{{if eq .CurrentPage "contact"}} class="active"{{end}}>Contact</a>
                </div>
                <button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
@ -20,9 +20,9 @@
                </button>
                <div class="mobile-menu" id="mobile-menu">
                    <a href="/"{{if eq .CurrentPage "home"}} class="active"{{end}}>Home</a>
-                    <a href="#voordelen">↓ Voordelen</a>
-                    <a href="#distros">↓ Linux Keuze</a>
-                    <a href="#diensten">↓ Diensten</a>
+                    <a href="/linux"{{if eq .CurrentPage "linux"}} class="active"{{end}}>Waarom Linux</a>
+                    <a href="/diensten"{{if eq .CurrentPage "diensten"}} class="active"{{end}}>Diensten</a>
+                    <a href="/over-mij"{{if eq .CurrentPage "about"}} class="active"{{end}}>Over mij</a>
                    <a href="/contact"{{if eq .CurrentPage "contact"}} class="active"{{end}}>Contact</a>
                </div>
            </div>
--- a/templates/index.html
+++ b/templates/index.html
@ -4,8 +4,91 @@
    <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">
+    
+    <!-- Basic SEO Meta Tags -->
+    <meta name="description" content="Linux-migratieservice voor Windows 10 end-of-life. Geef uw computer nieuw leven met Linux! Professionele installatie, datamigratie en ondersteuning in gemeente Het Hogeland.">
+    <meta name="keywords" content="Linux, Windows 10, end of life, migratie, Ubuntu, Linux Mint, computer, installatie, Het Hogeland, Eenrum, duurzaam computergebruik">
+    <meta name="author" content="{{.CompanyName}}">
+    <meta name="robots" content="index, follow">
+    <meta name="language" content="nl">
+    
+    
+    <!-- Open Graph Meta Tags for Social Media -->
+    <meta property="og:title" content="{{.Title}}">
+    <meta property="og:description" content="Windows 10-ondersteuning eindigt binnenkort? Geef uw computer nieuw leven met Linux! Professionele Linux-migratieservice in gemeente Het Hogeland.">
+    <meta property="og:image" content="https://{{.Domain}}/static/images/TuxAinrom.webp">
+    <meta property="og:image:alt" content="Tux Linux mascotte banner voor Hogeland Linux service">
+    <meta property="og:url" content="https://{{.Domain}}/">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="{{.CompanyName}}">
+    <meta property="og:locale" content="nl_NL">
+    
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="{{.Title}}">
+    <meta name="twitter:description" content="Windows 10-ondersteuning eindigt binnenkort? Geef uw computer nieuw leven met Linux! Professionele Linux-migratieservice.">
+    <meta name="twitter:image" content="https://{{.Domain}}/static/images/TuxAinrom.webp">
+    <meta name="twitter:image:alt" content="Tux Linux mascotte banner voor Hogeland Linux service">
+    
+    <!-- Favicon Links -->
+    <link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
+    <link rel="manifest" href="/static/icons/manifest.json">
+    
+    <!-- Theme Color for Mobile Browsers -->
+    <meta name="theme-color" content="#059669">
+    <meta name="msapplication-TileColor" content="#059669">
+    
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://{{.Domain}}/">
+    
+    <!-- Preload Critical Resources -->
+    <link rel="preload" href="/static/css/style.css" as="style">
+    <link rel="preload" href="/static/images/TuxAinrom.webp" as="image">
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" as="style">
+    
+    <!-- CSS and Fonts -->
+    <link rel="stylesheet" href="/static/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Structured Data for Search Engines -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "LocalBusiness",
+        "name": "{{.CompanyName}}",
+        "description": "Linux-migratieservice voor Windows 10 end-of-life. Professionele installatie, datamigratie en ondersteuning.",
+        "url": "https://{{.Domain}}",
+        "telephone": "{{.Phone}}",
+        "email": "{{.Email}}",
+        "address": {
+            "@type": "PostalAddress",
+            "streetAddress": "{{.Street}}",
+            "postalCode": "{{.PostalCode}}",
+            "addressLocality": "{{.Village}}",
+            "addressCountry": "NL"
+        },
+        "geo": {
+            "@type": "GeoCoordinates",
+            "latitude": "53.4107",
+            "longitude": "6.4684"
+        },
+        "areaServed": {
+            "@type": "Place",
+            "name": "gemeente Het Hogeland"
+        },
+        "serviceType": "Linux migratie service",
+        "priceRange": "€€",
+        "image": "https://{{.Domain}}/static/TuxAinrom.webp",
+        "sameAs": [
+            "https://endof10.org"
+        ]
+    }
+    </script>
 </head>
 <body>
    {{template "header" .}}
@ -14,65 +97,39 @@
        <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>
-        </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>
+                <p class="hero-subtitle">Windows 10-ondersteuning eindigt binnenkort? Ik help u graag overstappen. Ontdek hoe Linux uw hardware nieuw leven kan geven.</p>
+                <div class="hero-buttons hero-buttons--stack">
+                    <div class="hero-buttons-row hero-buttons-row--secondary">
+                        <a href="/contact" class="btn btn-secondary">Gratis advies</a>
+                        <a href="/over-mij" class="btn btn-secondary">Wie ben ik?</a>
                    </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 class="hero-buttons-row hero-buttons-row--primary">
+                        <a href="#voordelen" class="btn btn-primary">↓ Meer weten</a>
                    </div>
                </div>
            </div>
        </section>

-        <section id="windows10-eol" class="windows-eol">
+        {{template "benefits" (dict "Page" . "SectionClass" "section--light") }}
+
+        <section id="windows10-eol" class="section windows-eol">
            <div class="container">
-                <h2>Windows 10 Ondersteuning Eindigt</h2>
+                <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 class="eol-main">
+                        <div class="eol-clippy-image">
+                            <img src="/static/images/clippy.png" alt="Clippy advising to use Linux">
+                        </div>
+                        <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 modern, veilig alternatief dat perfect werkt op uw huidige hardware.</p>
+                        </div>
                    </div>
                    <div class="eol-stats">
                        <div class="stat">
@ -95,12 +152,26 @@
            </div>
        </section>

-        <section id="distros" class="distros">
+        <section class="section section--light services">
            <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>
+                <h2><a href="/diensten">Mijn aanpak</a></h2>
+                <div class="steps-grid" style="margin-top:1.5rem">
+                    <div class="card card--service"><h3>1. Kennismaking (gratis)</h3><p>Korte intake: wensen, hardware en gebruik. Samen kiezen we een route.</p></div>
+                    <div class="card card--service"><h3>2. Proefstart</h3><p>Linux live vanaf USB zodat u ziet hoe het werkt op uw pc.</p></div>
+                    <div class="card card--service"><h3>3. Installatie</h3><p>Veilig, met updates, codecs, printer, Nederlandse taal en basissoftware.</p></div>
+                    <div class="card card--service"><h3>4. Migratie</h3><p>Bestanden, foto's, documenten en favorieten overzetten.</p></div>
+                    <div class="card card--service"><h3>5. Uitleg & nazorg</h3><p>Korte training, daarna laagdrempelig bereikbaar voor vragen.</p></div>
+                </div>
+                <p style="margin-top:1rem"><strong>Daarnaast</strong> geef ik gratis informatiebijeenkomsten en help ik soms bij Repair Cafés met installaties, zonder kosten.</p>
+            </div>
+        </section>
+
+        <section id="distros" class="section section--light-green distros">
+            <div class="container">
+                <h2><a href="/linux">Welke Linux past bij u?</a></h2>
+                <p class="section-subtitle">Er zijn veel Linux-distributies, elk met hun eigen voordelen. Ik help u graag de perfecte keuze te maken.</p>
                <div class="distros-grid">
-                    <div class="distro-card">
+                    <a class="card card--distro card-link" href="/linux">
                        <div class="distro-header">
                            <div class="distro-logo">
                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEiUlEQVR4nO1ZXWgcVRQeVNAna0Xw3tSaB/viQ6EP6ltMobXN3EmsRkpDraVCaSISsbV/YrE0P+CDtJuIPpX0xUIxaaRVUBRbX6q2D0piEOKDm02Zu5P9S5Z2/5LtHDl3kmUnO7tzZzO7bWEPHHZnmLnzffeev3uuojSkIQ1Zs8Bp5ZGw9uwrOqMndUbHdEYnuUoSXCW5ZU3gPZ3RUXwGn8V3lPstkZ3PUF2lA5yRWc4oeFKVhPBdHKPuwEPa8+u5SoY4IxnPwEuUZHCs4K7mp+oCnjPSqTM6t3bgdtVVauDYNQMOu5VHrVn3FzgvXZEAfstX8MHW5ie4SsZrD56u+Mc4ftMX8DgbGD3qBp4VSFyBVuWxNRPw22zCWhNEDr0qlGsb3EicWxt4Rjr9Bp/75xasSG7qprhX7nmdUVPX6JtVgU9sX79OZ5T7SSDSsxVWSwRXwiU6Ydj2PvsqGfYM8vWNMP9ZD6R//RbyPAhmJgVmNg15IwQLgSMQ/2RPKYGeygSWTWnIE3jMjtUkqehhDcA0wUnyxizM7dsifgsmNHnD3Q+EkoynjG2VB5LAtSa4c/FzMPZuFtepny5BOUlfGwNj3xZYGD4GicGDkuALpjQgBR6LLKxTZAe+880XFrjr4+La2PMi3JuPlCWRn7sNqR8vCk1eGPRCYEaqAMRKUXbQ+Kkum8kkzuy3TKl3hzCncOcLQqNH2uHu1REwlxZLCMVPvyNvpip5yd18GD0pNVj7c7CkB21gctN/AW8vbxbR3tcgHzfsKxKegfCuZrlV0OgJGQJjMoMl+g7YgJiLOYi+v83d0Xt3lKxEov9dOQKMjroTUOnfFTNoT6tw3IXhozYQd6+clzaF1Hcjdue+Pi5LYNKVAFdJzDWDTv4Gc3s3C4dckeiHTJoA+kSxLIWmZX0gKkMgJ5NBMRSmfvi6cB1+a5O8M1atJFsdge5WBwJHRSh8EAnEHE1o6mYBbHbihkhcNhM6rEkDidXShHRXJ8YyuAnmh4/ZnfjqiLwTf3+hdk6sy4bRM/ttIDA0Ypx3ey/6wU6A1WG074CPYVQ2kWkbYEn/zwYke+tn4KypIvh7qxMZD8onMpUe97eUwPJ4uZTARBZ5b6t1/1SXsHN0bNTYRx2W2TiVEp++7W8p4bmYuzQkgCTP94nryKEWMHPZEqCFGTdmRfhFTY4M+F/MeS6nGYXkVx+L2oh3bITF6T/Lgk//Mir2BJhD5gcPVtxOOhDoV2q9oUl+eaLCzIesDU1R6M1N/SFJwuOGpupuRAduKbshfe2ycHCxpcykRMVpbSm7SohFsLZyJxBQvEqs7eknfd/UO2T0SHeLm+kYVfdNl/ugpl8EVmf03NTv7m0Vlb5RFfgiEgE/V6GQ0btbXO1fV+lZ5aFuLe72qcn7b9umx+vZ3NVVehm/qdSgvX7OT5/gzjZ/1vf2erFgr9I6jPB91o2q+6BeBcOar0dMjATqdsTkcMjX76V2KprxGXz3vhzyORaAbeRl7NtYEYtMcEbihWNW/M/IhDhmVelxrCofiGPWhjREefjlf0AT6pAJW8ezAAAAAElFTkSuQmCC" alt="ubuntu--v1">
@ -117,9 +188,9 @@
                            <span class="feature">✓ LTS versies</span>
                        </div>
                        <p class="distro-ideal">Ideaal voor: <strong>Beginners, kantoorwerk, algemeen gebruik</strong></p>
-                    </div>
+                    </a>
                    
-                    <div class="distro-card">
+                    <a class="card card--distro card-link" href="/linux">
                        <div class="distro-header">
                            <div class="distro-logo">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
@ -131,16 +202,16 @@
                                <span class="distro-tag">Windows-achtig</span>
                            </div>
                        </div>
-                        <p class="distro-description">Ziet er vertrouwd uit voor Windows gebruikers. Stabiel en betrouwbaar.</p>
+                        <p class="distro-description">Ziet er vertrouwd uit voor Windows-gebruikers. Stabiel en betrouwbaar.</p>
                        <div class="distro-features">
                            <span class="feature">✓ Vertrouwde interface</span>
                            <span class="feature">✓ Multimedia ondersteuning</span>
                            <span class="feature">✓ Zeer stabiel</span>
                        </div>
                        <p class="distro-ideal">Ideaal voor: <strong>Windows migratie, ouderen, conservatieve gebruikers</strong></p>
-                    </div>
+                    </a>
                    
-                    <div class="distro-card">
+                    <a class="card card--distro card-link" href="/linux">
                        <div class="distro-header">
                            <div class="distro-logo">
                                <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="inxzwh639poeU1X9W8tTQa" x1="7.037" x2="45.033" y1="7.037" y2="45.033" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#05acb3"/><stop offset="1" stop-color="#038387"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQa)" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><linearGradient id="inxzwh639poeU1X9W8tTQb" x1="22.277" x2="31.658" y1="31.726" y2="57.724" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQb)" d="M15.5,38.5h17c1.105,0,2-0.895,2-2v0c0-1.105-0.895-2-2-2h-17c-1.105,0-2,0.895-2,2v0	C13.5,37.605,14.395,38.5,15.5,38.5z"/><linearGradient id="inxzwh639poeU1X9W8tTQc" x1="30.056" x2="40.896" y1="16.127" y2="46.17" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQc)" d="M34,16c-3-1-3.5,0.5-4,2.5c-0.618,2.473-1,7-1,8.5s1,2,2,0.5s4-6.5,4.5-8S35.956,16.652,34,16	z"/><linearGradient id="inxzwh639poeU1X9W8tTQd" x1="28.561" x2="31.626" y1="29.85" y2="38.346" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQd)" d="M27.996,30.447c-0.642,0.833-0.433,2.571,1.067,2.589c0.938,0.011,1.584-0.887,1.509-2.029	C30.518,30.184,29.104,29.01,27.996,30.447z"/><linearGradient id="inxzwh639poeU1X9W8tTQe" x1="17.026" x2="40.638" y1="8.349" y2="73.788" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0f0f0"/><stop offset="1" stop-color="#fff"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQe)" d="M26,12c-3.056-5.239-8.399-4.379-13.366-0.748c-1.265,0.924-1.651,2.649-0.91,4.029	l8.91,16.606c0.49,0.913,1.596,1.3,2.549,0.892h0c1.006-0.431,1.479-1.591,1.059-2.602c-0.819-1.975-2.095-5.059-2.742-6.677	C23.5,22.5,29.846,18.592,26,12z M21.352,19.609c-0.515,0.303-1.907,0.452-3.239-2.812c-1.213-2.971-0.849-4.335-0.212-4.547	s1.971,0.485,3.244,3.001C22.418,17.767,21.868,19.306,21.352,19.609z"/></svg>
@ -153,13 +224,13 @@
                        <p class="distro-description">Gemaakt door System76. Uitstekend voor gaming en creatief werk.</p>
                        <div class="distro-features">
                            <span class="feature">✓ Gaming-geoptimaliseerd</span>
-                            <span class="feature">✓ NVIDIA ondersteuning</span>
+                            <span class="feature">✓ NVIDIA-ondersteuning</span>
                            <span class="feature">✓ Modern ontwerp</span>
                        </div>
                        <p class="distro-ideal">Ideaal voor: <strong>Gamers, ontwikkelaars, jongeren</strong></p>
-                    </div>
+                    </a>
                    
-                    <div class="distro-card">
+                    <a class="card card--distro card-link" href="/linux">
                        <div class="distro-header">
                            <div class="distro-logo">
                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF0klEQVR4nMWZa4hVVRTHf+No02PQnDs1YlhZBNZET3tQhBBTkaGVaSmJERW9JjDLogdYlkVWk5FYRF8KqQ9GGGHvskatHMImySynF9PbV5lpM43eG8vWkTWrfe7d956r/WHDYT/X3met/1p7bagOmoDJwDzgdeBLYDPQC+zU7y7gbeAh4AJgMP8zGoBWYCVQqKDsAD4ArgT225uCDwfagD8rFDxUNgFzgcY9KfggYGaK4H8DS1V9RFW2BfpsANp18/LX8oE+G4GrgJpqC38UsCqwYCdwDTAWeCfytH8CxgGHqAquC/RZAYyslvAXAlvcAquB84E64Okiwm4HegL1cvrTdf5aJYDPXZ/1wJlZhb9ajS2Z9C/gZl10mJ6UXVTUawHQAgwx84wAbgK+d/0vMn3kMOYAfaZdNn95FuGtnn4NHKttQwIntgg4KIK53jNjfgHqXZ9TgB9NH6HhSypRG3vyHxqGGAi8Ydp6lQpjMRToNuNbA30OBT5zqnhGOQZrdf4jpw73u9MR/S0X15o5VhbZ6GrHYofHUOUqpzaNbnPWKMUeKkGD+cN9ATWyf+Jns578+aKY6Qw20fkES0z7sox8bVXkpCL9TlU/k/SdVszDWic1w7Wf7PS+mWyQuCiZ75wSfR9wzi4X6tRmOn2qVGmxwLQ/R3YsNvMJaRTDvs7h3R3SSXv657l2CbZ+M+2ZHQzwZhl/QHCp8+b72MZW0/hJYPBY076G6qDDzHl6RH/RiG/MmCvSJhMH5nGfaX+sShsQWkzmlLgoBrc5Etl9Gckb4xT+9XjLDJxYBeFzju0GRI57wYzbkVD8ZFMpEWUImys4rWIY57x8DIbpARf8Yc4zFbNSnFveOJ1qxOp2zbbIMbMCUe3D0vCaqRgfGHiwC3GzYoCLSlsixtQr//sNiOx8ZSqODgweZdrXVll9NuofLoVbzRgbp32B25n4A49m0y7uPyvsHWJu5OnbeMgykdhmP8Po5xzMZSRpl1+fBRPNXBIUSrBWCnPciR/gQpp+gVIovTHYtG/NILyw169mrscjxoxUmk3GXKY3N3sI/G4q5LRDRpeEvnmdoFyIni8363wbmdh6yYxpVwZsNHXiDHelQZKKE1ImWmP6SHhbDmTRp5wDOiti3FQ35viATa7zXtZesi0WlrgCpmGgRq6W+mZHjDvMaYb4jQQTTP0SH0anscIM0+f5SOHlGvqKE/7JCEdYC7zvgkdrm/d6JzjFVAjFhdDsLtghurUYA3znhH8m0ovPdyzj1brdtE9KPO1OMyB423ERqziWEBr0dyfzJYY/OzJgu8NtWnJJFjnDmnmbxlkRcVG/0V0oDnQ3pltc0FfQS5B43hjc7saGaPYG0y6Z7d2Y5nQuhP2BH0y/F5XS7tIElY9TXlZjjDH0+W7s4sCVtkZzsUmf62xjnXMyoaDOM0DBpQEtx6exmceRepJe+JBDHW/6/BG6t9iEVZcLK8QRnQ08okZcCJRuTViFwhGPoZpp2ObmeCJw8sn6Ng0jrzz/QU7DZcu9dyoVWk5OK8t1A6NSNtGo9vBsQPBek60uZR9b9BYZhLWFYmWDJnNDDxnWgNdqWZ/yoFHQ1OJxRYQf7bKBxTa6y1DeTVmoSx1RixoeGjstDFz1YoqkMKeU8A1NLhPRYdZOxRHujiDqc2KJMTmluEVuQVu2qwAPAqeVEoJ/g72P3R8V2aIwxp1qZzG9S6FcSVUeo2V4inGmockJ36dPs2Vhqnsj6NbHhz2N0e4v5st8f+iHSe5P9GheMuYeWy4GKdv0uJOvWPgE57osWkE5+eIqpVhq1ElZnk9sr2y1ScOIwINeksVuTcnmEWn4nYF5O8ox2FjUakC3KbBgn+Yq79EHuWZ1XHXq1HL6WDJB+yxzd/GCcVLTY6gyCxrVldt0e9ayVS9TEtrvNdSrCix1bBVbhF0kkLu+QhWsKkRFJOUhTupVzd9IMkpSIsJi4hilTtoeVXYr9aYchX8ABKoYXZ5zSP4AAAAASUVORK5CYII=" alt="external-elementary-os-is-a-linux-distribution-based-on-ubuntu-logo-regular-tal-revivo">
@ -176,9 +247,9 @@
                            <span class="feature">✓ Mac-achtig</span>
                        </div>
                        <p class="distro-ideal">Ideaal voor: <strong>Mac gebruikers, designers, stijlbewuste mensen</strong></p>
-                    </div>
+                    </a>
                    
-                    <div class="distro-card">
+                    <div class="card card--distro">
                        <div class="distro-header">
                            <div class="distro-logo">
                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFU0lEQVR4nO1YWW8bVRi1gAfojLcsxWmbZnNBQoDgFyCBVAG1E8/YYydx9sQuhWeekBoJQdpCnxFCVUECBSVt9sTLzDhOkzheEloEVA2pKtpCkGhSpOy7P3Qn8XiJJ3TGdqmQj3SVaMYP59w53/m+e2WyLLLIIov/BcqaJ7QlLYEPipv97cXN/utFjb6HhQ2+zWP145tH68fmC+rGrmtqx9o11tH38+vGy2RPAt5o9T6jbQlaS1sCE6UtAShpCUBxsx+KmibgeOMEFDb44Gj9OBypG4eC2jHQ1IzC8zWjcNh6DfKqvb5cy0i1jOp8+j8hX2YPvq21hWbKbEEQSz6/egTyqkYgt9IL6krvdI7Fc/KxES+wTx06YQ9d0tpDkCr5HLQsw6A2D4PKPPzVMWriuYySL33vx8MnTgd/SDd5NRJAeUBJsZM4NZqfMfJae3A6c+Q9oDR5QGFkpnHKkZ9+26Sy81XDkEu5IYfsBxXRC2qiD1SkE9QUG0/exILCyAJOspOyeu+zaROQiufzKml47QwL3zD3YfbhOmxuh2F2fh2+dt+Dl200KI3OOPJyTgADGEl/mRbyWnvgZCrkjR/7YWl1G5JhaXUbys/6QEE64shH1iED+07qOS81KquG4fUzrCD5CBZXt+ClJhfISTqOPPcVCOZWSn1Caw/VSC1Y5HlkmwjuP1jjdltj7uf+/j63xr+75LwLePngPgG7IthKyQJKbUG/1LRBBYs8HwEirTK6UVSCknRDxVlfVNzcGmC6bgEBzLjk2SaVqERps70T5knmkb0xacOAxtTPv9vY2gFMdzWpAJykw0rKXSJaABrMUsl5laEnzuuK8u5o2pA0vPXhNf7dvb9WAdP1CAhgACfY06IF7E2VkpuUsiJBgL47GpWECz66/Av/7rJLuAb2vsJ34gU0+W+k0mETBcj1XdGoJNzwqs0Nd/5cgduzy/CKzc09ExbATIkWUNTkm3+kDmuhIcc4CCrUXQ09HHEV0c9ZJhb4qSuA67t2vV7eD7jBwdmGK16D4yDyqJAfiBZQ2Ojb+Lcm9UKjGy5euQ0//bYIK+vRvEfkEwXEFuznnTO7IkjmUde6eAEHkTc7oeHilGCT4gTokwtAWFrdAkzXlVkBB+08Ih+OJuR+AfpuzvNCX+Czjl9FfQFMioWEPI9sE7vzf8yvQe2FSThiGeB3Xl7eA3JdvIBD73YAdupqtAaSjA54Oos46XhgoTnPx5IvtjpAZXTtdtjYkThBACIvgjDE9wHmW9ECko4HxkH4+e4STwrt/C75+HkeRSUinD4BrPhGlnw86IuzD7JN4s7z83zaBNBhZYWzWLSA5ONB734BiHgCeeTvAnN01llcEZ06wBcwyYzJpCBZh1URA1zmR1DdFgQF6dx/GDE4oO58iP/djTsLgOt7pQkw0mZJApIewE0uuNAxwxObmV2GwsoBkBPOvVShOfLoGSrwCNrapwE3DIknT9A3JR9okt4emFgorXVwp6gI0MGk9nwINFQft9DOx5JfWNmC41UDgBO0BAHuN2VSIXj1QTrBei4IOwd1sj2g31R+EpC4+8wXkslzAoTubVDBVgyAtS3I7a4Q0LuqTwNiZx7YIx9I+VpFkHykYA1DnDXOfT/NFeny2jY346D/0TPONtJ2/hau8+alRD4iQJA832BQ0Q5xCYNikotKlDbomSTPM4G03copKXbxQPJpXhjyfDpv4xQmT8/jII8R9M2U0kYIcsrzotzI/J0Z8nQYdViMZCyy1tanZJmCusJVKCeZToxgFiSTJZgNjKTn0EiMDudoMJM022SRRRZZyJ5E/ANvJojABjwtUQAAAABJRU5ErkJggg==" alt="fedora">
@ -194,10 +265,10 @@
                            <span class="feature">✓ Red Hat basis</span>
                            <span class="feature">✓ Ontwikkelaarstools</span>
                        </div>
-                        <p class="distro-ideal">Ideaal voor: <strong>Ontwikkelaars, IT professionals, tech-enthousiasten</strong></p>
+                        <p class="distro-ideal">Ideaal voor: <strong>Ontwikkelaars, IT-professionals, tech-enthousiastelingen</strong></p>
                    </div>
                    
-                    <div class="distro-card">
+                    <div class="card card--distro">
                        <div class="distro-header">
                            <div class="distro-logo">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
@ -220,77 +291,43 @@
                </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>
+                    <h3>Weet u niet welke u moet kiezen?</h3>
+                    <p>Geen probleem! Ik adviseer 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">
+        <section id="diensten" class="section section--light services">
            <div class="container">
-                <h2>Onze Diensten</h2>
+                <h2><a href="/diensten">Mijn diensten</a></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>
+                    <a class="card card--service card-link" href="/diensten">
+                        <h3>Gratis advies</h3>
+                        <p>Ik bekijk uw huidige computer en adviseer over de beste Linux distributie voor uw behoeften.</p>
+                    </a>
+                    <a class="card card--service card-link" href="/diensten">
+                        <h3>Installatieservice</h3>
+                        <p>Professionele Linux-installatie op uw computer, inclusief alle benodigde software.</p>
+                    </a>
+                    <div class="card card--service">
+                        <h3><a href="/diensten">Datamigratie</a></h3>
+                        <p>Veilige overdracht van al uw bestanden, foto's en documenten van Windows naar Linux. Zie de <a href="/diensten#backup-disclaimer">back-updisclaimer</a>.</p>
                    </div>
+                    <a class="card card--service card-link" href="/diensten">
+                        <h3>Training en ondersteuning</h3>
+                        <p>Persoonlijke begeleiding om u vertrouwd te maken met uw nieuwe Linux-systeem.</p>
+                    </a>
                </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 in de praktijk</p>
-                
-                <div class="features-grid">
-                    <div class="feature-showcase">
-                        <div class="feature-image">
-                            <img src="/static/Zorin-17-desktop.webp" alt="Zorin OS 17 Desktop Interface" loading="lazy">
-                        </div>
-                        <h3>Moderne Desktop Interface</h3>
-                        <p>Linux ziet er vertrouwd en professioneel uit. Deze Zorin OS desktop lijkt op Windows maar is veel sneller en veiliger.</p>
-                    </div>
-                    
-                    <div class="feature-showcase">
-                        <div class="feature-image">
-                            <img src="/static/LinuxMintCinnamonSoftwareManager.webp" alt="Linux Mint Software Manager" loading="lazy">
-                        </div>
-                        <h3>Eenvoudig Software Installeren</h3>
-                        <p>Duizenden gratis programma's met één klik installeren via de Software Manager. Net zo makkelijk als een app store.</p>
-                    </div>
-                    
-                    <div class="feature-showcase">
-                        <div class="feature-image">
-                            <img src="/static/GamingBenchmarkLinuxvsWindows.webp" alt="Gaming Performance Linux vs Windows" loading="lazy">
-                            <div class="image-caption">
-                                <small>Bron: <a href="https://www.youtube.com/watch?v=4LI-1Zdk-Ys" target="_blank" rel="noopener">Linux vs Windows Gaming Performance</a></small>
-                            </div>
-                        </div>
-                        <h3>Gaming Prestaties</h3>
-                        <p>Linux kan vaak betere gaming prestaties leveren dan Windows, met minder overhead en optimalisaties voor moderne games.</p>
-                    </div>
-                </div>
-            </div>
-        </section>
+        {{template "linux_features" (dict "Page" . "SectionClass" "section--light-green") }}

-        <section class="cta">
+        <section class="section 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>
+                <p>Laat uw computer niet eindigen als e-waste. Geef hem een tweede leven met Linux - ik help u graag.</p>
                <a href="/contact" class="btn btn-primary btn-large">Neem contact op</a>
            </div>
        </section>
--- a/templates/linux.html
+++ b/templates/linux.html
@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{.Title}}</title>
+    
+    <!-- Basic SEO Meta Tags -->
+    <meta name="description" content="Linux in detail: distributiekeuze en functies. Hulp bij kiezen en voorbeelden van Linux in actie.">
+    <meta name="keywords" content="Linux, distributies, functies, Ubuntu, Linux Mint, Fedora, Pop!_OS, Elementary OS">
+    <meta name="author" content="{{.CompanyName}}">
+    <meta name="robots" content="index, follow">
+    <meta name="language" content="nl">
+    
+    <!-- Open Graph Meta Tags for Social Media -->
+    <meta property="og:title" content="{{.Title}}">
+    <meta property="og:description" content="Maak kennis met populaire Linux-distributies en zie Linux in actie.">
+    <meta property="og:image" content="https://{{.Domain}}/static/images/TuxAinrom.webp">
+    <meta property="og:image:alt" content="Linux distributies en functies">
+    <meta property="og:url" content="https://{{.Domain}}/linux">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="{{.CompanyName}}">
+    <meta property="og:locale" content="nl_NL">
+    
+    <!-- Favicon Links -->
+    <link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
+    <link rel="manifest" href="/static/icons/manifest.json">
+    
+    <!-- Theme Color for Mobile Browsers -->
+    <meta name="theme-color" content="#059669">
+    <meta name="msapplication-TileColor" content="#059669">
+    
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://{{.Domain}}/linux">
+    
+    <!-- CSS and Fonts -->
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    {{template "header" .}}
+
+    <main>
+        <section class="page-hero">
+            <div class="container">
+                <h1>Waarom Linux?</h1>
+                <p>Nieuw bij Linux? Geen zorgen. Linux is een betrouwbaar en eenvoudig computersysteem dat uw computer vaak weer prettig laat werken, zonder dat u ervoor hoeft te betalen. U kunt blijven doen wat u gewend bent: internetten, e-mailen, foto’s bekijken, videobellen en bankieren. Hieronder vindt u een korte uitleg en voorbeelden in beeld.</p>
+            </div>
+        </section>
+
+        <section class="section section--light intro-gnome">
+            <div class="container">
+                <h2 class="section__title">Rustig overstappen naar Linux</h2>
+                <div class="grid grid--2-col">
+                    <div>
+                        <div class="feature-image">
+                            <img src="/static/images/gnome.webp" alt="GNOME desktop op Linux" loading="lazy">
+                            <div class="image-caption">
+                                <small>GNOME desktop. Bron: <a href="https://www.ifixit.com/Guide/How+to+install+a+GUI+on+Arch+Linux/167611" target="_blank" rel="noopener">iFixit</a></small>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <h3>Bekende bediening</h3>
+                        <p>Menu, vensters, bureaublad: het werkt zoals u verwacht. U kunt direct aan de slag.</p>
+                        <h3>Wat u dagelijks nodig hebt</h3>
+                        <p>Internet, e-mail, videobellen, foto’s beheren, bankieren en documenten maken: het kan allemaal. Veel vertrouwde apps zijn beschikbaar en er zijn goede alternatieven voor Windows-programma’s. Ik help u stap voor stap op weg.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        {{template "benefits" (dict "Page" . "SectionClass" "section--light-green") }}
+
+        <section class="section section--light distros">
+            <div class="container">
+                <h2>Welke Linux past bij u?</h2>
+                <p class="section-subtitle">Niet iedereen hoeft alle keuzes te zien. Daarom drie eenvoudige opties om mee te beginnen.</p>
+                <div class="distro-tiles">
+                    <div class="distro-tile">
+                        <img src="/static/images/mint.svg" alt="Linux Mint" class="distro-tile__img">
+                        <h3>Linux Mint</h3>
+                        <p>Heel vertrouwd voor overstappers. Lijkt qua bediening op Windows en werkt stabiel.</p>
+                    </div>
+                    <div class="distro-tile">
+                        <img src="/static/images/ubuntu.png" alt="Ubuntu" class="distro-tile__img">
+                        <h3>Ubuntu LTS</h3>
+                        <p>Veelgebruikt en jarenlang ondersteund. Geschikt voor allerlei toepassingen.</p>
+                    </div>
+                    <div class="distro-tile">
+                        <img src="/static/images/elementary.png" alt="Elementary OS" class="distro-tile__img">
+                        <h3>Elementary OS</h3>
+                        <p>Rustig en overzichtelijk, met een eenvoudig ontwerp dat prettig oogt.</p>
+                    </div>
+                </div>
+                <p class="section-subtitle" style="margin-top:1rem">Wilt u later meer ontdekken? Er bestaan nog veel andere varianten zoals Fedora, Pop!_OS of Garuda Linux, ideaal voor wie graag experimenteert of speciale wensen heeft.</p>
+            </div>
+        </section>
+
+        {{template "linux_features" (dict "Page" . "SectionClass" "section--light-green") }}
+
+        <section class="section 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 - ik help u graag.</p>
+                <a href="/contact" class="btn btn-primary btn-large">Neem contact op</a>
+            </div>
+        </section>
+    </main>
+
+    {{template "footer" .}}
+</body>
+</html>
+
+
--- a/templates/over-mij.html
+++ b/templates/over-mij.html
@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{.Title}}</title>
+    
+    <!-- Basic SEO Meta Tags -->
+    <meta name="description" content="Over {{.AboutName}} - mijn band met Het Hogeland en waarom ik Linux promoot.">
+    <meta name="keywords" content="over mij, wie ben ik, Linux, Het Hogeland, Eenrum, Baflo, migratie, privacy, open source">
+    <meta name="author" content="{{.CompanyName}}">
+    <meta name="robots" content="index, follow">
+    <meta name="language" content="nl">
+    
+    <!-- Open Graph Meta Tags for Social Media -->
+    <meta property="og:title" content="{{.Title}}">
+    <meta property="og:description" content="Maak kennis met {{.AboutName}} - Linux-evangelist van Het Hogeland.">
+    <meta property="og:image" content="https://{{.Domain}}/static/TuxAinrom.webp">
+    <meta property="og:image:alt" content="{{.AboutName}} - Linux op Het Hogeland">
+    <meta property="og:url" content="https://{{.Domain}}/over-mij">
+    <meta property="og:type" content="profile">
+    <meta property="og:site_name" content="{{.CompanyName}}">
+    <meta property="og:locale" content="nl_NL">
+    
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="{{.Title}}">
+    <meta name="twitter:description" content="Maak kennis met {{.AboutName}} - Linux-evangelist van Het Hogeland.">
+    <meta name="twitter:image" content="https://{{.Domain}}/static/TuxAinrom.webp">
+    <meta name="twitter:image:alt" content="{{.AboutName}} - Linux op Het Hogeland">
+    
+    <!-- Favicon Links -->
+    <link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
+    <link rel="manifest" href="/static/icons/manifest.json">
+    
+    <!-- Theme Color for Mobile Browsers -->
+    <meta name="theme-color" content="#059669">
+    <meta name="msapplication-TileColor" content="#059669">
+    
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://{{.Domain}}/over-mij">
+    
+    <!-- CSS and Fonts -->
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    {{template "header" .}}
+
+    <main>
+        <section class="page-hero">
+            <div class="container">
+                <h1>Over mij</h1>
+                <p>Maak kennis met de Linux-evangelist van Het Hogeland.</p>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="container">
+                <div class="about-grid">
+                    <div class="about-text">
+                        <p>Moi! Ik ben {{.AboutName}} ({{.AgeYears}}). Ik ben opgegroeid in <strong>Baflo</strong> en woon sinds <strong>2023</strong> in <strong>Eenrum</strong>, samen met mijn partner en onze {{.SonAgeYears}}-jarige zoon. Het Hogeland is mijn thuis - en juist hier wil ik mensen helpen om hun computers duurzaam, veilig en prettig te blijven gebruiken met Linux.</p>
+
+                        <!-- Photo appears here on mobile after first paragraph -->
+                        <div class="about-photo about-photo-mobile">
+                            <figure>
+                                <img src="/static/images/DutchOpen2024.jpg" alt="Foto van mijzelf met mijn zoontje bij grasbaanraces">
+                                <figcaption><small>Ik met mijn zoontje bij de grasbaanraces (Dutch Open 2024)</small></figcaption>
+                            </figure>
+                        </div>
+
+                        <p>Linux gebruik ik al ruim <strong>20 jaar</strong>. Eerst uit nieuwsgierigheid, later uit overtuiging: het is veilig, snel, privacyvriendelijk en geeft je de regie over je eigen computer. In mijn werk heb ik <strong>meer dan 10 jaar</strong> ervaring als <strong>organisch chemicus</strong> en ben ik daarna <strong>softwareontwikkelaar</strong> geworden (nu <strong>5+ jaar</strong>). In beide werelden werkte ik veel met Linux en servers - van dataverwerking tot automatisering en betrouwbare infrastructuur.</p>
+
+                        <p>Met {{.CompanyName}} wil ik de <strong>Linux-evangelist van Het Hogeland</strong> zijn: iemand die je helpt bij de overstap, de juiste keuzes met je afstemt en ervoor zorgt dat jouw computer weer jaren mee kan. Of je nu wilt migreren van Windows 10, nieuwsgierig bent naar Linux, of gewoon hulp nodig hebt met je systeem - ik sta voor je klaar.</p>
+
+                        <p>Naast deze service run ik ook <a href="https://chemistry.software" target="_blank" rel="noopener">chemistry.software</a>, waar ik bedrijven help met wetenschappelijke en scheikundige softwareoplossingen. Die ervaring neem ik natuurlijk mee in mijn aanpak: praktisch, zorgvuldig en toekomstbestendig.</p>
+
+                        <p>Wil je weten wat Linux voor jou kan betekenen of gewoon even sparren? Neem gerust contact op, ik denk graag met je mee.</p>
+
+                        <div class="about-cta">
+                            <a href="/contact" class="btn btn-primary">Neem contact op</a>
+                        </div>
+                    </div>
+                    <div class="about-photo about-photo-desktop">
+                        <figure>
+                            <img src="/static/images/DutchOpen2024.jpg" alt="Foto van mijzelf met mijn zoontje bij grasbaanraces">
+                            <figcaption><small>Ik met mijn zoontje bij de grasbaanraces (Dutch Open 2024)</small></figcaption>
+                        </figure>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    {{template "footer" .}}
+</body>
+</html>
+
--- a/templates/partials/benefits.html
+++ b/templates/partials/benefits.html
@ -0,0 +1,43 @@
+{{define "benefits"}}
+        {{/* Pass SectionClass via dict: template "benefits" (dict "Page" . "SectionClass" "section--light") */}}
+        {{ $sectionClass := "section--light" }}
+        {{ with index . "SectionClass" }}{{ $sectionClass = . }}{{ end }}
+        <section id="voordelen" class="section {{$sectionClass}} benefits">
+            <div class="container">
+                <h2><a href="/linux">Waarom Linux kiezen?</a></h2>
+                <div class="benefits-grid">
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">🛡️</div>
+                        <h3>Veilig en betrouwbaar</h3>
+                        <p>Beschermd tegen virussen en zonder storende, onverwachte updates. U houdt de controle over uw computer.</p>
+                    </a>
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">💰</div>
+                        <h3>Helemaal gratis</h3>
+                        <p>Geen licenties of abonnementen nodig. Linux en de meeste programma’s zijn kosteloos.</p>
+                    </a>
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">🔄</div>
+                        <h3>Geschikt voor oudere computers</h3>
+                        <p>Ook een computer die al jaren meegaat kan met Linux weer soepel draaien.</p>
+                    </a>
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">🌱</div>
+                        <h3>Beter voor het milieu</h3>
+                        <p>Door langer met uw computer te doen voorkomt u elektronisch afval (e-waste). Goed voor uw portemonnee en voor de planeet.</p>
+                    </a>
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">🔒</div>
+                        <h3>Uw privacy blijft van uzelf</h3>
+                        <p>Geen verborgen gegevensverzameling of tracking.</p>
+                    </a>
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">⚡</div>
+                        <h3>Sneller werken</h3>
+                        <p>Linux start vlot op en voelt vaak lichter aan dan andere systemen.</p>
+                    </a>
+                </div>
+            </div>
+        </section>
+{{end}}
+
--- a/templates/partials/linux_features.html
+++ b/templates/partials/linux_features.html
@ -0,0 +1,43 @@
+{{define "linux_features"}}
+        {{ $sectionClass := "section--light-green" }}
+        {{ with index . "SectionClass" }}{{ $sectionClass = . }}{{ end }}
+        <section class="section {{$sectionClass}} linux-features">
+            <div class="container">
+                <h2><a href="/linux">Linux in actie</a></h2>
+                <p class="section-subtitle">Zie hoe Linux eruitziet en werkt in de praktijk</p>
+                <div class="features-grid">
+                    <div class="feature-showcase">
+                        <div class="feature-image">
+                            <img src="/static/images/Zorin-17-desktop.webp" alt="Zorin OS 17 Desktop" loading="lazy">
+                            <div class="image-caption">
+                                <small>Bron: <a href="https://www.debugpoint.com/wp-content/uploads/2023/12/Zorin-17-desktop.jpg" target="_blank" rel="noopener">DebugPoint.com</a></small>
+                            </div>
+                        </div>
+                        <h3>Moderne desktopinterface</h3>
+                        <p>Ziet er vertrouwd uit, werkt snel en stabiel. Ideaal voor dagelijks gebruik.</p>
+                    </div>
+                    <div class="feature-showcase">
+                        <div class="feature-image">
+                            <img src="/static/images/LinuxMintCinnamonSoftwareManager.webp" alt="Linux Mint Softwarebeheer" loading="lazy">
+                            <div class="image-caption">
+                                <small>Bron: <a href="https://linuxmint.com" target="_blank" rel="noopener">LinuxMint.com</a></small>
+                            </div>
+                        </div>
+                        <h3>Eenvoudig software installeren</h3>
+                        <p>Duizenden gratis programma’s met één klik via Softwarebeheer.</p>
+                    </div>
+                    <div class="feature-showcase">
+                        <div class="feature-image">
+                            <img src="/static/images/GamingBenchmarkLinuxvsWindows.webp" alt="Gamingprestaties Linux versus Windows" loading="lazy">
+                            <div class="image-caption">
+                                <small>Bron: <a href="https://www.youtube.com/watch?v=4LI-1Zdk-Ys" target="_blank" rel="noopener">Linux vs Windows Gaming Performance</a></small>
+                            </div>
+                        </div>
+                        <h3>Gamingprestaties</h3>
+                        <p>Prima geschikt voor gaming dankzij moderne drivers en optimalisaties.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+{{end}}
+
Author	SHA1	Message	Date
bdnugget	3e3812faef	lgtm	2025-09-05 12:13:23 +02:00
bdnugget	3e4a4636fa	Partials take styling class for section as param	2025-09-05 11:39:14 +02:00
bdnugget	13fe19abda	Getting there, I think	2025-09-03 15:33:02 +02:00
bdnugget	8aa59c6b58	gitignore wiki files	2025-09-03 14:17:26 +02:00
bdnugget	58e46b79c5	Progress so far. Waarom Linux still looks very ugly so WIP	2025-09-03 13:06:02 +02:00
bdnugget	e9816d431d	Commit before this refactoring with partials and stuff gets out of control2	2025-09-03 10:09:53 +02:00
bdnugget	e3ca84a584	Commit before this refactoring with partials and stuff gets out of control	2025-09-03 09:41:50 +02:00
bdnugget	7c45c0af08	CSS cleanup and decrease padding on hero and section a bit	2025-09-02 23:19:31 +02:00
bdnugget	d124561ef9	Change important default env like email to actual existing ones, oops	2025-09-02 21:21:35 +02:00
bdnugget	8c6f9a18b6	Add picture	2025-09-02 21:11:32 +02:00
bdnugget	c9103c29b6	Merge pull request 'Calc dates and add config struct fields' (#2 ) from develop into master Reviewed-on: #2	2025-09-01 12:13:50 +00:00
bdnugget	d5913d5928	Merge branch 'master' into develop	2025-09-01 12:13:40 +00:00
bdnugget	5dc9cc3d71	Calc dates and add config struct fields	2025-09-01 14:09:11 +02:00
bdnugget	e962dd9c1b	Merge pull request 'develop about me section' (#1 ) from develop into master Reviewed-on: #1	2025-09-01 11:57:17 +00:00
bdnugget	8564125edf	About me corrections and CTA button	2025-09-01 13:56:11 +02:00
bdnugget	0e6ddfede4	Add about me section	2025-09-01 13:14:29 +02:00
bdnugget	f4ef9fcbea	Crop top clippy a bit	2025-09-01 11:34:16 +02:00
bdnugget	e66af6ec96	Add Clippy lol	2025-09-01 11:19:37 +02:00
bdnugget	4f9d51aba0	Spelling	2025-09-01 10:13:59 +02:00
bdnugget	a71e6c81f6	cleanup	2025-07-08 23:48:39 +02:00
bdnugget	d222758849	og:image, other SEO and favicons	2025-07-08 23:00:31 +02:00
bdnugget	9e9c0e4b35	Fix sources	2025-07-08 22:52:40 +02:00
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="inxzwh639poeU1X9W8tTQa" x1="7.037" x2="45.033" y1="7.037" y2="45.033" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#05acb3"/><stop offset="1" stop-color="#038387"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQa)" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><linearGradient id="inxzwh639poeU1X9W8tTQb" x1="22.277" x2="31.658" y1="31.726" y2="57.724" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQb)" d="M15.5,38.5h17c1.105,0,2-0.895,2-2v0c0-1.105-0.895-2-2-2h-17c-1.105,0-2,0.895-2,2v0 C13.5,37.605,14.395,38.5,15.5,38.5z"/><linearGradient id="inxzwh639poeU1X9W8tTQc" x1="30.056" x2="40.896" y1="16.127" y2="46.17" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQc)" d="M34,16c-3-1-3.5,0.5-4,2.5c-0.618,2.473-1,7-1,8.5s1,2,2,0.5s4-6.5,4.5-8S35.956,16.652,34,16 z"/><linearGradient id="inxzwh639poeU1X9W8tTQd" x1="28.561" x2="31.626" y1="29.85" y2="38.346" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQd)" d="M27.996,30.447c-0.642,0.833-0.433,2.571,1.067,2.589c0.938,0.011,1.584-0.887,1.509-2.029 C30.518,30.184,29.104,29.01,27.996,30.447z"/><linearGradient id="inxzwh639poeU1X9W8tTQe" x1="17.026" x2="40.638" y1="8.349" y2="73.788" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0f0f0"/><stop offset="1" stop-color="#fff"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQe)" d="M26,12c-3.056-5.239-8.399-4.379-13.366-0.748c-1.265,0.924-1.651,2.649-0.91,4.029 l8.91,16.606c0.49,0.913,1.596,1.3,2.549,0.892h0c1.006-0.431,1.479-1.591,1.059-2.602c-0.819-1.975-2.095-5.059-2.742-6.677 C23.5,22.5,29.846,18.592,26,12z M21.352,19.609c-0.515,0.303-1.907,0.452-3.239-2.812c-1.213-2.971-0.849-4.335-0.212-4.547 s1.971,0.485,3.244,3.001C22.418,17.767,21.868,19.306,21.352,19.609z"/></svg>