Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>GXS Innovation Hub - Empowering Sustain-Tech Innovators</title> | |
| <meta | |
| name="description" | |
| content="GXS Innovation Hub invests in visionary entrepreneurs and provides cutting-edge training to shape the future of sustainable innovation solutions." | |
| /> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" /> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" | |
| defer | |
| ></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: "#f0fdf4", | |
| 100: "#dcfce7", | |
| 200: "#bbf7d0", | |
| 300: "#86efac", | |
| 400: "#4ade80", | |
| 500: "#22c55e", | |
| 600: "#16a34a", | |
| 700: "#15803d", | |
| 800: "#166534", | |
| 900: "#7A1A61", | |
| }, | |
| secondary: { | |
| 50: "#eff6ff", | |
| 100: "#dbeafe", | |
| 200: "#bfdbfe", | |
| 300: "#93c5fd", | |
| 400: "#60a5fa", | |
| 500: "#3b82f6", | |
| 600: "#2563eb", | |
| 700: "#1d4ed8", | |
| 800: "#1e40af", | |
| 900: "#1e3a8a", | |
| }, | |
| accent: { | |
| 50: "#fffbeb", | |
| 100: "#fef3c7", | |
| 200: "#fde68a", | |
| 300: "#fcd34d", | |
| 400: "#fbbf24", | |
| 500: "#f59e0b", | |
| 600: "#d97706", | |
| 700: "#b45309", | |
| 800: "#92400e", | |
| 900: "#78350f", | |
| }, | |
| }, | |
| fontFamily: { | |
| sans: ["Poppins", "sans-serif"], | |
| }, | |
| animation: { | |
| "bounce-slow": "bounce 3s infinite", | |
| "pulse-slow": "pulse 4s infinite", | |
| "fade-in": "fadeIn 1.5s ease-out", | |
| "fade-in-up": "fadeInUp 1s ease-out", | |
| "fade-in-down": "fadeInDown 1s ease-out", | |
| "fade-in-left": "fadeInLeft 1s ease-out", | |
| "fade-in-right": "fadeInRight 1s ease-out", | |
| "scroll-left": "scrollLeft 30s linear infinite", | |
| "scroll-right": "scrollRight 30s linear infinite", | |
| "text-rotate": "textRotate 15s ease-in-out infinite", | |
| "zoom-in": "zoomIn 1s ease-out", | |
| "slide-up": "slideUp 0.8s ease-out", | |
| typewriter: "typewriter 2s steps(20) forwards", | |
| "chatbot-bounce": "chatbotBounce 2s infinite", | |
| }, | |
| }, | |
| }, | |
| }; | |
| // Add typing indicator animation to styles | |
| const styleElement = document.createElement("style"); | |
| styleElement.textContent = ` | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.4; transform: scale(0.9); } | |
| 50% { opacity: 1; transform: scale(1.1); } | |
| } | |
| .typing-indicator div { | |
| animation: pulse 1.5s infinite ease-in-out; | |
| } | |
| `; | |
| document.head.appendChild(styleElement); | |
| </script> | |
| <style> | |
| @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"); | |
| /* Custom animations */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| transform: translateY(30px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fadeInDown { | |
| from { | |
| transform: translateY(-30px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fadeInLeft { | |
| from { | |
| transform: translateX(-30px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fadeInRight { | |
| from { | |
| transform: translateX(30px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes bounce { | |
| 0%, | |
| 20%, | |
| 50%, | |
| 80%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 40% { | |
| transform: translateY(-20px); | |
| } | |
| 60% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| @keyframes scrollLeft { | |
| 0% { | |
| transform: translateX(0); | |
| } | |
| 100% { | |
| transform: translateX(-100%); | |
| } | |
| } | |
| @keyframes scrollRight { | |
| 0% { | |
| transform: translateX(-100%); | |
| } | |
| to { | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes textRotate { | |
| 0%, | |
| 20% { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| 25%, | |
| 45% { | |
| opacity: 0; | |
| transform: translateY(50px) scale(0.9); | |
| } | |
| 50%, | |
| 70% { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| 75%, | |
| 95% { | |
| opacity: 0; | |
| transform: translateY(50px) scale(0.9); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| @keyframes zoomIn { | |
| from { | |
| transform: scale(0.9); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideUp { | |
| from { | |
| transform: translateY(100px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes typewriter { | |
| from { | |
| width: 0; | |
| } | |
| to { | |
| width: 100%; | |
| } | |
| } | |
| @keyframes chatbotBounce { | |
| 0%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 1s ease-out; | |
| } | |
| .animate-slide-in-up { | |
| animation: slideInUp 0.8s ease-out; | |
| } | |
| .animate-bounce-slow { | |
| animation: bounce 3s infinite; | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 4s infinite; | |
| } | |
| .animate-fade-in-up { | |
| animation: fadeInUp 1s ease-out; | |
| } | |
| .animate-fade-in-down { | |
| animation: fadeInDown 1s ease-out; | |
| } | |
| .animate-fade-in-left { | |
| animation: fadeInLeft 1s ease-out; | |
| } | |
| .animate-fade-in-right { | |
| animation: fadeInRight 1s ease-out; | |
| } | |
| .animate-scroll-left { | |
| animation: scrollLeft 30s linear infinite; | |
| } | |
| .animate-scroll-right { | |
| animation: scrollRight 30s linear infinite; | |
| } | |
| .animate-text-rotate { | |
| animation: textRotate 15s ease-in-out infinite; | |
| } | |
| .animate-zoom-in { | |
| animation: zoomIn 1s ease-out; | |
| } | |
| .animate-slide-up { | |
| animation: slideUp 0.8s ease-out; | |
| } | |
| .animate-typewriter { | |
| animation: typewriter 2s steps(20) forwards; | |
| } | |
| .animate-chatbot-bounce { | |
| animation: chatbotBounce 2s infinite; | |
| } | |
| /* Carousel styles */ | |
| .carousel-item { | |
| transition: opacity 0.8s ease-in-out; | |
| } | |
| /* Smooth transitions for all elements */ | |
| * { | |
| transition: all 0.3s ease; | |
| } | |
| /* Mobile menu animation */ | |
| .mobile-menu { | |
| transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; | |
| } | |
| /* Gradient backgrounds */ | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #7a1a61 0%, #3b82f6 100%); | |
| } | |
| .gradient-bg-2 { | |
| background: linear-gradient(135deg, #16a34a 0%, #2563eb 100%); | |
| } | |
| .gradient-bg-3 { | |
| background: linear-gradient(135deg, #15803d 0%, #1d4ed8 100%); | |
| } | |
| .gradient-bg-light { | |
| background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 100%); | |
| } | |
| .gradient-bg-services { | |
| background: linear-gradient(135deg, #dcfce7 0%, #dbeafe 100%); | |
| } | |
| /* Hero section with fixed height */ | |
| .hero-section { | |
| height: 100vh; | |
| min-height: 700px; | |
| max-height: 900px; | |
| } | |
| .hero-bg-container { | |
| height: 100%; | |
| } | |
| .hero-content-container { | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| } | |
| /* Purple gradient overlay */ | |
| .gradient-overlay { | |
| background: linear-gradient( | |
| to right, | |
| rgba(122, 26, 97, 0.9) 0%, | |
| rgba(122, 26, 97, 0.7) 30%, | |
| rgba(122, 26, 97, 0.5) 60%, | |
| rgba(122, 26, 97, 0.3) 80%, | |
| rgba(122, 26, 97, 0.1) 100% | |
| ); | |
| } | |
| /* Partner logos carousel */ | |
| .partner-logos { | |
| display: flex; | |
| width: max-content; | |
| } | |
| .partner-logos:hover { | |
| animation-play-state: paused; | |
| } | |
| /* Testimonial carousel */ | |
| .testimonial-carousel { | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .testimonial-track { | |
| display: flex; | |
| transition: transform 0.8s ease-in-out; | |
| } | |
| /* Text animation for hero */ | |
| .text-rotator { | |
| position: relative; | |
| height: 80px; | |
| overflow: hidden; | |
| } | |
| .rotating-text { | |
| position: absolute; | |
| width: 100%; | |
| opacity: 0; | |
| } | |
| /* Card hover effects */ | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), | |
| 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| /* Background image section */ | |
| .bg-image-section { | |
| background-image: url("https://images.unsplash.com/photo-1500937386664-56d1dfef3854?ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80"); | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| position: relative; | |
| } | |
| .bg-image-section::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(34, 197, 94, 0.85) 0%, | |
| rgba(59, 130, 246, 0.85) 100% | |
| ); | |
| } | |
| /* Typewriter effect */ | |
| .typewriter-text { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| width: 0; | |
| } | |
| /* Card overlay */ | |
| .card-overlay { | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .overlapped-card { | |
| position: relative; | |
| margin-top: -40px; | |
| margin-right: -20px; | |
| z-index: 20; | |
| } | |
| /* Accessibility improvements */ | |
| .focus\:ring-primary-500:focus { | |
| --tw-ring-color: rgba(34, 197, 94, 0.5); | |
| box-shadow: var(--tw-ring-inset) 0 0 0 | |
| calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); | |
| } | |
| /* Skip to content link for accessibility */ | |
| .skip-to-content { | |
| position: absolute; | |
| top: -40px; | |
| left: 0; | |
| background: #000; | |
| color: white; | |
| padding: 8px; | |
| z-index: 100; | |
| transition: top 0.3s; | |
| } | |
| .skip-to-content:focus { | |
| top: 0; | |
| } | |
| /* Improved color contrast */ | |
| .text-primary-100 { | |
| color: #dcfce7; | |
| } | |
| /* Chatbot Styles */ | |
| .chatbot-container { | |
| position: fixed; | |
| bottom: 100px; | |
| right: 30px; | |
| z-index: 1000; | |
| width: 350px; | |
| height: 500px; | |
| background: white; | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| overflow: hidden; | |
| transform: translateY(20px); | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .chatbot-container.open { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| @keyframes typingPulse { | |
| 0%, | |
| 100% { | |
| opacity: 0.4; | |
| transform: scale(0.9); | |
| } | |
| 50% { | |
| opacity: 1; | |
| transform: scale(1.1); | |
| } | |
| } | |
| .chatbot-header { | |
| background: linear-gradient(135deg, #7a1a61 0%, #3b82f6 100%); | |
| color: white; | |
| padding: 15px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .chatbot-messages { | |
| height: 350px; | |
| overflow-y: auto; | |
| padding: 20px; | |
| background: #f8fafc; | |
| } | |
| .message { | |
| margin-bottom: 15px; | |
| display: flex; | |
| } | |
| .message.bot { | |
| justify-content: flex-start; | |
| } | |
| .message.user { | |
| justify-content: flex-end; | |
| } | |
| .message-content { | |
| max-width: 80%; | |
| padding: 12px 16px; | |
| border-radius: 18px; | |
| font-size: 14px; | |
| line-height: 1.4; | |
| } | |
| .message.bot .message-content, | |
| .typing-indicator { | |
| background: white; | |
| border-bottom-left-radius: 5px; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .typing-indicator { | |
| padding: 10px 15px; | |
| } | |
| .message.user .message-content { | |
| background: linear-gradient(135deg, #7a1a61 0%, #3b82f6 100%); | |
| color: white; | |
| border-bottom-right-radius: 5px; | |
| } | |
| .chatbot-input { | |
| display: flex; | |
| padding: 15px; | |
| border-top: 1px solid #e2e8f0; | |
| background: white; | |
| } | |
| .chatbot-input input { | |
| flex: 1; | |
| border: none; | |
| outline: none; | |
| padding: 10px 15px; | |
| border-radius: 25px; | |
| background: #f1f5f9; | |
| font-size: 14px; | |
| } | |
| .chatbot-input button { | |
| background: linear-gradient(135deg, #7a1a61 0%, #3b82f6 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| margin-left: 10px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .chatbot-toggle { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #7a1a61 0%, #3b82f6 100%); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| box-shadow: 0 4px 20px rgba(122, 26, 97, 0.4); | |
| z-index: 1000; | |
| animation: chatbotBounce 2s infinite; | |
| } | |
| .whatsapp-toggle { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 30px; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: #25d366; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); | |
| z-index: 1000; | |
| transition: transform 0.3s ease; | |
| } | |
| .whatsapp-toggle:hover { | |
| transform: scale(1.1); | |
| } | |
| /* Responsive improvements */ | |
| @media (max-width: 768px) { | |
| .hero-section { | |
| min-height: 600px; | |
| height: auto; | |
| max-height: none; | |
| padding-top: 100px; | |
| padding-bottom: 60px; | |
| } | |
| .hero-content-container { | |
| padding-top: 60px; | |
| padding-bottom: 60px; | |
| } | |
| .overlapped-card { | |
| margin-top: 20px; | |
| margin-right: 0; | |
| } | |
| .chatbot-container { | |
| width: 90%; | |
| height: 70%; | |
| right: 5%; | |
| bottom: 100px; | |
| } | |
| .chatbot-toggle { | |
| bottom: 20px; | |
| right: 20px; | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .whatsapp-toggle { | |
| bottom: 20px; | |
| left: 20px; | |
| width: 50px; | |
| height: 50px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Skip to content link for accessibility --> | |
| <a href="#main-content" class="skip-to-content">Skip to main content</a> | |
| <!-- Navigation --> | |
| <nav | |
| class="fixed w-full z-50 bg-white shadow-sm" | |
| x-data="{ mobileMenu: false }" | |
| > | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <img | |
| src="https://i.ibb.co/z1s4FzM/GXS-Inno.png" | |
| alt="GXS Innovation Hub Logo" | |
| class="h-12 w-auto" | |
| /> | |
| </div> | |
| <div class="hidden lg:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a | |
| href="index.html" | |
| class="text-gray-900 hover:text-secondary-600 px-3 py-2 text-sm font-medium transition-colors duration-200" | |
| >Home</a | |
| > | |
| <a | |
| href="about.html" | |
| class="text-gray-900 hover:text-secondary-600 px-3 py-2 text-sm font-medium transition-colors duration-200" | |
| >About</a | |
| > | |
| <a | |
| href="#services" | |
| class="text-gray-900 hover:text-secondary-600 px-3 py-2 text-sm font-medium transition-colors duration-200" | |
| >Services</a | |
| > | |
| <a | |
| href="#programs" | |
| class="text-gray-900 hover:text-secondary-600 px-3 py-2 text-sm font-medium transition-colors duration-200" | |
| >Programs</a | |
| > | |
| <a | |
| href="#events" | |
| class="text-gray-900 hover:text-secondary-600 px-3 py-2 text-sm font-medium transition-colors duration-200" | |
| >Events</a | |
| > | |
| <a | |
| href="#jobs" | |
| class="text-gray-900 hover:text-secondary-600 px-3 py-2 text-sm font-medium transition-colors duration-200" | |
| >News</a | |
| > | |
| <a | |
| href="#contact" | |
| class="text-gray-900 hover:text-secondary-600 px-3 py-2 text-sm font-medium transition-colors duration-200" | |
| >Contact</a | |
| > | |
| <a | |
| href="#" | |
| class="bg-secondary-600 text-white px-6 py-2 rounded-md text-sm font-medium hover:bg-secondary-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2" | |
| >Get Started</a | |
| > | |
| </div> | |
| </div> | |
| <div class="lg:hidden"> | |
| <button | |
| @click="mobileMenu = !mobileMenu" | |
| type="button" | |
| class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-secondary-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500" | |
| :aria-expanded="mobileMenu" | |
| > | |
| <span class="sr-only">Open main menu</span> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div | |
| x-show="mobileMenu" | |
| x-transition:enter="transition ease-out duration-200" | |
| x-transition:enter-start="opacity-0 -translate-y-4" | |
| x-transition:enter-end="opacity-100 translate-y-0" | |
| x-transition:leave="transition ease-in duration-150" | |
| x-transition:leave-start="opacity-100 translate-y-0" | |
| x-transition:leave-end="opacity-0 -translate-y-4" | |
| class="lg:hidden mobile-menu bg-white shadow-lg" | |
| role="dialog" | |
| aria-modal="true" | |
| > | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a | |
| href="index.html" | |
| class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-secondary-600 hover:bg-gray-100" | |
| >Home</a | |
| > | |
| <a | |
| href="about.html" | |
| class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-secondary-600 hover:bg-gray-100" | |
| >About</a | |
| > | |
| <a | |
| href="#services" | |
| class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-secondary-600 hover:bg-gray-100" | |
| >Services</a | |
| > | |
| <a | |
| href="#programs" | |
| class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-secondary-600 hover:bg-gray-100" | |
| >Programs</a | |
| > | |
| <a | |
| href="#events" | |
| class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-secondary-600 hover:bg-gray-100" | |
| >Events</a | |
| > | |
| <a | |
| href="#jobs" | |
| class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-secondary-600 hover:bg-gray-100" | |
| >News</a | |
| > | |
| <a | |
| href="#contact" | |
| class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-secondary-600 hover:bg-gray-100" | |
| >Contact</a | |
| > | |
| <a | |
| href="#" | |
| class="block px-3 py-2 rounded-md text-base font-medium bg-secondary-600 text-white hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2" | |
| >Get Started</a | |
| > | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section with Carousel - Fixed --> | |
| <section | |
| class="hero-section relative overflow-hidden" | |
| x-data="{ | |
| currentSlide: 0, | |
| slides: [ | |
| { | |
| image: 'https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80', | |
| title: 'Cultivating Innovation in', | |
| highlight: 'Sustainble Development & Technology', | |
| description: 'We invest in visionary entrepreneurs and provide cutting-edge training to shape the future of sustainable tech solutions.' | |
| }, | |
| { | |
| image: 'https://images.unsplash.com/photo-1586771107445-d3ca888129ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80', | |
| title: 'Empowering the Future of', | |
| highlight: 'Sustainable Breakthrough', | |
| description: 'Join our mission to transform sustainable development through technology, innovation, and sustainable practices.' | |
| }, | |
| { | |
| image: 'https://images.unsplash.com/photo-1492496913980-501348b61469?ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80', | |
| title: 'Growing', | |
| highlight: 'Sustain-Tech Startups', | |
| description: 'We provide funding, mentorship, and resources to help sustain-tech startups thrive and scale.' | |
| } | |
| ], | |
| init() { | |
| // Auto-advance slides | |
| setInterval(() => { | |
| this.currentSlide = (this.currentSlide + 1) % this.slides.length; | |
| }, 5000); | |
| } | |
| }" | |
| > | |
| <!-- Background Carousel with fixed container --> | |
| <div class="hero-bg-container absolute inset-0 z-0"> | |
| <template x-for="(slide, index) in slides" :key="index"> | |
| <div | |
| class="absolute inset-0 bg-cover bg-center bg-no-repeat transition-opacity duration-1000 carousel-item" | |
| :class="{ 'opacity-100 z-10': currentSlide === index, 'opacity-0 z-0': currentSlide !== index }" | |
| :style="'background-image: url(' + slide.image + ')'" | |
| :aria-hidden="currentSlide !== index ? 'true' : 'false'" | |
| > | |
| <div class="absolute inset-0 gradient-overlay"></div> | |
| </div> | |
| </template> | |
| </div> | |
| <div | |
| class="hero-content-container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10" | |
| id="main-content" | |
| tabindex="-1" | |
| > | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="text-white" data-aos="fade-right"> | |
| <template x-for="(slide, index) in slides" :key="index"> | |
| <div | |
| x-show="currentSlide === index" | |
| x-transition:enter="transition ease-in-out duration-800" | |
| x-transition:enter-start="opacity-0 transform scale-90" | |
| x-transition:enter-end="opacity-100 transform scale-100" | |
| x-transition:leave="transition ease-in duration-500" | |
| x-transition:leave-start="opacity-100 transform scale-100" | |
| x-transition:leave-end="opacity-0 transform scale-110" | |
| role="group" | |
| :aria-label="'Slide ' + (index + 1) + ' of ' + slides.length" | |
| > | |
| <h1 | |
| class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6" | |
| > | |
| <span x-text="slide.title" class="block"></span> | |
| <span | |
| class="text-accent-300 block mt-2 animate-pulse-slow" | |
| x-text="slide.highlight" | |
| ></span> | |
| </h1> | |
| <p | |
| class="text-lg md:text-xl mb-8 opacity-90 animate-fade-in-left" | |
| x-text="slide.description" | |
| ></p> | |
| </div> | |
| </template> | |
| <div class="flex flex-wrap gap-4 mt-8"> | |
| <a | |
| href="#" | |
| class="bg-white text-primary-700 px-6 py-3 md:px-8 md:py-4 rounded-md text-lg font-semibold hover:bg-gray-100 transition-colors duration-300 shadow-lg animate-bounce-slow focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-700" | |
| >Join Our Programs</a | |
| > | |
| <a | |
| href="#" | |
| class="border-2 border-white text-white px-6 py-3 md:px-8 md:py-4 rounded-md text-lg font-semibold hover:bg-white hover:text-primary-700 transition-colors duration-300 animate-fade-in-down focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-700" | |
| >Invest With Us</a | |
| > | |
| </div> | |
| </div> | |
| <div class="relative hidden md:block" data-aos="fade-left"> | |
| <!-- Redesigned cards with better alignment and animation --> | |
| <div class="flex flex-col space-y-8"> | |
| <div | |
| class="bg-white p-8 rounded-xl shadow-lg transform transition-all duration-500 hover:scale-105 card-hover card-overlay w-full" | |
| x-data="{ | |
| currentCardIndex: 0, | |
| cardContents: [ | |
| { title: 'Innovation Grants', content: 'We\'ve awarded over $2M in funding to promising sustain-tech startups this year.', icon: 'dollar-sign' }, | |
| { title: 'Startups Supported', content: '150+ innovative sustain-tech ventures accelerated through our programs.', icon: 'trending-up' }, | |
| { title: 'Global Network', content: '500+ industry experts and mentors across 15+ countries.', icon: 'globe' } | |
| ], | |
| init() { | |
| setInterval(() => { | |
| this.currentCardIndex = (this.currentCardIndex + 1) % this.cardContents.length; | |
| }, 4000); | |
| } | |
| }" | |
| > | |
| <template x-for="(card, index) in cardContents" :key="index"> | |
| <div | |
| x-show="currentCardIndex === index" | |
| x-transition:enter="transition ease-out duration-300" | |
| x-transition:enter-start="opacity-0 transform translate-y-4" | |
| x-transition:enter-end="opacity-100 transform translate-y-0" | |
| x-transition:leave="transition ease-in duration-200" | |
| x-transition:leave-start="opacity-100 transform translate-y-0" | |
| x-transition:leave-end="opacity-0 transform -translate-y-4" | |
| class="flex items-start" | |
| > | |
| <div class="bg-primary-100 p-3 rounded-lg mr-4"> | |
| <i | |
| :data-feather="card.icon" | |
| class="w-8 h-8 text-primary-600" | |
| ></i> | |
| </div> | |
| <div> | |
| <h3 | |
| class="font-bold text-secondary-600 mb-2 text-xl" | |
| x-text="card.title" | |
| ></h3> | |
| <p class="text-gray-600" x-text="card.content"></p> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| <div | |
| class="bg-accent-500 p-8 rounded-xl shadow-lg transform transition-all duration-500 hover:scale-105 card-hover overlapped-card w-11/12" | |
| x-data="{ | |
| currentCardIndex: 0, | |
| cardContents: [ | |
| { title: '5+ Years Experience', content: 'Supporting sustain-tech innovation since 2023', icon: 'award' }, | |
| { title: '2K+ Professionals', content: 'Trained through our comprehensive programs', icon: 'users' }, | |
| { title: '$25M+ Funding', content: 'Deployed to innovative sustain-tech solutions', icon: 'dollar-sign' } | |
| ], | |
| init() { | |
| setInterval(() => { | |
| this.currentCardIndex = (this.currentCardIndex + 1) % this.cardContents.length; | |
| }, 4000); | |
| } | |
| }" | |
| > | |
| <template x-for="(card, index) in cardContents" :key="index"> | |
| <div | |
| x-show="currentCardIndex === index" | |
| x-transition:enter="transition ease-out duration-300" | |
| x-transition:enter-start="opacity-0 transform translate-y-4" | |
| x-transition:enter-end="opacity-100 transform translate-y-0" | |
| x-transition:leave="transition ease-in duration-200" | |
| x-transition:leave-start="opacity-100 transform translate-Y-0" | |
| x-transition:leave-end="opacity-0 transform -translate-y-4" | |
| class="flex items-start" | |
| > | |
| <div class="bg-white bg-opacity-20 p-3 rounded-lg mr-4"> | |
| <i | |
| :data-feather="card.icon" | |
| class="w-8 h-8 text-white" | |
| ></i> | |
| </div> | |
| <div class="text-white"> | |
| <h3 | |
| class="font-bold text-xl mb-2" | |
| x-text="card.title" | |
| ></h3> | |
| <p class="text-sm" x-text="card.content"></p> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Carousel indicators --> | |
| <div | |
| class="flex justify-center mt-12 space-x-3" | |
| role="tablist" | |
| aria-label="Carousel navigation" | |
| > | |
| <template x-for="(slide, index) in slides" :key="index"> | |
| <button | |
| @click="currentSlide = index" | |
| class="w-3 h-3 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white" | |
| :class="{ 'bg-white transform scale-125': currentSlide === index, 'bg-gray-300': currentSlide !== index }" | |
| :aria-label="'Go to slide ' + (index + 1)" | |
| :aria-selected="currentSlide === index ? 'true' : 'false'" | |
| role="tab" | |
| ></button> | |
| </template> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partners Section with Carousel --> | |
| <section class="py-16 bg-white overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-gray-500 mb-10 animate-fade-in"> | |
| Trusted by leading organizations worldwide | |
| </p> | |
| <div class="relative"> | |
| <div class="overflow-hidden"> | |
| <div | |
| class="partner-logos animate-scroll-left flex space-x-12 py-4" | |
| aria-hidden="true" | |
| > | |
| <!-- Duplicate logos for seamless loop --> | |
| <img | |
| src="https://via.placeholder.com/150x60/3B82F6/FFFFFF?text=AgriTech+Inc" | |
| alt="SustainTech Inc. Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/10B981/FFFFFF?text=GreenGrowth" | |
| alt="GreenGrowth Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/6366F1/FFFFFF?text=FarmFuture" | |
| alt="ClimateFuture Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/F59E0B/FFFFFF?text=CropSolutions" | |
| alt="CropSolutions Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/EF4444/FFFFFF?text=AgriInnovate" | |
| alt="AgriInnovate Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/8B5CF6/FFFFFF?text=BioFarm" | |
| alt="BioFarm Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/EC4899/FFFFFF?text=TechGrow" | |
| alt="TechGrow Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <!-- Duplicates for seamless loop --> | |
| <img | |
| src="https://via.placeholder.com/150x60/3B82F6/FFFFFF?text=AgriTech+Inc" | |
| alt="AgriTech Inc. Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/10B981/FFFFFF?text=GreenGrowth" | |
| alt="GreenGrowth Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/6366F1/FFFFFF?text=FarmFuture" | |
| alt="FarmFuture Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/F59E0B/FFFFFF?text=CropSolutions" | |
| alt="CropSolutions Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/EF4444/FFFFFF?text=AgriInnovate" | |
| alt="AgriInnovate Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/8B5CF6/FFFFFF?text=BioFarm" | |
| alt="BioFarm Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| <img | |
| src="https://via.placeholder.com/150x60/EC4899/FFFFFF?text=TechGrow" | |
| alt="TechGrow Partner Logo" | |
| class="h-8 md:h-12 opacity-60 hover:opacity-100 transition-opacity duration-300 flex-shrink-0" | |
| loading="lazy" | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="relative" data-aos="fade-right"> | |
| <div class="z-10"> | |
| <img | |
| src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" | |
| alt="GXS Innovation Hub Team collaborating on sustain-tech innovation" | |
| class="rounded-xl shadow-lg w-full" | |
| loading="lazy" | |
| /> | |
| </div> | |
| <!-- Fixed yellow card positioning --> | |
| <div | |
| class="absolute -bottom-10 -right-6 bg-accent-500 p-6 rounded-xl shadow-lg w-2/3 z-0" | |
| data-aos="fade-up" | |
| data-aos-delay="300" | |
| > | |
| <div class="text-white"> | |
| <h3 class="font-bold text-xl mb-2 animate-fade-in-down"> | |
| 5+ Years Experience | |
| </h3> | |
| <p class="text-sm animate-fade-in"> | |
| Supporting sustain-tech innovation since 2023 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <h2 | |
| class="text-3xl md:text-4xl font-bold text-gray-900 mb-6 animate-fade-in-right" | |
| > | |
| We're Building The Future of | |
| <span class="text-primary-600 animate-pulse-slow" | |
| >Sustainable Technologies</span | |
| > | |
| </h2> | |
| <p class="text-gray-600 mb-6 animate-fade-in"> | |
| GXS Innovation Hub is at the intersection of sustainable development and technology, | |
| fostering innovation that addresses global | |
| challenges while creating economic opportunities. | |
| </p> | |
| <div class="space-y-4 mb-8"> | |
| <div class="flex items-start animate-fade-in-up"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div | |
| class="flex items-center justify-center h-6 w-6 rounded-full bg-primary-100 text-primary-600" | |
| > | |
| <i data-feather="check" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-600"> | |
| We've supported over 150 startups with funding and mentorship | |
| </p> | |
| </div> | |
| <div | |
| class="flex items-start animate-fade-in-up" | |
| style="animation-delay: 0.2s" | |
| > | |
| <div class="flex-shrink-0 mt-1"> | |
| <div | |
| class="flex items-center justify-center h-6 w-6 rounded-full bg-primary-100 text-primary-600" | |
| > | |
| <i data-feather="check" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-600"> | |
| Our training programs have graduated 2,000+ professionals | |
| </p> | |
| </div> | |
| <div | |
| class="flex items-start animate-fade-in-up" | |
| style="animation-delay: 0.4s" | |
| > | |
| <div class="flex-shrink-0 mt-1"> | |
| <div | |
| class="flex items-center justify-center h-6 w-6 rounded-full bg-primary-100 text-primary-600" | |
| > | |
| <i data-feather="check" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-600"> | |
| Global network of 500+ industry experts and mentors | |
| </p> | |
| </div> | |
| </div> | |
| <a | |
| href="#" | |
| class="inline-flex items-center text-primary-600 font-medium hover:text-primary-800 transition-colors duration-200 animate-fade-in focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-sm" | |
| > | |
| Learn more about our journey | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section with Background Image --> | |
| <section id="services" class="py-20 bg-image-section relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 | |
| class="text-3xl md:text-4xl font-bold text-white mb-4 animate-bounce-slow" | |
| > | |
| Our <span class="text-accent-300">Services</span> | |
| </h2> | |
| <p | |
| class="text-xl text-white opacity-90 max-w-3xl mx-auto animate-fade-in" | |
| > | |
| Comprehensive support for sustain-tech innovators at every stage of | |
| their journey | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Training and Workshops --> | |
| <div | |
| class="bg-white bg-opacity-90 backdrop-blur-sm p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover" | |
| data-aos="fade-up" | |
| data-aos-delay="100" | |
| > | |
| <div | |
| class="bg-primary-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6 animate-pulse-slow" | |
| > | |
| <i data-feather="book-open" class="w-8 h-8 text-primary-600"></i> | |
| </div> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Training and Workshops | |
| </h3> | |
| <p class="text-gray-600 mb-4 animate-fade-in"> | |
| Hands-on training sessions and workshops covering the latest | |
| sustain-tech innovations and sustainable practices. | |
| </p> | |
| <a | |
| href="#" | |
| class="inline-flex items-center text-primary-600 font-medium hover:text-primary-800 transition-colors duration-200 animate-fade-in focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-sm" | |
| > | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <!-- Mentorship Programs --> | |
| <div | |
| class="bg-white bg-opacity-90 backdrop-blur-sm p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover" | |
| data-aos="fade-up" | |
| data-aos-delay="200" | |
| > | |
| <div | |
| class="bg-secondary-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6 animate-pulse-slow" | |
| > | |
| <i data-feather="users" class="w-8 h-8 text-secondary-600"></i> | |
| </div> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Mentorship Programs | |
| </h3> | |
| <p class="text-gray-600 mb-4 animate-fade-in"> | |
| One-on-one guidance from industry experts to help you navigate | |
| challenges and accelerate your sustain-tech venture. | |
| </p> | |
| <a | |
| href="#" | |
| class="inline-flex items-center text-primary-600 font-medium hover:text-primary-800 transition-colors duration-200 animate-fade-in focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-sm" | |
| > | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <!-- Startup Support --> | |
| <div | |
| class="bg-white bg-opacity-90 backdrop-blur-sm p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover" | |
| data-aos="fade-up" | |
| data-aos-delay="300" | |
| > | |
| <div | |
| class="bg-accent-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6 animate-pulse-slow" | |
| > | |
| <i data-feather="trending-up" class="w-8 h-8 text-accent-600"></i> | |
| </div> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Startup Support | |
| </h3> | |
| <p class="text-gray-600 mb-4 animate-fade-in"> | |
| Comprehensive support for sustain-tech startups including funding | |
| opportunities, incubation, and access to resources. | |
| </p> | |
| <a | |
| href="#" | |
| class="inline-flex items-center text-primary-600 font-medium hover:text-primary-800 transition-colors duration-200 animate-fade-in focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-sm" | |
| > | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <!-- Community Engagement --> | |
| <div | |
| class="bg-white bg-opacity-90 backdrop-blur-sm p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover" | |
| data-aos="fade-up" | |
| data-aos-delay="400" | |
| > | |
| <div | |
| class="bg-primary-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6 animate-pulse-slow" | |
| > | |
| <i data-feather="heart" class="w-8 h-8 text-primary-600"></i> | |
| </div> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Community Engagement | |
| </h3> | |
| <p class="text-gray-600 mb-4 animate-fade-in"> | |
| Building a vibrant community of change-makers, technologists, and | |
| entrepreneurs to share knowledge and collaborate. | |
| </p> | |
| <a | |
| href="#" | |
| class="inline-flex items-center text-primary-600 font-medium hover:text-primary-800 transition-colors duration-200 animate-fade-in focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-sm" | |
| > | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <!-- Business Consultancy --> | |
| <div | |
| class="bg-white bg-opacity-90 backdrop-blur-sm p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover" | |
| data-aos="fade-up" | |
| data-aos-delay="500" | |
| > | |
| <div | |
| class="bg-secondary-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6 animate-pulse-slow" | |
| > | |
| <i | |
| data-feather="briefcase" | |
| class="w-8 h-8 text-secondary-600" | |
| ></i> | |
| </div> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Business Consultancy | |
| </h3> | |
| <p class="text-gray-600 mb-4 animate-fade-in"> | |
| Expert advice on business strategy, market entry, scaling | |
| operations, and sustainable business practices. | |
| </p> | |
| <a | |
| href="#" | |
| class="inline-flex items-center text-primary-600 font-medium hover:text-primary-800 transition-colors duration-200 animate-fade-in focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-sm" | |
| > | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <!-- Multimedia Services --> | |
| <div | |
| class="bg-white bg-opacity-90 backdrop-blur-sm p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover" | |
| data-aos="fade-up" | |
| data-aos-delay="600" | |
| > | |
| <div | |
| class="bg-accent-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6 animate-pulse-slow" | |
| > | |
| <i data-feather="video" class="w-8 h-8 text-accent-600"></i> | |
| </div> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Multimedia Services | |
| </h3> | |
| <p class="text-gray-600 mb-4 animate-fade-in"> | |
| Professional photography, videography, and content creation | |
| services to showcase your sustainable innovations. | |
| </p> | |
| <a | |
| href="#" | |
| class="inline-flex items-center text-primary-600 font-medium hover:text-primary-800 transition-colors duration-200 animate-fade-in focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-sm" | |
| > | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Programs Section --> | |
| <section id="programs" class="py-20 gradient-bg-light"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 | |
| class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 animate-bounce-slow" | |
| > | |
| Our <span class="text-primary-600">Programs</span> | |
| </h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto animate-fade-in"> | |
| Structured pathways to accelerate your sustain-tech innovation journey | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div | |
| class="bg-white rounded-xl overflow-hidden shadow-lg" | |
| data-aos="fade-up" | |
| data-aos-delay="100" | |
| > | |
| <div class="h-48 bg-primary-100 flex items-center justify-center"> | |
| <i | |
| data-feather="zap" | |
| class="w-16 h-16 text-primary-600 animate-pulse-slow" | |
| ></i> | |
| </div> | |
| <div class="p-8"> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Accelerator Program | |
| </h3> | |
| <p class="text-gray-600 mb-6 animate-fade-in"> | |
| 6-month intensive program for early-stage startups with funding, | |
| mentorship, and market access. | |
| </p> | |
| <div | |
| class="flex items-center text-sm text-gray-500 mb-6 animate-fade-in" | |
| > | |
| <i data-feather="clock" class="w-4 h-4 mr-2"></i> | |
| <span>6 months | $50K funding</span> | |
| </div> | |
| <a | |
| href="#" | |
| class="inline-flex items-center justify-center w-full bg-primary-600 text-white px-6 py-3 rounded-md text-sm font-medium hover:bg-primary-700 transition-colors duration-300 animate-fade-in-up focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2" | |
| >Apply Now</a | |
| > | |
| </div> | |
| </div> | |
| <div | |
| class="bg-white rounded-xl overflow-hidden shadow-lg" | |
| data-aos="fade-up" | |
| data-aos-delay="200" | |
| > | |
| <div class="h-48 bg-secondary-100 flex items-center justify-center"> | |
| <i | |
| data-feather="book-open" | |
| class="w-16 h-16 text-secondary-600 animate-pulse-slow" | |
| ></i> | |
| </div> | |
| <div class="p-8"> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Professional Training | |
| </h3> | |
| <p class="text-gray-600 mb-6 animate-fade-in"> | |
| 12-week courses in impact business, sustain-tech | |
| entrepreneurship, and sustainable practices. | |
| </p> | |
| <div | |
| class="flex items-center text-sm text-gray-500 mb-6 animate-fade-in" | |
| > | |
| <i data-feather="clock" class="w-4 h-4 mr-2"></i> | |
| <span>12 weeks | Online/On-site</span> | |
| </div> | |
| <a | |
| href="#" | |
| class="inline-flex items-center justify-center w-full bg-white border border-primary-600 text-primary-600 px-6 py-3 rounded-md text-sm font-medium hover:bg-primary-50 transition-colors duration-300 animate-fade-in-up focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2" | |
| >View Courses</a | |
| > | |
| </div> | |
| </div> | |
| <div | |
| class="bg-white rounded-xl overflow-hidden shadow-lg" | |
| data-aos="fade-up" | |
| data-aos-delay="300" | |
| > | |
| <div class="h-48 bg-accent-100 flex items-center justify-center"> | |
| <i | |
| data-feather="globe" | |
| class="w-16 h-16 text-accent-600 animate-pulse-slow" | |
| ></i> | |
| </div> | |
| <div class="p-8"> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Innovation Challenges | |
| </h3> | |
| <p class="text-gray-600 mb-6 animate-fade-in"> | |
| Annual competitions with cash prizes and incubation | |
| opportunities for solving critical agricultural problems. | |
| </p> | |
| <div | |
| class="flex items-center text-sm text-gray-500 mb-6 animate-fade-in" | |
| > | |
| <i data-feather="clock" class="w-4 h-4 mr-2"></i> | |
| <span>Annual | $100K in prizes</span> | |
| </div> | |
| <a | |
| href="#" | |
| class="inline-flex items-center justify-center w-full bg-primary-600 text-white px-6 py-3 rounded-md text-sm font-medium hover:bg-primary-700 transition-colors duration-300 animate-fade-in-up focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2" | |
| >Learn More</a | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Events Preview Section --> | |
| <section id="events" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 | |
| class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 animate-bounce-slow" | |
| > | |
| Upcoming <span class="text-primary-600">Events</span> | |
| </h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto animate-fade-in"> | |
| Join our community events, workshops, and conferences | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div | |
| class="bg-gray-50 rounded-xl overflow-hidden shadow-lg" | |
| data-aos="fade-up" | |
| data-aos-delay="100" | |
| > | |
| <img | |
| src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" | |
| alt="Agri-Tech Conference with attendees listening to a speaker" | |
| class="w-full h-48 object-cover" | |
| loading="lazy" | |
| /> | |
| <div class="p-6"> | |
| <div class="text-sm text-primary-600 mb-2 animate-fade-in"> | |
| June 15, 2027 | Virtual | |
| </div> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Sustain-Tech Innovation Summit | |
| </h3> | |
| <p class="text-gray-600 mb-4 animate-fade-in"> | |
| Join industry leaders discussing the future of sustainable | |
| technology and sustainable practices. | |
| </p> | |
| <a | |
| href="#" | |
| class="text-primary-600 font-medium hover:text-primary-800 transition-colors duration-200 animate-fade-in focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-sm" | |
| >Learn more →</a | |
| > | |
| </div> | |
| </div> | |
| <div | |
| class="bg-gray-50 rounded-xl overflow-hidden shadow-lg" | |
| data-aos="fade-up" | |
| data-aos-delay="200" | |
| > | |
| <img | |
| src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" | |
| alt="Workshop participants learning about precision agriculture" | |
| class="w-full h-48 object-cover" | |
| loading="lazy" | |
| /> | |
| <div class="p-6"> | |
| <div class="text-sm text-primary-600 mb-2 animate-fade-in"> | |
| July 8, 2026 | Danang | |
| </div> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Precision Agriculture Workshop | |
| </h3> | |
| <p class="text-gray-600 mb-4 animate-fade-in"> | |
| Hands-on training on using drones, sensors, and data analytics | |
| for precision farming. | |
| </p> | |
| <a | |
| href="#" | |
| class="text-primary-600 font-medium hover:text-primary-800 transition-colors duration-200 animate-fade-in focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-sm" | |
| >Learn more →</a | |
| > | |
| </div> | |
| </div> | |
| <div | |
| class="bg-gray-50 rounded-xl overflow-hidden shadow-lg" | |
| data-aos="fade-up" | |
| data-aos-delay="300" | |
| > | |
| <img | |
| src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" | |
| alt="Networking event with professionals discussing agri-tech investments" | |
| class="w-full h-48 object-cover" | |
| loading="lazy" | |
| /> | |
| <div class="p-6"> | |
| <div class="text-sm text-primary-600 mb-2 animate-fade-in"> | |
| August 22, 2024 | Can Tho | |
| </div> | |
| <h3 | |
| class="text-xl font-bold text-gray-900 mb-3 animate-fade-in-right" | |
| > | |
| Agri-Tech Investors Meetup | |
| </h3> | |
| <p class="text-gray-600 mb-4 animate-fade-in"> | |
| Connect with investors interested in funding innovative | |
| sustainable technology startups. | |
| </p> | |
| <a | |
| href="#" | |
| class="text-primary-600 font-medium hover:text-primary-800 transition-colors duration-200 animate-fade-in focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-sm" | |
| >Learn more →</a | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a | |
| href="#" | |
| class="inline-flex items-center justify-center bg-primary-600 text-white px-8 py-3 rounded-md text-lg font-medium hover:bg-primary-700 transition-colors duration-300 animate-fade-in-up focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2" | |
| > | |
| View All Events | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-20 gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-6" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="text-4xl font-bold mb-2 animate-bounce-slow">150+</div> | |
| <div class="text-primary-100 animate-fade-in"> | |
| Startups Supported | |
| </div> | |
| </div> | |
| <div class="p-6" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-4xl font-bold mb-2 animate-bounce-slow">$25M+</div> | |
| <div class="text-primary-100 animate-fade-in">Funding Deployed</div> | |
| </div> | |
| <div class="p-6" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="text-4xl font-bold mb-2 animate-bounce-slow">2K+</div> | |
| <div class="text-primary-100 animate-fade-in"> | |
| Trained Professionals | |
| </div> | |
| </div> | |
| <div class="p-6" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="text-4xl font-bold mb-2 animate-bounce-slow">15+</div> | |
| <div class="text-primary-100 animate-fade-in"> | |
| Countries Reached | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section with Carousel --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 | |
| class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 animate-bounce-slow" | |
| > | |
| Success <span class="text-primary-600">Stories</span> | |
| </h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto animate-fade-in"> | |
| Hear from innovators we've supported on their journey | |
| </p> | |
| </div> | |
| <div | |
| class="testimonial-carousel" | |
| x-data="{ | |
| currentTestimonial: 0, | |
| testimonials: [ | |
| { | |
| name: 'Sarah Johnson', | |
| role: 'Founder, AgriSense', | |
| image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80', | |
| content: 'GXS Innovation Hub\'s accelerator program transformed our IoT soil monitoring solution from a concept to a commercially viable product. Their network connected us with our first major customers.', | |
| rating: 5 | |
| }, | |
| { | |
| name: 'Michael Chen', | |
| role: 'CEO, GreenHarvest', | |
| image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80', | |
| content: 'The professional training program gave me the skills and confidence to launch my vertical farming startup. The mentorship continues to be invaluable as we scale operations.', | |
| rating: 5 | |
| }, | |
| { | |
| name: 'Aisha Okonjo', | |
| role: 'Director, FarmTech Solutions', | |
| image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80', | |
| content: 'The funding and technical support from GXS Innovation Hub enabled us to expand our operations to three new regions. Their guidance on sustainable practices was particularly valuable.', | |
| rating: 5 | |
| }, | |
| { | |
| name: 'David Kimani', | |
| role: 'CTO, CropMetrics', | |
| image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80', | |
| content: 'As a tech founder with limited agricultural experience, the mentorship program connected me with industry experts who helped shape our product to meet real farmer needs.', | |
| rating: 5 | |
| }, | |
| { | |
| name: 'Maria Rodriguez', | |
| role: 'Founder, EcoGrow', | |
| image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80', | |
| content: 'The community events and networking opportunities have been incredible. We found our lead engineer and two major clients through TECHFARM Hub connections.', | |
| rating: 5 | |
| }, | |
| { | |
| name: 'James Okafor', | |
| role: 'CEO, AgriData Analytics', | |
| image: 'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80', | |
| content: 'The innovation challenge not only provided funding but also validation for our approach. The feedback from judges helped us refine our business model significantly.', | |
| rating: 5 | |
| } | |
| ], | |
| init() { | |
| setInterval(() => { | |
| this.currentTestimonial = (this.currentTestimonial + 1) % this.testimonials.length; | |
| }, 5000); | |
| } | |
| }" | |
| > | |
| <div class="relative overflow-hidden"> | |
| <div | |
| class="flex transition-transform duration-500 ease-in-out" | |
| :style="'transform: translateX(-' + (currentTestimonial * 100) + '%)'" | |
| > | |
| <template | |
| x-for="(testimonial, index) in testimonials" | |
| :key="index" | |
| > | |
| <div class="w-full flex-shrink-0 px-4"> | |
| <div class="bg-gray-50 p-8 rounded-xl h-full"> | |
| <div class="flex items-center mb-6"> | |
| <img | |
| :src="testimonial.image" | |
| :alt="testimonial.name" | |
| class="w-16 h-16 rounded-full object-cover" | |
| loading="lazy" | |
| /> | |
| <div class="ml-4"> | |
| <h4 | |
| class="font-bold text-gray-900" | |
| x-text="testimonial.name" | |
| ></h4> | |
| <p | |
| class="text-primary-600" | |
| x-text="testimonial.role" | |
| ></p> | |
| </div> | |
| </div> | |
| <p | |
| class="text-gray-600 italic mb-6" | |
| x-text="testimonial.content" | |
| ></p> | |
| <div class="flex text-accent-400"> | |
| <template x-for="i in testimonial.rating"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </template> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| </div> | |
| <div | |
| class="flex justify-center mt-8 space-x-2" | |
| role="tablist" | |
| aria-label="Testimonial navigation" | |
| > | |
| <template x-for="(testimonial, index) in testimonials" :key="index"> | |
| <button | |
| @click="currentTestimonial = index" | |
| class="w-3 h-3 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500" | |
| :class="{ 'bg-primary-600 transform scale-125': currentTestimonial === index, 'bg-gray-300': currentTestimonial !== index }" | |
| :aria-label="'Go to testimonial ' + (index + 1)" | |
| :aria-selected="currentTestimonial === index ? 'true' : 'false'" | |
| role="tab" | |
| ></button> | |
| </template> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 gradient-bg-2"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 | |
| class="text-3xl md:text-4xl font-bold text-white mb-6 animate-bounce-slow" | |
| data-aos="fade-up" | |
| > | |
| Ready to Grow Your Sustain-Tech Venture? | |
| </h2> | |
| <p | |
| class="text-xl text-white opacity-90 max-w-3xl mx-auto mb-10 animate-fade-in" | |
| data-aos="fade-up" | |
| data-aos-delay="100" | |
| > | |
| Join our community of innovators shaping the future of sustainable | |
| technologies. | |
| </p> | |
| <div | |
| class="flex flex-wrap justify-center gap-4" | |
| data-aos="fade-up" | |
| data-aos-delay="200" | |
| > | |
| <a | |
| href="#" | |
| class="bg-white text-primary-700 px-8 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 transition-colors duration-300 animate-fade-in-up focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-secondary-600" | |
| >Apply for Funding</a | |
| > | |
| <a | |
| href="#" | |
| class="border-2 border-white text-white px-8 py-3 rounded-md text-lg font-semibold hover:bg-white hover:text-primary-700 transition-colors duration-300 animate-fade-in-up focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-secondary-600" | |
| >Explore Programs</a | |
| > | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <h2 | |
| class="text-3xl md:text-4xl font-bold text-gray-900 mb-6 animate-fade-in-right" | |
| > | |
| Get In <span class="text-primary-600">Touch</span> | |
| </h2> | |
| <p class="text-gray-600 mb-8 animate-fade-in"> | |
| Have questions about our programs or investment opportunities? Our | |
| team is here to help guide you. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start animate-fade-in-up"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div | |
| class="flex items-center justify-center h-10 w-10 rounded-full bg-primary-100 text-primary-600" | |
| > | |
| <i data-feather="mail" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Email Us</h3> | |
| <p class="text-gray-600">contact@p4cng.biz.vn</p> | |
| </div> | |
| </div> | |
| <div | |
| class="flex items-start animate-fade-in-up" | |
| style="animation-delay: 0.2s" | |
| > | |
| <div class="flex-shrink-0 mt-1"> | |
| <div | |
| class="flex items-center justify-center h-10 w-10 rounded-full bg-primary-100 text-primary-600" | |
| > | |
| <i data-feather="phone" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Call Us</h3> | |
| <p class="text-gray-600">+84 376 076054</p> | |
| </div> | |
| </div> | |
| <div | |
| class="flex items-start animate-fade-in-up" | |
| style="animation-delay: 0.4s" | |
| > | |
| <div class="flex-shrink-0 mt-1"> | |
| <div | |
| class="flex items-center justify-center h-10 w-10 rounded-full bg-primary-100 text-primary-600" | |
| > | |
| <i data-feather="map-pin" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Visit Us</h3> | |
| <p class="text-gray-600"> | |
| Ho Chi Minh City | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <form class="bg-gray-50 p-8 rounded-xl shadow-md"> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div class="animate-fade-in-up"> | |
| <label | |
| for="name" | |
| class="block text-sm font-medium text-gray-700 mb-1" | |
| >Full Name</label | |
| > | |
| <input | |
| type="text" | |
| id="name" | |
| class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200" | |
| required | |
| /> | |
| </div> | |
| <div class="animate-fade-in-up" style="animation-delay: 0.1s"> | |
| <label | |
| for="email" | |
| class="block text-sm font-medium text-gray-700 mb-1" | |
| >Email Address</label | |
| > | |
| <input | |
| type="email" | |
| id="email" | |
| class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200" | |
| required | |
| /> | |
| </div> | |
| <div class="animate-fade-in-up" style="animation-delay: 0.2s"> | |
| <label | |
| for="subject" | |
| class="block text-sm font-medium text-gray-700 mb-1" | |
| >Subject</label | |
| > | |
| <select | |
| id="subject" | |
| class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200" | |
| > | |
| <option>General Inquiry</option> | |
| <option>Investment Opportunities</option> | |
| <option>Training Programs</option> | |
| <option>Partnerships</option> | |
| </select> | |
| </div> | |
| <div class="animate-fade-in-up" style="animation-delay: 0.3s"> | |
| <label | |
| for="message" | |
| class="block text-sm font-medium text-gray-700 mb-1" | |
| >Message</label | |
| > | |
| <textarea | |
| id="message" | |
| rows="4" | |
| class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200" | |
| required | |
| ></textarea> | |
| </div> | |
| <div class="animate-fade-in-up" style="animation-delay: 0.4s"> | |
| <button | |
| type="submit" | |
| class="w-full bg-primary-600 text-white px-6 py-3 rounded-md text-lg font-medium hover:bg-primary-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2" | |
| > | |
| Send Message | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-12 mb-12"> | |
| <div> | |
| <img | |
| src="https://i.ibb.co/z1s4FzM/GXS-Inno.png" | |
| alt="GXS Innovation Hub Logo" | |
| class="h-10 mb-6" | |
| /> | |
| <p class="text-gray-400 mb-6"> | |
| Empowering the next generation of agri-tech innovators through | |
| investment, education, and community. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 rounded-full p-1" | |
| aria-label="Twitter" | |
| > | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 rounded-full p-1" | |
| aria-label="LinkedIn" | |
| > | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 rounded-full p-1" | |
| aria-label="Facebook" | |
| > | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 rounded-full p-1" | |
| aria-label="Instagram" | |
| > | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-6">Quick Links</h4> | |
| <ul class="space-y-3"> | |
| <li> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Home</a | |
| > | |
| </li> | |
| <li> | |
| <a | |
| href="#about" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >About Us</a | |
| > | |
| </li> | |
| <li> | |
| <a | |
| href="#services" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Services</a | |
| > | |
| </li> | |
| <li> | |
| <a | |
| href="#programs" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Programs</a | |
| > | |
| </li> | |
| <li> | |
| <a | |
| href="#events" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Events</a | |
| > | |
| </li> | |
| <li> | |
| <a | |
| href="#jobs" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >News</a | |
| > | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-6">Programs</h4> | |
| <ul class="space-y-3"> | |
| <li> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Accelerator</a | |
| > | |
| </li> | |
| <li> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Professional Training</a | |
| > | |
| </li> | |
| <li> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Innovation Challenges</a | |
| > | |
| </li> | |
| <li> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Mentorship</a | |
| > | |
| </li> | |
| <li> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Research Grants</a | |
| > | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-6">Newsletter</h4> | |
| <p class="text-gray-400 mb-4"> | |
| Subscribe to our newsletter for the latest updates and | |
| opportunities. | |
| </p> | |
| <form class="flex"> | |
| <input | |
| type="email" | |
| placeholder="Your email" | |
| class="px-4 py-2 rounded-l-md w-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500" | |
| aria-label="Email for newsletter subscription" | |
| required | |
| /> | |
| <button | |
| type="submit" | |
| class="bg-primary-600 text-white px-4 py-2 rounded-r-md hover:bg-primary-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2" | |
| aria-label="Subscribe to newsletter" | |
| > | |
| <i data-feather="send" class="w-5 h-5"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div | |
| class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center" | |
| > | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0"> | |
| © 2025-2035 GXS Innovation Hub. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white text-sm transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Privacy Policy</a | |
| > | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white text-sm transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Terms of Service</a | |
| > | |
| <a | |
| href="#" | |
| class="text-gray-400 hover:text-white text-sm transition-colors duration-300 focus:outline-none focus:underline rounded-sm" | |
| >Cookies</a | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Chatbot Toggle --> | |
| <div | |
| class="chatbot-toggle" | |
| x-data | |
| @click="$store.chatbot.open = !$store.chatbot.open" | |
| > | |
| <i data-feather="message-circle" class="w-6 h-6"></i> | |
| </div> | |
| <!-- WhatsApp Toggle --> | |
| <div | |
| class="whatsapp-toggle" | |
| @click="window.open('https://wa.me/1234567890', '_blank')" | |
| > | |
| <i data-feather="message-circle" class="w-6 h-6"></i> | |
| </div> | |
| <!-- Chatbot Container --> | |
| <div | |
| class="chatbot-container" | |
| x-data="{ | |
| open: false, | |
| isTyping: false, | |
| messages: [ | |
| { text: 'Hello! I\\'m the GXS Innovation Hub assistant. How can I help you today?', sender: 'bot' } | |
| ], | |
| newMessage: '', | |
| knowledgeBase: { | |
| greetings: { | |
| responses: [ | |
| 'Hello! Welcome to GXS Innovation Hub. How can I assist you today?', | |
| 'Hi there! How can I help you with agri-tech innovation today?', | |
| 'Greetings! What would you like to know about GXS Innovation Hub?' | |
| ], | |
| keywords: ['hello', 'hi', 'hey', 'greetings'] | |
| }, | |
| programs: { | |
| responses: [ | |
| 'We offer several programs: Accelerator (6 months, $50K funding), Professional Training (12-week courses), and Innovation Challenges (annual, $100K prizes).', | |
| 'Our programs include the Accelerator Program for startups, Professional Training courses, and annual Innovation Challenges.', | |
| 'GXS Innovation Hub provides comprehensive programs to support agri-tech innovators at every stage.' | |
| ], | |
| keywords: ['program', 'training', 'course', 'accelerator', 'challenge'] | |
| }, | |
| funding: { | |
| responses: [ | |
| 'We provide various funding opportunities including grants, investments, and prize money totaling over $25M deployed.', | |
| 'Funding options include startup investments, innovation challenge prizes, and research grants.', | |
| 'GXS Innovation Hub has supported 150+ startups with funding opportunities.' | |
| ], | |
| keywords: ['funding', 'investment', 'grant', 'money', 'capital'] | |
| }, | |
| events: { | |
| responses: [ | |
| 'Upcoming events: Sustain-Tech Innovation Summit (June 15), Precision Agriculture Workshop (July 8), and Investor Meetup (August 22).', | |
| 'We host regular events including workshops, conferences, and networking opportunities.', | |
| 'Check our Events section for details on upcoming activities and registration.' | |
| ], | |
| keywords: ['event', 'workshop', 'conference', 'summit', 'meetup'] | |
| }, | |
| contact: { | |
| responses: [ | |
| 'Contact us at contact@p4cng.biz.vn or 0376076054. Our office is at Ho Chi Minh City.', | |
| 'You can reach our team via email (contact@p4cng.biz.vn) or phone (0376076054).', | |
| 'For inquiries, email contact@p4cng.biz.vn or visit our office in HCMC.' | |
| ], | |
| keywords: ['contact', 'email', 'phone', 'address', 'location'] | |
| }, | |
| services: { | |
| responses: [ | |
| 'Services: training & workshops, mentorship, startup support, community engagement, business consultancy, and multimedia services.', | |
| 'We offer comprehensive support including funding, training, mentorship, and business services.', | |
| 'Our services range from technical training to business development support.' | |
| ], | |
| keywords: ['service', 'support', 'help', 'offer', 'provide'] | |
| }, | |
| about: { | |
| responses: [ | |
| 'GXS Innovation Hub invests in sustain-tech innovators and provides training since 2018, supporting 150+ startups.', | |
| 'We\'re an sustain-tech innovation hub focused on sustainable agriculture solutions through technology.', | |
| 'Our mission is to empower the future of agriculture through technology and innovation.' | |
| ], | |
| keywords: ['about', 'who are you', 'mission', 'vision', 'purpose'] | |
| }, | |
| thanks: { | |
| responses: [ | |
| 'You\'re welcome! Happy to help. Anything else you\'d like to know?', | |
| 'Glad I could assist! Feel free to ask more questions.', | |
| 'My pleasure! Let me know if you need anything else.' | |
| ], | |
| keywords: ['thank', 'thanks', 'appreciate'] | |
| }, | |
| default: { | |
| responses: [ | |
| 'I can help with info about programs, services, events, and funding. Could you clarify your question?', | |
| 'I specialize in GXS Innovation Hub information. What would you like to know about?', | |
| 'Let me connect you with the right information. What specifically are you asking about?' | |
| ] | |
| } | |
| }, | |
| sendMessage() { | |
| if (this.newMessage.trim() === '') return; | |
| // Add user message | |
| this.messages.push({ text: this.newMessage, sender: 'user' }); | |
| this.newMessage = ''; | |
| this.isTyping = true; | |
| // Generate bot response after delay to simulate typing | |
| setTimeout(() => { | |
| let response = this.generateResponse(this.newMessage.toLowerCase()); | |
| this.messages.push({ text: response, sender: 'bot' }); | |
| this.isTyping = false; | |
| // Scroll to bottom | |
| this.$nextTick(() => { | |
| const messagesContainer = this.$refs.messages; | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| }); | |
| }, 1500 + Math.random() * 1000); // Random delay between 1.5-2.5s | |
| }, | |
| generateResponse(message) { | |
| // Check message against knowledge base | |
| for (const category in this.knowledgeBase) { | |
| if (category === 'default') continue; | |
| const entry = this.knowledgeBase[category]; | |
| if (entry.keywords.some(keyword => message.includes(keyword))) { | |
| const responses = entry.responses; | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| } | |
| // Default response if no keywords matched | |
| const defaultResponses = this.knowledgeBase.default.responses; | |
| return defaultResponses[Math.floor(Math.random() * defaultResponses.length)]; | |
| } | |
| }" | |
| x-show="$store.chatbot.open" | |
| x-transition:enter="transition ease-out duration-300" | |
| x-transition:enter-start="opacity-0 transform scale-95" | |
| x-transition:enter-end="opacity-100 transform scale-100" | |
| x-transition:leave="transition ease-in duration-200" | |
| x-transition:leave-start="opacity-100 transform scale-100" | |
| x-transition:leave-end="opacity-0 transform scale-95" | |
| :class="{ 'open': $store.chatbot.open }" | |
| > | |
| <div class="chatbot-header"> | |
| <h3 class="font-semibold">GXS Innovation Hub Assistant</h3> | |
| <button | |
| @click="$store.chatbot.open = false" | |
| class="text-white hover:text-gray-200" | |
| > | |
| <i data-feather="x" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="chatbot-messages" x-ref="messages"> | |
| <template x-for="(message, index) in messages" :key="index"> | |
| <div class="message" :class="message.sender"> | |
| <div class="message-content" x-text="message.text"></div> | |
| </div> | |
| </template> | |
| <div x-show="isTyping" class="message bot"> | |
| <div class="message-content"> | |
| <div class="typing-indicator flex items-center space-x-1"> | |
| <div | |
| class="w-2 h-2 bg-gray-400 rounded-full animate-pulse" | |
| style="animation-delay: 0ms" | |
| ></div> | |
| <div | |
| class="w-2 h-2 bg-gray-400 rounded-full animate-pulse" | |
| style="animation-delay: 300ms" | |
| ></div> | |
| <div | |
| class="w-2 h-2 bg-gray-400 rounded-full animate-pulse" | |
| style="animation-delay: 600ms" | |
| ></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chatbot-input"> | |
| <input | |
| type="text" | |
| placeholder="Type your message..." | |
| x-model="newMessage" | |
| @keyup.enter="sendMessage" | |
| /> | |
| <button @click="sendMessage"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Alpine.js store for chatbot state | |
| document.addEventListener("alpine:init", () => { | |
| Alpine.store("chatbot", { | |
| open: false, | |
| }); | |
| }); | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| once: true, | |
| offset: 100, | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Add loading lazy to all images for better performance | |
| document.addEventListener("DOMContentLoaded", function () { | |
| const images = document.querySelectorAll("img"); | |
| images.forEach((img) => { | |
| if (!img.hasAttribute("loading")) { | |
| img.setAttribute("loading", "lazy"); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |