Hugging Face's logo

Spaces:
mithunparambath
/
nanomatter.tech
Running

App Files Community
mithunparambath commited on
Commit
ebdc63b
·
verified ·
1 Parent(s): 328d3f3

could you add some real images of semiconductor fabs in the website

Browse files
Files changed (3) hide show
  1. components/image-gallery.js +42 -0
  2. index.html +30 -14
  3. products.html +12 -9
components/image-gallery.js ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomImageGallery extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .gallery-container {
7
+ display: grid;
8
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
9
+ gap: 1.5rem;
10
+ padding: 2rem 0;
11
+ }
12
+ .gallery-item {
13
+ border-radius: 0.75rem;
14
+ overflow: hidden;
15
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
16
+ transition: transform 0.3s ease;
17
+ }
18
+ .gallery-item:hover {
19
+ transform: scale(1.05);
20
+ }
21
+ .gallery-image {
22
+ width: 100%;
23
+ height: 200px;
24
+ object-fit: cover;
25
+ }
26
+ </style>
27
+ <div class="gallery-container">
28
+ <div class="gallery-item">
29
+ <img src="https://images.unsplash.com/photo-1581094794323-84594653b0b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Semiconductor Wafer Inspection" class="gallery-image">
30
+ </div>
31
+ <div class="gallery-item">
32
+ <img src="https://images.unsplash.com/photo-1581094794326-83208d661637?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Cleanroom Equipment" class="gallery-image">
33
+ </div>
34
+ <div class="gallery-item">
35
+ <img src="https://images.unsplash.com/photo-1581094794329-c8112cbf0d1c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Semiconductor Manufacturing" class="gallery-image">
36
+ </div>
37
+ </div>
38
+ `;
39
+ }
40
+ }
41
+
42
+ customElements.define('custom-image-gallery', CustomImageGallery);
index.html CHANGED
@@ -31,10 +31,13 @@
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">
@@ -87,7 +90,8 @@
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">
@@ -271,26 +275,37 @@
271
  </div>
272
  </div>
273
  </div>
274
- <div class="grid grid-cols-2 gap-4">
275
- <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center">
276
- <i data-feather="book" class="w-8 h-8 text-orange-500"></i>
277
  </div>
278
- <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center">
279
- <i data-feather="users" class="w-8 h-8 text-orange-500"></i>
280
  </div>
281
- <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center">
282
- <i data-feather="award" class="w-8 h-8 text-orange-500"></i>
283
  </div>
284
- <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center">
285
- <i data-feather="globe" class="w-8 h-8 text-orange-500"></i>
286
  </div>
287
  </div>
 
 
 
 
 
 
 
 
 
288
  </div>
 
289
  </div>
290
  </section>
 
291
  <!-- Technical Notes Section -->
292
  <section id="technical-notes" class="py-20 px-4 bg-white">
293
- <div class="max-w-6xl mx-auto">
294
  <div class="text-center mb-16">
295
  <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Technical Notes & Resources</h2>
296
  <div class="w-24 h-1 bg-orange-500 mx-auto"></div>
@@ -413,8 +428,9 @@
413
  <custom-footer></custom-footer>
414
  <script src="components/navbar.js"></script>
415
  <script src="components/footer.js"></script>
 
416
  <script src="script.js"></script>
417
- <script>
418
  // Initialize feather icons
419
  feather.replace();
420
 
 
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">
35
+ <div class="absolute inset-0 bg-gradient-to-br from-gray-900/80 to-orange-600/30">
36
+ <img src="https://images.unsplash.com/photo-1581094794323-84594653b0b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80" alt="Semiconductor Fab Interior" class="w-full h-full object-cover">
37
+ </div>
38
  <div class="atom-animation" id="atomCanvas"></div>
39
  <div class="relative z-20 text-center px-4 max-w-6xl mx-auto">
40
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 text-gray-900">
41
  Enabling Next-Generation<br>Semiconductor Innovation
42
  </h1>
43
  <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
 
90
  </div>
91
  <div class="relative">
92
  <div class="bg-gradient-to-br from-orange-50 to-white rounded-2xl p-8 transform rotate-1 border border-orange-100 shadow-sm">
93
+ <img src="https://images.unsplash.com/photo-1581094794326-83208d661637?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Semiconductor Wafer Processing" class="rounded-xl mb-6 w-full">
94
+ <div class="bg-white rounded-xl p-6 transform -rotate-1">
95
  <h4 class="text-xl font-semibold mb-4 text-orange-500">Global Presence</h4>
96
  <div class="space-y-3">
97
  <div class="flex items-center gap-3">
 
275
  </div>
276
  </div>
277
  </div>
278
+ <div class="grid grid-cols-2 gap-4">
279
+ <div class="bg-orange-50 rounded-xl p-6">
280
+ <img src="https://images.unsplash.com/photo-1581094794328-83208d661637?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Research Laboratory" class="rounded-lg w-full">
281
  </div>
282
+ <div class="bg-orange-50 rounded-xl p-6">
283
+ <img src="https://images.unsplash.com/photo-1581094794327-83208d661637?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Semiconductor Research" class="rounded-lg w-full">
284
  </div>
285
+ <div class="bg-orange-50 rounded-xl p-6">
286
+ <img src="https://images.unsplash.com/photo-1581094794329-83208d661637?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Advanced Manufacturing" class="rounded-lg w-full">
287
  </div>
288
+ <div class="bg-orange-50 rounded-xl p-6">
289
+ <img src="https://images.unsplash.com/photo-1581094794320-83208d661637?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Global Operations" class="rounded-lg w-full">
290
  </div>
291
  </div>
292
+ </div>
293
+ </div>
294
+ </section>
295
+ <!-- Fab Gallery Section -->
296
+ <section id="gallery" class="py-20 px-4 bg-gray-50">
297
+ <div class="max-w-6xl mx-auto">
298
+ <div class="text-center mb-16">
299
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Our Facilities</h2>
300
+ <div class="w-24 h-1 bg-orange-500 mx-auto"></div>
301
  </div>
302
+ <custom-image-gallery></custom-image-gallery>
303
  </div>
304
  </section>
305
+
306
  <!-- Technical Notes Section -->
307
  <section id="technical-notes" class="py-20 px-4 bg-white">
308
+ <div class="max-w-6xl mx-auto">
309
  <div class="text-center mb-16">
310
  <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Technical Notes & Resources</h2>
311
  <div class="w-24 h-1 bg-orange-500 mx-auto"></div>
 
428
  <custom-footer></custom-footer>
429
  <script src="components/navbar.js"></script>
430
  <script src="components/footer.js"></script>
431
+ <script src="components/image-gallery.js"></script>
432
  <script src="script.js"></script>
433
+ <script>
434
  // Initialize feather icons
435
  feather.replace();
436
 
products.html CHANGED
@@ -20,11 +20,13 @@
20
  </head>
21
  <body class="bg-white text-gray-800 font-poppins">
22
  <custom-navbar></custom-navbar>
23
-
24
  <!-- Products Header -->
25
- <section class="py-20 bg-gradient-to-br from-orange-50 to-white">
26
- <div class="max-w-6xl mx-auto px-4 text-center">
27
- <h1 class="text-5xl md:text-6xl font-bold mb-6 text-gray-900">
 
 
 
28
  Our Products
29
  </h1>
30
  <p class="text-xl text-gray-600 max-w-3xl mx-auto">
@@ -42,8 +44,8 @@
42
  </div>
43
  <div class="grid md:grid-cols-2 gap-12 items-center">
44
  <div>
45
- <img src="http://static.photos/technology/640x360/42" alt="MOCVD System" class="rounded-2xl shadow-lg">
46
- </div>
47
  <div>
48
  <h3 class="text-2xl font-semibold mb-6 text-orange-500">Precision Thin Film Growth</h3>
49
  <p class="text-gray-600 text-lg mb-6">
@@ -118,8 +120,8 @@
118
  </div>
119
  </div>
120
  <div>
121
- <img src="http://static.photos/industry/640x360/23" alt="PVD System" class="rounded-2xl shadow-lg">
122
- </div>
123
  </div>
124
  </div>
125
  </section>
@@ -251,8 +253,9 @@
251
  <custom-footer></custom-footer>
252
  <script src="components/navbar.js"></script>
253
  <script src="components/footer.js"></script>
 
254
  <script src="script.js"></script>
255
- <script>
256
  feather.replace();
257
  </script>
258
  </body>
 
20
  </head>
21
  <body class="bg-white text-gray-800 font-poppins">
22
  <custom-navbar></custom-navbar>
 
23
  <!-- Products Header -->
24
+ <section class="py-20 bg-gradient-to-br from-orange-50 to-white relative">
25
+ <div class="absolute inset-0 bg-black/40">
26
+ <img src="https://images.unsplash.com/photo-1581094794324-84594653b0b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80" alt="Advanced Semiconductor Fab" class="w-full h-full object-cover">
27
+ </div>
28
+ <div class="relative z-20 text-center">
29
+ <h1 class="text-5xl md:text-6xl font-bold mb-6 text-gray-900">
30
  Our Products
31
  </h1>
32
  <p class="text-xl text-gray-600 max-w-3xl mx-auto">
 
44
  </div>
45
  <div class="grid md:grid-cols-2 gap-12 items-center">
46
  <div>
47
+ <img src="https://images.unsplash.com/photo-1581094794329-c8112cbf0d1c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Semiconductor Fab Cleanroom" class="rounded-2xl shadow-lg">
48
+ </div>
49
  <div>
50
  <h3 class="text-2xl font-semibold mb-6 text-orange-500">Precision Thin Film Growth</h3>
51
  <p class="text-gray-600 text-lg mb-6">
 
120
  </div>
121
  </div>
122
  <div>
123
+ <img src="https://images.unsplash.com/photo-1581094794325-84594653b0b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Semiconductor Manufacturing Equipment" class="rounded-2xl shadow-lg">
124
+ </div>
125
  </div>
126
  </div>
127
  </section>
 
253
  <custom-footer></custom-footer>
254
  <script src="components/navbar.js"></script>
255
  <script src="components/footer.js"></script>
256
+ <script src="components/image-gallery.js"></script>
257
  <script src="script.js"></script>
258
+ <script>
259
  feather.replace();
260
  </script>
261
  </body>