ETS PWEB

 muhammad rafi budi purnama

5025221307

code : https://github.com/mbahbud/website-travel

Hosting : https://website-travel-f0tvgw5z8-mbahbuds-projects.vercel.app/

vidio : https://youtu.be/vhJ8Tb6YTes





ETS PWEB

Buatlah halaman website landing page untuk mengelola jasa kendaraan Travel antar kota.

1. Buatlah desain Landing page yang di dalamnya memuat
  • 1. Header / Hero Section
  • 2. Benefit Section
  • 3. Social Proof / Testimoni
  • 4. Detail Produk / Penjelasan Layanan
  • 5. Offer / Promo (opsional)
  • 6. Formulir / Lead Capture
  • 7. FAQ (Frequently Asked Questions)
  • 8. Footer












Secara singkat, kode yang Anda berikan adalah sebuah Landing Page (halaman web tunggal) untuk jasa travel bernama "TravelBuddy Express". Tujuannya adalah untuk memperkenalkan layanan, membangun kepercayaan, dan mengajak pengunjung untuk langsung melakukan pemesanan.

Halaman ini dirancang modern, bersih, dan profesional dengan semua informasi penting tersaji dalam satu halaman yang bisa di-scroll.

Konsep dan Struktur Halaman

Halaman ini dibagi menjadi beberapa bagian (section) yang jelas, masing-masing dengan tujuan spesifik:

  1. Header & Navigasi: Bagian paling atas yang "menempel" (sticky) saat di-scroll. Berisi logo dan menu untuk melompat ke bagian lain di halaman itu.

  2. Hero Section: Bagian pembuka yang paling menonjol dengan gambar-gambar besar yang bisa berganti (slider). Tujuannya untuk menarik perhatian pengunjung dengan slogan utama dan tombol ajakan bertindak (Call to Action), yaitu "Pesan Sekarang".

  3. Keunggulan (Benefits): Bagian "Mengapa Memilih TravelBuddy?" yang menyoroti tiga kelebihan utama: Tepat Waktu, Aman & Nyaman, dan Harga Terbaik.

  4. Layanan (Services): Menjelaskan secara visual layanan apa saja yang ditawarkan, seperti travel eksekutif, pengiriman barang, layanan 24 jam, dan paket wisata.

  5. Testimoni: Menampilkan ulasan dari pelanggan fiktif untuk membangun kepercayaan dan bukti sosial (social proof).

  6. Promo: Bagian khusus untuk menawarkan diskon atau promosi agar pengunjung lebih tertarik memesan.

  7. Formulir Pemesanan (Booking Form): Ini adalah bagian inti di mana pengunjung bisa langsung mengisi data diri untuk memesan layanan.

  8. FAQ (Pertanyaan Umum): Menjawab pertanyaan-pertanyaan yang sering diajukan untuk menghilangkan keraguan calon pelanggan.

  9. Footer: Bagian paling bawah yang berisi informasi kontak, alamat, tautan media sosial, dan hak cipta.

Elemen Interaktifnya 

Interaktivitas adalah semua hal di halaman web yang merespons aksi pengguna (klik, hover/sorot, scroll). Berikut adalah semua elemen interaktif di halaman ini:

  • Navigasi Smooth Scroll: Jika Anda mengklik menu (misal: "Layanan"), halaman akan bergeser (scroll) secara mulus ke bagian layanan, bukan melompat tiba-tiba.

  • Menu Mobile (Hamburger Menu): Di layar kecil (HP), menu utama akan disembunyikan dan diganti dengan ikon tiga garis (hamburger ☰). Jika diklik, menu akan muncul. Ikonnya juga akan berubah menjadi silang (X).

  • Slider Gambar di Hero Section:

    • Otomatis: Gambar akan berganti sendiri setiap 5 detik (di perangkat non-sentuh seperti laptop).

    • Panah Navigasi: Pengguna bisa mengklik panah ❮ dan ❯ di sisi kiri dan kanan untuk mengganti gambar secara manual.

    • Indikator Titik (Dots): Pengguna bisa mengklik titik-titik di bawah gambar untuk langsung melompat ke slide tertentu.

  • Efek Hover pada Tombol dan Tautan:

    • Saat kursor mouse diarahkan ke tombol seperti "Pesan Sekarang", warnanya akan sedikit berubah untuk memberi tahu pengguna bahwa tombol itu bisa diklik.

    • Tautan di menu navigasi juga akan berubah warna saat disorot.

  • Efek Hover pada Kartu (Cards):

    • Saat kursor diarahkan ke kartu Layanan atau Testimoni, kartu tersebut akan sedikit terangkat dan bayangannya menjadi lebih jelas. Ini memberikan efek 3D yang dinamis.

  • Formulir Interaktif:

    • Pengguna bisa mengetik di kolom input (Nama, Nomor HP, dll.).

    • Kolom input akan memiliki garis batas yang menyala saat diklik (efek focus).

    • Terdapat menu dropdown untuk memilih "Jenis Layanan".

