Spaces:
Running
Running
NanoMatter Technologies is an advanced semiconductor equipment manufacturer specializing in MOCVD (Metal Organic Chemical Vapor Deposition) and PVD (Physical Vapor Deposition) systems. Our technologies empower the fabrication of next-generation materials, including 2D materials and transition metal dichalcogenides (TMDs), driving breakthroughs in electronics, optoelectronics, and quantum devices.
8f8aecf
verified
| <html lang="en"> | |
| <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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| .atom-animation { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| } | |
| .grid-pattern { | |
| background-image: linear-gradient(rgba(255,102,0,0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,102,0,0.05) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white text-gray-800 font-poppins"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden grid-pattern"> | |
| <div class="atom-animation" id="atomCanvas"></div> | |
| <div class="relative z-20 text-center px-4 max-w-6xl mx-auto"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 text-gray-900"> | |
| Enabling Next-Generation<br>Semiconductor Innovation | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto"> | |
| Advanced MOCVD and PVD systems for 2D materials, TMDs, and quantum device fabrication | |
| </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-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg"> | |
| Explore Technologies | |
| </a> | |
| <a href="#contact" class="border border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 shadow-md"> | |
| Get in Touch | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">About NanoMatter</h2> | |
| <div class="w-24 h-1 bg-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-orange-500">30+ Years of Combined Expertise</h3> | |
| <p class="text-gray-600 text-lg mb-6"> | |
| NanoMatter Technologies specializes in advanced semiconductor equipment manufacturing, | |
| focusing on MOCVD and PVD systems that enable breakthroughs in electronics, optoelectronics, | |
| and quantum devices. | |
| </p> | |
| <p class="text-gray-600 text-lg mb-6"> | |
| Our team blends deep technical expertise with precision engineering to design reliable, | |
| high-performance deposition platforms tailored for advanced materials research and | |
| semiconductor innovation. | |
| </p> | |
| <div class="flex items-center gap-8 text-sm text-gray-500"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-orange-500">30+</div> | |
| <div>Years Experience</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-orange-500">2</div> | |
| <div>Global Locations</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-orange-500">50+</div> | |
| <div>Research Partners</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="bg-gradient-to-br from-orange-50 to-white rounded-2xl p-8 transform rotate-1 border border-orange-100 shadow-sm"> | |
| <div class="bg-white rounded-xl p-6 transform -rotate-1"> | |
| <h4 class="text-xl font-semibold mb-4 text-orange-500">Global Presence</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="map-pin" class="text-orange-500"></i> | |
| <span class="text-gray-700">India - R&D & Manufacturing Hub</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="map-pin" class="text-orange-500"></i> | |
| <span class="text-gray-700">Germany - European Operations</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technologies Section --> | |
| <section id="technologies" class="py-20 px-4 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Advanced Technologies</h2> | |
| <div class="w-24 h-1 bg-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <!-- MOCVD Card --> | |
| <div class="bg-white rounded-2xl p-8 border border-gray-200 hover:border-orange-500 transition-all duration-300 shadow-md hover:shadow-lg"> | |
| <div class="flex items-center gap-4 mb-6"> | |
| <div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="layers" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-gray-900">MOCVD Systems</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Metal Organic Chemical Vapor Deposition systems for high-precision thin film growth | |
| of 2D materials and transition metal dichalcogenides (TMDs). | |
| </p> | |
| <ul class="space-y-2 text-gray-500 mb-6"> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| Atomic-level thickness control | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| Multi-wafer processing capability | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| In-situ monitoring and control | |
| </li> | |
| </ul> | |
| <div class="bg-orange-50 rounded-lg p-4 border-l-4 border-orange-500"> | |
| <h4 class="font-semibold text-orange-500 mb-2">Applications</h4> | |
| <p class="text-sm text-gray-600">Quantum devices, photonics, flexible electronics, advanced sensors</p> | |
| </div> | |
| </div> | |
| <!-- PVD Card --> | |
| <div class="bg-white rounded-2xl p-8 border border-gray-200 hover:border-orange-500 transition-all duration-300 shadow-md hover:shadow-lg"> | |
| <div class="flex items-center gap-4 mb-6"> | |
| <div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="zap" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-gray-900">PVD Systems</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Physical Vapor Deposition systems for metal and dielectric thin films with | |
| exceptional uniformity and reproducibility. | |
| </p> | |
| <ul class="space-y-2 text-gray-500 mb-6"> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| Ultra-high vacuum compatibility | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| Multi-target configuration | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| Sub-nanometer film uniformity | |
| </li> | |
| </ul> | |
| <div class="bg-orange-50 rounded-lg p-4 border-l-4 border-orange-500"> | |
| <h4 class="font-semibold text-orange-500 mb-2">Applications</h4> | |
| <p class="text-sm text-gray-600">Interconnect metallization, MEMS, protective coatings, optical films</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Service Section --> | |
| <section id="service" class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Deposition as a Service</h2> | |
| <div class="w-24 h-1 bg-red-600 mx-auto"></div> | |
| </div> | |
| <div class="bg-gradient-to-br from-gray-800 to-red-900/20 rounded-2xl p-12"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-red-400">Custom Thin Film Solutions</h3> | |
| <p class="text-gray-300 text-lg mb-6"> | |
| Access our state-of-the-art deposition capabilities without capital investment. | |
| Our service model provides research institutes, startups, and industrial clients | |
| with high-quality thin film growth solutions. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="text-gray-300">Material characterization and analysis</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="text-gray-300">Process optimization and development</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="text-gray-300">Technical support and consultation</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 rounded-2xl p-8 inline-block"> | |
| <i data-feather="cloud" class="w-16 h-16 text-red-500 mx-auto mb-4"></i> | |
| <h4 class="text-xl font-semibold mb-2">Service Tiers</h4> | |
| <div class="space-y-3 text-gray-400"> | |
| <div>Research & Development</div> | |
| <div>Prototype Development</div> | |
| <div>Production Scale-up</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partnerships Section --> | |
| <section id="partnerships" class="py-20 px-4 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Research & Partnerships</h2> | |
| <div class="w-24 h-1 bg-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-orange-500">Global Collaborations</h3> | |
| <p class="text-gray-600 text-lg mb-6"> | |
| We actively collaborate with leading universities, research institutions, and R&D centers | |
| worldwide to push the boundaries of material synthesis and device integration. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="bg-orange-50 rounded-xl p-6 border-l-4 border-orange-500"> | |
| <h4 class="font-semibold text-orange-500 mb-2">Academic Partnerships</h4> | |
| <p class="text-gray-600">Joint research projects with top-tier universities</p> | |
| </div> | |
| <div class="bg-orange-50 rounded-xl p-6 border-l-4 border-orange-500"> | |
| <h4 class="font-semibold text-orange-500 mb-2">Industrial Collaborations</h4> | |
| <p class="text-gray-600">Technology transfer and co-development with industry leaders</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center"> | |
| <i data-feather="book" class="w-8 h-8 text-orange-500"></i> | |
| </div> | |
| <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center"> | |
| <i data-feather="users" class="w-8 h-8 text-orange-500"></i> | |
| </div> | |
| <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center"> | |
| <i data-feather="award" class="w-8 h-8 text-orange-500"></i> | |
| </div> | |
| <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center"> | |
| <i data-feather="globe" class="w-8 h-8 text-orange-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Contact Us</h2> | |
| <div class="w-24 h-1 bg-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-orange-500">Get in Touch</h3> | |
| <form class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Name</label> | |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-orange-500 transition-all duration-300" placeholder="Your Name"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Email</label> | |
| <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-orange-500 transition-all duration-300" placeholder="[email protected]"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Subject</label> | |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-orange-500 transition-all duration-300" placeholder="Inquiry Subject"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Message</label> | |
| <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-orange-500 transition-all duration-300" rows="5" placeholder="Your message..."></textarea> | |
| </div> | |
| <button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-orange-500">Global Offices</h3> | |
| <div class="space-y-6"> | |
| <div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm"> | |
| <h4 class="font-semibold text-gray-900 mb-3">India - R&D & Manufacturing Hub</h4> | |
| <div class="space-y-2 text-gray-600"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="map-pin" class="text-orange-500"></i> | |
| <span>Bangalore, Karnataka</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="phone" class="text-orange-500"></i> | |
| <span>+91 80 XXXX XXXX</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm"> | |
| <h4 class="font-semibold text-gray-900 mb-3">Germany - European Operations</h4> | |
| <div class="space-y-2 text-gray-600"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="map-pin" class="text-orange-500"></i> | |
| <span>Munich, Bavaria</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="phone" class="text-orange-500"></i> | |
| <span>+49 89 XXXX XXXX</span> | |
| </div> | |
| </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> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Simple atom animation for hero section | |
| function initAtomAnimation() { | |
| const canvas = document.createElement('canvas'); | |
| const container = document.getElementById('atomCanvas'); | |
| container.appendChild(canvas); | |
| const ctx = canvas.getContext('2d'); | |
| let width = container.clientWidth; | |
| let height = container.clientHeight; | |
| canvas.width = width; | |
| canvas.height = height; | |
| const atoms = []; | |
| const numAtoms = 15; | |
| for (let i = 0; i < numAtoms; i++) { | |
| atoms.push({ | |
| x: Math.random() * width, | |
| y: Math.random() * height, | |
| radius: Math.random() * 3 + 1, | |
| speedX: (Math.random() - 0.5) * 0.5, | |
| speedY: (Math.random() - 0.5) * 0.5, | |
| connections: [] | |
| }); | |
| } | |
| function animate() { | |
| ctx.clearRect(0, 0, width, height); | |
| // Draw connections | |
| ctx.strokeStyle = 'rgba(255,102,0,0.2)'; | |
| ctx.lineWidth = 1; | |
| for (let i = 0; i < atoms.length; i++) { | |
| for (let j = i + 1; j < atoms.length; j++) { | |
| const dx = atoms[i].x - atoms[j].x; | |
| const dy = atoms[i].y - atoms[j].y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 150) { | |
| ctx.beginPath(); | |
| ctx.moveTo(atoms[i].x, atoms[i].y); | |
| ctx.lineTo(atoms[j].x, atoms[j].y); | |
| ctx.stroke(); | |
| } | |
| } | |
| } | |
| // Draw atoms | |
| for (let atom of atoms) { | |
| ctx.beginPath(); | |
| ctx.arc(atom.x, atom.y, atom.radius, 0, Math.PI * 2); | |
| ctx.fillStyle = 'rgba(255,102,0,0.6)'; | |
| ctx.fill(); | |
| // Update position | |
| atom.x += atom.speedX; | |
| atom.y += atom.speedY; | |
| // Bounce off walls | |
| if (atom.x <= 0 || atom.x >= width) atom.speedX *= -1; | |
| if (atom.y <= 0 || atom.y >= height) atom.speedY *= -1; | |
| } | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); | |
| window.addEventListener('resize', () => { | |
| width = container.clientWidth; | |
| height = container.clientHeight; | |
| canvas.width = width; | |
| canvas.height = height; | |
| }); | |
| } | |
| // Initialize animation when page loads | |
| document.addEventListener('DOMContentLoaded', initAtomAnimation); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |