Skip to content

Commit 7f88e83

Browse files
author
Ferre De Belie
committed
feat: update content based on meeting
1 parent aeb3bc6 commit 7f88e83

10 files changed

Lines changed: 465 additions & 148 deletions

File tree

‎src/components/About.astro‎

Lines changed: 77 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,85 @@
22
import { Image } from 'astro:assets'
33
import logo from '../images/logo.png'
44
5-
const partners = [
6-
'Niko', 'Unifi', 'Rexel', 'Danwatt', 'ROBBshop', 'Wimood', 'Conrad', 'DSIT'
7-
]
85
---
96

107
<section id="over-ons" class="py-24">
118
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
129
<div class="grid lg:grid-cols-2 gap-16 items-center">
13-
<!-- Visual -->
10+
<!-- Timeline Visual -->
1411
<div class="fade-in-up">
15-
<div class="relative">
16-
<div
17-
class="w-full aspect-square max-w-md mx-auto bg-gradient-to-br from-leaf-50 to-white rounded-3xl flex items-center justify-center p-12"
18-
>
19-
<Image
20-
src={logo}
21-
alt="LEAF — Logic · Energy · Automation · Flow"
22-
class="w-full h-auto drop-shadow-lg"
23-
width={500}
24-
height={350}
25-
/>
12+
<div class="flex flex-col items-center gap-0">
13+
<!-- Logo 1: 2can -->
14+
<div class="flex items-center gap-4">
15+
<div class="w-24 h-24 bg-white rounded-2xl shadow-sm border border-slate-200 flex items-center justify-center">
16+
<span class="text-sm font-bold text-slate-400">2can</span>
17+
</div>
18+
<div>
19+
<div class="text-sm font-bold text-slate-700">Ferre De Belie</div>
20+
<div class="text-xs text-slate-500">IT / Automatisering</div>
21+
</div>
2622
</div>
2723

