diff --git a/README.md b/README.md index 97b1abc..3d85cc3 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# poepiescheet - Linux Migratie Service Website +# Hogeland Linux - Linux Migratie Service Website Een Nederlandse website voor Linux migratie services in lijn met de endof10.org beweging. @@ -52,16 +52,18 @@ Om uw eigen contactgegevens in te vullen, pas de volgende waarden aan in `main.g ```go // Vervang deze waarden met uw eigen gegevens: KVK: "12345678", // Uw KVK nummer -Email: "info@poepiescheet.nl", // Uw email adres +Email: "info@hogelandlinux.nl", // Uw email adres Phone: "+31 6 12345678", // Uw telefoonnummer ``` ## Pagina's ### Hoofdpagina (/) -- Hero sectie met duidelijke boodschap +- 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 - Call-to-action @@ -78,6 +80,26 @@ Het design is: - **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 + +### 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 + +### 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 diff --git a/main.go b/main.go index 00412ac..b34fff2 100644 --- a/main.go +++ b/main.go @@ -25,10 +25,10 @@ func main() { // Home page http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { data := PageData{ - CompanyName: "poepiescheet", + CompanyName: "Hogeland Linux", Title: "Linux Migratie Service - Uw Computer Nieuw Leven Geven", KVK: "12345678", // Replace with actual KVK number - Email: "info@poepiescheet.nl", + Email: "info@hogelandlinux.nl", Phone: "+31 6 12345678", } @@ -41,10 +41,10 @@ func main() { // Contact page http.HandleFunc("/contact", func(w http.ResponseWriter, r *http.Request) { data := PageData{ - CompanyName: "poepiescheet", - Title: "Contact - poepiescheet", + CompanyName: "Hogeland Linux", + Title: "Contact - Hogeland Linux", KVK: "12345678", // Replace with actual KVK number - Email: "info@poepiescheet.nl", + Email: "info@hogelandlinux.nl", Phone: "+31 6 12345678", } diff --git a/static/style.css b/static/style.css index ffd140c..dfe5f16 100644 --- a/static/style.css +++ b/static/style.css @@ -127,9 +127,92 @@ p { align-items: center; } -.computer-icon { - font-size: 8rem; - opacity: 0.8; +/* Terminal Window Styling */ +.terminal-window { + background: #1a1a1a; + border-radius: 12px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); + max-width: 520px; + margin: 0 auto 0 0; + overflow: hidden; + border: 1px solid #333; +} + +.terminal-header { + background: #2d2d2d; + padding: 12px 16px; + display: flex; + align-items: center; + gap: 1rem; + border-bottom: 1px solid #333; +} + +.terminal-buttons { + display: flex; + gap: 8px; +} + +.terminal-buttons span { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.btn-close { + background: #ff5f57; +} + +.btn-minimize { + background: #ffbd2e; +} + +.btn-maximize { + background: #28ca42; +} + +.terminal-title { + color: #ccc; + font-size: 0.9rem; + font-weight: 500; +} + +.terminal-body { + padding: 20px; + font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace; + font-size: 14px; + line-height: 1.6; + min-height: 200px; +} + +.terminal-line { + margin-bottom: 8px; + display: flex; + align-items: center; + gap: 8px; +} + +.prompt { + color: #10b981; + font-weight: 600; + min-width: 180px; +} + +.command { + color: #60a5fa; +} + +.output { + color: #d1d5db; +} + +.cursor { + color: #10b981; + animation: blink 1s infinite; +} + +@keyframes blink { + 0%, 50% { opacity: 1; } + 51%, 100% { opacity: 0; } } /* Buttons */ @@ -264,6 +347,16 @@ p { padding: 2rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +.stat:hover { + transform: translateY(-5px); +} + +.stat-icon { + font-size: 2.5rem; + margin-bottom: 1rem; } .stat h3 { @@ -272,6 +365,151 @@ p { margin-bottom: 0.5rem; } +/* Distributions Section */ +.distros { + padding: 5rem 0; + background: #f9fafb; +} + +.distros h2 { + text-align: center; + margin-bottom: 1rem; + color: #047857; +} + +.section-subtitle { + text-align: center; + font-size: 1.1rem; + color: #6b7280; + margin-bottom: 4rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.distros-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 2rem; + margin-bottom: 4rem; +} + +.distro-card { + background: white; + border-radius: 16px; + padding: 2rem; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + border: 2px solid transparent; + position: relative; + overflow: hidden; +} + +.distro-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #059669, #10b981); +} + +.distro-card:hover { + transform: translateY(-8px); + box-shadow: 0 12px 40px rgba(5, 150, 105, 0.15); + border-color: #a7f3d0; +} + +.distro-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1.5rem; + flex-wrap: wrap; +} + +.distro-logo { + font-size: 2.5rem; + min-width: 3rem; +} + +.distro-header h3 { + color: #047857; + margin: 0; + flex: 1; + min-width: 120px; +} + +.distro-tag { + background: linear-gradient(135deg, #059669, #10b981); + color: white; + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 500; + white-space: nowrap; +} + +.distro-description { + color: #4b5563; + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.distro-features { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1.5rem; +} + +.feature { + background: #ecfdf5; + color: #047857; + padding: 0.4rem 0.8rem; + border-radius: 20px; + font-size: 0.85rem; + font-weight: 500; + border: 1px solid #bbf7d0; +} + +.distro-ideal { + background: #f0f9ff; + border: 1px solid #bae6fd; + border-radius: 8px; + padding: 1rem; + margin: 0; + color: #0c4a6e; + font-size: 0.9rem; +} + +.distro-ideal strong { + color: #0369a1; +} + +.distro-cta { + text-align: center; + background: white; + padding: 3rem 2rem; + border-radius: 16px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + border: 2px solid #bbf7d0; +} + +.distro-cta h3 { + color: #047857; + margin-bottom: 1rem; +} + +.distro-cta p { + color: #6b7280; + margin-bottom: 2rem; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + /* Services Section */ .services { padding: 5rem 0; @@ -307,6 +545,188 @@ p { margin-bottom: 1rem; } +/* Linux Features Section */ +.linux-features { + padding: 5rem 0; + background: #f9fafb; +} + +.linux-features h2 { + text-align: center; + margin-bottom: 1rem; + color: #047857; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 3rem; + margin-top: 3rem; +} + +.feature-showcase { + text-align: center; +} + +.feature-mockup { + 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; + display: flex; + align-items: center; + justify-content: center; +} + +/* Desktop Mockup */ +.desktop-wallpaper { + 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%; + border-radius: 12px; + display: flex; + align-items: center; + padding: 0 12px; + font-size: 0.8rem; + font-weight: 500; + color: white; + position: relative; +} + +.perf-fill.windows { + background: linear-gradient(90deg, #f59e0b, #d97706); +} + +.perf-fill.linux { + background: linear-gradient(90deg, #10b981, #059669); +} + +.feature-showcase h3 { + color: #047857; + margin-bottom: 1rem; +} + +.feature-showcase p { + color: #6b7280; + line-height: 1.6; +} + /* CTA Section */ .cta { padding: 5rem 0; @@ -533,6 +953,10 @@ footer { grid-template-columns: 1fr; } + .distros-grid { + grid-template-columns: 1fr; + } + .contact-grid { grid-template-columns: 1fr; } @@ -541,6 +965,11 @@ footer { grid-template-columns: 1fr; } + .features-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + .cta-benefits { grid-template-columns: 1fr; } @@ -570,8 +999,20 @@ footer { gap: 1rem; } - .computer-icon { - font-size: 6rem; + .terminal-window { + max-width: 100%; + margin: 0 1rem; + } + + .terminal-body { + padding: 16px; + font-size: 12px; + min-height: 150px; + } + + .prompt { + min-width: 130px; + font-size: 11px; } } diff --git a/templates/contact.html b/templates/contact.html index 4f570c0..4e8ddd2 100644 --- a/templates/contact.html +++ b/templates/contact.html @@ -17,6 +17,7 @@ diff --git a/templates/index.html b/templates/index.html index 72bd850..daf7d96 100644 --- a/templates/index.html +++ b/templates/index.html @@ -17,6 +17,7 @@ @@ -35,7 +36,45 @@
-
๐Ÿ’ป
+
+
+
+ + + +
+
Terminal
+
+
+
+ ainrommer@computer:~$ + sudo pacman -Syu +
+
+ :: Synchronizing package databases... +
+
+ โœ“ Everything is up to date. +
+
+ ainrommer@computer:~$ + fastfetch +
+
+ ๐Ÿ”ฅ Garuda Linux (Dragonized Gaming) +
+
+ ๐Ÿง Linux 6.11.2-zen1-1-zen +
+
+ ๐Ÿ’พ 8.2 GiB / 16.0 GiB (51%) +
+
+ ainrommer@computer:~$ + _ +
+
+
@@ -93,18 +132,129 @@
+
๐Ÿ’ป

