UI Slicing Practice - Landing Page with React.js and Shadcn UI

Repositori ini berisi proyek untuk melatih kemampuan slicing UI saya berdasarkan desain landing page UI kit dari Anima. Proyek ini bertujuan untuk mengasah keterampilan saya dalam memotong (slicing) dan menerjemahkan desain UI menjadi kode menggunakan React.js dan Shadcn UI, sehingga menghasilkan antarmuka pengguna yang responsif dan semirip mungkin dengan desain aslinya.

Fitur

• Desain Akurat: Mengikuti desain UI kit dari Anima secara detail.
• Responsif: Memastikan tampilan yang optimal pada berbagai ukuran layar.
• Komponen Modular: Menggunakan React.js untuk membangun komponen yang dapat digunakan kembali.
• Shadcn UI: Mengintegrasikan Shadcn UI untuk gaya dan elemen antarmuka yang konsisten.
• Clean Code: Struktur kode yang rapi dan mudah dibaca.
• Teknologi Terbaru: Menggunakan React.js, Shadcn UI, HTML5, dan CSS3.

Struktur Proyek

• src/: Folder utama untuk kode sumber.
  • components/: Folder untuk komponen React.
  • styles/: Folder yang berisi file CSS.
    • main.css: File CSS utama.
  • App.js: Komponen utama aplikasi.
  • index.js: File entry point aplikasi.
• public/: Folder untuk aset publik seperti gambar dan ikon.
• package.json: File konfigurasi proyek.

Cara Menjalankan

1. Clone Repositori ini git clone https://github.com/hannw171/anima-landing-ui-1.git
2. Buka folder proyek cd anima-landing-ui-1
3. Install dependencies npm install
4. Jalankan aplikasi npm run dev

Preview

Screen Version

• Website version
• Tablet version
• Mobile version

Referensi

• Anima UI Kit : Sumber desain yang digunakan dalam proyek ini.
• React.js : Library JavaScript untuk membangun antarmuka pengguna.
• Shadcn UI : UI framework yang digunakan untuk gaya dan elemen antarmuka.