28-
<!-- Stats -->
29-
<div class="absolute -bottom-6 -right-6 bg-white rounded-2xl shadow-lg p-4">
30-
<div class="text-2xl font-bold text-leaf-600">2020</div>
31-
<div class="text-xs text-slate-500">Gestart uit passie</div>
24+
<!-- Connector line -->
25+
<div class="w-0.5 h-10 bg-gradient-to-b from-slate-300 to-leaf-400"></div>
26+
27+
<!-- Merge point -->
28+
<div class="w-10 h-10 bg-leaf-100 rounded-full flex items-center justify-center border-2 border-leaf-400">
29+
<svg class="w-5 h-5 text-leaf-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
30+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m0 0l-4-4m4 4l4-4" />
31+
</svg>
32+
</div>
33+
34+
<!-- Connector line -->
35+
<div class="w-0.5 h-10 bg-gradient-to-b from-leaf-400 to-leaf-600"></div>
36+
37+
<!-- LEAF logo with floating stats -->
38+
<div class="relative">
39+
<div class="w-32 h-32 bg-gradient-to-br from-leaf-50 to-white rounded-3xl shadow-lg border border-leaf-200 flex items-center justify-center p-4">
40+
<Image
41+
src={logo}
42+
alt="LEAF — Logic · Energy · Automation · Flow"
43+
class="w-full h-auto drop-shadow-md"
44+
width={200}
45+
height={140}
46+
/>
47+
</div>
48+
<!-- Floating stat: 6+ jaar -->
49+
<div class="absolute -left-28 top-1/2 -translate-y-1/2 bg-white rounded-xl shadow-md border border-slate-100 px-3 py-2 text-center">
50+
<div class="text-xl font-bold text-leaf-600">6+</div>
51+
<div class="text-[10px] text-slate-500">Jaar ervaring</div>
52+
</div>
53+
<!-- Floating stat: 100% op maat -->
54+
<div class="absolute -right-32 top-1/2 -translate-y-1/2 bg-white rounded-xl shadow-md border border-slate-100 px-3 py-2 text-center">
55+
<div class="text-xl font-bold text-leaf-600">100%</div>
56+
<div class="text-[10px] text-slate-500">Op maat gemaakt</div>
57+
</div>
58+
</div>
59+
<div class="mt-2 text-sm font-bold text-leaf-600">LEAF</div>
60+
<div class="text-xs text-slate-500">Sinds 2026</div>
61+
62+
<!-- Connector line -->
63+
<div class="w-0.5 h-10 bg-gradient-to-t from-slate-300 to-leaf-400"></div>
64+
65+
<!-- Merge point -->
66+
<div class="w-10 h-10 bg-leaf-100 rounded-full flex items-center justify-center border-2 border-leaf-400">
67+
<svg class="w-5 h-5 text-leaf-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
68+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20V4m0 0l-4 4m4-4l4 4" />
69+
</svg>
70+
</div>
71+
72+
<!-- Connector line -->
73+
<div class="w-0.5 h-10 bg-gradient-to-t from-slate-300 to-leaf-400"></div>
74+
75+
<!-- Logo 2: Wire Electro -->
76+
<div class="flex items-center gap-4">
77+
<div class="w-24 h-24 bg-white rounded-2xl shadow-sm border border-slate-200 flex items-center justify-center">
78+
<span class="text-sm font-bold text-slate-400">Wire Electro</span>
79+
</div>
80+
<div>
81+
<div class="text-sm font-bold text-slate-700">Amber Lakshotra</div>
82+
<div class="text-xs text-slate-500">Elektriciteit / Automatisering</div>
83+
</div>
3284
</div>
3385
</div>
3486
</div>
@@ -41,53 +93,19 @@ const partners = [
4193
Over Ons
4294
</span>
4395
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900">
44-
Twee specialisten, één visie
96+
Twee zelfstandigen,<br />één missie
4597
</h2>
4698
<p class="mt-6 text-lg text-slate-600 leading-relaxed">
47-
LEAF is ontstaan uit de samenwerking tussen twee vakmensen die dezelfde passie
48-
delen: technologie inzetten om woningen slimmer en energiezuiniger te maken.
49-
In hoofdberoep specialisten in ons vak, in bijberoep entrepreneurs met een visie.
99+
LEAF is een samenwerking tussen twee zelfstandige specialisten. Ferre komt uit
100+
de IT en automatisering, Amber uit de elektriciteit en automatisering. Samen bundelen wij onze
101+
kennis om woningen slimmer en energiezuiniger te maken.
50102
</p>
51103
<p class="mt-4 text-lg text-slate-600 leading-relaxed">
52-
Met jarenlange ervaring in IT, systeemautomatisering en elektrotechniek combineren
53-
wij het beste van twee werelden. Wij werken met bewezen, toekomstbestendige
54-
systemen — zodat uw investering ook over 10 jaar nog rendement oplevert.
104+
Geen groot bedrijf, wel persoonlijke service en jarenlange vakkennis. Wij werken
105+
met betrouwbare systemen zodat uw investering lang meegaat.
55106
</p>
56107

57-
<div class="mt-8 grid grid-cols-2 gap-6">
58-
<div>
59-
<div class="text-sm font-bold text-leaf-600 uppercase tracking-wider">Ferre De Belie</div>
60-
<div class="text-sm text-slate-500">IT / System / Automation Engineer</div>
61-
</div>
62-
<div>
63-
<div class="text-sm font-bold text-leaf-600 uppercase tracking-wider">Amber Lakshotra</div>
64-
<div class="text-sm text-slate-500">Electrical / Automation Engineer</div>
65-
</div>
66-
<div>
67-
<div class="text-3xl font-bold text-leaf-600">6+</div>
68-
<div class="text-sm text-slate-500">Jaar ervaring</div>
69-
</div>
70-
<div>
71-
<div class="text-3xl font-bold text-leaf-600">100%</div>
72-
<div class="text-sm text-slate-500">Op maat gemaakt</div>
73-
</div>
74-
</div>
75108

76-
<!-- Partners -->
77-
<div class="mt-10 pt-8 border-t border-slate-200">
78-
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">
79-
Onze Partners
80-
</p>
81-
<div class="flex flex-wrap gap-3">
82-
{
83-
partners.map((partner) => (
84-
<span class="px-3 py-1 text-xs font-medium text-slate-600 bg-slate-100 rounded-full">
85-
{partner}
86-
</span>
87-
))
88-
}
89-
</div>
90-
</div>
91109
</div>
92110
</div>
93111
</div>

‎src/components/Contact.astro‎

Lines changed: 69 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -57,36 +57,89 @@
5757
/>
5858
</div>
5959
</div>
60+
<div class="grid sm:grid-cols-2 gap-6">
61+
<div>
62+
<label
63+
for="stad"
64+
class="block text-sm font-medium text-slate-700 mb-2"
65+
>
66+
Stad / Gemeente
67+
</label>
68+
<input
69+
type="text"
70+
id="stad"
71+
name="stad"
72+
required
73+
class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-leaf-400 focus:ring-2 focus:ring-leaf-100 transition-colors outline-none"
74+
placeholder="Bv. Gent, Antwerpen..."
75+
/>
76+
</div>
77+
<div>
78+
<label
79+
for="telefoon"
80+
class="block text-sm font-medium text-slate-700 mb-2"
81+
>
82+
Telefoon
83+
<span class="text-slate-400">(optioneel)</span>
84+
</label>
85+
<input
86+
type="tel"
87+
id="telefoon"
88+
name="telefoon"
89+
class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-leaf-400 focus:ring-2 focus:ring-leaf-100 transition-colors outline-none"
90+
placeholder="+32 ..."
91+
/>
92+
</div>
93+
</div>
6094
<div>
6195
<label
62-
for="telefoon"
96+
for="interesse"
6397
class="block text-sm font-medium text-slate-700 mb-2"
6498
>
65-
Telefoon
99+
Interesse
100+
</label>
101+
<select
102+
id="interesse"
103+
name="interesse"
104+
required
105+
class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-leaf-400 focus:ring-2 focus:ring-leaf-100 transition-colors outline-none bg-white"
106+
>
107+
<option value="" disabled selected>Kies een optie...</option>
108+
<option value="home-automation">Home Automation</option>
109+
<option value="netwerk">Netwerk</option>
110+
<option value="beide">Beide</option>
111+
</select>
112+
</div>
113+
<div>
114+
<label
115+
for="devices"
116+
class="block text-sm font-medium text-slate-700 mb-2"
117+
>
118+
Slimme devices
66119
<span class="text-slate-400">(optioneel)</span>
67120
</label>
68-
<input
69-
type="tel"
70-
id="telefoon"
71-
name="telefoon"
72-
class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-leaf-400 focus:ring-2 focus:ring-leaf-100 transition-colors outline-none"
73-
placeholder="+32 ..."
74-
/>
121+
<textarea
122+
id="devices"
123+
name="devices"
124+
rows="3"
125+
class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-leaf-400 focus:ring-2 focus:ring-leaf-100 transition-colors outline-none resize-none"
126+
placeholder="Welke slimme toestellen heeft u al? Bv. slimme verlichting, thermostaat, zonnepanelen..."
127+
></textarea>
75128
</div>
76129
<div>
77130
<label
78-
for="bericht"
131+
for="opmerkingen"
79132
class="block text-sm font-medium text-slate-700 mb-2"
80133
>
81-
Bericht
134+
Extra opmerkingen
135+
<span class="text-slate-400">(optioneel)</span>
82136
</label>
83137
<textarea
84-
id="bericht"
85-
name="bericht"
86-
rows="4"
87-
required
138+
id="opmerkingen"
139+
name="opmerkingen"
140+
rows="3"
88141
class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-leaf-400 focus:ring-2 focus:ring-leaf-100 transition-colors outline-none resize-none"
89-
placeholder="Vertel ons over uw project of stel uw vraag..."
142+
placeholder="Nog iets dat u wilt meegeven..."
90143
></textarea>
91144
</div>
92145
<button

‎src/components/Hero.astro‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,21 @@ import logo from '../images/logo.png'
1919
Logic · Energy · Automation · Flow
2020
</span>
2121
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-tight">
22-
Uw energie.
22+
Uw energie.<br/>
2323
<span class="text-transparent bg-clip-text bg-gradient-to-r from-leaf-700 to-leaf-500">
2424
Slim geregeld.
2525
</span>
2626
</h1>
2727
<p class="mt-6 text-lg text-slate-600 max-w-xl leading-relaxed">
28-
LEAF is uw specialist in slimme en energiezuinige woningen. Van domotica en
29-
energiebeheer tot professionele netwerken en beveiliging — wij maken uw woning
30-
toekomstbestendig, vanuit één systeem.
28+
LEAF is een samenwerking tussen twee zelfstandige specialisten in <strong>domotica</strong>,
29+
<strong>energiebeheer</strong>, <strong>netwerken</strong> en <strong>audio</strong>. Samen maken wij uw woning slim en&nbsp;toekomstbestendig.
3130
</p>
3231
<div class="mt-8 flex flex-col sm:flex-row gap-4">
3332
<a
3433
href="#contact"
3534
class="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-leaf-600 rounded-xl hover:bg-leaf-700 transition-all hover:shadow-lg hover:shadow-leaf-600/25"
3635
>
37-
Gratis Consult Aanvragen
36+
Contacteer Ons
3837
<svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3938
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
4039
</svg>

‎src/components/Maintenance.astro‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
const pillars = [
3+
{
4+
name: 'Onderhoud',
5+
icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
6+
description: 'Proactief onderhoud om problemen te voorkomen.',
7+
features: [
8+
'Software & firmware up-to-date houden',
9+
'Controle conditie geplaatste toestellen',
10+
'Proactief ingrijpen bij risico\'s',
11+
'Periodieke gezondheidscheck van uw systeem',
12+
],
13+
},
14+
{
15+
name: 'Interventie & Aanpassingen',
16+
icon: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z',
17+
description: 'Wijzigingen of herstellingen altijd netjes ingepland.',
18+
features: [
19+
'Aanpassingen op aanvraag',
20+
'Transparante offerte vooraf',
21+
'Geplande interventie op afspraak',
22+
'Duidelijke facturatie',
23+
],
24+
},
25+
]
26+
---
27+
28+
<section id="onderhoud" class="py-24 bg-slate-50">
29+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
30+
<div class="text-center mb-16 fade-in-up">
31+
<span class="inline-flex items-center px-3 py-1 text-xs font-semibold text-leaf-700 bg-leaf-100 rounded-full mb-4">
32+
Onderhoudsplan
33+
</span>
34+
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900">
35+
Uw systeem in topvorm
36+
</h2>
37+
<p class="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">
38+
Wij houden uw installatie proactief in topconditie en plannen elke aanpassing transparant in.
39+
</p>
40+
</div>
41+
42+
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
43+
{
44+
pillars.map((pillar) => (
45+
<div class="fade-in-up bg-white rounded-2xl p-8 border border-slate-200 shadow-sm hover:shadow-lg hover:border-leaf-200 transition-all duration-300">
46+
<div class="w-12 h-12 bg-leaf-100 rounded-xl flex items-center justify-center mb-5">
47+
<svg class="w-6 h-6 text-leaf-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
48+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={pillar.icon} />
49+
</svg>
50+
</div>
51+
<h3 class="text-xl font-bold text-slate-900 mb-2">{pillar.name}</h3>
52+
<p class="text-sm text-slate-600 mb-6 leading-relaxed">{pillar.description}</p>
53+
<ul class="space-y-3">
54+
{pillar.features.map((feature) => (
55+
<li class="flex items-start gap-2 text-sm">
56+
<svg class="w-5 h-5 shrink-0 mt-0.5 text-leaf-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
57+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
58+
</svg>
59+
<span class="text-slate-600">{feature}</span>
60+
</li>
61+
))}
62+
</ul>
63+
</div>
64+
))
65+
}
66+
</div>
67+
</div>
68+
</section>

0 commit comments

Comments
 (0)