Spaces:

mithunparambath
/

nanomatter.tech

Running

App Files Files Community

mithunparambath commited on 14 days ago

Commit

b3e8021

verified ·

1 Parent(s): 100232e

could you reduce the free white space in the website

Browse files

Files changed (2) hide show

index.html +116 -118
style.css +4 -3

index.html CHANGED Viewed

@@ -50,8 +50,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.
@@ -59,43 +59,43 @@
 =======
 <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">
-            <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>
@@ -110,27 +110,27 @@
                         </div>
                     </div>
                 </div>
-                <div class="space-y-8">
-                    <div class="bg-gradient-to-br from-orange-50 to-white rounded-2xl p-8 border border-orange-100 shadow-sm">
-                        <h4 class="text-xl font-semibold mb-4 text-orange-500">Founder's Message</h4>
                     <div class="aspect-w-16 aspect-h-9">
                         <iframe
                             src="https://www.youtube.com/embed/VENZo4UrnuE"
                             title="Founder's Video"
-                            class="w-full h-64 md:h-80 rounded-xl shadow-lg"
                             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                             allowfullscreen>
                         </iframe>
                     </div>
                     </div>
-                    <div class="bg-gradient-to-br from-orange-50 to-white rounded-2xl p-8 border border-orange-100 shadow-sm">
-                        <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>
@@ -140,29 +140,29 @@
         </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="mb-6">
-                        <div class="flex items-center gap-4">
-<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>
                     </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>
@@ -175,31 +175,30 @@
                             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>
-                    <a href="https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/Specfication.png" download="NanoMatter-MOCVD-Brochure.pdf" class="w-full 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 flex items-center justify-center gap-2">
-                        <i data-feather="download" class="w-4 h-4"></i>
                         Download Product Brochure
                     </a>
 </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 back-end-of-line (BEOL) applications
                         including Aluminum, TiN, Ti, and TiO 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>
@@ -212,75 +211,75 @@
                             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
@@ -312,11 +311,10 @@
                     </div>
                 </div>
             </div>
             <!-- TIFR Partnership Success Story -->
-            <div class="mt-16 bg-gradient-to-br from-orange-50 to-white rounded-2xl p-8 border border-orange-100 shadow-sm">
-                <div class="grid md:grid-cols-2 gap-8 items-center">
-                    <div>
                         <img src="https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/WhatsApp Image 2025-06-28 at 14.26.24_3bf2c256.jpg"
                              alt="TIFR MOCVD Installation"
                              class="w-full h-auto object-contain rounded-xl shadow-lg">
@@ -351,18 +349,18 @@
         </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>
@@ -372,24 +370,24 @@
                             </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>
@@ -400,14 +398,14 @@
                                 </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>Berlin</span>
                                 </div>
-<div class="flex items-center gap-2">
                                     <i data-feather="phone" class="text-orange-500"></i>
                                     <span>+49 1628528047</span>
                                 </div>

 </head>
 <body class="bg-white text-gray-800 font-poppins">
 <custom-navbar></custom-navbar>
+    <!-- Hero Section -->
+    <section id="hero" class="relative min-h-[80vh] 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.
 =======
 <div class="atom-animation" id="atomCanvas"></div>
         <div class="relative z-20 text-center px-4 max-w-6xl mx-auto">
+            <h1 class="text-4xl md:text-6xl font-bold mb-4 text-white">
                 Enabling Next-Generation<br>Semiconductor Innovation
             </h1>
+            <p class="text-lg md:text-xl text-orange-100 mb-6 max-w-3xl mx-auto">
                 Advanced deposition tools for FEOL and BEOL
             </p>
+<div class="flex flex-col sm:flex-row gap-3 justify-center">
+                <a href="#technologies" 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">
                     Explore Technologies
                 </a>
+                <a href="#contact" 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">
                     Get in Touch
                 </a>
             </div>
         </div>
+</section>
+    <!-- About Section -->
+    <section id="about" class="py-12 px-4 bg-gray-50">
         <div class="max-w-6xl mx-auto">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">About NanoMatter</h2>
+                <div class="w-20 h-1 bg-orange-500 mx-auto"></div>
             </div>
+            <div class="grid md:grid-cols-2 gap-8 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 mb-4">
                         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 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>
                 </div>
