Hugging Face's logo

Spaces:
nielsgl
/
a6s
Running

App Files Community
nielsgl commited on
Commit
aabefbc
·
verified ·
1 Parent(s): 7329d0a

Alright I think this is a good start but it feels very much like an off the shelf template. Can we make it more exciting because agents are very much the future but we need to make this interesting and accessible for small and medium businesses that just want to know how can this help my business. It's like ads and seo, they just want to know how does this affect me without knowing the technical details. Think about a design that would be engaging for them. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +544 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: A6s
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: a6s
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,544 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <title>AI Nexus | Slimme oplossingen voor uw MKB</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
10
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
11
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
12
+ <style>
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background-color: #f9fafb;
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
19
+ }
20
+ .card-hover:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body>
27
+ <div id="root"></div>
28
+
29
+ <script type="text/babel">
30
+ const { useState } = React;
31
+
32
+ function App() {
33
+ const [formData, setFormData] = useState({
34
+ name: '',
35
+ email: '',
36
+ company: '',
37
+ website: ''
38
+ });
39
+ const [submitted, setSubmitted] = useState(false);
40
+ const [loading, setLoading] = useState(false);
41
+ const [aiSuggestions, setAiSuggestions] = useState([]);
42
+
43
+ const handleChange = (e) => {
44
+ const { name, value } = e.target;
45
+ setFormData(prev => ({
46
+ ...prev,
47
+ [name]: value
48
+ }));
49
+ };
50
+
51
+ const handleSubmit = (e) => {
52
+ e.preventDefault();
53
+ setLoading(true);
54
+
55
+ // Simulate API call to analyze website
56
+ setTimeout(() => {
57
+ // Generate mock AI suggestions based on website domain
58
+ const domain = formData.website.toLowerCase();
59
+ const suggestions = [];
60
+
61
+ if (domain.includes('retail') || domain.includes('winkel')) {
62
+ suggestions.push(
63
+ 'AI-gestuurde voorraadoptimalisatie',
64
+ 'Persoonlijke productaanbevelingen voor klanten',
65
+ 'Chatbot voor 24/7 klantenservice'
66
+ );
67
+ } else if (domain.includes('horeca') || domain.includes('restaurant')) {
68
+ suggestions.push(
69
+ 'Dynamische prijsstelling voor kamers/tafels',
70
+ 'AI-menusuggesties op basis van voorraad en trends',
71
+ 'Reserveringsbeheer met voorspellende capaciteitsplanning'
72
+ );
73
+ } else if (domain.includes('zakelijke') || domain.includes('diensten')) {
74
+ suggestions.push(
75
+ 'Automatisering van terugkerende administratieve taken',
76
+ 'AI-ondersteunde documentverwerking',
77
+ 'Slimme agendaplanning en vergaderassistent'
78
+ );
79
+ } else {
80
+ // Default suggestions
81
+ suggestions.push(
82
+ 'AI-chatbot voor efficiëntere klantinteracties',
83
+ 'Automatische data-analyse voor betere besluitvorming',
84
+ 'Procesautomatisering voor tijdswinst',
85
+ 'Voorspellende analyses voor markttrends'
86
+ );
87
+ }
88
+
89
+ setAiSuggestions(suggestions);
90
+ setSubmitted(true);
91
+ setLoading(false);
92
+ }, 2000);
93
+ };
94
+
95
+ if (submitted) {
96
+ return (
97
+ <ResultsPage
98
+ formData={formData}
99
+ suggestions={aiSuggestions}
100
+ onBack={() => setSubmitted(false)}
101
+ />
102
+ );
103
+ }
104
+
105
+ return (
106
+ <FormPage
107
+ formData={formData}
108
+ onChange={handleChange}
109
+ onSubmit={handleSubmit}
110
+ loading={loading}
111
+ />
112
+ );
113
+ }
114
+
115
+ function FormPage({ formData, onChange, onSubmit, loading }) {
116
+ return (
117
+ <div className="min-h-screen flex flex-col">
118
+ {/* Header */}
119
+ <header className="gradient-bg text-white">
120
+ <div className="container mx-auto px-4 py-8">
121
+ <div className="flex justify-between items-center">
122
+ <div className="flex items-center space-x-2">
123
+ <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
124
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
125
+ </svg>
126
+ <span className="text-xl font-bold">AI Nexus</span>
127
+ </div>
128
+ <nav className="hidden md:flex space-x-6">
129
+ <a href="#features" className="hover:text-indigo-200 transition">Functies</a>
130
+ <a href="#pricing" className="hover:text-indigo-200 transition">Prijzen</a>
131
+ <a href="#contact" className="hover:text-indigo-200 transition">Contact</a>
132
+ </nav>
133
+ <button className="md:hidden">
134
+ <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
135
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
136
+ </svg>
137
+ </button>
138
+ </div>
139
+ </div>
140
+ </header>
141
+
142
+ {/* Hero Section */}
143
+ <section className="gradient-bg text-white py-16 md:py-24">
144
+ <div className="container mx-auto px-4 text-center">
145
+ <h1 className="text-4xl md:text-5xl font-bold mb-6">Ontdek de kracht van AI voor uw bedrijf</h1>
146
+ <p className="text-xl md:text-2xl max-w-3xl mx-auto mb-8">
147
+ AI Nexus helpt MKB-bedrijven om slimmer te werken met geavanceerde AI-agents.
148
+ Ontdek vandaag nog hoe wij uw bedrijfsprocessen kunnen optimaliseren.
149
+ </p>
150
+ <div className="flex justify-center space-x-4">
151
+ <a href="#form" className="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition shadow-md">
152
+ Gratis scan aanvragen
153
+ </a>
154
+ <a href="#features" className="border border-white text-white hover:bg-indigo-700 px-6 py-3 rounded-lg font-medium transition">
155
+ Meer informatie
156
+ </a>
157
+ </div>
158
+ </div>
159
+ </section>
160
+
161
+ {/* Main Content */}
162
+ <main className="flex-grow container mx-auto px-4 py-12">
163
+ <div className="max-w-4xl mx-auto">
164
+ <div className="bg-white rounded-xl shadow-lg overflow-hidden">
165
+ <div className="md:flex">
166
+ <div className="md:w-1/2 bg-indigo-50 p-8 flex flex-col justify-center">
167
+ <h2 className="text-2xl font-bold text-gray-800 mb-4">Hoe kan AI uw bedrijf helpen?</h2>
168
+ <p className="text-gray-600 mb-6">
169
+ Onze geavanceerde AI-scan analyseert uw website en geeft persoonlijke aanbevelingen voor:
170
+ </p>
171
+ <ul className="space-y-3">
172
+ <li className="flex items-start">
173
+ <svg className="w-5 h-5 text-indigo-500 mt-1 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
174
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
175
+ </svg>
176
+ <span>Klantenservice automatisering</span>
177
+ </li>
178
+ <li className="flex items-start">
179
+ <svg className="w-5 h-5 text-indigo-500 mt-1 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
180
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
181
+ </svg>
182
+ <span>Verkoop- en marketingoptimalisatie</span>
183
+ </li>
184
+ <li className="flex items-start">
185
+ <svg className="w-5 h-5 text-indigo-500 mt-1 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
186
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
187
+ </svg>
188
+ <span>Interne procesverbetering</span>
189
+ </li>
190
+ <li className="flex items-start">
191
+ <svg className="w-5 h-5 text-indigo-500 mt-1 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
192
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
193
+ </svg>
194
+ <span>Data-analyse en inzichten</span>
195
+ </li>
196
+ </ul>
197
+ </div>
198
+ <div id="form" className="md:w-1/2 p-8">
199
+ <h2 className="text-2xl font-bold text-gray-800 mb-6">Vraag uw gratis AI-scan aan</h2>
200
+ <form onSubmit={onSubmit}>
201
+ <div className="mb-4">
202
+ <label htmlFor="name" className="block text-gray-700 font-medium mb-2">Uw naam</label>
203
+ <input
204
+ type="text"
205
+ id="name"
206
+ name="name"
207
+ value={formData.name}
208
+ onChange={onChange}
209
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
210
+ required
211
+ />
212
+ </div>
213
+ <div className="mb-4">
214
+ <label htmlFor="email" className="block text-gray-700 font-medium mb-2">E-mailadres</label>
215
+ <input
216
+ type="email"
217
+ id="email"
218
+ name="email"
219
+ value={formData.email}
220
+ onChange={onChange}
221
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
222
+ required
223
+ />
224
+ </div>
225
+ <div className="mb-4">
226
+ <label htmlFor="company" className="block text-gray-700 font-medium mb-2">Bedrijfsnaam</label>
227
+ <input
228
+ type="text"
229
+ id="company"
230
+ name="company"
231
+ value={formData.company}
232
+ onChange={onChange}
233
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
234
+ required
235
+ />
236
+ </div>
237
+ <div className="mb-6">
238
+ <label htmlFor="website" className="block text-gray-700 font-medium mb-2">Bedrijfswebsite</label>
239
+ <input
240
+ type="url"
241
+ id="website"
242
+ name="website"
243
+ value={formData.website}
244
+ onChange={onChange}
245
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
246
+ placeholder="https://www.voorbeeld.nl"
247
+ required
248
+ />
249
+ </div>
250
+ <button
251
+ type="submit"
252
+ className="w-full gradient-bg text-white py-3 px-6 rounded-lg font-medium hover:opacity-90 transition shadow-md flex items-center justify-center"
253
+ disabled={loading}
254
+ >
255
+ {loading ? (
256
+ <>
257
+ <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
258
+ <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
259
+ <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
260
+ </svg>
261
+ Bezig met analyseren...
262
+ </>
263
+ ) : (
264
+ 'Start AI-scan'
265
+ )}
266
+ </button>
267
+ <p className="text-sm text-gray-500 mt-4">
268
+ Wij respecteren uw privacy. Uw gegevens worden alleen gebruikt voor deze scan.
269
+ </p>
270
+ </form>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </main>
276
+
277
+ {/* Features Section */}
278
+ <section id="features" className="bg-gray-50 py-16">
279
+ <div className="container mx-auto px-4">
280
+ <h2 className="text-3xl font-bold text-center text-gray-800 mb-12">Hoe onze AI-agents u helpen</h2>
281
+ <div className="grid md:grid-cols-3 gap-8">
282
+ <div className="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover">
283
+ <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
284
+ <svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
285
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
286
+ </svg>
287
+ </div>
288
+ <h3 className="text-xl font-semibold mb-2">Klantenservice</h3>
289
+ <p className="text-gray-600">
290
+ Onze AI-chatbots bieden 24/7 ondersteuning, beantwoorden veelgestelde vragen en leiden klanten naar de juiste oplossing.
291
+ </p>
292
+ </div>
293
+ <div className="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover">
294
+ <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
295
+ <svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
296
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
297
+ </svg>
298
+ </div>
299
+ <h3 className="text-xl font-semibold mb-2">Verkoopoptimalisatie</h3>
300
+ <p className="text-gray-600">
301
+ AI analyseert klantgedrag en stelt gepersonaliseerde aanbiedingen voor, waardoor uw conversieratio stijgt.
302
+ </p>
303
+ </div>
304
+ <div className="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover">
305
+ <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
306
+ <svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
307
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
308
+ </svg>
309
+ </div>
310
+ <h3 className="text-xl font-semibold mb-2">Procesautomatisering</h3>
311
+ <p className="text-gray-600">
312
+ Automatiseer terugkerende taken zoals facturatie, planning en data-entry, zodat u zich kunt richten op wat belangrijk is.
313
+ </p>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ {/* Footer */}
320
+ <footer className="bg-gray-800 text-white py-12">
321
+ <div className="container mx-auto px-4">
322
+ <div className="grid md:grid-cols-4 gap-8">
323
+ <div>
324
+ <div className="flex items-center space-x-2 mb-4">
325
+ <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
326
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
327
+ </svg>
328
+ <span className="text-xl font-bold">AI Nexus</span>
329
+ </div>
330
+ <p className="text-gray-400">
331
+ Wij helpen MKB-bedrijven om slimmer te werken met geavanceerde AI-oplossingen op maat.
332
+ </p>
333
+ </div>
334
+ <div>
335
+ <h4 className="text-lg font-semibold mb-4">Bedrijf</h4>
336
+ <ul className="space-y-2">
337
+ <li><a href="#" className="text-gray-400 hover:text-white transition">Over ons</a></li>
338
+ <li><a href="#" className="text-gray-400 hover:text-white transition">Team</a></li>
339
+ <li><a href="#" className="text-gray-400 hover:text-white transition">Vacatures</a></li>
340
+ <li><a href="#" className="text-gray-400 hover:text-white transition">Blog</a></li>
341
+ </ul>
342
+ </div>
343
+ <div>
344
+ <h4 className="text-lg font-semibold mb-4">Oplossingen</h4>
345
+ <ul className="space-y-2">
346
+ <li><a href="#" className="text-gray-400 hover:text-white transition">Klantenservice</a></li>
347
+ <li><a href="#" className="text-gray-400 hover:text-white transition">Verkoop & Marketing</a></li>
348
+ <li><a href="#" className="text-gray-400 hover:text-white transition">Interne processen</a></li>
349
+ <li><a href="#" className="text-gray-400 hover:text-white transition">Data-analyse</a></li>
350
+ </ul>
351
+ </div>
352
+ <div id="contact">
353
+ <h4 className="text-lg font-semibold mb-4">Contact</h4>
354
+ <ul className="space-y-2">
355
+ <li className="flex items-start">
356
+ <svg className="w-5 h-5 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
357
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
358
+ </svg>
359
+ <span className="text-gray-400">[email protected]</span>
360
+ </li>
361
+ <li className="flex items-start">
362
+ <svg className="w-5 h-5 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
363
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
364
+ </svg>
365
+ <span className="text-gray-400">085 - 303 44 55</span>
366
+ </li>
367
+ <li className="flex items-start">
368
+ <svg className="w-5 h-5 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
369
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
370
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
371
+ </svg>
372
+ <span className="text-gray-400">Keizersgracht 264, Amsterdam</span>
373
+ </li>
374
+ </ul>
375
+ </div>
376
+ </div>
377
+ <div className="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
378
+ <p className="text-gray-400 mb-4 md:mb-0">© 2023 AI Nexus. Alle rechten voorbehouden.</p>
379
+ <div className="flex space-x-6">
380
+ <a href="#" className="text-gray-400 hover:text-white transition">
381
+ <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
382
+ <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
383
+ </svg>
384
+ </a>
385
+ <a href="#" className="text-gray-400 hover:text-white transition">
386
+ <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
387
+ <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
388
+ </svg>
389
+ </a>
390
+ <a href="#" className="text-gray-400 hover:text-white transition">
391
+ <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
392
+ <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
393
+ </svg>
394
+ </a>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </footer>
399
+ </div>
400
+ );
401
+ }
402
+
403
+ function ResultsPage({ formData, suggestions, onBack }) {
404
+ return (
405
+ <div className="min-h-screen bg-gray-50">
406
+ {/* Header */}
407
+ <header className="gradient-bg text-white">
408
+ <div className="container mx-auto px-4 py-8">
409
+ <div className="flex justify-between items-center">
410
+ <div className="flex items-center space-x-2">
411
+ <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
412
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
413
+ </svg>
414
+ <span className="text-xl font-bold">AI Nexus</span>
415
+ </div>
416
+ <button className="text-white hover:text-indigo-200 transition">
417
+ <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
418
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
419
+ </svg>
420
+ </button>
421
+ </div>
422
+ </div>
423
+ </header>
424
+
425
+ {/* Main Content */}
426
+ <main className="container mx-auto px-4 py-12">
427
+ <div className="max-w-4xl mx-auto">
428
+ <div className="bg-white rounded-xl shadow-lg overflow-hidden">
429
+ <div className="p-8">
430
+ <button
431
+ onClick={onBack}
432
+ className="flex items-center text-indigo-600 hover:text-indigo-800 mb-6 transition"
433
+ >
434
+ <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
435
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
436
+ </svg>
437
+ Terug naar formulier
438
+ </button>
439
+
440
+ <div className="text-center mb-8">
441
+ <h1 className="text-3xl font-bold text-gray-800 mb-4">Uw gepersonaliseerde AI-aanbevelingen</h1>
442
+ <p className="text-gray-600 max-w-2xl mx-auto">
443
+ Op basis van onze analyse van <span className="font-semibold">{formData.website}</span> hebben we de volgende mogelijkheden geïdentificeerd waar AI uw bedrijf <span className="font-semibold">{formData.company}</span> kan ondersteunen.
444
+ </p>
445
+ </div>
446
+
447
+ <div className="bg-indigo-50 rounded-lg p-6 mb-8">
448
+ <h2 className="text-xl font-semibold text-gray-800 mb-4">Samenvatting van uw scan</h2>
449
+ <div className="grid md:grid-cols-2 gap-4">
450
+ <div>
451
+ <p className="text-gray-600 mb-1">Bedrijfsnaam:</p>
452
+ <p className="font-medium">{formData.company}</p>
453
+ </div>
454
+ <div>
455
+ <p className="text-gray-600 mb-1">Website:</p>
456
+ <p className="font-medium">{formData.website}</p>
457
+ </div>
458
+ <div>
459
+ <p className="text-gray-600 mb-1">Contactpersoon:</p>
460
+ <p className="font-medium">{formData.name}</p>
461
+ </div>
462
+ <div>
463
+ <p className="text-gray-600 mb-1">E-mail:</p>
464
+ <p className="font-medium">{formData.email}</p>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <div className="mb-10">
470
+ <h2 className="text-2xl font-bold text-gray-800 mb-6">AI-toepassingen voor uw bedrijf</h2>
471
+ <div className="space-y-4">
472
+ {suggestions.map((suggestion, index) => (
473
+ <div key={index} className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
474
+ <div className="flex items-start">
475
+ <div className="flex-shrink-0 mt-1">
476
+ <div className="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center">
477
+ <svg className="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
478
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
479
+ </svg>
480
+ </div>
481
+ </div>
482
+ <div className="ml-4">
483
+ <h3 className="text-lg font-medium text-gray-800">{suggestion}</h3>
484
+ <p className="text-gray-600 mt-1">
485
+ {index % 3 === 0 ? "Onze AI-technologie kan dit proces volledig automatiseren, waardoor u tijd en geld bespaart."
486
+ : index % 3 === 1 ? "Een slimme AI-agent kan deze taak uitvoeren met hogere nauwkeurigheid en consistentie."
487
+ : "Door machine learning toe te passen, kan dit proces zich continu verbeteren."}
488
+ </p>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ ))}
493
+ </div>
494
+ </div>
495
+
496
+ <div className="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg p-6">
497
+ <h2 className="text-xl font-bold text-gray-800 mb-4">Volgende stappen</h2>
498
+ <p className="text-gray-600 mb-6">
499
+ Benieuwd hoe u deze AI-oplossingen in uw bedrijf kunt implementeren? Onze experts staan voor u klaar om een vrijblijvend adviesgesprek in te plannen.
500
+ </p>
501
+ <div className="grid md:grid-cols-2 gap-6">
502
+ <div className="bg-white p-4 rounded-lg shadow-sm">
503
+ <h3 className="font-semibold text-gray-800 mb-2">Plan een gesprek</h3>
504
+ <p className="text-gray-600 mb-4 text-sm">
505
+ Bespreek uw mogelijkheden met een van onze AI-specialisten.
506
+ </p>
507
+ <button className="gradient-bg text-white py-2 px-4 rounded-lg font-medium hover:opacity-90 transition w-full">
508
+ Plan adviesgesprek
509
+ </button>
510
+ </div>
511
+ <div className="bg-white p-4 rounded-lg shadow-sm">
512
+ <h3 className="font-semibold text-gray-800 mb-2">Demo aanvragen</h3>
513
+ <p className="text-gray-600 mb-4 text-sm">
514
+ Ervaar zelf hoe onze AI-agenten werken met een persoonlijke demo.
515
+ </p>
516
+ <button className="border border-indigo-600 text-indigo-600 py-2 px-4 rounded-lg font-medium hover:bg-indigo-50 transition w-full">
517
+ Demo aanvragen
518
+ </button>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </main>
526
+
527
+ {/* Footer */}
528
+ <footer className="bg-gray-800 text-white py-8">
529
+ <div className="container mx-auto px-4 text-center">
530
+ <p className="text-gray-400">
531
+ © 2023 AI Nexus. Alle rechten voorbehouden. |
532
+ <a href="#" className="hover:text-white ml-2 transition">Privacybeleid</a> |
533
+ <a href="#" className="hover:text-white ml-2 transition">Algemene voorwaarden</a>
534
+ </p>
535
+ </div>
536
+ </footer>
537
+ </div>
538
+ );
539
+ }
540
+
541
+ ReactDOM.render(<App />, document.getElementById('root'));
542
+ </script>
543
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nielsgl/a6s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
544
+ </html>