1+ miljard

Windows 10 computers wereldwijd

+
๐Ÿ—‘๏ธ

240 miljoen ton

Potentiรซle e-waste zonder migratie

+
+
๐Ÿ”’
+

0 updates

+

Na oktober 2025

+
+
+
+

Welke Linux Past Bij U?

+

Er zijn vele Linux distributies, elk met hun eigen voordelen. Wij helpen u de perfecte keuze maken.

+
+
+
+ +

Ubuntu

+ Populair +
+

Perfect voor beginners die van Windows komen. Gebruiksvriendelijk met veel ondersteuning.

+
+ โœ“ Eenvoudig + โœ“ Grote community + โœ“ LTS versies +
+

Ideaal voor: Beginners, kantoorwerk, algemeen gebruik

+
+ +
+
+ +

Linux Mint

+ Windows-achtig +
+

Ziet er vertrouwd uit voor Windows gebruikers. Stabiel en betrouwbaar.

+
+ โœ“ Vertrouwd interface + โœ“ Multimedia support + โœ“ Zeer stabiel +
+

Ideaal voor: Windows migratie, ouderen, conservatieve gebruikers

+
+ +
+
+ +

Pop!_OS

+ Gaming +
+

Gemaakt door System76. Excellent voor gaming en creatief werk.

