Spaces:

mithunparambath
/

nanomatter.tech

Running

App Files Files Community

mithunparambath commited on Oct 29

Commit

bbe879a

verified ·

1 Parent(s): be5e7e9

Promote version 4d3ed3a to main

Browse files

Promoted commit 4d3ed3aa9000775dd460a625eb8d3caf45e34af8 to main branch

Files changed (4) hide show

components/navbar.js +1 -12
index.html +136 -5
products.html +4 -9
script.js +1 -18

components/navbar.js CHANGED Viewed

@@ -1,4 +1,3 @@
 class CustomNavbar extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
@@ -57,22 +56,12 @@ 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>
@@ -88,4 +77,4 @@ class CustomNavbar extends HTMLElement {
   }
 }
-customElements.define('custom-navbar', CustomNavbar);

 class CustomNavbar extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
             top: 100%;
             left: 0;
             right: 0;
           }
         }
       </style>
       <nav>
         <div class="nav-container">
           <a href="index.html" class="logo">NanoMatter</a>
           <div class="nav-links">
             <a href="index.html">Home</a>
             <a href="products.html">Products</a>
   }
 }
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -13,6 +13,34 @@
     <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');
         .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);
@@ -22,8 +50,31 @@
 </head>
 <body class="bg-white text-gray-800 font-poppins">
 <custom-navbar></custom-navbar>
-<hero-section></hero-section>
 =======
 <!-- About Section -->
     <section id="about" class="py-20 px-4 bg-gray-50">
         <div class="max-w-6xl mx-auto">
@@ -370,11 +421,91 @@
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
-    <script src="components/hero-section.js"></script>
-    <script src="script.js"></script>
-<script>
         // Initialize feather icons
         feather.replace();
-    </script>
 </body>
 </html>

     <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);
 </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>
 =======
+<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">
     <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>
 </body>
 </html>

products.html CHANGED Viewed

@@ -68,16 +68,12 @@
                             <span class="text-gray-700">Ultra-high purity gas delivery system</span>
                         </div>
                     </div>
-                    <div class="mt-8 flex gap-4">
                         <a href="#contact" class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
                                 Request Quote
                             </a>
-                        <a href="https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/stitched-image-1761629586615.png" download="NanoMatter-MOCVD-Brochure.pdf" class="border border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 shadow-md flex items-center gap-2">
-                                <i data-feather="download" class="w-4 h-4"></i>
-                                Download Brochure
-                            </a>
                     </div>
-</div>
             </div>
         </div>
     </section>
@@ -255,9 +251,8 @@
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
-    <script src="components/hero-section.js"></script>
-    <script src="script.js"></script>
-<script>
         feather.replace();
     </script>
 </body>

                             <span class="text-gray-700">Ultra-high purity gas delivery system</span>
                         </div>
                     </div>
+                    <div class="mt-8">
                         <a href="#contact" class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
                                 Request Quote
                             </a>
                     </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>
 </body>

script.js CHANGED Viewed

@@ -1,11 +1,9 @@
 // Main JavaScript file for NanoMatter Technologies
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize all components and animations
     initScrollAnimations();
     initFormHandling();
-    initMobileMenu();
 });
 function initScrollAnimations() {
@@ -58,21 +56,6 @@ 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) {
@@ -99,4 +82,4 @@ window.addEventListener('scroll', function() {
             }
         });
     }
-}

 // Main JavaScript file for NanoMatter Technologies
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize all components and animations
     initScrollAnimations();
     initFormHandling();
 });
 function initScrollAnimations() {
     }
 }
 // Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
             }
         });
     }
+}