| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GMW Tech Group - Innovating the Future of Intelligent Systems</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#0a192f', |
| secondary: '#172a45', |
| accent: '#64ffda', |
| textPrimary: '#ccd6f6', |
| textSecondary: '#8892b0' |
| }, |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| html { |
| scroll-behavior: smooth; |
| } |
| .hero-bg { |
| background: linear-gradient(rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.9)), |
| url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| .tech-grid { |
| background-image: |
| radial-gradient(circle at 25% 25%, rgba(100, 255, 218, 0.1) 0%, transparent 50%), |
| radial-gradient(circle at 75% 75%, rgba(100, 255, 218, 0.1) 0%, transparent 50%); |
| } |
| .service-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 25px -5px rgba(100, 255, 218, 0.1), 0 10px 10px -5px rgba(100, 255, 218, 0.04); |
| } |
| .animate-float { |
| animation: float 6s ease-in-out infinite; |
| } |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| .animate-float-delay { |
| animation: float 6s ease-in-out infinite 2s; |
| } |
| .parallax { |
| background-attachment: fixed; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: cover; |
| } |
| .chatbot-container { |
| transform: translateY(100%); |
| transition: transform 0.3s ease; |
| } |
| .chatbot-container.open { |
| transform: translateY(0); |
| } |
| .testimonial-card { |
| opacity: 0; |
| transition: opacity 0.5s ease; |
| } |
| .testimonial-card.active { |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-primary text-textPrimary"> |
| |
| <nav class="fixed w-full bg-primary bg-opacity-90 z-50 shadow-lg"> |
| <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"> |
| <span class="text-accent text-2xl font-bold">GMW</span> |
| <span class="text-white ml-1 text-2xl font-bold">Tech Group</span> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-baseline space-x-8"> |
| <a href="#home" class="text-accent px-3 py-2 text-sm font-medium">Home</a> |
| <a href="#about" class="text-textPrimary hover:text-accent px-3 py-2 text-sm font-medium">About</a> |
| <a href="#services" class="text-textPrimary hover:text-accent px-3 py-2 text-sm font-medium">Services</a> |
| <a href="#portfolio" class="text-textPrimary hover:text-accent px-3 py-2 text-sm font-medium">Portfolio</a> |
| <a href="#blog" class="text-textPrimary hover:text-accent px-3 py-2 text-sm font-medium">Insights</a> |
| <a href="#contact" class="text-textPrimary hover:text-accent px-3 py-2 text-sm font-medium">Contact</a> |
| </div> |
| </div> |
| <div class="md:hidden"> |
| <button id="mobile-menu-button" class="text-textPrimary hover:text-accent focus:outline-none"> |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-secondary"> |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="#home" class="text-accent block px-3 py-2 text-base font-medium">Home</a> |
| <a href="#about" class="text-textPrimary hover:text-accent block px-3 py-2 text-base font-medium">About</a> |
| <a href="#services" class="text-textPrimary hover:text-accent block px-3 py-2 text-base font-medium">Services</a> |
| <a href="#portfolio" class="text-textPrimary hover:text-accent block px-3 py-2 text-base font-medium">Portfolio</a> |
| <a href="#blog" class="text-textPrimary hover:text-accent block px-3 py-2 text-base font-medium">Insights</a> |
| <a href="#contact" class="text-textPrimary hover:text-accent block px-3 py-2 text-base font-medium">Contact</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="hero-bg min-h-screen flex items-center justify-center pt-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Innovating the Future of <span class="text-accent">Intelligent Systems</span></h1> |
| <p class="text-lg text-textSecondary mb-8">GMW Tech Group is at the forefront of technological innovation, delivering cutting-edge solutions in AI, IoT, ML, and Blockchain to transform businesses and industries.</p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#contact" class="bg-accent text-primary px-8 py-3 rounded font-medium hover:bg-opacity-90 transition duration-300">Get Started</a> |
| <a href="#services" class="border-2 border-accent text-accent px-8 py-3 rounded font-medium hover:bg-accent hover:bg-opacity-10 transition duration-300">Our Services</a> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="tech-grid p-8 rounded-lg bg-secondary bg-opacity-50 backdrop-blur-sm"> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="animate-float bg-primary p-6 rounded-lg shadow-lg"> |
| <i class="fas fa-robot text-4xl text-accent mb-4"></i> |
| <h3 class="text-lg font-semibold">AI Solutions</h3> |
| </div> |
| <div class="animate-float-delay bg-primary p-6 rounded-lg shadow-lg"> |
| <i class="fas fa-network-wired text-4xl text-accent mb-4"></i> |
| <h3 class="text-lg font-semibold">IoT Networks</h3> |
| </div> |
| <div class="animate-float-delay bg-primary p-6 rounded-lg shadow-lg"> |
| <i class="fas fa-brain text-4xl text-accent mb-4"></i> |
| <h3 class="text-lg font-semibold">ML Models</h3> |
| </div> |
| <div class="animate-float bg-primary p-6 rounded-lg shadow-lg"> |
| <i class="fas fa-link text-4xl text-accent mb-4"></i> |
| <h3 class="text-lg font-semibold">Blockchain</h3> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-secondary"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">About GMW Tech Group</h2> |
| <div class="w-20 h-1 bg-accent mx-auto"></div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h3 class="text-2xl font-semibold mb-6 text-accent">Our Vision</h3> |
| <p class="text-textSecondary mb-6">To create a world where intelligent systems seamlessly integrate with human needs, driving efficiency, innovation, and sustainable growth across all industries.</p> |
| <h3 class="text-2xl font-semibold mb-6 text-accent">Our Mission</h3> |
| <p class="text-textSecondary mb-6">We empower businesses with transformative technologies, providing tailored AI, IoT, ML, and Blockchain solutions that solve complex challenges and unlock new opportunities.</p> |
| <div class="flex flex-wrap gap-4"> |
| <div class="bg-primary bg-opacity-50 p-4 rounded-lg"> |
| <h4 class="font-semibold text-accent">2015</h4> |
| <p class="text-sm text-textSecondary">Founded</p> |
| </div> |
| <div class="bg-primary bg-opacity-50 p-4 rounded-lg"> |
| <h4 class="font-semibold text-accent">50+</h4> |
| <p class="text-sm text-textSecondary">Employees</p> |
| </div> |
| <div class="bg-primary bg-opacity-50 p-4 rounded-lg"> |
| <h4 class="font-semibold text-accent">100+</h4> |
| <p class="text-sm text-textSecondary">Clients Worldwide</p> |
| </div> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="bg-primary p-8 rounded-lg shadow-xl"> |
| <h3 class="text-2xl font-semibold mb-6 text-accent">Leadership Team</h3> |
| <div class="grid grid-cols-2 gap-6"> |
| <div class="flex items-center space-x-4"> |
| <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center"> |
| <span class="text-primary font-bold">GM</span> |
| </div> |
| <div> |
| <h4 class="font-semibold">Gregory M. White</h4> |
| <p class="text-sm text-textSecondary">CEO & Founder</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center"> |
| <span class="text-primary font-bold">SW</span> |
| </div> |
| <div> |
| <h4 class="font-semibold">Sarah Williams</h4> |
| <p class="text-sm text-textSecondary">CTO</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center"> |
| <span class="text-primary font-bold">DJ</span> |
| </div> |
| <div> |
| <h4 class="font-semibold">David Johnson</h4> |
| <p class="text-sm text-textSecondary">Head of AI Research</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center"> |
| <span class="text-primary font-bold">MC</span> |
| </div> |
| <div> |
| <h4 class="font-semibold">Maria Chen</h4> |
| <p class="text-sm text-textSecondary">Blockchain Lead</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 bg-primary"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Our Services</h2> |
| <div class="w-20 h-1 bg-accent mx-auto"></div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="service-card bg-secondary rounded-lg p-8 transition duration-300 hover:border-accent border border-secondary"> |
| <div class="text-accent text-4xl mb-6"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-4">AI Development & Deployment</h3> |
| <p class="text-textSecondary mb-6">Custom AI solutions tailored to your business needs, from predictive analytics to natural language processing and computer vision systems.</p> |
| <ul class="space-y-2 text-textSecondary"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Custom AI model development</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>AI integration with existing systems</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Ongoing AI optimization</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="service-card bg-secondary rounded-lg p-8 transition duration-300 hover:border-accent border border-secondary"> |
| <div class="text-accent text-4xl mb-6"> |
| <i class="fas fa-network-wired"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-4">IoT Solutions for Smart Systems</h3> |
| <p class="text-textSecondary mb-6">End-to-end IoT solutions that connect devices, gather data, and provide actionable insights for smarter decision-making.</p> |
| <ul class="space-y-2 text-textSecondary"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>IoT hardware and software solutions</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Real-time monitoring systems</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Predictive maintenance solutions</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="service-card bg-secondary rounded-lg p-8 transition duration-300 hover:border-accent border border-secondary"> |
| <div class="text-accent text-4xl mb-6"> |
| <i class="fas fa-brain"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-4">Machine Learning Models</h3> |
| <p class="text-textSecondary mb-6">Advanced ML algorithms that learn from your data to automate processes, detect patterns, and make accurate predictions.</p> |
| <ul class="space-y-2 text-textSecondary"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Supervised and unsupervised learning</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Deep learning implementations</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Continuous model training</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="service-card bg-secondary rounded-lg p-8 transition duration-300 hover:border-accent border border-secondary"> |
| <div class="text-accent text-4xl mb-6"> |
| <i class="fas fa-link"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-4">Blockchain Integration</h3> |
| <p class="text-textSecondary mb-6">Secure, transparent blockchain solutions for supply chain, finance, identity verification, and decentralized applications.</p> |
| <ul class="space-y-2 text-textSecondary"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Smart contract development</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Private and public blockchain solutions</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Tokenization strategies</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="service-card bg-secondary rounded-lg p-8 transition duration-300 hover:border-accent border border-secondary"> |
| <div class="text-accent text-4xl mb-6"> |
| <i class="fas fa-lightbulb"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-4">Tech Consulting</h3> |
| <p class="text-textSecondary mb-6">Strategic guidance to help you navigate the complex tech landscape and implement solutions that drive business growth.</p> |
| <ul class="space-y-2 text-textSecondary"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Digital transformation strategy</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Technology roadmap development</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Innovation workshops</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="service-card bg-secondary rounded-lg p-8 transition duration-300 hover:border-accent border border-secondary"> |
| <div class="text-accent text-4xl mb-6"> |
| <i class="fas fa-shield-alt"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-4">Cybersecurity Solutions</h3> |
| <p class="text-textSecondary mb-6">Comprehensive security measures to protect your digital assets and ensure compliance with industry regulations.</p> |
| <ul class="space-y-2 text-textSecondary"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Security audits and assessments</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Threat detection systems</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-accent mr-2"></i> |
| <span>Data protection strategies</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="portfolio" class="py-20 parallax" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80');"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4 text-white">Our Portfolio</h2> |
| <div class="w-20 h-1 bg-accent mx-auto"></div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-primary bg-opacity-90 rounded-lg overflow-hidden shadow-lg"> |
| <div class="h-48 bg-secondary flex items-center justify-center"> |
| <i class="fas fa-hospital text-6xl text-accent"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2">Smart Hospital System</h3> |
| <p class="text-textSecondary mb-4">AI-powered patient monitoring and IoT device integration for a leading healthcare provider.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-accent text-primary px-2 py-1 rounded">AI</span> |
| <span class="text-xs bg-accent text-primary px-2 py-1 rounded">IoT</span> |
| <span class="text-xs bg-accent text-primary px-2 py-1 rounded">Healthcare</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-primary bg-opacity-90 rounded-lg overflow-hidden shadow-lg"> |
| <div class="h-48 bg-secondary flex items-center justify-center"> |
| <i class="fas fa-truck text-6xl text-accent"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2">Logistics Optimization</h3> |
| <p class="text-textSecondary mb-4">Blockchain-based supply chain tracking with ML-powered route optimization for a global logistics company.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-accent text-primary px-2 py-1 rounded">Blockchain</span> |
| <span class="text-xs bg-accent text-primary px-2 py-1 rounded">ML</span> |
| <span class="text-xs bg-accent text-primary px-2 py-1 rounded">Logistics</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-primary bg-opacity-90 rounded-lg overflow-hidden shadow-lg"> |
| <div class="h-48 bg-secondary flex items-center justify-center"> |
| <i class="fas fa-chart-line text-6xl text-accent"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2">Financial Forecasting</h3> |
| <p class="text-textSecondary mb-4">Advanced ML models for predictive analytics in financial markets for an investment firm.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="text-xs bg-accent text-primary px-2 py-1 rounded">ML</span> |
| <span class="text-xs bg-accent text-primary px-2 py-1 rounded">Finance</span> |
| <span class="text-xs bg-accent text-primary px-2 py-1 rounded">Predictive Analytics</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="text-center mt-12"> |
| <a href="#contact" class="inline-block border-2 border-accent text-accent px-8 py-3 rounded font-medium hover:bg-accent hover:bg-opacity-10 transition duration-300">View More Projects</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-secondary"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Client Testimonials</h2> |
| <div class="w-20 h-1 bg-accent mx-auto"></div> |
| </div> |
| <div class="relative overflow-hidden"> |
| <div class="flex transition-transform duration-500" id="testimonial-carousel"> |
| |
| <div class="testimonial-card min-w-full px-4 active"> |
| <div class="bg-primary p-8 rounded-lg shadow-lg"> |
| <div class="flex items-center mb-6"> |
| <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center"> |
| <span class="text-primary font-bold">JD</span> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-semibold">John Dawson</h4> |
| <p class="text-sm text-textSecondary">CEO, HealthPlus Systems</p> |
| </div> |
| </div> |
| <p class="text-textSecondary italic">"GMW Tech Group transformed our patient monitoring systems with their AI solutions. The implementation was seamless, and we've seen a 40% improvement in early diagnosis accuracy. Their team was professional, knowledgeable, and truly understood our needs."</p> |
| <div class="flex mt-4"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card min-w-full px-4"> |
| <div class="bg-primary p-8 rounded-lg shadow-lg"> |
| <div class="flex items-center mb-6"> |
| <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center"> |
| <span class="text-primary font-bold">SM</span> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-semibold">Sarah Mitchell</h4> |
| <p class="text-sm text-textSecondary">CTO, Global Logistics Inc.</p> |
| </div> |
| </div> |
| <p class="text-textSecondary italic">"The blockchain solution developed by GMW has revolutionized our supply chain tracking. We now have complete transparency from manufacturer to customer, reducing delays by 30%. Their innovative approach and technical expertise are unmatched."</p> |
| <div class="flex mt-4"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card min-w-full px-4"> |
| <div class="bg-primary p-8 rounded-lg shadow-lg"> |
| <div class="flex items-center mb-6"> |
| <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center"> |
| <span class="text-primary font-bold">RK</span> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-semibold">Robert Kim</h4> |
| <p class="text-sm text-textSecondary">Director, FinTech Innovations</p> |
| </div> |
| </div> |
| <p class="text-textSecondary italic">"Working with GMW on our machine learning models for fraud detection was a game-changer. Their data scientists delivered models with 98% accuracy, significantly reducing our false positives. Their ongoing support and model refinement demonstrate their commitment to client success."</p> |
| <div class="flex mt-4"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="flex justify-center mt-8 space-x-2"> |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-accent opacity-100" data-index="0"></button> |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-accent opacity-30" data-index="1"></button> |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-accent opacity-30" data-index="2"></button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="blog" class="py-20 bg-primary"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Latest Insights</h2> |
| <div class="w-20 h-1 bg-accent mx-auto"></div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-secondary rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300"> |
| <div class="h-48 bg-gradient-to-r from-accent to-blue-500 flex items-center justify-center"> |
| <i class="fas fa-robot text-6xl text-white"></i> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-textSecondary mb-3"> |
| <span>June 15, 2023</span> |
| <span class="mx-2">•</span> |
| <span>AI</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">The Future of AI in Healthcare</h3> |
| <p class="text-textSecondary mb-4">Exploring how artificial intelligence is revolutionizing diagnostics, treatment planning, and patient care in the medical field.</p> |
| <a href="#" class="text-accent font-medium hover:underline">Read More</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-secondary rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300"> |
| <div class="h-48 bg-gradient-to-r from-green-500 to-accent flex items-center justify-center"> |
| <i class="fas fa-link text-6xl text-white"></i> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-textSecondary mb-3"> |
| <span>May 28, 2023</span> |
| <span class="mx-2">•</span> |
| <span>Blockchain</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Blockchain Beyond Cryptocurrency</h3> |
| <p class="text-textSecondary mb-4">Real-world applications of blockchain technology in supply chain, identity verification, and secure data sharing.</p> |
| <a href="#" class="text-accent font-medium hover:underline">Read More</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-secondary rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300"> |
| <div class="h-48 bg-gradient-to-r from-purple-500 to-accent flex items-center justify-center"> |
| <i class="fas fa-network-wired text-6xl text-white"></i> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-textSecondary mb-3"> |
| <span>April 10, 2023</span> |
| <span class="mx-2">•</span> |
| <span>IoT</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Building Smart Cities with IoT</h3> |
| <p class="text-textSecondary mb-4">How interconnected devices are creating more efficient, sustainable, and livable urban environments worldwide.</p> |
| <a href="#" class="text-accent font-medium hover:underline">Read More</a> |
| </div> |
| </div> |
| </div> |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-block border-2 border-accent text-accent px-8 py-3 rounded font-medium hover:bg-accent hover:bg-opacity-10 transition duration-300">View All Articles</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gradient-to-r from-primary to-secondary"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-2xl font-bold mb-4">Stay Updated with Tech Trends</h2> |
| <p class="text-textSecondary mb-8">Subscribe to our newsletter for the latest insights, case studies, and technology updates.</p> |
| <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"> |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded focus:outline-none focus:ring-2 focus:ring-accent text-primary"> |
| <button type="submit" class="bg-accent text-primary px-6 py-3 rounded font-medium hover:bg-opacity-90 transition duration-300">Subscribe</button> |
| </form> |
| <p class="text-xs text-textSecondary mt-4">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-secondary"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Get In Touch</h2> |
| <div class="w-20 h-1 bg-accent mx-auto"></div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| <div> |
| <h3 class="text-2xl font-semibold mb-6 text-accent">Contact Information</h3> |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="text-accent text-xl mr-4 mt-1"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Headquarters</h4> |
| <p class="text-textSecondary">123 Tech Plaza, Suite 500<br>San Francisco, CA 94107</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="text-accent text-xl mr-4 mt-1"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Email Us</h4> |
| <p class="text-textSecondary">info@gmwtechgroup.com<br>sales@gmwtechgroup.com</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="text-accent text-xl mr-4 mt-1"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Call Us</h4> |
| <p class="text-textSecondary">+1 (415) 555-0199<br>+1 (415) 555-0188 (Sales)</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-10"> |
| <h4 class="font-semibold mb-4">Follow Us</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-textSecondary hover:text-accent text-xl"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="text-textSecondary hover:text-accent text-xl"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-textSecondary hover:text-accent text-xl"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-textSecondary hover:text-accent text-xl"> |
| <i class="fab fa-github"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div> |
| <form class="bg-primary p-8 rounded-lg shadow-lg"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium mb-1">Name</label> |
| <input type="text" id="name" class="w-full px-4 py-2 rounded bg-secondary border border-secondary focus:border-accent focus:outline-none"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 rounded bg-secondary border border-secondary focus:border-accent focus:outline-none"> |
| </div> |
| <div class="md:col-span-2"> |
| <label for="subject" class="block text-sm font-medium mb-1">Subject</label> |
| <input type="text" id="subject" class="w-full px-4 py-2 rounded bg-secondary border border-secondary focus:border-accent focus:outline-none"> |
| </div> |
| <div class="md:col-span-2"> |
| <label for="message" class="block text-sm font-medium mb-1">Message</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 rounded bg-secondary border border-secondary focus:border-accent focus:outline-none"></textarea> |
| </div> |
| <div class="md:col-span-2"> |
| <button type="submit" class="bg-accent text-primary px-6 py-3 rounded font-medium hover:bg-opacity-90 transition duration-300 w-full">Send Message</button> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="fixed bottom-8 right-8 z-50"> |
| <button id="chatbot-button" class="bg-accent text-primary w-16 h-16 rounded-full shadow-xl flex items-center justify-center hover:bg-opacity-90 transition duration-300"> |
| <i class="fas fa-robot text-2xl"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="chatbot-container" class="fixed bottom-24 right-8 w-80 bg-primary border border-accent rounded-lg shadow-xl overflow-hidden z-50 chatbot-container"> |
| <div class="bg-secondary p-4 flex justify-between items-center"> |
| <h3 class="font-semibold">GMW Tech Assistant</h3> |
| <button id="close-chatbot" class="text-textSecondary hover:text-accent"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="h-64 p-4 overflow-y-auto" id="chatbot-messages"> |
| <div class="mb-4"> |
| <div class="bg-secondary text-textPrimary rounded-lg p-3 max-w-xs"> |
| Hello! I'm your GMW Tech Assistant. How can I help you today? |
| </div> |
| </div> |
| </div> |
| <div class="p-4 border-t border-secondary"> |
| <div class="flex"> |
| <input type="text" id="chatbot-input" placeholder="Type your message..." class="flex-grow px-4 py-2 rounded-l bg-secondary border border-secondary focus:border-accent focus:outline-none"> |
| <button id="send-message" class="bg-accent text-primary px-4 py-2 rounded-r hover:bg-opacity-90 transition duration-300"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-primary py-12 border-t border-secondary"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">GMW Tech Group</h3> |
| <p class="text-textSecondary text-sm">Innovating the Future of Intelligent Systems through cutting-edge AI, IoT, ML, and Blockchain solutions.</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
| <ul class="space-y-2 text-sm text-textSecondary"> |
| <li><a href="#home" class="hover:text-accent transition duration-300">Home</a></li> |
| <li><a href="#about" class="hover:text-accent transition duration-300">About Us</a></li> |
| <li><a href="#services" class="hover:text-accent transition duration-300">Services</a></li> |
| <li><a href="#portfolio" class="hover:text-accent transition duration-300">Portfolio</a></li> |
| <li><a href="#blog" class="hover:text-accent transition duration-300">Insights</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Services</h3> |
| <ul class="space-y-2 text-sm text-textSecondary"> |
| <li><a href="#" class="hover:text-accent transition duration-300">AI Development</a></li> |
| <li><a href="#" class="hover:text-accent transition duration-300">IoT Solutions</a></li> |
| <li><a href="#" class="hover:text-accent transition duration-300">Machine Learning</a></li> |
| <li><a href="#" class="hover:text-accent transition duration-300">Blockchain</a></li> |
| <li><a href="#" class="hover:text-accent transition duration-300">Tech Consulting</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> |
| <ul class="space-y-2 text-sm text-textSecondary"> |
| <li><a href="#" class="hover:text-accent transition duration-300">Privacy Policy</a></li> |
| <li><a href="#" class="hover:text-accent transition duration-300">Terms of Service</a></li> |
| <li><a href="#" class="hover:text-accent transition duration-300">Cookie Policy</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-secondary mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-sm text-textSecondary mb-4 md:mb-0">© 2023 GMW Tech Group. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-textSecondary hover:text-accent"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="text-textSecondary hover:text-accent"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-textSecondary hover:text-accent"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-textSecondary hover:text-accent"> |
| <i class="fab fa-github"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| |
| |
| let currentTestimonial = 0; |
| const testimonials = document.querySelectorAll('.testimonial-card'); |
| const dots = document.querySelectorAll('.testimonial-dot'); |
| |
| function showTestimonial(index) { |
| testimonials.forEach(testimonial => testimonial.classList.remove('active')); |
| dots.forEach(dot => dot.classList.replace('opacity-100', 'opacity-30')); |
| |
| testimonials[index].classList.add('active'); |
| dots[index].classList.replace('opacity-30', 'opacity-100'); |
| currentTestimonial = index; |
| } |
| |
| dots.forEach(dot => { |
| dot.addEventListener('click', () => { |
| const index = parseInt(dot.getAttribute('data-index')); |
| showTestimonial(index); |
| }); |
| }); |
| |
| |
| setInterval(() => { |
| const nextIndex = (currentTestimonial + 1) % testimonials.length; |
| showTestimonial(nextIndex); |
| }, 5000); |
| |
| |
| const chatbotButton = document.getElementById('chatbot-button'); |
| const chatbotContainer = document.getElementById('chatbot-container'); |
| const closeChatbot = document.getElementById('close-chatbot'); |
| const sendMessageButton = document.getElementById('send-message'); |
| const chatbotInput = document.getElementById('chatbot-input'); |
| const chatbotMessages = document.getElementById('chatbot-messages'); |
| |
| chatbotButton.addEventListener('click', () => { |
| chatbotContainer.classList.toggle('open'); |
| }); |
| |
| closeChatbot.addEventListener('click', () => { |
| chatbotContainer.classList.remove('open'); |
| }); |
| |
| function addMessage(message, isUser = false) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `mb-4 flex ${isUser ? 'justify-end' : 'justify-start'}`; |
| |
| const messageContent = document.createElement('div'); |
| messageContent.className = `rounded-lg p-3 max-w-xs ${isUser ? 'bg-accent text-primary' : 'bg-secondary text-textPrimary'}`; |
| messageContent.textContent = message; |
| |
| messageDiv.appendChild(messageContent); |
| chatbotMessages.appendChild(messageDiv); |
| chatbotMessages.scrollTop = chatbotMessages.scrollHeight; |
| } |
| |
| sendMessageButton.addEventListener('click', () => { |
| const message = chatbotInput.value.trim(); |
| if (message) { |
| addMessage(message, true); |
| chatbotInput.value = ''; |
| |
| |
| setTimeout(() => { |
| const responses = [ |
| "I'd be happy to help with that. Could you provide more details?", |
| "Our team can assist you with that. Would you like me to connect you with a specialist?", |
| "That's an interesting question. Let me check our resources for you.", |
| "For immediate assistance, you can call our support team at +1 (415) 555-0199.", |
| "I've noted your inquiry. Someone from our team will get back to you shortly." |
| ]; |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
| addMessage(randomResponse); |
| }, 1000); |
| } |
| }); |
| |
| chatbotInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| sendMessageButton.click(); |
| } |
| }); |
| |
| |
| const observerOptions = { |
| threshold: 0.1 |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-fadeIn'); |
| } |
| }); |
| }, observerOptions); |
| |
| document.querySelectorAll('.service-card, .testimonial-card, [data-animate]').forEach(element => { |
| observer.observe(element); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ObindiG/gmw-trial" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
