Add 1 files
Browse files- index.html +257 -586
index.html
CHANGED
|
@@ -60,9 +60,117 @@
|
|
| 60 |
.delay-300 { animation-delay: 0.3s; }
|
| 61 |
.delay-400 { animation-delay: 0.4s; }
|
| 62 |
.delay-500 { animation-delay: 0.5s; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 63 |
</style>
|
| 64 |
</head>
|
| 65 |
<body class="font-sans text-slate-800 bg-slate-50">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 66 |
<!-- Header/Navigation -->
|
| 67 |
<header class="fixed w-full bg-white shadow-md z-50 transition-all duration-300">
|
| 68 |
<div class="container mx-auto px-6 py-4">
|
|
@@ -102,340 +210,6 @@
|
|
| 102 |
</div>
|
| 103 |
</header>
|
| 104 |
|
| 105 |
-
<!-- Hero Section -->
|
| 106 |
-
<section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 bg-hero text-white">
|
| 107 |
-
<div class="container mx-auto px-6">
|
| 108 |
-
<div class="max-w-2xl mx-auto text-center animate-fade-in">
|
| 109 |
-
<h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Empowering Micro, Small & Medium Enterprises</h1>
|
| 110 |
-
<p class="text-xl md:text-2xl mb-10 opacity-90">Connecting MSMEs to funding, training and markets to accelerate business growth and sustainability.</p>
|
| 111 |
-
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
| 112 |
-
<a href="#register" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-lg transition duration-300 transform hover:scale-105">
|
| 113 |
-
Join Our Network
|
| 114 |
-
</a>
|
| 115 |
-
<a href="#services" class="bg-white hover:bg-slate-100 text-blue-800 font-bold py-4 px-8 rounded-lg transition duration-300 transform hover:scale-105">
|
| 116 |
-
Explore Services
|
| 117 |
-
</a>
|
| 118 |
-
</div>
|
| 119 |
-
</div>
|
| 120 |
-
</div>
|
| 121 |
-
</section>
|
| 122 |
-
|
| 123 |
-
<!-- Stats Section -->
|
| 124 |
-
<section class="py-16 bg-blue-700 text-white">
|
| 125 |
-
<div class="container mx-auto px-6">
|
| 126 |
-
<div class="grid md:grid-cols-4 gap-8 text-center">
|
| 127 |
-
<div class="p-6 rounded-lg transition duration-300 animate-fade-in delay-100">
|
| 128 |
-
<div class="text-4xl font-bold mb-2">250K+</div>
|
| 129 |
-
<div class="text-slate-200">MSMEs Supported</div>
|
| 130 |
-
</div>
|
| 131 |
-
<div class="p-6 rounded-lg transition duration-300 animate-fade-in delay-200">
|
| 132 |
-
<div class="text-4xl font-bold mb-2">$5B+</div>
|
| 133 |
-
<div class="text-slate-200">Funding Facilitated</div>
|
| 134 |
-
</div>
|
| 135 |
-
<div class="p-6 rounded-lg transition duration-300 animate-fade-in delay-300">
|
| 136 |
-
<div class="text-4xl font-bold mb-2">75+</div>
|
| 137 |
-
<div class="text-slate-200">Economic Sectors</div>
|
| 138 |
-
</div>
|
| 139 |
-
<div class="p-6 rounded-lg transition duration-300 animate-fade-in delay-400">
|
| 140 |
-
<div class="text-4xl font-bold mb-2">96%</div>
|
| 141 |
-
<div class="text-slate-200">Satisfaction Rate</div>
|
| 142 |
-
</div>
|
| 143 |
-
</div>
|
| 144 |
-
</div>
|
| 145 |
-
</section>
|
| 146 |
-
|
| 147 |
-
<!-- About Section -->
|
| 148 |
-
<section id="about" class="py-20 bg-white">
|
| 149 |
-
<div class="container mx-auto px-6">
|
| 150 |
-
<div class="flex flex-col md:flex-row items-center gap-12">
|
| 151 |
-
<div class="md:w-1/2 animate-fade-in">
|
| 152 |
-
<h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-6">About MSME Connect</h2>
|
| 153 |
-
<p class="text-lg text-slate-600 mb-6 leading-relaxed">
|
| 154 |
-
MSME Connect is a non-profit organization dedicated to empowering micro, small and medium enterprises (MSMEs) through capacity building, access to finance, and market linkages. We bridge the gap between MSMEs and the resources they need to grow and thrive.
|
| 155 |
-
</p>
|
| 156 |
-
<p class="text-lg text-slate-600 mb-8 leading-relaxed">
|
| 157 |
-
Founded in 2010, we've helped over 250,000 businesses across multiple sectors to formalize, scale, and achieve sustainable growth. Our network includes financial institutions, government agencies, corporate partners, and international development organizations.
|
| 158 |
-
</p>
|
| 159 |
-
<div class="flex flex-wrap gap-4">
|
| 160 |
-
<a href="#services" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300">
|
| 161 |
-
Our Services
|
| 162 |
-
</a>
|
| 163 |
-
<a href="#success" class="inline-block border-2 border-blue-600 text-blue-700 font-bold py-3 px-8 rounded-lg hover:bg-blue-50 transition duration-300">
|
| 164 |
-
Success Stories
|
| 165 |
-
</a>
|
| 166 |
-
</div>
|
| 167 |
-
</div>
|
| 168 |
-
<div class="md:w-1/2 animate-fade-in delay-200">
|
| 169 |
-
<div class="relative rounded-xl overflow-hidden shadow-xl">
|
| 170 |
-
<img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
|
| 171 |
-
alt="MSME Business Owners" class="w-full h-auto">
|
| 172 |
-
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-blue-900 to-transparent p-6">
|
| 173 |
-
<div class="flex items-center">
|
| 174 |
-
<i class="fas fa-quote-left text-4xl text-white opacity-50 mr-4"></i>
|
| 175 |
-
<p class="text-white font-medium text-lg">"MSME Connect transformed our family business into a thriving enterprise."</p>
|
| 176 |
-
</div>
|
| 177 |
-
</div>
|
| 178 |
-
</div>
|
| 179 |
-
</div>
|
| 180 |
-
</div>
|
| 181 |
-
</div>
|
| 182 |
-
</section>
|
| 183 |
-
|
| 184 |
-
<!-- Why MSMEs Matter -->
|
| 185 |
-
<section class="py-16 bg-slate-50">
|
| 186 |
-
<div class="container mx-auto px-6">
|
| 187 |
-
<div class="text-center mb-16 animate-fade-in">
|
| 188 |
-
<h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Why MSMEs Are Vital to Our Economy</h2>
|
| 189 |
-
<p class="text-xl text-slate-600 max-w-3xl mx-auto">Micro, small and medium enterprises are the backbone of economic growth</p>
|
| 190 |
-
</div>
|
| 191 |
-
|
| 192 |
-
<div class="grid md:grid-cols-3 gap-8">
|
| 193 |
-
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-100">
|
| 194 |
-
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
|
| 195 |
-
<i class="fas fa-briefcase text-blue-700 text-2xl"></i>
|
| 196 |
-
</div>
|
| 197 |
-
<h3 class="text-xl font-bold text-blue-800 mb-4">Employment Generation</h3>
|
| 198 |
-
<p class="text-slate-600">MSMEs create more than 80% of total employment in developing countries, making them key drivers of job creation and poverty reduction.</p>
|
| 199 |
-
</div>
|
| 200 |
-
|
| 201 |
-
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-200">
|
| 202 |
-
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
|
| 203 |
-
<i class="fas fa-chart-line text-blue-700 text-2xl"></i>
|
| 204 |
-
</div>
|
| 205 |
-
<h3 class="text-xl font-bold text-blue-800 mb-4">Economic Growth</h3>
|
| 206 |
-
<p class="text-slate-600">Contributing over 40% to GDP in emerging economies, MSMEs fuel innovation and contribute significantly to national income.</p>
|
| 207 |
-
</div>
|
| 208 |
-
|
| 209 |
-
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-300">
|
| 210 |
-
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
|
| 211 |
-
<i class="fas fa-globe text-blue-700 text-2xl"></i>
|
| 212 |
-
</div>
|
| 213 |
-
<h3 class="text-xl font-bold text-blue-800 mb-4">Sustainable Development</h3>
|
| 214 |
-
<p class="text-slate-600">MSMEs promote inclusive growth, support local communities, and often pioneer sustainable business practices.</p>
|
| 215 |
-
</div>
|
| 216 |
-
</div>
|
| 217 |
-
</div>
|
| 218 |
-
</section>
|
| 219 |
-
|
| 220 |
-
<!-- Services Section -->
|
| 221 |
-
<section id="services" class="py-20 bg-white">
|
| 222 |
-
<div class="container mx-auto px-6">
|
| 223 |
-
<div class="text-center mb-16 animate-fade-in">
|
| 224 |
-
<h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Our Services for MSMEs</h2>
|
| 225 |
-
<p class="text-xl text-slate-600 max-w-3xl mx-auto">Comprehensive support to help your business grow and thrive</p>
|
| 226 |
-
</div>
|
| 227 |
-
|
| 228 |
-
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
| 229 |
-
<!-- Service 1 -->
|
| 230 |
-
<div class="service-card bg-slate-50 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 animate-fade-in delay-100">
|
| 231 |
-
<div class="p-6">
|
| 232 |
-
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
|
| 233 |
-
<i class="fas fa-hand-holding-usd text-blue-700 text-xl"></i>
|
| 234 |
-
</div>
|
| 235 |
-
<h3 class="text-xl font-bold text-blue-800 mb-4">Access to Finance</h3>
|
| 236 |
-
<p class="text-slate-600 mb-4">
|
| 237 |
-
We connect MSMEs with appropriate financing options including loans, grants, and investment opportunities.
|
| 238 |
-
</p>
|
| 239 |
-
<a href="#" class="text-blue-700 font-medium hover:text-blue-900 transition flex items-center">
|
| 240 |
-
Learn More <i class="fas fa-arrow-right ml-2"></i>
|
| 241 |
-
</a>
|
| 242 |
-
</div>
|
| 243 |
-
</div>
|
| 244 |
-
|
| 245 |
-
<!-- Service 2 -->
|
| 246 |
-
<div class="service-card bg-slate-50 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 animate-fade-in delay-200">
|
| 247 |
-
<div class="p-6">
|
| 248 |
-
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
|
| 249 |
-
<i class="fas fa-graduation-cap text-blue-700 text-xl"></i>
|
| 250 |
-
</div>
|
| 251 |
-
<h3 class="text-xl font-bold text-blue-800 mb-4">Capacity Building</h3>
|
| 252 |
-
<p class="text-slate-600 mb-4">
|
| 253 |
-
Training programs in business management, financial literacy, digital skills, and more.
|
| 254 |
-
</p>
|
| 255 |
-
<a href="#" class="text-blue-700 font-medium hover:text-blue-900 transition flex items-center">
|
| 256 |
-
Learn More <i class="fas fa-arrow-right ml-2"></i>
|
| 257 |
-
</a>
|
| 258 |
-
</div>
|
| 259 |
-
</div>
|
| 260 |
-
|
| 261 |
-
<!-- Service 3 -->
|
| 262 |
-
<div class="service-card bg-slate-50 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 animate-fade-in delay-300">
|
| 263 |
-
<div class="p-6">
|
| 264 |
-
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
|
| 265 |
-
<i class="fas fa-network-wired text-blue-700 text-xl"></i>
|
| 266 |
-
</div>
|
| 267 |
-
<h3 class="text-xl font-bold text-blue-800 mb-4">Market Linkages</h3>
|
| 268 |
-
<p class="text-slate-600 mb-4">
|
| 269 |
-
Creating connections between MSMEs and larger businesses, government contracts, and export markets.
|
| 270 |
-
</p>
|
| 271 |
-
<a href="#" class="text-blue-700 font-medium hover:text-blue-900 transition flex items-center">
|
| 272 |
-
Learn More <i class="fas fa-arrow-right ml-2"></i>
|
| 273 |
-
</a>
|
| 274 |
-
</div>
|
| 275 |
-
</div>
|
| 276 |
-
|
| 277 |
-
<!-- Service 4 -->
|
| 278 |
-
<div class="service-card bg-slate-50 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 animate-fade-in delay-400">
|
| 279 |
-
<div class="p-6">
|
| 280 |
-
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
|
| 281 |
-
<i class="fas fa-laptop-code text-blue-700 text-xl"></i>
|
| 282 |
-
</div>
|
| 283 |
-
<h3 class="text-xl font-bold text-blue-800 mb-4">Digital Transformation</h3>
|
| 284 |
-
<p class="text-slate-600 mb-4">
|
| 285 |
-
Supporting MSMEs to adopt e-commerce, digital marketing, and cloud-based business solutions.
|
| 286 |
-
</p>
|
| 287 |
-
<a href="#" class="text-blue-700 font-medium hover:text-blue-900 transition flex items-center">
|
| 288 |
-
Learn More <i class="fas fa-arrow-right ml-2"></i>
|
| 289 |
-
</a>
|
| 290 |
-
</div>
|
| 291 |
-
</div>
|
| 292 |
-
</div>
|
| 293 |
-
</div>
|
| 294 |
-
</section>
|
| 295 |
-
|
| 296 |
-
<!-- Benefits Section -->
|
| 297 |
-
<section id="benefits" class="py-16 bg-blue-50">
|
| 298 |
-
<div class="container mx-auto px-6">
|
| 299 |
-
<div class="flex flex-col lg:flex-row items-center gap-12">
|
| 300 |
-
<div class="lg:w-1/2 animate-fade-in">
|
| 301 |
-
<img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
|
| 302 |
-
alt="MSME Benefits" class="rounded-xl shadow-xl w-full">
|
| 303 |
-
</div>
|
| 304 |
-
<div class="lg:w-1/2 animate-fade-in delay-100">
|
| 305 |
-
<h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-6">Benefits of Joining MSME Connect</h2>
|
| 306 |
-
|
| 307 |
-
<div class="space-y-6">
|
| 308 |
-
<div class="flex items-start p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition">
|
| 309 |
-
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full text-blue-800 mr-4">
|
| 310 |
-
<i class="fas fa-check"></i>
|
| 311 |
-
</div>
|
| 312 |
-
<div>
|
| 313 |
-
<h4 class="font-bold text-slate-800 mb-1">Financial Support</h4>
|
| 314 |
-
<p class="text-slate-600">Access to low-interest loans, grants, and investment opportunities specifically designed for MSMEs.</p>
|
| 315 |
-
</div>
|
| 316 |
-
</div>
|
| 317 |
-
|
| 318 |
-
<div class="flex items-start p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition">
|
| 319 |
-
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full text-blue-800 mr-4">
|
| 320 |
-
<i class="fas fa-check"></i>
|
| 321 |
-
</div>
|
| 322 |
-
<div>
|
| 323 |
-
<h4 class="font-bold text-slate-800 mb-1">Training & Mentorship</h4>
|
| 324 |
-
<p class="text-slate-600">Exclusive workshops, webinars, and one-on-one mentorship from industry experts.</p>
|
| 325 |
-
</div>
|
| 326 |
-
</div>
|
| 327 |
-
|
| 328 |
-
<div class="flex items-start p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition">
|
| 329 |
-
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full text-blue-800 mr-4">
|
| 330 |
-
<i class="fas fa-check"></i>
|
| 331 |
-
</div>
|
| 332 |
-
<div>
|
| 333 |
-
<h4 class="font-bold text-slate-800 mb-1">Market Access</h4>
|
| 334 |
-
<p class="text-slate-600">Opportunities to showcase your products/services to larger buyers through our network.</p>
|
| 335 |
-
</div>
|
| 336 |
-
</div>
|
| 337 |
-
|
| 338 |
-
<div class="flex items-start p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition">
|
| 339 |
-
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full text-blue-800 mr-4">
|
| 340 |
-
<i class="fas fa-check"></i>
|
| 341 |
-
</div>
|
| 342 |
-
<div>
|
| 343 |
-
<h4 class="font-bold text-slate-800 mb-1">Networking</h4>
|
| 344 |
-
<p class="text-slate-600">Connect with other MSME owners, suppliers, buyers and potential partners.</p>
|
| 345 |
-
</div>
|
| 346 |
-
</div>
|
| 347 |
-
</div>
|
| 348 |
-
|
| 349 |
-
<a href="#register" class="mt-8 inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300">
|
| 350 |
-
Join Now
|
| 351 |
-
</a>
|
| 352 |
-
</div>
|
| 353 |
-
</div>
|
| 354 |
-
</div>
|
| 355 |
-
</section>
|
| 356 |
-
|
| 357 |
-
<!-- Success Stories Section -->
|
| 358 |
-
<section id="success" class="py-20 bg-white">
|
| 359 |
-
<div class="container mx-auto px-6">
|
| 360 |
-
<div class="text-center mb-16 animate-fade-in">
|
| 361 |
-
<h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">MSME Success Stories</h2>
|
| 362 |
-
<p class="text-xl text-slate-600 max-w-3xl mx-auto">Real businesses that grew with our support</p>
|
| 363 |
-
</div>
|
| 364 |
-
|
| 365 |
-
<div class="grid md:grid-cols-3 gap-8">
|
| 366 |
-
<!-- Testimonial 1 -->
|
| 367 |
-
<div class="testimonial-card bg-slate-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-100">
|
| 368 |
-
<div class="p-6">
|
| 369 |
-
<div class="flex items-center mb-6">
|
| 370 |
-
<img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"
|
| 371 |
-
alt="Maria Rodriguez" class="w-16 h-16 rounded-full object-cover mr-4">
|
| 372 |
-
<div>
|
| 373 |
-
<h4 class="font-bold text-slate-800">Maria Rodriguez</h4>
|
| 374 |
-
<p class="text-sm text-slate-500">Artisan Crafts Business</p>
|
| 375 |
-
</div>
|
| 376 |
-
</div>
|
| 377 |
-
<p class="text-slate-600 mb-6">
|
| 378 |
-
"With MSME Connect's training and a small loan, I grew my home-based craft business from 5 to 25 employees in two years and began exporting to 3 countries."
|
| 379 |
-
</p>
|
| 380 |
-
<div class="flex items-center text-sm text-blue-600">
|
| 381 |
-
<i class="fas fa-chart-line mr-2"></i>
|
| 382 |
-
<span>Revenue increased 300%</span>
|
| 383 |
-
</div>
|
| 384 |
-
</div>
|
| 385 |
-
</div>
|
| 386 |
-
|
| 387 |
-
<!-- Testimonial 2 -->
|
| 388 |
-
<div class="testimonial-card bg-slate-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-200">
|
| 389 |
-
<div class="p-6">
|
| 390 |
-
<div class="flex items-center mb-6">
|
| 391 |
-
<img src="https://images.unsplash.com/photo-1573497620053-ea5300f94f21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"
|
| 392 |
-
alt="Samuel Johnson" class="w-16 h-16 rounded-full object-cover mr-4">
|
| 393 |
-
<div>
|
| 394 |
-
<h4 class="font-bold text-slate-800">Samuel Johnson</h4>
|
| 395 |
-
<p class="text-sm text-slate-500">Agro-processing Enterprise</p>
|
| 396 |
-
</div>
|
| 397 |
-
</div>
|
| 398 |
-
<p class="text-slate-600 mb-6">
|
| 399 |
-
"The market linkages program connected us with major supermarket chains. We now supply to 15 stores nationwide from just 3 previously."
|
| 400 |
-
</p>
|
| 401 |
-
<div class="flex items-center text-sm text-blue-600">
|
| 402 |
-
<i class="fas fa-user-plus mr-2"></i>
|
| 403 |
-
<span>Created 18 new jobs</span>
|
| 404 |
-
</div>
|
| 405 |
-
</div>
|
| 406 |
-
</div>
|
| 407 |
-
|
| 408 |
-
<!-- Testimonial 3 -->
|
| 409 |
-
<div class="testimonial-card bg-slate-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-300">
|
| 410 |
-
<div class="p-6">
|
| 411 |
-
<div class="flex items-center mb-6">
|
| 412 |
-
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"
|
| 413 |
-
alt="Aisha Mohammed" class="w-16 h-16 rounded-full object-cover mr-4">
|
| 414 |
-
<div>
|
| 415 |
-
<h4 class="font-bold text-slate-800">Aisha Mohammed</h4>
|
| 416 |
-
<p class="text-sm text-slate-500">Digital Marketing Agency</p>
|
| 417 |
-
</div>
|
| 418 |
-
</div>
|
| 419 |
-
<p class="text-slate-600 mb-6">
|
| 420 |
-
"The digital transformation program helped us pivot during the pandemic. We went from 5 to 35 clients in 6 months using new online strategies."
|
| 421 |
-
</p>
|
| 422 |
-
<div class="flex items-center text-sm text-blue-600">
|
| 423 |
-
<i class="fas fa-globe mr-2"></i>
|
| 424 |
-
<span>Serving clients internationally</span>
|
| 425 |
-
</div>
|
| 426 |
-
</div>
|
| 427 |
-
</div>
|
| 428 |
-
</div>
|
| 429 |
-
|
| 430 |
-
<div class="text-center mt-12 animate-fade-in delay-400">
|
| 431 |
-
<a href="#" class="inline-flex items-center px-6 py-3 border-2 border-blue-600 text-blue-700 font-medium rounded-lg hover:bg-blue-50 transition">
|
| 432 |
-
View More Success Stories
|
| 433 |
-
<i class="fas fa-arrow-right ml-2"></i>
|
| 434 |
-
</a>
|
| 435 |
-
</div>
|
| 436 |
-
</div>
|
| 437 |
-
</section>
|
| 438 |
-
|
| 439 |
<!-- Register Section -->
|
| 440 |
<section id="register" class="py-20 bg-blue-700 text-white">
|
| 441 |
<div class="container mx-auto px-6">
|
|
@@ -484,51 +258,97 @@
|
|
| 484 |
<div class="p-8">
|
| 485 |
<h3 class="text-2xl font-bold text-blue-800 mb-6">Register Your Business</h3>
|
| 486 |
|
| 487 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 488 |
<div class="mb-4">
|
| 489 |
-
<label class="block text-slate-700 text-sm font-medium mb-2">Business Name *</label>
|
| 490 |
-
<input type="text"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 491 |
</div>
|
| 492 |
|
| 493 |
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
| 494 |
<div>
|
| 495 |
-
<label class="block text-slate-700 text-sm font-medium mb-2">First Name *</label>
|
| 496 |
-
<input type="text"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 497 |
</div>
|
| 498 |
<div>
|
| 499 |
-
<label class="block text-slate-700 text-sm font-medium mb-2">Last Name *</label>
|
| 500 |
-
<input type="text"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 501 |
</div>
|
| 502 |
</div>
|
| 503 |
|
| 504 |
<div class="mb-4">
|
| 505 |
-
<label class="block text-slate-700 text-sm font-medium mb-2">Email Address *</label>
|
| 506 |
-
<input type="email"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 507 |
</div>
|
| 508 |
|
| 509 |
<div class="mb-4">
|
| 510 |
-
<label class="block text-slate-700 text-sm font-medium mb-2">Phone Number *</label>
|
| 511 |
-
<input type="tel"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 512 |
</div>
|
| 513 |
|
| 514 |
<div class="mb-4">
|
| 515 |
-
<label class="block text-slate-700 text-sm font-medium mb-2">Business Sector *</label>
|
| 516 |
-
<select
|
|
|
|
| 517 |
<option value="">Select sector</option>
|
| 518 |
-
<option value="agriculture"
|
| 519 |
-
<option value="manufacturing"
|
| 520 |
-
<option value="retail"
|
| 521 |
-
<option value="services"
|
| 522 |
-
<option value="technology"
|
| 523 |
-
<option value="other"
|
| 524 |
</select>
|
|
|
|
|
|
|
|
|
|
| 525 |
</div>
|
| 526 |
|
| 527 |
<div class="mb-6">
|
| 528 |
-
<label class="flex items-
|
| 529 |
-
<input type="checkbox"
|
| 530 |
-
|
|
|
|
|
|
|
| 531 |
</label>
|
|
|
|
|
|
|
|
|
|
| 532 |
</div>
|
| 533 |
|
| 534 |
<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">
|
|
@@ -541,235 +361,6 @@
|
|
| 541 |
</div>
|
| 542 |
</section>
|
| 543 |
|
| 544 |
-
<!-- Partners Section -->
|
| 545 |
-
<section class="py-16 bg-slate-50">
|
| 546 |
-
<div class="container mx-auto px-6">
|
| 547 |
-
<div class="text-center mb-12">
|
| 548 |
-
<h2 class="text-2xl md:text-3xl font-bold text-blue-800 mb-2">Our Trusted Partners</h2>
|
| 549 |
-
<p class="text-lg text-slate-600 max-w-3xl mx-auto">Collaborating with leading organizations to support MSMEs</p>
|
| 550 |
-
</div>
|
| 551 |
-
|
| 552 |
-
<div class="flex flex-wrap justify-center items-center gap-10">
|
| 553 |
-
<div class="w-36 partner-logo hover:opacity-100 transition">
|
| 554 |
-
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/World_Bank_Logo_2012.svg/640px-World_Bank_Logo_2012.svg.png" alt="World Bank" class="h-10 object-contain w-full">
|
| 555 |
-
</div>
|
| 556 |
-
<div class="w-36 partner-logo hover:opacity-100 transition">
|
| 557 |
-
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/United_Nations_Development_Programme_logo.svg/640px-United_Nations_Development_Programme_logo.svg.png" alt="UNDP" class="h-10 object-contain w-full">
|
| 558 |
-
</div>
|
| 559 |
-
<div class="w-36 partner-logo hover:opacity-100 transition">
|
| 560 |
-
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/SMBC_logo.svg/640px-SMBC_logo.svg.png" alt="SMBC" class="h-10 object-contain w-full">
|
| 561 |
-
</div>
|
| 562 |
-
<div class="w-36 partner-logo hover:opacity-100 transition">
|
| 563 |
-
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mastercard_2019_logo.svg/640px-Mastercard_2019_logo.svg.png" alt="Mastercard" class="h-10 object-contain w-full">
|
| 564 |
-
</div>
|
| 565 |
-
<div class="w-36 partner-logo hover:opacity-100 transition">
|
| 566 |
-
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Google_2015_logo.svg/640px-Google_2015_logo.svg.png" alt="Google" class="h-10 object-contain w-full">
|
| 567 |
-
</div>
|
| 568 |
-
</div>
|
| 569 |
-
</div>
|
| 570 |
-
</section>
|
| 571 |
-
|
| 572 |
-
<!-- Contact Section -->
|
| 573 |
-
<section id="contact" class="py-20 bg-white">
|
| 574 |
-
<div class="container mx-auto px-6">
|
| 575 |
-
<div class="flex flex-col lg:flex-row gap-12">
|
| 576 |
-
<div class="lg:w-1/2 animate-fade-in">
|
| 577 |
-
<h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-6">Contact Our MSME Support Team</h2>
|
| 578 |
-
<p class="text-lg text-slate-600 mb-8 leading-relaxed">
|
| 579 |
-
Have questions about our services or need specific assistance with your MSME? Our dedicated team is here to help you succeed in your business journey.
|
| 580 |
-
</p>
|
| 581 |
-
|
| 582 |
-
<div class="space-y-6">
|
| 583 |
-
<div class="flex items-start">
|
| 584 |
-
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg text-blue-800 mr-4">
|
| 585 |
-
<i class="fas fa-map-marker-alt text-lg"></i>
|
| 586 |
-
</div>
|
| 587 |
-
<div>
|
| 588 |
-
<h4 class="font-bold text-slate-800 mb-1">Headquarters</h4>
|
| 589 |
-
<p class="text-slate-600">123 Enterprise Plaza, Business District, New York, NY 10001</p>
|
| 590 |
-
</div>
|
| 591 |
-
</div>
|
| 592 |
-
|
| 593 |
-
<div class="flex items-start">
|
| 594 |
-
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg text-blue-800 mr-4">
|
| 595 |
-
<i class="fas fa-phone-alt text-lg"></i>
|
| 596 |
-
</div>
|
| 597 |
-
<div>
|
| 598 |
-
<h4 class="font-bold text-slate-800 mb-1">Contact Numbers</h4>
|
| 599 |
-
<p class="text-slate-600">+1 (800) MSME-123 (General Support)</p>
|
| 600 |
-
<p class="text-slate-600">+1 (800) MSME-456 (Funding Inquiries)</p>
|
| 601 |
-
</div>
|
| 602 |
-
</div>
|
| 603 |
-
|
| 604 |
-
<div class="flex items-start">
|
| 605 |
-
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg text-blue-800 mr-4">
|
| 606 |
-
<i class="fas fa-envelope text-lg"></i>
|
| 607 |
-
</div>
|
| 608 |
-
<div>
|
| 609 |
-
<h4 class="font-bold text-slate-800 mb-1">Email Addresses</h4>
|
| 610 |
-
<p class="text-slate-600">info@msmeconnect.org (General)</p>
|
| 611 |
-
<p class="text-slate-600">support@msmeconnect.org (Support)</p>
|
| 612 |
-
</div>
|
| 613 |
-
</div>
|
| 614 |
-
</div>
|
| 615 |
-
|
| 616 |
-
<div class="mt-10">
|
| 617 |
-
<h4 class="font-bold text-slate-800 mb-4">Connect With Us</h4>
|
| 618 |
-
<div class="flex space-x-4">
|
| 619 |
-
<a href="#" class="w-12 h-12 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center hover:bg-blue-200 transition">
|
| 620 |
-
<i class="fab fa-facebook-f"></i>
|
| 621 |
-
</a>
|
| 622 |
-
<a href="#" class="w-12 h-12 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center hover:bg-blue-200 transition">
|
| 623 |
-
<i class="fab fa-twitter"></i>
|
| 624 |
-
</a>
|
| 625 |
-
<a href="#" class="w-12 h-12 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center hover:bg-blue-200 transition">
|
| 626 |
-
<i class="fab fa-linkedin-in"></i>
|
| 627 |
-
</a>
|
| 628 |
-
<a href="#" class="w-12 h-12 rounded-full bg-blue-100 text-blue-800 flex items center justify-center hover:bg-blue-200 transition">
|
| 629 |
-
<i class="fab fa-instagram"></i>
|
| 630 |
-
</a>
|
| 631 |
-
<a href="#" class="w-12 h-12 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center hover:bg-blue-200 transition">
|
| 632 |
-
<i class="fab fa-youtube"></i>
|
| 633 |
-
</a>
|
| 634 |
-
</div>
|
| 635 |
-
</div>
|
| 636 |
-
</div>
|
| 637 |
-
|
| 638 |
-
<div class="lg:w-1/2 animate-fade-in delay-200">
|
| 639 |
-
<div class="bg-slate-50 p-8 rounded-xl shadow-xl">
|
| 640 |
-
<h3 class="text-2xl font-bold text-blue-800 mb-6">Send Us a Message</h3>
|
| 641 |
-
<form>
|
| 642 |
-
<div class="mb-4">
|
| 643 |
-
<label for="name" class="block text-slate-700 text-sm font-medium mb-2">Your Name *</label>
|
| 644 |
-
<input type="text" id="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">
|
| 645 |
-
</div>
|
| 646 |
-
<div class="mb-4">
|
| 647 |
-
<label for="email" class="block text-slate-700 text-sm font-medium mb-2">Email Address *</label>
|
| 648 |
-
<input type="email" id="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">
|
| 649 |
-
</div>
|
| 650 |
-
<div class="mb-4">
|
| 651 |
-
<label for="business" class="block text-slate-700 text-sm font-medium mb-2">Business Name</label>
|
| 652 |
-
<input type="text" id="business" 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">
|
| 653 |
-
</div>
|
| 654 |
-
<div class="mb-4">
|
| 655 |
-
<label for="subject" class="block text-slate-700 text-sm font-medium mb-2">Subject *</label>
|
| 656 |
-
<select id="subject" 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">
|
| 657 |
-
<option value="">Select a topic</option>
|
| 658 |
-
<option value="registration">Registration Questions</option>
|
| 659 |
-
<option value="funding">Funding Opportunities</option>
|
| 660 |
-
<option value="training">Training Programs</option>
|
| 661 |
-
<option value="other">Other Inquiry</option>
|
| 662 |
-
</select>
|
| 663 |
-
</div>
|
| 664 |
-
<div class="mb-6">
|
| 665 |
-
<label for="message" class="block text-slate-700 text-sm font-medium mb-2">Message *</label>
|
| 666 |
-
<textarea id="message" rows="5" 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"></textarea>
|
| 667 |
-
</div>
|
| 668 |
-
<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">
|
| 669 |
-
Send Message
|
| 670 |
-
</button>
|
| 671 |
-
</form>
|
| 672 |
-
</div>
|
| 673 |
-
</div>
|
| 674 |
-
</div>
|
| 675 |
-
</div>
|
| 676 |
-
</section>
|
| 677 |
-
|
| 678 |
-
<!-- Newsletter Section -->
|
| 679 |
-
<section class="py-16 bg-blue-800 text-white">
|
| 680 |
-
<div class="container mx-auto px-6 max-w-4xl text-center">
|
| 681 |
-
<div class="animate-fade-in">
|
| 682 |
-
<h2 class="text-3xl md:text-4xl font-bold mb-6">MSME Insights Newsletter</h2>
|
| 683 |
-
<p class="text-xl mb-8 opacity-90">Subscribe for the latest business tips, funding alerts, and MSME resources delivered to your inbox.</p>
|
| 684 |
-
|
| 685 |
-
<form class="flex flex-col sm:flex-row gap-4 justify-center max-w-xl mx-auto">
|
| 686 |
-
<input type="email" placeholder="Your email address"
|
| 687 |
-
class="flex-grow px-5 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-900">
|
| 688 |
-
<button type="submit"
|
| 689 |
-
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105">
|
| 690 |
-
Subscribe
|
| 691 |
-
</button>
|
| 692 |
-
</form>
|
| 693 |
-
|
| 694 |
-
<p class="text-sm text-white/70 mt-4">We'll never share your email. Unsubscribe anytime.</p>
|
| 695 |
-
</div>
|
| 696 |
-
</div>
|
| 697 |
-
</section>
|
| 698 |
-
|
| 699 |
-
<!-- Footer -->
|
| 700 |
-
<footer class="bg-blue-900 text-white pt-16 pb-8">
|
| 701 |
-
<div class="container mx-auto px-6">
|
| 702 |
-
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
|
| 703 |
-
<div>
|
| 704 |
-
<a href="#" class="flex items-center mb-6">
|
| 705 |
-
<i class="fas fa-store text-3xl mr-2 text-blue-400"></i>
|
| 706 |
-
<span class="text-2xl font-bold">MSME<span class="text-blue-400">Connect</span></span>
|
| 707 |
-
</a>
|
| 708 |
-
<p class="text-blue-200 mb-6 leading-relaxed">
|
| 709 |
-
Empowering micro, small and medium enterprises through access to finance, markets and capacity building.
|
| 710 |
-
</p>
|
| 711 |
-
<div class="flex space-x-4">
|
| 712 |
-
<a href="#" class="w-10 h-10 rounded-full bg-blue-800 text-white flex items-center justify-center hover:bg-blue-700 transition">
|
| 713 |
-
<i class="fab fa-facebook-f"></i>
|
| 714 |
-
</a>
|
| 715 |
-
<a href="#" class="w-10 h-10 rounded-full bg-blue-800 text-white flex items-center justify-center hover:bg-blue-700 transition">
|
| 716 |
-
<i class="fab fa-twitter"></i>
|
| 717 |
-
</a>
|
| 718 |
-
<a href="#" class="w-10 h-10 rounded-full bg-blue-800 text-white flex items-center justify-center hover:bg-blue-700 transition">
|
| 719 |
-
<i class="fab fa-linkedin-in"></i>
|
| 720 |
-
</a>
|
| 721 |
-
<a href="#" class="w-10 h-10 rounded-full bg-blue-800 text-white flex items-center justify-center hover:bg-blue-700 transition">
|
| 722 |
-
<i class="fab fa-instagram"></i>
|
| 723 |
-
</a>
|
| 724 |
-
</div>
|
| 725 |
-
</div>
|
| 726 |
-
|
| 727 |
-
<div>
|
| 728 |
-
<h4 class="text-lg font-bold mb-6 text-white">Quick Links</h4>
|
| 729 |
-
<ul class="space-y-3">
|
| 730 |
-
<li><a href="#home" class="text-blue-200 hover:text-white transition">Home</a></li>
|
| 731 |
-
<li><a href="#about" class="text-blue-200 hover:text-white transition">About Us</a></li>
|
| 732 |
-
<li><a href="#services" class="text-blue-200 hover:text-white transition">Our Services</a></li>
|
| 733 |
-
<li><a href="#benefits" class="text-blue-200 hover:text-white transition">Member Benefits</a></li>
|
| 734 |
-
<li><a href="#success" class="text-blue-200 hover:text-white transition">Success Stories</a></li>
|
| 735 |
-
<li><a href="#contact" class="text-blue-200 hover:text-white transition">Contact</a></li>
|
| 736 |
-
</ul>
|
| 737 |
-
</div>
|
| 738 |
-
|
| 739 |
-
<div>
|
| 740 |
-
<h4 class="text-lg font-bold mb-6 text-white">Our Services</h4>
|
| 741 |
-
<ul class="space-y-3">
|
| 742 |
-
<li><a href="#" class="text-blue-200 hover:text-white transition">Business Financing</a></li>
|
| 743 |
-
<li><a href="#" class="text-blue-200 hover:text-white transition">Training Programs</a></li>
|
| 744 |
-
<li><a href="#" class="text-blue-200 hover:text-white transition">Market Linkages</a></li>
|
| 745 |
-
<li><a href="#" class="text-blue-200 hover:text-white transition">Digital Tools</a></li>
|
| 746 |
-
<li><a href="#" class="text-blue-200 hover:text-white transition">Policy Advocacy</a></li>
|
| 747 |
-
<li><a href="#" class="text-blue-200 hover:text-white transition">Research & Data</a></li>
|
| 748 |
-
</ul>
|
| 749 |
-
</div>
|
| 750 |
-
|
| 751 |
-
<div>
|
| 752 |
-
<h4 class="text-lg font-bold mb-6 text-white">Contact Info</h4>
|
| 753 |
-
<address class="not-italic space-y-3 text-blue-200">
|
| 754 |
-
<p>123 Enterprise Plaza<br>Business District, New York, NY 10001</p>
|
| 755 |
-
<p>Email: info@msmeconnect.org</p>
|
| 756 |
-
<p>Phone: +1 (800) MSME-123</p>
|
| 757 |
-
<p>Hours: Mon-Fri, 9AM-5PM EST</p>
|
| 758 |
-
</address>
|
| 759 |
-
</div>
|
| 760 |
-
</div>
|
| 761 |
-
|
| 762 |
-
<div class="border-t border-blue-800 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 763 |
-
<p class="text-blue-300 text-sm mb-4 md:mb-0">© 2023 MSME Connect. All rights reserved. A 501(c)(3) non-profit organization.</p>
|
| 764 |
-
<div class="flex space-x-6">
|
| 765 |
-
<a href="#" class="text-blue-300 hover:text-white text-sm transition">Privacy Policy</a>
|
| 766 |
-
<a href="#" class="text-blue-300 hover:text-white text-sm transition">Terms of Service</a>
|
| 767 |
-
<a href="#" class="text-blue-300 hover:text-white text-sm transition">Accessibility</a>
|
| 768 |
-
</div>
|
| 769 |
-
</div>
|
| 770 |
-
</div>
|
| 771 |
-
</footer>
|
| 772 |
-
|
| 773 |
<script>
|
| 774 |
// Mobile Menu Toggle
|
| 775 |
document.getElementById('menu-toggle').addEventListener('click', function() {
|
|
@@ -848,6 +439,86 @@
|
|
| 848 |
element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
| 849 |
observer.observe(element);
|
| 850 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 851 |
</script>
|
| 852 |
-
|
| 853 |
</html>
|
|
|
|
| 60 |
.delay-300 { animation-delay: 0.3s; }
|
| 61 |
.delay-400 { animation-delay: 0.4s; }
|
| 62 |
.delay-500 { animation-delay: 0.5s; }
|
| 63 |
+
|
| 64 |
+
/* Form validation */
|
| 65 |
+
.error {
|
| 66 |
+
border-color: #ef4444 !important;
|
| 67 |
+
}
|
| 68 |
+
.error-message {
|
| 69 |
+
color: #ef4444;
|
| 70 |
+
font-size: 0.875rem;
|
| 71 |
+
margin-top: 0.25rem;
|
| 72 |
+
}
|
| 73 |
+
.success-message {
|
| 74 |
+
background-color: #10b981;
|
| 75 |
+
color: white;
|
| 76 |
+
padding: 1rem;
|
| 77 |
+
border-radius: 0.5rem;
|
| 78 |
+
margin-bottom: 1rem;
|
| 79 |
+
text-align: center;
|
| 80 |
+
}
|
| 81 |
</style>
|
| 82 |
</head>
|
| 83 |
<body class="font-sans text-slate-800 bg-slate-50">
|
| 84 |
+
<?php
|
| 85 |
+
// Database connection
|
| 86 |
+
$servername = "localhost";
|
| 87 |
+
$username = "root"; // Ganti dengan username MySQL Anda
|
| 88 |
+
$password = ""; // Ganti dengan password MySQL Anda
|
| 89 |
+
$dbname = "msme_connect"; // Ganti dengan nama database Anda
|
| 90 |
+
|
| 91 |
+
// Create connection
|
| 92 |
+
$conn = new mysqli($servername, $username, $password, $dbname);
|
| 93 |
+
|
| 94 |
+
// Check connection
|
| 95 |
+
if ($conn->connect_error) {
|
| 96 |
+
die("Connection failed: " . $conn->connect_error);
|
| 97 |
+
}
|
| 98 |
+
|
| 99 |
+
// Initialize variables
|
| 100 |
+
$business_name = $first_name = $last_name = $email = $phone = $sector = "";
|
| 101 |
+
$errors = array();
|
| 102 |
+
$success = false;
|
| 103 |
+
|
| 104 |
+
// Form submission
|
| 105 |
+
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
| 106 |
+
// Validate and sanitize inputs
|
| 107 |
+
$business_name = clean_input($_POST["business_name"]);
|
| 108 |
+
if (empty($business_name)) {
|
| 109 |
+
$errors["business_name"] = "Business name is required";
|
| 110 |
+
}
|
| 111 |
+
|
| 112 |
+
$first_name = clean_input($_POST["first_name"]);
|
| 113 |
+
if (empty($first_name)) {
|
| 114 |
+
$errors["first_name"] = "First name is required";
|
| 115 |
+
}
|
| 116 |
+
|
| 117 |
+
$last_name = clean_input($_POST["last_name"]);
|
| 118 |
+
if (empty($last_name)) {
|
| 119 |
+
$errors["last_name"] = "Last name is required";
|
| 120 |
+
}
|
| 121 |
+
|
| 122 |
+
$email = clean_input($_POST["email"]);
|
| 123 |
+
if (empty($email)) {
|
| 124 |
+
$errors["email"] = "Email is required";
|
| 125 |
+
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
| 126 |
+
$errors["email"] = "Invalid email format";
|
| 127 |
+
}
|
| 128 |
+
|
| 129 |
+
$phone = clean_input($_POST["phone"]);
|
| 130 |
+
if (empty($phone)) {
|
| 131 |
+
$errors["phone"] = "Phone number is required";
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
$sector = clean_input($_POST["sector"]);
|
| 135 |
+
if (empty($sector)) {
|
| 136 |
+
$errors["sector"] = "Business sector is required";
|
| 137 |
+
}
|
| 138 |
+
|
| 139 |
+
$agree_terms = isset($_POST["agree_terms"]) ? 1 : 0;
|
| 140 |
+
if (!$agree_terms) {
|
| 141 |
+
$errors["agree_terms"] = "You must agree to the terms and conditions";
|
| 142 |
+
}
|
| 143 |
+
|
| 144 |
+
// If no errors, insert into database
|
| 145 |
+
if (empty($errors)) {
|
| 146 |
+
$stmt = $conn->prepare("INSERT INTO business_registrations (business_name, first_name, last_name, email, phone, sector, agree_terms)
|
| 147 |
+
VALUES (?, ?, ?, ?, ?, ?, ?)");
|
| 148 |
+
$stmt->bind_param("ssssssi", $business_name, $first_name, $last_name, $email, $phone, $sector, $agree_terms);
|
| 149 |
+
|
| 150 |
+
if ($stmt->execute()) {
|
| 151 |
+
$success = true;
|
| 152 |
+
// Reset form fields
|
| 153 |
+
$business_name = $first_name = $last_name = $email = $phone = $sector = "";
|
| 154 |
+
} else {
|
| 155 |
+
$errors["database"] = "Error: " . $stmt->error;
|
| 156 |
+
}
|
| 157 |
+
|
| 158 |
+
$stmt->close();
|
| 159 |
+
}
|
| 160 |
+
}
|
| 161 |
+
|
| 162 |
+
// Function to clean input data
|
| 163 |
+
function clean_input($data) {
|
| 164 |
+
$data = trim($data);
|
| 165 |
+
$data = stripslashes($data);
|
| 166 |
+
$data = htmlspecialchars($data);
|
| 167 |
+
return $data;
|
| 168 |
+
}
|
| 169 |
+
|
| 170 |
+
// Close connection
|
| 171 |
+
$conn->close();
|
| 172 |
+
?>
|
| 173 |
+
|
| 174 |
<!-- Header/Navigation -->
|
| 175 |
<header class="fixed w-full bg-white shadow-md z-50 transition-all duration-300">
|
| 176 |
<div class="container mx-auto px-6 py-4">
|
|
|
|
| 210 |
</div>
|
| 211 |
</header>
|
| 212 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 213 |
<!-- Register Section -->
|
| 214 |
<section id="register" class="py-20 bg-blue-700 text-white">
|
| 215 |
<div class="container mx-auto px-6">
|
|
|
|
| 258 |
<div class="p-8">
|
| 259 |
<h3 class="text-2xl font-bold text-blue-800 mb-6">Register Your Business</h3>
|
| 260 |
|
| 261 |
+
<?php if ($success): ?>
|
| 262 |
+
<div class="success-message">
|
| 263 |
+
Thank you for registering! We will contact you soon.
|
| 264 |
+
</div>
|
| 265 |
+
<?php endif; ?>
|
| 266 |
+
|
| 267 |
+
<?php if (isset($errors['database'])): ?>
|
| 268 |
+
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
|
| 269 |
+
<?php echo $errors['database']; ?>
|
| 270 |
+
</div>
|
| 271 |
+
<?php endif; ?>
|
| 272 |
+
|
| 273 |
+
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>#register" novalidate>
|
| 274 |
<div class="mb-4">
|
| 275 |
+
<label for="business_name" class="block text-slate-700 text-sm font-medium mb-2">Business Name *</label>
|
| 276 |
+
<input type="text" id="business_name" name="business_name"
|
| 277 |
+
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' : ''; ?>"
|
| 278 |
+
value="<?php echo htmlspecialchars($business_name); ?>">
|
| 279 |
+
<?php if (isset($errors['business_name'])): ?>
|
| 280 |
+
<p class="error-message"><?php echo $errors['business_name']; ?></p>
|
| 281 |
+
<?php endif; ?>
|
| 282 |
</div>
|
| 283 |
|
| 284 |
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
| 285 |
<div>
|
| 286 |
+
<label for="first_name" class="block text-slate-700 text-sm font-medium mb-2">First Name *</label>
|
| 287 |
+
<input type="text" id="first_name" name="first_name"
|
| 288 |
+
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' : ''; ?>"
|
| 289 |
+
value="<?php echo htmlspecialchars($first_name); ?>">
|
| 290 |
+
<?php if (isset($errors['first_name'])): ?>
|
| 291 |
+
<p class="error-message"><?php echo $errors['first_name']; ?></p>
|
| 292 |
+
<?php endif; ?>
|
| 293 |
</div>
|
| 294 |
<div>
|
| 295 |
+
<label for="last_name" class="block text-slate-700 text-sm font-medium mb-2">Last Name *</label>
|
| 296 |
+
<input type="text" id="last_name" name="last_name"
|
| 297 |
+
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' : ''; ?>"
|
| 298 |
+
value="<?php echo htmlspecialchars($last_name); ?>">
|
| 299 |
+
<?php if (isset($errors['last_name'])): ?>
|
| 300 |
+
<p class="error-message"><?php echo $errors['last_name']; ?></p>
|
| 301 |
+
<?php endif; ?>
|
| 302 |
</div>
|
| 303 |
</div>
|
| 304 |
|
| 305 |
<div class="mb-4">
|
| 306 |
+
<label for="email" class="block text-slate-700 text-sm font-medium mb-2">Email Address *</label>
|
| 307 |
+
<input type="email" id="email" name="email"
|
| 308 |
+
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' : ''; ?>"
|
| 309 |
+
value="<?php echo htmlspecialchars($email); ?>">
|
| 310 |
+
<?php if (isset($errors['email'])): ?>
|
| 311 |
+
<p class="error-message"><?php echo $errors['email']; ?></p>
|
| 312 |
+
<?php endif; ?>
|
| 313 |
</div>
|
| 314 |
|
| 315 |
<div class="mb-4">
|
| 316 |
+
<label for="phone" class="block text-slate-700 text-sm font-medium mb-2">Phone Number *</label>
|
| 317 |
+
<input type="tel" id="phone" name="phone"
|
| 318 |
+
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' : ''; ?>"
|
| 319 |
+
value="<?php echo htmlspecialchars($phone); ?>">
|
| 320 |
+
<?php if (isset($errors['phone'])): ?>
|
| 321 |
+
<p class="error-message"><?php echo $errors['phone']; ?></p>
|
| 322 |
+
<?php endif; ?>
|
| 323 |
</div>
|
| 324 |
|
| 325 |
<div class="mb-4">
|
| 326 |
+
<label for="sector" class="block text-slate-700 text-sm font-medium mb-2">Business Sector *</label>
|
| 327 |
+
<select id="sector" name="sector"
|
| 328 |
+
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' : ''; ?>">
|
| 329 |
<option value="">Select sector</option>
|
| 330 |
+
<option value="agriculture" <?php echo ($sector == 'agriculture') ? 'selected' : ''; ?>>Agriculture</option>
|
| 331 |
+
<option value="manufacturing" <?php echo ($sector == 'manufacturing') ? 'selected' : ''; ?>>Manufacturing</option>
|
| 332 |
+
<option value="retail" <?php echo ($sector == 'retail') ? 'selected' : ''; ?>>Retail</option>
|
| 333 |
+
<option value="services" <?php echo ($sector == 'services') ? 'selected' : ''; ?>>Services</option>
|
| 334 |
+
<option value="technology" <?php echo ($sector == 'technology') ? 'selected' : ''; ?>>Technology</option>
|
| 335 |
+
<option value="other" <?php echo ($sector == 'other') ? 'selected' : ''; ?>>Other</option>
|
| 336 |
</select>
|
| 337 |
+
<?php if (isset($errors['sector'])): ?>
|
| 338 |
+
<p class="error-message"><?php echo $errors['sector']; ?></p>
|
| 339 |
+
<?php endif; ?>
|
| 340 |
</div>
|
| 341 |
|
| 342 |
<div class="mb-6">
|
| 343 |
+
<label for="agree_terms" class="flex items-start">
|
| 344 |
+
<input type="checkbox" id="agree_terms" name="agree_terms"
|
| 345 |
+
class="rounded text-blue-600 focus:ring-blue-500 border-slate-300 mt-1 <?php echo isset($errors['agree_terms']) ? 'error' : ''; ?>"
|
| 346 |
+
<?php echo isset($_POST['agree_terms']) ? 'checked' : ''; ?>>
|
| 347 |
+
<span class="ml-2 text-slate-700">I agree to the <a href="#" class="text-blue-600 hover:underline">terms and conditions</a></span>
|
| 348 |
</label>
|
| 349 |
+
<?php if (isset($errors['agree_terms'])): ?>
|
| 350 |
+
<p class="error-message"><?php echo $errors['agree_terms']; ?></p>
|
| 351 |
+
<?php endif; ?>
|
| 352 |
</div>
|
| 353 |
|
| 354 |
<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">
|
|
|
|
| 361 |
</div>
|
| 362 |
</section>
|
| 363 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 364 |
<script>
|
| 365 |
// Mobile Menu Toggle
|
| 366 |
document.getElementById('menu-toggle').addEventListener('click', function() {
|
|
|
|
| 439 |
element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
| 440 |
observer.observe(element);
|
| 441 |
});
|
| 442 |
+
|
| 443 |
+
// Client-side validation
|
| 444 |
+
document.querySelector('form').addEventListener('submit', function(e) {
|
| 445 |
+
let isValid = true;
|
| 446 |
+
const form = e.target;
|
| 447 |
+
|
| 448 |
+
// Clear previous error states
|
| 449 |
+
document.querySelectorAll('.error').forEach(el => {
|
| 450 |
+
el.classList.remove('error');
|
| 451 |
+
});
|
| 452 |
+
document.querySelectorAll('.error-message').forEach(el => {
|
| 453 |
+
el.style.display = 'none';
|
| 454 |
+
});
|
| 455 |
+
|
| 456 |
+
// Validate required fields
|
| 457 |
+
const requiredFields = [
|
| 458 |
+
'business_name',
|
| 459 |
+
'first_name',
|
| 460 |
+
'last_name',
|
| 461 |
+
'email',
|
| 462 |
+
'phone',
|
| 463 |
+
'sector',
|
| 464 |
+
'agree_terms'
|
| 465 |
+
];
|
| 466 |
+
|
| 467 |
+
requiredFields.forEach(fieldId => {
|
| 468 |
+
const field = form[fieldId];
|
| 469 |
+
if (field) {
|
| 470 |
+
if (field.type === 'checkbox') {
|
| 471 |
+
if (!field.checked) {
|
| 472 |
+
isValid = false;
|
| 473 |
+
const label = field.closest('label');
|
| 474 |
+
if (label) {
|
| 475 |
+
label.classList.add('error');
|
| 476 |
+
}
|
| 477 |
+
// Show error message
|
| 478 |
+
const errorElement = document.createElement('p');
|
| 479 |
+
errorElement.className = 'error-message';
|
| 480 |
+
errorElement.textContent = 'You must agree to the terms and conditions';
|
| 481 |
+
label.after(errorElement);
|
| 482 |
+
}
|
| 483 |
+
} else if (!field.value.trim()) {
|
| 484 |
+
isValid = false;
|
| 485 |
+
field.classList.add('error');
|
| 486 |
+
// Show error message
|
| 487 |
+
const errorElement = document.createElement('p');
|
| 488 |
+
errorElement.className = 'error-message';
|
| 489 |
+
errorElement.textContent = 'This field is required';
|
| 490 |
+
field.after(errorElement);
|
| 491 |
+
}
|
| 492 |
+
}
|
| 493 |
+
});
|
| 494 |
+
|
| 495 |
+
// Validate email format
|
| 496 |
+
const emailField = form['email'];
|
| 497 |
+
if (emailField && emailField.value.trim()) {
|
| 498 |
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
| 499 |
+
if (!emailRegex.test(emailField.value.trim())) {
|
| 500 |
+
isValid = false;
|
| 501 |
+
emailField.classList.add('error');
|
| 502 |
+
// Show error message
|
| 503 |
+
const errorElement = document.createElement('p');
|
| 504 |
+
errorElement.className = 'error-message';
|
| 505 |
+
errorElement.textContent = 'Please enter a valid email address';
|
| 506 |
+
emailField.after(errorElement);
|
| 507 |
+
}
|
| 508 |
+
}
|
| 509 |
+
|
| 510 |
+
if (!isValid) {
|
| 511 |
+
e.preventDefault();
|
| 512 |
+
// Scroll to first error
|
| 513 |
+
const firstError = document.querySelector('.error');
|
| 514 |
+
if (firstError) {
|
| 515 |
+
firstError.scrollIntoView({
|
| 516 |
+
behavior: 'smooth',
|
| 517 |
+
block: 'center'
|
| 518 |
+
});
|
| 519 |
+
}
|
| 520 |
+
}
|
| 521 |
+
});
|
| 522 |
</script>
|
| 523 |
+
</body>
|
| 524 |
</html>
|