Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Plasma Dynamic - Digital Solutions for the Modern Era</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .service-card: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); | |
| } | |
| .hero-pattern { | |
| background-image: radial-gradient(circle at 10% 20%, rgba(110, 142, 251, 0.1) 0%, rgba(167, 119, 227, 0.1) 90%); | |
| } | |
| .animated-wave { | |
| animation: wave 8s linear infinite; | |
| } | |
| @keyframes wave { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">PD</div> | |
| <span class="ml-3 text-xl font-semibold text-gray-900">Plasma Dynamic</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#services" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Services</a> | |
| <a href="#solutions" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Solutions</a> | |
| <a href="#about" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">About</a> | |
| <a href="#contact" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Contact</a> | |
| <button class="gradient-bg text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition">Get Started</button> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900 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> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">Home</a> | |
| <a href="#services" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">Services</a> | |
| <a href="#solutions" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">Solutions</a> | |
| <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">About</a> | |
| <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">Contact</a> | |
| <button class="block w-full gradient-bg text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition mt-2">Get Started</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-pattern pt-24 pb-16 md:pt-32 md:pb-24"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:flex lg:items-center lg:justify-between"> | |
| <div class="lg:w-1/2"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight"> | |
| Digital Solutions <br> | |
| <span class="text-transparent bg-clip-text gradient-bg">For The Modern Era</span> | |
| </h1> | |
| <p class="mt-4 text-lg text-gray-600"> | |
| Plasma Dynamic delivers cutting-edge digital products and services to transform your business and accelerate growth in today's fast-paced world. | |
| </p> | |
| <div class="mt-8 flex flex-wrap gap-4"> | |
| <button class="gradient-bg text-white px-8 py-3 rounded-full font-medium hover:opacity-90 transition flex items-center"> | |
| Explore Solutions <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button class="border border-purple-600 text-purple-600 px-8 py-3 rounded-full font-medium hover:bg-purple-50 transition flex items-center"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt=""> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/76.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Trusted by 500+ companies</p> | |
| <div class="flex"> | |
| <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> | |
| <span class="ml-1 text-sm text-gray-600">5.0 (2k+ reviews)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 mt-12 lg:mt-0 relative"> | |
| <div class="relative"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-purple-100 opacity-70 animated-wave"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-blue-100 opacity-70 animated-wave" style="animation-delay: 2s;"></div> | |
| <img class="relative z-10 rounded-xl shadow-xl" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Digital solutions"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-gray-500 mb-8">TRUSTED BY INDUSTRY LEADERS</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center"> | |
| <img class="h-8 mx-auto opacity-60 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="Google"> | |
| <img class="h-8 mx-auto opacity-60 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Microsoft_logo.svg" alt="Microsoft"> | |
| <img class="h-8 mx-auto opacity-60 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="Apple"> | |
| <img class="h-8 mx-auto opacity-60 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg" alt="Amazon"> | |
| <img class="h-8 mx-auto opacity-60 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Samsung_Logo.svg" alt="Samsung"> | |
| <img class="h-8 mx-auto opacity-60 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/9/95/Tesla_Motors_logo.svg" alt="Tesla"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full">OUR SERVICES</span> | |
| <h2 class="mt-4 text-3xl font-bold text-gray-900">Comprehensive Digital Solutions</h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-gray-600"> | |
| We offer a full spectrum of digital services to meet every need of modern businesses, from startups to enterprises. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-code text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Custom Software Development</h3> | |
| <p class="text-gray-600"> | |
| Tailored software solutions designed specifically for your business needs, ensuring optimal performance and scalability. | |
| </p> | |
| <a href="#" class="mt-4 inline-flex items-center text-purple-600 font-medium"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-mobile-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Mobile App Development</h3> | |
| <p class="text-gray-600"> | |
| Cross-platform mobile applications that deliver seamless user experiences across iOS and Android devices. | |
| </p> | |
| <a href="#" class="mt-4 inline-flex items-center text-purple-600 font-medium"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-globe text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Web Development</h3> | |
| <p class="text-gray-600"> | |
| Responsive, high-performance websites that engage visitors and convert them into loyal customers. | |
| </p> | |
| <a href="#" class="mt-4 inline-flex items-center text-purple-600 font-medium"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service Card 4 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-cloud text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Cloud Solutions</h3> | |
| <p class="text-gray-600"> | |
| Secure, scalable cloud infrastructure and services to power your digital transformation journey. | |
| </p> | |
| <a href="#" class="mt-4 inline-flex items-center text-purple-600 font-medium"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service Card 5 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">AI & Machine Learning</h3> | |
| <p class="text-gray-600"> | |
| Intelligent systems that learn from data to automate processes, predict outcomes, and enhance decision-making. | |
| </p> | |
| <a href="#" class="mt-4 inline-flex items-center text-purple-600 font-medium"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service Card 6 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-shield-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Cybersecurity</h3> | |
| <p class="text-gray-600"> | |
| Comprehensive protection for your digital assets against evolving cyber threats and vulnerabilities. | |
| </p> | |
| <a href="#" class="mt-4 inline-flex items-center text-purple-600 font-medium"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section id="solutions" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:flex lg:items-center lg:justify-between"> | |
| <div class="lg:w-1/2"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full">OUR SOLUTIONS</span> | |
| <h2 class="mt-4 text-3xl font-bold text-gray-900">Industry-Specific Digital Products</h2> | |
| <p class="mt-4 text-gray-600"> | |
| We develop specialized digital products tailored to the unique challenges and opportunities of various industries. | |
| </p> | |
| <div class="mt-8 space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md gradient-bg text-white"> | |
| <i class="fas fa-hospital"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Healthcare Technology</h3> | |
| <p class="mt-1 text-gray-600"> | |
| EHR systems, telemedicine platforms, and patient management solutions. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md gradient-bg text-white"> | |
| <i class="fas fa-university"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">FinTech Solutions</h3> | |
| <p class="mt-1 text-gray-600"> | |
| Digital banking, payment gateways, and blockchain applications. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md gradient-bg text-white"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">E-Commerce Platforms</h3> | |
| <p class="mt-1 text-gray-600"> | |
| Custom online stores, marketplace solutions, and inventory management. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 mt-12 lg:mt-0"> | |
| <div class="relative"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 rounded-full bg-purple-100 opacity-50"></div> | |
| <div class="relative z-10 bg-gray-50 p-8 rounded-xl shadow-lg"> | |
| <img class="rounded-lg" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Digital solutions"> | |
| <div class="mt-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Enterprise Resource Planning</h3> | |
| <p class="mt-2 text-gray-600"> | |
| Our ERP solutions integrate all facets of your business operations into a unified system. | |
| </p> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| <span class="ml-2 text-sm text-gray-600">Inventory Management</span> | |
| </div> | |
| <div class="flex items-center ml-4"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| <span class="ml-2 text-sm text-gray-600">Accounting</span> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| <span class="ml-2 text-sm text-gray-600">HR Management</span> | |
| </div> | |
| <div class="flex items-center ml-4"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| <span class="ml-2 text-sm text-gray-600">CRM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-blue-100 opacity-50"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-center"> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">500+</div> | |
| <div class="text-lg opacity-90">Satisfied Clients</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">120+</div> | |
| <div class="text-lg opacity-90">Projects Completed</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">95%</div> | |
| <div class="text-lg opacity-90">Client Retention</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">24/7</div> | |
| <div class="text-lg opacity-90">Support Available</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full">TESTIMONIALS</span> | |
| <h2 class="mt-4 text-3xl font-bold text-gray-900">What Our Clients Say</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Sarah Johnson</h3> | |
| <p class="text-gray-600">CEO, HealthTech Solutions</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Plasma Dynamic transformed our patient management system with their custom software solution. The team was professional, responsive, and delivered beyond our expectations." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <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> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Michael Chen"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Michael Chen</h3> | |
| <p class="text-gray-600">CTO, Finova Inc.</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Their cybersecurity team implemented robust protection for our financial platform. We've had zero breaches since deployment. Highly recommend their services." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <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> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Emily Rodriguez</h3> | |
| <p class="text-gray-600">Marketing Director, ShopEasy</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "The e-commerce platform they built increased our conversion rate by 40%. Their understanding of user experience is exceptional." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <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> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:flex lg:items-center"> | |
| <div class="lg:w-1/2"> | |
| <img class="rounded-xl shadow-lg" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our team"> | |
| </div> | |
| <div class="lg:w-1/2 lg:pl-12 mt-12 lg:mt-0"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full">ABOUT US</span> | |
| <h2 class="mt-4 text-3xl font-bold text-gray-900">Innovating Since 2015</h2> | |
| <p class="mt-4 text-gray-600"> | |
| Plasma Dynamic was founded with a vision to bridge the gap between cutting-edge technology and real-world business needs. Our team of passionate engineers, designers, and strategists work collaboratively to deliver digital solutions that drive growth and efficiency. | |
| </p> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">Our Mission</h3> | |
| <p class="mt-2 text-gray-600"> | |
| To empower businesses with transformative digital solutions that solve complex challenges and create new opportunities. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">Our Values</h3> | |
| <p class="mt-2 text-gray-600"> | |
| Innovation, integrity, and impact guide everything we do. We believe in building lasting partnerships based on trust and results. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <button class="gradient-bg text-white px-8 py-3 rounded-full font-medium hover:opacity-90 transition"> | |
| Meet Our Team <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 gradient-bg text-white"> | |
| <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 mb-6">Ready to Transform Your Business?</h2> | |
| <p class="text-xl opacity-90 max-w-3xl mx-auto mb-8"> | |
| Let's discuss how Plasma Dynamic can help you achieve your digital goals and stay ahead of the competition. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-white text-purple-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition"> | |
| Get a Free Consultation | |
| </button> | |
| <button class="border border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition"> | |
| <i class="fas fa-phone-alt mr-2"></i> Call Us Now | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:flex lg:items-center lg:justify-between"> | |
| <div class="lg:w-1/2 | |
| </html> |