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 @@
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 @@Windows 10 ondersteuning eindigt binnenkort? Geen probleem! Ontdek hoe Linux uw hardware nieuw leven kan geven.
@@ -254,81 +254,34 @@Zie hoe Linux eruitziet en werkt op verschillende apparaten
+Zie hoe Linux eruitziet en werkt in de praktijk
Linux ziet er vertrouwd uit met een moderne, gebruiksvriendelijke interface.
+Linux ziet er vertrouwd en professioneel uit. Deze Zorin OS desktop lijkt op Windows maar is veel sneller en veiliger.
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.