Fiberbroker.nl

Zakelijk glasvezel, simpel geregeld.

🚀 Quick Start

# Installeer dependencies
npm install

# Start development server
npm run dev

# Bouw voor productie
npm run build

# Preview productie build
npm run preview

📁 Project Structuur

fiberbroker-website/
├── src/
│   ├── components/     # Herbruikbare UI componenten
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   │   ├── PostcodeCheck.astro
│   │   ├── ProductCard.astro
│   │   ├── FeatureSection.astro
│   │   ├── FAQ.astro
│   │   ├── CTASection.astro
│   │   ├── ContactForm.astro
│   │   └── NetworkProviders.astro
│   ├── layouts/
│   │   └── Layout.astro  # Hoofdtemplate met SEO
│   ├── pages/
│   │   ├── index.astro        # Homepage
│   │   ├── check.astro        # Postcodecheck resultaten
│   │   ├── producten.astro    # Producten overzicht
│   │   ├── aanvragen.astro    # Aanvraagformulier
│   │   ├── over-ons.astro     # Over ons + contact
│   │   ├── zakelijk-internet.astro  # SEO landingspagina
│   │   └── glasvezel-mkb.astro      # SEO landingspagina
│   └── styles/
│       └── global.css    # Tailwind + custom styles
├── public/
│   ├── favicon.svg
│   └── robots.txt
├── astro.config.mjs
├── tailwind.config.mjs
├── package.json
└── tsconfig.json

🎨 Huisstijl

Kleuren

Naam	Hex	Gebruik
Deep Petrol	#0F2830	Headers, logo, primaire elementen
Ocean Teal	#1A4D5C	Secundair, hover states
Growth Green	#2D9B6E	CTA buttons, succes, actie
Mint Mist	#E8F4F0	Achtergronden, cards
Trust Gold	#D4A84B	Premium highlights
Ink Black	#1C1C1C	Body tekst

Fonts

• Headlines & Body: Inter (Google Fonts)
• Code: JetBrains Mono

🌐 Deployment naar Hostinger

Methode 1: Git Repository

1. Push naar GitHub:

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/jouw-username/fiberbroker-website.git
   git push -u origin main

2. In Hostinger:

   • Ga naar Websites → Manage
   • Klik op Git in het linker menu
   • Klik op Create a new repository
   • Verbind met je GitHub repository
   • Stel de branch in op main

3. Build configuratie in Hostinger:

   • Build command: npm run build
   • Output directory: dist
   • Node version: 18.x of hoger

Methode 2: Handmatige Upload

1. Bouw lokaal:

   npm run build

2. Upload de inhoud van de dist/ map naar Hostinger via File Manager of FTP.

Methode 3: Hostinger Node.js Hosting

Als je Hostinger Node.js hosting hebt:

1. Upload het complete project (niet alleen dist)
2. Stel in Hostinger in:
   • Startup file: Niet nodig voor statische site
   • Build command: npm install && npm run build
   • Public directory: dist

🔧 Lokale Ontwikkeling met Claude Code

Dit project is klaar om verder uitgebouwd te worden met Claude Code:

# Clone het project
git clone https://github.com/jouw-username/fiberbroker-website.git
cd fiberbroker-website

# Installeer dependencies
npm install

# Start development
npm run dev

Suggesties voor verdere ontwikkeling:

1. Postcodecheck API

   • Koppel aan echte postcode API (PostcodeAPI.nu, etc.)
   • Integreer met wholesale partner API's

2. Formulier Backend

   • Koppel contactformulier aan email service (Resend, SendGrid)
   • Of gebruik Netlify Forms / Formspree

3. CMS Integratie

   • Voeg Astro Content Collections toe voor blog/nieuws
   • Of koppel aan headless CMS (Storyblok, Contentful)

4. Analytics

   • Voeg Plausible of Fathom toe voor privacy-vriendelijke analytics

📝 Licentie

Eigendom van Fiberbroker.nl

---

Gebouwd met Astro + Tailwind CSS