Membuat Renposif Website

 

https://www.youtube.com/watch?v=VTqehZ4fk_4

https://github.com/bedimcode/responsive-medical-website

https://buymeacoffee.com/bedimcode/e/540390

https://sites.google.com/view/medicalfb/halaman-muka

Panduan Prompt Landing Page Medis Premium

Dokumen ini berisi kumpulan prompt teroptimasi yang dapat Anda gunakan pada berbagai AI (Image Generator maupun Code Generator) untuk mereplikasi atau mengembangkan desain landing page medis seperti pada gambar contoh.

1. Prompt untuk AI Image Generator (Midjourney / DALL-E 3)

Gunakan prompt ini jika Anda ingin menghasilkan inspirasi desain visual baru, aset gambar, atau mockup UI/UX di Figma.

Versi Bahasa Inggris (Sangat Direkomendasikan untuk Midjourney)

Prompt: > "A premium, high-fidelity UI/UX landing page design for a modern medical and vaccine delivery service. Clean and minimalist layout. Color palette: electric royal blue (#005bf5), deep navy blue (#0b1a30), and pure white background. The design features:

1. A hero section with a friendly female doctor smiling, overlapping curved vibrant blue card, and crisp typography 'Get Quick Medical Service'.

2. A vaccine section with a sleek mobile phone mockup showing a vaccination request interface with a floating 3D/SVG vaccine syringe and vial.

3. A trust/certificate section with a deep navy rounded card, key statistics, and an elegant white certificate showing a doctor's signature. Modern typography, soft shadows, sleek web interface, Figma style, highly detailed, 8k resolution, web design showcase --ar 16:9 --v 6.0"

Versi Bahasa Indonesia

Prompt: "Desain landing page UI/UX premium dan berkualitas tinggi untuk layanan medis modern dan pengiriman vaksin. Tata letak bersih dan minimalis. Palet warna: biru royal elektrik, biru dongker gelap, dan latar belakang putih bersih. Desain menampilkan:

1. Bagian hero dengan dokter wanita yang ramah sedang tersenyum, kartu melengkung berwarna biru cerah yang tumpang tindih, dan tipografi bersih 'Get Quick Medical Service'.

2. Bagian vaksin dengan mockup ponsel pintar ramping yang menunjukkan antarmuka permintaan vaksinasi dengan aset jarum suntik dan botol vaksin 3D/SVG yang melayang.

3. Bagian sertifikat dengan kartu melengkung berwarna biru dongker, statistik utama, dan sertifikat putih elegan yang menunjukkan tanda tangan dokter. Tipografi modern, bayangan lembut, antarmuka web yang ramping, gaya Figma, sangat detail, resolusi 8k --ar 16:9"

2. Prompt untuk Code Generator (HTML/Tailwind, React, atau Vue)

Gunakan prompt terstruktur ini jika Anda ingin meminta AI menulis kode front-end yang presisi sesuai dengan struktur visual pada gambar.

Prompt: "Buatkan kode single-file HTML5 menggunakan Tailwind CSS untuk landing page medis yang modern, responsif, dan interaktif dengan detail berikut:

1. Tema Warna & Gaya:

   • Warna Utama: Biru Elektrik (#005bf5 atau sejenisnya) dan Biru Navy Gelap (#081a3e) untuk background aksen.

   • Gunakan font modern (seperti Plus Jakarta Sans atau Inter).

   • Sudut melengkung yang halus (rounded-2xl / rounded-3xl) dan efek melayang (hover effects) untuk tombol serta kartu.

2. Struktur Bagian (Section):

   • Navbar: Logo minimalis di kiri (Medical + ikon detak jantung/plus), menu navigasi di tengah (Home, Delivery, About Us, Prices, Contact) dengan efek hover interaktif.

   • Hero Section:

     • Sisi Kiri: Grid visual interaktif. Gunakan kartu latar belakang biru melengkung besar. Di atasnya, tampilkan gambar transparan dokter wanita dengan stetoskop. Tambahkan kartu informasi mengambang bertuliskan 'Dr. Myla Harts (Bones Specialist)' dan mockup ponsel gelap di sisi kanan kartu biru dengan tulisan 'Contact'.

     • Sisi Kanan: Judul besar yang menarik 'Get Quick Medical Service', deskripsi layanan medis bersertifikat, dan tombol call-to-action (CTA) 'Get Started' berwarna biru terang.

   • Section Vaksinasi (Vaccine Injections Delivery Service):

     • Sisi Kiri: Mockup ponsel interaktif berwarna biru terang dengan tulisan 'Request Vaccination', indikator pasien '32k Patients', tombol 'Request >', serta ilustrasi grafis jarum suntik (syringe) dan botol vaksin (vial) yang melayang indah.

     • Sisi Kanan: Judul 'Vaccine Injections Delivery Service', paragraf deskripsi singkat, dan dua kartu fitur di bawahnya: 'Home Service' (ikon rumah) dan '1-Hour Service' (ikon jam/perisai) dengan keterangan singkat.

   • Section Sertifikat & Statistik:

     • Gunakan kontainer besar berwarna biru navy gelap dengan sudut melengkung lebar.

     • Sisi Kiri: Judul 'We Have Certified Medical Service', deskripsi jaminan kualitas, dan baris statistik: '256 Healthy Patients', '16 Hospital Care', '8 Years of Experience'. Sertakan link CTA 'Contact Me >'.

     • Sisi Kanan: Mockup sertifikat fisik yang realistis di atas kertas putih, miring secara elegan, lengkap dengan header instansi medis, tanda tangan dokter ('Myla Harts'), dan stempel segel emas/biru melingkar.

3. Interaktivitas:

   • Pastikan semua tombol memiliki feedback visual saat di-hover/klik.

   • Tambahkan modal pop-up interaktif menggunakan JavaScript murni saat tombol 'Get Started' atau 'Request' diklik (jangan gunakan alert bawaan browser).

   • Desain harus sepenuhnya responsif di perangkat mobile, tablet, dan desktop."