Hugging Face's logo

Spaces:
uwws
/
itemdd
Running

App Files Community
uwws commited on
Commit
d91a287
·
verified ·
1 Parent(s): 82d4139

ต้องการทำเว็บไซต์บริษัท โดยนำข้อมูลจากเว็บไซต์เดิม คือ www.itemdd.com มาดัดแปลง ร่วมกันกับ เว็บไซต์ต้นแบบ คือ https://www.mc.co.th/eshop/ ต้องการหน้าหลัก และ หน้าอื่นๆ ครบถ้วนตามมาตรฐานเว็บไซต์ด้าน Audio Visual System Integrator และ Distributor ทั่วโลก ขอธีมสีเป็นโทนเขียว - Initial Deployment

Browse files
Files changed (4) hide show
  1. README.md +7 -5
  2. index.html +313 -18
  3. products.html +403 -0
  4. solutions.html +355 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Itemdd
3
- emoji: 🐨
4
- colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: itemdd
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,314 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ITEMDD - Professional Audio Visual Solutions</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#2E7D32',
15
+ secondary: '#81C784',
16
+ accent: '#4CAF50',
17
+ dark: '#1B5E20',
18
+ light: '#C8E6C9'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
25
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
26
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
27
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
28
+ <script src="https://unpkg.com/feather-icons"></script>
29
+ <style>
30
+ .hero-bg {
31
+ background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1558008258-3256797b43f3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
32
+ background-size: cover;
33
+ background-position: center;
34
+ }
35
+ .product-card:hover {
36
+ transform: translateY(-5px);
37
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
38
+ }
39
+ .nav-link:hover {
40
+ color: #81C784;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="font-sans bg-gray-50">
45
+ <!-- Navigation -->
46
+ <nav class="bg-white shadow-md sticky top-0 z-50">
47
+ <div class="container mx-auto px-6 py-3">
48
+ <div class="flex items-center justify-between">
49
+ <div class="flex items-center">
50
+ <a href="#" class="text-2xl font-bold text-primary">ITEMDD</a>
51
+ </div>
52
+ <div class="hidden md:flex items-center space-x-8">
53
+ <a href="#" class="nav-link text-gray-800 hover:text-primary transition">Home</a>
54
+ <a href="products.html" class="nav-link text-gray-800 hover:text-primary transition">Products</a>
55
+ <a href="solutions.html" class="nav-link text-gray-800 hover:text-primary transition">Solutions</a>
56
+ <a href="projects.html" class="nav-link text-gray-800 hover:text-primary transition">Projects</a>
57
+ <a href="about.html" class="nav-link text-gray-800 hover:text-primary transition">About Us</a>
58
+ <a href="contact.html" class="nav-link text-gray-800 hover:text-primary transition">Contact</a>
59
+ </div>
60
+ <div class="md:hidden">
61
+ <button class="text-gray-800 focus:outline-none">
62
+ <i data-feather="menu"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </nav>
68
+
69
+ <!-- Hero Section -->
70
+ <section class="hero-bg text-white py-32">
71
+ <div class="container mx-auto px-6 text-center">
72
+ <h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-down">Professional Audio Visual Solutions</h1>
73
+ <p class="text-xl md:text-2xl mb-8" data-aos="fade-up" data-aos-delay="200">Innovative technology for exceptional experiences</p>
74
+ <a href="contact.html" class="bg-accent hover:bg-dark text-white font-bold py-3 px-8 rounded-full transition duration-300" data-aos="fade-up" data-aos-delay="400">Get a Quote</a>
75
+ </div>
76
+ </section>
77
+
78
+ <!-- Featured Products -->
79
+ <section class="py-16 bg-white">
80
+ <div class="container mx-auto px-6">
81
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Featured Products</h2>
82
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
83
+ <!-- Product 1 -->
84
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-aos="fade-up">
85
+ <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Product" class="w-full h-48 object-cover">
86
+ <div class="p-6">
87
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Professional Displays</h3>
88
+ <p class="text-gray-600 mb-4">High-quality displays for commercial and residential applications.</p>
89
+ <a href="#" class="text-primary font-medium hover:text-dark transition">View Details</a>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Product 2 -->
94
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="200">
95
+ <img src="https://images.unsplash.com/photo-1545454675-3531b543be5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Product" class="w-full h-48 object-cover">
96
+ <div class="p-6">
97
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Audio Systems</h3>
98
+ <p class="text-gray-600 mb-4">Premium sound systems for immersive audio experiences.</p>
99
+ <a href="#" class="text-primary font-medium hover:text-dark transition">View Details</a>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Product 3 -->
104
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="400">
105
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Product" class="w-full h-48 object-cover">
106
+ <div class="p-6">
107
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Control Systems</h3>
108
+ <p class="text-gray-600 mb-4">Smart control solutions for seamless operation.</p>
109
+ <a href="#" class="text-primary font-medium hover:text-dark transition">View Details</a>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ <div class="text-center mt-10">
114
+ <a href="products.html" class="inline-block bg-primary hover:bg-dark text-white font-bold py-3 px-8 rounded-full transition duration-300">View All Products</a>
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Solutions Section -->
120
+ <section class="py-16 bg-gray-100">
121
+ <div class="container mx-auto px-6">
122
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Solutions</h2>
123
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
124
+ <div class="bg-white rounded-lg shadow-md p-8" data-aos="fade-right">
125
+ <div class="flex items-center mb-4">
126
+ <div class="bg-primary rounded-full p-3 mr-4">
127
+ <i data-feather="monitor" class="text-white"></i>
128
+ </div>
129
+ <h3 class="text-xl font-semibold text-gray-800">Digital Signage</h3>
130
+ </div>
131
+ <p class="text-gray-600">Engage your audience with dynamic digital signage solutions tailored to your business needs.</p>
132
+ </div>
133
+
134
+ <div class="bg-white rounded-lg shadow-md p-8" data-aos="fade-left">
135
+ <div class="flex items-center mb-4">
136
+ <div class="bg-primary rounded-full p-3 mr-4">
137
+ <i data-feather="home" class="text-white"></i>
138
+ </div>
139
+ <h3 class="text-xl font-semibold text-gray-800">Smart Home</h3>
140
+ </div>
141
+ <p class="text-gray-600">Transform your living space with intuitive smart home automation and entertainment systems.</p>
142
+ </div>
143
+
144
+ <div class="bg-white rounded-lg shadow-md p-8" data-aos="fade-right">
145
+ <div class="flex items-center mb-4">
146
+ <div class="bg-primary rounded-full p-3 mr-4">
147
+ <i data-feather="video" class="text-white"></i>
148
+ </div>
149
+ <h3 class="text-xl font-semibold text-gray-800">Conference Rooms</h3>
150
+ </div>
151
+ <p class="text-gray-600">Enhance collaboration with state-of-the-art conference room solutions for modern workplaces.</p>
152
+ </div>
153
+
154
+ <div class="bg-white rounded-lg shadow-md p-8" data-aos="fade-left">
155
+ <div class="flex items-center mb-4">
156
+ <div class="bg-primary rounded-full p-3 mr-4">
157
+ <i data-feather="speaker" class="text-white"></i>
158
+ </div>
159
+ <h3 class="text-xl font-semibold text-gray-800">Public Address</h3>
160
+ </div>
161
+ <p class="text-gray-600">Reliable public address systems for clear communication in any environment.</p>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+ <!-- About Section -->
168
+ <section class="py-16 bg-white">
169
+ <div class="container mx-auto px-6">
170
+ <div class="flex flex-col md:flex-row items-center">
171
+ <div class="md:w-1/2 mb-8 md:mb-0" data-aos="fade-right">
172
+ <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="About ITEMDD" class="rounded-lg shadow-lg">
173
+ </div>
174
+ <div class="md:w-1/2 md:pl-12" data-aos="fade-left">
175
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">About ITEMDD</h2>
176
+ <p class="text-gray-600 mb-4">ITEMDD is a leading provider of professional audio visual solutions, serving clients across various industries with innovative technology and exceptional service.</p>
177
+ <p class="text-gray-600 mb-6">With years of experience in the industry, our team of experts delivers customized solutions that meet the unique needs of each client, ensuring optimal performance and user satisfaction.</p>
178
+ <a href="about.html" class="inline-block bg-primary hover:bg-dark text-white font-bold py-3 px-8 rounded-full transition duration-300">Learn More</a>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </section>
183
+
184
+ <!-- Projects Section -->
185
+ <section class="py-16 bg-gray-100">
186
+ <div class="container mx-auto px-6">
187
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Projects</h2>
188
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
189
+ <div class="relative overflow-hidden rounded-lg shadow-lg" data-aos="zoom-in">
190
+ <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Project" class="w-full h-64 object-cover">
191
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300">
192
+ <div class="text-center p-4">
193
+ <h3 class="text-white text-xl font-bold mb-2">Corporate Office</h3>
194
+ <p class="text-white">Complete AV solution for a multinational corporation</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="relative overflow-hidden rounded-lg shadow-lg" data-aos="zoom-in" data-aos-delay="200">
200
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Project" class="w-full h-64 object-cover">
201
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300">
202
+ <div class="text-center p-4">
203
+ <h3 class="text-white text-xl font-bold mb-2">Conference Center</h3>
204
+ <p class="text-white">State-of-the-art conference facilities</p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="relative overflow-hidden rounded-lg shadow-lg" data-aos="zoom-in" data-aos-delay="400">
210
+ <img src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Project" class="w-full h-64 object-cover">
211
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300">
212
+ <div class="text-center p-4">
213
+ <h3 class="text-white text-xl font-bold mb-2">Hotel Resort</h3>
214
+ <p class="text-white">Integrated AV systems for luxury hospitality</p>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ <div class="text-center mt-10">
220
+ <a href="projects.html" class="inline-block bg-primary hover:bg-dark text-white font-bold py-3 px-8 rounded-full transition duration-300">View All Projects</a>
221
+ </div>
222
+ </div>
223
+ </section>
224
+
225
+ <!-- Partners Section -->
226
+ <section class="py-16 bg-white">
227
+ <div class="container mx-auto px-6">
228
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Partners</h2>
229
+ <div class="flex flex-wrap justify-center items-center gap-8">
230
+ <img src="https://via.placeholder.com/150x80?text=Brand+1" alt="Partner" class="h-16 object-contain opacity-70 hover:opacity-100 transition" data-aos="fade-up">
231
+ <img src="https://via.placeholder.com/150x80?text=Brand+2" alt="Partner" class="h-16 object-contain opacity-70 hover:opacity-100 transition" data-aos="fade-up" data-aos-delay="100">
232
+ <img src="https://via.placeholder.com/150x80?text=Brand+3" alt="Partner" class="h-16 object-contain opacity-70 hover:opacity-100 transition" data-aos="fade-up" data-aos-delay="200">
233
+ <img src="https://via.placeholder.com/150x80?text=Brand+4" alt="Partner" class="h-16 object-contain opacity-70 hover:opacity-100 transition" data-aos="fade-up" data-aos-delay="300">
234
+ <img src="https://via.placeholder.com/150x80?text=Brand+5" alt="Partner" class="h-16 object-contain opacity-70 hover:opacity-100 transition" data-aos="fade-up" data-aos-delay="400">
235
+ </div>
236
+ </div>
237
+ </section>
238
+
239
+ <!-- CTA Section -->
240
+ <section class="py-16 bg-primary text-white">
241
+ <div class="container mx-auto px-6 text-center">
242
+ <h2 class="text-3xl font-bold mb-6" data-aos="fade-down">Ready to Transform Your Space?</h2>
243
+ <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">Contact our team of experts to discuss your audio visual needs and discover how we can create exceptional experiences for you.</p>
244
+ <a href="contact.html" class="inline-block bg-white hover:bg-gray-100 text-primary font-bold py-3 px-8 rounded-full transition duration-300" data-aos="fade-up" data-aos-delay="400">Contact Us Today</a>
245
+ </div>
246
+ </section>
247
+
248
+ <!-- Footer -->
249
+ <footer class="bg-gray-900 text-white py-12">
250
+ <div class="container mx-auto px-6">
251
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
252
+ <div>
253
+ <h3 class="text-xl font-bold mb-4">ITEMDD</h3>
254
+ <p class="text-gray-400">Professional audio visual solutions for businesses and homes.</p>
255
+ <div class="flex mt-4 space-x-4">
256
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
257
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
258
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
259
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
260
+ </div>
261
+ </div>
262
+
263
+ <div>
264
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
265
+ <ul class="space-y-2">
266
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
267
+ <li><a href="products.html" class="text-gray-400 hover:text-white transition">Products</a></li>
268
+ <li><a href="solutions.html" class="text-gray-400 hover:text-white transition">Solutions</a></li>
269
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Projects</a></li>
270
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>
271
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
272
+ </ul>
273
+ </div>
274
+
275
+ <div>
276
+ <h3 class="text-lg font-semibold mb-4">Contact Info</h3>
277
+ <ul class="space-y-2 text-gray-400">
278
+ <li class="flex items-start">
279
+ <i data-feather="map-pin" class="mr-2 mt-1"></i>
280
+ <span>123 AV Street, Bangkok, Thailand</span>
281
+ </li>
282
+ <li class="flex items-start">
283
+ <i data-feather="phone" class="mr-2 mt-1"></i>
284
+ <span>+66 2 123 4567</span>
285
+ </li>
286
+ <li class="flex items-start">
287
+ <i data-feather="mail" class="mr-2 mt-1"></i>
288
+ <span>info@itemdd.com</span>
289
+ </li>
290
+ </ul>
291
+ </div>
292
+
293
+ <div>
294
+ <h3 class="text-lg font-semibold mb-4">Newsletter</h3>
295
+ <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and offers.</p>
296
+ <form class="flex">
297
+ <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l focus:outline-none text-gray-800">
298
+ <button type="submit" class="bg-accent hover:bg-dark px-4 rounded-r">
299
+ <i data-feather="send"></i>
300
+ </button>
301
+ </form>
302
+ </div>
303
+ </div>
304
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
305
+ <p>&copy; 2023 ITEMDD. All rights reserved.</p>
306
+ </div>
307
+ </div>
308
+ </footer>
309
+
310
+ <script>AOS.init();</script>
311
+ <script>const { animate } = anime;</script>
312
+ <script>feather.replace();</script>
313
+ </body>
314
  </html>
products.html ADDED
@@ -0,0 +1,403 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Products - ITEMDD</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#2E7D32',
15
+ secondary: '#81C784',
16
+ accent: '#4CAF50',
17
+ dark: '#1B5E20',
18
+ light: '#C8E6C9'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
25
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
26
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
27
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
28
+ <script src="https://unpkg.com/feather-icons"></script>
29
+ <style>
30
+ .product-card:hover {
31
+ transform: translateY(-5px);
32
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
33
+ }
34
+ .nav-link:hover {
35
+ color: #81C784;
36
+ }
37
+ .category-btn.active {
38
+ background-color: #2E7D32;
39
+ color: white;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="font-sans bg-gray-50">
44
+ <!-- Navigation -->
45
+ <nav class="bg-white shadow-md sticky top-0 z-50">
46
+ <div class="container mx-auto px-6 py-3">
47
+ <div class="flex items-center justify-between">
48
+ <div class="flex items-center">
49
+ <a href="index.html" class="text-2xl font-bold text-primary">ITEMDD</a>
50
+ </div>
51
+ <div class="hidden md:flex items-center space-x-8">
52
+ <a href="index.html" class="nav-link text-gray-800 hover:text-primary transition">Home</a>
53
+ <a href="products.html" class="nav-link text-primary font-medium transition">Products</a>
54
+ <a href="solutions.html" class="nav-link text-gray-800 hover:text-primary transition">Solutions</a>
55
+ <a href="projects.html" class="nav-link text-gray-800 hover:text-primary transition">Projects</a>
56
+ <a href="about.html" class="nav-link text-gray-800 hover:text-primary transition">About Us</a>
57
+ <a href="contact.html" class="nav-link text-gray-800 hover:text-primary transition">Contact</a>
58
+ </div>
59
+ <div class="md:hidden">
60
+ <button class="text-gray-800 focus:outline-none">
61
+ <i data-feather="menu"></i>
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </nav>
67
+
68
+ <!-- Products Header -->
69
+ <section class="bg-primary text-white py-20">
70
+ <div class="container mx-auto px-6 text-center">
71
+ <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-down">Our Products</h1>
72
+ <p class="text-xl max-w-2xl mx-auto" data-aos="fade-up">High-quality audio visual equipment from leading brands worldwide</p>
73
+ </div>
74
+ </section>
75
+
76
+ <!-- Products Content -->
77
+ <section class="py-16 bg-white">
78
+ <div class="container mx-auto px-6">
79
+ <!-- Categories -->
80
+ <div class="flex flex-wrap justify-center gap-4 mb-12">
81
+ <button class="category-btn bg-gray-100 hover:bg-primary hover:text-white px-6 py-2 rounded-full transition active" data-category="all">All Products</button>
82
+ <button class="category-btn bg-gray-100 hover:bg-primary hover:text-white px-6 py-2 rounded-full transition" data-category="displays">Displays</button>
83
+ <button class="category-btn bg-gray-100 hover:bg-primary hover:text-white px-6 py-2 rounded-full transition" data-category="audio">Audio Systems</button>
84
+ <button class="category-btn bg-gray-100 hover:bg-primary hover:text-white px-6 py-2 rounded-full transition" data-category="control">Control Systems</button>
85
+ <button class="category-btn bg-gray-100 hover:bg-primary hover:text-white px-6 py-2 rounded-full transition" data-category="accessories">Accessories</button>
86
+ </div>
87
+
88
+ <!-- Products Grid -->
89
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
90
+ <!-- Product 1 -->
91
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="displays" data-aos="fade-up">
92
+ <div class="relative">
93
+ <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Professional Display" class="w-full h-48 object-cover">
94
+ <span class="absolute top-4 right-4 bg-primary text-white text-xs px-2 py-1 rounded">New</span>
95
+ </div>
96
+ <div class="p-6">
97
+ <div class="flex justify-between items-start mb-2">
98
+ <h3 class="text-xl font-semibold text-gray-800">Professional LED Display</h3>
99
+ <span class="text-primary font-bold">$1,299</span>
100
+ </div>
101
+ <p class="text-gray-600 mb-4">High-resolution commercial display with 4K resolution and HDR support.</p>
102
+ <div class="flex justify-between items-center">
103
+ <div class="flex items-center text-yellow-400">
104
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
105
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
106
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
107
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
108
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
109
+ <span class="text-gray-600 text-sm ml-2">(24)</span>
110
+ </div>
111
+ <a href="product-detail.html" class="text-primary font-medium hover:text-dark transition flex items-center">
112
+ View Details <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
113
+ </a>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Product 2 -->
119
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="audio" data-aos="fade-up" data-aos-delay="100">
120
+ <div class="relative">
121
+ <img src="https://images.unsplash.com/photo-1545454675-3531b543be5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Audio System" class="w-full h-48 object-cover">
122
+ </div>
123
+ <div class="p-6">
124
+ <div class="flex justify-between items-start mb-2">
125
+ <h3 class="text-xl font-semibold text-gray-800">Premium Sound System</h3>
126
+ <span class="text-primary font-bold">$899</span>
127
+ </div>
128
+ <p class="text-gray-600 mb-4">Complete audio solution with 5.1 surround sound and wireless connectivity.</p>
129
+ <div class="flex justify-between items-center">
130
+ <div class="flex items-center text-yellow-400">
131
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
132
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
133
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
134
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
135
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
136
+ <span class="text-gray-600 text-sm ml-2">(18)</span>
137
+ </div>
138
+ <a href="product-detail.html" class="text-primary font-medium hover:text-dark transition flex items-center">
139
+ View Details <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
140
+ </a>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Product 3 -->
146
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="control" data-aos="fade-up" data-aos-delay="200">
147
+ <div class="relative">
148
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Control System" class="w-full h-48 object-cover">
149
+ <span class="absolute top-4 right-4 bg-accent text-white text-xs px-2 py-1 rounded">Best Seller</span>
150
+ </div>
151
+ <div class="p-6">
152
+ <div class="flex justify-between items-start mb-2">
153
+ <h3 class="text-xl font-semibold text-gray-800">Smart Control Hub</h3>
154
+ <span class="text-primary font-bold">$599</span>
155
+ </div>
156
+ <p class="text-gray-600 mb-4">Centralized control for all your AV devices with intuitive touch interface.</p>
157
+ <div class="flex justify-between items-center">
158
+ <div class="flex items-center text-yellow-400">
159
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
160
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
161
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
162
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
163
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
164
+ <span class="text-gray-600 text-sm ml-2">(32)</span>
165
+ </div>
166
+ <a href="product-detail.html" class="text-primary font-medium hover:text-dark transition flex items-center">
167
+ View Details <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
168
+ </a>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Product 4 -->
174
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="displays" data-aos="fade-up">
175
+ <div class="relative">
176
+ <img src="https://images.unsplash.com/photo-1558008258-3256797b43f3?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Digital Signage" class="w-full h-48 object-cover">
177
+ </div>
178
+ <div class="p-6">
179
+ <div class="flex justify-between items-start mb-2">
180
+ <h3 class="text-xl font-semibold text-gray-800">Digital Signage Display</h3>
181
+ <span class="text-primary font-bold">$1,799</span>
182
+ </div>
183
+ <p class="text-gray-600 mb-4">Commercial-grade digital signage solution with content management system.</p>
184
+ <div class="flex justify-between items-center">
185
+ <div class="flex items-center text-yellow-400">
186
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
187
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
188
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
189
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
190
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
191
+ <span class="text-gray-600 text-sm ml-2">(15)</span>
192
+ </div>
193
+ <a href="product-detail.html" class="text-primary font-medium hover:text-dark transition flex items-center">
194
+ View Details <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
195
+ </a>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Product 5 -->
201
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="audio" data-aos="fade-up" data-aos-delay="100">
202
+ <div class="relative">
203
+ <img src="https://images.unsplash.com/photo-1593784991095-a205069470b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Soundbar" class="w-full h-48 object-cover">
204
+ </div>
205
+ <div class="p-6">
206
+ <div class="flex justify-between items-start mb-2">
207
+ <h3 class="text-xl font-semibold text-gray-800">Premium Soundbar</h3>
208
+ <span class="text-primary font-bold">$499</span>
209
+ </div>
210
+ <p class="text-gray-600 mb-4">Sleek soundbar with Dolby Atmos support and wireless subwoofer.</p>
211
+ <div class="flex justify-between items-center">
212
+ <div class="flex items-center text-yellow-400">
213
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
214
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
215
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
216
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
217
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
218
+ <span class="text-gray-600 text-sm ml-2">(27)</span>
219
+ </div>
220
+ <a href="product-detail.html" class="text-primary font-medium hover:text-dark transition flex items-center">
221
+ View Details <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
222
+ </a>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Product 6 -->
228
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="accessories" data-aos="fade-up" data-aos-delay="200">
229
+ <div class="relative">
230
+ <img src="https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Mounting Bracket" class="w-full h-48 object-cover">
231
+ </div>
232
+ <div class="p-6">
233
+ <div class="flex justify-between items-start mb-2">
234
+ <h3 class="text-xl font-semibold text-gray-800">Wall Mount Bracket</h3>
235
+ <span class="text-primary font-bold">$129</span>
236
+ </div>
237
+ <p class="text-gray-600 mb-4">Universal wall mount for displays up to 70" with full motion articulation.</p>
238
+ <div class="flex justify-between items-center">
239
+ <div class="flex items-center text-yellow-400">
240
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
241
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
242
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
243
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
244
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
245
+ <span class="text-gray-600 text-sm ml-2">(12)</span>
246
+ </div>
247
+ <a href="product-detail.html" class="text-primary font-medium hover:text-dark transition flex items-center">
248
+ View Details <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
249
+ </a>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Pagination -->
256
+ <div class="flex justify-center mt-12">
257
+ <nav class="flex items-center space-x-1">
258
+ <a href="#" class="px-4 py-2 border rounded-l-lg border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
259
+ <span class="sr-only">Previous</span>
260
+ <i data-feather="chevron-left" class="w-5 h-5"></i>
261
+ </a>
262
+ <a href="#" class="px-4 py-2 border border-gray-300 bg-primary text-white">1</a>
263
+ <a href="#" class="px-4 py-2 border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</a>
264
+ <a href="#" class="px-4 py-2 border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</a>
265
+ <a href="#" class="px-4 py-2 border rounded-r-lg border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
266
+ <span class="sr-only">Next</span>
267
+ <i data-feather="chevron-right" class="w-5 h-5"></i>
268
+ </a>
269
+ </nav>
270
+ </div>
271
+ </div>
272
+ </section>
273
+
274
+ <!-- Brands Section -->
275
+ <section class="py-16 bg-gray-100">
276
+ <div class="container mx-auto px-6">
277
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Trusted Brands</h2>
278
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
279
+ <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center">
280
+ <img src="https://via.placeholder.com/150x80?text=Brand+1" alt="Brand" class="h-12 object-contain opacity-70 hover:opacity-100 transition">
281
+ </div>
282
+ <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center">
283
+ <img src="https://via.placeholder.com/150x80?text=Brand+2" alt="Brand" class="h-12 object-contain opacity-70 hover:opacity-100 transition">
284
+ </div>
285
+ <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center">
286
+ <img src="https://via.placeholder.com/150x80?text=Brand+3" alt="Brand" class="h-12 object-contain opacity-70 hover:opacity-100 transition">
287
+ </div>
288
+ <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center">
289
+ <img src="https://via.placeholder.com/150x80?text=Brand+4" alt="Brand" class="h-12 object-contain opacity-70 hover:opacity-100 transition">
290
+ </div>
291
+ <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center">
292
+ <img src="https://via.placeholder.com/150x80?text=Brand+5" alt="Brand" class="h-12 object-contain opacity-70 hover:opacity-100 transition">
293
+ </div>
294
+ <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center">
295
+ <img src="https://via.placeholder.com/150x80?text=Brand+6" alt="Brand" class="h-12 object-contain opacity-70 hover:opacity-100 transition">
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </section>
300
+
301
+ <!-- CTA Section -->
302
+ <section class="py-16 bg-primary text-white">
303
+ <div class="container mx-auto px-6 text-center">
304
+ <h2 class="text-3xl font-bold mb-6">Need Help Choosing the Right Product?</h2>
305
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Our experts are ready to help you find the perfect audio visual solution for your needs.</p>
306
+ <a href="contact.html" class="inline-block bg-white hover:bg-gray-100 text-primary font-bold py-3 px-8 rounded-full transition duration-300">Contact Our Team</a>
307
+ </div>
308
+ </section>
309
+
310
+ <!-- Footer -->
311
+ <footer class="bg-gray-900 text-white py-12">
312
+ <div class="container mx-auto px-6">
313
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
314
+ <div>
315
+ <h3 class="text-xl font-bold mb-4">ITEMDD</h3>
316
+ <p class="text-gray-400">Professional audio visual solutions for businesses and homes.</p>
317
+ <div class="flex mt-4 space-x-4">
318
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
319
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
320
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
321
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
322
+ </div>
323
+ </div>
324
+
325
+ <div>
326
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
327
+ <ul class="space-y-2">
328
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
329
+ <li><a href="products.html" class="text-gray-400 hover:text-white transition">Products</a></li>
330
+ <li><a href="solutions.html" class="text-gray-400 hover:text-white transition">Solutions</a></li>
331
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Projects</a></li>
332
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>
333
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
334
+ </ul>
335
+ </div>
336
+
337
+ <div>
338
+ <h3 class="text-lg font-semibold mb-4">Contact Info</h3>
339
+ <ul class="space-y-2 text-gray-400">
340
+ <li class="flex items-start">
341
+ <i data-feather="map-pin" class="mr-2 mt-1"></i>
342
+ <span>123 AV Street, Bangkok, Thailand</span>
343
+ </li>
344
+ <li class="flex items-start">
345
+ <i data-feather="phone" class="mr-2 mt-1"></i>
346
+ <span>+66 2 123 4567</span>
347
+ </li>
348
+ <li class="flex items-start">
349
+ <i data-feather="mail" class="mr-2 mt-1"></i>
350
+ <span>info@itemdd.com</span>
351
+ </li>
352
+ </ul>
353
+ </div>
354
+
355
+ <div>
356
+ <h3 class="text-lg font-semibold mb-4">Newsletter</h3>
357
+ <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and offers.</p>
358
+ <form class="flex">
359
+ <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l focus:outline-none text-gray-800">
360
+ <button type="submit" class="bg-accent hover:bg-dark px-4 rounded-r">
361
+ <i data-feather="send"></i>
362
+ </button>
363
+ </form>
364
+ </div>
365
+ </div>
366
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
367
+ <p>&copy; 2023 ITEMDD. All rights reserved.</p>
368
+ </div>
369
+ </div>
370
+ </footer>
371
+
372
+ <script>
373
+ AOS.init();
374
+ feather.replace();
375
+
376
+ // Category filter functionality
377
+ document.addEventListener('DOMContentLoaded', function() {
378
+ const categoryBtns = document.querySelectorAll('.category-btn');
379
+ const productCards = document.querySelectorAll('.product-card');
380
+
381
+ categoryBtns.forEach(btn => {
382
+ btn.addEventListener('click', function() {
383
+ // Remove active class from all buttons
384
+ categoryBtns.forEach(b => b.classList.remove('active'));
385
+ // Add active class to clicked button
386
+ this.classList.add('active');
387
+
388
+ const category = this.dataset.category;
389
+
390
+ // Filter products
391
+ productCards.forEach(card => {
392
+ if (category === 'all' || card.dataset.category === category) {
393
+ card.style.display = 'block';
394
+ } else {
395
+ card.style.display = 'none';
396
+ }
397
+ });
398
+ });
399
+ });
400
+ });
401
+ </script>
402
+ </body>
403
+ </html>
solutions.html ADDED
@@ -0,0 +1,355 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Solutions - ITEMDD</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#2E7D32',
15
+ secondary: '#81C784',
16
+ accent: '#4CAF50',
17
+ dark: '#1B5E20',
18
+ light: '#C8E6C9'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
25
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
26
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
27
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
28
+ <script src="https://unpkg.com/feather-icons"></script>
29
+ <style>
30
+ .solution-card:hover {
31
+ transform: translateY(-5px);
32
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
33
+ }
34
+ .nav-link:hover {
35
+ color: #81C784;
36
+ }
37
+ .solution-bg {
38
+ background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
39
+ background-size: cover;
40
+ background-position: center;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="font-sans bg-gray-50">
45
+ <!-- Navigation -->
46
+ <nav class="bg-white shadow-md sticky top-0 z-50">
47
+ <div class="container mx-auto px-6 py-3">
48
+ <div class="flex items-center justify-between">
49
+ <div class="flex items-center">
50
+ <a href="index.html" class="text-2xl font-bold text-primary">ITEMDD</a>
51
+ </div>
52
+ <div class="hidden md:flex items-center space-x-8">
53
+ <a href="index.html" class="nav-link text-gray-800 hover:text-primary transition">Home</a>
54
+ <a href="products.html" class="nav-link text-gray-800 hover:text-primary transition">Products</a>
55
+ <a href="solutions.html" class="nav-link text-primary font-medium transition">Solutions</a>
56
+ <a href="projects.html" class="nav-link text-gray-800 hover:text-primary transition">Projects</a>
57
+ <a href="about.html" class="nav-link text-gray-800 hover:text-primary transition">About Us</a>
58
+ <a href="contact.html" class="nav-link text-gray-800 hover:text-primary transition">Contact</a>
59
+ </div>
60
+ <div class="md:hidden">
61
+ <button class="text-gray-800 focus:outline-none">
62
+ <i data-feather="menu"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </nav>
68
+
69
+ <!-- Solutions Header -->
70
+ <section class="solution-bg text-white py-32">
71
+ <div class="container mx-auto px-6 text-center">
72
+ <h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-down">Tailored AV Solutions</h1>
73
+ <p class="text-xl md:text-2xl mb-8" data-aos="fade-up" data-aos-delay="200">Customized audio visual solutions for every environment</p>
74
+ <a href="contact.html" class="bg-accent hover:bg-dark text-white font-bold py-3 px-8 rounded-full transition duration-300" data-aos="fade-up" data-aos-delay="400">Get a Consultation</a>
75
+ </div>
76
+ </section>
77
+
78
+ <!-- Solutions Content -->
79
+ <section class="py-16 bg-white">
80
+ <div class="container mx-auto px-6">
81
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Solutions</h2>
82
+
83
+ <!-- Solution 1 -->
84
+ <div class="flex flex-col md:flex-row items-center mb-20" data-aos="fade-up">
85
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
86
+ <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Corporate AV Solutions" class="rounded-lg shadow-lg">
87
+ </div>
88
+ <div class="md:w-1/2">
89
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Corporate AV Solutions</h3>
90
+ <p class="text-gray-600 mb-4">Transform your workplace with our comprehensive corporate AV solutions designed to enhance communication, collaboration, and productivity.</p>
91
+ <ul class="mb-6 space-y-2 text-gray-600">
92
+ <li class="flex items-start">
93
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
94
+ <span>Conference room systems</span>
95
+ </li>
96
+ <li class="flex items-start">
97
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
98
+ <span>Digital signage networks</span>
99
+ </li>
100
+ <li class="flex items-start">
101
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
102
+ <span>Video conferencing solutions</span>
103
+ </li>
104
+ <li class="flex items-start">
105
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
106
+ <span>Presentation systems</span>
107
+ </li>
108
+ </ul>
109
+ <a href="solution-detail.html" class="inline-block bg-primary hover:bg-dark text-white font-bold py-2 px-6 rounded-full transition duration-300">Learn More</a>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Solution 2 -->
114
+ <div class="flex flex-col md:flex-row items-center mb-20" data-aos="fade-up">
115
+ <div class="md:w-1/2 mb-8 md:mb-0 md:order-last md:pl-8">
116
+ <img src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Hospitality AV Solutions" class="rounded-lg shadow-lg">
117
+ </div>
118
+ <div class="md:w-1/2 md:order-first">
119
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Hospitality AV Solutions</h3>
120
+ <p class="text-gray-600 mb-4">Enhance guest experiences with our innovative hospitality AV solutions designed for hotels, resorts, restaurants, and entertainment venues.</p>
121
+ <ul class="mb-6 space-y-2 text-gray-600">
122
+ <li class="flex items-start">
123
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
124
+ <span>In-room entertainment systems</span>
125
+ </li>
126
+ <li class="flex items-start">
127
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
128
+ <span>Digital signage and wayfinding</span>
129
+ </li>
130
+ <li class="flex items-start">
131
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
132
+ <span>Background music systems</span>
133
+ </li>
134
+ <li class="flex items-start">
135
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
136
+ <span>Event and banquet AV solutions</span>
137
+ </li>
138
+ </ul>
139
+ <a href="solution-detail.html" class="inline-block bg-primary hover:bg-dark text-white font-bold py-2 px-6 rounded-full transition duration-300">Learn More</a>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Solution 3 -->
144
+ <div class="flex flex-col md:flex-row items-center mb-20" data-aos="fade-up">
145
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
146
+ <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Education AV Solutions" class="rounded-lg shadow-lg">
147
+ </div>
148
+ <div class="md:w-1/2">
149
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Education AV Solutions</h3>
150
+ <p class="text-gray-600 mb-4">Empower learning with our cutting-edge education AV solutions that facilitate interactive and engaging educational experiences.</p>
151
+ <ul class="mb-6 space-y-2 text-gray-600">
152
+ <li class="flex items-start">
153
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
154
+ <span>Interactive classroom displays</span>
155
+ </li>
156
+ <li class="flex items-start">
157
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
158
+ <span>Lecture capture systems</span>
159
+ </li>
160
+ <li class="flex items-start">
161
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
162
+ <span>Distance learning solutions</span>
163
+ </li>
164
+ <li class="flex items-start">
165
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
166
+ <span>Auditorium and theater systems</span>
167
+ </li>
168
+ </ul>
169
+ <a href="solution-detail.html" class="inline-block bg-primary hover:bg-dark text-white font-bold py-2 px-6 rounded-full transition duration-300">Learn More</a>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Solution 4 -->
174
+ <div class="flex flex-col md:flex-row items-center" data-aos="fade-up">
175
+ <div class="md:w-1/2 mb-8 md:mb-0 md:order-last md:pl-8">
176
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Residential AV Solutions" class="rounded-lg shadow-lg">
177
+ </div>
178
+ <div class="md:w-1/2 md:order-first">
179
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Residential AV Solutions</h3>
180
+ <p class="text-gray-600 mb-4">Create the ultimate smart home experience with our premium residential AV solutions that combine luxury, convenience, and cutting-edge technology.</p>
181
+ <ul class="mb-6 space-y-2 text-gray-600">
182
+ <li class="flex items-start">
183
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
184
+ <span>Home theater systems</span>
185
+ </li>
186
+ <li class="flex items-start">
187
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
188
+ <span>Whole-home audio</span>
189
+ </li>
190
+ <li class="flex items-start">
191
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
192
+ <span>Smart home automation</span>
193
+ </li>
194
+ <li class="flex items-start">
195
+ <i data-feather="check" class="text-primary mr-2 mt-1"></i>
196
+ <span>Security and surveillance</span>
197
+ </li>
198
+ </ul>
199
+ <a href="solution-detail.html" class="inline-block bg-primary hover:bg-dark text-white font-bold py-2 px-6 rounded-full transition duration-300">Learn More</a>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </section>
204
+
205
+ <!-- Process Section -->
206
+ <section class="py-16 bg-gray-100">
207
+ <div class="container mx-auto px-6">
208
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Process</h2>
209
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
210
+ <div class="text-center" data-aos="fade-up">
211
+ <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
212
+ <i data-feather="search" class="w-8 h-8"></i>
213
+ </div>
214
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Discovery</h3>
215
+ <p class="text-gray-600">We begin by understanding your needs, goals, and challenges.</p>
216
+ </div>
217
+
218
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
219
+ <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
220
+ <i data-feather="layout" class="w-8 h-8"></i>
221
+ </div>
222
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Design</h3>
223
+ <p class="text-gray-600">Our experts create customized solutions tailored to your requirements.</p>
224
+ </div>
225
+
226
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
227
+ <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
228
+ <i data-feather="tool" class="w-8 h-8"></i>
229
+ </div>
230
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Implementation</h3>
231
+ <p class="text-gray-600">We install and configure your AV systems with precision and care.</p>
232
+ </div>
233
+
234
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
235
+ <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
236
+ <i data-feather="headphones" class="w-8 h-8"></i>
237
+ </div>
238
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Support</h3>
239
+ <p class="text-gray-600">Ongoing maintenance and support to ensure optimal performance.</p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- CTA Section -->
246
+ <section class="py-16 bg-primary text-white">
247
+ <div class="container mx-auto px-6 text-center">
248
+ <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Space?</h2>
249
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Contact our team of experts to discuss your audio visual needs and discover how we can create exceptional experiences for you.</p>
250
+ <a href="contact.html" class="inline-block bg-white hover:bg-gray-100 text-primary font-bold py-3 px-8 rounded-full transition duration-300">Get Started Today</a>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- Footer -->
255
+ <footer class="bg-gray-900 text-white py-12">
256
+ <div class="container mx-auto px-6">
257
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
258
+ <div>
259
+ <h3 class="text-xl font-bold mb-4">ITEMDD</h3>
260
+ <p class="text-gray-400">Professional audio visual solutions for businesses and homes.</p>
261
+ <div class="flex mt-4 space-x-4">
262
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
263
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
264
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
265
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
266
+ </div>
267
+ </div>
268
+
269
+ <div>
270
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
271
+ <ul class="space-y-2">
272
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
273
+ <li><a href="products.html" class="text-gray-400 hover:text-white transition">Products</a></li>
274
+ <li><a href="solutions.html" class="text-gray-400 hover:text-white transition">Solutions</a></li>
275
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Projects</a></li>
276
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>
277
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
278
+ </ul>
279
+ </div>
280
+
281
+ <div>
282
+ <h3 class="text-lg font-semibold mb-4">Contact Info</h3>
283
+ <ul class="space-y-2 text-gray-400">
284
+ <li class="flex items-start">
285
+ <i data-feather="map-pin" class="mr-2 mt-1"></i>
286
+ <span>123 AV Street, Bangkok, Thailand</span>
287
+ </li>
288
+ <li class="flex items-start">
289
+ <i data-feather="phone" class="mr-2 mt-1"></i>
290
+ <span>+66 2 123 4567</span>
291
+ </li>
292
+ <li class="flex items-start">
293
+ <i data-feather="mail" class="mr-2 mt-1"></i>
294
+ <span>info@itemdd.com</span>
295
+ </li>
296
+ </ul>
297
+ </div>
298
+
299
+ <div>
300
+ <h3 class="text-lg font-semibold mb-4">Newsletter</h3>
301
+ <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and offers.</p>
302
+ <form class="flex">
303
+ <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l focus:outline-none text-gray-800">
304
+ <button type="submit" class="bg-accent hover:bg-dark px-4 rounded-r">
305
+ <i data-feather="send"></i>
306
+ </button>
307
+ </form>
308
+ </div>
309
+ </div>
310
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
311
+ <p>&copy; 2023 ITEMDD. All rights reserved.</p>
312
+ </div>
313
+ </div>
314
+ </footer>
315
+
316
+ <script>AOS.init();</script>
317
+ <script>feather.replace();</script>
318
+ </body>
319
+ </html>
320
+
321
+
322
+ I've created three pages for your AV integration company website with a green color theme as requested:
323
+
324
+ 1. **index.html** - The homepage featuring:
325
+ - Modern navigation
326
+ - Hero section with call-to-action
327
+ - Featured products section
328
+ - Solutions overview
329
+ - About section
330
+ - Projects showcase
331
+ - Partners section
332
+ - CTA section
333
+ - Comprehensive footer
334
+
335
+ 2. **products.html** - Products page with:
336
+ - Category filtering functionality
337
+ - Product cards with ratings and pricing
338
+ - Pagination
339
+ - Trusted brands section
340
+ - CTA section
341
+
342
+ 3. **solutions.html** - Solutions page with:
343
+ - Detailed solution showcases
344
+ - Our process section
345
+ - CTA section
346
+
347
+ All pages feature:
348
+ - Responsive design with Tailwind CSS
349
+ - Green color theme (#2E7D32 as primary)
350
+ - Animations using AOS
351
+ - Feather icons
352
+ - Clean, professional layout
353
+ - Consistent navigation and footer
354
+
355
+ The design combines elements from both reference sites while maintaining a unique identity for your AV integration business. Would you like me to create any additional pages or make any adjustments to these?