As a product presentation with specfication

components/footer.js

@@ -60,12 +60,12 @@ class CustomFooter extends HTMLElement {
             <h4>Quick Links</h4>
             <div class="footer-links">
               <a href="#about" class="footer-link">About</a>
-              <a href="#technologies" class="footer-link">Technologies</a>
+              <a href="#specifications" class="footer-link">Specifications</a>
               <a href="#service" class="footer-link">Services</a>
               <a href="#partnerships" class="footer-link">Partnerships</a>
               <a href="#contact" class="footer-link">Contact</a>
             </div>
-          </div>
+</div>
           <div class="footer-section">
             <h4>Contact</h4>
             <div class="footer-links">

components/navbar.js

@@ -72,12 +72,12 @@ class CustomNavbar extends HTMLElement {
             </a>
             <div class="nav-links">
               <a href="#about" class="nav-link">About</a>
-              <a href="#technologies" class="nav-link">Technologies</a>
+              <a href="#specifications" class="nav-link">Specifications</a>
               <a href="#service" class="nav-link">Services</a>
               <a href="#partnerships" class="nav-link">Partnerships</a>
               <a href="#contact" class="nav-link">Contact</a>
             </div>
-            <button class="mobile-menu-btn">
+<button class="mobile-menu-btn">
               <i data-feather="menu"></i>
             </button>
           </div>

index.html

@@ -41,14 +41,14 @@
                 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 href="#specifications" 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">
+                    View Specifications
                 </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
+                    Request Demo
                 </a>
             </div>
-        </div>
+</div>
     </section>
     <!-- About Section -->
     <section id="about" class="py-20 px-4 bg-gray-50">
@@ -105,78 +105,214 @@
             </div>
         </div>
     </section>
-    <!-- Technologies Section -->
-    <section id="technologies" class="py-20 px-4 bg-white">
+    <!-- Product Specifications Section -->
+    <section id="specifications" 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">Advanced Technologies</h2>
+                <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Product Specifications</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>
+            
+            <!-- MOCVD System Specifications -->
+            <div class="bg-white rounded-2xl p-8 mb-12 shadow-lg border border-gray-200">
+                <div class="flex items-center gap-4 mb-8">
+                <div class="w-16 h-16 bg-orange-500 rounded-xl flex items-center justify-center">
+                    <i data-feather="layers" class="text-white w-8 h-8"></i>
+                </div>
+                <h3 class="text-3xl font-semibold text-gray-900">NM-MOCVD-3000 Series</h3>
+                <p class="text-gray-600 text-lg mb-6">Advanced Metal Organic Chemical Vapor Deposition System</p>
+            </div>
+            
+            <div class="grid md:grid-cols-2 gap-8 mb-8">
+                <div class="space-y-6">
+                    <h4 class="text-xl font-semibold text-orange-500">Technical Specifications</h4>
+                    <div class="space-y-4">
+                        <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+                        <span class="text-gray-700">Wafer Size</span>
+                        <span class="font-semibold text-gray-900">50mm - 150mm</span>
+                        </div>
+                        <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+                        <span class="text-gray-700">Growth Temperature</span>
+                        <span class="font-semibold text-gray-900">300°C - 1200°C</span>
+                        </div>
+                        <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+                        <span class="text-gray-700">Pressure Range</span>
+                        <span class="font-semibold text-gray-900">10 mTorr - 760 Torr</span>
+                        </div>
+                        <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+                        <span class="text-gray-700">Growth Rate</span>
+                        <span class="font-semibold text-gray-900">0.01 - 10 nm/min</span>
+                        </div>
+                        <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+                        <span class="text-gray-700">Uniformity</span>
+                        <span class="font-semibold text-gray-900">±2% (1σ)</span>
                         </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
+                </div>
+                <div class="space-y-6">
+                    <h4 class="text-xl font-semibold text-orange-500">Key Features</h4>
+                    <ul class="space-y-3 text-gray-600">
+                        <li class="flex items-center gap-3">
+                        <i data-feather="check" class="text-orange-500 w-5 h-5"></i>
+                        <span>Multi-zone temperature control</span>
+                        </li>
+                        <li class="flex items-center gap-3">
+                        <i data-feather="check" class="text-orange-500 w-5 h-5"></i>
+                        <span>Real-time in-situ monitoring</span>
                         </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 class="flex items-center gap-3">
+                        <i data-feather="check" class="text-orange-500 w-5 h-5"></i>
+                        <span>Automated precursor delivery</span>
                         </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 class="flex items-center gap-3">
+                        <i data-feather="check" class="text-orange-500 w-5 h-5"></i>
+                        <span>Cluster tool compatibility</span>
                         </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>
+            </div>
+            
+            <div class="bg-orange-50 rounded-xl p-6 border-l-4 border-orange-500">
+                <h4 class="font-semibold text-orange-500 mb-3">Supported Materials</h4>
+                <div class="grid grid-cols-2 gap-4 text-sm">
+                <div class="flex items-center gap-2">
+                    <i data-feather="check-circle" class="text-orange-500 w-4 h-4"></i>
+                <span>Graphene & 2D Materials</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <i data-feather="check-circle" class="text-orange-500 w-4 h-4"></i>
+                <span>Transition Metal Dichalcogenides</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <i data-feather="check-circle" class="text-orange-500 w-4 h-4"></i>
+                <span>III-V & II-VI Compounds</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <i data-feather="check-circle" class="text-orange-500 w-4 h-4"></i>
+                <span>Perovskites & Oxides</span>
+                </div>
+            </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>
+        <!-- PVD System Specifications -->
+        <div class="bg-white rounded-2xl p-8 mt-12 shadow-lg border border-gray-200">
+            <div class="flex items-center gap-4 mb-8">
+                <div class="w-16 h-16 bg-orange-500 rounded-xl flex items-center justify-center">
+                    <i data-feather="zap" class="text-white w-8 h-8"></i>
+                </div>
+                <h3 class="text-3xl font-semibold text-gray-900">NM-PVD-5000 Series</h3>
+                <p class="text-gray-600 text-lg mb-6">High-Performance Physical Vapor Deposition System</p>
+            </div>
+            
+            <div class="grid md:grid-cols-2 gap-8 mb-8">
+                <div class="space-y-6">
+                    <h4 class="text-xl font-semibold text-orange-500">Technical Specifications</h4>
+                    <div class="space-y-4">
+                        <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+                        <span class="text-gray-700">Base Pressure</span>
+                        <span class="font-semibold text-gray-900">≤ 5×10⁻⁸ Torr</span>
+                        </div>
+                        <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+                        <span class="text-gray-700">Deposition Rate</span>
+                        <span class="font-semibold text-gray-900">0.1 - 10 nm/sec</span>
+                        </div>
+                        <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+                        <span class="text-gray-700">Target Configuration</span>
+                        <span class="font-semibold text-gray-900">Up to 4 targets</span>
+                        </div>
+                        <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+                        <span class="text-gray-700">Film Uniformity</span>
+                        <span class="font-semibold text-gray-900">±1% (3σ)</span>
+                        </div>
+                        <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+                        <span class="text-gray-700">Substrate Heating</span>
+                        <span class="font-semibold text-gray-900">RT - 800°C</span>
                         </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
+                </div>
+                <div class="space-y-6">
+                    <h4 class="text-xl font-semibold text-orange-500">Key Features</h4>
+                    <ul class="space-y-3 text-gray-600">
+                        <li class="flex items-center gap-3">
+                        <i data-feather="check" class="text-orange-500 w-5 h-5"></i>
+                        <span>Load-lock compatible</span>
+                        </li>
+                        <li class="flex items-center gap-3">
+                        <i data-feather="check" class="text-orange-500 w-5 h-5"></i>
+                        <span>RF/DC magnetron sputtering</span>
                         </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 class="flex items-center gap-3">
+                        <i data-feather="check" class="text-orange-500 w-5 h-5"></i>
+                        <span>Multi-layer deposition capability</span>
                         </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 class="flex items-center gap-3">
+                        <i data-feather="check" class="text-orange-500 w-5 h-5"></i>
+                        <span>Integrated thickness monitoring</span>
                         </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 class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div class="bg-orange-50 rounded-lg p-4 text-center">
+                    <div class="text-2xl font-bold text-orange-500">99.999%</div>
+                <div class="text-sm text-gray-600">Target Purity</div>
+                </div>
+                <div class="bg-orange-50 rounded-lg p-4 text-center">
+                    <div class="text-2xl font-bold text-orange-500">≤ 0.5nm</div>
+                <div class="text-sm text-gray-600">Surface Roughness</div>
+                </div>
+                <div class="bg-orange-50 rounded-lg p-4 text-center">
+                    <div class="text-2xl font-bold text-orange-500">24/7</div>
+                <div class="text-sm text-gray-600">Uptime</div>
+                </div>
+                <div class="bg-orange-50 rounded-lg p-4 text-center">
+                    <div class="text-2xl font-bold text-orange-500">ISO 5</div>
+                <div class="text-sm text-gray-600">Clean Room</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- System Comparison -->
+        <div class="bg-white rounded-2xl p-8 mt-12 shadow-lg border border-gray-200">
+            <div class="text-center mb-8">
+                <h3 class="text-3xl font-semibold text-gray-900">System Comparison</h3>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="w-full text-sm text-left text-gray-700">
+                    <thead class="bg-orange-500 text-white">
+                        <tr>
+                            <th class="px-6 py-4">Parameter</th>
+                            <th class="px-6 py-4">NM-MOCVD-3000</th>
+                            <th class="px-6 py-4">NM-PVD-5000</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="border-b border-gray-200">
+                            <td class="px-6 py-4 font-medium">Process Type</td>
+                            <td class="px-6 py-4">Chemical Vapor Deposition</td>
+                            <td class="px-6 py-4">Physical Vapor Deposition</td>
+                        </tr>
+                        <tr class="border-b border-gray-200">
+                            <td class="px-6 py-4 font-medium">Material Quality</td>
+                            <td class="px-6 py-4">High crystalline quality</td>
+                            <td class="px-6 py-4">Excellent density & adhesion</td>
+                        </tr>
+                        <tr class="border-b border-gray-200">
+                            <td class="px-6 py-4 font-medium">Throughput</td>
+                            <td class="px-6 py-4">Medium (batch process)</td>
+                            <td class="px-6 py-4">High (continuous process)</td>
+                        </tr>
+                        <tr class="border-b border-gray-200">
+                            <td class="px-6 py-4 font-medium">Operating Cost</td>
+                            <td class="px-6 py-4">Medium (precursor cost)</td>
+                            <td class="px-6 py-4 font-medium">Applications</td>
+                            <td class="px-6 py-4">2D materials, quantum devices</td>
+                            <td class="px-6 py-4">Metallization, MEMS, coatings</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </section>
 <!-- Service Section -->

style.css

@@ -1,3 +1,4 @@
+
 body {
 	padding: 2rem;
 	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
@@ -26,3 +27,57 @@ p {
 .card p:last-child {
 	margin-bottom: 0;
 }
+
+/* Specification table styles */
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+th, td {
+    padding: 12px 16px;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+th {
+    background: #ff6600;
+    color: white;
+    font-weight: 600;
+}
+
+tr:nth-child(even) {
+    background-color: #f9fafb;
+}
+
+/* Animation for specification sections */
+section {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.6s ease;
+}
+
+section.animate-in {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Responsive design for specification tables */
+@media (max-width: 768px) {
+    .overflow-x-auto {
+        -webkit-overflow-scrolling: touch;
+    }
+    
+    table {
+        min-width: 600px;
+    }
+}
+
+/* Enhanced hover effects for specification cards */
+.bg-white.rounded-2xl {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.bg-white.rounded-2xl:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}