Cara Membuat Website Landing Page dengan AI
Apa Itu Website Berbasis AI?
Website berbasis AI adalah website yang dibangun dengan bantuan teknologi kecerdasan buatan. AI tidak hanya membantu dalam proses desain dan pengembangan, tapi juga dalam pengoptimalan performa website. Platform AI memungkinkan kamu untuk membuat website dengan cepat tanpa memerlukan keahlian teknis.
Keunggulan Membuat Website dengan AI
- Efisiensi Waktu
AI dapat mempercepat proses perancagan dan pengembangan. - Kemudahan Penggunaan
Platform AI dibangun untuk membantu pengguna bahkan tanpa pengetahuan teknis sekalipun. - Kustomisasi Otomatis
AI dapat memberikan rekomendasi desain dan fitur sesuai keinginan kamu. - Optimasi SEO
Terdapat berbagai platform AI yang sudah menyediakan fitur optimasi SEO.
Tutorial Membuat Website Landing Page dengan AI
Berikut panduan dalam membuat website landing page dengan AI, simak penjelasannya hingga akhir.
1. Buat Folder Landing Page
Pertama-tama buat folder baru dengan nama Landing Page untuk menyimpan file website nantinya.
2. Buat File Index.html
Selanjutnya yaitu membuat file index.html pada file ini nantinya akan diisi oleh kode dari website landing page yang dibuat oleh AI.
3. Buat Kode Website dengan Blackbox AI
Pada website blackbox AI ketikkan perintah berikut.
buatkan website landing page dengan tailwind css, terdiri dari navbar, section hero, fitur, produk, tentang,kontak, dan footer. tambahkan juga gambar, judul, dan harga pada section produk, dan jugaburger menu pada mode mobile.<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing Page</title>
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
<style>
/* Custom styles */
.navbar {
transition: all 0.3s;
}
</style>
</head>
<body class="bg-gray-100">
<!-- Navbar -->
<nav class="navbar bg-white shadow-md fixed w-full z-10">
<div
class="container mx-auto px-4 py-4 flex justify-between items-center"
>
<div class="text-xl font-bold">Brand</div>
<div class="hidden md:flex space-x-4">
<a href="#hero" class="text-gray-700 hover:text-blue-500"
>Home</a
>
<a href="#features" class="text-gray-700 hover:text-blue-500"
>Fitur</a
>
<a href="#products" class="text-gray-700 hover:text-blue-500"
>Produk</a
>
<a href="#about" class="text-gray-700 hover:text-blue-500"
>Tentang</a
>
<a href="#contact" class="text-gray-700 hover:text-blue-500"
>Kontak</a
>
</div>
<div class="md:hidden">
<button id="burger" class="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 12h16m-7 6h7"
></path>
</svg>
</button>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden">
<a
href="#hero"
class="block px-4 py-2 text-gray-700 hover:bg-gray-200"
>Home</a
>
<a
href="#features"
class="block px-4 py-2 text-gray-700 hover:bg-gray-200"
>Fitur</a
>
<a
href="#products"
class="block px-4 py-2 text-gray-700 hover:bg-gray-200"
>Produk</a
>
<a
href="#about"
class="block px-4 py-2 text-gray-700 hover:bg-gray-200"
>Tentang</a
>
<a
href="#contact"
class="block px-4 py-2 text-gray-700 hover:bg-gray-200"
>Kontak</a
>
</div>
</nav>
<!-- Section Hero -->
<section
id="hero"
class="bg-blue-500 text-white h-screen flex items-center justify-center"
>
<div class="text-center">
<h1 class="text-5xl font-bold">Selamat Datang di Brand Kami</h1>
<p class="mt-4 text-lg">
Kami menyediakan produk terbaik untuk Anda.
</p>
<a
href="#products"
class="mt-6 inline-block bg-white text-blue-500 px-6 py-2 rounded-full"
>Lihat Produk</a
>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20">
<div class="max-w-7xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-8">Fitur Kami</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-xl font-semibold mb-4">Fitur 1</h3>
<p>Deskripsi fitur 1 yang menarik dan bermanfaat.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-xl font-semibold mb-4">Fitur 2</h3>
<p>Deskripsi fitur 2 yang menarik dan bermanfaat.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-xl font-semibold mb-4">Fitur 3</h3>
<p>Deskripsi fitur 3 yang menarik dan bermanfaat.</p>
</div>
</div>
</div>
</section>
<!-- Products Section -->
<section id="products" class="py-20">
<div class="max-w-7xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-8">Produk Kami</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow">
<img
src="https://placehold.co/400x300"
alt="Produk 1"
class="mb-4 rounded"
/>
<h3 class="text-xl font-semibold mb-2">Produk 1</h3>
<p class="text-gray-600 mb-2">
Deskripsi singkat tentang produk 1.
</p>
<p class="text-lg font-bold">Rp 100.000</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<img
src="https://placehold.co/400x300"
alt="Produk 2"
class="mb-4 rounded"
/>
<h3 class="text-xl font-semibold mb-2">Produk 2</h3>
<p class="text-gray-600 mb-2">
Deskripsi singkat tentang produk 2.
</p>
<p class="text-lg font-bold">Rp 200.000</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<img
src="https://placehold.co/400x300"
alt="Produk 3"
class="mb-4 rounded"
/>
<h3 class="text-xl font-semibold mb-2">Produk 3</h3>
<p class="text-gray-600 mb-2">
Deskripsi singkat tentang produk 3.
</p>
<p class="text-lg font-bold">Rp 300.000</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="bg-gray-200 py-20">
<div class="max-w-7xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-8">Tentang Kami</h2>
<p class="mb-4">
Kami adalah perusahaan yang berkomitmen untuk memberikan layanan
terbaik kepada pelanggan kami.
</p>
<p>
Dengan pengalaman bertahun-tahun, kami siap membantu Anda
mencapai tujuan Anda.
</p>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20">
<div class="max-w-7xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-8">Kontak Kami</h2>
<p class="mb-4">
Jika Anda memiliki pertanyaan, jangan ragu untuk menghubungi
kami.
</p>
<a
href="mailto:info@brand.com"
class="bg-blue-600 text-white px-6 py-3 rounded-full font-semibold"
>Email Kami</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-6">
<div class="max-w-7xl mx-auto text-center">
<p>© 2023 Brand. Semua hak dilindungi.</p>
</div>
</footer>
<script>
const burger = document.getElementById("burger");
const mobileMenu = document.getElementById("mobile-menu");
burger.addEventListener("click", () => {
mobileMenu.classList.toggle("hidden");
});
</script>
</body>
</html>4. Copy Paste Kode ke File Index.html
Kemudian copy dan pastekan kode ke file index.html yang tadi telah dibuat.
5. Simpan & Lihat Hasilnya
Terakhir silahkan simpan file index.html yang telah dimasukkan kode, lalu buka file dibrowser, tampilan yang muncul kurang lebih akan seperti dibawah ini.
Kesimpulan
Demikian cara membuat website landing page dengan AI, semoga bermanfaat dan membantu kamu semua. Jika ada pertanyaan silahkan tuliskan di kolom komentar.
Sampai bertemu di artikel berikutnya.
