make clone this website https://huggingface.co/spaces/mithunparambath/nanomatter.tech

components/hero-section.js

@@ -0,0 +1,125 @@
+class HeroSection extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .hero-section {
+          min-height: 100vh;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          overflow: hidden;
+        }
+        .hero-video {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        .video-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4);
+        }
+        .hero-content {
+          position: relative;
+          z-index: 10;
+          text-align: center;
+          color: white;
+          max-width: 800px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        .hero-title {
+          font-size: 3.5rem;
+          font-weight: 700;
+          margin-bottom: 1.5rem;
+          line-height: 1.2;
+        }
+        .hero-subtitle {
+          font-size: 1.5rem;
+          margin-bottom: 2rem;
+          opacity: 0.9;
+        }
+        .hero-buttons {
+          display: flex;
+          gap: 1rem;
+          justify-content: center;
+          flex-wrap: wrap;
+        }
+        .btn-primary {
+          background: #ff6600;
+          color: white;
+          padding: 1rem 2rem;
+          border-radius: 0.5rem;
+          font-weight: 600;
+          transition: all 0.3s ease;
+          border: none;
+          cursor: pointer;
+          text-decoration: none;
+          display: inline-flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .btn-primary:hover {
+          background: #e55b00;
+          transform: scale(1.05);
+        }
+        .btn-secondary {
+          background: transparent;
+          color: #ff6600;
+          padding: 1rem 2rem;
+          border: 2px solid #ff6600;
+          border-radius: 0.5rem;
+          font-weight: 600;
+          transition: all 0.3s ease;
+          text-decoration: none;
+          display: inline-flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .btn-secondary:hover {
+          background: #ff6600;
+          color: white;
+        }
+        @media (max-width: 768px) {
+          .hero-title {
+            font-size: 2.5rem;
+          }
+          .hero-subtitle {
+            font-size: 1.25rem;
+          }
+        }
+      </style>
+      <section class="hero-section">
+        <video class="hero-video" autoplay muted loop playsinline>
+          <source src="https://huggingface.co/spaces/mithunparambath/nanomatter.tech/resolve/main/videos/Untitled%20design%20(1).mp4" type="video/mp4">
+          Your browser does not support the video tag.
+        </video>
+        <div class="video-overlay"></div>
+        <div class="hero-content">
+          <h1 class="hero-title">Enabling Next-Generation<br>Semiconductor Innovation</h1>
+          <p class="hero-subtitle">Advanced deposition tools for FEOL and BEOL</p>
+          <div class="hero-buttons">
+            <a href="#technologies" class="btn-primary">
+              <i data-feather="layers"></i>
+              Explore Technologies
+            </a>
+            <a href="#contact" class="btn-secondary">
+              <i data-feather="mail"></i>
+              Get in Touch
+            </a>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+}
+
+customElements.define('hero-section', HeroSection);

components/navbar.js

@@ -1,3 +1,4 @@
+
 class CustomNavbar extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
@@ -56,12 +57,22 @@ class CustomNavbar extends HTMLElement {
             top: 100%;
             left: 0;
             right: 0;
+            background: rgba(255, 255, 255, 0.95);
+            padding: 1rem;
+            flex-direction: column;
+            gap: 1rem;
+          }
+          .mobile-menu-btn {
+            display: block;
           }
         }
       </style>
       <nav>
         <div class="nav-container">
           <a href="index.html" class="logo">NanoMatter</a>
+          <button class="mobile-menu-btn">
+              <i data-feather="menu"></i>
+            </button>
           <div class="nav-links">
             <a href="index.html">Home</a>
             <a href="products.html">Products</a>
@@ -77,4 +88,4 @@ class CustomNavbar extends HTMLElement {
   }
 }
 
-customElements.define('custom-navbar', CustomNavbar);
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -13,34 +13,6 @@
     <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;
-        }
-        .hero-background {
-            position: relative;
-            overflow: hidden;
-        }
-        .hero-video {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .video-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
-        }
         .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);
@@ -50,31 +22,8 @@
 </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 hero-background">
-        <video class="hero-video" autoplay muted loop playsinline>
-            <source src="https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/videos/Untitled design (1).mp4" type="video/mp4">
-            Your browser does not support the video tag.
-        </video>
+<hero-section></hero-section>
 =======
-<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-white">
-                Enabling Next-Generation<br>Semiconductor Innovation
-            </h1>
-            <p class="text-xl md:text-2xl text-orange-100 mb-8 max-w-3xl mx-auto">
-                Advanced deposition tools for FEOL and BEOL
-            </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">
@@ -421,91 +370,11 @@
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
-<script src="script.js"></script>
-    <script>
+    <script src="components/hero-section.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>
 </body>
 </html>

products.html

@@ -255,8 +255,9 @@
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
-<script src="script.js"></script>
-    <script>
+    <script src="components/hero-section.js"></script>
+    <script src="script.js"></script>
+<script>
         feather.replace();
     </script>
 </body>

script.js

@@ -1,9 +1,11 @@
+
 // Main JavaScript file for NanoMatter Technologies
 
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize all components and animations
     initScrollAnimations();
     initFormHandling();
+    initMobileMenu();
 });
 
 function initScrollAnimations() {
@@ -56,6 +58,21 @@ function initFormHandling() {
     }
 }
 
+function initMobileMenu() {
+    const navbar = document.querySelector('custom-navbar');
+    if (navbar) {
+        const mobileBtn = navbar.shadowRoot.querySelector('.mobile-menu-btn');
+        const navLinks = navbar.shadowRoot.querySelector('.nav-links');
+        
+        if (mobileBtn && navLinks) {
+            mobileBtn.addEventListener('click', function() {
+                const isOpen = navLinks.style.display === 'flex';
+                navLinks.style.display = isOpen ? 'none' : 'flex';
+            });
+        }
+    }
+}
+
 // Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
@@ -82,4 +99,4 @@ window.addEventListener('scroll', function() {
             }
         });
     }
-}
+}