<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prodmast - Manufacturing Future</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- NAVBAR -->
<nav class="flex items-center justify-between px-8 md:px-20 py-6">
<div class="flex items-center gap-2 font-bold text-xl">
<div class="w-8 h-8 bg-dark-green rounded-full flex items-center justify-center">
<div class="w-4 h-4 border-2 border-white rounded-full"></div>
</div>
Prodmast
</div>
<div class="hidden md:flex gap-10 text-sm font-semibold text-gray-600">
<a href="#" class="hover:text-dark-green">Home</a>
<a href="#" class="hover:text-dark-green">About</a>
<a href="#" class="hover:text-dark-green">Services</a>
<a href="#" class="hover:text-dark-green">Contact</a>
</div>
<button class="bg-dark-green text-white px-7 py-2.5 rounded-full text-sm font-bold">Sign Up</button>
</nav>
<!-- HERO SECTION -->
<section class="pt-16 pb-24 text-center px-6">
<h1 class="text-5xl md:text-[68px] font-extrabold leading-[1.1] mb-6">
The Future of Manufacturing <br> with <span class="text-gray-300">Latest Technology</span>
</h1>
<p class="text-gray-500 text-lg max-w-2xl mx-auto mb-10 font-medium">
Expert tech to elevate your manufacturing. Let's take your business further.
</p>
<div class="flex justify-center gap-4 mb-10">
<button class="bg-dark-green text-white px-9 py-4 rounded-full font-bold">Get Started</button>
<button class="bg-white border border-gray-200 px-9 py-4 rounded-full font-bold">Try Demo</button>
</div>
<div class="flex flex-col items-center gap-1">
<div class="flex text-yellow-400 text-lg">★★★★★ <span class="text-black ml-2 font-bold">5.0</span></div>
<p class="text-[10px] text-gray-400 uppercase tracking-widest font-bold">from 80+ reviews</p>
</div>
<!-- STATS CARDS GRID -->
<div class="max-w-6xl mx-auto mt-20 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4">
<!-- WORKING IMAGE CARD -->
<div class="h-64 rounded-[32px] overflow-hidden shadow-lg border border-gray-100">
<div class="h-64 rounded-[32px] overflow-hidden shadow-lg border border-gray-100">
<img decoding="async" src="https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover" alt="Industry" title="Elementor #9374">
</div><img decoding="async" src="https://images.unsplash.com" class="w-full h-full object-cover" alt="Industry" title="Elementor #9374">
</div>
<!-- Dark Stats -->
<div class="bg-dark-green text-white p-8 rounded-[32px] flex flex-col justify-between text-left">
<h2 class="text-4xl font-bold">100+</h2>
<p class="text-[11px] opacity-60 leading-relaxed font-semibold uppercase tracking-wider">Our Esteemed <br>Clients and <br>Partners</p>
</div>
<!-- White Stats -->
<div class="bg-white p-8 rounded-[32px] shadow-sm border border-gray-100 text-left flex flex-col justify-between">
<div class="w-10 h-10 bg-gray-50 rounded-xl flex items-center justify-center text-dark-green font-black">G</div>
<div>
<p class="text-[10px] text-gray-400 uppercase font-bold tracking-widest mb-1">Total Projects</p>
<h2 class="text-4xl font-extrabold">1951+</h2>
</div>
</div>
<!-- Lime Stats -->
<div class="bg-lime-brand p-8 rounded-[32px] text-left flex flex-col justify-between">
<h2 class="text-4xl font-bold text-dark-green">6+</h2>
<p class="text-[11px] font-bold uppercase tracking-widest text-dark-green opacity-80">Years of <br>Dedicated <br>Service</p>
</div>
<!-- Dark Feature Card with Icon -->
<div class="bg-dark-green text-white p-8 rounded-[32px] text-left flex flex-col justify-between relative overflow-hidden">
<div class="w-10 h-10 border border-gray-600 rounded-full flex items-center justify-center">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round""")/>></svg>
</div>
<p class="text-sm font-medium leading-relaxed opacity-90">Achieve Optimal Efficiency and Boost Productivity</p>
</div>
</div>
</section>
<!-- SERVICES SECTION (DARK) -->
<section class="bg-dark-green py-32 px-8 md:px-24">
<div class="max-w-6xl mx-auto text-center mb-24">
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">Efficient and Integrated <br> Manufacturing Services</h2>
<p class="text-gray-400 max-w-lg mx-auto font-medium">Simplify operations with our efficient, quality-focused services.</p>
</div>
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-y-16 gap-x-12">
<!-- Service Items -->
<div class="border-t border-gray-800 pt-10 group cursor-pointer">
<div class="flex justify-between items-start mb-6">
<div class="text-white opacity-40 group-hover:opacity-100 transition-all">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4""")/>></svg>
</div>
<div class="text-white opacity-20 group-hover:translate-x-1 transition-all">↗</div>
</div>
<h3 class="text-xl font-bold text-white mb-4">Production and Assembly</h3>
<p class="text-gray-500 text-sm leading-relaxed">Details on production processes, assembly capacity, and product types.</p>
</div>
<div class="border-t border-gray-800 pt-10 group cursor-pointer">
<div class="flex justify-between items-start mb-6">
<div class="text-white opacity-40 group-hover:opacity-100">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10""")/>></svg>
</div>
<div class="text-white opacity-20">↗</div>
</div>
<h3 class="text-xl font-bold text-white mb-4">Custom Manufacturing</h3>
<p class="text-gray-500 text-sm leading-relaxed">Custom product creation with design and customization options.</p>
</div>
<div class="border-t border-gray-800 pt-10 group cursor-pointer">
<div class="flex justify-between items-start mb-6">
<div class="text-white opacity-40 group-hover:opacity-100">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z""")/>></svg>
</div>
<div class="text-white opacity-20">↗</div>
</div>
<h3 class="text-xl font-bold text-white mb-4">Quality Control</h3>
<p class="text-gray-500 text-sm leading-relaxed">Procedures and systems in place to ensure high product quality.</p>
</div>
<div class="border-t border-gray-800 pt-10 group cursor-pointer">
<div class="flex justify-between items-start mb-6">
<div class="text-white opacity-40 group-hover:opacity-100">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z""")/>></svg>
</div>
<div class="text-white opacity-20">↗</div>
</div>
<h3 class="text-xl font-bold text-white mb-4">Technology and Innovation</h3>
<p class="text-gray-500 text-sm leading-relaxed">Details on the latest manufacturing technologies and ongoing innovations.</p>
</div>
<div class="border-t border-gray-800 pt-10 group cursor-pointer">
<div class="flex justify-between items-start mb-6">
<div class="text-white opacity-40 group-hover:opacity-100">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4""")/>></svg>
</div>
<div class="text-white opacity-20">↗</div>
</div>
<h3 class="text-xl font-bold text-white mb-4">Packaging and Logistics</h3>
<p class="text-gray-500 text-sm leading-relaxed">Packaging and logistics for shipping to customers and distributors.</p>
</div>
<div class="border-t border-gray-800 pt-10 group cursor-pointer">
<div class="flex justify-between items-start mb-6">
<div class="text-white opacity-40 group-hover:opacity-100">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z""")/>></svg>
</div>
<div class="text-white opacity-20">↗</div>
</div>
<h3 class="text-xl font-bold text-white mb-4">Consulting Market Research</h3>
<p class="text-gray-500 text-sm leading-relaxed">Services to help companies understand market needs and provide strategic advice.</p>
</div>
</div>
</section>
</body>
</html>
]]>