+                    <div class="space-y-6">
+                        <div class="bg-gradient-to-br from-orange-50 to-white rounded-xl p-6 border border-orange-100 shadow-sm">
+                        <h4 class="text-lg font-semibold mb-3 text-orange-500">Founder's Message</h4>
                     <div class="aspect-w-16 aspect-h-9">
                         <iframe
                             src="https://www.youtube.com/embed/VENZo4UrnuE"
                             title="Founder's Video"
+                            class="w-full h-56 md:h-64 rounded-lg shadow-lg"
                             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                             allowfullscreen>
                         </iframe>
                     </div>
                     </div>
+                    <div class="bg-gradient-to-br from-orange-50 to-white rounded-xl p-6 border border-orange-100 shadow-sm">
+                        <h4 class="text-lg font-semibold mb-3 text-orange-500">Global Presence</h4>
+                    <div class="space-y-2">
+                        <div class="flex items-center gap-2">
                             <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-2">
                             <i data-feather="map-pin" class="text-orange-500"></i>
                             <span class="text-gray-700">Germany - European Operations</span>
                         </div>
         </div>
     </section>
     <!-- Technologies Section -->
+    <section id="technologies" class="py-12 px-4 bg-white">
         <div class="max-w-6xl mx-auto">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">Advanced Technologies</h2>
+                <div class="w-20 h-1 bg-orange-500 mx-auto"></div>
             </div>
+            <div class="grid md:grid-cols-2 gap-8">
                 <!-- MOCVD Card -->
+                <div class="bg-white rounded-xl p-6 border border-gray-200 hover:border-orange-500 transition-all duration-300 shadow-sm hover:shadow-md">
+                    <div class="mb-4">
+                        <div class="flex items-center gap-3">
+<div class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center">
                         <i data-feather="layers" class="text-white"></i>
                         </div>
+                        <h3 class="text-xl font-semibold text-gray-900">MOCVD Systems</h3>
                         </div>
                     </div>
+<p class="text-gray-600 mb-4">
                         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-1 text-gray-500 mb-4">
+<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>
                             In-situ monitoring and control
                         </li>
                     </ul>
+                    <div class="bg-orange-50 rounded-lg p-3 border-l-4 border-orange-500">
+                        <h4 class="font-semibold text-orange-500 mb-1">Applications</h4>
+                        <p class="text-xs text-gray-600">Quantum devices, photonics, flexible electronics, advanced sensors</p>
                     </div>
+                    <a href="https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/Specfication.png" download="NanoMatter-MOCVD-Brochure.pdf" class="w-full bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-sm flex items-center justify-center gap-2">
+                        <i data-feather="download" class="w-3 h-3"></i>
                         Download Product Brochure
                     </a>
 </div>
                 <!-- PVD Card -->
+                <div class="bg-white rounded-xl p-6 border border-gray-200 hover:border-orange-500 transition-all duration-300 shadow-sm hover:shadow-md">
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center">
                             <i data-feather="zap" class="text-white"></i>
                         </div>
+                        <h3 class="text-xl font-semibold text-gray-900">PVD Systems</h3>
                     </div>
+                    <p class="text-gray-600 mb-4">
                         Physical Vapor Deposition systems for back-end-of-line (BEOL) applications
                         including Aluminum, TiN, Ti, and TiO thin films with exceptional uniformity
                         and reproducibility.
                     </p>
+<ul class="space-y-1 text-gray-500 mb-4">
+<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>
                             Sub-nanometer film uniformity
                         </li>
                     </ul>
+                    <div class="bg-orange-50 rounded-lg p-3 border-l-4 border-orange-500">
+                        <h4 class="font-semibold text-orange-500 mb-1">Applications</h4>
+                        <p class="text-xs text-gray-600">Interconnect metallization, MEMS, protective coatings, optical films</p>
                     </div>
                 </div>
+</div>
         </div>
     </section>
 <!-- Service Section -->
+    <section id="service" class="py-12 px-4">
         <div class="max-w-6xl mx-auto">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Deposition as a Service</h2>
+                <div class="w-20 h-1 bg-red-600 mx-auto"></div>
             </div>
+            <div class="bg-gradient-to-br from-gray-800 to-red-900/20 rounded-xl p-8">
+<div class="grid md:grid-cols-2 gap-12 items-center">
                     <div>
+                        <h3 class="text-xl font-semibold mb-4 text-red-400">Custom Thin Film Solutions</h3>
+                        <p class="text-gray-300 mb-4">
                             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-3">
