lgtm

.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/

docker-compose.yml

@@ -8,8 +8,8 @@ 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

main.go

@@ -9,6 +9,7 @@ import (
 	"log"
 	"net/http"
 	"os"
+	"path/filepath"
 	"strings"
 	"sync"
 	"time"
@@ -82,8 +83,8 @@ 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"),
@@ -97,11 +98,35 @@ func NewServer() *Server {
 		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,
@@ -109,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{
@@ -208,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! We 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)
 }
@@ -238,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)
@@ -346,23 +386,57 @@ func (s *Server) aboutHandler(w http.ResponseWriter, r *http.Request) {
 	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)
+	})
+}

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;
@@ -226,6 +226,98 @@ p {
     }
 }
 
+/* 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;
@@ -269,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;
@@ -287,34 +433,8 @@ 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;
@@ -429,10 +549,6 @@ p {
 }
 
 /* Distributions Section */
-.distros {
-    padding: 5rem 0;
-    background: #f9fafb;
-}
 
 .distros h2 {
     text-align: center;
@@ -458,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;
@@ -588,10 +674,6 @@ p {
 }
 
 /* Services Section */
-.services {
-    padding: 5rem 0;
-    background: #fff;
-}
 
 .services h2 {
     text-align: center;
@@ -605,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;
@@ -703,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;
@@ -726,7 +847,6 @@ p {
 
 /* CTA Section */
 .cta {
-    padding: 5rem 0;
     background: linear-gradient(135deg, #059669 0%, #047857 100%);
     color: white;
     text-align: center;
@@ -744,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;
@@ -881,10 +1032,6 @@ p {
     min-height: 120px;
 }
 
-.contact-cta {
-    padding: 4rem 0;
-    background: #f0fdf4;
-}
 
 .contact-cta h2 {
     text-align: center;
@@ -898,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 */
@@ -957,8 +1140,8 @@ footer {
 }
 
 /* About page */
-.about {
-    padding: 5rem 0;
+.section {
+    padding: 3.5rem 0;
 }
 
 .about-grid {
@@ -985,10 +1168,28 @@ footer {
     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 */
@@ -1049,9 +1250,7 @@ footer {
         gap: 1.5rem;
     }
     
-    .benefit-card {
-        padding: 1.5rem;
-    }
+
     
     .eol-content {
         grid-template-columns: 1fr;
@@ -1063,9 +1262,7 @@ footer {
         gap: 1.5rem;
     }
     
-    .distro-card {
-        padding: 1.5rem;
-    }
+
     
     .contact-grid {
         grid-template-columns: 1fr;
@@ -1094,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 */
@@ -1141,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;
     }
     
@@ -1178,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 */
@@ -1259,7 +1462,7 @@ footer {
         font-size: 1rem;
     }
     
-    .benefit-card, .service-card, .distro-card, .cta-benefit {
+    .card {
         padding: 1rem;
     }
     
@@ -1281,9 +1484,7 @@ footer {
     }
 }
 
-.benefit-card,
-.service-card,
-.cta-benefit {
+.card {
     animation: fadeInUp 0.6s ease-out;
 }
 

static/icons/manifest.json

@@ -8,12 +8,12 @@
     "theme_color": "#059669",
     "icons": [
         {
-            "src": "/static/android-chrome-192x192.png",
+            "src": "/static/images/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/static/android-chrome-512x512.png",
+            "src": "/static/images/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }

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>

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>

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>

templates/contact.html

@@ -15,7 +15,7 @@
     <!-- 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/TuxAinrom.webp">
+    <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">
@@ -26,15 +26,15 @@
     <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/TuxAinrom.webp">
+    <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/favicon.ico">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
-    <link rel="manifest" href="/static/manifest.json">
+    <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">
@@ -44,25 +44,27 @@
     <link rel="canonical" href="https://{{.Domain}}/contact">
     
     <!-- Preload Critical Resources -->
-    <link rel="preload" href="/static/style.css" as="style">
+    <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/style.css">
+    <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>
+                <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">
@@ -154,7 +156,7 @@
                             
                             <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>
@@ -164,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>

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>
+
+

templates/footer.html

@@ -20,7 +20,7 @@
                     <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>

templates/header.html

@@ -4,15 +4,14 @@
             <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>
@@ -21,9 +20,8 @@
                 </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>

templates/index.html

@@ -11,14 +11,12 @@
     <meta name="author" content="{{.CompanyName}}">
     <meta name="robots" content="index, follow">
     <meta name="language" content="nl">
-    <meta name="revisit-after" content="7 days">
-    <meta name="distribution" content="global">
-    <meta name="rating" content="general">
+    
     
     <!-- 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/TuxAinrom.webp">
+    <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">
@@ -29,15 +27,15 @@
     <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/TuxAinrom.webp">
+    <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/favicon.ico">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
-    <link rel="manifest" href="/static/manifest.json">
+    <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">
@@ -47,12 +45,14 @@
     <link rel="canonical" href="https://{{.Domain}}/">
     
     <!-- Preload Critical Resources -->
-    <link rel="preload" href="/static/style.css" as="style">
-    <link rel="preload" href="/static/TuxAinrom.webp" as="image">
+    <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/style.css">
+    <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 -->
@@ -110,51 +110,15 @@
             </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 en betrouwbaar</h3>
-                        <p>Linux is van nature veiliger dan Windows. Minder virussen, geen gedwongen updates en volledige controle over uw systeem.</p>
-                    </div>
-                    <div class="benefit-card">
-                        <div class="benefit-icon">💰</div>
-                        <h3>Volledig gratis</h3>
-                        <p>Geen licentiekosten, geen abonnementen. Linux en alle software zijn gratis en open source.</p>
-                    </div>
-                    <div class="benefit-card">
-                        <div class="benefit-icon">🔄</div>
-                        <h3>Oude hardware hergebruiken</h3>
-                        <p>Uw computer van 10 jaar oud? Linux maakt hem weer snel! Geen nieuwe hardware nodig.</p>
-                    </div>
-                    <div class="benefit-card">
-                        <div class="benefit-icon">🌱</div>
-                        <h3>Milieuvriendelijk</h3>
-                        <p>Stop e-waste! Door Linux te gebruiken houdt u uw apparaten langer werkend en uit de afvalberg.</p>
-                    </div>
-                    <div class="benefit-card">
-                        <div class="benefit-icon">🔒</div>
-                        <h3>Privacybescherming</h3>
-                        <p>Geen tracking en geen verborgen gegevensverzameling. Uw privacy blijft van uzelf.</p>
-                    </div>
-                    <div class="benefit-card">
-                        <div class="benefit-icon">⚡</div>
-                        <h3>Snel en efficiënt</h3>
-                        <p>Linux gebruikt minder systeembronnen, waardoor uw computer sneller opstart en soepeler werkt.</p>
-                    </div>
-                </div>
-            </div>
-        </section>
+        {{template "benefits" (dict "Page" . "SectionClass" "section--light") }}
 
-        <section id="windows10-eol" class="windows-eol">
+        <section id="windows10-eol" class="section windows-eol">
             <div class="container">
                 <h2>Windows 10-ondersteuning eindigt</h2>
                 <div class="eol-content">
                     <div class="eol-main">
                         <div class="eol-clippy-image">
-                            <img src="/static/clippy.png" alt="Clippy advising to use Linux">
+                            <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>
@@ -188,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>
+                <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">
@@ -210,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">
@@ -231,9 +209,9 @@
                             <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>
@@ -250,9 +228,9 @@
                             <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">
@@ -269,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">
@@ -290,7 +268,7 @@
                         <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">
@@ -320,73 +298,33 @@
             </div>
         </section>
 
-        <section id="diensten" class="services">
+        <section id="diensten" class="section section--light services">
             <div class="container">
-                <h2>Mijn diensten</h2>
+                <h2><a href="/diensten">Mijn diensten</a></h2>
                 <div class="services-grid">
-                    <div class="service-card">
+                    <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>
-                    </div>
-                    <div class="service-card">
+                    </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>
-                    <div class="service-card">
-                        <h3>Datamigratie</h3>
-                        <p>Veilige overdracht van al uw bestanden, foto's en documenten van Windows naar Linux.</p>
-                    </div>
-                    <div class="service-card">
+                    <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>
-                    </div>
+                    </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>
+        {{template "linux_features" (dict "Page" . "SectionClass" "section--light-green") }}
 
-                <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 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>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 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 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>Gamingprestaties</h3>
-                        <p>Linux kan vaak betere gamingprestaties leveren dan Windows, dankzij minder overhead en optimalisaties voor moderne games.</p>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <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 - ik help u graag.</p>

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>
+
+

templates/over-mij.html

@@ -30,11 +30,11 @@
     <meta name="twitter:image:alt" content="{{.AboutName}} - Linux op Het Hogeland">
     
     <!-- Favicon Links -->
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
-    <link rel="manifest" href="/static/manifest.json">
+    <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">
@@ -44,25 +44,33 @@
     <link rel="canonical" href="https://{{.Domain}}/over-mij">
     
     <!-- CSS and Fonts -->
-    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
     {{template "header" .}}
 
     <main>
-        <section class="contact-hero">
+        <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="about">
+        <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>
@@ -75,10 +83,10 @@
                             <a href="/contact" class="btn btn-primary">Neem contact op</a>
                         </div>
                     </div>
-                    <div class="about-photo">
+                    <div class="about-photo about-photo-desktop">
                         <figure>
-                            <img src="/static/TuxAinrom.webp" alt="Foto van mijzelf">
-                            <figcaption><small>{{.AboutName}}</small></figcaption>
+                            <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>

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}}
+

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}}
+