Hugging Face's logo

Spaces:
uwws
/
itemdd
Running

App Files Community
itemdd / index.html
uwws's picture
uwws
ต้องการทำเว็บไซต์บริษัท โดยนำข้อมูลจากเว็บไซต์เดิม คือ www.itemdd.com มาดัดแปลง ร่วมกันกับ เว็บไซต์ต้นแบบ คือ https://www.mc.co.th/eshop/ ต้องการหน้าหลัก และ หน้าอื่นๆ ครบถ้วนตามมาตรฐานเว็บไซต์ด้าน Audio Visual System Integrator และ Distributor ทั่วโลก ขอธีมสีเป็นโทนเขียว - Initial Deployment
d91a287 verified
raw
history blame contribute delete
19.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ITEMDD - Professional Audio Visual Solutions</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2E7D32',
secondary: '#81C784',
accent: '#4CAF50',
dark: '#1B5E20',
light: '#C8E6C9'
}
}
}
}
</script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.hero-bg {
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');
background-size: cover;
background-position: center;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.nav-link:hover {
color: #81C784;
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="#" class="text-2xl font-bold text-primary">ITEMDD</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="nav-link text-gray-800 hover:text-primary transition">Home</a>
<a href="products.html" class="nav-link text-gray-800 hover:text-primary transition">Products</a>
<a href="solutions.html" class="nav-link text-gray-800 hover:text-primary transition">Solutions</a>
<a href="projects.html" class="nav-link text-gray-800 hover:text-primary transition">Projects</a>
<a href="about.html" class="nav-link text-gray-800 hover:text-primary transition">About Us</a>
<a href="contact.html" class="nav-link text-gray-800 hover:text-primary transition">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-800 focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-bg text-white py-32">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-down">Professional Audio Visual Solutions</h1>
<p class="text-xl md:text-2xl mb-8" data-aos="fade-up" data-aos-delay="200">Innovative technology for exceptional experiences</p>
<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>
</div>
</section>
<!-- Featured Products -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Featured Products</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Product 1 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-aos="fade-up">
<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">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-2">Professional Displays</h3>
<p class="text-gray-600 mb-4">High-quality displays for commercial and residential applications.</p>
<a href="#" class="text-primary font-medium hover:text-dark transition">View Details</a>
</div>
</div>
<!-- Product 2 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="200">
<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">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-2">Audio Systems</h3>
<p class="text-gray-600 mb-4">Premium sound systems for immersive audio experiences.</p>
<a href="#" class="text-primary font-medium hover:text-dark transition">View Details</a>
</div>
</div>
<!-- Product 3 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="400">
<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">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-2">Control Systems</h3>
<p class="text-gray-600 mb-4">Smart control solutions for seamless operation.</p>
<a href="#" class="text-primary font-medium hover:text-dark transition">View Details</a>
</div>
</div>
</div>
<div class="text-center mt-10">
<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>
</div>
</div>
</section>
<!-- Solutions Section -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Solutions</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-lg shadow-md p-8" data-aos="fade-right">
<div class="flex items-center mb-4">
<div class="bg-primary rounded-full p-3 mr-4">
<i data-feather="monitor" class="text-white"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">Digital Signage</h3>
</div>
<p class="text-gray-600">Engage your audience with dynamic digital signage solutions tailored to your business needs.</p>
</div>
<div class="bg-white rounded-lg shadow-md p-8" data-aos="fade-left">
<div class="flex items-center mb-4">
<div class="bg-primary rounded-full p-3 mr-4">
<i data-feather="home" class="text-white"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">Smart Home</h3>
</div>
<p class="text-gray-600">Transform your living space with intuitive smart home automation and entertainment systems.</p>
</div>
<div class="bg-white rounded-lg shadow-md p-8" data-aos="fade-right">
<div class="flex items-center mb-4">
<div class="bg-primary rounded-full p-3 mr-4">
<i data-feather="video" class="text-white"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">Conference Rooms</h3>
</div>
<p class="text-gray-600">Enhance collaboration with state-of-the-art conference room solutions for modern workplaces.</p>
</div>
<div class="bg-white rounded-lg shadow-md p-8" data-aos="fade-left">
<div class="flex items-center mb-4">
<div class="bg-primary rounded-full p-3 mr-4">
<i data-feather="speaker" class="text-white"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">Public Address</h3>
</div>
<p class="text-gray-600">Reliable public address systems for clear communication in any environment.</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0" data-aos="fade-right">
<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">
</div>
<div class="md:w-1/2 md:pl-12" data-aos="fade-left">
<h2 class="text-3xl font-bold text-gray-800 mb-6">About ITEMDD</h2>
<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>
<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>
<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>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="relative overflow-hidden rounded-lg shadow-lg" data-aos="zoom-in">
<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">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300">
<div class="text-center p-4">
<h3 class="text-white text-xl font-bold mb-2">Corporate Office</h3>
<p class="text-white">Complete AV solution for a multinational corporation</p>
</div>
</div>
</div>
<div class="relative overflow-hidden rounded-lg shadow-lg" data-aos="zoom-in" data-aos-delay="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">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300">
<div class="text-center p-4">
<h3 class="text-white text-xl font-bold mb-2">Conference Center</h3>
<p class="text-white">State-of-the-art conference facilities</p>
</div>
</div>
</div>
<div class="relative overflow-hidden rounded-lg shadow-lg" data-aos="zoom-in" data-aos-delay="400">
<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">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300">
<div class="text-center p-4">
<h3 class="text-white text-xl font-bold mb-2">Hotel Resort</h3>
<p class="text-white">Integrated AV systems for luxury hospitality</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<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>
</div>
</div>
</section>
<!-- Partners Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Partners</h2>
<div class="flex flex-wrap justify-center items-center gap-8">
<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">
<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">
<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">
<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">
<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">
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-primary text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-6" data-aos="fade-down">Ready to Transform Your Space?</h2>
<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>
<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>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">ITEMDD</h3>
<p class="text-gray-400">Professional audio visual solutions for businesses and homes.</p>
<div class="flex mt-4 space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
<li><a href="products.html" class="text-gray-400 hover:text-white transition">Products</a></li>
<li><a href="solutions.html" class="text-gray-400 hover:text-white transition">Solutions</a></li>
<li><a href="projects.html" class="text-gray-400 hover:text-white transition">Projects</a></li>
<li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>
<li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Contact Info</h3>
<ul class="space-y-2 text-gray-400">
<li class="flex items-start">
<i data-feather="map-pin" class="mr-2 mt-1"></i>
<span>123 AV Street, Bangkok, Thailand</span>
</li>
<li class="flex items-start">
<i data-feather="phone" class="mr-2 mt-1"></i>
<span>+66 2 123 4567</span>
</li>
<li class="flex items-start">
<i data-feather="mail" class="mr-2 mt-1"></i>
<span>info@itemdd.com</span>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Newsletter</h3>
<p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and offers.</p>
<form class="flex">
<input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l focus:outline-none text-gray-800">
<button type="submit" class="bg-accent hover:bg-dark px-4 rounded-r">
<i data-feather="send"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2023 ITEMDD. All rights reserved.</p>
</div>
</div>
</footer>
<script>AOS.init();</script>
<script>const { animate } = anime;</script>
<script>feather.replace();</script>
</body>
</html>