First vibe version
This commit is contained in:
105
README.md
Normal file
105
README.md
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
# poepiescheet - Linux Migratie Service Website
|
||||||
|
|
||||||
|
Een Nederlandse website voor Linux migratie services in lijn met de endof10.org 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
|
||||||
|
- Voordelen van FOSS (Free and Open Source Software)
|
||||||
|
- Hergebruik van oude hardware
|
||||||
|
- Professionele Linux installatie services
|
||||||
|
|
||||||
|
## Technische Details
|
||||||
|
|
||||||
|
- **Backend**: Go met html/template
|
||||||
|
- **Frontend**: Modern CSS met responsive design
|
||||||
|
- **Stijl**: Minimalistisch en toegankelijk voor alle leeftijden
|
||||||
|
- **Taal**: Nederlands
|
||||||
|
|
||||||
|
## Installatie en Gebruik
|
||||||
|
|
||||||
|
### Vereisten
|
||||||
|
- Go 1.24.4 of hoger
|
||||||
|
- Moderne webbrowser
|
||||||
|
|
||||||
|
### Website Starten
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Start de server
|
||||||
|
go run main.go
|
||||||
|
|
||||||
|
# De website is nu beschikbaar op:
|
||||||
|
# http://localhost:8080
|
||||||
|
```
|
||||||
|
|
||||||
|
### Structuur
|
||||||
|
```
|
||||||
|
linuxservice/
|
||||||
|
├── main.go # Go webserver
|
||||||
|
├── templates/ # HTML templates
|
||||||
|
│ ├── index.html # Hoofdpagina
|
||||||
|
│ └── contact.html # Contact pagina
|
||||||
|
├── static/ # Statische bestanden
|
||||||
|
│ └── style.css # CSS styling
|
||||||
|
└── README.md # Dit bestand
|
||||||
|
```
|
||||||
|
|
||||||
|
## Aanpassing Contactgegevens
|
||||||
|
|
||||||
|
Om uw eigen contactgegevens in te vullen, pas de volgende waarden aan in `main.go`:
|
||||||
|
|
||||||
|
```go
|
||||||
|
// Vervang deze waarden met uw eigen gegevens:
|
||||||
|
KVK: "12345678", // Uw KVK nummer
|
||||||
|
Email: "info@poepiescheet.nl", // Uw email adres
|
||||||
|
Phone: "+31 6 12345678", // Uw telefoonnummer
|
||||||
|
```
|
||||||
|
|
||||||
|
## Pagina's
|
||||||
|
|
||||||
|
### Hoofdpagina (/)
|
||||||
|
- Hero sectie met duidelijke boodschap
|
||||||
|
- Voordelen van Linux migratie
|
||||||
|
- Informatie over Windows 10 End of Life
|
||||||
|
- Diensten overzicht
|
||||||
|
- Call-to-action
|
||||||
|
|
||||||
|
### Contact Pagina (/contact)
|
||||||
|
- Contactformulier
|
||||||
|
- Bedrijfsinformatie
|
||||||
|
- Openingstijden
|
||||||
|
- Waarom klanten voor u moeten kiezen
|
||||||
|
|
||||||
|
## 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
|
||||||
|
|
||||||
|
## Belangrijke Boodschappen
|
||||||
|
|
||||||
|
De website benadrukt:
|
||||||
|
- **Duurzaamheid**: Tegengaan van e-waste
|
||||||
|
- **Kostenbesparing**: Gratis Linux vs dure Windows licenties
|
||||||
|
- **Veiligheid**: Linux is veiliger dan Windows
|
||||||
|
- **Hardware hergebruik**: Oude computers krijgen nieuw leven
|
||||||
|
- **Privacy**: Geen tracking of gegevensverzameling
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
|
||||||
|
Voor productie gebruik:
|
||||||
|
1. Vervang alle placeholder contactgegevens
|
||||||
|
2. Configureer een reverse proxy (nginx/Apache)
|
||||||
|
3. Gebruik HTTPS certificaten
|
||||||
|
4. Overweeg een proper database voor contactformulieren
|
||||||
|
|
||||||
|
## Ondersteuning
|
||||||
|
|
||||||
|
Deze website ondersteunt de [endof10.org](https://endof10.org) beweging voor duurzame computing.
|
||||||
|
|
||||||
|
## Licentie
|
||||||
|
|
||||||
|
Open source - voel je vrij om aan te passen voor eigen gebruik.
|
||||||
59
main.go
Normal file
59
main.go
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"html/template"
|
||||||
|
"log"
|
||||||
|
"net/http"
|
||||||
|
)
|
||||||
|
|
||||||
|
type PageData struct {
|
||||||
|
CompanyName string
|
||||||
|
Title string
|
||||||
|
KVK string
|
||||||
|
Email string
|
||||||
|
Phone string
|
||||||
|
}
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
// Parse templates
|
||||||
|
tmpl := template.Must(template.ParseGlob("templates/*.html"))
|
||||||
|
|
||||||
|
// 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: "poepiescheet",
|
||||||
|
Title: "Linux Migratie Service - Uw Computer Nieuw Leven Geven",
|
||||||
|
KVK: "12345678", // Replace with actual KVK number
|
||||||
|
Email: "info@poepiescheet.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: "poepiescheet",
|
||||||
|
Title: "Contact - poepiescheet",
|
||||||
|
KVK: "12345678", // Replace with actual KVK number
|
||||||
|
Email: "info@poepiescheet.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))
|
||||||
|
}
|
||||||
623
static/style.css
Normal file
623
static/style.css
Normal file
@ -0,0 +1,623 @@
|
|||||||
|
/* Reset and Base Styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: 2.5rem; }
|
||||||
|
h2 { font-size: 2rem; }
|
||||||
|
h3 { font-size: 1.5rem; }
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
.navbar {
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 20px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo h1 {
|
||||||
|
color: #2563eb;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #666;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover,
|
||||||
|
.nav-links a.active {
|
||||||
|
color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
padding: 4rem 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 4rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content h2 {
|
||||||
|
font-size: 3rem;
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #64748b;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.computer-icon {
|
||||||
|
font-size: 8rem;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #2563eb;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #1d4ed8;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: transparent;
|
||||||
|
color: #2563eb;
|
||||||
|
border-color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #2563eb;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-large {
|
||||||
|
padding: 16px 32px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Benefits Section */
|
||||||
|
.benefits {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
color: #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card {
|
||||||
|
background: #f8fafc;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
text-align: center;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card h3 {
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Windows EOL Section */
|
||||||
|
.windows-eol {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background: #fef2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.windows-eol h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
color: #dc2626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eol-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eol-text ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eol-text li {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
background: #dcfce7;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
border-left: 4px solid #16a34a;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #166534;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eol-stats {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
text-align: center;
|
||||||
|
background: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: #dc2626;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services Section */
|
||||||
|
.services {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
color: #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
background: #f1f5f9;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
border-left: 4px solid #2563eb;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card h3 {
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CTA Section */
|
||||||
|
.cta {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background: #2563eb;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta h2 {
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta p {
|
||||||
|
color: #bfdbfe;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Page Styles */
|
||||||
|
.contact-hero {
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
padding: 3rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-hero h1 {
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-content {
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
background: #f8fafc;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
min-width: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item h3 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item a {
|
||||||
|
color: #2563eb;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-hours {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-hours h3 {
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form Styles */
|
||||||
|
.contact-form {
|
||||||
|
background: #fff;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group select,
|
||||||
|
.form-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group select:focus,
|
||||||
|
.form-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #2563eb;
|
||||||
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-cta {
|
||||||
|
padding: 4rem 0;
|
||||||
|
background: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-cta h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
color: #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-benefits {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-benefit {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-benefit .benefit-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-benefit h3 {
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
background: #1e293b;
|
||||||
|
color: #94a3b8;
|
||||||
|
padding: 3rem 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section h3 {
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section a {
|
||||||
|
color: #94a3b8;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section a:hover {
|
||||||
|
color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid #334155;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content h2 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eol-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-benefits {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.hero-content h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.computer-icon {
|
||||||
|
font-size: 6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card,
|
||||||
|
.service-card,
|
||||||
|
.cta-benefit {
|
||||||
|
animation: fadeInUp 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
* {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Print Styles */
|
||||||
|
@media print {
|
||||||
|
.navbar,
|
||||||
|
.hero-buttons,
|
||||||
|
.btn,
|
||||||
|
.contact-form {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 12pt;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
169
templates/contact.html
Normal file
169
templates/contact.html
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="nl">
|
||||||
|
<head>
|
||||||
|
<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">
|
||||||
|
<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="/#diensten">Diensten</a></li>
|
||||||
|
<li><a href="/contact" class="active">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="contact-hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Neem Contact Op</h1>
|
||||||
|
<p>Heeft u vragen over Linux migratie? Wij helpen u graag verder!</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="contact-content">
|
||||||
|
<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>Email</h3>
|
||||||
|
<p><a href="mailto:{{.Email}}">{{.Email}}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<div class="contact-icon">📞</div>
|
||||||
|
<div>
|
||||||
|
<h3>Telefoon</h3>
|
||||||
|
<p><a href="tel:{{.Phone}}">{{.Phone}}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<div class="contact-icon">🏢</div>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-form">
|
||||||
|
<h2>Stuur een bericht</h2>
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">Naam *</label>
|
||||||
|
<input type="text" id="name" name="name" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email *</label>
|
||||||
|
<input type="email" id="email" name="email" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="phone">Telefoon</label>
|
||||||
|
<input type="tel" id="phone" name="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">
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary">Verstuur bericht</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="contact-cta">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Waarom kiezen voor {{.CompanyName}}?</h2>
|
||||||
|
<div class="cta-benefits">
|
||||||
|
<div class="cta-benefit">
|
||||||
|
<div class="benefit-icon">🎯</div>
|
||||||
|
<h3>Persoonlijke aanpak</h3>
|
||||||
|
<p>Elke klant is uniek, en wij bieden maatwerkoplossingen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cta-benefit">
|
||||||
|
<div class="benefit-icon">🛠️</div>
|
||||||
|
<h3>Professionele service</h3>
|
||||||
|
<p>Jarenlange ervaring met Linux systemen en migraties.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cta-benefit">
|
||||||
|
<div class="benefit-icon">🤝</div>
|
||||||
|
<h3>Volledige ondersteuning</h3>
|
||||||
|
<p>Van installatie tot training, wij begeleiden u door het hele proces.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cta-benefit">
|
||||||
|
<div class="benefit-icon">💚</div>
|
||||||
|
<h3>Duurzame keuze</h3>
|
||||||
|
<p>Samen bouwen we aan 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>© 2024 {{.CompanyName}}. Alle rechten voorbehouden.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
165
templates/index.html
Normal file
165
templates/index.html
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="nl">
|
||||||
|
<head>
|
||||||
|
<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">
|
||||||
|
<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>{{.CompanyName}}</h1>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#home">Home</a></li>
|
||||||
|
<li><a href="#voordelen">Voordelen</a></li>
|
||||||
|
<li><a href="#diensten">Diensten</a></li>
|
||||||
|
<li><a href="/contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</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="computer-icon">💻</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>
|
||||||
|
|
||||||
|
<section id="windows10-eol" class="windows-eol">
|
||||||
|
<div class="container">
|
||||||
|
<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>
|
||||||
|
<div class="eol-stats">
|
||||||
|
<div class="stat">
|
||||||
|
<h3>1+ miljard</h3>
|
||||||
|
<p>Windows 10 computers wereldwijd</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<h3>240 miljoen ton</h3>
|
||||||
|
<p>Potentiële e-waste zonder migratie</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="diensten" class="services">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Onze Diensten</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="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>
|
||||||
|
<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>© 2024 {{.CompanyName}}. Alle rechten voorbehouden.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user