+                            <div class="flex items-center gap-3">
+                                <div class="w-6 h-6 bg-red-600 rounded-full flex items-center justify-center">
+                            <i data-feather="check" class="text-white w-3 h-3"></i>
                                 </div>
+                                <span class="text-gray-300 text-sm">Material characterization and analysis</span>
                             </div>
+                            <div class="flex items-center gap-3">
+                                <div class="w-6 h-6 bg-red-600 rounded-full flex items-center justify-center">
+                            <i data-feather="check" class="text-white w-3 h-3"></i>
                                 </div>
+                                <span class="text-gray-300 text-sm">Process optimization and development</span>
                             </div>
+                            <div class="flex items-center gap-3">
+                                <div class="w-6 h-6 bg-red-600 rounded-full flex items-center justify-center">
+                            <i data-feather="check" class="text-white w-3 h-3"></i>
                                 </div>
+                                <span class="text-gray-300 text-sm">Technical support and consultation</span>
                             </div>
                         </div>
                     </div>
                     <div class="text-center">
+                        <div class="bg-gray-800 rounded-xl p-6 inline-block">
+                            <i data-feather="cloud" class="w-12 h-12 text-red-500 mx-auto mb-3"></i>
+                            <h4 class="text-lg font-semibold mb-2">Service Tiers</h4>
+                            <div class="space-y-2 text-gray-400 text-sm">
                                 <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-12 px-4 bg-white">
         <div class="max-w-6xl mx-auto">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">Research & Partnerships</h2>
+            <div class="w-20 h-1 bg-orange-500 mx-auto"></div>
             </div>
+            <div class="grid md:grid-cols-2 gap-8">
+<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
                     </div>
                 </div>
             </div>
             <!-- TIFR Partnership Success Story -->
+            <div class="mt-8 bg-gradient-to-br from-orange-50 to-white rounded-xl p-6 border border-orange-100 shadow-sm">
+                <div class="grid md:grid-cols-2 gap-6 items-center">
+<div>
                         <img src="https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/WhatsApp Image 2025-06-28 at 14.26.24_3bf2c256.jpg"
                              alt="TIFR MOCVD Installation"
                              class="w-full h-auto object-contain rounded-xl shadow-lg">
         </div>
     </section>
 <!-- Contact Section -->
+    <section id="contact" class="py-12 bg-gray-50">
         <div class="max-w-6xl mx-auto px-4">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">Contact Us</h2>
+            <div class="w-20 h-1 bg-orange-500 mx-auto"></div>
             </div>
+            <div class="grid md:grid-cols-2 gap-8">
+<div>
+                    <h3 class="text-xl font-semibold mb-4 text-orange-500">Get in Touch</h3>
+                    <form class="space-y-4">
+                        <div class="grid md:grid-cols-2 gap-4">
+<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>
                         </div>
                         <div>
+                            <label class="block text-gray-700 mb-1">Subject</label>
+                            <input type="text" class="w-full px-3 py-2 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-1">Message</label>
+                            <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-orange-500 transition-all duration-300" rows="4" placeholder="Your message..."></textarea>
                         </div>
+                        <button type="submit" 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-sm">
                             Send Message
                         </button>
+</form>
                 </div>
                 <div>
+                    <h3 class="text-xl font-semibold mb-4 text-orange-500">Global Offices</h3>
+                    <div class="space-y-4">
+                        <div class="bg-white rounded-lg p-4 border border-gray-200 shadow-sm">
+                            <h4 class="font-semibold text-gray-900 mb-2">India - R&D & Manufacturing Hub</h4>
+                            <div class="space-y-1 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>
                         </div>
+                        <div class="bg-white rounded-lg p-4 border border-gray-200 shadow-sm">
+                            <h4 class="font-semibold text-gray-900 mb-2">Germany - European Operations</h4>
+                            <div class="space-y-1 text-gray-600">
                                 <div class="flex items-center gap-2">
                                     <i data-feather="map-pin" class="text-orange-500"></i>
                                     <span>Berlin</span>
                                 </div>
+                                <div class="flex items-center gap-2">
                                     <i data-feather="phone" class="text-orange-500"></i>
                                     <span>+49 1628528047</span>
                                 </div>

style.css CHANGED Viewed

@@ -1,8 +1,9 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
 	font-size: 16px;
 	margin-top: 0;

 body {
+    padding: 0;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
 	font-size: 16px;
 	margin-top: 0;