Merge pull request 'develop' (#3 ) from develop into master

Big content changes and get rid of single page garbage Reviewed-on: #3
lgtm
2025-09-05 10:16:30 +00:00 · 2025-09-05 12:13:23 +02:00 · 2025-09-05 11:39:14 +02:00 · 2025-09-03 15:33:02 +02:00 · 2025-09-03 14:17:26 +02:00 · 2025-09-03 13:06:02 +02:00
42 changed files with 3618 additions and 1523 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,43 @@
+# Git
+.git
+.gitignore
+
+# Documentation
+README.md
+*.md
+
+# Build artifacts
+main
+*.exe
+*.dll
+*.so
+*.dylib
+
+# Test binary, built with `go test -c`
+*.test
+
+# Output of the go coverage tool
+*.out
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+
+# Temporary files
+tmp/
+temp/
+
+# Docker files (not needed in container)
+Dockerfile*
+docker-compose*.yml
+.dockerignore 
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,29 @@
+# Binaries
+linuxservice
+*.exe
+*.dll
+*.so
+*.dylib
+
+# Build directories
+/bin/
+/build/
+/dist/
+
+# Logs and caches
+*.log
+*.cache
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Editor/project files
+.vscode/
+.idea/
+
+# Go
+*.test
+coverage.out
+
+/wiki/
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@ -0,0 +1,187 @@
+# Coolify Deployment Guide
+
+This guide explains how to deploy the Linux Service website to your self-hosted Coolify instance with automatic updates from your Gitea repository.
+
+## Prerequisites
+
+- Coolify installed and running
+- Access to your Gitea instance (gitea.boner.be)
+- Domain name configured for your service
+
+## Environment Variables
+
+The application supports the following environment variables:
+
+| Variable | Default Value | Description |
+|----------|---------------|-------------|
+| `PORT` | `8080` | Port the application listens on |
+| `COMPANY_NAME` | `Hogeland Linux` | Company name displayed on the website |
+| `KVK` | `12345678` | KVK number for contact information |
+| `EMAIL` | `info@hogelandlinux.nl` | Contact email address |
+| `PHONE` | `+31 6 12345678` | Contact phone number |
+| `STREET` | `Voorstraat 123` | Street address |
+| `POSTAL_CODE` | `9967 AA` | Postal code |
+| `VILLAGE` | `Eenrum` | Village/city name |
+| `DOMAIN` | `hogelandlinux.nl` | Your website domain (used for SEO and social media meta tags) |
+| `TELEGRAM_BOT_TOKEN` | *(empty)* | Telegram bot token for contact form notifications |
+| `TELEGRAM_CHAT_ID` | *(empty)* | Telegram chat ID where notifications will be sent |
+
+## Telegram Integration Setup (Optional)
+
+The contact form can send notifications to a Telegram chat. To set this up:
+
+### 1. Create a Telegram Bot
+
+1. Message [@BotFather](https://t.me/BotFather) on Telegram
+2. Send `/newbot` command
+3. Follow the instructions to create your bot
+4. Copy the bot token (looks like `123456789:ABCdefGHIjklMNOpqrsTUVwxyz`)
+
+### 2. Get Your Chat ID
+
+1. Add your bot to the chat where you want notifications
+2. Send a message to the bot in that chat
+3. Visit `https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates`
+4. Look for the `chat.id` field in the response
+5. Copy the chat ID (can be positive or negative number)
+
+### 3. Configure Environment Variables
+
+Set the following environment variables in your deployment:
+
+```bash
+TELEGRAM_BOT_TOKEN=123456789:ABCdefGHIjklMNOpqrsTUVwxyz
+TELEGRAM_CHAT_ID=123456789
+```
+
+**Note:** If these variables are not set, the contact form will still work but won't send Telegram notifications.
+
+## Coolify Deployment Steps
+
+### 1. Create New Resource in Coolify
+
+1. Open your Coolify dashboard
+2. Click "New Resource"
+3. Select "Public Repository" or "Private Repository" (if your Gitea repo is private)
+
+### 2. Configure Repository
+
+**Repository URL:** `https://gitea.boner.be/[your-username]/[repository-name]`
+
+**Branch:** `master`
+
+**Build Pack:** `Docker`
+
+### 3. Configure Build Settings
+
+- **Dockerfile Location:** `./Dockerfile`
+- **Build Context:** `.`
+- **Ports:** `8080`
+
+### 4. Set Environment Variables
+
+In the Coolify environment variables section, add:
+
+```
+PORT=8080
+COMPANY_NAME=Hogeland Linux
+KVK=12345678
+EMAIL=info@hogelandlinux.nl
+PHONE=+31 6 12345678
+STREET=Voorstraat 123
+POSTAL_CODE=9967 AA
+VILLAGE=Eenrum
+DOMAIN=hogelandlinux.nl
+TELEGRAM_BOT_TOKEN=your_bot_token_here
+TELEGRAM_CHAT_ID=your_chat_id_here
+```
+
+**Note:** The Telegram variables are optional. If not set, the contact form will work but won't send notifications.
+
+### 5. Configure Domain
+
+- Set your desired domain/subdomain
+- Coolify will automatically handle SSL certificate generation
+
+### 6. Enable Auto-Deploy
+
+1. Go to the "Settings" tab of your application
+2. Enable "Auto Deploy"
+3. Set the branch to `master`
+4. Configure webhook URL in your Gitea repository
+
+### 7. Gitea Webhook Configuration
+
+To enable automatic deployments when you push to master:
+
+1. Go to your repository on gitea.boner.be
+2. Navigate to Settings → Webhooks
+3. Click "Add Webhook" → "Gitea"
+4. Set the Payload URL to your Coolify webhook URL (found in your app settings)
+5. Set Content Type to `application/json`
+6. Select "Just the push event"
+7. Check "Active"
+8. Click "Add Webhook"
+
+## Docker Commands for Local Testing
+
+```bash
+# Build the image
+docker build -t linuxservice .
+
+# Run locally
+docker run -p 8080:8080 \
+  -e COMPANY_NAME="Hogeland Linux" \
+  -e EMAIL="info@hogelandlinux.nl" \
+  linuxservice
+
+# Or use docker-compose
+docker-compose up --build
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Build Fails**: Check that all files (templates/, static/) are committed to your repository
+2. **Port Issues**: Ensure PORT environment variable matches the exposed port
+3. **Template Errors**: Verify that templates directory is included in the Docker image
+
+### Logs
+
+Check application logs in Coolify dashboard under the "Logs" tab.
+
+### Health Check
+
+The application should respond to `GET /` with the homepage. You can check this endpoint to verify the deployment.
+
+## File Structure
+
+```
+linuxservice/
+├── Dockerfile              # Container configuration
+├── docker-compose.yml      # Local development
+├── .dockerignore           # Docker build optimization
+├── main.go                 # Go application
+├── go.mod                  # Go module definition
+├── static/                 # Static assets (CSS, images, etc.)
+│   └── style.css
+├── templates/              # HTML templates
+│   ├── index.html
+│   └── contact.html
+└── DEPLOYMENT.md           # This file
+```
+
+## Performance Considerations
+
+- The Docker image uses multi-stage builds for smaller size
+- Static files are served directly by the Go application
+- No external dependencies required
+- Minimal resource usage (suitable for small VPS instances)
+
+## Security Notes
+
+- The application runs as a non-root user in the container
+- Only port 8080 is exposed
+- No sensitive data is stored in the application
+- Environment variables should be used for configuration 
--- a/38
+++ b/38
@ -0,0 +1,38 @@
+# Build stage
+FROM golang:1.24.4-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy go mod files
+COPY go.mod go.sum* ./
+
+# Download dependencies
+RUN go mod download
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o main .
+
+# Final stage
+FROM alpine:latest
+
+# Install ca-certificates for HTTPS requests
+RUN apk --no-cache add ca-certificates
+
+WORKDIR /root/
+
+# Copy the binary from builder stage
+COPY --from=builder /app/main .
+
+# Copy static files and templates
+COPY --from=builder /app/static ./static
+COPY --from=builder /app/templates ./templates
+
+# Expose port
+EXPOSE 8080
+
+# Command to run
+CMD ["./main"] 
--- a/README.md
+++ b/README.md
@ -1,29 +1,31 @@
-# Hogeland Linux - Linux Migratie Service Website
+# Hogeland Linux - Linux-migratieservice-website

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

 ## Overzicht

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

-## Technische Details
+## Technische details

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

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

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

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

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

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

-## Aanpassing Contactgegevens
+## Aanpassen van contactgegevens

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

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

 ## Pagina's

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

-### Contact Pagina (/contact)
+### Contactpagina (/contact)
+
 - Contactformulier
 - Bedrijfsinformatie
 - Openingstijden
@ -76,52 +81,61 @@ Phone:       "+31 6 12345678",        // Uw telefoonnummer
 ## Styling

 Het design is:
- **Minimalistisch**: Schoon en overzichtelijk
- **Toegankelijk**: Geschikt voor alle leeftijden
- **Responsive**: Werkt op desktop, tablet en mobiel
- **Professioneel**: Vertrouwen opwekkend voor bedrijven
- **Eco-vriendelijk**: Groene kleurenpalet die duurzaamheid benadrukt
- **Tech-georiënteerd**: Linux terminal demo en visuele mockups

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

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

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

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

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

 ## Deployment

-Voor productie gebruik:
-1. Vervang alle placeholder contactgegevens
+Dit project bevat een Dockerfile voor eenvoudige deployment met bijvoorbeeld Coolify.
+Zie voor instructies [DEPLOYMENT.md](DEPLOYMENT.md).
+
+Voor productiegebruik:
+
+1. Vervang alle placeholdercontactgegevens
 2. Configureer een reverse proxy (nginx/Apache)
-3. Gebruik HTTPS certificaten
-4. Overweeg een proper database voor contactformulieren
+3. Gebruik HTTPS-certificaten
+4. Overweeg een degelijke database voor contactformulieren

 ## Ondersteuning

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

 ## Licentie

-Open source - voel je vrij om aan te passen voor eigen gebruik. 
+Open source - voel u vrij om aan te passen voor eigen gebruik.
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,23 @@
+version: '3.8'
+
+services:
+  linuxservice:
+    build: .
+    ports:
+      - "8080:8080"
+    environment:
+      - PORT=8080
+      - COMPANY_NAME=Hogeland Linux
+      - KVK=91927935
+      - EMAIL=info@chemistry.software
+      - PHONE=+31 6 12345678
+      - STREET=Voorstraat 123
+      - POSTAL_CODE=9967 AA
+      - VILLAGE=Eenrum
+      - DOMAIN=hogelandlinux.nl         # Set your actual domain here
+      - TELEGRAM_BOT_TOKEN=  # Set your Telegram bot token here
+      - TELEGRAM_CHAT_ID=    # Set your Telegram chat ID here
+      - ABOUT_NAME=Bdnugget
+      - BIRTH_DATE=1990-01-01
+      - SON_BIRTH_DATE=2022-01-01
+    restart: unless-stopped 
--- a/main.go
+++ b/main.go
@ -1,59 +1,442 @@
 package main

 import (
+	"bytes"
+	"encoding/json"
+	"fmt"
 	"html/template"
+	"io"
 	"log"
 	"net/http"
+	"os"
+	"path/filepath"
+	"strings"
+	"sync"
+	"time"
 )

+// Configuration holds all website configuration
+type Config struct {
+	CompanyName      string
+	KVK              string
+	Email            string
+	Phone            string
+	Street           string
+	PostalCode       string
+	Village          string
+	Domain           string
+	Port             string
+	TelegramBotToken string
+	TelegramChatID   string
+	AboutName        string
+	BirthDate        string
+	SonBirthDate     string
+}
+
+// PageData holds data for template rendering
 type PageData struct {
-	CompanyName string
-	Title       string
-	KVK         string
-	Email       string
-	Phone       string
+	Config
+	Title          string
+	CurrentPage    string
+	CurrentYear    int
+	ErrorMessage   string
+	SuccessMessage string
+	FormData       ContactForm
+	AboutName      string
+	AgeYears       int
+	SonAgeYears    int
+}
+
+// ContactForm holds form data
+type ContactForm struct {
+	Name     string
+	Email    string
+	Phone    string
+	Computer string
+	Service  string
+	Message  string
+}
+
+// Server holds the application state
+type Server struct {
+	config    Config
+	templates *template.Template
+}
+
+// Rate limiting
+var (
+	mu                 sync.Mutex
+	lastSubmissionTime = make(map[string]time.Time)
+	submissionCooldown = 5 * time.Minute
+)
+
+// getEnv returns environment variable or default value
+func getEnv(key, defaultValue string) string {
+	if value := os.Getenv(key); value != "" {
+		return value
+	}
+	return defaultValue
+}
+
+// NewServer creates a new server instance
+func NewServer() *Server {
+	// Configuration - can be overridden with environment variables
+	config := Config{
+		CompanyName:      getEnv("COMPANY_NAME", "Hogeland Linux"),
+		KVK:              getEnv("KVK", "91927935"), // Replace with actual KVK number
+		Email:            getEnv("EMAIL", "info@chemistry.software"),
+		Phone:            getEnv("PHONE", "+31 6 12345678"),
+		Street:           getEnv("STREET", "Voorstraat 123"),
+		PostalCode:       getEnv("POSTAL_CODE", "9967 AA"),
+		Village:          getEnv("VILLAGE", "Eenrum"),
+		Domain:           getEnv("DOMAIN", "hogelandlinux.nl"), // Replace with actual domain
+		Port:             ":" + getEnv("PORT", "8080"),
+		TelegramBotToken: getEnv("TELEGRAM_BOT_TOKEN", ""), // Set this in environment
+		TelegramChatID:   getEnv("TELEGRAM_CHAT_ID", ""),   // Set this in environment
+		AboutName:        getEnv("ABOUT_NAME", "Bdnugget"),
+		BirthDate:        getEnv("BIRTH_DATE", "1990-01-01"),
+		SonBirthDate:     getEnv("SON_BIRTH_DATE", "2022-01-01"),
+	}
+
+	// Template Funcs
+	funcs := template.FuncMap{
+		"dict": func(values ...interface{}) (map[string]interface{}, error) {
+			if len(values)%2 != 0 {
+				return nil, fmt.Errorf("dict expects even number of args")
+			}
+			m := make(map[string]interface{}, len(values)/2)
+			for i := 0; i < len(values); i += 2 {
+				k, ok := values[i].(string)
+				if !ok {
+					return nil, fmt.Errorf("dict keys must be strings")
+				}
+				m[k] = values[i+1]
+			}
+			return m, nil
+		},
+	}
+
+	// Parse templates with error handling
+	templates, err := template.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,
+		templates: templates,
+	}
+}
+
+// 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{
+		Config:      s.config,
+		Title:       title,
+		CurrentPage: currentPage,
+		CurrentYear: time.Now().Year(),
+	}
+}
+
+// renderTemplate renders a template with error handling
+func (s *Server) renderTemplate(w http.ResponseWriter, templateName string, data PageData) {
+	if err := s.templates.ExecuteTemplate(w, templateName, data); err != nil {
+		log.Printf("Template execution error: %v", err)
+		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
+	}
+}
+
+// homeHandler handles the home page
+func (s *Server) homeHandler(w http.ResponseWriter, r *http.Request) {
+	data := s.createPageData("Linux-migratieservice - uw computer nieuw leven geven", "home")
+	s.renderTemplate(w, "index.html", data)
+}
+
+// contactHandler handles the contact page
+func (s *Server) contactHandler(w http.ResponseWriter, r *http.Request) {
+	data := s.createPageData("Contact - "+s.config.CompanyName, "contact")
+
+	if r.Method == "POST" {
+		s.handleContactForm(w, r, &data)
+		return
+	}
+
+	s.renderTemplate(w, "contact.html", data)
+}
+
+// handleContactForm processes the contact form submission
+func (s *Server) handleContactForm(w http.ResponseWriter, r *http.Request, data *PageData) {
+	// Get client IP for rate limiting
+	ip := getClientIP(r)
+
+	// Check rate limiting
+	mu.Lock()
+	if lastTime, exists := lastSubmissionTime[ip]; exists {
+		if time.Since(lastTime) < submissionCooldown {
+			mu.Unlock()
+			data.ErrorMessage = "U hebt recent al een bericht verstuurd. Probeer het over een paar minuten opnieuw."
+			s.renderTemplate(w, "contact.html", *data)
+			return
+		}
+	}
+	mu.Unlock()
+
+	// Parse form data
+	err := r.ParseForm()
+	if err != nil {
+		log.Printf("Error parsing form: %v", err)
+		data.ErrorMessage = "Er is een fout opgetreden bij het verwerken van uw bericht."
+		s.renderTemplate(w, "contact.html", *data)
+		return
+	}
+
+	// Extract form data
+	form := ContactForm{
+		Name:     strings.TrimSpace(r.FormValue("name")),
+		Email:    strings.TrimSpace(r.FormValue("email")),
+		Phone:    strings.TrimSpace(r.FormValue("phone")),
+		Computer: strings.TrimSpace(r.FormValue("computer")),
+		Service:  strings.TrimSpace(r.FormValue("service")),
+		Message:  strings.TrimSpace(r.FormValue("message")),
+	}
+
+	// Store form data for re-rendering on error
+	data.FormData = form
+
+	// Validate required fields
+	if form.Name == "" || form.Email == "" || form.Message == "" {
+		data.ErrorMessage = "Vul alle verplichte velden in (naam, e-mail, bericht)."
+		s.renderTemplate(w, "contact.html", *data)
+		return
+	}
+
+	// Send to Telegram if configured
+	if s.config.TelegramBotToken != "" && s.config.TelegramChatID != "" {
+		err := s.sendToTelegram(form)
+		if err != nil {
+			log.Printf("Error sending message to Telegram: %v", err)
+			data.ErrorMessage = "Er is een fout opgetreden bij het versturen van uw bericht. Probeer het later opnieuw."
+			s.renderTemplate(w, "contact.html", *data)
+			return
+		}
+	}
+
+	// Update last submission time on success
+	mu.Lock()
+	lastSubmissionTime[ip] = time.Now()
+	mu.Unlock()
+
+	// On success, render success message
+	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)
+}
+
+// sendToTelegram sends the contact form data to Telegram
+func (s *Server) sendToTelegram(form ContactForm) error {
+	// Format message
+	message := fmt.Sprintf(
+		"🔔 Nieuw contactformulier\n\n"+
+			"👤 *Naam:* %s\n"+
+			"📧 *Email:* %s\n"+
+			"📞 *Telefoon:* %s\n"+
+			"💻 *Computer:* %s\n"+
+			"🛠️ *Service:* %s\n\n"+
+			"💬 *Bericht:*\n%s",
+		escapeMarkdown(form.Name),
+		escapeMarkdown(form.Email),
+		escapeMarkdown(form.Phone),
+		escapeMarkdown(form.Computer),
+		escapeMarkdown(form.Service),
+		escapeMarkdown(form.Message),
+	)
+
+	// Prepare Telegram API request
+	telegramURL := fmt.Sprintf("https://api.telegram.org/bot%s/sendMessage", s.config.TelegramBotToken)
+
+	payload := map[string]interface{}{
+		"chat_id":    s.config.TelegramChatID,
+		"text":       message,
+		"parse_mode": "MarkdownV2",
+	}
+
+	jsonData, err := json.Marshal(payload)
+	if err != nil {
+		return fmt.Errorf("failed to marshal JSON: %v", err)
+	}
+
+	// Send HTTP request
+	resp, err := http.Post(telegramURL, "application/json", bytes.NewBuffer(jsonData))
+	if err != nil {
+		return fmt.Errorf("failed to send HTTP request: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		bodyBytes, _ := io.ReadAll(resp.Body)
+		return fmt.Errorf("Telegram API error: %s, Status Code: %d", string(bodyBytes), resp.StatusCode)
+	}
+
+	return nil
+}
+
+// escapeMarkdown escapes special characters for Telegram Markdown
+func escapeMarkdown(text string) string {
+	if text == "" {
+		return "N/A"
+	}
+	// Escape special Markdown characters
+	replacer := strings.NewReplacer(
+		"*", "\\*",
+		"_", "\\_",
+		"`", "\\`",
+		"[", "\\[",
+		"]", "\\]",
+		"(", "\\(",
+		")", "\\)",
+		"~", "\\~",
+		">", "\\>",
+		"#", "\\#",
+		"+", "\\+",
+		"-", "\\-",
+		"=", "\\=",
+		"|", "\\|",
+		"{", "\\{",
+		"}", "\\}",
+		".", "\\.",
+		"!", "\\!",
+	)
+	return replacer.Replace(text)
+}
+
+// getClientIP extracts the client IP address from the request
+func getClientIP(r *http.Request) string {
+	// Check X-Forwarded-For header first (for reverse proxies)
+	if xff := r.Header.Get("X-Forwarded-For"); xff != "" {
+		// X-Forwarded-For can contain multiple IPs, take the first one
+		if idx := strings.Index(xff, ","); idx != -1 {
+			return strings.TrimSpace(xff[:idx])
+		}
+		return strings.TrimSpace(xff)
+	}
+
+	// Check X-Real-IP header
+	if xri := r.Header.Get("X-Real-IP"); xri != "" {
+		return strings.TrimSpace(xri)
+	}
+
+	// Fall back to RemoteAddr
+	if idx := strings.LastIndex(r.RemoteAddr, ":"); idx != -1 {
+		return r.RemoteAddr[:idx]
+	}
+	return r.RemoteAddr
+}
+
+// healthHandler provides a simple health check endpoint
+func (s *Server) healthHandler(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusOK)
+	w.Write([]byte(`{"status":"healthy","service":"linuxservice"}`))
+}
+
+// aboutHandler handles the About Me page
+func (s *Server) aboutHandler(w http.ResponseWriter, r *http.Request) {
+	data := s.createPageData("Over mij - "+s.config.CompanyName, "about")
+	// Populate dynamic About fields from config/env
+	data.AboutName = s.config.AboutName
+	now := time.Now()
+	// Parse BirthDate (ISO YYYY-MM-DD)
+	if t, err := time.Parse("2006-01-02", s.config.BirthDate); err == nil {
+		age := now.Year() - t.Year()
+		if now.Month() < t.Month() || (now.Month() == t.Month() && now.Day() < t.Day()) {
+			age--
+		}
+		data.AgeYears = age
+	}
+	// Parse SonBirthDate (ISO YYYY-MM-DD)
+	if t, err := time.Parse("2006-01-02", s.config.SonBirthDate); err == nil {
+		sonAge := now.Year() - t.Year()
+		if now.Month() < t.Month() || (now.Month() == t.Month() && now.Day() < t.Day()) {
+			sonAge--
+		}
+		data.SonAgeYears = sonAge
+	}
+
+	s.renderTemplate(w, "over-mij.html", data)
+}
+
+// dienstenHandler handles the services page
+func (s *Server) dienstenHandler(w http.ResponseWriter, r *http.Request) {
+	data := s.createPageData("Diensten en tarieven - "+s.config.CompanyName, "diensten")
+	s.renderTemplate(w, "diensten.html", data)
+}
+
+// linuxHandler handles the Linux page (distributions + features)
+func (s *Server) linuxHandler(w http.ResponseWriter, r *http.Request) {
+	data := s.createPageData("Linux distributies en functies - "+s.config.CompanyName, "linux")
+	s.renderTemplate(w, "linux.html", data)
+}
+
+// setupRoutes configures all HTTP routes
+func (s *Server) setupRoutes() {
+	// Static files
+	fs := http.FileServer(http.Dir("static/"))
+	http.Handle("/static/", http.StripPrefix("/static/", 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() {
-	// Parse templates
-	tmpl := template.Must(template.ParseGlob("templates/*.html"))
+	server := NewServer()
+	server.setupRoutes()
+	// Start background cleanup for rate limiting map
+	go cleanupOldSubmissions()

-	// Static files
-	fs := http.FileServer(http.Dir("static/"))
-	http.Handle("/static/", http.StripPrefix("/static/", fs))
-
-	// Home page
-	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
-		data := PageData{
-			CompanyName: "Hogeland Linux",
-			Title:       "Linux Migratie Service - Uw Computer Nieuw Leven Geven",
-			KVK:         "12345678", // Replace with actual KVK number
-			Email:       "info@hogelandlinux.nl",
-			Phone:       "+31 6 12345678",
-		}
-
-		if err := tmpl.ExecuteTemplate(w, "index.html", data); err != nil {
-			log.Printf("Template execution error: %v", err)
-			http.Error(w, "Internal Server Error", http.StatusInternalServerError)
-		}
-	})
-
-	// Contact page
-	http.HandleFunc("/contact", func(w http.ResponseWriter, r *http.Request) {
-		data := PageData{
-			CompanyName: "Hogeland Linux",
-			Title:       "Contact - Hogeland Linux",
-			KVK:         "12345678", // Replace with actual KVK number
-			Email:       "info@hogelandlinux.nl",
-			Phone:       "+31 6 12345678",
-		}
-
-		if err := tmpl.ExecuteTemplate(w, "contact.html", data); err != nil {
-			log.Printf("Template execution error: %v", err)
-			http.Error(w, "Internal Server Error", http.StatusInternalServerError)
-		}
-	})
-
-	log.Println("Server starting on :8080")
-	log.Fatal(http.ListenAndServe(":8080", nil))
+	log.Printf("Server starting on %s", server.config.Port)
+	log.Fatal(http.ListenAndServe(server.config.Port, nil))
+}
+
+// cacheControlMiddleware sets Cache-Control headers for static assets
+func cacheControlMiddleware(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		path := r.URL.Path
+		switch {
+		case strings.HasSuffix(path, ".css") || strings.HasSuffix(path, ".js") ||
+			strings.HasSuffix(path, ".png") || strings.HasSuffix(path, ".jpg") ||
+			strings.HasSuffix(path, ".jpeg") || strings.HasSuffix(path, ".webp") ||
+			strings.HasSuffix(path, ".svg") || strings.HasSuffix(path, ".ico") ||
+			strings.HasSuffix(path, ".woff2"):
+			w.Header().Set("Cache-Control", "public, max-age=31536000, immutable")
+		default:
+			w.Header().Set("Cache-Control", "public, max-age=300")
+		}
+		next.ServeHTTP(w, r)
+	})
 }
--- a/static/css/style.css
+++ b/static/css/style.css
--- a/static/icons/favicon.ico
+++ b/static/icons/favicon.ico
--- a/static/icons/manifest.json
+++ b/static/icons/manifest.json
@ -0,0 +1,21 @@
+{
+    "name": "Hogeland Linux - Linux Migratie Service",
+    "short_name": "Hogeland Linux",
+    "description": "Linux migratie service voor Windows 10 end-of-life. Geef uw computer nieuw leven met Linux!",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#059669",
+    "icons": [
+        {
+            "src": "/static/images/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/images/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+} 
--- a/static/images/DutchOpen2024.jpg
+++ b/static/images/DutchOpen2024.jpg
--- a/static/images/GamingBenchmarkLinuxvsWindows.webp
+++ b/static/images/GamingBenchmarkLinuxvsWindows.webp
--- a/static/images/LinuxMintCinnamonSoftwareManager.webp
+++ b/static/images/LinuxMintCinnamonSoftwareManager.webp
--- a/static/images/Tux.svg
+++ b/static/images/Tux.svg
@ -0,0 +1,363 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 216 256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<title>Tux</title>
+	<defs id="tux_fx">
+		<linearGradient id="gradient_belly_shadow">
+			<stop offset="0" stop-color="#000000"/>
+			<stop offset="1" stop-color="#000000" stop-opacity="0.25"/>
+		</linearGradient>
+		<linearGradient id="gradient_wing_tip_right_shadow">
+			<stop offset="0" stop-color="#110800"/>
+			<stop offset="0.59" stop-color="#a65a00" stop-opacity="0.8"/>
+			<stop offset="1" stop-color="#ff921e" stop-opacity="0"/>
+		</linearGradient>
+		<linearGradient id="gradient_wing_tip_right_glare_1">
+			<stop offset="0" stop-color="#7c7c7c"/>
+			<stop offset="1" stop-color="#7c7c7c" stop-opacity="0.33"/>
+		</linearGradient>
+		<linearGradient id="gradient_wing_tip_right_glare_2">
+			<stop offset="0" stop-color="#7c7c7c"/>
+			<stop offset="1" stop-color="#7c7c7c" stop-opacity="0.33"/>
+		</linearGradient>
+		<linearGradient id="gradient_foot_left_layer_1">
+			<stop offset="0" stop-color="#b98309"/>
+			<stop offset="1" stop-color="#382605"/>
+		</linearGradient>
+		<linearGradient id="gradient_foot_left_glare">
+			<stop offset="0" stop-color="#ebc40c"/>
+			<stop offset="1" stop-color="#ebc40c" stop-opacity="0"/>
+		</linearGradient>
+		<linearGradient id="gradient_foot_right_shadow">
+			<stop offset="0" stop-color="#000000"/>
+			<stop offset="1" stop-color="#000000" stop-opacity="0"/>
+		</linearGradient>
+		<linearGradient id="gradient_foot_right_layer_1">
+			<stop offset="0" stop-color="#3e2a06"/>
+			<stop offset="1" stop-color="#ad780a"/>
+		</linearGradient>
+		<linearGradient id="gradient_foot_right_glare">
+			<stop offset="0" stop-color="#f3cd0c"/>
+			<stop offset="1" stop-color="#f3cd0c" stop-opacity="0"/>
+		</linearGradient>
+		<linearGradient id="gradient_eyeball">
+			<stop offset="0" stop-color="#fefefc"/>
+			<stop offset="0.75" stop-color="#fefefc"/>
+			<stop offset="1" stop-color="#d4d4d4"/>
+		</linearGradient>
+		<linearGradient id="gradient_pupil_left_glare">
+			<stop offset="0" stop-color="#757574" stop-opacity="0"/>
+			<stop offset="0.25" stop-color="#757574"/>
+			<stop offset="0.5" stop-color="#757574"/>
+			<stop offset="1" stop-color="#757574" stop-opacity="0"/>
+		</linearGradient>
+		<linearGradient id="gradient_pupil_right_glare_2">
+			<stop offset="0" stop-color="#949494" stop-opacity="0.39"/>
+			<stop offset="0.5" stop-color="#949494"/>
+			<stop offset="1" stop-color="#949494" stop-opacity="0.39"/>
+		</linearGradient>
+		<linearGradient id="gradient_eyelid_left">
+			<stop offset="0" stop-color="#c8c8c8"/>
+			<stop offset="1" stop-color="#797978"/>
+		</linearGradient>
+		<linearGradient id="gradient_eyelid_right">
+			<stop offset="0" stop-color="#747474"/>
+			<stop offset="0.13" stop-color="#8c8c8c"/>
+			<stop offset="0.25" stop-color="#a4a4a4"/>
+			<stop offset="0.5" stop-color="#d4d4d4"/>
+			<stop offset="0.62" stop-color="#d4d4d4"/>
+			<stop offset="1" stop-color="#7c7c7c"/>
+		</linearGradient>
+		<linearGradient id="gradient_eyebrow">
+			<stop offset="0" stop-color="#646464" stop-opacity="0"/>
+			<stop offset="0.31" stop-color="#646464" stop-opacity="0.58"/>
+			<stop offset="0.47" stop-color="#646464"/>
+			<stop offset="0.73" stop-color="#646464" stop-opacity="0.26"/>
+			<stop offset="1" stop-color="#646464" stop-opacity="0"/>
+		</linearGradient>
+		<linearGradient id="gradient_beak_base">
+			<stop offset="0" stop-color="#020204"/>
+			<stop offset="0.73" stop-color="#020204"/>
+			<stop offset="1" stop-color="#5c5c5c"/>
+		</linearGradient>
+		<linearGradient id="gradient_mandible_lower">
+			<stop offset="0" stop-color="#d2940a"/>
+			<stop offset="0.75" stop-color="#d89c08"/>
+			<stop offset="0.87" stop-color="#b67e07"/>
+			<stop offset="1" stop-color="#946106"/>
+		</linearGradient>
+		<linearGradient id="gradient_mandible_upper">
+			<stop offset="0" stop-color="#ad780a"/>
+			<stop offset="0.12" stop-color="#d89e08"/>
+			<stop offset="0.25" stop-color="#edb80b"/>
+			<stop offset="0.39" stop-color="#ebc80d"/>
+			<stop offset="0.53" stop-color="#f5d838"/>
+			<stop offset="0.77" stop-color="#f6d811"/>
+			<stop offset="1" stop-color="#f5cd31"/>
+		</linearGradient>
+		<linearGradient id="gradient_nares">
+			<stop offset="0" stop-color="#3a2903"/>
+			<stop offset="0.55" stop-color="#735208"/>
+			<stop offset="1" stop-color="#ac8c04"/>
+		</linearGradient>
+		<linearGradient id="gradient_beak_corner">
+			<stop offset="0" stop-color="#f5ce2d"/>
+			<stop offset="1" stop-color="#d79b08"/>
+		</linearGradient>
+		<radialGradient id="fill_belly_shadow_left" href="#gradient_belly_shadow" xlink:href="#gradient_belly_shadow" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(61.18,121.19) scale(19,18)"/>
+		<radialGradient id="fill_belly_shadow_right" href="#gradient_belly_shadow" xlink:href="#gradient_belly_shadow" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(125.74,131.6) scale(23.6,18)"/>
+		<radialGradient id="fill_belly_shadow_middle" href="#gradient_belly_shadow" xlink:href="#gradient_belly_shadow" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(94.21,127.47) scale(9.35,10)"/>
+		<linearGradient id="fill_foot_left_base" href="#gradient_foot_left_layer_1" xlink:href="#gradient_foot_left_layer_1" gradientUnits="userSpaceOnUse" x1="23.18" y1="193.01" x2="64.31" y2="262.02"/>
+		<linearGradient id="fill_foot_left_glare" href="#gradient_foot_left_glare" xlink:href="#gradient_foot_left_glare" gradientUnits="userSpaceOnUse" x1="64.47" y1="210.83" x2="77.41" y2="235.21"/>
+		<linearGradient id="fill_foot_right_shadow" href="#gradient_foot_right_shadow" xlink:href="#gradient_foot_right_shadow" gradientUnits="userSpaceOnUse" x1="146.93" y1="211.96" x2="150.2" y2="235.73"/>
+		<linearGradient id="fill_foot_right_base" href="#gradient_foot_right_layer_1" xlink:href="#gradient_foot_right_layer_1" gradientUnits="userSpaceOnUse" x1="151.5" y1="253.02" x2="192.94" y2="185.84"/>
+		<linearGradient id="fill_foot_right_glare" href="#gradient_foot_right_glare" xlink:href="#gradient_foot_right_glare" gradientUnits="userSpaceOnUse" x1="162.81" y1="180.67" x2="161.59" y2="191.64"/>
+		<radialGradient id="fill_wing_tip_right_shadow_lower" href="#gradient_wing_tip_right_shadow" xlink:href="#gradient_wing_tip_right_shadow" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(169.71,194.53) rotate(15) scale(19.66,20.64)"/>
+		<radialGradient id="fill_wing_tip_right_shadow_upper" href="#gradient_wing_tip_right_shadow" xlink:href="#gradient_wing_tip_right_shadow" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(169.71,189.89) rotate(-2.42) scale(19.74,14.86)"/>
+		<radialGradient id="fill_wing_tip_right_glare_1" href="#gradient_wing_tip_right_glare_1" xlink:href="#gradient_wing_tip_right_glare_1" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(184.65,176.62) rotate(23.5) scale(6.95,3.21)"/>
+		<linearGradient id="fill_wing_tip_right_glare_2" href="#gradient_wing_tip_right_glare_2" xlink:href="#gradient_wing_tip_right_glare_2" gradientUnits="userSpaceOnUse" x1="165.69" y1="173.58" x2="168.27" y2="173.47"/>
+		<radialGradient id="fill_eyeball_left" href="#gradient_eyeball" xlink:href="#gradient_eyeball" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(86.49,51.41) rotate(-0.6) scale(10.24,15.68)"/>
+		<linearGradient id="fill_pupil_left_glare" href="#gradient_pupil_left_glare" xlink:href="#gradient_pupil_left_glare" gradientUnits="userSpaceOnUse" x1="84.29" y1="46.64" x2="89.32" y2="55.63"/>
+		<radialGradient id="fill_eyelid_left" href="#gradient_eyelid_left" xlink:href="#gradient_eyelid_left" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(84.89,43.74) rotate(-9.35) scale(6.25,5.77)"/>
+		<linearGradient id="fill_eyebrow_left" href="#gradient_eyebrow" xlink:href="#gradient_eyebrow" gradientUnits="userSpaceOnUse" x1="83.59" y1="32.51" x2="94.48" y2="43.63"/>
+		<radialGradient id="fill_eyeball_right" href="#gradient_eyeball" xlink:href="#gradient_eyeball" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(118.06,51.41) rotate(-1.8) scale(13.64,15.68)"/>
+		<linearGradient id="fill_pupil_right_glare" href="#gradient_pupil_right_glare_2" xlink:href="#gradient_pupil_right_glare_2" gradientUnits="userSpaceOnUse" x1="117.87" y1="47.25" x2="123.66" y2="54.11"/>
+		<linearGradient id="fill_eyelid_right" href="#gradient_eyelid_right" xlink:href="#gradient_eyelid_right" gradientUnits="userSpaceOnUse" x1="112.9" y1="36.23" x2="131.32" y2="47.01"/>
+		<linearGradient id="fill_eyebrow_right" href="#gradient_eyebrow" xlink:href="#gradient_eyebrow" gradientUnits="userSpaceOnUse" x1="119.16" y1="31.56" x2="131.42" y2="43.14"/>
+		<radialGradient id="fill_beak_base" href="#gradient_beak_base" xlink:href="#gradient_beak_base" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(97.64,60.12) rotate(-36) scale(11.44,10.38)"/>
+		<radialGradient id="fill_mandible_lower_base" href="#gradient_mandible_lower" xlink:href="#gradient_mandible_lower" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(109.77,70.61) rotate(-22.4) scale(27.15,19.07)"/>
+		<linearGradient id="fill_mandible_upper_base" href="#gradient_mandible_upper" xlink:href="#gradient_mandible_upper" gradientUnits="userSpaceOnUse" x1="78.09" y1="69.26" x2="126.77" y2="68.88"/>
+		<radialGradient id="fill_naris_left" href="#gradient_nares" xlink:href="#gradient_nares" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(92.11,59.88) scale(1.32,1.42)"/>
+		<radialGradient id="fill_naris_right" href="#gradient_nares" xlink:href="#gradient_nares" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(104.65,59.7) scale(2.78,1.62)"/>
+		<linearGradient id="fill_beak_corner" href="#gradient_beak_corner" xlink:href="#gradient_beak_corner" gradientUnits="userSpaceOnUse" x1="126.74" y1="67.49" x2="126.74" y2="71.09"/>
+		<filter id="blur_belly_shadow_left">
+			<feGaussianBlur stdDeviation="0.64 0.55"/>
+		</filter>
+		<filter id="blur_belly_shadow_right">
+			<feGaussianBlur stdDeviation="0.98"/>
+		</filter>
+		<filter id="blur_belly_shadow_middle">
+			<feGaussianBlur stdDeviation="0.68"/>
+		</filter>
+		<filter id="blur_belly_shadow_lower" x="-0.8" width="2.6" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="1.25"/>
+		</filter>
+		<filter id="blur_belly_glare" x="-0.8" width="2.6" y="-0.5" height="2">
+			<feGaussianBlur stdDeviation="1.78 2.19"/>
+		</filter>
+		<filter id="blur_head_glare" x="-0.3" width="1.6" y="-0.3" height="1.6">
+			<feGaussianBlur stdDeviation="1.73"/>
+		</filter>
+		<filter id="blur_neck_glare" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="0.78"/>
+		</filter>
+		<filter id="blur_wing_left_glare" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="0.98"/>
+		</filter>
+		<filter id="blur_wing_right_glare" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="1.19 1.17"/>
+		</filter>
+		<filter id="blur_foot_left_layer_1" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="3.38"/>
+		</filter>
+		<filter id="blur_foot_left_layer_2">
+			<feGaussianBlur stdDeviation="2.1 2.06"/>
+		</filter>
+		<filter id="blur_foot_left_glare">
+			<feGaussianBlur stdDeviation="0.32"/>
+		</filter>
+		<filter id="blur_foot_right_shadow">
+			<feGaussianBlur stdDeviation="1.95 1.9"/>
+		</filter>
+		<filter id="blur_foot_right_layer_1" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="4.12"/>
+		</filter>
+		<filter id="blur_foot_right_layer_2" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="3.12 3.37"/>
+		</filter>
+		<filter id="blur_foot_right_glare" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="0.41"/>
+		</filter>
+		<filter id="blur_wing_tip_right_shadow_lower" x="-0.3" width="1.6" y="-0.3" height="1.6">
+			<feGaussianBlur stdDeviation="2.45"/>
+		</filter>
+		<filter id="blur_wing_tip_right_shadow_upper" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="1.12 0.81"/>
+		</filter>
+		<filter id="blur_wing_tip_right_glare" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="0.88"/>
+		</filter>
+		<filter id="blur_pupil_left_glare" x="-0.3" width="1.6" y="-0.3" height="1.6">
+			<feGaussianBlur stdDeviation="0.44"/>
+		</filter>
+		<filter id="blur_eyebrow_left">
+			<feGaussianBlur stdDeviation="0.12"/>
+		</filter>
+		<filter id="blur_pupil_right_glare" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="0.45"/>
+		</filter>
+		<filter id="blur_eyebrow_right">
+			<feGaussianBlur stdDeviation="0.13"/>
+		</filter>
+		<filter id="blur_beak_shadow_lower" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="1.75"/>
+		</filter>
+		<filter id="blur_beak_shadow_upper">
+			<feGaussianBlur stdDeviation="0.8 0.74"/>
+		</filter>
+		<filter id="blur_mandible_lower_glare" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="0.77"/>
+		</filter>
+		<filter id="blur_mandible_upper_shadow">
+			<feGaussianBlur stdDeviation="0.65"/>
+		</filter>
+		<filter id="blur_mandible_upper_glare" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="0.73"/>
+		</filter>
+		<filter id="blur_naris_left" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="0.1"/>
+		</filter>
+		<filter id="blur_naris_right">
+			<feGaussianBlur stdDeviation="0.1"/>
+		</filter>
+		<filter id="blur_beak_corner" x="-0.2" width="1.4" y="-0.2" height="1.4">
+			<feGaussianBlur stdDeviation="0.23"/>
+		</filter>
+		<clipPath id="clip_body">
+			<use href="#body_base" xlink:href="#body_base"/>
+		</clipPath>
+		<clipPath id="clip_wing_left">
+			<use href="#wing_left_base" xlink:href="#wing_left_base"/>
+		</clipPath>
+		<clipPath id="clip_wing_right">
+			<use href="#wing_right_base" xlink:href="#wing_right_base"/>
+		</clipPath>
+		<clipPath id="clip_foot_left">
+			<use href="#foot_left_base" xlink:href="#foot_left_base"/>
+		</clipPath>
+		<clipPath id="clip_foot_right">
+			<use href="#foot_right_base" xlink:href="#foot_right_base"/>
+		</clipPath>
+		<clipPath id="clip_wing_tip_right">
+			<use href="#wing_tip_right_base" xlink:href="#wing_tip_right_base"/>
+		</clipPath>
+		<clipPath id="clip_eye_left">
+			<use href="#eyeball_left" xlink:href="#eyeball_left"/>
+		</clipPath>
+		<clipPath id="clip_pupil_left">
+			<use href="#pupil_left_base" xlink:href="#pupil_left_base"/>
+		</clipPath>
+		<clipPath id="clip_eye_right">
+			<use href="#eyeball_right" xlink:href="#eyeball_right"/>
+		</clipPath>
+		<clipPath id="clip_pupil_right">
+			<use href="#pupil_right_base" xlink:href="#pupil_right_base"/>
+		</clipPath>
+		<clipPath id="clip_mandible_lower">
+			<use href="#mandible_lower_base" xlink:href="#mandible_lower_base"/>
+		</clipPath>
+		<clipPath id="clip_mandible_upper">
+			<use href="#mandible_upper_base" xlink:href="#mandible_upper_base"/>
+		</clipPath>
+		<clipPath id="clip_beak">
+			<use href="#mandible_lower_base" xlink:href="#mandible_lower_base"/>
+			<use href="#mandible_upper_base" xlink:href="#mandible_upper_base"/>
+		</clipPath>
+	</defs>
+	<g id="tux">
+		<g id="body">
+			<path id="body_base" fill="#020204" d="m 106.95,0 c -6,0 -12.02,1.18 -17.46,4.12 -5.78,3.11 -10.52,8.09 -13.43,13.97 -2.92,5.88 -4.06,12.16 -4.24,19.08 -0.33,13.14 0.3,26.92 1.29,39.41 0.26,3.8 0.74,6.02 0.25,9.93 -1.62,8.3 -8.88,13.88 -12.76,21.17 -4.27,8.04 -6.07,17.13 -9.29,25.65 -2.95,7.79 -7.09,15.1 -9.88,22.95 -3.91,10.97 -5.08,23.03 -2.5,34.39 1.97,8.66 6.08,16.78 11.62,23.73 -0.8,1.44 -1.58,2.91 -2.4,4.34 -2.57,4.43 -5.71,8.64 -7.17,13.55 -0.73,2.45 -1.02,5.07 -0.55,7.59 0.47,2.52 1.75,4.93 3.75,6.53 1.31,1.04 2.9,1.72 4.53,2.1 1.63,0.37 3.32,0.46 5,0.43 6.37,-0.14 12.55,-2.07 18.71,-3.69 3.66,-0.96 7.34,-1.81 11.03,-2.58 13.14,-2.69 27.8,-1.61 39.99,0.15 4.13,0.63 8.23,1.44 12.29,2.43 6.36,1.54 12.69,3.5 19.23,3.69 1.72,0.05 3.46,-0.03 5.14,-0.4 1.68,-0.38 3.31,-1.06 4.65,-2.13 2.01,-1.6 3.29,-4.02 3.76,-6.54 0.47,-2.52 0.18,-5.15 -0.56,-7.61 -1.48,-4.92 -4.65,-9.11 -7.27,-13.52 -1.04,-1.75 -2,-3.53 -3.03,-5.28 7.9,-8.87 14.26,-19.13 17.94,-30.4 4.01,-12.3 4.75,-25.55 3.06,-38.38 -1.69,-12.83 -5.76,-25.27 -11.11,-37.05 -6.72,-14.76 -12.37,-20.1 -16.47,-33.07 -4.42,-14.02 -0.77,-30.61 -4.06,-43.32 -1.17,-4.32 -3.04,-8.45 -5.45,-12.23 -2.82,-4.43 -6.4,-8.39 -10.65,-11.47 -6.78,-4.92 -15.3,-7.54 -23.96,-7.54 z"/>
+			<path id="belly" fill="#fdfdfb" d="m 83.13,74 c -0.9,1.13 -1.48,2.49 -1.84,3.89 -0.35,1.4 -0.48,2.85 -0.54,4.3 -0.11,2.89 0.07,5.83 -0.7,8.62 -0.82,2.98 -2.65,5.57 -4.44,8.08 -3.11,4.36 -6.25,8.84 -7.78,13.97 -0.93,3.1 -1.24,6.39 -0.91,9.62 -3.47,5.1 -6.48,10.53 -8.98,16.18 -3.78,8.57 -6.37,17.69 -7.28,27.01 -1.12,11.41 0.34,23.15 4.85,33.69 3.25,7.63 8.11,14.6 14.38,20.04 3.18,2.76 6.72,5.11 10.5,6.97 13.11,6.45 29.31,6.46 42.2,-0.41 6.74,-3.59 12.43,-8.84 17.91,-14.15 3.3,-3.2 6.59,-6.48 9.11,-10.32 4.85,-7.41 6.54,-16.41 7.59,-25.2 1.83,-15.36 1.89,-31.6 -4.85,-45.53 -2.32,-4.8 -5.41,-9.22 -9.12,-13.05 -0.98,-6.7 -2.93,-13.27 -5.76,-19.42 -2.05,-4.45 -4.54,-8.68 -6.44,-13.18 -0.78,-1.85 -1.46,-3.75 -2.32,-5.56 -0.87,-1.81 -1.93,-3.55 -3.39,-4.94 -1.48,-1.42 -3.33,-2.43 -5.28,-3.07 -1.95,-0.65 -4.01,-0.94 -6.06,-1.04 -4.11,-0.21 -8.22,0.33 -12.33,0.16 -3.27,-0.13 -6.53,-0.7 -9.8,-0.51 -1.63,0.1 -3.26,0.39 -4.78,1.01 -1.52,0.61 -2.92,1.56 -3.94,2.84 z"/>
+			<g id="body_self_shadows">
+				<path id="belly_shadow_left" opacity="0.25" fill="url(#fill_belly_shadow_left)" filter="url(#blur_belly_shadow_left)" clip-path="url(#clip_body)" d="m 68.67,115.18 c 0.87,1.31 -0.55,5.84 19.86,2.94 0,0 -3.59,0.39 -7.12,1.21 -5.49,1.84 -10.27,3.89 -13.97,6.61 -3.65,2.7 -6.33,6.21 -9.68,9.22 0,0 5.43,-9.92 6.78,-12.91 1.36,-2.99 -0.22,-2.85 0.85,-7.25 1.07,-4.4 3.69,-8.63 3.69,-8.63 0,0 -2.14,6.22 -0.41,8.81 z"/>
+				<path id="belly_shadow_right" opacity="0.42" fill="url(#fill_belly_shadow_right)" filter="url(#blur_belly_shadow_right)" clip-path="url(#clip_body)" d="m 134.28,113.99 c -4.16,2.9 -6.6,2.56 -11.64,3.12 -5.05,0.57 -18.7,0.36 -18.7,0.36 0,0 1.97,-0.03 6.36,0.78 4.38,0.82 13.31,1.6 18.34,3.51 5.04,1.92 6.87,2.47 9.93,4.4 4.35,2.75 7.55,7.06 11.71,10.08 0,0 0.2,-4 -1.48,-6.99 -1.68,-2.99 -6.2,-7.7 -7.53,-12.1 -1.32,-4.4 -1.96,-13.04 -1.96,-13.04 0,0 -0.88,6.99 -5.03,9.88 z"/>
+				<path id="belly_shadow_middle" opacity="0.2" fill="url(#fill_belly_shadow_middle)" filter="url(#blur_belly_shadow_middle)" clip-path="url(#clip_body)" d="m 95.17,107.81 c -0.16,1.25 -0.36,2.5 -0.6,3.74 -0.12,0.61 -0.26,1.22 -0.48,1.8 -0.23,0.58 -0.56,1.14 -1.02,1.55 -0.41,0.37 -0.9,0.62 -1.4,0.85 -1.94,0.88 -4.01,1.47 -6.12,1.74 0.84,0.06 1.68,0.14 2.53,0.23 0.53,0.06 1.06,0.12 1.57,0.25 0.52,0.14 1.03,0.34 1.46,0.65 0.47,0.35 0.84,0.82 1.12,1.34 0.55,1.02 0.73,2.2 0.83,3.37 0.13,1.48 0.14,2.98 0.03,4.46 0.1,-0.99 0.31,-1.98 0.62,-2.92 0.57,-1.72 1.47,-3.32 2.69,-4.65 0.49,-0.52 1.02,-1.01 1.6,-1.42 1.79,-1.26 4.07,-1.81 6.24,-1.51 -2.21,0.09 -4.44,-0.6 -6.2,-1.93 -0.9,-0.68 -1.68,-1.52 -2.22,-2.5 -0.84,-1.52 -1.08,-3.37 -0.65,-5.05 z"/>
+				<path id="belly_shadow_lower" opacity="0.11" fill="#000000" filter="url(#blur_belly_shadow_lower)" clip-path="url(#clip_body)" d="m 89.85,137.14 c -1.06,4.03 -1.79,8.15 -2.17,12.31 -0.55,5.87 -0.42,11.78 -0.74,17.67 -0.26,4.99 -0.85,10.04 0.02,14.97 0.41,2.35 1.15,4.64 2.2,6.78 0.16,-0.82 0.29,-1.64 0.36,-2.47 0.37,-4 -0.3,-8.01 -0.53,-12.01 -0.4,-7.02 0.57,-14.04 0.97,-21.06 0.3,-5.39 0.27,-10.8 -0.11,-16.19 z"/>
+			</g>
+			<g id="body_glare">
+				<path id="belly_glare" opacity="0.75" fill="#7c7c7c" filter="url(#blur_belly_glare)" clip-path="url(#clip_body)" d="m 160.08,131.23 c 1.03,-0.16 7.34,5.21 6.48,7.21 -0.86,1.99 -2.49,0.79 -3.65,0.8 -1.16,0.02 -4.33,1.46 -4.86,0.55 -0.54,-0.91 1.4,-3.03 2.41,-4.81 0.82,-1.43 -1.4,-3.59 -0.38,-3.75 z"/>
+				<path id="head_glare" fill="#7c7c7c" filter="url(#blur_head_glare)" clip-path="url(#clip_body)" d="m 121.52,11.12 c -2.21,1.56 -1.25,3.51 -0.3,5.46 0.95,1.96 -2.09,7.59 -2.12,7.83 -0.03,0.24 5.98,-2.85 7.62,-4.87 1.94,-2.37 6.83,3.22 6.56,2.37 0.01,-1.52 -9.55,-12.34 -11.76,-10.79 z"/>
+				<path id="neck_glare" fill="#838384" filter="url(#blur_neck_glare)" clip-path="url(#clip_body)" d="m 138.27,76.63 c -1.86,1.7 0.88,4.25 2.17,7.24 0.81,1.86 3.04,4.49 5.2,4.07 1.63,-0.32 2.63,-2.66 2.48,-4.3 -0.3,-3.18 -2.98,-3.93 -4.93,-5.02 -1.54,-0.86 -3.61,-3.18 -4.92,-1.99 z"/>
+			</g>
+		</g>
+		<g id="wings">
+			<g id="wing_left">
+				<path id="wing_left_base" fill="#020204" d="m 63.98,100.91 c -6.1,6.92 -12.37,13.63 -15.81,21.12 -1.71,3.8 -2.51,7.93 -3.68,11.93 -1.32,4.54 -3.12,8.94 -5.14,13.22 -1.87,3.95 -3.93,7.81 -5.98,11.66 -1.5,2.81 -3.02,5.67 -3.54,8.81 -0.41,2.48 -0.18,5.04 0.46,7.47 0.63,2.43 1.64,4.75 2.79,6.98 4.88,9.55 12.21,17.77 20.89,24.07 3.94,2.85 8.15,5.32 12.58,7.35 2.4,1.09 4.92,2.07 7.56,2.11 1.32,0.03 2.65,-0.19 3.86,-0.72 1.2,-0.53 2.28,-1.38 3,-2.49 0.88,-1.36 1.18,-3.05 1,-4.66 -0.18,-1.61 -0.81,-3.15 -1.65,-4.53 -2.06,-3.38 -5.31,-5.83 -8.44,-8.25 -6.76,-5.23 -13.29,-10.76 -19.55,-16.58 -1.76,-1.65 -3.53,-3.34 -4.76,-5.42 -1.2,-2.02 -1.85,-4.32 -2.29,-6.63 -1.21,-6.33 -0.9,-12.99 1.25,-19.07 0.85,-2.38 1.96,-4.65 3.04,-6.93 1.86,-3.95 3.62,-7.98 6.07,-11.6 3.05,-4.51 7.13,-8.33 9.61,-13.17 2.1,-4.09 2.95,-8.68 3.76,-13.2 0.64,-3.54 1.85,-7 2.47,-10.54 -1.21,2.3 -5.11,6.07 -7.5,9.07 z"/>
+				<path id="wing_left_glare" opacity="0.95" fill="#7c7c7c" filter="url(#blur_wing_left_glare)" clip-path="url(#clip_wing_left)" d="m 56.96,126.1 c -2,1.84 -3.73,3.97 -5.13,6.31 -2.3,3.84 -3.65,8.16 -5.33,12.31 -1.24,3.09 -2.69,6.2 -2.86,9.53 -0.09,1.71 0.16,3.42 0.22,5.13 0.06,1.71 -0.1,3.49 -0.94,4.98 -0.7,1.25 -1.87,2.23 -3.22,2.71 1.83,0.61 3.45,1.79 4.6,3.33 0.96,1.3 1.58,2.81 2.41,4.18 0.68,1.12 1.51,2.16 2.54,2.97 1.02,0.82 2.25,1.4 3.54,1.56 1.79,0.23 3.65,-0.36 4.97,-1.58 -1.66,-15.55 -0.14,-31.42 4.44,-46.37 0.29,-0.94 0.59,-1.89 0.67,-2.87 0.07,-0.99 -0.12,-2.03 -0.72,-2.81 -0.31,-0.42 -0.74,-0.75 -1.23,-0.96 -0.48,-0.2 -1.02,-0.28 -1.54,-0.21 -0.52,0.06 -1.03,0.26 -1.45,0.57 -0.42,0.32 -0.76,0.74 -0.97,1.22 z"/>
+			</g>
+			<g id="wing_right">
+				<path id="wing_right_base" fill="#020204" d="m 162.76,127.12 c 5.24,4.22 8.57,10.59 9.6,17.24 0.8,5.18 0.28,10.51 -0.89,15.62 -1.17,5.12 -2.97,10.06 -4.77,15 -0.71,1.96 -1.43,3.95 -1.71,6.02 -0.29,2.08 -0.11,4.27 0.89,6.11 1.15,2.11 3.29,3.56 5.59,4.24 2.27,0.68 4.72,0.66 7.02,0.09 2.3,-0.57 6.17,-1.31 8.04,-2.77 4.75,-3.69 5.88,-10.1 7.01,-15.72 1.17,-5.87 0.6,-12.02 -0.43,-17.95 -1.41,-8.09 -3.78,-15.99 -6.79,-23.62 -2.22,-5.62 -5.06,-10.98 -8.44,-15.96 -3.32,-4.89 -8.02,-8.7 -11.5,-13.48 -1.21,-1.66 -2.66,-3.38 -3.84,-5.06 -2.56,-3.62 -1.98,-2.94 -3.57,-5.29 -1.15,-1.7 -2.97,-2.28 -4.88,-3.02 -1.92,-0.74 -4.06,-0.96 -6.04,-0.41 -2.6,0.73 -4.73,2.79 -5.86,5.24 -1.13,2.46 -1.33,5.28 -0.89,7.95 0.57,3.44 2.14,6.64 3.92,9.64 2,3.39 4.32,6.66 7.35,9.18 3.16,2.63 6.98,4.37 10.19,6.95 z"/>
+				<path id="wing_right_glare" fill="#838384" filter="url(#blur_wing_right_glare)" clip-path="url(#clip_wing_right)" d="m 150.42,118.99 c 0.42,0.4 0.86,0.81 1.31,1.19 3.22,2.63 4.93,5.58 8.2,8.16 5.34,4.22 10.75,11.5 11.8,18.15 0.82,5.19 -0.26,8.01 -1.58,14.12 -1.32,6.12 -5.06,14.78 -7.09,20.68 -0.8,2.35 1.64,1.38 1.32,3.86 -0.16,1.22 -0.18,2.45 -0.03,3.67 0.02,-0.23 0.03,-0.48 0.06,-0.71 0.39,-3.38 1.42,-6.63 2.55,-9.82 2.17,-6.13 4.66,-12.15 6.38,-18.45 1.72,-6.29 1.53,-10.82 0.63,-16.23 -1.13,-6.81 -5.09,-13.09 -10.69,-17.24 -3.97,-2.93 -8.64,-4.81 -12.86,-7.38 z"/>
+			</g>
+		</g>
+		<g id="feet">
+			<g id="foot_left">
+				<path id="foot_left_base" fill="url(#fill_foot_left_base)" d="m 34.98,175.33 c 1.38,-0.57 2.93,-0.68 4.39,-0.41 1.47,0.27 2.86,0.91 4.09,1.74 2.47,1.68 4.3,4.12 6.05,6.54 4.03,5.54 7.9,11.2 11.42,17.08 2.85,4.78 5.46,9.71 8.76,14.18 2.15,2.93 4.57,5.64 6.73,8.55 2.16,2.92 4.07,6.08 5.03,9.58 1.25,4.55 0.76,9.56 -1.4,13.75 -1.52,2.95 -3.86,5.48 -6.7,7.19 -2.84,1.71 -5.83,2.47 -9.15,2.47 -5.27,0 -10.42,-2.83 -15.32,-4.78 -9.98,-3.98 -20.82,-5.22 -31.11,-8.32 -3.16,-0.95 -6.27,-2.08 -9.45,-2.95 -1.42,-0.39 -2.85,-0.73 -4.19,-1.34 -1.34,-0.6 -2.59,-1.51 -3.33,-2.77 -0.57,-0.98 -0.8,-2.13 -0.8,-3.26 0,-1.14 0.28,-2.26 0.67,-3.32 0.77,-2.13 2.02,-4.06 2.86,-6.17 1.37,-3.44 1.62,-7.23 1.43,-10.93 -0.18,-3.69 -0.78,-7.36 -1.03,-11.05 -0.12,-1.65 -0.16,-3.32 0.16,-4.95 0.31,-1.62 1.01,-3.21 2.2,-4.35 1.1,-1.06 2.55,-1.69 4.05,-2 1.49,-0.31 3.03,-0.32 4.55,-0.29 1.52,0.03 3.05,0.12 4.57,-0.01 1.52,-0.12 3.05,-0.46 4.37,-1.22 1.26,-0.72 2.29,-1.79 3.14,-2.96 0.85,-1.17 1.54,-2.45 2.25,-3.72 0.7,-1.26 1.43,-2.52 2.36,-3.64 0.92,-1.12 2.06,-2.09 3.4,-2.64 z"/>
+				<path id="foot_left_layer_1" fill="#d99a03" filter="url(#blur_foot_left_layer_1)" clip-path="url(#clip_foot_left)" d="m 37.16,177.7 c 1.25,-0.5 2.67,-0.56 3.98,-0.26 1.32,0.3 2.55,0.94 3.61,1.77 2.14,1.65 3.62,3.97 5.05,6.26 3.42,5.54 6.76,11.15 9.92,16.86 2.4,4.31 4.68,8.7 7.62,12.65 1.95,2.62 4.18,5.03 6.17,7.62 1.99,2.59 3.76,5.41 4.64,8.56 1.14,4.05 0.68,8.54 -1.28,12.26 -1.42,2.68 -3.58,4.96 -6.2,6.48 -2.61,1.52 -5.67,2.28 -8.69,2.14 -4.82,-0.22 -9.23,-2.63 -13.77,-4.26 -8.71,-3.16 -18.14,-3.59 -27.08,-6.05 -3.2,-0.87 -6.32,-2.03 -9.53,-2.84 -1.43,-0.36 -2.88,-0.66 -4.23,-1.23 -1.35,-0.57 -2.62,-1.45 -3.36,-2.72 -0.54,-0.95 -0.76,-2.06 -0.73,-3.15 0.04,-1.09 0.31,-2.17 0.7,-3.19 0.78,-2.04 2,-3.88 2.78,-5.92 1.19,-3.08 1.34,-6.47 1.12,-9.76 -0.22,-3.29 -0.8,-6.56 -1,-9.85 -0.08,-1.48 -0.1,-2.97 0.2,-4.41 0.3,-1.45 0.93,-2.85 1.98,-3.89 1.14,-1.13 2.7,-1.74 4.29,-1.99 1.58,-0.24 3.19,-0.13 4.78,0.01 1.6,0.14 3.2,0.32 4.8,0.23 1.6,-0.1 3.22,-0.49 4.54,-1.39 1.2,-0.81 2.1,-2 2.79,-3.27 0.69,-1.27 1.18,-2.64 1.71,-3.98 0.52,-1.35 1.09,-2.69 1.91,-3.89 0.82,-1.19 1.93,-2.24 3.28,-2.79 z"/>
+				<path id="foot_left_layer_2" fill="#f5bd0c" filter="url(#blur_foot_left_layer_2)" clip-path="url(#clip_foot_left)" d="m 35.99,174.57 c 1.22,-0.6 2.65,-0.72 3.98,-0.45 1.33,0.27 2.57,0.92 3.62,1.77 2.09,1.7 3.43,4.13 4.67,6.51 2.84,5.46 5.5,11.04 8.9,16.19 2.48,3.73 5.33,7.2 7.83,10.92 3.39,5.03 6.15,10.57 7.29,16.5 0.76,4 0.74,8.31 -1.18,11.9 -1.27,2.37 -3.32,4.31 -5.75,5.52 -2.42,1.22 -5.21,1.71 -7.92,1.47 -4.27,-0.37 -8.14,-2.47 -12.16,-3.94 -7.13,-2.59 -14.84,-3.22 -22.18,-5.18 -3.09,-0.82 -6.13,-1.89 -9.26,-2.54 -1.39,-0.29 -2.8,-0.5 -4.12,-1 -1.32,-0.5 -2.57,-1.33 -3.25,-2.55 -0.47,-0.86 -0.63,-1.86 -0.56,-2.84 0.07,-0.97 0.36,-1.92 0.74,-2.83 0.77,-1.8 1.9,-3.46 2.49,-5.32 0.88,-2.75 0.52,-5.72 -0.14,-8.53 -0.65,-2.8 -1.6,-5.55 -1.89,-8.41 -0.13,-1.27 -0.13,-2.57 0.17,-3.82 0.29,-1.25 0.88,-2.45 1.81,-3.34 1.2,-1.15 2.88,-1.73 4.56,-1.89 1.67,-0.16 3.35,0.06 5.01,0.3 1.66,0.24 3.34,0.5 5.01,0.42 1.68,-0.07 3.39,-0.51 4.7,-1.54 1.3,-1.02 2.12,-2.53 2.59,-4.09 0.47,-1.57 0.62,-3.2 0.81,-4.82 0.19,-1.62 0.43,-3.26 1.06,-4.77 0.63,-1.51 1.69,-2.9 3.17,-3.64 z"/>
+				<path id="foot_left_glare" fill="url(#fill_foot_left_glare)" filter="url(#blur_foot_left_glare)" clip-path="url(#clip_foot_left)" d="m 51.2,188.21 c 2.25,4.06 3.62,8.72 5.85,12.82 2.05,3.77 4.38,7.65 6.46,11.12 0.93,1.55 3.09,3.93 5.27,7.62 1.98,3.34 3.98,8.01 5.1,9.58 -0.64,-1.84 -1.96,-6.77 -3.54,-10.28 -1.47,-3.28 -3.19,-5.15 -4.24,-6.92 -2.08,-3.47 -4.33,-6.6 -6.47,-9.91 -2.95,-4.57 -5.2,-9.68 -8.43,-14.03 z"/>
+			</g>
+			<g id="foot_right">
+				<path id="foot_right_shadow" opacity="0.2" fill="url(#fill_foot_right_shadow)" filter="url(#blur_foot_right_shadow)" clip-path="url(#clip_body)" d="m 198.7,215.61 c -0.4,1.33 -1.02,2.62 -1.81,3.8 -1.75,2.59 -4.3,4.55 -6.84,6.35 -4.33,3.07 -8.85,5.89 -12.89,9.38 -2.7,2.34 -5.17,4.97 -7.45,7.73 -1.95,2.36 -3.79,4.84 -6.02,6.94 -2.25,2.12 -4.89,3.84 -7.74,4.77 -3.47,1.13 -7.13,1.08 -10.47,0.22 -2.34,-0.6 -4.63,-1.64 -6.08,-3.53 -1.45,-1.89 -1.92,-4.44 -2.09,-6.94 -0.3,-4.42 0.23,-8.93 0.71,-13.42 0.4,-3.73 0.77,-7.46 0.92,-11.18 0.27,-6.77 -0.18,-13.47 -1.09,-20.05 -0.16,-1.11 -0.32,-2.22 -0.23,-3.35 0.09,-1.14 0.47,-2.32 1.27,-3.2 0.74,-0.81 1.77,-1.29 2.79,-1.52 1.02,-0.24 2.06,-0.25 3.09,-0.28 2.43,-0.06 4.86,-0.21 7.25,0.01 1.51,0.13 2.99,0.41 4.49,0.55 2.51,0.24 5.12,0.12 7.64,-0.62 2.71,-0.8 5.29,-2.29 8.05,-2.7 1.13,-0.17 2.26,-0.15 3.36,0.01 1.12,0.15 2.24,0.46 3.1,1.15 0.66,0.52 1.14,1.23 1.51,1.99 0.56,1.14 0.9,2.39 1.1,3.68 0.17,1.14 0.24,2.31 0.53,3.41 0.48,1.81 1.58,3.35 2.89,4.6 1.32,1.25 2.85,2.24 4.39,3.22 1.53,0.97 3.07,1.93 4.7,2.73 0.77,0.38 1.56,0.72 2.29,1.15 0.74,0.44 1.42,0.97 1.91,1.67 0.66,0.95 0.92,2.2 0.72,3.43 z"/>
+				<path id="foot_right_base" fill="url(#fill_foot_right_base)" d="m 213.47,222.92 c -2.26,2.68 -5.4,4.45 -8.53,6.05 -5.33,2.71 -10.86,5.1 -15.87,8.37 -3.36,2.19 -6.46,4.76 -9.36,7.53 -2.48,2.37 -4.83,4.9 -7.61,6.91 -2.81,2.03 -6.05,3.5 -9.48,4.01 -0.95,0.14 -1.9,0.21 -2.86,0.21 -3.24,0 -6.48,-0.78 -9.46,-2.08 -2.7,-1.17 -5.3,-2.86 -6.86,-5.36 -1.56,-2.52 -1.92,-5.59 -1.92,-8.56 -0.01,-5.23 0.96,-10.41 1.87,-15.57 0.76,-4.29 1.48,-8.58 1.95,-12.91 0.85,-7.86 0.84,-15.81 0.28,-23.71 -0.1,-1.32 -0.21,-2.65 -0.01,-3.96 0.2,-1.31 0.74,-2.62 1.74,-3.48 0.93,-0.8 2.17,-1.16 3.4,-1.22 1.22,-0.07 2.44,0.12 3.65,0.3 2.85,0.42 5.73,0.74 8.52,1.48 1.76,0.46 3.48,1.08 5.23,1.56 2.94,0.79 6.01,1.17 9.02,0.82 3.25,-0.38 6.41,-1.6 9.68,-1.52 1.34,0.03 2.67,0.28 3.95,0.69 1.3,0.41 2.59,1 3.55,1.98 0.73,0.74 1.24,1.67 1.62,2.64 0.57,1.44 0.88,2.98 1.01,4.52 0.11,1.37 0.09,2.76 0.35,4.11 0.43,2.21 1.6,4.24 3.04,5.97 1.45,1.74 3.18,3.21 4.91,4.66 1.73,1.45 3.46,2.89 5.32,4.16 0.87,0.6 1.77,1.16 2.6,1.81 0.83,0.66 1.59,1.42 2.11,2.34 0.45,0.81 0.69,1.72 0.69,2.65 0,0.52 -0.07,1.04 -0.23,1.56 -0.45,1.43 -1.28,2.82 -2.3,4.04 z"/>
+				<path id="foot_right_layer_1" fill="#cd8907" filter="url(#blur_foot_right_layer_1)" clip-path="url(#clip_foot_right)" d="m 213.21,216.12 c -0.53,1.33 -1.28,2.58 -2.22,3.67 -2.07,2.42 -4.93,4.01 -7.78,5.44 -4.88,2.44 -9.92,4.58 -14.5,7.52 -3.06,1.97 -5.9,4.28 -8.55,6.78 -2.26,2.13 -4.41,4.41 -6.95,6.21 -2.57,1.83 -5.53,3.14 -8.65,3.6 -3.8,0.56 -7.72,-0.16 -11.25,-1.67 -2.46,-1.06 -4.84,-2.56 -6.27,-4.83 -1.42,-2.26 -1.75,-5.02 -1.75,-7.69 -0.02,-4.71 0.87,-9.37 1.71,-14 0.7,-3.85 1.36,-7.71 1.78,-11.6 0.76,-7.08 0.73,-14.22 0.25,-21.32 -0.08,-1.19 -0.17,-2.39 0.01,-3.57 0.18,-1.18 0.67,-2.35 1.57,-3.13 0.85,-0.73 1.99,-1.05 3.11,-1.1 1.11,-0.06 2.22,0.12 3.33,0.28 2.61,0.38 5.23,0.67 7.78,1.33 1.61,0.42 3.18,0.98 4.78,1.4 2.68,0.72 5.49,1.06 8.24,0.74 2.97,-0.34 5.85,-1.44 8.83,-1.37 1.23,0.03 2.44,0.26 3.61,0.62 1.19,0.37 2.37,0.9 3.25,1.78 0.66,0.67 1.11,1.51 1.48,2.38 0.53,1.29 0.89,2.67 0.91,4.07 0.03,1.46 -0.28,2.92 -0.09,4.37 0.16,1.17 0.66,2.28 1.3,3.28 0.63,1 1.4,1.91 2.17,2.81 1.48,1.75 2.96,3.53 4.82,4.87 2.11,1.53 4.62,2.43 6.8,3.85 0.65,0.43 1.28,0.91 1.74,1.54 0.78,1.06 0.98,2.5 0.54,3.74 z"/>
+				<path id="foot_right_layer_2" fill="#f5c021" filter="url(#blur_foot_right_layer_2)" clip-path="url(#clip_foot_right)" d="m 212.91,214.61 c -0.6,1.35 -1.37,2.6 -2.28,3.71 -2.12,2.58 -4.99,4.35 -8,5.49 -4.97,1.88 -10.39,2.13 -15.26,4.27 -2.97,1.3 -5.65,3.26 -8.36,5.12 -2.18,1.49 -4.42,2.94 -6.82,3.98 -2.72,1.19 -5.6,1.85 -8.5,2.32 -1.84,0.29 -3.71,0.51 -5.57,0.41 -1.86,-0.1 -3.72,-0.54 -5.37,-1.49 -1.24,-0.72 -2.36,-1.75 -3.03,-3.1 -0.73,-1.49 -0.86,-3.24 -0.85,-4.94 0.05,-4.5 1.02,-8.96 0.99,-13.47 -0.03,-3.93 -0.81,-7.8 -1.03,-11.72 -0.43,-7.54 1.19,-15.2 -0.24,-22.59 -0.22,-1.19 -0.53,-2.37 -0.52,-3.58 0.01,-0.6 0.1,-1.21 0.31,-1.77 0.22,-0.55 0.56,-1.06 1.01,-1.42 0.39,-0.29 0.84,-0.47 1.31,-0.56 0.46,-0.08 0.94,-0.06 1.41,0.01 0.93,0.15 1.82,0.51 2.73,0.78 2.6,0.78 5.35,0.76 8,1.35 1.66,0.36 3.26,0.97 4.91,1.41 2.75,0.76 5.63,1.08 8.46,0.75 3.04,-0.36 6.01,-1.46 9.07,-1.38 1.26,0.03 2.5,0.26 3.71,0.62 1.21,0.36 2.42,0.87 3.34,1.8 0.65,0.67 1.13,1.52 1.51,2.4 0.57,1.29 0.96,2.69 0.95,4.11 -0.01,0.74 -0.12,1.47 -0.19,2.21 -0.06,0.74 -0.08,1.49 0.09,2.2 0.18,0.72 0.55,1.37 0.97,1.96 0.42,0.59 0.9,1.12 1.34,1.7 1.22,1.61 2.1,3.49 3.05,5.3 0.95,1.81 2.02,3.6 3.53,4.91 2.05,1.77 4.7,2.48 6.99,3.89 0.67,0.41 1.31,0.89 1.78,1.55 0.38,0.52 0.63,1.15 0.73,1.81 0.09,0.65 0.03,1.34 -0.17,1.96 z"/>
+				<path id="foot_right_glare" fill="url(#fill_foot_right_glare)" filter="url(#blur_foot_right_glare)" clip-path="url(#clip_foot_right)" d="m 148.08,181.58 c 2.82,-0.76 5.22,1.38 7.27,2.99 1.32,1.13 3.24,0.85 4.86,0.9 2.69,-0.09 5.36,0.45 8.05,0.12 5.3,-0.45 10.49,-1.75 15.81,-1.97 2.54,-0.16 5.4,-0.31 7.59,1.17 0.89,0.62 2.2,3.23 3.07,2.25 -0.36,-2.74 -2.39,-5.39 -5.11,-6.12 -2.14,-0.34 -4.3,0.25 -6.46,0.06 -6.39,-0.15 -12.75,-1.34 -19.16,-1 -4.46,0.04 -8.91,-0.17 -13.37,-0.34 -1.75,-0.36 -2.37,1.19 -3.32,1.79 0.25,0.19 0.34,0.25 0.77,0.15 z"/>
+			</g>
+		</g>
+		<g id="wing_tip_right">
+			<g id="wing_tip_right_shadow">
+				<path id="wing_tip_right_shadow_lower" opacity="0.35" fill="url(#fill_wing_tip_right_shadow_lower)" filter="url(#blur_wing_tip_right_shadow_lower)" clip-path="url(#clip_foot_right)" d="m 185.49,187.61 c -0.48,-0.95 -1.36,-1.66 -2.35,-2.07 -0.98,-0.41 -2.06,-0.55 -3.13,-0.54 -2.13,0.02 -4.25,0.57 -6.38,0.39 -1.79,-0.16 -3.49,-0.83 -5.24,-1.26 -1.81,-0.44 -3.73,-0.61 -5.52,-0.12 -1.92,0.52 -3.61,1.81 -4.67,3.49 -0.94,1.48 -1.38,3.23 -1.52,4.98 -0.14,1.75 0.01,3.5 0.19,5.25 0.12,1.26 0.27,2.52 0.57,3.75 0.31,1.23 0.78,2.43 1.52,3.46 1.07,1.48 2.66,2.54 4.37,3.17 2.8,1.03 5.98,0.98 8.73,-0.15 4.88,-2.12 9.01,-5.92 11.52,-10.6 0.91,-1.68 1.61,-3.47 2.06,-5.31 0.18,-0.74 0.32,-1.49 0.32,-2.25 0.01,-0.75 -0.12,-1.52 -0.47,-2.19 z"/>
+				<path id="wing_tip_right_shadow_upper" opacity="0.35" fill="url(#fill_wing_tip_right_shadow_upper)" filter="url(#blur_wing_tip_right_shadow_upper)" clip-path="url(#clip_foot_right)" d="m 185.49,184.89 c -0.48,-0.69 -1.36,-1.2 -2.35,-1.5 -0.98,-0.3 -2.06,-0.39 -3.13,-0.39 -2.13,0.02 -4.25,0.42 -6.38,0.28 -1.79,-0.11 -3.49,-0.6 -5.24,-0.9 -1.81,-0.32 -3.73,-0.45 -5.52,-0.09 -1.92,0.37 -3.61,1.3 -4.67,2.52 -0.94,1.07 -1.38,2.34 -1.52,3.6 -0.14,1.26 0.01,2.53 0.19,3.79 0.12,0.91 0.27,1.83 0.57,2.72 0.31,0.89 0.78,1.76 1.52,2.5 1.07,1.07 2.66,1.83 4.37,2.29 2.8,0.75 5.98,0.71 8.73,-0.11 4.88,-1.53 9.01,-4.28 11.52,-7.66 0.91,-1.22 1.61,-2.51 2.06,-3.84 0.18,-0.54 0.32,-1.08 0.32,-1.62 0.01,-0.55 -0.12,-1.11 -0.47,-1.59 z"/>
+			</g>
+			<path id="wing_tip_right_base" fill="#020204" d="m 189.55,178.72 c -0.35,-0.95 -0.97,-1.79 -1.72,-2.47 -0.75,-0.68 -1.64,-1.2 -2.57,-1.6 -1.86,-0.79 -3.89,-1.09 -5.89,-1.46 -1.87,-0.35 -3.74,-0.78 -5.62,-1.1 -1.96,-0.33 -3.98,-0.55 -5.92,-0.11 -1.69,0.38 -3.26,1.26 -4.54,2.43 -1.28,1.17 -2.28,2.63 -3,4.21 -1.27,2.79 -1.67,5.92 -1.43,8.97 0.18,2.27 0.76,4.61 2.25,6.32 1.21,1.39 2.92,2.26 4.68,2.78 3.04,0.9 6.35,0.85 9.36,-0.13 4.97,-1.67 9.37,-4.98 12.35,-9.29 0.98,-1.43 1.82,-2.98 2.2,-4.66 0.29,-1.28 0.3,-2.66 -0.15,-3.89 z"/>
+			<g id="wing_tip_right_glare">
+				<defs>
+					<path id="path_wing_tip_right_glare" d="m 168.89,171.07 c -0.47,0.03 -0.93,0.08 -1.4,0.17 -2.99,0.53 -5.73,2.42 -7.27,5.03 -1.09,1.85 -1.58,4.03 -1.43,6.17 0.07,-1.5 0.46,-2.97 1.19,-4.28 1.23,-2.23 3.47,-3.91 5.98,-4.37 1.54,-0.28 3.13,-0.11 4.68,0.08 1.5,0.19 3,0.39 4.47,0.7 2.28,0.5 4.53,1.26 6.44,2.59 0.44,0.31 0.86,0.66 1.21,1.08 0.35,0.41 0.62,0.89 0.73,1.42 0.15,0.78 -0.07,1.6 -0.46,2.29 -0.39,0.7 -0.92,1.3 -1.48,1.86 -0.46,0.46 -0.94,0.89 -1.43,1.32 2.21,-0.43 4.44,-1.03 6.28,-2.31 0.77,-0.55 1.48,-1.2 1.94,-2.02 0.46,-0.83 0.65,-1.83 0.43,-2.75 -0.16,-0.62 -0.5,-1.19 -0.92,-1.67 -0.42,-0.48 -0.93,-0.87 -1.45,-1.24 -2.31,-1.62 -5.01,-2.65 -7.81,-2.99 -1.8,-0.33 -3.61,-0.61 -5.42,-0.83 -1.41,-0.18 -2.86,-0.33 -4.28,-0.25 z"/>
+				</defs>
+				<use id="wing_tip_right_glare_1" href="#path_wing_tip_right_glare" xlink:href="#path_wing_tip_right_glare" fill="url(#fill_wing_tip_right_glare_1)" filter="url(#blur_wing_tip_right_glare)" clip-path="url(#clip_wing_tip_right)"/>
+				<use id="wing_tip_right_glare_2" href="#path_wing_tip_right_glare" xlink:href="#path_wing_tip_right_glare" fill="url(#fill_wing_tip_right_glare_2)" filter="url(#blur_wing_tip_right_glare)" clip-path="url(#clip_wing_tip_right)"/>
+			</g>
+		</g>
+		<g id="face">
+			<g id="eyes">
+				<g id="eye_left">
+					<path id="eyeball_left" fill="url(#fill_eyeball_left)" d="m 84.45,38.28 c -1.53,0.08 -3,0.79 -4.12,1.84 -1.13,1.05 -1.92,2.43 -2.41,3.88 -0.97,2.92 -0.75,6.08 -0.53,9.15 0.2,2.77 0.41,5.6 1.45,8.18 0.52,1.3 1.25,2.51 2.22,3.51 0.97,0.99 2.2,1.76 3.55,2.09 1.26,0.32 2.62,0.26 3.86,-0.13 1.25,-0.4 2.38,-1.11 3.32,-2.02 1.36,-1.33 2.27,-3.07 2.8,-4.9 0.53,-1.83 0.68,-3.75 0.65,-5.66 -0.04,-2.38 -0.35,-4.77 -1.09,-7.03 -0.75,-2.26 -1.94,-4.4 -3.6,-6.11 -0.8,-0.83 -1.72,-1.55 -2.75,-2.06 -1.04,-0.51 -2.2,-0.8 -3.35,-0.74 z"/>
+					<g id="pupil_left">
+						<path id="pupil_left_base" fill="#020204" d="m 80.75,50.99 c -0.32,1.94 -0.33,3.97 0.33,5.81 0.44,1.22 1.17,2.33 2.05,3.28 0.57,0.62 1.23,1.18 1.99,1.55 0.77,0.37 1.65,0.52 2.48,0.32 0.76,-0.19 1.42,-0.68 1.91,-1.29 0.49,-0.61 0.82,-1.34 1.05,-2.09 0.69,-2.21 0.58,-4.62 -0.11,-6.83 -0.49,-1.61 -1.32,-3.16 -2.6,-4.24 -0.62,-0.52 -1.34,-0.93 -2.12,-1.11 -0.78,-0.19 -1.63,-0.14 -2.36,0.19 -0.81,0.37 -1.44,1.07 -1.85,1.86 -0.41,0.79 -0.62,1.67 -0.77,2.55 z"/>
+						<path id="pupil_left_glare" fill="url(#fill_pupil_left_glare)" filter="url(#blur_pupil_left_glare)" clip-path="url(#clip_pupil_left)" d="m 84.84,49.59 c 0.21,0.55 0.91,0.75 1.3,1.19 0.37,0.42 0.76,0.87 0.97,1.4 0.39,1.01 -0.39,2.51 0.43,3.23 0.25,0.22 0.77,0.23 1.02,0 0.99,-0.9 0.77,-2.71 0.38,-3.99 -0.36,-1.15 -1.23,-2.25 -2.31,-2.8 -0.5,-0.26 -1.25,-0.47 -1.68,-0.11 -0.27,0.24 -0.24,0.74 -0.11,1.08 z"/>
+					</g>
+					<path id="eyelid_left" fill="url(#fill_eyelid_left)" clip-path="url(#clip_eye_left)" d="m 81.14,44.46 c 2.32,-1.38 5.13,-1.7 7.82,-1.45 2.68,0.26 5.27,1.04 7.87,1.75 1.91,0.52 3.84,1 5.63,1.84 1.78,0.84 3.44,2.08 4.43,3.8 0.16,0.27 0.29,0.56 0.46,0.83 0.17,0.27 0.37,0.52 0.62,0.71 0.25,0.19 0.57,0.32 0.88,0.3 0.16,-0.01 0.32,-0.05 0.45,-0.13 0.14,-0.08 0.26,-0.2 0.33,-0.34 0.08,-0.16 0.11,-0.35 0.1,-0.53 -0.01,-0.18 -0.05,-0.36 -0.1,-0.54 -0.65,-2.37 -2.19,-4.38 -3.35,-6.55 -0.7,-1.3 -1.28,-2.66 -1.98,-3.96 -2.43,-4.45 -6.42,-7.94 -10.95,-10.21 -4.53,-2.27 -9.59,-3.36 -14.65,-3.65 -5.86,-0.35 -11.73,0.35 -17.51,1.37 -2.51,0.44 -5.06,0.96 -7.27,2.21 -1.11,0.62 -2.13,1.42 -2.92,2.42 -0.8,0.99 -1.36,2.18 -1.55,3.44 -0.17,1.22 0.01,2.47 0.44,3.62 0.42,1.15 1.08,2.2 1.86,3.15 1.54,1.91 3.53,3.39 5.36,5.03 1.83,1.63 3.52,3.44 5.57,4.79 1.02,0.68 2.13,1.24 3.31,1.57 1.18,0.33 2.44,0.42 3.64,0.17 1.24,-0.25 2.4,-0.86 3.41,-1.64 1.01,-0.77 1.88,-1.7 2.71,-2.66 1.66,-1.93 3.21,-4.04 5.39,-5.34 z"/>
+					<path id="eyebrow_left" fill="url(#fill_eyebrow_left)" filter="url(#blur_eyebrow_left)" d="m 90.77,36.57 c 2.16,2.02 3.76,4.52 4.85,7.16 -0.48,-2.91 -1.23,-5.26 -3.13,-7.16 -1.16,-1.09 -2.49,-2.05 -3.98,-2.72 -1.32,-0.59 -2.77,-0.96 -3.61,-0.97 -0.83,-0.02 -1.03,0 -1.2,0.01 -0.18,0.01 -0.31,0.01 0.23,0.08 0.54,0.06 1.75,0.39 3.05,0.97 1.3,0.58 2.62,1.54 3.79,2.63 z"/>
+				</g>
+				<g id="eye_right">
+					<path id="eyeball_right" fill="url(#fill_eyeball_right)" d="m 111.61,38.28 c -2.39,1.65 -4.4,3.94 -5.38,6.68 -1.24,3.45 -0.77,7.31 0.43,10.77 1.22,3.55 3.27,6.93 6.36,9.06 1.54,1.07 3.33,1.8 5.19,2.02 1.87,0.22 3.8,-0.09 5.47,-0.95 2.02,-1.06 3.57,-2.91 4.53,-4.98 0.96,-2.08 1.37,-4.37 1.5,-6.66 0.16,-2.9 -0.12,-5.86 -1.08,-8.61 -1.04,-2.99 -2.92,-5.75 -5.58,-7.47 -1.32,-0.86 -2.83,-1.45 -4.4,-1.67 -1.57,-0.22 -3.19,-0.05 -4.67,0.52 -0.84,0.33 -1.62,0.78 -2.37,1.29 z"/>
+					<g id="pupil_right">
+						<path id="pupil_right_base" fill="#020204" d="m 117.14,45.52 c -0.9,0.06 -1.78,0.37 -2.55,0.85 -0.76,0.48 -1.41,1.13 -1.92,1.88 -1.03,1.49 -1.48,3.31 -1.55,5.12 -0.05,1.35 0.1,2.72 0.55,4 0.45,1.28 1.2,2.47 2.25,3.33 1.07,0.89 2.42,1.42 3.81,1.49 1.39,0.06 2.79,-0.34 3.93,-1.13 0.91,-0.63 1.64,-1.5 2.16,-2.48 0.52,-0.97 0.84,-2.05 0.98,-3.15 0.25,-1.93 -0.03,-3.95 -0.93,-5.69 -0.89,-1.74 -2.41,-3.17 -4.24,-3.84 -0.8,-0.29 -1.65,-0.44 -2.49,-0.38 z"/>
+						<path id="pupil_right_glare" fill="url(#fill_pupil_right_glare)" filter="url(#blur_pupil_right_glare)" clip-path="url(#clip_pupil_right)" d="m 122.71,53.36 c 1,-1 -0.71,-3.65 -2.05,-4.74 -0.97,-0.78 -3.78,-1.61 -3.66,-0.75 0.12,0.85 1.39,1.95 2.23,2.79 1.05,1.03 3,3.18 3.48,2.7 z"/>
+					</g>
+					<path id="eyelid_right" fill="url(#fill_eyelid_right)" clip-path="url(#clip_eye_right)" d="m 102.56,47.01 c 2.06,-1.71 4.45,-3.01 7,-3.8 5.25,-1.62 11.2,-0.98 15.84,1.97 1.6,1.01 3.03,2.27 4.52,3.45 1.48,1.17 3.06,2.27 4.85,2.9 0.97,0.34 2,0.54 3.02,0.43 0.92,-0.09 1.81,-0.44 2.57,-0.96 0.76,-0.53 1.4,-1.23 1.88,-2.02 0.96,-1.58 1.27,-3.5 1.1,-5.34 -0.33,-3.69 -2.41,-6.94 -4.15,-10.21 -0.55,-1.02 -1.07,-2.06 -1.73,-3.01 -2.01,-2.93 -5.23,-4.86 -8.6,-5.99 -3.37,-1.13 -6.93,-1.54 -10.46,-1.98 -1.58,-0.2 -3.17,-0.41 -4.74,-0.22 -1.81,0.22 -3.51,0.95 -5.28,1.4 -0.84,0.22 -1.69,0.37 -2.52,0.61 -0.83,0.24 -1.65,0.57 -2.33,1.11 -0.98,0.79 -1.6,1.98 -1.87,3.21 -0.27,1.24 -0.21,2.52 -0.01,3.77 0.39,2.5 1.33,4.93 1.24,7.46 -0.06,1.73 -0.61,3.44 -0.54,5.17 0.02,0.51 0.12,1.55 0.21,2.05 z"/>
+					<path id="eyebrow_right" fill="url(#fill_eyebrow_right)" filter="url(#blur_eyebrow_right)" d="m 119.93,31.18 c -0.41,0.52 -0.78,1.08 -1.07,1.7 1.85,0.4 3.61,1.16 5.19,2.21 3.06,2.03 5.38,4.99 7.01,8.29 0.38,-0.42 0.72,-0.87 1.02,-1.37 -1.64,-3.44 -4,-6.55 -7.16,-8.65 -1.52,-1 -3.21,-1.77 -4.99,-2.18 z"/>
+				</g>
+			</g>
+			<g id="beak">
+				<g id="beak_shadow">
+					<path id="beak_shadow_lower" fill="#000000" fill-opacity="0.258824" filter="url(#blur_beak_shadow_lower)" clip-path="url(#clip_body)" d="m 81.12,89.33 c 1.47,4.26 4.42,7.89 7.92,10.72 1.16,0.95 2.39,1.82 3.76,2.43 1.36,0.62 2.87,0.97 4.36,0.84 1.46,-0.12 2.85,-0.7 4.13,-1.42 1.28,-0.72 2.46,-1.59 3.7,-2.37 2.12,-1.35 4.39,-2.44 6.6,-3.64 2.65,-1.45 5.23,-3.1 7.46,-5.14 1.03,-0.93 1.98,-1.95 3.11,-2.75 1.13,-0.81 2.49,-1.39 3.87,-1.29 1.04,0.07 2.01,0.51 3.03,0.73 0.51,0.11 1.03,0.16 1.55,0.08 0.51,-0.08 1.01,-0.29 1.37,-0.67 0.44,-0.46 0.64,-1.12 0.61,-1.76 -0.02,-0.63 -0.24,-1.25 -0.54,-1.81 -0.59,-1.13 -1.49,-2.1 -1.89,-3.31 -0.36,-1.08 -0.29,-2.24 -0.26,-3.37 0.03,-1.14 0.01,-2.32 -0.51,-3.33 -0.4,-0.76 -1.07,-1.37 -1.83,-1.77 -0.76,-0.41 -1.62,-0.62 -2.48,-0.7 -1.72,-0.16 -3.44,0.18 -5.17,0.27 -2.28,0.13 -4.58,-0.15 -6.87,-0.02 -2.85,0.18 -5.65,1 -8.51,1.01 -3.26,0.01 -6.52,-1.06 -9.74,-0.55 -1.39,0.22 -2.71,0.72 -4.03,1.16 -1.33,0.45 -2.7,0.84 -4.1,0.82 -1.59,-0.03 -3.13,-0.58 -4.72,-0.69 -0.79,-0.06 -1.6,0 -2.35,0.28 -0.74,0.28 -1.41,0.79 -1.78,1.5 -0.21,0.4 -0.31,0.86 -0.33,1.31 -0.02,0.46 0.04,0.91 0.15,1.36 0.22,0.88 0.63,1.71 0.96,2.55 1.2,3.07 1.46,6.42 2.53,9.53 z"/>
+					<path id="beak_shadow_upper" opacity="0.3" fill="#000000" filter="url(#blur_beak_shadow_upper)" clip-path="url(#clip_body)" d="m 77.03,77.2 c 2.85,1.76 5.41,3.93 7.56,6.39 1.99,2.29 3.68,4.89 6.29,6.58 1.83,1.2 4.04,1.87 6.28,2.08 2.63,0.24 5.29,-0.15 7.83,-0.84 2.35,-0.63 4.62,-1.53 6.7,-2.71 3.97,-2.25 7.28,-5.55 11.65,-7.03 0.95,-0.33 1.94,-0.56 2.86,-0.96 0.92,-0.39 1.79,-0.99 2.23,-1.83 0.42,-0.82 0.4,-1.75 0.54,-2.64 0.15,-0.96 0.48,-1.88 0.66,-2.83 0.18,-0.95 0.2,-1.96 -0.24,-2.83 -0.37,-0.72 -1.04,-1.29 -1.81,-1.66 -0.77,-0.36 -1.64,-0.52 -2.51,-0.56 -1.72,-0.08 -3.43,0.33 -5.16,0.47 -2.28,0.19 -4.58,-0.08 -6.87,-0.01 -2.85,0.08 -5.66,0.67 -8.51,0.8 -3.25,0.14 -6.49,-0.34 -9.74,-0.44 -1.41,-0.05 -2.83,-0.03 -4.21,0.2 -1.39,0.22 -2.75,0.65 -3.92,1.37 -1.14,0.69 -2.07,1.64 -3.11,2.45 -0.52,0.41 -1.08,0.78 -1.68,1.07 -0.61,0.28 -1.28,0.48 -1.96,0.51 -0.35,0.01 -0.71,-0.01 -1.05,0.04 -0.59,0.08 -1.13,0.39 -1.47,0.83 -0.34,0.45 -0.47,1.02 -0.36,1.55 z"/>
+				</g>
+				<path id="beak_base" fill="url(#fill_beak_base)" d="m 91.66,58.53 c 1.53,-1.71 2.57,-3.8 4.03,-5.56 0.73,-0.88 1.58,-1.69 2.57,-2.26 0.99,-0.57 2.15,-0.89 3.29,-0.79 1.27,0.11 2.46,0.74 3.39,1.61 0.93,0.87 1.62,1.97 2.17,3.12 0.53,1.11 0.95,2.28 1.71,3.24 0.81,1.02 1.94,1.71 2.97,2.52 0.51,0.4 1.01,0.83 1.41,1.34 0.41,0.51 0.72,1.1 0.86,1.74 0.13,0.65 0.06,1.33 -0.16,1.95 -0.23,0.62 -0.61,1.18 -1.09,1.64 -0.95,0.92 -2.25,1.42 -3.56,1.6 -2.62,0.37 -5.27,-0.41 -7.92,-0.34 -2.67,0.08 -5.29,1.02 -7.97,0.93 -1.33,-0.05 -2.69,-0.38 -3.79,-1.14 -0.55,-0.39 -1.03,-0.88 -1.38,-1.45 -0.34,-0.57 -0.55,-1.23 -0.58,-1.9 -0.02,-0.64 0.13,-1.28 0.39,-1.86 0.25,-0.59 0.61,-1.12 1.01,-1.62 0.81,-0.99 1.8,-1.81 2.65,-2.77 z"/>
+				<g id="mandible_lower">
+					<path id="mandible_lower_base" fill="url(#fill_mandible_lower_base)" d="m 77.14,75.05 c 0.06,0.26 0.15,0.5 0.28,0.73 0.23,0.38 0.57,0.69 0.93,0.95 0.36,0.27 0.75,0.49 1.13,0.72 2.01,1.27 3.65,3.04 5.11,4.92 1.95,2.52 3.68,5.31 6.29,7.14 1.84,1.3 4.04,2.03 6.28,2.26 2.63,0.26 5.29,-0.16 7.83,-0.91 2.35,-0.69 4.62,-1.66 6.7,-2.95 3.97,-2.44 7.28,-6.02 11.65,-7.63 0.95,-0.35 1.94,-0.6 2.86,-1.03 0.92,-0.44 1.79,-1.08 2.23,-2 0.42,-0.88 0.4,-1.9 0.54,-2.87 0.15,-1.03 0.48,-2.03 0.66,-3.06 0.18,-1.03 0.2,-2.13 -0.24,-3.08 -0.37,-0.78 -1.04,-1.4 -1.81,-1.79 -0.77,-0.4 -1.64,-0.58 -2.51,-0.62 -1.72,-0.08 -3.43,0.36 -5.16,0.52 -2.28,0.21 -4.58,-0.09 -6.87,-0.02 -2.85,0.09 -5.66,0.73 -8.51,0.87 -3.25,0.15 -6.49,-0.35 -9.74,-0.48 -1.41,-0.06 -2.83,-0.04 -4.22,0.2 -1.39,0.23 -2.75,0.71 -3.91,1.51 -1.13,0.78 -2.03,1.84 -3.07,2.74 -0.52,0.45 -1.08,0.86 -1.7,1.16 -0.61,0.3 -1.29,0.49 -1.98,0.47 -0.35,-0.01 -0.72,-0.06 -1.05,0.04 -0.21,0.07 -0.4,0.2 -0.56,0.35 -0.16,0.16 -0.29,0.34 -0.41,0.52 -0.29,0.42 -0.54,0.87 -0.75,1.34 z"/>
+					<path id="mandible_lower_glare" fill="#d9b30d" filter="url(#blur_mandible_lower_glare)" clip-path="url(#clip_mandible_lower)" d="m 89.9,78.56 c -0.33,1.37 -0.13,2.87 0.56,4.11 0.68,1.24 1.84,2.2 3.19,2.65 1.7,0.57 3.62,0.29 5.21,-0.54 0.93,-0.48 1.77,-1.16 2.3,-2.06 0.27,-0.44 0.46,-0.94 0.53,-1.46 0.06,-0.51 0.02,-1.05 -0.16,-1.54 -0.2,-0.53 -0.56,-1 -0.99,-1.37 -0.44,-0.37 -0.95,-0.64 -1.5,-0.82 -1.08,-0.36 -2.77,-0.66 -3.91,-0.68 -2.02,-0.04 -4.9,0.34 -5.23,1.71 z"/>
+				</g>
+				<g id="mandible_upper">
+					<path id="mandible_upper_shadow" fill="#604405" filter="url(#blur_mandible_upper_shadow)" clip-path="url(#clip_mandible_lower)" d="m 84.31,67.86 c -1.16,0.68 -2.27,1.43 -3.36,2.2 -0.57,0.41 -1.15,0.84 -1.45,1.47 -0.21,0.44 -0.26,0.94 -0.27,1.43 0,0.5 0.03,0.99 -0.04,1.48 -0.04,0.33 -0.13,0.66 -0.14,0.99 -0.01,0.17 0,0.34 0.04,0.5 0.05,0.16 0.13,0.32 0.24,0.44 0.15,0.16 0.35,0.26 0.56,0.32 0.21,0.06 0.42,0.09 0.64,0.14 1.01,0.24 1.89,0.86 2.66,1.56 0.77,0.69 1.47,1.48 2.28,2.13 2.18,1.78 5.07,2.52 7.89,2.56 2.82,0.05 5.61,-0.54 8.36,-1.16 2.16,-0.49 4.32,-0.99 6.39,-1.76 3.2,-1.18 6.16,-2.96 8.72,-5.19 1.17,-1.01 2.26,-2.12 3.57,-2.94 1.15,-0.73 2.44,-1.21 3.62,-1.9 0.11,-0.06 0.21,-0.13 0.3,-0.2 0.1,-0.08 0.18,-0.18 0.24,-0.28 0.09,-0.19 0.09,-0.42 0.03,-0.62 -0.06,-0.2 -0.18,-0.38 -0.31,-0.55 -0.15,-0.18 -0.31,-0.34 -0.49,-0.5 -1.23,-1.05 -2.89,-1.43 -4.51,-1.56 -1.61,-0.12 -3.24,-0.03 -4.83,-0.3 -1.5,-0.25 -2.92,-0.81 -4.37,-1.27 -1.52,-0.49 -3.07,-0.87 -4.64,-1.13 -3.71,-0.61 -7.52,-0.49 -11.19,0.27 -3.49,0.73 -6.87,2.05 -9.94,3.87 z"/>
+					<path id="mandible_upper_base" fill="url(#fill_mandible_upper_base)" d="m 83.94,63.95 c -1.66,1.12 -3.16,2.49 -4.43,4.04 -0.72,0.89 -1.38,1.86 -1.74,2.94 -0.29,0.86 -0.39,1.76 -0.57,2.65 -0.07,0.33 -0.15,0.66 -0.14,1 0,0.16 0.02,0.33 0.07,0.5 0.05,0.16 0.14,0.31 0.25,0.43 0.2,0.2 0.47,0.31 0.74,0.37 0.28,0.05 0.56,0.06 0.84,0.09 1.25,0.15 2.4,0.75 3.44,1.47 1.04,0.71 2,1.55 3.07,2.22 2.35,1.49 5.16,2.15 7.95,2.26 2.78,0.11 5.56,-0.31 8.3,-0.86 2.17,-0.43 4.33,-0.95 6.39,-1.76 3.16,-1.25 6.01,-3.16 8.72,-5.19 1.24,-0.92 2.46,-1.87 3.57,-2.94 0.37,-0.37 0.74,-0.74 1.14,-1.08 0.4,-0.33 0.85,-0.62 1.35,-0.78 0.76,-0.24 1.58,-0.17 2.37,-0.04 0.59,0.1 1.18,0.23 1.78,0.21 0.3,-0.02 0.6,-0.07 0.88,-0.18 0.28,-0.11 0.54,-0.28 0.73,-0.52 0.25,-0.3 0.38,-0.7 0.38,-1.09 0,-0.4 -0.12,-0.79 -0.32,-1.13 -0.4,-0.68 -1.09,-1.14 -1.81,-1.46 -0.99,-0.44 -2.06,-0.65 -3.11,-0.91 -3.23,-0.78 -6.37,-1.93 -9.34,-3.41 -1.48,-0.73 -2.92,-1.54 -4.37,-2.32 -1.5,-0.8 -3.02,-1.57 -4.64,-2.07 -3.64,-1.1 -7.6,-0.74 -11.19,0.51 -3.98,1.38 -7.58,3.84 -10.31,7.05 z"/>
+					<path id="mandible_upper_glare" fill="#f6da4a" filter="url(#blur_mandible_upper_glare)" clip-path="url(#clip_mandible_upper)" d="m 109.45,64.75 c -0.2,-0.24 -0.48,-0.42 -0.78,-0.51 -0.3,-0.09 -0.62,-0.09 -0.93,-0.04 -0.62,0.11 -1.18,0.44 -1.7,0.8 -1.47,1.01 -2.77,2.26 -3.91,3.64 -1.5,1.83 -2.74,3.94 -3.16,6.27 -0.07,0.39 -0.11,0.8 -0.07,1.19 0.05,0.4 0.2,0.79 0.49,1.07 0.24,0.25 0.58,0.4 0.92,0.45 0.35,0.05 0.71,0 1.04,-0.11 0.66,-0.22 1.21,-0.69 1.74,-1.15 2.87,-2.58 5.47,-5.66 6.51,-9.38 0.1,-0.37 0.19,-0.75 0.19,-1.14 0,-0.39 -0.1,-0.78 -0.34,-1.09 z"/>
+					<path id="naris_left" opacity="0.8" fill="url(#fill_naris_left)" filter="url(#blur_naris_left)" d="m 92.72,59.06 c -0.77,-0.25 -2.03,1.1 -1.62,1.79 0.11,0.19 0.46,0.43 0.7,0.3 0.35,-0.19 0.64,-0.89 1.02,-1.16 0.25,-0.18 0.2,-0.84 -0.1,-0.93 z"/>
+					<path id="naris_right" opacity="0.8" fill="url(#fill_naris_right)" filter="url(#blur_naris_right)" d="m 102.56,59.42 c 0.2,0.64 1.23,0.53 1.83,0.84 0.52,0.27 0.94,0.86 1.53,0.88 0.56,0.01 1.44,-0.2 1.51,-0.76 0.09,-0.73 -0.98,-1.2 -1.67,-1.47 -0.89,-0.34 -2.03,-0.52 -2.86,-0.06 -0.19,0.11 -0.4,0.36 -0.34,0.57 z"/>
+				</g>
+				<path id="beak_corner" fill="url(#fill_beak_corner)" filter="url(#blur_beak_corner)" clip-path="url(#clip_beak)" d="m 129.27,69.15 a 2.42,3.1 16.94 0 1 -2.81,3.04 2.42,3.1 16.94 0 1 -2.12,-3.04 2.42,3.1 16.94 0 1 2.81,-3.05 2.42,3.1 16.94 0 1 2.12,3.05 z"/>
+			</g>
+		</g>
+	</g>
+</svg>
--- a/static/images/TuxAinrom.png
+++ b/static/images/TuxAinrom.png
--- a/static/images/TuxAinrom.webp
+++ b/static/images/TuxAinrom.webp
--- a/static/images/Zorin-17-desktop.webp
+++ b/static/images/Zorin-17-desktop.webp
--- a/static/images/android-chrome-192x192.png
+++ b/static/images/android-chrome-192x192.png
--- a/static/images/android-chrome-512x512.png
+++ b/static/images/android-chrome-512x512.png
--- a/static/images/apple-touch-icon.png
+++ b/static/images/apple-touch-icon.png
--- a/static/images/clippy.png
+++ b/static/images/clippy.png
--- a/static/images/clippy_transparent.png
+++ b/static/images/clippy_transparent.png
--- a/static/images/elementary.png
+++ b/static/images/elementary.png
--- a/static/images/favicon-16x16.png
+++ b/static/images/favicon-16x16.png
--- a/static/images/favicon-32x32.png
+++ b/static/images/favicon-32x32.png
--- a/static/images/fedora.png
+++ b/static/images/fedora.png
--- a/static/images/garuda.svg
+++ b/static/images/garuda.svg
@ -0,0 +1,3 @@
+                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
+                                <path fill="#1e88e5" d="M28.465,38.611c0.419-1.105,0.664-2.365,0.664-3.714c0-4.133-2.211-7.494-4.929-7.494	c-2.741,0-4.951,3.361-4.951,7.494c0,1.326,0.221,2.586,0.641,3.669c-9.041,0.951-15.407,4.731-17.993,6.432	c4.355-6.278,8.909-13.638,13.262-22.105c1.083-2.101,2.101-4.178,3.05-6.211c0.375,0.243,0.751,0.509,1.171,0.775	c1.945,1.215,3.759,1.879,5.084,2.233c-0.973-0.73-2.033-1.613-3.116-2.697c-0.817-0.817-1.547-1.637-2.167-2.433	C21.016,10.538,22.608,6.669,24,3c2.32,6.144,5.217,12.842,8.841,19.893c2.343,4.531,4.731,8.754,7.117,12.644	c-0.685-0.375-1.437-0.73-2.233-1.039c-1.371-0.53-2.652-0.862-3.759-1.06c1.503,0.751,3.25,1.747,5.084,3.073	c1.194,0.885,2.254,1.769,3.161,2.631c0.021,0.021,0.021,0.021,0.045,0.045c1.26,2.056,2.565,3.957,3.846,5.813	C43.561,43.319,37.306,39.605,28.465,38.611z"></path>
+                                </svg>
--- a/static/images/gnome.jpg
+++ b/static/images/gnome.jpg
--- a/static/images/gnome.webp
+++ b/static/images/gnome.webp
--- a/static/images/mint.svg
+++ b/static/images/mint.svg
@ -0,0 +1,3 @@
+                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
+                                    <path fill="#c5e1a5" d="M21.5,44C13.492,44,7,37.508,7,29.5V18H2V4h29.031C39.298,4,46,10.702,46,18.969V44H21.5z"></path><path fill="#689f38" d="M30.031,8H6v6h2c1.657,0,3,1.343,3,3v0v11.5C11,34.851,16.149,40,22.5,40H38c2.209,0,4-1.791,4-4 V19.969C42,13.359,36.641,8,30.031,8z"></path><path fill="#fff" d="M33.5,15c-1.577,0-2.996,0.672-4,1.74c-1.004-1.069-2.423-1.74-4-1.74c-3.033,0-5.5,2.473-5.5,5.512 V28h3v-7.488c0-1.381,1.122-2.505,2.5-2.505S28,19.13,28,20.512V28h3v-7.488v0c0-1.381,1.122-2.505,2.5-2.505S36,19.13,36,20.512 V28.5c0,1.93-1.57,3.5-3.5,3.5h-12c-1.93,0-3.5-1.57-3.5-3.5V12h-3v16.5c0,3.584,2.916,6.5,6.5,6.5h12c3.584,0,6.5-2.916,6.5-6.5 v-7.988C39,17.472,36.533,15,33.5,15z"></path>
+                                </svg>
--- a/static/images/popos.svg
+++ b/static/images/popos.svg
@ -0,0 +1 @@
+                                <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="inxzwh639poeU1X9W8tTQa" x1="7.037" x2="45.033" y1="7.037" y2="45.033" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#05acb3"/><stop offset="1" stop-color="#038387"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQa)" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><linearGradient id="inxzwh639poeU1X9W8tTQb" x1="22.277" x2="31.658" y1="31.726" y2="57.724" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQb)" d="M15.5,38.5h17c1.105,0,2-0.895,2-2v0c0-1.105-0.895-2-2-2h-17c-1.105,0-2,0.895-2,2v0	C13.5,37.605,14.395,38.5,15.5,38.5z"/><linearGradient id="inxzwh639poeU1X9W8tTQc" x1="30.056" x2="40.896" y1="16.127" y2="46.17" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQc)" d="M34,16c-3-1-3.5,0.5-4,2.5c-0.618,2.473-1,7-1,8.5s1,2,2,0.5s4-6.5,4.5-8S35.956,16.652,34,16	z"/><linearGradient id="inxzwh639poeU1X9W8tTQd" x1="28.561" x2="31.626" y1="29.85" y2="38.346" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQd)" d="M27.996,30.447c-0.642,0.833-0.433,2.571,1.067,2.589c0.938,0.011,1.584-0.887,1.509-2.029	C30.518,30.184,29.104,29.01,27.996,30.447z"/><linearGradient id="inxzwh639poeU1X9W8tTQe" x1="17.026" x2="40.638" y1="8.349" y2="73.788" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0f0f0"/><stop offset="1" stop-color="#fff"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQe)" d="M26,12c-3.056-5.239-8.399-4.379-13.366-0.748c-1.265,0.924-1.651,2.649-0.91,4.029	l8.91,16.606c0.49,0.913,1.596,1.3,2.549,0.892h0c1.006-0.431,1.479-1.591,1.059-2.602c-0.819-1.975-2.095-5.059-2.742-6.677	C23.5,22.5,29.846,18.592,26,12z M21.352,19.609c-0.515,0.303-1.907,0.452-3.239-2.812c-1.213-2.971-0.849-4.335-0.212-4.547	s1.971,0.485,3.244,3.001C22.418,17.767,21.868,19.306,21.352,19.609z"/></svg>
--- a/static/images/ubuntu.png
+++ b/static/images/ubuntu.png
--- a/static/style.css
+++ b/static/style.css
--- a/templates/contact.html
+++ b/templates/contact.html
@ -4,44 +4,83 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Title}}</title>
-    <link rel="stylesheet" href="/static/style.css">
+    
+    <!-- Basic SEO Meta Tags -->
+    <meta name="description" content="Neem contact op met {{.CompanyName}} voor Linux-migratieservice. Gratis advies, installatie, datamigratie en ondersteuning in gemeente Het Hogeland.">
+    <meta name="keywords" content="contact, Linux service, Windows 10 migratie, Het Hogeland, Eenrum, gratis advies, installatie">
+    <meta name="author" content="{{.CompanyName}}">
+    <meta name="robots" content="index, follow">
+    <meta name="language" content="nl">
+    
+    <!-- Open Graph Meta Tags for Social Media -->
+    <meta property="og:title" content="{{.Title}}">
+    <meta property="og:description" content="Neem contact op met {{.CompanyName}} voor Linux-migratieservice. Gratis advies, installatie, datamigratie en ondersteuning in gemeente Het Hogeland.">
+    <meta property="og:image" content="https://{{.Domain}}/static/images/TuxAinrom.webp">
+    <meta property="og:image:alt" content="Tux Linux mascotte banner voor Hogeland Linux service">
+    <meta property="og:url" content="https://{{.Domain}}/contact">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="{{.CompanyName}}">
+    <meta property="og:locale" content="nl_NL">
+    
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="{{.Title}}">
+    <meta name="twitter:description" content="Neem contact op met {{.CompanyName}} voor Linux-migratieservice. Gratis advies en ondersteuning.">
+    <meta name="twitter:image" content="https://{{.Domain}}/static/images/TuxAinrom.webp">
+    <meta name="twitter:image:alt" content="Tux Linux mascotte banner voor Hogeland Linux service">
+    
+    <!-- Favicon Links -->
+    <link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
+    <link rel="manifest" href="/static/icons/manifest.json">
+    
+    <!-- Theme Color for Mobile Browsers -->
+    <meta name="theme-color" content="#059669">
+    <meta name="msapplication-TileColor" content="#059669">
+    
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://{{.Domain}}/contact">
+    
+    <!-- Preload Critical Resources -->
+    <link rel="preload" href="/static/css/style.css" as="style">
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" as="style">
+    
+    <!-- CSS and Fonts -->
+    <link rel="stylesheet" href="/static/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
-    <header>
-        <nav class="navbar">
-            <div class="nav-container">
-                <div class="nav-logo">
-                    <h1><a href="/">{{.CompanyName}}</a></h1>
-                </div>
-                <ul class="nav-links">
-                    <li><a href="/">Home</a></li>
-                    <li><a href="/#voordelen">Voordelen</a></li>
-                    <li><a href="/#distros">Linux Keuze</a></li>
-                    <li><a href="/#diensten">Diensten</a></li>
-                    <li><a href="/contact" class="active">Contact</a></li>
-                </ul>
-            </div>
-        </nav>
-    </header>
+    {{template "header" .}}

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

-        <section class="contact-content">
+        <section class="section">
            <div class="container">
                <div class="contact-grid">
                    <div class="contact-info">
                        <h2>Contactgegevens</h2>
+                        <div class="contact-item">
+                            <div class="contact-icon">📍</div>
+                            <div>
+                                <h3>Adres</h3>
+                                <p>{{.Street}}</p>
+                                <p>{{.PostalCode}} {{.Village}}</p>
+                            </div>
+                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">📧</div>
                            <div>
-                                <h3>Email</h3>
+                                <h3>E-mail</h3>
                                <p><a href="mailto:{{.Email}}">{{.Email}}</a></p>
                            </div>
                        </div>
@ -55,56 +94,69 @@
                        <div class="contact-item">
                            <div class="contact-icon">🏢</div>
                            <div>
-                                <h3>KVK Nummer</h3>
+                                <h3>KvK-nummer</h3>
                                <p>{{.KVK}}</p>
                            </div>
                        </div>
                        
                        <div class="contact-hours">
                            <h3>Openingstijden</h3>
-                            <p>Maandag - Vrijdag: 09:00 - 17:00</p>
-                            <p>Weekend: Op afspraak</p>
+                            <p>Maandag - vrijdag: 09:00 - 17:00 (op afspraak)</p>
+                            <p>Weekend: op afspraak</p>
                        </div>
                    </div>

                    <div class="contact-form">
                        <h2>Stuur een bericht</h2>
-                        <form action="#" method="POST">
+                        
+                        {{if .ErrorMessage}}
+                        <div class="alert alert-error">
+                            <strong>❌ Fout:</strong> {{.ErrorMessage}}
+                        </div>
+                        {{end}}
+                        
+                        {{if .SuccessMessage}}
+                        <div class="alert alert-success">
+                            <strong>✅ Gelukt:</strong> {{.SuccessMessage}}
+                        </div>
+                        {{end}}
+                        
+                        <form action="/contact" method="POST">
                            <div class="form-group">
                                <label for="name">Naam *</label>
-                                <input type="text" id="name" name="name" required>
+                                <input type="text" id="name" name="name" value="{{.FormData.Name}}" required>
                            </div>
                            
                            <div class="form-group">
-                                <label for="email">Email *</label>
-                                <input type="email" id="email" name="email" required>
+                                <label for="email">E-mail *</label>
+                                <input type="email" id="email" name="email" value="{{.FormData.Email}}" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="phone">Telefoon</label>
-                                <input type="tel" id="phone" name="phone">
+                                <input type="tel" id="phone" name="phone" value="{{.FormData.Phone}}">
                            </div>
                            
                            <div class="form-group">
                                <label for="computer">Huidige computer</label>
-                                <input type="text" id="computer" name="computer" placeholder="Bijv. Dell Inspiron 2015, HP Pavilion 2018">
+                                <input type="text" id="computer" name="computer" value="{{.FormData.Computer}}" placeholder="Bijv. Dell Inspiron 2015, HP Pavilion 2018">
                            </div>
                            
                            <div class="form-group">
                                <label for="service">Gewenste service</label>
                                <select id="service" name="service">
                                    <option value="">Selecteer een optie</option>
-                                    <option value="advice">Gratis advies</option>
-                                    <option value="installation">Linux installatie</option>
-                                    <option value="migration">Data migratie</option>
-                                    <option value="training">Training & ondersteuning</option>
-                                    <option value="other">Anders</option>
+                                    <option value="advice" {{if eq .FormData.Service "advice"}}selected{{end}}>Gratis advies</option>
+                                    <option value="installation" {{if eq .FormData.Service "installation"}}selected{{end}}>Linux-installatie</option>
+                                    <option value="migration" {{if eq .FormData.Service "migration"}}selected{{end}}>Datamigratie</option>
+                                    <option value="training" {{if eq .FormData.Service "training"}}selected{{end}}>Training en ondersteuning</option>
+                                    <option value="other" {{if eq .FormData.Service "other"}}selected{{end}}>Anders</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="message">Bericht *</label>
-                                <textarea id="message" name="message" rows="5" required placeholder="Vertel ons over uw situatie en hoe wij u kunnen helpen..."></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>
@ -114,57 +166,59 @@
            </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>Jarenlange ervaring met Linux systemen en migraties.</p>
+                        <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>
        </section>
    </main>

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

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h2>Geef uw computer een tweede leven</h2>
-                <p class="hero-subtitle">Windows 10 ondersteuning eindigt binnenkort? Geen probleem! Ontdek hoe Linux uw hardware nieuw leven kan geven.</p>
-                <div class="hero-buttons">
-                    <a href="#voordelen" class="btn btn-primary">Meer weten</a>
-                    <a href="/contact" class="btn btn-secondary">Gratis advies</a>
-                </div>
-            </div>
-            <div class="hero-image">
-                <div class="terminal-window">
-                    <div class="terminal-header">
-                        <div class="terminal-buttons">
-                            <span class="btn-close"></span>
-                            <span class="btn-minimize"></span>
-                            <span class="btn-maximize"></span>
-                        </div>
-                        <div class="terminal-title">Terminal</div>
+                <p class="hero-subtitle">Windows 10-ondersteuning eindigt binnenkort? Ik help u graag overstappen. Ontdek hoe Linux uw hardware nieuw leven kan geven.</p>
+                <div class="hero-buttons hero-buttons--stack">
+                    <div class="hero-buttons-row hero-buttons-row--secondary">
+                        <a href="/contact" class="btn btn-secondary">Gratis advies</a>
+                        <a href="/over-mij" class="btn btn-secondary">Wie ben ik?</a>
                    </div>
-                    <div class="terminal-body">
-                        <div class="terminal-line">
-                            <span class="prompt">ainrommer@computer:~$</span>
-                            <span class="command">sudo pacman -Syu</span>
-                        </div>
-                        <div class="terminal-line">
-                            <span class="output">:: Synchronizing package databases...</span>
-                        </div>
-                        <div class="terminal-line">
-                            <span class="output">✓ Everything is up to date.</span>
-                        </div>
-                        <div class="terminal-line">
-                            <span class="prompt">ainrommer@computer:~$</span>
-                            <span class="command">fastfetch</span>
-                        </div>
-                        <div class="terminal-line">
-                            <span class="output">🔥 Garuda Linux (Dragonized Gaming)</span>
-                        </div>
-                        <div class="terminal-line">
-                            <span class="output">🐧 Linux 6.11.2-zen1-1-zen</span>
-                        </div>
-                        <div class="terminal-line">
-                            <span class="output">💾 8.2 GiB / 16.0 GiB (51%)</span>
-                        </div>
-                        <div class="terminal-line">
-                            <span class="prompt">ainrommer@computer:~$</span>
-                            <span class="cursor">_</span>
-                        </div>
+                    <div class="hero-buttons-row hero-buttons-row--primary">
+                        <a href="#voordelen" class="btn btn-primary">↓ Meer weten</a>
                    </div>
                </div>
            </div>
        </section>

-        <section id="voordelen" class="benefits">
-            <div class="container">
-                <h2>Waarom Linux kiezen?</h2>
-                <div class="benefits-grid">
-                    <div class="benefit-card">
-                        <div class="benefit-icon">🛡️</div>
-                        <h3>Veilig & Betrouwbaar</h3>
-                        <p>Linux is van nature veiliger dan Windows. Minder virussen, geen gedwongen updates, en volledige controle over uw systeem.</p>
-                    </div>
-                    <div class="benefit-card">
-                        <div class="benefit-icon">💰</div>
-                        <h3>Volledig Gratis</h3>
-                        <p>Geen licentiekosten, geen abonnementen. Linux en alle software zijn gratis en open source.</p>
-                    </div>
-                    <div class="benefit-card">
-                        <div class="benefit-icon">🔄</div>
-                        <h3>Oude Hardware Hergebruiken</h3>
-                        <p>Uw computer van 10 jaar oud? Linux maakt hem weer snel! Geen nieuwe hardware nodig.</p>
-                    </div>
-                    <div class="benefit-card">
-                        <div class="benefit-icon">🌱</div>
-                        <h3>Milieuvriendelijk</h3>
-                        <p>Stop e-waste! Door Linux te gebruiken houdt u uw apparaten langer werkend en uit de afvalberg.</p>
-                    </div>
-                    <div class="benefit-card">
-                        <div class="benefit-icon">🔒</div>
-                        <h3>Privacy Bescherming</h3>
-                        <p>Geen tracking, geen verborgen gegevensverzameling. Uw privacy blijft van uzelf.</p>
-                    </div>
-                    <div class="benefit-card">
-                        <div class="benefit-icon">⚡</div>
-                        <h3>Snel & Efficiënt</h3>
-                        <p>Linux gebruikt minder systeembronnen, waardoor uw computer sneller opstart en soepeler werkt.</p>
-                    </div>
-                </div>
-            </div>
-        </section>
+        {{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>
+                <h2>Windows 10-ondersteuning eindigt</h2>
                <div class="eol-content">
-                    <div class="eol-text">
-                        <p>Microsoft stopt de ondersteuning voor Windows 10 in <strong>oktober 2025</strong>. Dit betekent:</p>
-                        <ul>
-                            <li>❌ Geen beveiligingsupdates meer</li>
-                            <li>❌ Geen technische ondersteuning</li>
-                            <li>❌ Uw computer wordt kwetsbaar voor cyberaanvallen</li>
-                            <li>❌ Mogelijk niet meer compatibel met nieuwe software</li>
-                        </ul>
-                        <p class="highlight">Maar u hoeft geen nieuwe computer te kopen! Linux biedt een moderne, veilige alternatief dat perfect werkt op uw huidige hardware.</p>
+                    <div class="eol-main">
+                        <div class="eol-clippy-image">
+                            <img src="/static/images/clippy.png" alt="Clippy advising to use Linux">
+                        </div>
+                        <div class="eol-text">
+                            <p>Microsoft stopt de ondersteuning voor Windows 10 in <strong>oktober 2025</strong>. Dit betekent:</p>
+                            <ul>
+                                <li>❌ Geen beveiligingsupdates meer</li>
+                                <li>❌ Geen technische ondersteuning</li>
+                                <li>❌ Uw computer wordt kwetsbaar voor cyberaanvallen</li>
+                                <li>❌ Mogelijk niet meer compatibel met nieuwe software</li>
+                            </ul>
+                            <p class="highlight">Maar u hoeft geen nieuwe computer te kopen! Linux biedt een modern, veilig alternatief dat perfect werkt op uw huidige hardware.</p>
+                        </div>
                    </div>
                    <div class="eol-stats">
                        <div class="stat">
@ -151,16 +152,34 @@
            </div>
        </section>

-        <section id="distros" class="distros">
+        <section class="section section--light services">
            <div class="container">
-                <h2>Welke Linux Past Bij U?</h2>
-                <p class="section-subtitle">Er zijn vele Linux distributies, elk met hun eigen voordelen. Wij helpen u de perfecte keuze maken.</p>
+                <h2><a href="/diensten">Mijn aanpak</a></h2>
+                <div class="steps-grid" style="margin-top:1.5rem">
+                    <div class="card card--service"><h3>1. Kennismaking (gratis)</h3><p>Korte intake: wensen, hardware en gebruik. Samen kiezen we een route.</p></div>
+                    <div class="card card--service"><h3>2. Proefstart</h3><p>Linux live vanaf USB zodat u ziet hoe het werkt op uw pc.</p></div>
+                    <div class="card card--service"><h3>3. Installatie</h3><p>Veilig, met updates, codecs, printer, Nederlandse taal en basissoftware.</p></div>
+                    <div class="card card--service"><h3>4. Migratie</h3><p>Bestanden, foto's, documenten en favorieten overzetten.</p></div>
+                    <div class="card card--service"><h3>5. Uitleg & nazorg</h3><p>Korte training, daarna laagdrempelig bereikbaar voor vragen.</p></div>
+                </div>
+                <p style="margin-top:1rem"><strong>Daarnaast</strong> geef ik gratis informatiebijeenkomsten en help ik soms bij Repair Cafés met installaties, zonder kosten.</p>
+            </div>
+        </section>
+
+        <section id="distros" class="section section--light-green distros">
+            <div class="container">
+                <h2><a href="/linux">Welke Linux past bij u?</a></h2>
+                <p class="section-subtitle">Er zijn veel Linux-distributies, elk met hun eigen voordelen. Ik help u graag de perfecte keuze te maken.</p>
                <div class="distros-grid">
-                    <div class="distro-card">
+                    <a class="card card--distro card-link" href="/linux">
                        <div class="distro-header">
-                            <div class="distro-logo">🐧</div>
-                            <h3>Ubuntu</h3>
-                            <span class="distro-tag">Populair</span>
+                            <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">
+                            </div>
+                            <div class="distro-header-content">
+                                <h3>Ubuntu</h3>
+                                <span class="distro-tag">Populair</span>
+                            </div>
                        </div>
                        <p class="distro-description">Perfect voor beginners die van Windows komen. Gebruiksvriendelijk met veel ondersteuning.</p>
                        <div class="distro-features">
@ -169,230 +188,177 @@
                            <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">🍃</div>
-                            <h3>Linux Mint</h3>
-                            <span class="distro-tag">Windows-achtig</span>
+                            <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">
+                                    <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>
+                            </div>
+                            <div class="distro-header-content">
+                                <h3>Linux Mint</h3>
+                                <span class="distro-tag">Windows-achtig</span>
+                            </div>
                        </div>
-                        <p class="distro-description">Ziet er vertrouwd uit voor Windows gebruikers. Stabiel en betrouwbaar.</p>
+                        <p class="distro-description">Ziet er vertrouwd uit voor Windows-gebruikers. Stabiel en betrouwbaar.</p>
                        <div class="distro-features">
-                            <span class="feature">✓ Vertrouwd interface</span>
-                            <span class="feature">✓ Multimedia support</span>
+                            <span class="feature">✓ Vertrouwde interface</span>
+                            <span class="feature">✓ Multimedia ondersteuning</span>
                            <span class="feature">✓ Zeer stabiel</span>
                        </div>
                        <p class="distro-ideal">Ideaal voor: <strong>Windows migratie, ouderen, conservatieve gebruikers</strong></p>
-                    </div>
+                    </a>
                    
-                    <div class="distro-card">
+                    <a class="card card--distro card-link" href="/linux">
                        <div class="distro-header">
-                            <div class="distro-logo">🚀</div>
-                            <h3>Pop!_OS</h3>
-                            <span class="distro-tag">Gaming</span>
+                            <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>
+                            </div>
+                            <div class="distro-header-content">
+                                <h3>Pop!_OS</h3>
+                                <span class="distro-tag">Gaming</span>
+                            </div>
                        </div>
-                        <p class="distro-description">Gemaakt door System76. Excellent voor gaming en creatief werk.</p>
+                        <p class="distro-description">Gemaakt door System76. Uitstekend voor gaming en creatief werk.</p>
                        <div class="distro-features">
-                            <span class="feature">✓ Gaming optimized</span>
-                            <span class="feature">✓ NVIDIA support</span>
-                            <span class="feature">✓ Modern design</span>
+                            <span class="feature">✓ Gaming-geoptimaliseerd</span>
+                            <span class="feature">✓ NVIDIA-ondersteuning</span>
+                            <span class="feature">✓ Modern ontwerp</span>
                        </div>
-                        <p class="distro-ideal">Ideaal voor: <strong>Gamers, developers, jongeren</strong></p>
-                    </div>
+                        <p class="distro-ideal">Ideaal voor: <strong>Gamers, ontwikkelaars, jongeren</strong></p>
+                    </a>
                    
-                    <div class="distro-card">
+                    <a class="card card--distro card-link" href="/linux">
                        <div class="distro-header">
-                            <div class="distro-logo">🎨</div>
-                            <h3>Elementary OS</h3>
-                            <span class="distro-tag">Mooi</span>
+                            <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">
+                            </div>
+                            <div class="distro-header-content">
+                                <h3>Elementary OS</h3>
+                                <span class="distro-tag">Mooi</span>
+                            </div>
                        </div>
-                        <p class="distro-description">Prachtig design geïnspireerd door macOS. Eenvoudig en elegant.</p>
+                        <p class="distro-description">Prachtig ontwerp geïnspireerd door macOS. Eenvoudig en elegant.</p>
                        <div class="distro-features">
-                            <span class="feature">✓ Elegant design</span>
-                            <span class="feature">✓ Privacy-focused</span>
+                            <span class="feature">✓ Elegant ontwerp</span>
+                            <span class="feature">✓ Privacy-gericht</span>
                            <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">🔧</div>
-                            <h3>Fedora</h3>
-                            <span class="distro-tag">Geavanceerd</span>
+                            <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">
+                            </div>
+                            <div class="distro-header-content">
+                                <h3>Fedora</h3>
+                                <span class="distro-tag">Geavanceerd</span>
+                            </div>
                        </div>
-                        <p class="distro-description">Nieuwste technologieën en features. Voor technische gebruikers.</p>
+                        <p class="distro-description">Nieuwste technologieën en functies. Voor technische gebruikers.</p>
                        <div class="distro-features">
-                            <span class="feature">✓ Cutting-edge</span>
+                            <span class="feature">✓ Geavanceerde technologie</span>
                            <span class="feature">✓ Red Hat basis</span>
-                            <span class="feature">✓ Developer tools</span>
+                            <span class="feature">✓ Ontwikkelaarstools</span>
                        </div>
-                        <p class="distro-ideal">Ideaal voor: <strong>Developers, IT professionals, tech enthusiasts</strong></p>
+                        <p class="distro-ideal">Ideaal voor: <strong>Ontwikkelaars, IT-professionals, tech-enthousiastelingen</strong></p>
                    </div>
                    
-                    <div class="distro-card">
+                    <div class="card card--distro">
                        <div class="distro-header">
-                            <div class="distro-logo">🔥</div>
-                            <h3>Garuda Linux</h3>
-                            <span class="distro-tag">Performance</span>
+                            <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">
+                                <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>
+                            </div>
+                            <div class="distro-header-content">
+                                <h3>Garuda Linux</h3>
+                                <span class="distro-tag">Prestaties</span>
+                            </div>
                        </div>
-                        <p class="distro-description">Arch-based met extreme prestaties. Prachtig design en gaming-geoptimaliseerd.</p>
+                        <p class="distro-description">Arch-gebaseerd met extreme prestaties. Prachtig ontwerp en gaming-geoptimaliseerd.</p>
                        <div class="distro-features">
                            <span class="feature">✓ Arch basis</span>
-                            <span class="feature">✓ Gaming ready</span>
-                            <span class="feature">✓ Beautiful UI</span>
+                            <span class="feature">✓ Gaming-klaar</span>
+                            <span class="feature">✓ Mooie interface</span>
                        </div>
-                        <p class="distro-ideal">Ideaal voor: <strong>Power users, gamers, performance enthusiasts</strong></p>
+                        <p class="distro-ideal">Ideaal voor: <strong>Powergebruikers, gamers, prestatie-enthousiasten</strong></p>
                    </div>
                </div>
                
                <div class="distro-cta">
-                    <h3>Niet zeker welke te kiezen?</h3>
-                    <p>Geen probleem! Wij adviseren u graag over de beste distributie voor uw specifieke situatie en behoeften.</p>
+                    <h3>Weet u niet welke u moet kiezen?</h3>
+                    <p>Geen probleem! Ik adviseer u graag over de beste distributie voor uw specifieke situatie en behoeften.</p>
                    <a href="/contact" class="btn btn-primary">Persoonlijk advies</a>
                </div>
            </div>
        </section>

-        <section id="diensten" class="services">
+        <section id="diensten" class="section section--light services">
            <div class="container">
-                <h2>Onze Diensten</h2>
+                <h2><a href="/diensten">Mijn diensten</a></h2>
                <div class="services-grid">
-                    <div class="service-card">
-                        <h3>Gratis Advies</h3>
-                        <p>Wij bekijken uw huidige computer en adviseren over de beste Linux distributie voor uw behoeften.</p>
-                    </div>
-                    <div class="service-card">
-                        <h3>Installatie Service</h3>
-                        <p>Professionele installatie van Linux op uw computer, inclusief alle benodigde software.</p>
-                    </div>
-                    <div class="service-card">
-                        <h3>Data Migratie</h3>
-                        <p>Veilige overdracht van al uw bestanden, foto's, documenten van Windows naar Linux.</p>
-                    </div>
-                    <div class="service-card">
-                        <h3>Training & Ondersteuning</h3>
-                        <p>Persoonlijke begeleiding om u vertrouwd te maken met uw nieuwe Linux systeem.</p>
+                    <a class="card card--service card-link" href="/diensten">
+                        <h3>Gratis advies</h3>
+                        <p>Ik bekijk uw huidige computer en adviseer over de beste Linux distributie voor uw behoeften.</p>
+                    </a>
+                    <a class="card card--service card-link" href="/diensten">
+                        <h3>Installatieservice</h3>
+                        <p>Professionele Linux-installatie op uw computer, inclusief alle benodigde software.</p>
+                    </a>
+                    <div class="card card--service">
+                        <h3><a href="/diensten">Datamigratie</a></h3>
+                        <p>Veilige overdracht van al uw bestanden, foto's en documenten van Windows naar Linux. Zie de <a href="/diensten#backup-disclaimer">back-updisclaimer</a>.</p>
                    </div>
+                    <a class="card card--service card-link" href="/diensten">
+                        <h3>Training en ondersteuning</h3>
+                        <p>Persoonlijke begeleiding om u vertrouwd te maken met uw nieuwe Linux-systeem.</p>
+                    </a>
                </div>
            </div>
        </section>

-        <section class="linux-features">
-            <div class="container">
-                <h2>Linux in Actie</h2>
-                <p class="section-subtitle">Zie hoe Linux eruitziet en werkt op verschillende apparaten</p>
-                
-                <div class="features-grid">
-                    <div class="feature-showcase">
-                        <div class="feature-mockup desktop-mockup">
-                            <div class="mockup-header">
-                                <div class="mockup-buttons">
-                                    <span></span><span></span><span></span>
-                                </div>
-                                <div class="mockup-title">Garuda Linux Desktop</div>
-                            </div>
-                            <div class="mockup-content">
-                                <div class="desktop-wallpaper">
-                                    <div class="desktop-panel">
-                                        <div class="panel-left">
-                                            <span class="app-icon">🏠</span>
-                                            <span class="app-icon">📁</span>
-                                            <span class="app-icon">🌐</span>
-                                            <span class="app-icon">✉️</span>
-                                        </div>
-                                        <div class="panel-right">⚙️ 📶 🔋 12:34</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <h3>Bekende Desktop Interface</h3>
-                        <p>Linux ziet er vertrouwd uit met een moderne, gebruiksvriendelijke interface.</p>
-                    </div>
-                    
-                    <div class="feature-showcase">
-                        <div class="feature-mockup app-mockup">
-                            <div class="mockup-header">
-                                <div class="mockup-buttons">
-                                    <span></span><span></span><span></span>
-                                </div>
-                                <div class="mockup-title">Software Center</div>
-                            </div>
-                            <div class="mockup-content">
-                                <div class="app-list">
-                                    <div class="app-item">📄 LibreOffice <span class="install-btn">Installeren</span></div>
-                                    <div class="app-item">🎨 GIMP <span class="install-btn">Installeren</span></div>
-                                    <div class="app-item">🎵 Spotify <span class="install-btn">Installeren</span></div>
-                                    <div class="app-item">💬 Discord <span class="install-btn">Installeren</span></div>
-                                </div>
-                            </div>
-                        </div>
-                        <h3>Eenvoudig Software Installeren</h3>
-                        <p>Duizenden gratis programma's met één klik installeren, net als een app store.</p>
-                    </div>
-                    
-                    <div class="feature-showcase">
-                        <div class="feature-mockup performance-mockup">
-                            <div class="performance-bars">
-                                <div class="performance-item">
-                                    <div class="perf-label">🚀 Opstarttijd</div>
-                                    <div class="perf-bar">
-                                        <div class="perf-fill windows" style="width: 80%">Windows: 45s</div>
-                                    </div>
-                                    <div class="perf-bar">
-                                        <div class="perf-fill linux" style="width: 35%">Linux: 15s</div>
-                                    </div>
-                                </div>
-                                <div class="performance-item">
-                                    <div class="perf-label">💾 RAM gebruik</div>
-                                    <div class="perf-bar">
-                                        <div class="perf-fill windows" style="width: 70%">Windows: 3.5GB</div>
-                                    </div>
-                                    <div class="perf-bar">
-                                        <div class="perf-fill linux" style="width: 30%">Linux: 1.5GB</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <h3>Superieure Prestaties</h3>
-                        <p>Linux maakt uw computer sneller en gebruikt minder geheugen dan Windows.</p>
-                    </div>
-                </div>
-            </div>
-        </section>
+        {{template "linux_features" (dict "Page" . "SectionClass" "section--light-green") }}

-        <section class="cta">
+        <section class="section cta">
            <div class="container">
                <h2>Klaar voor de overstap?</h2>
-                <p>Laat uw computer niet eindigen als e-waste. Geef hem een tweede leven met Linux!</p>
+                <p>Laat uw computer niet eindigen als e-waste. Geef hem een tweede leven met Linux - ik help u graag.</p>
                <a href="/contact" class="btn btn-primary btn-large">Neem contact op</a>
            </div>
        </section>
    </main>

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