Getting there, I think

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

main.go

@@ -9,6 +9,7 @@ import (
 	"log"
 	"net/http"
 	"os"
+	"path/filepath"
 	"strings"
 	"sync"
 	"time"
@@ -102,6 +103,12 @@ func NewServer() *Server {
 	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 +116,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 +230,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 +260,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 +368,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 {
@@ -1067,9 +1250,7 @@ footer {
         gap: 1.5rem;
     }
     
-    .benefit-card {
-        padding: 1.5rem;
-    }
+
     
     .eol-content {
         grid-template-columns: 1fr;
@@ -1081,9 +1262,7 @@ footer {
         gap: 1.5rem;
     }
     
-    .distro-card {
-        padding: 1.5rem;
-    }
+
     
     .contact-grid {
         grid-template-columns: 1fr;
@@ -1112,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 */
@@ -1159,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;
     }
     
@@ -1196,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 */
@@ -1277,7 +1462,7 @@ footer {
         font-size: 1rem;
     }
     
-    .benefit-card, .service-card, .distro-card, .cta-benefit {
+    .card {
         padding: 1rem;
     }
     
@@ -1299,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,137 @@
+<!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>Heldere prijzen en duidelijke afspraken. Tarief: €20 per half uur.</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-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 style="margin-top:1.5rem">
+                    <p><strong>Daarnaast</strong> geef ik geregeld gratis informatiebijeenkomsten en help ik soms bij Repair Cafés met installaties, zonder kosten.</p>
+                </div>
+            </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>
+        </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" .}}
 
-        <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>
-                
-                <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>
+        {{template "linux_features" .}}
 
-        <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,131 @@
+<!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 veilig en snel besturingssysteem dat uw huidige computer nieuw leven kan geven, zonder licentiekosten. Hieronder vindt u een korte beslishulp 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" .}}
+
+        <section class="section section--light distros">
+            <div class="container">
+                <h2>Welke Linux past bij u?</h2>
+                <p class="section-subtitle">Een paar goede keuzes met elk een duidelijk profiel.</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>Windows-achtig, stabiel, vertrouwd voor overstappers.</p>
+                    </div>
+                    <div class="distro-tile">
+                        <img src="/static/images/ubuntu.png" alt="Ubuntu" class="distro-tile__img">
+                        <h3>Ubuntu LTS</h3>
+                        <p>Populair, langetermijnupdates, breed inzetbaar.</p>
+                    </div>
+                    <div class="distro-tile">
+                        <img src="/static/images/popos.svg" alt="Pop!_OS" class="distro-tile__img">
+                        <h3>Pop!_OS</h3>
+                        <p>Gaming-geoptimaliseerd, uitstekende NVIDIA-ondersteuning.</p>
+                    </div>
+                    <div class="distro-tile">
+                        <img src="/static/images/fedora.png" alt="Fedora" class="distro-tile__img">
+                        <h3>Fedora</h3>
+                        <p>Nieuwste technologie, Red Hat-basis, ontwikkelaarstools.</p>
+                    </div>
+                    <div class="distro-tile">
+                        <img src="/static/images/elementary.png" alt="Elementary OS" class="distro-tile__img">
+                        <h3>Elementary OS</h3>
+                        <p>Elegant, eenvoudig, design-gericht.</p>
+                    </div>
+                    <div class="distro-tile">
+                        <img src="/static/images/garuda.svg" alt="Garuda Linux" class="distro-tile__img">
+                        <h3>Garuda Linux</h3>
+                        <p>Arch-basis, snelle prestaties, modern.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        {{template "linux_features" .}}
+
+        <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,20 +44,20 @@
     <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">
@@ -66,7 +66,7 @@
                         <!-- Photo appears here on mobile after first paragraph -->
                         <div class="about-photo about-photo-mobile">
                             <figure>
-                                <img src="/static/DutchOpen2024.jpg" alt="Foto van mijzelf met mijn zoontje bij grasbaanraces">
+                                <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>
@@ -85,7 +85,7 @@
                     </div>
                     <div class="about-photo about-photo-desktop">
                         <figure>
-                            <img src="/static/DutchOpen2024.jpg" alt="Foto van mijzelf met mijn zoontje bij grasbaanraces">
+                            <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>

templates/partials/benefits.html

@@ -0,0 +1,40 @@
+{{define "benefits"}}
+        <section id="voordelen" class="section {{if eq .CurrentPage "linux"}}section--light-green{{else}}section--light{{end}} 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>Linux is van nature veiliger dan Windows. Minder virussen, geen gedwongen updates en volledige controle over uw systeem.</p>
+                    </a>
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">💰</div>
+                        <h3>Volledig gratis</h3>
+                        <p>Geen licentiekosten, geen abonnementen. Linux en alle software zijn gratis en open source.</p>
+                    </a>
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">🔄</div>
+                        <h3>Oude hardware hergebruiken</h3>
+                        <p>Uw computer van 10 jaar oud? Linux maakt hem weer snel! Geen nieuwe hardware nodig.</p>
+                    </a>
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">🌱</div>
+                        <h3>Milieuvriendelijk</h3>
+                        <p>Stop e-waste! Door Linux te gebruiken houdt u uw apparaten langer werkend en uit de afvalberg.</p>
+                    </a>
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">🔒</div>
+                        <h3>Privacybescherming</h3>
+                        <p>Geen tracking en geen verborgen gegevensverzameling. Uw privacy blijft van uzelf.</p>
+                    </a>
+                    <a class="card card--benefit card-link" href="/linux">
+                        <div class="card__icon">⚡</div>
+                        <h3>Snel en efficiënt</h3>
+                        <p>Linux gebruikt minder systeembronnen, waardoor uw computer sneller opstart en soepeler werkt.</p>
+                    </a>
+                </div>
+            </div>
+        </section>
+{{end}}
+

templates/partials/linux_features.html

@@ -0,0 +1,41 @@
+{{define "linux_features"}}
+        <section class="section section--light-green 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}}
+