+
+ โœ“ Gaming optimized + โœ“ NVIDIA support + โœ“ Modern design +
+

Ideaal voor: Gamers, developers, jongeren

+
+ +
+
+ +

Elementary OS

+ Mooi +
+

Prachtig design geรฏnspireerd door macOS. Eenvoudig en elegant.

+
+ โœ“ Elegant design + โœ“ Privacy-focused + โœ“ Mac-achtig +
+

Ideaal voor: Mac gebruikers, designers, stijlbewuste mensen

+
+ +
+
+ +

Fedora

+ Geavanceerd +
+

Nieuwste technologieรซn en features. Voor technische gebruikers.

+
+ โœ“ Cutting-edge + โœ“ Red Hat basis + โœ“ Developer tools +
+

Ideaal voor: Developers, IT professionals, tech enthusiasts

+
+ +
+
+ +

Garuda Linux

+ Performance +
+

Arch-based met extreme prestaties. Prachtig design en gaming-geoptimaliseerd.

+
+ โœ“ Arch basis + โœ“ Gaming ready + โœ“ Beautiful UI +
+

Ideaal voor: Power users, gamers, performance enthusiasts

+
+
+ +
+

Niet zeker welke te kiezen?

+

Geen probleem! Wij adviseren u graag over de beste distributie voor uw specifieke situatie en behoeften.

+ Persoonlijk advies +
+
+
+

Onze Diensten

@@ -129,6 +279,89 @@
+
+
+

Linux in Actie

+

Zie hoe Linux eruitziet en werkt op verschillende apparaten

+ +
+
+
+
+
+ +
+
Garuda Linux Desktop
+
+
+
+
+
+ ๐Ÿ  + ๐Ÿ“ + ๐ŸŒ + โœ‰๏ธ +
+
โš™๏ธ ๐Ÿ“ถ ๐Ÿ”‹ 12:34
+
+
+
+
+

Bekende Desktop Interface

+

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

+
+ +
+
+
+
+ +
+
Software Center
+
+
+
+
๐Ÿ“„ LibreOffice Installeren
+
๐ŸŽจ GIMP Installeren
+
๐ŸŽต Spotify Installeren
+
๐Ÿ’ฌ Discord Installeren
+
+
+
+

Eenvoudig Software Installeren

+

Duizenden gratis programma's met รฉรฉn klik installeren, net 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.

+
+
+
+
+

Klaar voor de overstap?