Spaces:
Running
Running
Design a user-friendly, multi-step registration flow for a new User ('Majikan') on the 'SayaBantu' app.
9a053ef verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SayaBantu - Trusted Household Assistants Platform</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #10b981 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); | |
| } | |
| .safety-badge { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| z-index: 10; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="heart" class="text-blue-500 h-6 w-6"></i> | |
| <span class="ml-2 text-xl font-bold text-blue-600">SayaBantu</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="index.html" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="search-results.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Find ART</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">For Workers</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Safety</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium mr-4">Login</button> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium">Sign Up</button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right"> | |
| <h1 class="text-4xl font-bold leading-tight mb-4">Find Trusted Household Assistants</h1> | |
| <p class="text-xl mb-8">Verified professionals for your home needs. Safe, reliable, and fully insured.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium">Find Helper</button> | |
| <button class="bg-blue-700 hover:bg-blue-800 text-white px-6 py-3 rounded-lg font-medium">Apply as ART</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2" data-aos="fade-left"> | |
| <img src="http://static.photos/people/640x360/12" alt="Happy family with helper" class="rounded-lg shadow-xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search Section --> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 -mt-10 z-10 relative"> | |
| <div class="bg-white rounded-xl shadow-lg p-6" data-aos="fade-up"> | |
| <h2 class="text-xl font-semibold mb-4">What kind of help do you need?</h2> | |
| <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4"> | |
| <div class="flex-1"> | |
| <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Select Service Type</option> | |
| <option>Daily Helper</option> | |
| <option>Monthly Helper</option> | |
| <option>Live-in Helper</option> | |
| </select> | |
| </div> | |
| <div class="flex-1"> | |
| <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Select Job Category</option> | |
| <option>House Cleaning</option> | |
| <option>Baby Care</option> | |
| <option>Elderly Care</option> | |
| <option>Cooking</option> | |
| <option>Driver</option> | |
| <option>Gardening</option> | |
| </select> | |
| </div> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium">Search</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Services Section --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Our Services</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We provide various types of household assistance to meet your specific needs</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 card-hover" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="home" class="text-blue-500 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-2">Daily Helper</h3> | |
| <p class="text-gray-600 text-center">Professional helpers available for daily tasks like cleaning, cooking, and laundry.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 card-hover" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="calendar" class="text-green-500 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-2">Monthly Helper</h3> | |
| <p class="text-gray-600 text-center">Long-term assistance with comprehensive care for your household needs.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 card-hover" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="users" class="text-purple-500 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-2">Specialized Care</h3> | |
| <p class="text-gray-600 text-center">Trained professionals for baby care, elderly care, and special needs assistance.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Helpers Section --> | |
| <div class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Featured Verified Helpers</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Our top-rated and fully verified household assistants</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Helper Card 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden relative card-hover" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="safety-badge"> | |
| <span class="bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full">Verified</span> | |
| </div> | |
| <img src="http://static.photos/people/320x240/101" alt="Helper" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Siti Rahayu</h3> | |
| <p class="text-gray-600">32 years</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <span class="ml-1">4.9</span> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-1 mb-1">Cleaning</span> | |
| <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-1 mb-1">Cooking</span> | |
| </div> | |
| <a href="search-results.html" class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-md text-sm font-medium block text-center">View Profile</a> | |
| </div> | |
| </div> | |
| <!-- Helper Card 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden relative card-hover" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="safety-badge"> | |
| <span class="bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full">Verified</span> | |
| </div> | |
| <img src="http://static.photos/people/320x240/102" alt="Helper" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Dewi Lestari</h3> | |
| <p class="text-gray-600">28 years</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <span class="ml-1">4.8</span> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <span class="inline-block bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded mr-1 mb-1">Baby Care</span> | |
| <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded mr-1 mb-1">Elderly Care</span> | |
| </div> | |
| <a href="search-results.html" class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-md text-sm font-medium block text-center">View Profile</a> | |
| </div> | |
| </div> | |
| <!-- Helper Card 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden relative card-hover" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="safety-badge"> | |
| <span class="bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full">Verified</span> | |
| </div> | |
| <img src="http://static.photos/people/320x240/103" alt="Helper" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Budi Santoso</h3> | |
| <p class="text-gray-600">35 years</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <span class="ml-1">4.7</span> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <span class="inline-block bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded mr-1 mb-1">Driver</span> | |
| <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-1 mb-1">Gardening</span> | |
| </div> | |
| <a href="search-results.html" class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-md text-sm font-medium block text-center">View Profile</a> | |
| </div> | |
| </div> | |
| <!-- Helper Card 4 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden relative card-hover" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="safety-badge"> | |
| <span class="bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full">Verified</span> | |
| </div> | |
| <img src="http://static.photos/people/320x240/104" alt="Helper" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Ani Wijaya</h3> | |
| <p class="text-gray-600">40 years</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <span class="ml-1">5.0</span> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-1 mb-1">Cleaning</span> | |
| <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded mr-1 mb-1">Cooking</span> | |
| <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded mr-1 mb-1">Elderly Care</span> | |
| </div> | |
| <a href="search-results.html" class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-md text-sm font-medium block text-center">View Profile</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <button class="bg-white border border-blue-500 text-blue-500 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium">View All Helpers</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Safety Features Section --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Our Safety Commitment</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We prioritize safety and security for both helpers and employers</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="shield" class="text-red-500 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-2">Background Checks</h3> | |
| <p class="text-gray-600 text-center">All helpers undergo thorough background verification including KTP, KK, and police records.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="file-text" class="text-blue-500 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-2">Legal Contracts</h3> | |
| <p class="text-gray-600 text-center">Clear employment contracts to protect both parties with defined terms and conditions.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="alert-circle" class="text-green-500 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-2">24/7 Support</h3> | |
| <p class="text-gray-600 text-center">Immediate assistance available for any issues or emergencies that may arise.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="heart" class="text-purple-500 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-2">Worker Benefits</h3> | |
| <p class="text-gray-600 text-center">We ensure all helpers receive BPJS, proper uniforms, and fair working conditions.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials Section --> | |
| <div class="bg-blue-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">What Our Users Say</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Hear from families and helpers who have found success with SayaBantu</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/105" alt="User" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Ibu Susi</h4> | |
| <div class="flex"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"SayaBantu helped me find a reliable helper for my elderly mother. The verification process gave me peace of mind, and the helper has been wonderful."</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/106" alt="User" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Pak Andi</h4> | |
| <div class="flex"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The driver we found through SayaBantu has been punctual and professional. The platform made it easy to check credentials and reviews."</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/107" alt="User" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Dewi (Helper)</h4> | |
| <div class="flex"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Through SayaBantu I found a respectful family to work with. The platform ensures I get fair treatment and timely payment."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="gradient-bg text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Find Your Perfect Helper?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of families who have found reliable household assistance through our platform.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-medium text-lg">Find Helper Now</button> | |
| <button class="bg-blue-700 hover:bg-blue-800 text-white px-8 py-3 rounded-lg font-medium text-lg">Learn More</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="heart" class="text-blue-400 h-6 w-6"></i> | |
| <span class="ml-2 text-xl font-bold">SayaBantu</span> | |
| </div> | |
| <p class="text-gray-400">Trusted platform connecting families with verified household assistants.</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">For Employers</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Find Helper</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Safety Guide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">For Helpers</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Find Jobs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Create Profile</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Rights & Benefits</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Training</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Contact Us</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center text-gray-400"><i data-feather="mail" class="w-4 h-4 mr-2"></i> hello@saya-bantu.com</li> | |
| <li class="flex items-center text-gray-400"><i data-feather="phone" class="w-4 h-4 mr-2"></i> +62 21 1234 5678</li> | |
| <li class="flex items-center text-gray-400"><i data-feather="map-pin" class="w-4 h-4 mr-2"></i> Jakarta, Indonesia</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm">© 2023 SayaBantu. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu (hidden by default) --> | |
| <div class="hidden fixed inset-0 bg-black bg-opacity-50 z-50" id="mobile-menu"> | |
| <div class="bg-white w-4/5 h-full p-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center"> | |
| <i data-feather="heart" class="text-blue-500 h-6 w-6"></i> | |
| <span class="ml-2 text-xl font-bold text-blue-600">SayaBantu</span> | |
| </div> | |
| <button id="close-menu" class="text-gray-500"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <nav class="flex flex-col space-y-4"> | |
| <a href="#" class="text-gray-900 font-medium">Home</a> | |
| <a href="#" class="text-gray-600">Find ART</a> | |
| <a href="#" class="text-gray-600">For Workers</a> | |
| <a href="#" class="text-gray-600">Safety</a> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-md text-sm font-medium mb-2">Login</button> | |
| <button class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-md text-sm font-medium">Sign Up</button> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Mobile menu toggle | |
| document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.remove('hidden'); | |
| }); | |
| document.getElementById('close-menu').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |