Hugging Face's logo

Spaces:
SametDAI
/
undefined
Running

App Files Community
SametDAI commited on
Commit
f2d8974
·
verified ·
1 Parent(s): 4cbb5dc

We are going to create a second page with this content: https://www.dutch-ai.nl/ai-discovery-workshop

Browse files
Files changed (2) hide show
  1. index.html +19 -18
  2. workshop.html +415 -0
index.html CHANGED
@@ -135,12 +135,13 @@
135
  </div>
136
  <div class="hidden md:block">
137
  <div class="ml-10 flex items-center space-x-4">
138
- <a href="#home" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
139
- <a href="#diensten" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Diensten</a>
140
- <a href="#over-ons" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Over Ons</a>
141
- <a href="#cases" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Cases</a>
142
- <a href="#contact" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
143
- </div>
 
144
  </div>
145
  <div class="md:hidden">
146
  <button type="button" class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary-600 focus:outline-none">
@@ -158,12 +159,13 @@
158
  <i data-feather="x" class="h-8 w-8 text-gray-700"></i>
159
  </button>
160
  <div class="space-y-6">
161
- <a href="#home" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Home</a>
162
- <a href="#diensten" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Diensten</a>
163
- <a href="#over-ons" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Over Ons</a>
164
- <a href="#cases" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Cases</a>
165
- <a href="#contact" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Contact</a>
166
- </div>
 
167
  </div>
168
  </div>
169
  <!-- Services Section -->
@@ -628,12 +630,11 @@
628
  <div>
629
  <h4 class="text-lg font-semibold mb-6">Bedrijf</h4>
630
  <ul class="space-y-3">
631
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Over Ons</a></li>
632
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Team</a></li>
633
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Cases</a></li>
634
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
635
- <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Carrière</a></li>
636
- </ul>
637
  </div>
638
 
639
  <div>
 
135
  </div>
136
  <div class="hidden md:block">
137
  <div class="ml-10 flex items-center space-x-4">
138
+ <a href="index.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
139
+ <a href="workshop.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Workshop</a>
140
+ <a href="index.html#diensten" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Diensten</a>
141
+ <a href="index.html#over-ons" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Over Ons</a>
142
+ <a href="index.html#cases" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Cases</a>
143
+ <a href="index.html#contact" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
144
+ </div>
145
  </div>
146
  <div class="md:hidden">
147
  <button type="button" class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary-600 focus:outline-none">
 
159
  <i data-feather="x" class="h-8 w-8 text-gray-700"></i>
160
  </button>
161
  <div class="space-y-6">
162
+ <a href="index.html" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Home</a>
163
+ <a href="workshop.html" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Workshop</a>
164
+ <a href="index.html#diensten" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Diensten</a>
165
+ <a href="index.html#over-ons" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Over Ons</a>
166
+ <a href="index.html#cases" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Cases</a>
167
+ <a href="index.html#contact" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Contact</a>
168
+ </div>
169
  </div>
170
  </div>
171
  <!-- Services Section -->
 
630
  <div>
631
  <h4 class="text-lg font-semibold mb-6">Bedrijf</h4>
632
  <ul class="space-y-3">
633
+ <li><a href="workshop.html" class="text-gray-400 hover:text-white transition duration-300">Workshop</a></li>
634
+ <li><a href="index.html#over-ons" class="text-gray-400 hover:text-white transition duration-300">Over Ons</a></li>
635
+ <li><a href="index.html#cases" class="text-gray-400 hover:text-white transition duration-300">Cases</a></li>
636
+ <li><a href="index.html#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
637
+ </ul>
 
638
  </div>
639
 
640
  <div>
workshop.html ADDED
@@ -0,0 +1,415 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="nl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Purplicious AI Discovery Workshop - Ontdek de mogelijkheden van AI voor uw bedrijf in onze intensieve workshop.">
7
+ <title>AI Discovery Workshop | Purplicious AI Wizards</title>
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-50">
13
+ <!-- Navigation -->
14
+ <nav class="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md shadow-sm z-50">
15
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
16
+ <div class="flex justify-between h-16 items-center">
17
+ <div class="flex-shrink-0 flex items-center">
18
+ <a href="index.html" class="text-xl font-bold text-primary-600">Purplicious AI</a>
19
+ </div>
20
+ <div class="hidden md:block">
21
+ <div class="ml-10 flex items-center space-x-4">
22
+ <a href="index.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
23
+ <a href="workshop.html" class="text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Workshop</a>
24
+ <a href="index.html#diensten" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Diensten</a>
25
+ <a href="index.html#cases" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Cases</a>
26
+ <a href="index.html#contact" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
27
+ </div>
28
+ </div>
29
+ <div class="md:hidden">
30
+ <button type="button" class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary-600 focus:outline-none">
31
+ <i data-feather="menu" class="h-6 w-6"></i>
32
+ </button>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </nav>
37
+
38
+ <!-- Hero Section -->
39
+ <div class="pt-32 pb-20 bg-gradient-to-r from-primary-500 to-primary-700 text-white">
40
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
41
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">AI Discovery Workshop</h1>
42
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">
43
+ Ontdek in één dag hoe AI uw bedrijf kan transformeren
44
+ </p>
45
+ <a href="#register" class="bg-white hover:bg-gray-100 text-primary-600 font-bold py-4 px-8 rounded-lg transition duration-300 transform hover:scale-105 inline-block">
46
+ Schrijf Nu In
47
+ </a>
48
+ </div>
49
+ </div>
50
+
51
+ <!-- Workshop Benefits -->
52
+ <section class="py-20 bg-white">
53
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
54
+ <div class="text-center mb-16">
55
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Wat levert de workshop op?</h2>
56
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
57
+ Een intensieve dag vol inzichten en concrete actiepunten voor uw bedrijf
58
+ </p>
59
+ </div>
60
+
61
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
62
+ <div class="bg-gray-50 p-8 rounded-xl">
63
+ <div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
64
+ <i data-feather="target" class="text-primary-600 w-8 h-8"></i>
65
+ </div>
66
+ <h3 class="text-xl font-bold text-center mb-4">Scherpe Focus</h3>
67
+ <p class="text-gray-600 text-center">
68
+ Ontdek welke AI-toepassingen het meest relevant zijn voor uw specifieke uitdagingen
69
+ </p>
70
+ </div>
71
+
72
+ <div class="bg-gray-50 p-8 rounded-xl">
73
+ <div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
74
+ <i data-feather="zap" class="text-primary-600 w-8 h-8"></i>
75
+ </div>
76
+ <h3 class="text-xl font-bold text-center mb-4">Concrete Actiepunten</h3>
77
+ <p class="text-gray-600 text-center">
78
+ Ga naar huis met een duidelijk plan van aanpak voor AI-implementatie
79
+ </p>
80
+ </div>
81
+
82
+ <div class="bg-gray-50 p-8 rounded-xl">
83
+ <div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
84
+ <i data-feather="trending-up" class="text-primary-600 w-8 h-8"></i>
85
+ </div>
86
+ <h3 class="text-xl font-bold text-center mb-4">Concurrentievoordeel</h3>
87
+ <p class="text-gray-600 text-center">
88
+ Ontwikkel een strategie om voor te blijven op concurrenten met AI
89
+ </p>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </section>
94
+
95
+ <!-- Workshop Details -->
96
+ <section class="py-20 bg-gray-50">
97
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
98
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
99
+ <div>
100
+ <img src="http://static.photos/workspace/1200x630/1" alt="Workshop setting" class="rounded-xl shadow-lg">
101
+ </div>
102
+ <div>
103
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Programma Details</h2>
104
+
105
+ <div class="space-y-6">
106
+ <div class="flex items-start">
107
+ <div class="bg-primary-100 p-3 rounded-full mr-5 flex-shrink-0">
108
+ <i data-feather="clock" class="text-primary-600 w-5 h-5"></i>
109
+ </div>
110
+ <div>
111
+ <h3 class="text-xl font-bold text-gray-900 mb-2">09:00 - 09:30</h3>
112
+ <p class="text-gray-600">Ontvangst & introductie</p>
113
+ </div>
114
+ </div>
115
+
116
+ <div class="flex items-start">
117
+ <div class="bg-primary-100 p-3 rounded-full mr-5 flex-shrink-0">
118
+ <i data-feather="book" class="text-primary-600 w-5 h-5"></i>
119
+ </div>
120
+ <div>
121
+ <h3 class="text-xl font-bold text-gray-900 mb-2">09:30 - 11:00</h3>
122
+ <p class="text-gray-600">AI fundamentals & state-of-the-art</p>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="flex items-start">
127
+ <div class="bg-primary-100 p-3 rounded-full mr-5 flex-shrink-0">
128
+ <i data-feather="search" class="text-primary-600 w-5 h-5"></i>
129
+ </div>
130
+ <div>
131
+ <h3 class="text-xl font-bold text-gray-900 mb-2">11:15 - 12:30</h3>
132
+ <p class="text-gray-600">Uw bedrijfsprocessen analyseren voor AI-mogelijkheden</p>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="flex items-start">
137
+ <div class="bg-primary-100 p-3 rounded-full mr-5 flex-shrink-0">
138
+ <i data-feather="coffee" class="text-primary-600 w-5 h-5"></i>
139
+ </div>
140
+ <div>
141
+ <h3 class="text-xl font-bold text-gray-900 mb-2">12:30 - 13:30</h3>
142
+ <p class="text-gray-600">Lunch & netwerken</p>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="flex items-start">
147
+ <div class="bg-primary-100 p-3 rounded-full mr-5 flex-shrink-0">
148
+ <i data-feather="cpu" class="text-primary-600 w-5 h-5"></i>
149
+ </div>
150
+ <div>
151
+ <h3 class="text-xl font-bold text-gray-900 mb-2">13:30 - 15:00</h3>
152
+ <p class="text-gray-600">Deep dive: AI use cases voor uw sector</p>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="flex items-start">
157
+ <div class="bg-primary-100 p-3 rounded-full mr-5 flex-shrink-0">
158
+ <i data-feather="check-circle" class="text-primary-600 w-5 h-5"></i>
159
+ </div>
160
+ <div>
161
+ <h3 class="text-xl font-bold text-gray-900 mb-2">15:15 - 16:30</h3>
162
+ <p class="text-gray-600">Roadmap ontwikkelen & actieplan</p>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Testimonials -->
172
+ <section class="py-20 bg-white">
173
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
174
+ <div class="text-center mb-16">
175
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Wat zeggen onze deelnemers?</h2>
176
+ </div>
177
+
178
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
179
+ <div class="bg-gray-50 p-8 rounded-xl">
180
+ <div class="flex items-center mb-4">
181
+ <div class="flex -space-x-2 mr-4">
182
+ <img src="http://static.photos/people/200x200/4" alt="Deelnemer" class="w-12 h-12 rounded-full border-2 border-white">
183
+ </div>
184
+ <div>
185
+ <h4 class="font-bold">Mark van Dijk</h4>
186
+ <p class="text-gray-600 text-sm">CEO, Retail Company</p>
187
+ </div>
188
+ </div>
189
+ <p class="text-gray-600 italic">
190
+ "De workshop heeft ons geholpen om concrete AI-toepassingen te identificeren die we binnen 3 maanden hebben geïmplementeerd. Onze klantenservice is hierdoor met 40% verbeterd!"
191
+ </p>
192
+ <div class="flex mt-4">
193
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
194
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
195
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
196
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
197
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="bg-gray-50 p-8 rounded-xl">
202
+ <div class="flex items-center mb-4">
203
+ <div class="flex -space-x-2 mr-4">
204
+ <img src="http://static.photos/people/200x200/5" alt="Deelnemer" class="w-12 h-12 rounded-full border-2 border-white">
205
+ </div>
206
+ <div>
207
+ <h4 class="font-bold">Lisa de Vries</h4>
208
+ <p class="text-gray-600 text-sm">CTO, Tech Startup</p>
209
+ </div>
210
+ </div>
211
+ <p class="text-gray-600 italic">
212
+ "Na deze dag hadden we niet alleen een duidelijk beeld van AI-mogelijkheden, maar ook een concreet stappenplan. Binnen een half jaar hebben we twee AI-projecten opgeleverd!"
213
+ </p>
214
+ <div class="flex mt-4">
215
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
216
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
217
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
218
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
219
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </section>
225
+
226
+ <!-- Registration Form -->
227
+ <section id="register" class="py-20 bg-primary-600 text-white">
228
+ <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
229
+ <div class="bg-white rounded-xl shadow-lg p-8">
230
+ <h2 class="text-3xl font-bold text-gray-900 mb-2">Schrijf u in voor de workshop</h2>
231
+ <p class="text-gray-600 mb-6">Vul het formulier in en we nemen contact met u op om de details te bespreken.</p>
232
+
233
+ <form class="space-y-6">
234
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
235
+ <div>
236
+ <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">Voornaam *</label>
237
+ <input type="text" id="first-name" name="first-name" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
238
+ </div>
239
+ <div>
240
+ <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Achternaam *</label>
241
+ <input type="text" id="last-name" name="last-name" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
242
+ </div>
243
+ </div>
244
+
245
+ <div>
246
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
247
+ <input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
248
+ </div>
249
+
250
+ <div>
251
+ <label for="company" class="block text-sm font-medium text-gray-700 mb-1">Bedrijfsnaam *</label>
252
+ <input type="text" id="company" name="company" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
253
+ </div>
254
+
255
+ <div>
256
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Telefoonnummer</label>
257
+ <input type="tel" id="phone" name="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
258
+ </div>
259
+
260
+ <div>
261
+ <label for="participants" class="block text-sm font-medium text-gray-700 mb-1">Aantal deelnemers *</label>
262
+ <select id="participants" name="participants" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
263
+ <option value="">Selecteer</option>
264
+ <option value="1">1 deelnemer</option>
265
+ <option value="2">2 deelnemers</option>
266
+ <option value="3">3 deelnemers</option>
267
+ <option value="4+">4 of meer deelnemers</option>
268
+ </select>
269
+ </div>
270
+
271
+ <div>
272
+ <label for="interests" class="block text-sm font-medium text-gray-700 mb-1">Interesses (meerdere opties mogelijk)</label>
273
+ <div class="space-y-2">
274
+ <div class="flex items-center">
275
+ <input id="interest-chatbots" name="interests" type="checkbox" value="chatbots" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
276
+ <label for="interest-chatbots" class="ml-3 block text-sm text-gray-700">Chatbots & Virtuele Assistenten</label>
277
+ </div>
278
+ <div class="flex items-center">
279
+ <input id="interest-analytics" name="interests" type="checkbox" value="analytics" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
280
+ <label for="interest-analytics" class="ml-3 block text-sm text-gray-700">Predictive Analytics</label>
281
+ </div>
282
+ <div class="flex items-center">
283
+ <input id="interest-vision" name="interests" type="checkbox" value="vision" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
284
+ <label for="interest-vision" class="ml-3 block text-sm text-gray-700">Beeldherkenning</label>
285
+ </div>
286
+ <div class="flex items-center">
287
+ <input id="interest-automation" name="interests" type="checkbox" value="automation" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
288
+ <label for="interest-automation" class="ml-3 block text-sm text-gray-700">Procesautomatisering</label>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <div>
294
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Opmerkingen of vragen</label>
295
+ <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"></textarea>
296
+ </div>
297
+
298
+ <div class="flex items-center">
299
+ <input id="privacy" name="privacy" type="checkbox" required class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
300
+ <label for="privacy" class="ml-3 block text-sm text-gray-700">
301
+ Ik ga akkoord met het <a href="#" class="text-primary-600 hover:text-primary-700">privacybeleid</a> *
302
+ </label>
303
+ </div>
304
+
305
+ <div>
306
+ <button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-bold py-4 px-6 rounded-lg transition duration-300 transform hover:scale-[1.02]">
307
+ Verstuur Aanmelding
308
+ </button>
309
+ </div>
310
+ </form>
311
+ </div>
312
+ </div>
313
+ </section>
314
+
315
+ <!-- Footer -->
316
+ <footer class="bg-gray-900 text-white pt-16 pb-12">
317
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
318
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
319
+ <div>
320
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
321
+ <span class="bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent">Purplicious AI</span>
322
+ <span class="ml-2 text-xs bg-primary-600 px-2 py-1 rounded-full">Wizards</span>
323
+ </h3>
324
+ <p class="text-gray-400 mb-6">
325
+ Specialisten in op maat gemaakte AI-oplossingen voor bedrijven die willen innoveren en groeien.
326
+ </p>
327
+ <div class="flex space-x-4">
328
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
329
+ <i data-feather="twitter"></i>
330
+ </a>
331
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
332
+ <i data-feather="linkedin"></i>
333
+ </a>
334
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
335
+ <i data-feather="facebook"></i>
336
+ </a>
337
+ </div>
338
+ </div>
339
+
340
+ <div>
341
+ <h4 class="text-lg font-semibold mb-6">Pagina's</h4>
342
+ <ul class="space-y-3">
343
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
344
+ <li><a href="workshop.html" class="text-gray-400 hover:text-white transition duration-300">Workshop</a></li>
345
+ <li><a href="index.html#diensten" class="text-gray-400 hover:text-white transition duration-300">Diensten</a></li>
346
+ <li><a href="index.html#cases" class="text-gray-400 hover:text-white transition duration-300">Cases</a></li>
347
+ <li><a href="index.html#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
348
+ </ul>
349
+ </div>
350
+
351
+ <div>
352
+ <h4 class="text-lg font-semibold mb-6">Contact</h4>
353
+ <ul class="space-y-3">
354
+ <li class="flex items-start">
355
+ <i data-feather="map-pin" class="text-gray-400 w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
356
+ <span class="text-gray-400">AI Straat 42, 1011 AA Amsterdam</span>
357
+ </li>
358
+ <li class="flex items-center">
359
+ <i data-feather="mail" class="text-gray-400 w-5 h-5 mr-3"></i>
360
+ <a href="mailto:info@purplicious-ai.nl" class="text-gray-400 hover:text-white transition duration-300">info@purplicious-ai.nl</a>
361
+ </li>
362
+ <li class="flex items-center">
363
+ <i data-feather="phone" class="text-gray-400 w-5 h-5 mr-3"></i>
364
+ <a href="tel:+31612345678" class="text-gray-400 hover:text-white transition duration-300">+31 6 12345678</a>
365
+ </li>
366
+ </ul>
367
+ </div>
368
+
369
+ <div>
370
+ <h4 class="text-lg font-semibold mb-6">Workshop</h4>
371
+ <p class="text-gray-400 mb-4">
372
+ Interesse in onze AI Discovery Workshop? Neem contact op voor meer informatie over data en locaties.
373
+ </p>
374
+ <a href="#register" class="inline-flex items-center text-primary-400 hover:text-primary-300 font-medium">
375
+ Inschrijven
376
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
377
+ </a>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
382
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
383
+ &copy; 2023 <span class="text-primary-400">Purplicious AI Wizards</span>. Alle rechten voorbehouden.
384
+ </p>
385
+ <div class="flex flex-col sm:flex-row gap-4 sm:gap-6 text-center">
386
+ <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300 hover:underline">Privacybeleid</a>
387
+ <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300 hover:underline">Algemene Voorwaarden</a>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </footer>
392
+
393
+ <script>
394
+ // Initialize feather icons
395
+ feather.replace();
396
+
397
+ // Mobile menu toggle
398
+ if(document.querySelector('.mobile-menu-button')) {
399
+ document.querySelector('.mobile-menu-button').addEventListener('click', function() {
400
+ document.querySelector('.mobile-menu').classList.toggle('hidden');
401
+ });
402
+ }
403
+
404
+ // Smooth scrolling for anchor links
405
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
406
+ anchor.addEventListener('click', function (e) {
407
+ e.preventDefault();
408
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
409
+ behavior: 'smooth'
410
+ });
411
+ });
412
+ });
413
+ </script>
414
+ </body>
415
+ </html>