Spaces:
Running
Running
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Therapie Mechelen - Psychotherapeutische ondersteuning</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://therapiemechelen.be/wp-content/uploads/2019/11/Therapie-Mechelen-722x368.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .carousel-item { | |
| transition: opacity 1s ease-in-out; | |
| } | |
| .carousel-item:not(.active) { | |
| opacity: 0; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://therapiemechelen.be/wp-content/uploads/2019/11/logo-therapiemechelen-300x41.png" alt="Therapie Mechelen Logo" class="h-12"> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 focus:outline-none"> | |
| <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-1"> | |
| <div class="dropdown relative"> | |
| <button class="px-4 py-2 text-gray-700 hover:text-blue-600 font-medium">Home</button> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="px-4 py-2 text-gray-700 hover:text-blue-600 font-medium flex items-center"> | |
| Team <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-1 py-1 w-48 z-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Steffie Peeters</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Charlotte Spreutels</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">An Scheers</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Sara Vandam</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Ann Van Hellemont</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Celine De Wette</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Nele Van Obbergen</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Joke Buelens</a> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="px-4 py-2 text-gray-700 hover:text-blue-600 font-medium flex items-center"> | |
| Aanbod <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-1 py-1 w-64 z-50"> | |
| <div class="group relative"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 flex justify-between items-center"> | |
| Individuele therapie <i class="fas fa-chevron-right ml-2 text-xs"></i> | |
| </a> | |
| <div class="absolute left-full top-0 ml-1 hidden group-hover:block bg-white shadow-lg rounded-md py-1 w-64"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">EMDR</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Systeemtherapie</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Cognitieve gedragstherapie</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Mindfulness</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">ACT</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Lichaamsgerichte therapie</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Online therapie</a> | |
| </div> | |
| </div> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Relatietherapie</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Gezinstherapie</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Logopedie</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Ergotherapie</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Workshops of training</a> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="px-4 py-2 text-gray-700 hover:text-blue-600 font-medium">Praktisch</button> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="px-4 py-2 text-gray-700 hover:text-blue-600 font-medium">Contact</button> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> | |
| <div class="container mx-auto px-4 py-2"> | |
| <a href="#" class="block py-2 text-gray-700 border-b">Home</a> | |
| <div class="py-2 border-b"> | |
| <button class="flex justify-between items-center w-full text-gray-700" onclick="toggleMobileSubmenu('team-menu')"> | |
| Team <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div id="team-menu" class="hidden pl-4 mt-2"> | |
| <a href="#" class="block py-2 text-gray-600">Steffie Peeters</a> | |
| <a href="#" class="block py-2 text-gray-600">Charlotte Spreutels</a> | |
| <a href="#" class="block py-2 text-gray-600">An Scheers</a> | |
| <a href="#" class="block py-2 text-gray-600">Sara Vandam</a> | |
| <a href="#" class="block py-2 text-gray-600">Ann Van Hellemont</a> | |
| <a href="#" class="block py-2 text-gray-600">Celine De Wette</a> | |
| <a href="#" class="block py-2 text-gray-600">Nele Van Obbergen</a> | |
| <a href="#" class="block py-2 text-gray-600">Joke Buelens</a> | |
| </div> | |
| </div> | |
| <div class="py-2 border-b"> | |
| <button class="flex justify-between items-center w-full text-gray-700" onclick="toggleMobileSubmenu('aanbod-menu')"> | |
| Aanbod <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div id="aanbod-menu" class="hidden pl-4 mt-2"> | |
| <div class="py-2"> | |
| <button class="flex justify-between items-center w-full text-gray-600" onclick="toggleMobileSubmenu('individuele-menu')"> | |
| Individuele therapie <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div id="individuele-menu" class="hidden pl-4 mt-2"> | |
| <a href="#" class="block py-2 text-gray-500">EMDR</a> | |
| <a href="#" class="block py-2 text-gray-500">Systeemtherapie</a> | |
| <a href="#" class="block py-2 text-gray-500">Cognitieve gedragstherapie</a> | |
| <a href="#" class="block py-2 text-gray-500">Mindfulness</a> | |
| <a href="#" class="block py-2 text-gray-500">ACT</a> | |
| <a href="#" class="block py-2 text-gray-500">Lichaamsgerichte therapie</a> | |
| <a href="#" class="block py-2 text-gray-500">Online therapie</a> | |
| </div> | |
| </div> | |
| <a href="#" class="block py-2 text-gray-600">Relatietherapie</a> | |
| <a href="#" class="block py-2 text-gray-600">Gezinstherapie</a> | |
| <a href="#" class="block py-2 text-gray-600">Logopedie</a> | |
| <a href="#" class="block py-2 text-gray-600">Ergotherapie</a> | |
| <a href="#" class="block py-2 text-gray-600">Workshops of training</a> | |
| </div> | |
| </div> | |
| <a href="#" class="block py-2 text-gray-700 border-b">Praktisch</a> | |
| <a href="#" class="block py-2 text-gray-700">Contact</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-bg text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">THERAPIE MECHELEN</h1> | |
| <p class="text-xl md:text-2xl mb-8">Voor kinderen, jongeren en volwassenen</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Ons aanbod</a> | |
| <a href="#" class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-6 rounded-lg transition duration-300">Maak een afspraak</a> | |
| </div> | |
| <p class="mt-8 text-lg bg-blue-600 bg-opacity-80 inline-block px-4 py-2 rounded">MULTIDISCIPLINAIRE GROEPSPRAKTIJK</p> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Therapie Mechelen</h2> | |
| <p class="text-gray-700 mb-6 leading-relaxed"> | |
| Therapie Mechelen is een multidisciplinaire groepspraktijk met een ervaren team gespecialiseerd in <strong>psychotherapeutische, ergotherapeutische en logopedische ondersteuning</strong> aan individuen, gezinnen en koppels. Zowel jongeren als volwassenen met psychische en/of relationele lasten kunnen bij ons terecht. | |
| </p> | |
| <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Ons team</a> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">EXPERTISE</h3> | |
| <p class="text-gray-700 mb-4 leading-relaxed"> | |
| Binnen onze praktijk hebben we veel expertise in huis en kunnen we zorg bieden op uw maat. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Systeemtherapie</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Cognitieve gedragstherapie</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Cliëntgerichte therapie</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Acceptance and Commitment Therapy (ACT)</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Eye Movement Desensitsation and Reprocessing (EMDR)</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Mindfulness</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Relatie- en gezinstherapie</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Seksuologie</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Lichaamsgerichte therapie</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Logopedie</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Ergotherapie</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mt-6 leading-relaxed"> | |
| Onze specialisatie in <strong>traumaverwerking</strong> en meerbepaald in <strong>E.M.D.R.</strong> is zeer gekend bij artsen en andere zorgverleners in de regio. Hiermee kunnen we trauma, rouw, angsten, postnatale problemen, etc. behandelen. Verder is de <strong>lichaamsgerichte therapie</strong> een mooie aanvulling op ons psychotherapeutisch aanbod. | |
| </p> | |
| <a href="#" class="inline-block mt-4 text-blue-600 hover:text-blue-800 font-medium">Meer informatie <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Onze Diensten</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <img src="https://therapiemechelen.be/wp-content/uploads/2019/11/Visual-jongeren.jpg" alt="Individuele therapie" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">INDIVIDUELE THERAPIE</h3> | |
| <p class="text-gray-700 mb-4"> | |
| <strong>Individuele psychotherapie</strong> is aangewezen bij psychische en/of relationele lasten. | |
| </p> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Meer informatie <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <img src="https://therapiemechelen.be/wp-content/uploads/2019/11/Gezinstherapie.jpg" alt="Gezinstherapie" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">GEZINSTHERAPIE</h3> | |
| <p class="text-gray-700 mb-4"> | |
| <strong>Gezinstherapie</strong> kan worden ingezet bij relationele problemen binnen het gezin. | |
| </p> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Meer informatie <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <img src="https://therapiemechelen.be/wp-content/uploads/2019/11/relatietherapie.jpg" alt="Relatietherapie" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">RELATIETHERAPIE</h3> | |
| <p class="text-gray-700 mb-4"> | |
| <strong>Relatietherapie</strong> is aangewezen voor koppels met psychische en/of relationele lasten. | |
| </p> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Meer informatie <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <img src="https://therapiemechelen.be/wp-content/uploads/2019/11/relatietherapie-resized.png" alt="Ergotherapie" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">ERGOTHERAPIE</h3> | |
| <p class="text-gray-700 mb-4"> | |
| <strong>Ergotherapie</strong> helpt om opnieuw balans te krijgen in je leven. | |
| </p> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Meer informatie <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <img src="https://therapiemechelen.be/wp-content/uploads/2020/03/Online-therapie.jpg" alt="Logopedie" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">LOGOPEDIE</h3> | |
| <p class="text-gray-700 mb-4"> | |
| <strong>Logopedie</strong> voor kinderen en jongvolwassenen | |
| </p> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Meer informatie <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="bg-blue-600 h-48 flex items-center justify-center"> | |
| <div class="text-center p-6"> | |
| <h3 class="text-xl font-bold text-white mb-3">MEER DIENSTEN</h3> | |
| <p class="text-white mb-4"> | |
| Ontdek ons volledige aanbod aan therapieën en behandelingen. | |
| </p> | |
| <a href="#" class="inline-block bg-white text-blue-600 font-bold py-2 px-4 rounded hover:bg-gray-100 transition duration-300">Bekijk alle diensten</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section class="py-16 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">BIJ ONS BENT U IN GOEDE HANDEN</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto"> | |
| Wij hebben een gespecialiseerd team met gediplomeerde klinisch orthopegagogen, klinisch psychologen, sexuologen, psychotherapeuten en logopedisten die u en uw naasten kunnen begeleiden. | |
| </p> | |
| <a href="#" class="inline-block bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-6 rounded-lg transition duration-300">ONS TEAM</a> | |
| </div> | |
| </section> | |
| <!-- Appointment Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">MAAK EEN AFSPRAAK</h2> | |
| <p class="text-gray-700 mb-6 leading-relaxed"> | |
| Neem contact met ons op om een afspraak te maken of voor meer informatie over onze diensten. | |
| </p> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-start mb-4"> | |
| <i class="fas fa-map-marker-alt text-blue-500 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Locatie</h4> | |
| <p class="text-gray-700">Struikheidestraat 19, 2812 Muizen</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <i class="fas fa-phone-alt text-blue-500 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Telefoon</h4> | |
| <p class="text-gray-700">0496 34 31 01</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope text-blue-500 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Email</h4> | |
| <p class="text-gray-700">info@therapiemechelen.be</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div id="carousel" class="relative overflow-hidden rounded-lg shadow-lg"> | |
| <div class="carousel-item active"> | |
| <img src="https://therapiemechelen.be/wp-content/uploads/2019/11/Praktijkruimte-2.jpg" alt="Praktijkruimte" class="w-full h-96 object-cover"> | |
| </div> | |
| <div class="carousel-item"> | |
| <img src="https://therapiemechelen.be/wp-content/uploads/2018/08/Foto-praktijk-website.jpeg" alt="Praktijkruimte" class="w-full h-96 object-cover"> | |
| </div> | |
| <div class="carousel-item"> | |
| <img src="https://therapiemechelen.be/wp-content/uploads/2021/08/foto-grote-praktijkruimte-beneden-v2.jpg" alt="Praktijkruimte" class="w-full h-96 object-cover"> | |
| </div> | |
| <button id="prev" class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-75 rounded-full p-2 text-gray-800 hover:bg-opacity-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button id="next" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-75 rounded-full p-2 text-gray-800 hover:bg-opacity-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100" data-index="0"></button> | |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100" data-index="1"></button> | |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100" data-index="2"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> | |
| <!-- About --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Over ons</h3> | |
| <img src="https://therapiemechelen.be/wp-content/uploads/2019/11/logo-therapiemechelen.png" alt="Therapie Mechelen Logo" class="h-10 mb-4"> | |
| <p class="text-gray-300"> | |
| Therapie Mechelen is een groepspraktijk voor psychotherapie voor kinderen, jongeren en volwassenen. | |
| </p> | |
| </div> | |
| <!-- Menu --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Menu</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Team</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Aanbod</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Praktisch</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Locatie</h3> | |
| <div class="flex items-start mb-4"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-400"></i> | |
| <div> | |
| <p class="text-gray-300">Struikheidestraat 19, 2812 Muizen</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <i class="fas fa-phone-alt mt-1 mr-3 text-blue-400"></i> | |
| <div> | |
| <p class="text-gray-300">0496 34 31 01</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-3 text-blue-400"></i> | |
| <div> | |
| <p class="text-gray-300">info@therapiemechelen.be</p> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mt-6 mb-4">Openingsuren</h3> | |
| <p class="text-gray-300 mb-2">Enkel op afspraak.</p> | |
| <table class="text-gray-300"> | |
| <tr> | |
| <td class="pr-4">Maandag > Vrijdag:</td> | |
| <td>9h > 21h</td> | |
| </tr> | |
| <tr> | |
| <td class="pr-4">Zaterdag:</td> | |
| <td>9h > 12h</td> | |
| </tr> | |
| <tr> | |
| <td class="pr-4">Zondag:</td> | |
| <td>Gesloten</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6 text-center text-gray-400"> | |
| <p>Copyright © 2023 TherapieMechelen - Website ontworpen door <a href="http://www.webdesignvoorzelfstandigen.be/" class="text-blue-400 hover:text-blue-300">Webdesignvoorzelfstandigen</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Mobile submenu toggle | |
| function toggleMobileSubmenu(id) { | |
| const submenu = document.getElementById(id); | |
| submenu.classList.toggle('hidden'); | |
| } | |
| // Carousel functionality | |
| let currentSlide = 0; | |
| const slides = document.querySelectorAll('.carousel-item'); | |
| const indicators = document.querySelectorAll('.carousel-indicator'); | |
| const totalSlides = slides.length; | |
| function showSlide(index) { | |
| // Hide all slides | |
| slides.forEach(slide => { | |
| slide.classList.remove('active'); | |
| slide.style.display = 'none'; | |
| }); | |
| // Remove active class from all indicators | |
| indicators.forEach(indicator => { | |
| indicator.classList.remove('bg-opacity-100'); | |
| indicator.classList.add('bg-opacity-50'); | |
| }); | |
| // Show the selected slide | |
| slides[index].classList.add('active'); | |
| slides[index].style.display = 'block'; | |
| // Update the active indicator | |
| indicators[index].classList.remove('bg-opacity-50'); | |
| indicators[index].classList.add('bg-opacity-100'); | |
| currentSlide = index; | |
| } | |
| function nextSlide() { | |
| currentSlide = (currentSlide + 1) % totalSlides; | |
| showSlide(currentSlide); | |
| } | |
| function prevSlide() { | |
| currentSlide = (currentSlide - 1 + totalSlides) % totalSlides; | |
| showSlide(currentSlide); | |
| } | |
| // Initialize carousel | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showSlide(0); | |
| // Button events | |
| document.getElementById('next').addEventListener('click', nextSlide); | |
| document.getElementById('prev').addEventListener('click', prevSlide); | |
| // Indicator events | |
| indicators.forEach((indicator, index) => { | |
| indicator.addEventListener('click', () => showSlide(index)); | |
| }); | |
| // Auto-advance slides every 5 seconds | |
| setInterval(nextSlide, 5000); | |
| }); | |
| // Dropdown menu functionality for desktop | |
| const dropdowns = document.querySelectorAll('.dropdown'); | |
| dropdowns.forEach(dropdown => { | |
| const button = dropdown.querySelector('button'); | |
| const menu = dropdown.querySelector('.dropdown-menu'); | |
| button.addEventListener('click', () => { | |
| if (window.innerWidth < 768) { // Only toggle on mobile | |
| menu.classList.toggle('hidden'); | |
| } | |
| }); | |
| // Close when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!dropdown.contains(e.target)) { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </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=Amorjogo/therapiemechelen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |