Kode Isi File index.html

Kode Isi File index.html

Bantu buatkan kode isi file index.html.

FarmerSmartAI - Halaman Landing Page

Berikut kode lengkap untuk file index.html (halaman landing page) FarmerSmartAI:

```html

<!DOCTYPE html>

<head>

<title>FarmerSmartAI - Revolusi Pertanian Berbasis AI</title>

<style>

:root {

--primary: #2e7d32;

--primary-dark: #1b5e20;

--primary-light: #4caf50;

--secondary: #ff9800;

--accent: #8bc34a;

--light: #f5f5f5;

--dark: #333;

--gray: #757575;

--white: #ffffff;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background-color: var(--light);

color: var(--dark);

line-height: 1.6;

}

/* Header & Navigation */

header {

background-color: var(--white);

box-shadow: 0 2px 10px rgba(0,0,0,0.1);

position: fixed;

width: 100%;

top: 0;

z-index: 1000;

}

.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

padding: 0 15px;

}

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px 0;

}

.logo {

display: flex;

align-items: center;

}

.logo h1 {

color: var(--primary);

font-size: 1.8rem;

margin-left: 10px;

}

.logo-icon {

color: var(--primary);

font-size: 2rem;

}

.nav-links {

display: flex;

list-style: none;

}

.nav-links li {

margin-left: 30px;

}

.nav-links a {

text-decoration: none;

color: var(--dark);

font-weight: 500;

transition: color 0.3s;

}

.nav-links a:hover {

color: var(--primary);

}

.cta-button {

background-color: var(--primary);

color: white;

padding: 10px 25px;

border-radius: 5px;

text-decoration: none;

font-weight: 600;

transition: background 0.3s;

}

.cta-button:hover {

background-color: var(--primary-dark);

}

/* Hero Section */

.hero {

background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1625246333195-78d9c38ad449?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');

background-size: cover;

background-position: center;

color: var(--white);

padding: 180px 0 100px;

text-align: center;

}

.hero h2 {

font-size: 3rem;

margin-bottom: 20px;

line-height: 1.2;

}

.hero p {

font-size: 1.2rem;

max-width: 700px;

margin: 0 auto 30px;

}

.hero-buttons {

display: flex;

justify-content: center;

gap: 20px;

margin-top: 30px;

}

.btn-primary {

background-color: var(--primary);

color: white;

padding: 12px 30px;

border-radius: 5px;

text-decoration: none;

font-weight: 600;

transition: background 0.3s;

}

.btn-primary:hover {

background-color: var(--primary-dark);

}

.btn-secondary {

background-color: transparent;

color: white;

padding: 12px 30px;

border-radius: 5px;

text-decoration: none;

font-weight: 600;

border: 2px solid white;

transition: background 0.3s;

}

.btn-secondary:hover {

background-color: rgba(255,255,255,0.1);

}

/* Features Section */

.features {

padding: 100px 0;

background-color: var(--white);

}

.section-title {

text-align: center;

margin-bottom: 60px;

}

.section-title h2 {

font-size: 2.5rem;

color: var(--primary);

margin-bottom: 15px;

}

.section-title p {

color: var(--gray);

max-width: 700px;

margin: 0 auto;

}

.features-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

}

.feature-card {

background-color: var(--light);

border-radius: 10px;

padding: 30px;

text-align: center;

transition: transform 0.3s, box-shadow 0.3s;

}

.feature-card:hover {

transform: translateY(-10px);

box-shadow: 0 10px 20px rgba(0,0,0,0.1);

}

.feature-icon {

font-size: 3rem;

color: var(--primary);

margin-bottom: 20px;

}

.feature-card h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--dark);

}

.feature-card p {

color: var(--gray);

}

/* How It Works */

.how-it-works {

padding: 100px 0;

background-color: var(--light);

}

.steps {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

margin-top: 50px;

}

.step {

flex: 1;

min-width: 250px;

text-align: center;

padding: 0 20px;

position: relative;

}

.step:not(:last-child)::after {

content: '';

position: absolute;

top: 40px;

right: -10px;

width: 50px;

height: 2px;

background-color: var(--primary);

}

.step-number {

display: inline-block;

width: 80px;

height: 80px;

line-height: 80px;

background-color: var(--primary);

color: white;

border-radius: 50%;

font-size: 2rem;

font-weight: bold;

margin-bottom: 20px;

}

.step h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--dark);

}

/* Testimonials */

.testimonials {

padding: 100px 0;

background-color: var(--white);

}

.testimonial-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

}

.testimonial-card {

background-color: var(--light);

border-radius: 10px;

padding: 30px;

box-shadow: 0 5px 15px rgba(0,0,0,0.05);

}

.testimonial-text {

font-style: italic;

margin-bottom: 20px;

color: var(--dark);

}

.testimonial-author {

display: flex;

align-items: center;

}

.author-avatar {

width: 50px;

height: 50px;

border-radius: 50%;

background-color: var(--primary);

margin-right: 15px;

display: flex;

align-items: center;

justify-content: center;

color: white;

font-weight: bold;

}

.author-info h4 {

margin-bottom: 5px;

}

.author-info p {

color: var(--gray);

font-size: 0.9rem;

}

/* CTA Section */

.cta-section {

padding: 100px 0;

background: linear-gradient(135deg, var(--primary), var(--primary-dark));

color: white;

text-align: center;

}

.cta-section h2 {

font-size: 2.5rem;

margin-bottom: 20px;

}

.cta-section p {

max-width: 700px;

margin: 0 auto 30px;

font-size: 1.1rem;

}

/* Footer */

footer {

background-color: var(--dark);

color: var(--white);

padding: 70px 0 30px;

}

.footer-content {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 40px;

margin-bottom: 50px;

}

.footer-column h3 {

font-size: 1.3rem;

margin-bottom: 20px;

color: var(--accent);

}

.footer-links {

list-style: none;

}

.footer-links li {

margin-bottom: 10px;

}

.footer-links a {

color: #ccc;

text-decoration: none;

transition: color 0.3s;

}

.footer-links a:hover {

color: var(--accent);

}

.social-links {

display: flex;

gap: 15px;

margin-top: 20px;

}

.social-icon {

display: inline-block;

width: 40px;

height: 40px;

background-color: rgba(255,255,255,0.1);

border-radius: 50%;

text-align: center;

line-height: 40px;

color: white;

transition: background 0.3s;

}

.social-icon:hover {

background-color: var(--primary);

}

.footer-bottom {

text-align: center;

padding-top: 30px;

border-top: 1px solid rgba(255,255,255,0.1);

color: #ccc;

font-size: 0.9rem;

}

/* Responsive Design */

@media (max-width: 768px) {

.navbar {

flex-direction: column;

padding: 15px 0;

}

.nav-links {

margin-top: 15px;

flex-wrap: wrap;

justify-content: center;

}

.nav-links li {

margin: 5px 10px;

}

.hero h2 {

font-size: 2.2rem;

}

.hero-buttons {

flex-direction: column;

align-items: center;

}

.step:not(:last-child)::after {

display: none;

}

.step {

margin-bottom: 40px;

}

</style>

</head>

<body>

<h1>FarmerSmartAI</h1>

</div>

<li><a href="#home">Beranda</a></li>

<li><a href="#features">Fitur</a></li>

<li><a href="#how-it-works">Cara Kerja</a></li>

<li><a href="#testimonials">Testimoni</a></li>

<li><a href="farmer_smart_ai_dashboard.html" class="cta-button">Dashboard</a></li>

</ul>

</nav>

</div>

</header>

<h2>Revolusi Pertanian dengan Kecerdasan Buatan</h2>

<p>FarmerSmartAI mengintegrasikan IoT, AI, dan pertanian presisi untuk meningkatkan produktivitas agribisnis dan membangun ketahanan terhadap perubahan iklim.</p>

<a href="farmer_smart_ai_dashboard.html" class="btn-primary">Mulai Sekarang</a>

<a href="#features" class="btn-secondary">Pelajari Lebih Lanjut</a>

</div>

</section>

<h2>Fitur Unggulan</h2>

<p>FarmerSmartAI menawarkan solusi lengkap untuk kebutuhan pertanian modern</p>

</div>

<h3>Monitoring Real-time</h3>

<p>Pantau kondisi lahan secara real-time dengan sensor IoT yang terintegrasi langsung ke dashboard Anda.</p>

</div>

<h3>Analisis AI</h3>

<p>Dapatkan rekomendasi cerdas berbasis AI untuk irigasi, pemupukan, dan pengendalian hama.</p>

</div>

<h3>Prediksi Hasil Panen</h3>

<p>Perkirakan hasil panen dengan akurasi tinggi menggunakan algoritma prediktif canggih.</p>

</div>

<h3>Irigasi Presisi</h3>

<p>Optimalkan penggunaan air dengan sistem irigasi otomatis berdasarkan data kelembaban tanah.</p>

</div>

<h3>Deteksi Penyakit</h3>

<p>Identifikasi dini penyakit tanaman melalui analisis citra dengan teknologi computer vision.</p>

</div>

<h3>Ketahanan Iklim</h3>

<p>Bangun ketahanan terhadap perubahan iklim dengan sistem peringatan dini dan rekomendasi adaptif.</p>

</div>

</section>

<h2>Bagaimana FarmerSmartAI Bekerja</h2>

<p>Tiga langkah sederhana menuju pertanian presisi yang lebih efisien</p>

</div>

<h3>Pasang Sensor</h3>

<p>Pasang sensor IoT di lahan pertanian untuk mengumpulkan data tanah, cuaca, dan tanaman.</p>

</div>

<h3>Analisis Data</h3>

<p>AI kami menganalisis data dan memberikan wawasan serta rekomendasi yang dapat ditindaklanjuti.</p>

</div>

<h3>Tingkatkan Hasil</h3>

<p>Terapkan rekomendasi untuk meningkatkan produktivitas, mengurangi biaya, dan melestarikan sumber daya.</p>

</div>

</section>

<h2>Apa Kata Petani</h2>

<p>Dengarkan pengalaman langsung dari pengguna FarmerSmartAI</p>

</div>

<p class="testimonial-text">"Sejak menggunakan FarmerSmartAI, hasil panen padi saya meningkat 30% dengan pengurangan penggunaan air hingga 40%. Teknologi yang benar-benar mengubah cara bertani!"</p>

<h4>Ahmad Supriyadi</h4>

<p>Petani Padi, Jawa Tengah</p>

</div>

<p class="testimonial-text">"Sistem prediksi panennya sangat akurat. Saya bisa merencanakan penjualan dengan lebih baik dan menghindari kerugian. Rekomendasi pemupukan juga tepat sasaran."</p>

<h4>Siti Mulyani</h4>

<p>Petani Sayur, Lembang</p>

</div>

<p class="testimonial-text">"Deteksi penyakit tanaman melalui smartphone sangat membantu. Saya bisa segera mengambil tindakan sebelum penyakit menyebar luas. Fitur yang sangat inovatif!"</p>

<h4>Budi Jatmiko</h4>

<p>Petani Buah, Malang</p>

</div>

</section>

<h2>Siap Mengubah Cara Bertani Anda?</h2>

<p>Bergabunglah dengan ribuan petani yang telah merasakan manfaat FarmerSmartAI. Tingkatkan produktivitas dan bangun ketahanan terhadap perubahan iklim.</p>

<a href="farmer_smart_ai_dashboard.html" class="btn-primary">Coba Dashboard Sekarang</a>

</div>

</section>

<h3>FarmerSmartAI</h3>

<p>Revolusi pertanian dengan integrasi IoT, AI, dan pertanian presisi untuk agribisnis berkelanjutan.</p>

</div>

<h3>Tautan Cepat</h3>

<li><a href="#home">Beranda</a></li>

<li><a href="#features">Fitur</a></li>

<li><a href="#how-it-works">Cara Kerja</a></li>

<li><a href="#testimonials">Testimoni</a></li>

<li><a href="farmer_smart_ai_dashboard.html">Dashboard</a></li>

</ul>

</div>

<h3>Sumber Daya</h3>

<li><a href="#">Panduan Pengguna</a></li>

<li><a href="#">Studi Kasus</a></li>

<li><a href="#">Dukungan</a></li>

</ul>

</div>

<h3>Kontak</h3>

<li><i class="fas fa-map-marker-alt"></i> Jl. Pertanian No. 123, Jakarta</li>

<li><i class="fas fa-envelope"></i> info@farmersmartai.com</li>

</ul>

</div>

</div>

</footer>

// Smooth scrolling for anchor links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

const targetId = this.getAttribute('href');

if (targetId === '#') return;

const targetElement = document.querySelector(targetId);

if (targetElement) {

window.scrollTo({

top: targetElement.offsetTop - 80,

behavior: 'smooth'

});

}

});

// Header background change on scroll

window.addEventListener('scroll', function() {

const header = document.querySelector('header');

if (window.scrollY > 100) {

header.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';

header.style.backdropFilter = 'blur(10px)';

} else {

header.style.backgroundColor = 'var(--white)';

header.style.backdropFilter = 'none';

}

});

</script>

</body>

</html>

```

Fitur Halaman Index.html:

1. Header Responsif - Navigasi yang tetap terlihat saat di-scroll

2. Hero Section - Gambaran besar aplikasi dengan call-to-action

3. Fitur Unggulan - Menampilkan 6 fitur utama FarmerSmartAI

4. Bagaimana Cara Kerja - Proses 3 langkah sederhana menggunakan aplikasi

5. Testimoni Pengguna - Pengalaman nyata dari petani

6. Call-to-Action - Ajakan untuk mencoba dashboard

7. Footer Komprehensif - Informasi kontak dan tautan penting

Halaman ini sudah responsif dan siap digunakan. File ini dapat disimpan sebagai index.html dan akan menjadi halaman depan yang menarik bagi pengguna yang ingin mengetahui tentang FarmerSmartAI sebelum mengakses dashboard.

Bersambung ke: Kode Isi File login.html

Search This Blog

Aplikasi FarmerSmartAI

Kode Isi File index.html

Comments

Post a Comment

Popular posts from this blog

logo-placeholder.html

Aplikasi FarmerSmartAI:

icon-generator.html