Teknologi yang Digunakan

  • HTML: Sebagai kerangka atau struktur dasar halaman web.

  • Tailwind CSS: Framework CSS modern untuk mendesain tampilan dengan cepat tanpa menulis CSS manual. Ini yang membuat desainnya terlihat rapi dan responsif.

  • JavaScript: Digunakan untuk semua logika interaktif, seperti menggerakkan slider, membuka-tutup menu mobile, dan efek smooth scroll.

  • Feather Icons: Pustaka (library) untuk menampilkan ikon-ikon yang bersih dan ringan (seperti ikon telepon, bintang, menu, dll).



Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS 2 : Jettpack compose : Hello, World!

Gambar
  Mengenal Jetpack Compose: Membuat Aplikasi "Hello World" di Android Halo, teman-teman developer! 🚀 Hari ini, kita akan membahas bagaimana cara membuat aplikasi Android sederhana menggunakan Jetpack Compose . Jika sebelumnya kita menggunakan XML untuk membangun UI, sekarang kita bisa menulis UI langsung dengan kode Kotlin yang lebih deklaratif dan modern. Kita akan membedah kode dari aplikasi "Hello World" sederhana yang dibuat dengan Jetpack Compose. 1. Memahami MainActivity - Pintu Masuk Aplikasi Seperti biasa, dalam pengembangan aplikasi Android, kita membutuhkan sebuah activity utama yang akan menampilkan UI pertama kali saat aplikasi dijalankan. Di Jetpack Compose, kita menggunakan ComponentActivity sebagai superclass untuk MainActivity . Berikut kode MainActivity : 🔹 Penjelasan Kode onCreate() Fungsi ini dipanggil ketika aplikasi pertama kali dijalankan. Ini adalah titik masuk utama aplikasi. enableEdgeToEdge() Fungsi ini digunakan untuk memastikan tamp...
Baca selengkapnya

Pertemuan 3 PPB (A) - Mengenal Composable Aplikasi Selamat Ulang Tahun

Gambar
Pertemuan 3 PPB (A) - Mengenal Composable Aplikasi Selamat Ulang Tahun   Nama    : Muhammad rafi budi purnama NRP    : 5025221307 Kelas  : PPB (A) package  com.example.pertemuan_3 import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.Text import androidx.compose.runtime. Composable import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview. Preview import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.ui.Alignment import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.compose.ui.text.style.TextAlign import com.example.pertemuan_3.ui.theme.Pertemuan_3...
Baca selengkapnya

Pertemuan 5 - Aplikasi Kalkulator Sederhana

Gambar
Pertemuan 5 - Aplikasi Kalkulator Sederhana Nama:  Muhammad Rafi Budi Purnama NRP: 5025221307 Kelas : PPB A   Saya mengikuti intruksi sesuai link berikut: https://youtu.be/HlE8MEtKBr0?si=QRC8uXasbexSkw9u Untuk tampilan hasilnya sebagai berikut: Penjelasan Program Kalkulator Sederhana Pada program kalkulator ini, terdapat tiga variabel utama: var num1 by remember { mutableStateOf("0") } var num2 by remember { mutableStateOf("0") } var result by remember { mutableStateOf("") } Ketiga variabel di atas digunakan untuk menyimpan nilai input dari pengguna ( num1 dan num2 ) serta hasil perhitungan ( result ). Ketiganya dideklarasikan sebagai state agar UI dapat langsung merespons jika nilainya berubah. Untuk menerima input dari pengguna, digunakan komponen TextField sebagai berikut: TextField(value = num1, onValueChange = { num1 = it }) Spacer(modifier = Modifier.height(8.dp)) TextField(value = num2, onValueChange = { num2 = it }) Bagian di atas menampi...
Baca selengkapnya