Learn
← Previous

Project: Landing Page React

30 min Last updated 23 Mar 2026

Project: Landing Page React

Saatnya mempraktikkan semua yang sudah dipelajari! Dalam project ini, kamu akan membangun sebuah landing page yang lengkap menggunakan React dan Tailwind CSS.

Spesifikasi Project

Landing page yang akan dibuat terdiri dari beberapa section:

  • Navbar — Logo, menu navigasi, tombol CTA
  • Hero Section — Heading besar, subtext, dua tombol aksi, ilustrasi
  • Features Section — Grid 3 kolom dengan icon, judul, dan deskripsi fitur
  • Testimonials — Carousel atau grid card testimoni
  • Footer — Link, social media, copyright

Struktur Komponen yang Direkomendasikan

src/
├── components/
│   ├── Navbar.jsx
│   ├── HeroSection.jsx
│   ├── FeatureCard.jsx
│   ├── FeaturesSection.jsx
│   ├── TestimonialCard.jsx
│   └── Footer.jsx
└── App.jsx

Langkah Pengerjaan

  1. Setup project Vite + React + Tailwind
  2. Buat komponen Navbar dengan menu responsive
  3. Buat Hero Section dengan animasi Framer Motion
  4. Buat FeatureCard sebagai komponen reusable
  5. Susun semua komponen di App.jsx
  6. Polish styling dan tambahkan hover effects
Fokus pada struktur komponen yang bersih dan reusable. Tidak perlu sempurna di iterasi pertama — mulai dari yang sederhana, kemudian tingkatkan secara bertahap.