| | <!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> |
