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.
Browse filesBeyond manufacturing, NanoMatter offers Deposition-as-a-Service, delivering high-quality thin film growth solutions for research institutes, startups, and industrial clients. With over 30 years of combined industry experience, our team blends deep technical expertise with precision engineering to design reliable, high-performance deposition platforms tailored for advanced materials research and semiconductor innovation.
Our mission is to enable next-generation semiconductor innovation by pushing the boundaries of material synthesis and device integration. We actively collaborate with global research partners and bridge technological excellence between India and Germany, positioning NanoMatter as a trusted partner for advanced material development worldwide.
Tone & Style:
Confident, technical, and visionary.
Designed to appeal to researchers, deep-tech startups, and semiconductor manufacturers.
Use a clean white background with orange accents for highlights, buttons, and call-to-action elements.
Incorporate subtle animations of atoms, deposition layers, or thin-film growth to emphasize precision and innovation.
Sections to Include:
Hero Section – Tagline like “Enabling Next-Generation Semiconductor Innovation” with background animation of atomic deposition.
About NanoMatter – Overview of expertise, history, and global presence.
Technologies – MOCVD and PVD systems, each with technical highlights and application areas.
Deposition as a Service – Description of custom thin film deposition offerings.
Research & Partnerships – Focus on collaborations with universities and R&D centers.
Contact Section – Inquiry form and global office locations (India & Germany).
Design Cues:
White background, orange highlights (#ff6600 or similar), dark gray or black text.
Modern sans-serif typography (e.g., Poppins, Inter, or Roboto).
Clean layouts with engineering precision — subtle geometric lines or grid patterns in the background.
Smooth scroll animations and dynamic visual cues representing atomic-level innovation. make website like this https://www.amec-inc.com/en/
- README.md +8 -5
- components/footer.js +85 -0
- components/navbar.js +90 -0
- index.html +436 -18
- script.js +85 -0
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: QuantumCraft NanoSystems 🚀
|
| 3 |
+
colorFrom: yellow
|
| 4 |
+
colorTo: pink
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
components/footer.js
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomFooter extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
footer {
|
| 7 |
+
background: #f9fafb;
|
| 8 |
+
border-top: 1px solid #e5e7eb;
|
| 9 |
+
padding: 3rem 1rem;
|
| 10 |
+
}
|
| 11 |
+
.footer-container {
|
| 12 |
+
max-width: 1200px;
|
| 13 |
+
margin: 0 auto;
|
| 14 |
+
}
|
| 15 |
+
.footer-content {
|
| 16 |
+
display: grid;
|
| 17 |
+
grid-template-columns: 2fr 1fr 1fr;
|
| 18 |
+
gap: 2rem;
|
| 19 |
+
}
|
| 20 |
+
.footer-section h4 {
|
| 21 |
+
color: #111827;
|
| 22 |
+
font-weight: 600;
|
| 23 |
+
margin-bottom: 1rem;
|
| 24 |
+
}
|
| 25 |
+
.footer-links {
|
| 26 |
+
display: flex;
|
| 27 |
+
flex-direction: column;
|
| 28 |
+
gap: 0.5rem;
|
| 29 |
+
}
|
| 30 |
+
.footer-link {
|
| 31 |
+
color: #6b7280;
|
| 32 |
+
text-decoration: none;
|
| 33 |
+
transition: color 0.3s ease;
|
| 34 |
+
}
|
| 35 |
+
.footer-link:hover {
|
| 36 |
+
color: #ff6600;
|
| 37 |
+
}
|
| 38 |
+
.footer-bottom {
|
| 39 |
+
border-top: 1px solid #e5e7eb;
|
| 40 |
+
margin-top: 2rem;
|
| 41 |
+
padding-top: 2rem;
|
| 42 |
+
text-align: center;
|
| 43 |
+
color: #6b7280;
|
| 44 |
+
}
|
| 45 |
+
@media (max-width: 768px) {
|
| 46 |
+
.footer-content {
|
| 47 |
+
grid-template-columns: 1fr;
|
| 48 |
+
gap: 2rem;
|
| 49 |
+
}
|
| 50 |
+
}
|
| 51 |
+
</style>
|
| 52 |
+
<footer>
|
| 53 |
+
<div class="footer-container">
|
| 54 |
+
<div class="footer-content">
|
| 55 |
+
<div class="footer-section">
|
| 56 |
+
<h4>NanoMatter Technologies</h4>
|
| 57 |
+
<p style="color: #6b7280; margin: 0;">Advanced semiconductor equipment for next-generation innovation.</p>
|
| 58 |
+
</div>
|
| 59 |
+
<div class="footer-section">
|
| 60 |
+
<h4>Quick Links</h4>
|
| 61 |
+
<div class="footer-links">
|
| 62 |
+
<a href="#about" class="footer-link">About</a>
|
| 63 |
+
<a href="#technologies" class="footer-link">Technologies</a>
|
| 64 |
+
<a href="#service" class="footer-link">Services</a>
|
| 65 |
+
<a href="#partnerships" class="footer-link">Partnerships</a>
|
| 66 |
+
<a href="#contact" class="footer-link">Contact</a>
|
| 67 |
+
</div>
|
| 68 |
+
</div>
|
| 69 |
+
<div class="footer-section">
|
| 70 |
+
<h4>Contact</h4>
|
| 71 |
+
<div class="footer-links">
|
| 72 |
+
<span style="color: #6b7280;">India: +91 80 XXXX XXXX</span>
|
| 73 |
+
<span style="color: #6b7280;">Germany: +49 89 XXXX XXXX</span>
|
| 74 |
+
</div>
|
| 75 |
+
</div>
|
| 76 |
+
<div class="footer-bottom">
|
| 77 |
+
<p>© 2024 NanoMatter Technologies. All rights reserved.</p>
|
| 78 |
+
</div>
|
| 79 |
+
</div>
|
| 80 |
+
</footer>
|
| 81 |
+
`;
|
| 82 |
+
}
|
| 83 |
+
}
|
| 84 |
+
|
| 85 |
+
customElements.define('custom-footer', CustomFooter);
|
components/navbar.js
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
nav {
|
| 7 |
+
background: rgba(255,255,255,0.95);
|
| 8 |
+
backdrop-filter: blur(10px);
|
| 9 |
+
border-bottom: 1px solid #e5e7eb;
|
| 10 |
+
position: fixed;
|
| 11 |
+
top: 0;
|
| 12 |
+
left: 0;
|
| 13 |
+
right: 0;
|
| 14 |
+
z-index: 1000;
|
| 15 |
+
transition: all 0.3s ease;
|
| 16 |
+
}
|
| 17 |
+
.nav-container {
|
| 18 |
+
max-width: 1200px;
|
| 19 |
+
margin: 0 auto;
|
| 20 |
+
padding: 0 1rem;
|
| 21 |
+
}
|
| 22 |
+
.nav-content {
|
| 23 |
+
display: flex;
|
| 24 |
+
justify-content: space-between;
|
| 25 |
+
align-items: center;
|
| 26 |
+
height: 70px;
|
| 27 |
+
}
|
| 28 |
+
.logo {
|
| 29 |
+
font-size: 1.5rem;
|
| 30 |
+
font-weight: 700;
|
| 31 |
+
color: #111827;
|
| 32 |
+
text-decoration: none;
|
| 33 |
+
}
|
| 34 |
+
.logo span {
|
| 35 |
+
color: #ff6600;
|
| 36 |
+
}
|
| 37 |
+
.nav-links {
|
| 38 |
+
display: flex;
|
| 39 |
+
gap: 2rem;
|
| 40 |
+
align-items: center;
|
| 41 |
+
}
|
| 42 |
+
.nav-link {
|
| 43 |
+
color: #374151;
|
| 44 |
+
text-decoration: none;
|
| 45 |
+
font-weight: 500;
|
| 46 |
+
transition: color 0.3s ease;
|
| 47 |
+
}
|
| 48 |
+
.nav-link:hover {
|
| 49 |
+
color: #ff6600;
|
| 50 |
+
}
|
| 51 |
+
.mobile-menu-btn {
|
| 52 |
+
display: none;
|
| 53 |
+
background: none;
|
| 54 |
+
border: none;
|
| 55 |
+
cursor: pointer;
|
| 56 |
+
color: #374151;
|
| 57 |
+
}
|
| 58 |
+
@media (max-width: 768px) {
|
| 59 |
+
.nav-links {
|
| 60 |
+
display: none;
|
| 61 |
+
}
|
| 62 |
+
.mobile-menu-btn {
|
| 63 |
+
display: block;
|
| 64 |
+
}
|
| 65 |
+
}
|
| 66 |
+
</style>
|
| 67 |
+
<nav>
|
| 68 |
+
<div class="nav-container">
|
| 69 |
+
<div class="nav-content">
|
| 70 |
+
<a href="/" class="logo">
|
| 71 |
+
Nano<span>Matter</span>
|
| 72 |
+
</a>
|
| 73 |
+
<div class="nav-links">
|
| 74 |
+
<a href="#about" class="nav-link">About</a>
|
| 75 |
+
<a href="#technologies" class="nav-link">Technologies</a>
|
| 76 |
+
<a href="#service" class="nav-link">Services</a>
|
| 77 |
+
<a href="#partnerships" class="nav-link">Partnerships</a>
|
| 78 |
+
<a href="#contact" class="nav-link">Contact</a>
|
| 79 |
+
</div>
|
| 80 |
+
<button class="mobile-menu-btn">
|
| 81 |
+
<i data-feather="menu"></i>
|
| 82 |
+
</button>
|
| 83 |
+
</div>
|
| 84 |
+
</div>
|
| 85 |
+
</nav>
|
| 86 |
+
`;
|
| 87 |
+
}
|
| 88 |
+
}
|
| 89 |
+
|
| 90 |
+
customElements.define('custom-navbar', CustomNavbar);
|
index.html
CHANGED
|
@@ -1,19 +1,437 @@
|
|
| 1 |
-
|
| 2 |
-
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
|
| 2 |
+
<!DOCTYPE html>
|
| 3 |
+
<html lang="en">
|
| 4 |
+
<head>
|
| 5 |
+
<meta charset="UTF-8">
|
| 6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 7 |
+
<title>NanoMatter Technologies - Advanced Semiconductor Equipment</title>
|
| 8 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 9 |
+
<link rel="stylesheet" href="style.css">
|
| 10 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 12 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 13 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
| 14 |
+
<style>
|
| 15 |
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
| 16 |
+
.atom-animation {
|
| 17 |
+
position: absolute;
|
| 18 |
+
width: 100%;
|
| 19 |
+
height: 100%;
|
| 20 |
+
top: 0;
|
| 21 |
+
left: 0;
|
| 22 |
+
pointer-events: none;
|
| 23 |
+
}
|
| 24 |
+
.grid-pattern {
|
| 25 |
+
background-image: linear-gradient(rgba(255,102,0,0.05) 1px, transparent 1px),
|
| 26 |
+
linear-gradient(90deg, rgba(255,102,0,0.05) 1px, transparent 1px);
|
| 27 |
+
background-size: 50px 50px;
|
| 28 |
+
}
|
| 29 |
+
</style>
|
| 30 |
+
</head>
|
| 31 |
+
<body class="bg-white text-gray-800 font-poppins">
|
| 32 |
+
<custom-navbar></custom-navbar>
|
| 33 |
+
<!-- Hero Section -->
|
| 34 |
+
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden grid-pattern">
|
| 35 |
+
<div class="atom-animation" id="atomCanvas"></div>
|
| 36 |
+
<div class="relative z-20 text-center px-4 max-w-6xl mx-auto">
|
| 37 |
+
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-gray-900">
|
| 38 |
+
Enabling Next-Generation<br>Semiconductor Innovation
|
| 39 |
+
</h1>
|
| 40 |
+
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
| 41 |
+
Advanced MOCVD and PVD systems for 2D materials, TMDs, and quantum device fabrication
|
| 42 |
+
</p>
|
| 43 |
+
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
| 44 |
+
<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">
|
| 45 |
+
Explore Technologies
|
| 46 |
+
</a>
|
| 47 |
+
<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">
|
| 48 |
+
Get in Touch
|
| 49 |
+
</a>
|
| 50 |
+
</div>
|
| 51 |
+
</div>
|
| 52 |
+
</section>
|
| 53 |
+
<!-- About Section -->
|
| 54 |
+
<section id="about" class="py-20 px-4 bg-gray-50">
|
| 55 |
+
<div class="max-w-6xl mx-auto">
|
| 56 |
+
<div class="text-center mb-16">
|
| 57 |
+
<h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">About NanoMatter</h2>
|
| 58 |
+
<div class="w-24 h-1 bg-orange-500 mx-auto"></div>
|
| 59 |
+
</div>
|
| 60 |
+
<div class="grid md:grid-cols-2 gap-12 items-center">
|
| 61 |
+
<div>
|
| 62 |
+
<h3 class="text-2xl font-semibold mb-6 text-orange-500">30+ Years of Combined Expertise</h3>
|
| 63 |
+
<p class="text-gray-600 text-lg mb-6">
|
| 64 |
+
NanoMatter Technologies specializes in advanced semiconductor equipment manufacturing,
|
| 65 |
+
focusing on MOCVD and PVD systems that enable breakthroughs in electronics, optoelectronics,
|
| 66 |
+
and quantum devices.
|
| 67 |
+
</p>
|
| 68 |
+
<p class="text-gray-600 text-lg mb-6">
|
| 69 |
+
Our team blends deep technical expertise with precision engineering to design reliable,
|
| 70 |
+
high-performance deposition platforms tailored for advanced materials research and
|
| 71 |
+
semiconductor innovation.
|
| 72 |
+
</p>
|
| 73 |
+
<div class="flex items-center gap-8 text-sm text-gray-500">
|
| 74 |
+
<div class="text-center">
|
| 75 |
+
<div class="text-2xl font-bold text-orange-500">30+</div>
|
| 76 |
+
<div>Years Experience</div>
|
| 77 |
+
</div>
|
| 78 |
+
<div class="text-center">
|
| 79 |
+
<div class="text-2xl font-bold text-orange-500">2</div>
|
| 80 |
+
<div>Global Locations</div>
|
| 81 |
+
</div>
|
| 82 |
+
<div class="text-center">
|
| 83 |
+
<div class="text-2xl font-bold text-orange-500">50+</div>
|
| 84 |
+
<div>Research Partners</div>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
<div class="relative">
|
| 89 |
+
<div class="bg-gradient-to-br from-orange-50 to-white rounded-2xl p-8 transform rotate-1 border border-orange-100 shadow-sm">
|
| 90 |
+
<div class="bg-white rounded-xl p-6 transform -rotate-1">
|
| 91 |
+
<h4 class="text-xl font-semibold mb-4 text-orange-500">Global Presence</h4>
|
| 92 |
+
<div class="space-y-3">
|
| 93 |
+
<div class="flex items-center gap-3">
|
| 94 |
+
<i data-feather="map-pin" class="text-orange-500"></i>
|
| 95 |
+
<span class="text-gray-700">India - R&D & Manufacturing Hub</span>
|
| 96 |
+
</div>
|
| 97 |
+
<div class="flex items-center gap-3">
|
| 98 |
+
<i data-feather="map-pin" class="text-orange-500"></i>
|
| 99 |
+
<span class="text-gray-700">Germany - European Operations</span>
|
| 100 |
+
</div>
|
| 101 |
+
</div>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
</section>
|
| 108 |
+
<!-- Technologies Section -->
|
| 109 |
+
<section id="technologies" class="py-20 px-4 bg-white">
|
| 110 |
+
<div class="max-w-6xl mx-auto">
|
| 111 |
+
<div class="text-center mb-16">
|
| 112 |
+
<h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Advanced Technologies</h2>
|
| 113 |
+
<div class="w-24 h-1 bg-orange-500 mx-auto"></div>
|
| 114 |
+
</div>
|
| 115 |
+
<div class="grid md:grid-cols-2 gap-12">
|
| 116 |
+
<!-- MOCVD Card -->
|
| 117 |
+
<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">
|
| 118 |
+
<div class="flex items-center gap-4 mb-6">
|
| 119 |
+
<div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center">
|
| 120 |
+
<i data-feather="layers" class="text-white"></i>
|
| 121 |
+
</div>
|
| 122 |
+
<h3 class="text-2xl font-semibold text-gray-900">MOCVD Systems</h3>
|
| 123 |
+
</div>
|
| 124 |
+
<p class="text-gray-600 mb-6">
|
| 125 |
+
Metal Organic Chemical Vapor Deposition systems for high-precision thin film growth
|
| 126 |
+
of 2D materials and transition metal dichalcogenides (TMDs).
|
| 127 |
+
</p>
|
| 128 |
+
<ul class="space-y-2 text-gray-500 mb-6">
|
| 129 |
+
<li class="flex items-center gap-2">
|
| 130 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4"></i>
|
| 131 |
+
Atomic-level thickness control
|
| 132 |
+
</li>
|
| 133 |
+
<li class="flex items-center gap-2">
|
| 134 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4"></i>
|
| 135 |
+
Multi-wafer processing capability
|
| 136 |
+
</li>
|
| 137 |
+
<li class="flex items-center gap-2">
|
| 138 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4"></i>
|
| 139 |
+
In-situ monitoring and control
|
| 140 |
+
</li>
|
| 141 |
+
</ul>
|
| 142 |
+
<div class="bg-orange-50 rounded-lg p-4 border-l-4 border-orange-500">
|
| 143 |
+
<h4 class="font-semibold text-orange-500 mb-2">Applications</h4>
|
| 144 |
+
<p class="text-sm text-gray-600">Quantum devices, photonics, flexible electronics, advanced sensors</p>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
|
| 148 |
+
<!-- PVD Card -->
|
| 149 |
+
<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">
|
| 150 |
+
<div class="flex items-center gap-4 mb-6">
|
| 151 |
+
<div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center">
|
| 152 |
+
<i data-feather="zap" class="text-white"></i>
|
| 153 |
+
</div>
|
| 154 |
+
<h3 class="text-2xl font-semibold text-gray-900">PVD Systems</h3>
|
| 155 |
+
</div>
|
| 156 |
+
<p class="text-gray-600 mb-6">
|
| 157 |
+
Physical Vapor Deposition systems for metal and dielectric thin films with
|
| 158 |
+
exceptional uniformity and reproducibility.
|
| 159 |
+
</p>
|
| 160 |
+
<ul class="space-y-2 text-gray-500 mb-6">
|
| 161 |
+
<li class="flex items-center gap-2">
|
| 162 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4"></i>
|
| 163 |
+
Ultra-high vacuum compatibility
|
| 164 |
+
</li>
|
| 165 |
+
<li class="flex items-center gap-2">
|
| 166 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4"></i>
|
| 167 |
+
Multi-target configuration
|
| 168 |
+
</li>
|
| 169 |
+
<li class="flex items-center gap-2">
|
| 170 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4"></i>
|
| 171 |
+
Sub-nanometer film uniformity
|
| 172 |
+
</li>
|
| 173 |
+
</ul>
|
| 174 |
+
<div class="bg-orange-50 rounded-lg p-4 border-l-4 border-orange-500">
|
| 175 |
+
<h4 class="font-semibold text-orange-500 mb-2">Applications</h4>
|
| 176 |
+
<p class="text-sm text-gray-600">Interconnect metallization, MEMS, protective coatings, optical films</p>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
</div>
|
| 180 |
+
</div>
|
| 181 |
+
</section>
|
| 182 |
+
<!-- Service Section -->
|
| 183 |
+
<section id="service" class="py-20 px-4">
|
| 184 |
+
<div class="max-w-6xl mx-auto">
|
| 185 |
+
<div class="text-center mb-16">
|
| 186 |
+
<h2 class="text-4xl md:text-5xl font-bold mb-4">Deposition as a Service</h2>
|
| 187 |
+
<div class="w-24 h-1 bg-red-600 mx-auto"></div>
|
| 188 |
+
</div>
|
| 189 |
+
<div class="bg-gradient-to-br from-gray-800 to-red-900/20 rounded-2xl p-12">
|
| 190 |
+
<div class="grid md:grid-cols-2 gap-12 items-center">
|
| 191 |
+
<div>
|
| 192 |
+
<h3 class="text-2xl font-semibold mb-6 text-red-400">Custom Thin Film Solutions</h3>
|
| 193 |
+
<p class="text-gray-300 text-lg mb-6">
|
| 194 |
+
Access our state-of-the-art deposition capabilities without capital investment.
|
| 195 |
+
Our service model provides research institutes, startups, and industrial clients
|
| 196 |
+
with high-quality thin film growth solutions.
|
| 197 |
+
</p>
|
| 198 |
+
<div class="space-y-4">
|
| 199 |
+
<div class="flex items-center gap-4">
|
| 200 |
+
<div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center">
|
| 201 |
+
<i data-feather="check" class="text-white w-4 h-4"></i>
|
| 202 |
+
</div>
|
| 203 |
+
<span class="text-gray-300">Material characterization and analysis</span>
|
| 204 |
+
</div>
|
| 205 |
+
<div class="flex items-center gap-4">
|
| 206 |
+
<div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center">
|
| 207 |
+
<i data-feather="check" class="text-white w-4 h-4"></i>
|
| 208 |
+
</div>
|
| 209 |
+
<span class="text-gray-300">Process optimization and development</span>
|
| 210 |
+
</div>
|
| 211 |
+
<div class="flex items-center gap-4">
|
| 212 |
+
<div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center">
|
| 213 |
+
<i data-feather="check" class="text-white w-4 h-4"></i>
|
| 214 |
+
</div>
|
| 215 |
+
<span class="text-gray-300">Technical support and consultation</span>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
<div class="text-center">
|
| 220 |
+
<div class="bg-gray-800 rounded-2xl p-8 inline-block">
|
| 221 |
+
<i data-feather="cloud" class="w-16 h-16 text-red-500 mx-auto mb-4"></i>
|
| 222 |
+
<h4 class="text-xl font-semibold mb-2">Service Tiers</h4>
|
| 223 |
+
<div class="space-y-3 text-gray-400">
|
| 224 |
+
<div>Research & Development</div>
|
| 225 |
+
<div>Prototype Development</div>
|
| 226 |
+
<div>Production Scale-up</div>
|
| 227 |
+
</div>
|
| 228 |
+
</div>
|
| 229 |
+
</div>
|
| 230 |
+
</div>
|
| 231 |
+
</div>
|
| 232 |
+
</div>
|
| 233 |
+
</section>
|
| 234 |
+
<!-- Partnerships Section -->
|
| 235 |
+
<section id="partnerships" class="py-20 px-4 bg-white">
|
| 236 |
+
<div class="max-w-6xl mx-auto">
|
| 237 |
+
<div class="text-center mb-16">
|
| 238 |
+
<h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Research & Partnerships</h2>
|
| 239 |
+
<div class="w-24 h-1 bg-orange-500 mx-auto"></div>
|
| 240 |
+
</div>
|
| 241 |
+
<div class="grid md:grid-cols-2 gap-12">
|
| 242 |
+
<div>
|
| 243 |
+
<h3 class="text-2xl font-semibold mb-6 text-orange-500">Global Collaborations</h3>
|
| 244 |
+
<p class="text-gray-600 text-lg mb-6">
|
| 245 |
+
We actively collaborate with leading universities, research institutions, and R&D centers
|
| 246 |
+
worldwide to push the boundaries of material synthesis and device integration.
|
| 247 |
+
</p>
|
| 248 |
+
<div class="space-y-4">
|
| 249 |
+
<div class="bg-orange-50 rounded-xl p-6 border-l-4 border-orange-500">
|
| 250 |
+
<h4 class="font-semibold text-orange-500 mb-2">Academic Partnerships</h4>
|
| 251 |
+
<p class="text-gray-600">Joint research projects with top-tier universities</p>
|
| 252 |
+
</div>
|
| 253 |
+
<div class="bg-orange-50 rounded-xl p-6 border-l-4 border-orange-500">
|
| 254 |
+
<h4 class="font-semibold text-orange-500 mb-2">Industrial Collaborations</h4>
|
| 255 |
+
<p class="text-gray-600">Technology transfer and co-development with industry leaders</p>
|
| 256 |
+
</div>
|
| 257 |
+
</div>
|
| 258 |
+
</div>
|
| 259 |
+
<div class="grid grid-cols-2 gap-4">
|
| 260 |
+
<div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center">
|
| 261 |
+
<i data-feather="book" class="w-8 h-8 text-orange-500"></i>
|
| 262 |
+
</div>
|
| 263 |
+
<div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center">
|
| 264 |
+
<i data-feather="users" class="w-8 h-8 text-orange-500"></i>
|
| 265 |
+
</div>
|
| 266 |
+
<div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center">
|
| 267 |
+
<i data-feather="award" class="w-8 h-8 text-orange-500"></i>
|
| 268 |
+
</div>
|
| 269 |
+
<div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center">
|
| 270 |
+
<i data-feather="globe" class="w-8 h-8 text-orange-500"></i>
|
| 271 |
+
</div>
|
| 272 |
+
</div>
|
| 273 |
+
</div>
|
| 274 |
+
</div>
|
| 275 |
+
</section>
|
| 276 |
+
|
| 277 |
+
<!-- Contact Section -->
|
| 278 |
+
<section id="contact" class="py-20 bg-gray-50">
|
| 279 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 280 |
+
<div class="text-center mb-16">
|
| 281 |
+
<h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Contact Us</h2>
|
| 282 |
+
<div class="w-24 h-1 bg-orange-500 mx-auto"></div>
|
| 283 |
+
</div>
|
| 284 |
+
<div class="grid md:grid-cols-2 gap-12">
|
| 285 |
+
<div>
|
| 286 |
+
<h3 class="text-2xl font-semibold mb-6 text-orange-500">Get in Touch</h3>
|
| 287 |
+
<form class="space-y-6">
|
| 288 |
+
<div class="grid md:grid-cols-2 gap-6">
|
| 289 |
+
<div>
|
| 290 |
+
<label class="block text-gray-700 mb-2">Name</label>
|
| 291 |
+
<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">
|
| 292 |
+
</div>
|
| 293 |
+
<div>
|
| 294 |
+
<label class="block text-gray-700 mb-2">Email</label>
|
| 295 |
+
<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="your.email@example.com">
|
| 296 |
+
</div>
|
| 297 |
+
</div>
|
| 298 |
+
<div>
|
| 299 |
+
<label class="block text-gray-700 mb-2">Subject</label>
|
| 300 |
+
<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">
|
| 301 |
+
</div>
|
| 302 |
+
<div>
|
| 303 |
+
<label class="block text-gray-700 mb-2">Message</label>
|
| 304 |
+
<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>
|
| 305 |
+
</div>
|
| 306 |
+
<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">
|
| 307 |
+
Send Message
|
| 308 |
+
</button>
|
| 309 |
+
</form>
|
| 310 |
+
</div>
|
| 311 |
+
<div>
|
| 312 |
+
<h3 class="text-2xl font-semibold mb-6 text-orange-500">Global Offices</h3>
|
| 313 |
+
<div class="space-y-6">
|
| 314 |
+
<div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
| 315 |
+
<h4 class="font-semibold text-gray-900 mb-3">India - R&D & Manufacturing Hub</h4>
|
| 316 |
+
<div class="space-y-2 text-gray-600">
|
| 317 |
+
<div class="flex items-center gap-2">
|
| 318 |
+
<i data-feather="map-pin" class="text-orange-500"></i>
|
| 319 |
+
<span>Bangalore, Karnataka</span>
|
| 320 |
+
</div>
|
| 321 |
+
<div class="flex items-center gap-2">
|
| 322 |
+
<i data-feather="phone" class="text-orange-500"></i>
|
| 323 |
+
<span>+91 80 XXXX XXXX</span>
|
| 324 |
+
</div>
|
| 325 |
+
</div>
|
| 326 |
+
</div>
|
| 327 |
+
<div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
|
| 328 |
+
<h4 class="font-semibold text-gray-900 mb-3">Germany - European Operations</h4>
|
| 329 |
+
<div class="space-y-2 text-gray-600">
|
| 330 |
+
<div class="flex items-center gap-2">
|
| 331 |
+
<i data-feather="map-pin" class="text-orange-500"></i>
|
| 332 |
+
<span>Munich, Bavaria</span>
|
| 333 |
+
</div>
|
| 334 |
+
<div class="flex items-center gap-2">
|
| 335 |
+
<i data-feather="phone" class="text-orange-500"></i>
|
| 336 |
+
<span>+49 89 XXXX XXXX</span>
|
| 337 |
+
</div>
|
| 338 |
+
</div>
|
| 339 |
+
</div>
|
| 340 |
+
</div>
|
| 341 |
+
</div>
|
| 342 |
+
</div>
|
| 343 |
+
</div>
|
| 344 |
+
</section>
|
| 345 |
+
|
| 346 |
+
<custom-footer></custom-footer>
|
| 347 |
+
<script src="components/navbar.js"></script>
|
| 348 |
+
<script src="components/footer.js"></script>
|
| 349 |
+
<script src="script.js"></script>
|
| 350 |
+
<script>
|
| 351 |
+
// Initialize feather icons
|
| 352 |
+
feather.replace();
|
| 353 |
+
|
| 354 |
+
// Simple atom animation for hero section
|
| 355 |
+
function initAtomAnimation() {
|
| 356 |
+
const canvas = document.createElement('canvas');
|
| 357 |
+
const container = document.getElementById('atomCanvas');
|
| 358 |
+
container.appendChild(canvas);
|
| 359 |
+
|
| 360 |
+
const ctx = canvas.getContext('2d');
|
| 361 |
+
let width = container.clientWidth;
|
| 362 |
+
let height = container.clientHeight;
|
| 363 |
+
|
| 364 |
+
canvas.width = width;
|
| 365 |
+
canvas.height = height;
|
| 366 |
+
|
| 367 |
+
const atoms = [];
|
| 368 |
+
const numAtoms = 15;
|
| 369 |
+
|
| 370 |
+
for (let i = 0; i < numAtoms; i++) {
|
| 371 |
+
atoms.push({
|
| 372 |
+
x: Math.random() * width,
|
| 373 |
+
y: Math.random() * height,
|
| 374 |
+
radius: Math.random() * 3 + 1,
|
| 375 |
+
speedX: (Math.random() - 0.5) * 0.5,
|
| 376 |
+
speedY: (Math.random() - 0.5) * 0.5,
|
| 377 |
+
connections: []
|
| 378 |
+
});
|
| 379 |
+
}
|
| 380 |
+
|
| 381 |
+
function animate() {
|
| 382 |
+
ctx.clearRect(0, 0, width, height);
|
| 383 |
+
|
| 384 |
+
// Draw connections
|
| 385 |
+
ctx.strokeStyle = 'rgba(255,102,0,0.2)';
|
| 386 |
+
ctx.lineWidth = 1;
|
| 387 |
+
|
| 388 |
+
for (let i = 0; i < atoms.length; i++) {
|
| 389 |
+
for (let j = i + 1; j < atoms.length; j++) {
|
| 390 |
+
const dx = atoms[i].x - atoms[j].x;
|
| 391 |
+
const dy = atoms[i].y - atoms[j].y;
|
| 392 |
+
const distance = Math.sqrt(dx * dx + dy * dy);
|
| 393 |
+
|
| 394 |
+
if (distance < 150) {
|
| 395 |
+
ctx.beginPath();
|
| 396 |
+
ctx.moveTo(atoms[i].x, atoms[i].y);
|
| 397 |
+
ctx.lineTo(atoms[j].x, atoms[j].y);
|
| 398 |
+
ctx.stroke();
|
| 399 |
+
}
|
| 400 |
+
}
|
| 401 |
+
}
|
| 402 |
+
|
| 403 |
+
// Draw atoms
|
| 404 |
+
for (let atom of atoms) {
|
| 405 |
+
ctx.beginPath();
|
| 406 |
+
ctx.arc(atom.x, atom.y, atom.radius, 0, Math.PI * 2);
|
| 407 |
+
ctx.fillStyle = 'rgba(255,102,0,0.6)';
|
| 408 |
+
ctx.fill();
|
| 409 |
+
|
| 410 |
+
// Update position
|
| 411 |
+
atom.x += atom.speedX;
|
| 412 |
+
atom.y += atom.speedY;
|
| 413 |
+
|
| 414 |
+
// Bounce off walls
|
| 415 |
+
if (atom.x <= 0 || atom.x >= width) atom.speedX *= -1;
|
| 416 |
+
if (atom.y <= 0 || atom.y >= height) atom.speedY *= -1;
|
| 417 |
+
}
|
| 418 |
+
|
| 419 |
+
requestAnimationFrame(animate);
|
| 420 |
+
}
|
| 421 |
+
|
| 422 |
+
animate();
|
| 423 |
+
|
| 424 |
+
window.addEventListener('resize', () => {
|
| 425 |
+
width = container.clientWidth;
|
| 426 |
+
height = container.clientHeight;
|
| 427 |
+
canvas.width = width;
|
| 428 |
+
canvas.height = height;
|
| 429 |
+
});
|
| 430 |
+
}
|
| 431 |
+
|
| 432 |
+
// Initialize animation when page loads
|
| 433 |
+
document.addEventListener('DOMContentLoaded', initAtomAnimation);
|
| 434 |
+
</script>
|
| 435 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 436 |
+
</body>
|
| 437 |
</html>
|
script.js
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// Main JavaScript file for NanoMatter Technologies
|
| 2 |
+
|
| 3 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 4 |
+
// Initialize all components and animations
|
| 5 |
+
initScrollAnimations();
|
| 6 |
+
initFormHandling();
|
| 7 |
+
});
|
| 8 |
+
|
| 9 |
+
function initScrollAnimations() {
|
| 10 |
+
// Add intersection observer for scroll animations
|
| 11 |
+
const observerOptions = {
|
| 12 |
+
threshold: 0.1,
|
| 13 |
+
rootMargin: '0px 0px -100px 0px'
|
| 14 |
+
};
|
| 15 |
+
|
| 16 |
+
const observer = new IntersectionObserver((entries) => {
|
| 17 |
+
entries.forEach(entry => {
|
| 18 |
+
if (entry.isIntersecting) {
|
| 19 |
+
entry.target.classList.add('animate-in');
|
| 20 |
+
}
|
| 21 |
+
});
|
| 22 |
+
}, observerOptions);
|
| 23 |
+
|
| 24 |
+
// Observe all sections for animation
|
| 25 |
+
document.querySelectorAll('section').forEach(section => {
|
| 26 |
+
observer.observe(section);
|
| 27 |
+
});
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
function initFormHandling() {
|
| 31 |
+
const contactForm = document.querySelector('#contact form');
|
| 32 |
+
if (contactForm) {
|
| 33 |
+
contactForm.addEventListener('submit', function(e) {
|
| 34 |
+
e.preventDefault();
|
| 35 |
+
// Simple form validation
|
| 36 |
+
const inputs = contactForm.querySelectorAll('input, textarea');
|
| 37 |
+
let isValid = true;
|
| 38 |
+
|
| 39 |
+
inputs.forEach(input => {
|
| 40 |
+
if (!input.value.trim()) {
|
| 41 |
+
isValid = false;
|
| 42 |
+
input.style.borderColor = '#ef4444';
|
| 43 |
+
} else {
|
| 44 |
+
input.style.borderColor = '#d1d5db';
|
| 45 |
+
}
|
| 46 |
+
});
|
| 47 |
+
|
| 48 |
+
if (isValid) {
|
| 49 |
+
// Show success message (in a real app, this would send to server)
|
| 50 |
+
alert('Thank you for your message! We will get back to you soon.');
|
| 51 |
+
contactForm.reset();
|
| 52 |
+
} else {
|
| 53 |
+
alert('Please fill in all fields.');
|
| 54 |
+
}
|
| 55 |
+
});
|
| 56 |
+
}
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
// Smooth scrolling for anchor links
|
| 60 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 61 |
+
anchor.addEventListener('click', function (e) {
|
| 62 |
+
e.preventDefault();
|
| 63 |
+
const target = document.querySelector(this.getAttribute('href'));
|
| 64 |
+
if (target) {
|
| 65 |
+
window.scrollTo({
|
| 66 |
+
top: target.offsetTop - 80,
|
| 67 |
+
behavior: 'smooth'
|
| 68 |
+
});
|
| 69 |
+
}
|
| 70 |
+
});
|
| 71 |
+
});
|
| 72 |
+
|
| 73 |
+
// Navbar scroll effect
|
| 74 |
+
window.addEventListener('scroll', function() {
|
| 75 |
+
const navbar = document.querySelector('custom-navbar');
|
| 76 |
+
if (navbar) {
|
| 77 |
+
const navShadow = navbar.shadowRoot.querySelector('nav');
|
| 78 |
+
if (window.scrollY > 100) {
|
| 79 |
+
navShadow.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
|
| 80 |
+
} else {
|
| 81 |
+
navShadow.style.boxShadow = 'none';
|
| 82 |
+
}
|
| 83 |
+
});
|
| 84 |
+
}
|
| 85 |
+
}
|