|
|
<!DOCTYPE html> |
|
|
<html lang="nl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Nexus | Slimme oplossingen voor uw MKB</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js"></script> |
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> |
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="root"></div> |
|
|
|
|
|
<script type="text/babel"> |
|
|
const { useState } = React; |
|
|
|
|
|
function App() { |
|
|
const [formData, setFormData] = useState({ |
|
|
name: '', |
|
|
email: '', |
|
|
company: '', |
|
|
website: '' |
|
|
}); |
|
|
const [submitted, setSubmitted] = useState(false); |
|
|
const [loading, setLoading] = useState(false); |
|
|
const [aiSuggestions, setAiSuggestions] = useState([]); |
|
|
|
|
|
const handleChange = (e) => { |
|
|
const { name, value } = e.target; |
|
|
setFormData(prev => ({ |
|
|
...prev, |
|
|
[name]: value |
|
|
})); |
|
|
}; |
|
|
|
|
|
const handleSubmit = (e) => { |
|
|
e.preventDefault(); |
|
|
setLoading(true); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const domain = formData.website.toLowerCase(); |
|
|
const suggestions = []; |
|
|
|
|
|
if (domain.includes('retail') || domain.includes('winkel')) { |
|
|
suggestions.push( |
|
|
'AI-gestuurde voorraadoptimalisatie', |
|
|
'Persoonlijke productaanbevelingen voor klanten', |
|
|
'Chatbot voor 24/7 klantenservice' |
|
|
); |
|
|
} else if (domain.includes('horeca') || domain.includes('restaurant')) { |
|
|
suggestions.push( |
|
|
'Dynamische prijsstelling voor kamers/tafels', |
|
|
'AI-menusuggesties op basis van voorraad en trends', |
|
|
'Reserveringsbeheer met voorspellende capaciteitsplanning' |
|
|
); |
|
|
} else if (domain.includes('zakelijke') || domain.includes('diensten')) { |
|
|
suggestions.push( |
|
|
'Automatisering van terugkerende administratieve taken', |
|
|
'AI-ondersteunde documentverwerking', |
|
|
'Slimme agendaplanning en vergaderassistent' |
|
|
); |
|
|
} else { |
|
|
|
|
|
suggestions.push( |
|
|
'AI-chatbot voor efficiëntere klantinteracties', |
|
|
'Automatische data-analyse voor betere besluitvorming', |
|
|
'Procesautomatisering voor tijdswinst', |
|
|
'Voorspellende analyses voor markttrends' |
|
|
); |
|
|
} |
|
|
|
|
|
setAiSuggestions(suggestions); |
|
|
setSubmitted(true); |
|
|
setLoading(false); |
|
|
}, 2000); |
|
|
}; |
|
|
|
|
|
if (submitted) { |
|
|
return ( |
|
|
<ResultsPage |
|
|
formData={formData} |
|
|
suggestions={aiSuggestions} |
|
|
onBack={() => setSubmitted(false)} |
|
|
/> |
|
|
); |
|
|
} |
|
|
|
|
|
return ( |
|
|
<FormPage |
|
|
formData={formData} |
|
|
onChange={handleChange} |
|
|
onSubmit={handleSubmit} |
|
|
loading={loading} |
|
|
/> |
|
|
); |
|
|
} |
|
|
|
|
|
function FormPage({ formData, onChange, onSubmit, loading }) { |
|
|
return ( |
|
|
<div className="min-h-screen flex flex-col"> |
|
|
{/* Header */} |
|
|
<header className="gradient-bg text-white"> |
|
|
<div className="container mx-auto px-4 py-8"> |
|
|
<div className="flex justify-between items-center"> |
|
|
<div className="flex items-center space-x-2"> |
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
<span className="text-xl font-bold">AI Nexus</span> |
|
|
</div> |
|
|
<nav className="hidden md:flex space-x-6"> |
|
|
<a href="#features" className="hover:text-indigo-200 transition">Functies</a> |
|
|
<a href="#pricing" className="hover:text-indigo-200 transition">Prijzen</a> |
|
|
<a href="#contact" className="hover:text-indigo-200 transition">Contact</a> |
|
|
</nav> |
|
|
<button className="md:hidden"> |
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
{/* Hero Section */} |
|
|
<section className="gradient-bg text-white py-16 md:py-24"> |
|
|
<div className="container mx-auto px-4 text-center"> |
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-6">Ontdek de kracht van AI Agents voor uw bedrijf</h1> |
|
|
<p className="text-xl md:text-2xl max-w-3xl mx-auto mb-8"> |
|
|
AI Nexus helpt MKB-bedrijven om slimmer te werken met geavanceerde AI-agents. |
|
|
Ontdek vandaag nog hoe wij uw bedrijfsprocessen kunnen optimaliseren. |
|
|
</p> |
|
|
<div className="flex justify-center space-x-4"> |
|
|
<a href="#form" className="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition shadow-md"> |
|
|
Gratis scan aanvragen |
|
|
</a> |
|
|
<a href="#features" className="border border-white text-white hover:bg-indigo-700 px-6 py-3 rounded-lg font-medium transition"> |
|
|
Meer informatie |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
{/* Main Content */} |
|
|
<main className="flex-grow container mx-auto px-4 py-12"> |
|
|
<div className="max-w-4xl mx-auto"> |
|
|
<div className="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div className="md:flex"> |
|
|
<div className="md:w-1/2 bg-indigo-50 p-8 flex flex-col justify-center"> |
|
|
<h2 className="text-2xl font-bold text-gray-800 mb-4">Hoe kan AI uw bedrijf helpen?</h2> |
|
|
<p className="text-gray-600 mb-6"> |
|
|
Onze geavanceerde AI-scan analyseert uw website en geeft persoonlijke aanbevelingen voor: |
|
|
</p> |
|
|
<ul className="space-y-3"> |
|
|
<li className="flex items-start"> |
|
|
<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"> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Klantenservice automatisering</span> |
|
|
</li> |
|
|
<li className="flex items-start"> |
|
|
<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"> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Verkoop- en marketingoptimalisatie</span> |
|
|
</li> |
|
|
<li className="flex items-start"> |
|
|
<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"> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Interne procesverbetering</span> |
|
|
</li> |
|
|
<li className="flex items-start"> |
|
|
<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"> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Data-analyse en inzichten</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div id="form" className="md:w-1/2 p-8"> |
|
|
<h2 className="text-2xl font-bold text-gray-800 mb-6">Vraag uw gratis AI-scan aan</h2> |
|
|
<form onSubmit={onSubmit}> |
|
|
<div className="mb-4"> |
|
|
<label htmlFor="name" className="block text-gray-700 font-medium mb-2">Uw naam</label> |
|
|
<input |
|
|
type="text" |
|
|
id="name" |
|
|
name="name" |
|
|
value={formData.name} |
|
|
onChange={onChange} |
|
|
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" |
|
|
required |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-4"> |
|
|
<label htmlFor="email" className="block text-gray-700 font-medium mb-2">E-mailadres</label> |
|
|
<input |
|
|
type="email" |
|
|
id="email" |
|
|
name="email" |
|
|
value={formData.email} |
|
|
onChange={onChange} |
|
|
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" |
|
|
required |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-4"> |
|
|
<label htmlFor="company" className="block text-gray-700 font-medium mb-2">Bedrijfsnaam</label> |
|
|
<input |
|
|
type="text" |
|
|
id="company" |
|
|
name="company" |
|
|
value={formData.company} |
|
|
onChange={onChange} |
|
|
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" |
|
|
required |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-6"> |
|
|
<label htmlFor="website" className="block text-gray-700 font-medium mb-2">Bedrijfswebsite</label> |
|
|
<input |
|
|
type="url" |
|
|
id="website" |
|
|
name="website" |
|
|
value={formData.website} |
|
|
onChange={onChange} |
|
|
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" |
|
|
placeholder="https://www.voorbeeld.nl" |
|
|
required |
|
|
/> |
|
|
</div> |
|
|
<button |
|
|
type="submit" |
|
|
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" |
|
|
disabled={loading} |
|
|
> |
|
|
{loading ? ( |
|
|
<> |
|
|
<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"> |
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> |
|
|
<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> |
|
|
</svg> |
|
|
Bezig met analyseren... |
|
|
</> |
|
|
) : ( |
|
|
'Start AI-scan' |
|
|
)} |
|
|
</button> |
|
|
<p className="text-sm text-gray-500 mt-4"> |
|
|
Wij respecteren uw privacy. Uw gegevens worden alleen gebruikt voor deze scan. |
|
|
</p> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
{} |
|
|
<section id="features" className="bg-gray-50 py-16"> |
|
|
<div className="container mx-auto px-4"> |
|
|
<h2 className="text-3xl font-bold text-center text-gray-800 mb-12">Hoe onze AI-agents u helpen</h2> |
|
|
<div className="grid md:grid-cols-3 gap-8"> |
|
|
<div className="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover"> |
|
|
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<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"> |
|
|
<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> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 className="text-xl font-semibold mb-2">Klantenservice</h3> |
|
|
<p className="text-gray-600"> |
|
|
Onze AI-chatbots bieden 24/7 ondersteuning, beantwoorden veelgestelde vragen en leiden klanten naar de juiste oplossing. |
|
|
</p> |
|
|
</div> |
|
|
<div className="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover"> |
|
|
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<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"> |
|
|
<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> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 className="text-xl font-semibold mb-2">Verkoopoptimalisatie</h3> |
|
|
<p className="text-gray-600"> |
|
|
AI analyseert klantgedrag en stelt gepersonaliseerde aanbiedingen voor, waardoor uw conversieratio stijgt. |
|
|
</p> |
|
|
</div> |
|
|
<div className="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover"> |
|
|
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<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"> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 className="text-xl font-semibold mb-2">Procesautomatisering</h3> |
|
|
<p className="text-gray-600"> |
|
|
Automatiseer terugkerende taken zoals facturatie, planning en data-entry, zodat u zich kunt richten op wat belangrijk is. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
{} |
|
|
<footer className="bg-gray-800 text-white py-12"> |
|
|
<div className="container mx-auto px-4"> |
|
|
<div className="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div className="flex items-center space-x-2 mb-4"> |
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
<span className="text-xl font-bold">AI Nexus</span> |
|
|
</div> |
|
|
<p className="text-gray-400"> |
|
|
Wij helpen MKB-bedrijven om slimmer te werken met geavanceerde AI-oplossingen op maat. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 className="text-lg font-semibold mb-4">Bedrijf</h4> |
|
|
<ul className="space-y-2"> |
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition">Over ons</a></li> |
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition">Team</a></li> |
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition">Vacatures</a></li> |
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition">Blog</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 className="text-lg font-semibold mb-4">Oplossingen</h4> |
|
|
<ul className="space-y-2"> |
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition">Klantenservice</a></li> |
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition">Verkoop & Marketing</a></li> |
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition">Interne processen</a></li> |
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition">Data-analyse</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div id="contact"> |
|
|
<h4 className="text-lg font-semibold mb-4">Contact</h4> |
|
|
<ul className="space-y-2"> |
|
|
<li className="flex items-start"> |
|
|
<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"> |
|
|
<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> |
|
|
</svg> |
|
|
<span className="text-gray-400">[email protected]</span> |
|
|
</li> |
|
|
<li className="flex items-start"> |
|
|
<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"> |
|
|
<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> |
|
|
</svg> |
|
|
<span className="text-gray-400">085 - 303 44 55</span> |
|
|
</li> |
|
|
<li className="flex items-start"> |
|
|
<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"> |
|
|
<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> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> |
|
|
</svg> |
|
|
<span className="text-gray-400">1 Sand Hill Road, Menlo Park, CA</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div className="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p className="text-gray-400 mb-4 md:mb-0">© 2025 AI Nexus. Alle rechten voorbehouden.</p> |
|
|
<div className="flex space-x-6"> |
|
|
<a href="#" className="text-gray-400 hover:text-white transition"> |
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="#" className="text-gray-400 hover:text-white transition"> |
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="#" className="text-gray-400 hover:text-white transition"> |
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
function ResultsPage({ formData, suggestions, onBack }) { |
|
|
return ( |
|
|
<div className="min-h-screen bg-gray-50"> |
|
|
{/* Header */} |
|
|
<header className="gradient-bg text-white"> |
|
|
<div className="container mx-auto px-4 py-8"> |
|
|
<div className="flex justify-between items-center"> |
|
|
<div className="flex items-center space-x-2"> |
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
<span className="text-xl font-bold">AI Nexus</span> |
|
|
</div> |
|
|
<button className="text-white hover:text-indigo-200 transition"> |
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
{/* Main Content */} |
|
|
<main className="container mx-auto px-4 py-12"> |
|
|
<div className="max-w-4xl mx-auto"> |
|
|
<div className="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div className="p-8"> |
|
|
<button |
|
|
onClick={onBack} |
|
|
className="flex items-center text-indigo-600 hover:text-indigo-800 mb-6 transition" |
|
|
> |
|
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path> |
|
|
</svg> |
|
|
Terug naar formulier |
|
|
</button> |
|
|
|
|
|
<div className="text-center mb-8"> |
|
|
<h1 className="text-3xl font-bold text-gray-800 mb-4">Uw gepersonaliseerde AI-aanbevelingen</h1> |
|
|
<p className="text-gray-600 max-w-2xl mx-auto"> |
|
|
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. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div className="bg-indigo-50 rounded-lg p-6 mb-8"> |
|
|
<h2 className="text-xl font-semibold text-gray-800 mb-4">Samenvatting van uw scan</h2> |
|
|
<div className="grid md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<p className="text-gray-600 mb-1">Bedrijfsnaam:</p> |
|
|
<p className="font-medium">{formData.company}</p> |
|
|
</div> |
|
|
<div> |
|
|
<p className="text-gray-600 mb-1">Website:</p> |
|
|
<p className="font-medium">{formData.website}</p> |
|
|
</div> |
|
|
<div> |
|
|
<p className="text-gray-600 mb-1">Contactpersoon:</p> |
|
|
<p className="font-medium">{formData.name}</p> |
|
|
</div> |
|
|
<div> |
|
|
<p className="text-gray-600 mb-1">E-mail:</p> |
|
|
<p className="font-medium">{formData.email}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div className="mb-10"> |
|
|
<h2 className="text-2xl font-bold text-gray-800 mb-6">AI-toepassingen voor uw bedrijf</h2> |
|
|
<div className="space-y-4"> |
|
|
{suggestions.map((suggestion, index) => ( |
|
|
<div key={index} className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition"> |
|
|
<div className="flex items-start"> |
|
|
<div className="flex-shrink-0 mt-1"> |
|
|
<div className="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<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"> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div className="ml-4"> |
|
|
<h3 className="text-lg font-medium text-gray-800">{suggestion}</h3> |
|
|
<p className="text-gray-600 mt-1"> |
|
|
{index % 3 === 0 ? "Onze AI-technologie kan dit proces volledig automatiseren, waardoor u tijd en geld bespaart." |
|
|
: index % 3 === 1 ? "Een slimme AI-agent kan deze taak uitvoeren met hogere nauwkeurigheid en consistentie." |
|
|
: "Door machine learning toe te passen, kan dit proces zich continu verbeteren."} |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div className="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg p-6"> |
|
|
<h2 className="text-xl font-bold text-gray-800 mb-4">Volgende stappen</h2> |
|
|
<p className="text-gray-600 mb-6"> |
|
|
Benieuwd hoe u deze AI-oplossingen in uw bedrijf kunt implementeren? Onze experts staan voor u klaar om een vrijblijvend adviesgesprek in te plannen. |
|
|
</p> |
|
|
<div className="grid md:grid-cols-2 gap-6"> |
|
|
<div className="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<h3 className="font-semibold text-gray-800 mb-2">Plan een gesprek</h3> |
|
|
<p className="text-gray-600 mb-4 text-sm"> |
|
|
Bespreek uw mogelijkheden met een van onze AI-specialisten. |
|
|
</p> |
|
|
<button className="gradient-bg text-white py-2 px-4 rounded-lg font-medium hover:opacity-90 transition w-full"> |
|
|
Plan adviesgesprek |
|
|
</button> |
|
|
</div> |
|
|
<div className="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<h3 className="font-semibold text-gray-800 mb-2">Demo aanvragen</h3> |
|
|
<p className="text-gray-600 mb-4 text-sm"> |
|
|
Ervaar zelf hoe onze AI-agenten werken met een persoonlijke demo. |
|
|
</p> |
|
|
<button className="border border-indigo-600 text-indigo-600 py-2 px-4 rounded-lg font-medium hover:bg-indigo-50 transition w-full"> |
|
|
Demo aanvragen |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
{/* Footer */} |
|
|
<footer className="bg-gray-800 text-white py-8"> |
|
|
<div className="container mx-auto px-4 text-center"> |
|
|
<p className="text-gray-400"> |
|
|
© 2025 AI Nexus. Alle rechten voorbehouden. | |
|
|
<a href="#" className="hover:text-white ml-2 transition">Privacybeleid</a> | |
|
|
<a href="#" className="hover:text-white ml-2 transition">Algemene voorwaarden</a> |
|
|
</p> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
ReactDOM.render(<App />, document.getElementById('root')); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
