mithunparambath's picture
make it minimal with white background and orange
daa586d verified
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NanoMatter Technologies - Advanced Semiconductor Equipment</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#dc2626',
dark: {
900: '#0f0f0f',
800: '#1a1a1a',
700: '#262626',
600: '#404040'
}
},
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif']
}
}
}
}
</script>
</head>
<body class="bg-[#0d1117] text-[#f0f6fc] font-sans overflow-x-hidden">
<custom-navbar></custom-navbar>
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-white"></div>
<div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
Advanced <span class="text-orange-500">Semiconductor</span><br>
Equipment
</h1>
<p class="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
MOCVD & PVD systems for cutting-edge materials research
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#technologies" class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300">
Explore Technologies
</a>
<a href="#contact" class="border border-gray-300 hover:border-orange-500 text-gray-800 px-8 py-3 rounded-lg font-semibold transition-all duration-300">
Contact Us
</a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-white">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-6">About NanoMatter</h2>
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
Advanced semiconductor equipment manufacturer specializing in MOCVD and PVD systems for next-generation materials research.
</p>
<div class="flex justify-center gap-12 mt-8">
<div class="text-center">
<div class="text-2xl font-bold text-orange-500">30+</div>
<div class="text-gray-500">Years Experience</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-orange-500">2</div>
<div class="text-gray-500">Global Locations</div>
</div>
</div>
</section>
<!-- Technologies Section -->
<section id="technologies" class="py-16 bg-white">
<div class="max-w-4xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Core Technologies</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="border border-gray-200 rounded-lg p-6 hover:border-orange-500 transition-all duration-300">
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="wind" class="text-orange-500"></i>
</div>
<h3 class="text-xl font-bold mb-3">MOCVD Systems</h3>
<p class="text-gray-600 mb-4">
Metal Organic Chemical Vapor Deposition systems for high-quality epitaxial growth.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-center gap-2">
<i data-feather="check" class="w-4 h-4 text-orange-500"></i>
Advanced temperature control
</li>
<li class="flex items-center gap-2">
<i data-feather="check" class="w-4 h-4 text-orange-500"></i>
Multi-gas precursor delivery
</li>
</ul>
</div>
<div class="border border-gray-200 rounded-lg p-6 hover:border-orange-500 transition-all duration-300">
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="target" class="text-orange-500"></i>
</div>
<h3 class="text-xl font-bold mb-3">PVD Systems</h3>
<p class="text-gray-600 mb-4">
Physical Vapor Deposition systems for precise thin film deposition.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-center gap-2">
<i data-feather="check" class="w-4 h-4 text-orange-500"></i>
Multi-target sputtering
</li>
<li class="flex items-center gap-2">
<i data-feather="check" class="w-4 h-4 text-orange-500"></i>
Ultra-high vacuum capability
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 bg-gray-50">
<div class="max-w-4xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Services</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="text-center">
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-4">
<i data-feather="flask" class="text-orange-500"></i>
</div>
<h3 class="font-bold mb-2">Research Grade</h3>
<p class="text-gray-600 text-sm">
High-precision deposition for academic research and material studies.
</p>
</div>
<div class="text-center">
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-4">
<i data-feather="zap" class="text-orange-500"></i>
</div>
<h3 class="font-bold mb-2">Prototype Development</h3>
<p class="text-gray-600 text-sm">
Custom thin film solutions for next-generation devices.
</p>
</div>
<div class="text-center">
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-4">
<i data-feather="factory" class="text-orange-500"></i>
</div>
<h3 class="font-bold mb-2">Industrial Scale</h3>
<p class="text-gray-600 text-sm">
Production-ready deposition services for manufacturers.
</p>
</div>
</div>
</div>
</section>
<!-- Partnerships Section -->
<section id="partnerships" class="py-16 bg-white">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-8">Research Partnerships</h2>
<p class="text-gray-600 mb-8">
Collaborating with leading institutions worldwide to advance semiconductor technologies.
</p>
<div class="flex flex-wrap justify-center gap-6 mt-8">
<div class="text-gray-500 font-medium">IIT</div>
<div class="text-gray-500 font-medium">Max Planck</div>
<div class="text-gray-500 font-medium">Fraunhofer</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-gray-50">
<div class="max-w-4xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Contact</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<form class="space-y-4">
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="block text-gray-600 mb-2">Name</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-orange-500 focus:outline-none transition-colors">
</div>
<div>
<label class="block text-gray-600 mb-2">Email</label>
<input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-orange-500 focus:outline-none transition-colors">
</div>
</div>
<div>
<label class="block text-gray-600 mb-2">Message</label>
<textarea rows="4" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-orange-500 focus:outline-none transition-colors"></textarea>
</div>
<button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-lg font-semibold transition-all duration-300">
Send
</button>
</form>
</div>
<div class="space-y-6">
<div>
<h3 class="font-bold mb-3">Global Offices</h3>
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center gap-2 mb-2">
<i data-feather="map-pin" class="w-4 h-4 text-orange-500"></i>
<span class="font-medium">India Headquarters</span>
</div>
<p class="text-gray-600 text-sm">Bangalore Tech Park</p>
</div>
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center gap-2 mb-2">
<i data-feather="map-pin" class="w-4 h-4 text-orange-500"></i>
<span class="font-medium">Germany R&D Center</span>
</div>
<p class="text-gray-600 text-sm">Dresden Innovation Hub</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>