| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MSME Connect | Empowering Small Businesses</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| :root { |
| --primary: #2563eb; |
| --secondary: #1e40af; |
| --accent: #3b82f6; |
| --highlight: #93c5fd; |
| --light: #f8fafc; |
| --dark: #1e293b; |
| } |
| |
| .bg-hero { |
| background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), |
| url('https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .service-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
| } |
| |
| .testimonial-card:hover { |
| box-shadow: 0 8px 30px rgba(0,0,0,0.12); |
| } |
| |
| .partner-logo { |
| filter: grayscale(100%); |
| opacity: 0.6; |
| transition: all 0.3s ease; |
| } |
| |
| .partner-logo:hover { |
| filter: grayscale(0%); |
| opacity: 1; |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-fade-in { |
| animation: fadeIn 0.8s ease-out forwards; |
| } |
| |
| |
| .delay-100 { animation-delay: 0.1s; } |
| .delay-200 { animation-delay: 0.2s; } |
| .delay-300 { animation-delay: 0.3s; } |
| .delay-400 { animation-delay: 0.4s; } |
| .delay-500 { animation-delay: 0.5s; } |
| |
| |
| .error { |
| border-color: #ef4444 !important; |
| } |
| .error-message { |
| color: #ef4444; |
| font-size: 0.875rem; |
| margin-top: 0.25rem; |
| } |
| .success-message { |
| background-color: #10b981; |
| color: white; |
| padding: 1rem; |
| border-radius: 0.5rem; |
| margin-bottom: 1rem; |
| text-align: center; |
| } |
| </style> |
| </head> |
| <body class="font-sans text-slate-800 bg-slate-50"> |
| <?php |
| // Database connection |
| $servername = "localhost"; |
| $username = "root"; // Ganti dengan username MySQL Anda |
| $password = ""; // Ganti dengan password MySQL Anda |
| $dbname = "msme_connect"; // Ganti dengan nama database Anda |
| |
| // Create connection |
| $conn = new mysqli($servername, $username, $password, $dbname); |
| |
| // Check connection |
| if ($conn->connect_error) { |
| die("Connection failed: " . $conn->connect_error); |
| } |
| |
| // Initialize variables |
| $business_name = $first_name = $last_name = $email = $phone = $sector = ""; |
| $errors = array(); |
| $success = false; |
| |
| // Form submission |
| if ($_SERVER["REQUEST_METHOD"] == "POST") { |
| // Validate and sanitize inputs |
| $business_name = clean_input($_POST["business_name"]); |
| if (empty($business_name)) { |
| $errors["business_name"] = "Business name is required"; |
| } |
| |
| $first_name = clean_input($_POST["first_name"]); |
| if (empty($first_name)) { |
| $errors["first_name"] = "First name is required"; |
| } |
| |
| $last_name = clean_input($_POST["last_name"]); |
| if (empty($last_name)) { |
| $errors["last_name"] = "Last name is required"; |
| } |
| |
| $email = clean_input($_POST["email"]); |
| if (empty($email)) { |
| $errors["email"] = "Email is required"; |
| } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) { |
| $errors["email"] = "Invalid email format"; |
| } |
| |
| $phone = clean_input($_POST["phone"]); |
| if (empty($phone)) { |
| $errors["phone"] = "Phone number is required"; |
| } |
| |
| $sector = clean_input($_POST["sector"]); |
| if (empty($sector)) { |
| $errors["sector"] = "Business sector is required"; |
| } |
| |
| $agree_terms = isset($_POST["agree_terms"]) ? 1 : 0; |
| if (!$agree_terms) { |
| $errors["agree_terms"] = "You must agree to the terms and conditions"; |
| } |
| |
| // If no errors, insert into database |
| if (empty($errors)) { |
| $stmt = $conn->prepare("INSERT INTO business_registrations (business_name, first_name, last_name, email, phone, sector, agree_terms) |
| VALUES (?, ?, ?, ?, ?, ?, ?)"); |
| $stmt->bind_param("ssssssi", $business_name, $first_name, $last_name, $email, $phone, $sector, $agree_terms); |
| |
| if ($stmt->execute()) { |
| $success = true; |
| // Reset form fields |
| $business_name = $first_name = $last_name = $email = $phone = $sector = ""; |
| } else { |
| $errors["database"] = "Error: " . $stmt->error; |
| } |
| |
| $stmt->close(); |
| } |
| } |
| |
| // Function to clean input data |
| function clean_input($data) { |
| $data = trim($data); |
| $data = stripslashes($data); |
| $data = htmlspecialchars($data); |
| return $data; |
| } |
| |
| // Close connection |
| $conn->close(); |
| ?> |
|
|
| |
| <header class="fixed w-full bg-white shadow-md z-50 transition-all duration-300"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex justify-between items-center"> |
| <a href="#" class="flex items-center"> |
| <i class="fas fa-store text-blue-700 text-3xl mr-2"></i> |
| <span class="text-2xl font-bold text-blue-800">MSME<span class="text-blue-600">Connect</span></span> |
| </a> |
| |
| |
| <button id="menu-toggle" class="md:hidden focus:outline-none"> |
| <i class="fas fa-bars text-2xl text-blue-800"></i> |
| </button> |
| |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="font-semibold text-blue-800 hover:text-blue-600 transition">Home</a> |
| <a href="#about" class="font-semibold text-slate-600 hover:text-blue-800 transition">About</a> |
| <a href="#services" class="font-semibold text-slate-600 hover:text-blue-800 transition">Services</a> |
| <a href="#benefits" class="font-semibold text-slate-600 hover:text-blue-800 transition">Benefits</a> |
| <a href="#success" class="font-semibold text-slate-600 hover:text-blue-800 transition">Success Stories</a> |
| <a href="#contact" class="font-semibold text-slate-600 hover:text-blue-800 transition">Contact</a> |
| <a href="#register" class="font-semibold bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-800 transition">Register Now</a> |
| </nav> |
| </div> |
| |
| |
| <nav id="mobile-menu" class="md:hidden hidden mt-4 space-y-3 pb-3"> |
| <a href="#home" class="block font-medium text-slate-700 hover:text-blue-700 transition">Home</a> |
| <a href="#about" class="block font-medium text-slate-700 hover:text-blue-700 transition">About</a> |
| <a href="#services" class="block font-medium text-slate-700 hover:text-blue-700 transition">Services</a> |
| <a href="#benefits" class="block font-medium text-slate-700 hover:text-blue-700 transition">Benefits</a> |
| <a href="#success" class="block font-medium text-slate-700 hover:text-blue-700 transition">Success Stories</a> |
| <a href="#contact" class="block font-medium text-slate-700 hover:text-blue-700 transition">Contact</a> |
| <a href="#register" class="block mt-2 w-full bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg text-center hover:bg-blue-800 transition">Register Now</a> |
| </nav> |
| </div> |
| </header> |
|
|
| |
| <section id="register" class="py-20 bg-blue-700 text-white"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col lg:flex-row items-center gap-12"> |
| <div class="lg:w-1/2 animate-fade-in"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Grow Your MSME?</h2> |
| <p class="text-xl opacity-90 mb-6 leading-relaxed"> |
| Join our network of successful MSMEs gaining access to financing, markets, training and support services. |
| </p> |
| <p class="text-xl opacity-90 mb-8 leading-relaxed"> |
| Registration is free and takes less than 5 minutes. Let's build your business together! |
| </p> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold mb-4">Who can join?</h3> |
| <div class="grid grid-cols-2 gap-4 text-white/90"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-5 w-5 mt-1 mr-3"> |
| <i class="fas fa-check"></i> |
| </div> |
| <p>Micro enterprises (1-10 employees)</p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-5 w-5 mt-1 mr-3"> |
| <i class="fas fa-check"></i> |
| </div> |
| <p>Small businesses (11-50 employees)</p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-5 w-5 mt-1 mr-3"> |
| <i class="fas fa-check"></i> |
| </div> |
| <p>Medium businesses (51-250 employees)</p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-5 w-5 mt-1 mr-3"> |
| <i class="fas fa-check"></i> |
| </div> |
| <p>Startups & entrepreneurs</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2 bg-white rounded-xl shadow-2xl overflow-hidden animate-fade-in delay-200"> |
| <div class="p-8"> |
| <h3 class="text-2xl font-bold text-blue-800 mb-6">Register Your Business</h3> |
| |
| <?php if ($success): ?> |
| <div class="success-message"> |
| Thank you for registering! We will contact you soon. |
| </div> |
| <?php endif; ?> |
| |
| <?php if (isset($errors['database'])): ?> |
| <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert"> |
| <?php echo $errors['database']; ?> |
| </div> |
| <?php endif; ?> |
| |
| <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>#register" novalidate> |
| <div class="mb-4"> |
| <label for="business_name" class="block text-slate-700 text-sm font-medium mb-2">Business Name *</label> |
| <input type="text" id="business_name" name="business_name" |
| class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['business_name']) ? 'error' : ''; ?>" |
| value="<?php echo htmlspecialchars($business_name); ?>"> |
| <?php if (isset($errors['business_name'])): ?> |
| <p class="error-message"><?php echo $errors['business_name']; ?></p> |
| <?php endif; ?> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label for="first_name" class="block text-slate-700 text-sm font-medium mb-2">First Name *</label> |
| <input type="text" id="first_name" name="first_name" |
| class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['first_name']) ? 'error' : ''; ?>" |
| value="<?php echo htmlspecialchars($first_name); ?>"> |
| <?php if (isset($errors['first_name'])): ?> |
| <p class="error-message"><?php echo $errors['first_name']; ?></p> |
| <?php endif; ?> |
| </div> |
| <div> |
| <label for="last_name" class="block text-slate-700 text-sm font-medium mb-2">Last Name *</label> |
| <input type="text" id="last_name" name="last_name" |
| class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['last_name']) ? 'error' : ''; ?>" |
| value="<?php echo htmlspecialchars($last_name); ?>"> |
| <?php if (isset($errors['last_name'])): ?> |
| <p class="error-message"><?php echo $errors['last_name']; ?></p> |
| <?php endif; ?> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="email" class="block text-slate-700 text-sm font-medium mb-2">Email Address *</label> |
| <input type="email" id="email" name="email" |
| class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['email']) ? 'error' : ''; ?>" |
| value="<?php echo htmlspecialchars($email); ?>"> |
| <?php if (isset($errors['email'])): ?> |
| <p class="error-message"><?php echo $errors['email']; ?></p> |
| <?php endif; ?> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="phone" class="block text-slate-700 text-sm font-medium mb-2">Phone Number *</label> |
| <input type="tel" id="phone" name="phone" |
| class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['phone']) ? 'error' : ''; ?>" |
| value="<?php echo htmlspecialchars($phone); ?>"> |
| <?php if (isset($errors['phone'])): ?> |
| <p class="error-message"><?php echo $errors['phone']; ?></p> |
| <?php endif; ?> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="sector" class="block text-slate-700 text-sm font-medium mb-2">Business Sector *</label> |
| <select id="sector" name="sector" |
| class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['sector']) ? 'error' : ''; ?>"> |
| <option value="">Select sector</option> |
| <option value="agriculture" <?php echo ($sector == 'agriculture') ? 'selected' : ''; ?>>Agriculture</option> |
| <option value="manufacturing" <?php echo ($sector == 'manufacturing') ? 'selected' : ''; ?>>Manufacturing</option> |
| <option value="retail" <?php echo ($sector == 'retail') ? 'selected' : ''; ?>>Retail</option> |
| <option value="services" <?php echo ($sector == 'services') ? 'selected' : ''; ?>>Services</option> |
| <option value="technology" <?php echo ($sector == 'technology') ? 'selected' : ''; ?>>Technology</option> |
| <option value="other" <?php echo ($sector == 'other') ? 'selected' : ''; ?>>Other</option> |
| </select> |
| <?php if (isset($errors['sector'])): ?> |
| <p class="error-message"><?php echo $errors['sector']; ?></p> |
| <?php endif; ?> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="agree_terms" class="flex items-start"> |
| <input type="checkbox" id="agree_terms" name="agree_terms" |
| class="rounded text-blue-600 focus:ring-blue-500 border-slate-300 mt-1 <?php echo isset($errors['agree_terms']) ? 'error' : ''; ?>" |
| <?php echo isset($_POST['agree_terms']) ? 'checked' : ''; ?>> |
| <span class="ml-2 text-slate-700">I agree to the <a href="#" class="text-blue-600 hover:underline">terms and conditions</a></span> |
| </label> |
| <?php if (isset($errors['agree_terms'])): ?> |
| <p class="error-message"><?php echo $errors['agree_terms']; ?></p> |
| <?php endif; ?> |
| </div> |
| |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105"> |
| Complete Registration |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <script> |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| const icon = this.querySelector('i'); |
| |
| |
| menu.classList.toggle('hidden'); |
| |
| |
| if (menu.classList.contains('hidden')) { |
| icon.classList.remove('fa-times'); |
| icon.classList.add('fa-bars'); |
| } else { |
| icon.classList.remove('fa-bars'); |
| icon.classList.add('fa-times'); |
| } |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| targetElement.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| |
| |
| const mobileMenu = document.getElementById('mobile-menu'); |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| document.getElementById('menu-toggle').querySelector('i').classList.remove('fa-times'); |
| document.getElementById('menu-toggle').querySelector('i').classList.add('fa-bars'); |
| } |
| } |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| const header = document.querySelector('header'); |
| if (window.scrollY > 100) { |
| header.classList.add('shadow-lg'); |
| header.classList.add('bg-white/95'); |
| header.classList.add('backdrop-blur-sm'); |
| } else { |
| header.classList.remove('shadow-lg'); |
| header.classList.remove('bg-white/95'); |
| header.classList.remove('backdrop-blur-sm'); |
| } |
| }); |
| |
| |
| const animateElements = document.querySelectorAll('.animate-fade-in'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = 1; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }, { |
| threshold: 0.1 |
| }); |
| |
| animateElements.forEach(element => { |
| element.style.opacity = 0; |
| element.style.transform = 'translateY(20px)'; |
| element.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; |
| observer.observe(element); |
| }); |
| |
| |
| document.querySelector('form').addEventListener('submit', function(e) { |
| let isValid = true; |
| const form = e.target; |
| |
| |
| document.querySelectorAll('.error').forEach(el => { |
| el.classList.remove('error'); |
| }); |
| document.querySelectorAll('.error-message').forEach(el => { |
| el.style.display = 'none'; |
| }); |
| |
| |
| const requiredFields = [ |
| 'business_name', |
| 'first_name', |
| 'last_name', |
| 'email', |
| 'phone', |
| 'sector', |
| 'agree_terms' |
| ]; |
| |
| requiredFields.forEach(fieldId => { |
| const field = form[fieldId]; |
| if (field) { |
| if (field.type === 'checkbox') { |
| if (!field.checked) { |
| isValid = false; |
| const label = field.closest('label'); |
| if (label) { |
| label.classList.add('error'); |
| } |
| |
| const errorElement = document.createElement('p'); |
| errorElement.className = 'error-message'; |
| errorElement.textContent = 'You must agree to the terms and conditions'; |
| label.after(errorElement); |
| } |
| } else if (!field.value.trim()) { |
| isValid = false; |
| field.classList.add('error'); |
| |
| const errorElement = document.createElement('p'); |
| errorElement.className = 'error-message'; |
| errorElement.textContent = 'This field is required'; |
| field.after(errorElement); |
| } |
| } |
| }); |
| |
| |
| const emailField = form['email']; |
| if (emailField && emailField.value.trim()) { |
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
| if (!emailRegex.test(emailField.value.trim())) { |
| isValid = false; |
| emailField.classList.add('error'); |
| |
| const errorElement = document.createElement('p'); |
| errorElement.className = 'error-message'; |
| errorElement.textContent = 'Please enter a valid email address'; |
| emailField.after(errorElement); |
| } |
| } |
| |
| if (!isValid) { |
| e.preventDefault(); |
| |
| const firstError = document.querySelector('.error'); |
| if (firstError) { |
| firstError.scrollIntoView({ |
| behavior: 'smooth', |
| block: 'center' |
| }); |
| } |
| } |
| }); |
| </script> |
| </body> |
| </html> |
