diff --git a/README.md b/README.md index 101674c..b0ff893 100644 --- a/README.md +++ b/README.md @@ -112,6 +112,9 @@ De website benadrukt: ## Deployment +Dit project komt met een Dockerfile voor eenvoudige deployment met bijvoorbeeld Coolify. +Zie voor instructies [DEPLOYMENT.md](DEPLOYMENT.md) + Voor productie gebruik: 1. Vervang alle placeholder contactgegevens 2. Configureer een reverse proxy (nginx/Apache) diff --git a/static/GamingBenchmarkLinuxvsWindows.jpg b/static/GamingBenchmarkLinuxvsWindows.jpg new file mode 100644 index 0000000..e560e1f Binary files /dev/null and b/static/GamingBenchmarkLinuxvsWindows.jpg differ diff --git a/static/GamingBenchmarkLinuxvsWindows.webp b/static/GamingBenchmarkLinuxvsWindows.webp new file mode 100644 index 0000000..cdf56a9 Binary files /dev/null and b/static/GamingBenchmarkLinuxvsWindows.webp differ diff --git a/static/LinuxMintCinnamonSoftwareManager.jpg b/static/LinuxMintCinnamonSoftwareManager.jpg new file mode 100644 index 0000000..d285376 Binary files /dev/null and b/static/LinuxMintCinnamonSoftwareManager.jpg differ diff --git a/static/LinuxMintCinnamonSoftwareManager.webp b/static/LinuxMintCinnamonSoftwareManager.webp new file mode 100644 index 0000000..cadfcea Binary files /dev/null and b/static/LinuxMintCinnamonSoftwareManager.webp differ diff --git a/static/Zorin-17-desktop.jpg b/static/Zorin-17-desktop.jpg new file mode 100644 index 0000000..60722de Binary files /dev/null and b/static/Zorin-17-desktop.jpg differ diff --git a/static/Zorin-17-desktop.webp b/static/Zorin-17-desktop.webp new file mode 100644 index 0000000..2b0cdfa Binary files /dev/null and b/static/Zorin-17-desktop.webp differ diff --git a/static/cinnamon.png b/static/cinnamon.png new file mode 100644 index 0000000..8fc7d0f Binary files /dev/null and b/static/cinnamon.png differ diff --git a/static/garuda-dr460nized-gaming.webp b/static/garuda-dr460nized-gaming.webp new file mode 100644 index 0000000..5c3a1dd Binary files /dev/null and b/static/garuda-dr460nized-gaming.webp differ diff --git a/static/style.css b/static/style.css index 4b46af8..5cb8366 100644 --- a/static/style.css +++ b/static/style.css @@ -566,165 +566,77 @@ p { .feature-showcase { text-align: center; + display: flex; + flex-direction: column; + height: 100%; } -.feature-mockup { +.feature-image { background: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); margin-bottom: 2rem; overflow: hidden; border: 1px solid #e5e7eb; -} - -.mockup-header { - background: #f3f4f6; - padding: 12px 16px; - display: flex; - align-items: center; - gap: 1rem; - border-bottom: 1px solid #e5e7eb; -} - -.mockup-buttons { - display: flex; - gap: 6px; -} - -.mockup-buttons span { - width: 10px; - height: 10px; - border-radius: 50%; - background: #d1d5db; -} - -.mockup-title { - color: #6b7280; - font-size: 0.85rem; - font-weight: 500; -} - -.mockup-content { - padding: 20px; - min-height: 200px; + position: relative; + aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; } -/* Desktop Mockup */ -.desktop-wallpaper { +.feature-image img { width: 100%; - height: 160px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 8px; - position: relative; - display: flex; - align-items: flex-end; -} - -.desktop-panel { - background: rgba(0, 0, 0, 0.8); - width: 100%; - padding: 8px 16px; - display: flex; - justify-content: space-between; - align-items: center; - backdrop-filter: blur(10px); -} - -.panel-left { - display: flex; - gap: 12px; -} - -.app-icon { - font-size: 1.2rem; -} - -.panel-right { - color: white; - font-size: 0.8rem; -} - -/* App Mockup */ -.app-list { - width: 100%; -} - -.app-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 16px; - margin-bottom: 8px; - background: #f9fafb; - border-radius: 8px; - border: 1px solid #e5e7eb; -} - -.install-btn { - background: #059669; - color: white; - padding: 4px 12px; - border-radius: 16px; - font-size: 0.8rem; - font-weight: 500; -} - -/* Performance Mockup */ -.performance-bars { - width: 100%; -} - -.performance-item { - margin-bottom: 24px; -} - -.perf-label { - text-align: left; - margin-bottom: 8px; - font-weight: 500; - color: #374151; -} - -.perf-bar { - background: #e5e7eb; - height: 24px; - border-radius: 12px; - margin-bottom: 6px; - position: relative; - overflow: hidden; -} - -.perf-fill { height: 100%; + object-fit: cover; border-radius: 12px; - display: flex; - align-items: center; - padding: 0 12px; - font-size: 0.8rem; - font-weight: 500; +} + +.image-caption { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.8); + padding: 0.4rem 1rem; + border-radius: 0 0 12px 12px; +} + +.image-caption small { color: white; - position: relative; + font-size: 0.8rem; } -.perf-fill.windows { - background: linear-gradient(90deg, #f59e0b, #d97706); +.image-caption a { + color: #a7f3d0; + text-decoration: none; } -.perf-fill.linux { - background: linear-gradient(90deg, #10b981, #059669); +.image-caption a:hover { + color: white; + text-decoration: underline; } + + .feature-showcase h3 { color: #047857; margin-bottom: 1rem; + font-size: 1.3rem; + min-height: 2.6rem; + display: flex; + align-items: center; + justify-content: center; } .feature-showcase p { color: #6b7280; line-height: 1.6; + flex-grow: 1; + margin: 0; + min-height: 4rem; + display: flex; + align-items: center; } /* CTA Section */ @@ -1071,19 +983,7 @@ footer { h2 { font-size: 1.8rem; } h3 { font-size: 1.3rem; } - /* Performance bars responsive */ - .performance-bars { - gap: 1rem; - } - - .performance-item { - margin-bottom: 1rem; - } - - .perf-label { - font-size: 0.9rem; - margin-bottom: 0.5rem; - } + } @media (max-width: 480px) { @@ -1195,18 +1095,20 @@ footer { font-size: 0.8rem; } - /* Desktop mockup adjustments */ - .feature-mockup { - min-height: 200px; + /* Feature image adjustments for mobile */ + .feature-image { + aspect-ratio: 16/9; + margin-bottom: 1.5rem; } - .mockup-content { - padding: 1rem; + .feature-showcase h3 { + font-size: 1.2rem; + min-height: 2.4rem; } - .app-item { - padding: 0.5rem; - margin-bottom: 0.5rem; + .feature-showcase p { + min-height: 3.5rem; + font-size: 0.95rem; } } diff --git a/templates/header.html b/templates/header.html index 7313df4..10cc99a 100644 --- a/templates/header.html +++ b/templates/header.html @@ -10,9 +10,9 @@
Home - Voordelen ↓ - Linux Keuze ↓ - Diensten ↓ + ↓ Voordelen + ↓ Linux Keuze + ↓ Diensten Contact
diff --git a/templates/index.html b/templates/index.html index 77531fb..fd3618a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -16,7 +16,7 @@

Geef uw computer een tweede leven

Windows 10 ondersteuning eindigt binnenkort? Geen probleem! Ontdek hoe Linux uw hardware nieuw leven kan geven.

- Meer weten + ↓ Meer weten Gratis advies
@@ -254,81 +254,34 @@

Linux in Actie

-

Zie hoe Linux eruitziet en werkt op verschillende apparaten

+

Zie hoe Linux eruitziet en werkt in de praktijk

-
-
-
- -
-
Garuda Linux Desktop
-
-
-
-
-
- 🏠 - 📁 - 🌐 - ✉️ -
-
⚙️ 📶 🔋 12:34
-
-
-
+
+ Zorin OS 17 Desktop Interface
-

Bekende Desktop Interface

-

Linux ziet er vertrouwd uit met een moderne, gebruiksvriendelijke interface.

+

Moderne Desktop Interface

+

Linux ziet er vertrouwd en professioneel uit. Deze Zorin OS desktop lijkt op Windows maar is veel sneller en veiliger.

-
-
-
- -
-
Software Center
-
-
-
-
📄 LibreOffice Installeren
-
🎨 GIMP Installeren
-
🎵 Spotify Installeren
-
💬 Discord Installeren
-
-
+
+ Linux Mint Software Manager

Eenvoudig Software Installeren

-

Duizenden gratis programma's met één klik installeren, net als een app store.

+

Duizenden gratis programma's met één klik installeren via de Software Manager. Net zo makkelijk als een app store.

-
-
-
-
🚀 Opstarttijd
-
-
Windows: 45s
-
-
-
Linux: 15s
-
-
-
-
💾 RAM gebruik
-
-
Windows: 3.5GB
-
-
-
Linux: 1.5GB
-
-
+ -

Superieure Prestaties

-

Linux maakt uw computer sneller en gebruikt minder geheugen dan Windows.

+

Gaming Prestaties

+

Linux kan vaak betere gaming prestaties leveren dan Windows, met minder overhead en optimalisaties voor moderne games.