<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
html {
scroll-behavior: smooth;
}
/* Custom styles for sections to account for fixed navbar */
section {
padding-top: 80px;
padding-bottom: 80px;
}
</style>
</head>
<body class="font-sans antialiased bg-gray-50 text-gray-800">
<nav class="fixed top-0 left-0 w-full bg-white shadow-md z-50 py-4">
<div class="container mx-auto px-4 flex justify-between items-center">
<a href="#" class="text-2xl font-bold text-blue-600">Logo Anda</a>
<div class="hidden md:flex space-x-6">
<a href="#hero" class="text-gray-600 hover:text-blue-600">Beranda</a>
<a href="#about" class="text-gray-600 hover:text-blue-600">Tentang Kami</a>
<a href="#clients" class="text-gray-600 hover:text-blue-600">Klien</a>
<a href="#services" class="text-gray-600 hover:text-blue-600">Layanan</a>
<a href="#testimonials" class="text-gray-600 hover:text-blue-600">Testimoni</a>
<a href="#articles" class="text-gray-600 hover:text-blue-600">Artikel</a>
<a href="#contact" class="text-gray-600 hover:text-blue-600">Kontak</a>
</div>
<button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-white px-4 pt-2 pb-4 space-y-1">
<a href="#hero" class="block text-gray-600 hover:text-blue-600 py-2">Beranda</a>
<a href="#about" class="block text-gray-600 hover:text-blue-600 py-2">Tentang Kami</a>
<a href="#clients" class="block text-gray-600 hover:text-blue-600 py-2">Klien</a>
<a href="#services" class="block text-gray-600 hover:text-blue-600 py-2">Layanan</a>
<a href="#testimonials" class="block text-gray-600 hover:text-blue-600 py-2">Testimoni</a>
<a href="#articles" class="block text-gray-600 hover:text-blue-600 py-2">Artikel</a>
<a href="#contact" class="block text-gray-600 hover:text-blue-600 py-2">Kontak</a>
</div>
</nav>
<section id="hero" class="relative bg-gradient-to-r from-blue-500 to-indigo-600 text-white flex items-center justify-center h-screen">
<div class="text-center px-4">
<h1 class="text-4xl md:text-6xl font-bold leading-tight mb-4">Selamat Datang di Website Kami</h1>
<p class="text-lg md:text-xl mb-8">Solusi terbaik untuk kebutuhan bisnis Anda.</p>
<a href="#contact" class="bg-white text-blue-600 px-8 py-3 rounded-full text-lg font-semibold hover:bg-gray-100 transition duration-300">Hubungi Kami</a>
</div>
</section>
<section id="about" class="bg-white py-20">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-6">Tentang Kami</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Kami adalah tim profesional yang berdedikasi untuk menyediakan layanan berkualitas tinggi. Dengan pengalaman bertahun-tahun, kami siap membantu Anda mencapai tujuan Anda.</p>
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="p-6 bg-gray-100 rounded-lg shadow-md">
<h3 class="text-xl font-semibold mb-3">Misi Kami</h3>
<p class="text-gray-700">Memberikan solusi inovatif yang melampaui harapan klien kami.</p>
</div>
<div class="p-6 bg-gray-100 rounded-lg shadow-md">
<h3 class="text-xl font-semibold mb-3">Visi Kami</h3>
<p class="text-gray-700">Menjadi pemimpin industri yang diakui secara global.</p>
</div>
<div class="p-6 bg-gray-100 rounded-lg shadow-md">
<h3 class="text-xl font-semibold mb-3">Nilai Kami</h3>
<p class="text-gray-700">Integritas, inovasi, dan kepuasan pelanggan.</p>
</div>
</div>
</div>
</section>
<section id="clients" class="bg-gray-100 py-20">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-6">Klien Kami</h2>
<p class="text-lg text-gray-600 mb-12">Kami bangga telah bekerja sama dengan berbagai perusahaan terkemuka.</p>
<div id="clients-container" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center justify-center">
</div>
</div>
</section>
<section id="services" class="bg-white py-20">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-6">Layanan Kami</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12">Kami menawarkan berbagai layanan yang dirancang untuk membantu bisnis Anda berkembang.</p>
<div id="services-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
</div>
</div>
</section>
<section id="testimonials" class="bg-gray-50 py-20">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-6">Apa Kata Klien Kami</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12">Dengarkan langsung dari mereka yang telah merasakan manfaat layanan kami.</p>
<div id="testimonials-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
</div>
</div>
</section>
<section id="content-section" class="bg-white py-20">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-6">Wawasan & Informasi Terbaru</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12">Temukan artikel dan studi kasus menarik dari industri kami.</p>
<div id="content-items-container" class="grid grid-cols-1 md:grid-cols-2 gap-8">
</div>
</div>
</section>
<section id="articles" class="bg-gray-100 py-20">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-6">Artikel Terbaru Kami</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12">Ikuti perkembangan terbaru dan dapatkan wawasan dari blog kami.</p>
<div id="articles-container" class="grid grid-cols-1 md:grid-cols-3 gap-8">
</div>
</div>
</section>
<section id="contact" class="bg-white py-20">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-6">Hubungi Kami</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12">Ada pertanyaan? Jangan ragu untuk menghubungi kami melalui formulir di bawah ini.</p>
<div class="max-w-xl mx-auto bg-gray-100 p-8 rounded-lg shadow-md">
<form>
<div class="mb-4 text-left">
<label for="name" class="block text-gray-700 text-sm font-bold mb-2">Nama Lengkap</label>
<input type="text" id="name" name="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Nama Anda">
</div>
<div class="mb-4 text-left">
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="email@example.com">
</div>
<div class="mb-6 text-left">
<label for="message" class="block text-gray-700 text-sm font-bold mb-2">Pesan</label>
<textarea id="message" name="message" rows="5" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Pesan Anda"></textarea>
</div>
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transition duration-300">Kirim Pesan</button>
</form>
</div>
</div>
</section>
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4 text-center">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
<div>
<h3 class="text-xl font-semibold mb-4">Tentang Kami</h3>
<p class="text-gray-400">Kami adalah perusahaan yang berdedikasi untuk memberikan solusi digital terbaik.</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">Tautan Cepat</h3>
<ul class="space-y-2">
<li><a href="#about" class="text-gray-400 hover:text-white">Tentang Kami</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white">Layanan</a></li>
<li><a href="#articles" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white">Kontak</a></li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">Ikuti Kami</h3>
<div class="flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-700 pt-8">
<p class="text-gray-400 text-sm">© 2025 Nama Perusahaan Anda. Hak Cipta Dilindungi.</p>
</div>
</div>
</footer>
<a href="https://wa.me/6281234567890" target="_blank" class="fixed bottom-8 right-8 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition duration-300 z-50">
<i class="fab fa-whatsapp text-3xl"></i>
</a>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenu.classList.contains('block')) {
mobileMenu.classList.add('hidden');
mobileMenu.classList.remove('block');
}
});
});
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
mobileMenu.classList.toggle('block');
});
// --- JavaScript Looping for Sections ---
// 1. Client Section (12 items)
const clientsContainer = document.getElementById('clients-container');
const numClients = 12; // Number of client logos
for (let i = 1; i <= numClients; i++) {
const clientLogoHtml = `
<img src="https://via.placeholder.com/150x50/cccccc/ffffff?text=Client+${i}" alt="Client ${i} Logo" class="mx-auto filter grayscale hover:grayscale-0 transition duration-300">
`;
clientsContainer.insertAdjacentHTML('beforeend', clientLogoHtml);
}
// 2. Services Section (6 items)
const servicesContainer = document.getElementById('services-container');
const servicesData = [
{ icon: 'fas fa-code', title: 'Pengembangan Web', description: 'Membangun website modern dan responsif sesuai kebutuhan Anda.' },
{ icon: 'fas fa-mobile-alt', title: 'Pengembangan Aplikasi Mobile', description: 'Membuat aplikasi mobile inovatif untuk iOS dan Android.' },
{ icon: 'fas fa-chart-line', title: 'Digital Marketing', description: 'Meningkatkan visibilitas online dan menjangkau audiens target Anda.' },
{ icon: 'fas fa-pencil-ruler', title: 'Desain Grafis', description: 'Menciptakan desain visual yang menarik dan profesional.' },
{ icon: 'fas fa-cloud', title: 'Konsultasi Cloud', description: 'Memberikan saran ahli untuk migrasi dan optimasi cloud.' },
{ icon: 'fas fa-headset', title: 'Dukungan Teknis', description: 'Bantuan teknis yang responsif untuk memastikan kelancaran operasi Anda.' },
];
servicesData.forEach(service => {
const serviceCardHtml = `
<div class="p-6 bg-gray-100 rounded-lg shadow-md flex flex-col items-center">
<i class="${service.icon} text-blue-600 text-5xl mb-4"></i>
<h3 class="text-xl font-semibold mb-3">${service.title}</h3>
<p class="text-gray-700 text-center">${service.description}</p>
</div>
`;
servicesContainer.insertAdjacentHTML('beforeend', serviceCardHtml);
});
// 3. Testimonial Section (6 items)
const testimonialsContainer = document.getElementById('testimonials-container');
const testimonialsData = [
{ quote: "Layanan yang luar biasa! Tim ini sangat profesional dan responsif. Kami sangat puas dengan hasilnya.", name: "John Doe", position: "CEO, Perusahaan A", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=JD" },
{ quote: "Mereka memahami kebutuhan kami dengan baik dan memberikan solusi yang tepat waktu. Sangat direkomendasikan!", name: "Jane Smith", position: "Manajer, Perusahaan B", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=JS" },
{ quote: "Desain website yang mereka buat sangat modern dan fungsional. Tim yang sangat berbakat!", name: "Peter Jones", position: "Pendiri, Startup C", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=PJ" },
{ quote: "Kerja sama yang sangat produktif. Hasilnya melebihi ekspektasi kami.", name: "Alice Brown", position: "Direktur, Organisasi D", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=AB" },
{ quote: "Dukungan pelanggan yang cepat dan solusi yang inovatif. Kami akan terus bekerja sama dengan mereka.", name: "Bob White", position: "CTO, Perusahaan E", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=BW" },
{ quote: "Sangat mudah untuk berkomunikasi dan proyek diselesaikan tepat waktu. Pengalaman yang menyenangkan!", name: "Carol Green", position: "Manajer Proyek, Perusahaan F", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=CG" },
];
testimonialsData.forEach(testimonial => {
const testimonialCardHtml = `
<div class="bg-white p-6 rounded-lg shadow-md">
<p class="text-gray-700 italic mb-4">"${testimonial.quote}"</p>
<div class="flex items-center justify-center">
<img src="${testimonial.avatar}" alt="Avatar ${testimonial.name}" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-semibold text-gray-800">${testimonial.name}</p>
<p class="text-sm text-gray-600">${testimonial.position}</p>
</div>
</div>
</div>
`;
testimonialsContainer.insertAdjacentHTML('beforeend', testimonialCardHtml);
});
// 4. Content Section (4 items)
const contentItemsContainer = document.getElementById('content-items-container');
const contentData = [
{ title: 'Masa Depan Teknologi AI', description: 'Pelajari bagaimana kecerdasan buatan akan membentuk lanskap teknologi di tahun-tahun mendatang.', link: '#' },
{ title: 'Strategi Pemasaran Digital Efektif', description: 'Panduan komprehensif untuk meningkatkan kehadiran online bisnis Anda.', link: '#' },
{ title: 'Keamanan Siber di Era Digital', description: 'Pentingnya menjaga data Anda dari ancaman siber yang terus berkembang.', link: '#' },
{ title: 'Pengembangan Aplikasi No-Code/Low-Code', description: 'Memahami bagaimana platform ini merevolusi pembuatan aplikasi.', link: '#' },
];
contentData.forEach(item => {
const contentCardHtml = `
<div class="bg-gray-100 p-6 rounded-lg shadow-md text-left">
<h3 class="text-2xl font-semibold mb-3">${item.title}</h3>
<p class="text-gray-700 mb-4">${item.description}</p>
<a href="${item.link}" class="text-blue-600 hover:underline font-semibold">Baca Lebih Lanjut →</a>
</div>
`;
contentItemsContainer.insertAdjacentHTML('beforeend', contentCardHtml);
});
// 5. Articles Section (3 items)
const articlesContainer = document.getElementById('articles-container');
const articlesData = [
{ image: 'https://via.placeholder.com/400x250/cccccc/ffffff?text=Artikel+1', title: '10 Tips untuk Produktivitas Tinggi', description: 'Jelajahi strategi dan alat untuk meningkatkan efisiensi kerja Anda sehari-hari.', link: '#' },
{ image: 'https://via.placeholder.com/400x250/cccccc/ffffff?text=Artikel+2', title: 'Panduan Lengkap SEO 2025', description: 'Pelajari teknik SEO terbaru untuk meningkatkan peringkat website Anda di mesin pencari.', link: '#' },
{ image: 'https://via.placeholder.com/400x250/cccccc/ffffff?text=Artikel+3', title: 'Desain UX/UI Terbaik Tahun Ini', description: 'Tren desain pengalaman pengguna dan antarmuka pengguna yang harus Anda ketahui.', link: '#' },
];
articlesData.forEach(article => {
const articleCardHtml = `
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="${article.image}" alt="${article.title} Image" class="w-full h-48 object-cover">
<div class="p-6 text-left">
<h3 class="text-xl font-semibold text-gray-800 mb-2">${article.title}</h3>
<p class="text-gray-600 text-sm mb-4">${article.description}</p>
<a href="${article.link}" class="text-blue-600 hover:underline font-semibold">Baca Artikel →</a>
</div>
</div>
`;
articlesContainer.insertAdjacentHTML('beforeend', articleCardHtml);
});
</script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"8ccba8cfd6f24626886a2b81ed2b53b9","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>