Template HTML Free : Bisnis Laundry
gudanginformatika
102 x views • 1 year ago
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PureLaundry | Layanan Laundry Premium</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.hero-bg {
background-color: #f0f9ff;
background-image: linear-gradient(to bottom, #f0f9ff 0%, #e6f4ff 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.image-container {
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
}
.whatsapp-widget {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 100;
transition: all 0.3s;
}
.whatsapp-widget:hover {
transform: scale(1.1);
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-tshirt text-blue-500 text-2xl mr-2"></i>
<h1 class="text-xl font-semibold text-gray-800">Pure<span class="text-blue-500">Laundry</span></h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#home" class="text-blue-500 font-medium">Beranda</a>
<a href="#services" class="text-gray-600 hover:text-blue-500 transition">Layanan</a>
<a href="#pricing" class="text-gray-600 hover:text-blue-500 transition">Harga</a>
<a href="#contact" class="text-gray-600 hover:text-blue-500 transition">Kontak</a>
</nav>
<div class="flex items-center space-x-4">
<button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition">
Pesan Sekarang
</button>
<button id="mobile-menu-button" class="md:hidden text-gray-600">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
<div class="container mx-auto px-6 py-3 flex flex-col space-y-3">
<a href="#home" class="text-blue-500 font-medium py-2 border-b border-gray-100">Beranda</a>
<a href="#services" class="text-gray-600 py-2 border-b border-gray-100">Layanan</a>
<a href="#pricing" class="text-gray-600 py-2 border-b border-gray-100">Harga</a>
<a href="#contact" class="text-gray-600 py-2">Kontak</a>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero-bg py-20">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Layanan Laundry Profesional</h1>
<p class="text-lg text-gray-600 mb-8">Kami merawat pakaian Anda dengan standar kebersihan dan perawatan tertinggi. Cepat, andal, dan ramah lingkungan.</p>
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md font-medium transition">
Jadwalkan Penjemputan
</button>
<button class="border border-blue-500 text-blue-500 px-6 py-3 rounded-md font-medium hover:bg-blue-50 transition">
Pelajari Lebih Lanjut
</button>
</div>
</div>
<div class="md:w-1/2 md:pl-10">
<div class="image-container bg-white rounded-xl p-2">
<img src="https://images.unsplash.com/photo-1600132806608-231446b2e7af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
alt="Layanan laundry profesional"
class="rounded-lg w-full h-auto object-cover">
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Layanan Kami</h2>
<p class="text-gray-600 max-w-xl mx-auto">Layanan kebersihan berkualitas yang disesuaikan dengan kebutuhan Anda</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="bg-gray-50 rounded-lg p-6 card-hover transition duration-300 border border-gray-100">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-tshirt text-blue-500 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-3 text-center">Cuci & Lipat</h3>
<p class="text-gray-600 text-center mb-4">Pembersihan profesional dan pelipatan pakaian sehari-hari Anda.</p>
<ul class="text-gray-600 space-y-2 text-sm">
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Layanan hari yang sama</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Deterjen ramah lingkungan</span>
</li>
</ul>
</div>
<!-- Service 2 -->
<div class="bg-gray-50 rounded-lg p-6 card-hover transition duration-300 border border-gray-100">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-iron text-blue-500 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-3 text-center">Dry Cleaning</h3>
<p class="text-gray-600 text-center mb-4">Perawatan khusus untuk kain dan pakaian yang halus.</p>
<ul class="text-gray-600 space-y-2 text-sm">
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Penghilang noda ahli</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Gaun pengantin & setelan</span>
</li>
</ul>
</div>
<!-- Service 3 -->
<div class="bg-gray-50 rounded-lg p-6 card-hover transition duration-300 border border-gray-100">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-home text-blue-500 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-3 text-center">Textile Rumah</h3>
<p class="text-gray-600 text-center mb-4">Pembersihan profesional untuk seprai dan kain rumah.</p>
<ul class="text-gray-600 space-y-2 text-sm">
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Bed cover & selimut</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Gorden & tirai</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Harga Transparan</h2>
<p class="text-gray-600 max-w-xl mx-auto">Harga sederhana untuk semua kebutuhan laundry Anda</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
<!-- Basic Plan -->
<div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
<h3 class="text-lg font-semibold text-gray-800 mb-2">Cuci Dasar</h3>
<div class="mb-4">
<span class="text-2xl font-bold text-blue-500">Rp50.000</span>
<span class="text-gray-500">/karung</span>
</div>
<ul class="text-gray-600 space-y-2 text-sm mb-6">
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Maksimal 7 kg</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Deterjen standar</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times mr-2"></i>
<span>Tidak termasuk perawatan noda</span>
</li>
</ul>
<button class="w-full border border-blue-500 text-blue-500 px-4 py-2 rounded-md hover:bg-blue-50 transition">
Pilih
</button>
</div>
<!-- Popular Plan -->
<div class="bg-white rounded-lg shadow-md p-6 border border-blue-200 relative">
<div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
POPULER
</div>
<h3 class="text-lg font-semibold text-gray-800 mb-2">Perawatan Premium</h3>
<div class="mb-4">
<span class="text-2xl font-bold text-blue-500">Rp75.000</span>
<span class="text-gray-500">/karung</span>
</div>
<ul class="text-gray-600 space-y-2 text-sm mb-6">
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Maksimal 7 kg</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Deterjen premium</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Perawatan noda dasar</span>
</li>
</ul>
<button class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition">
Pilih
</button>
</div>
<!-- Deluxe Plan -->
<div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
<h3 class="text-lg font-semibold text-gray-800 mb-2">Layanan Deluxe</h3>
<div class="mb-4">
<span class="text-2xl font-bold text-blue-500">Rp120.000</span>
<span class="text-gray-500">/karung</span>
</div>
<ul class="text-gray-600 space-y-2 text-sm mb-6">
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Maksimal 7 kg</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Deterjen hypoallergenic</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-blue-500 mr-2"></i>
<span>Perawatan noda lanjutan</span>
</li>
</ul>
<button class="w-full border border-blue-500 text-blue-500 px-4 py-2 rounded-md hover:bg-blue-50 transition">
Pilih
</button>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Hubungi Kami</h2>
<p class="text-gray-600 max-w-xl mx-auto">Ada pertanyaan? Hubungi tim kami</p>
</div>
<div class="max-w-4xl mx-auto bg-gray-50 rounded-xl p-8 shadow-sm">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold text-gray-800 mb-4">Informasi Kontak</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt text-blue-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">Alamat</h4>
<p class="text-gray-600">Jl. Sudirman No. 123, Jakarta Selatan 12190</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-phone-alt text-blue-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">Telepon</h4>
<p class="text-gray-600">(021) 1234-5678</p>
<p class="text-gray-600">0812-3456-7890</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-envelope text-blue-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">Email</h4>
<p class="text-gray-600">[email protected]</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-clock text-blue-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">Jam Operasional</h4>
<p class="text-gray-600">Senin - Sabtu: 08.00 - 20.00 WIB</p>
<p class="text-gray-600">Minggu: 10.00 - 16.00 WIB</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-800 mb-4">Kirim Pesan</h3>
<form class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Nomor Telepon</label>
<input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Pesan</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
</div>
<button type="submit" class="w-full bg-blue-500 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-600 transition">
Kirim Pesan
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- WhatsApp Widget -->
<a href="https://wa.me/6281234567890" target="_blank" class="whatsapp-widget">
<div class="bg-green-500 text-white p-4 rounded-full shadow-lg">
<i class="fab fa-whatsapp text-3xl"></i>
</div>
</a>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<i class="fas fa-tshirt text-blue-400 text-2xl mr-2"></i>
<h3 class="text-xl font-semibold">Pure<span class="text-blue-400">Laundry</span></h3>
</div>
<p class="text-gray-400 mb-4">Layanan laundry profesional dengan standar kebersihan dan kualitas tertinggi.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-twitter"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Tautan Cepat</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition">Beranda</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white transition">Layanan</a></li>
<li><a href="#pricing" class="text-gray-400 hover:text-white transition">Harga</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition">Kontak</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Layanan</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Cuci & Lipat</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Dry Cleaning</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Textile Rumah</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Penjemputan Gratis</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Berlangganan</h4>
<p class="text-gray-400 mb-4">Dapatkan promo dan penawaran khusus langsung ke email Anda.</p>
<div class="flex">
<input type="email" placeholder="Email Anda" class="px-4 py-2 rounded-l-md focus:outline-none text-gray-800 w-full">
<button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-r-md transition">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
<p>© 2023 PureLaundry. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when clicking on a link
const mobileMenuLinks = mobileMenu.querySelectorAll('a');
mobileMenuLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>
