istilah Hero pada React

 Dalam React, istilah Hero biasanya merujuk pada Hero Component, yaitu komponen yang dirancang untuk menampilkan bagian paling mencolok dari sebuah halaman atau aplikasi web. Komponen ini biasanya digunakan di bagian atas halaman (dikenal sebagai "hero section") untuk menarik perhatian pengguna.

Ciri-ciri Hero Component

1. Ukuran Besar: Hero section biasanya mencakup banyak ruang pada halaman, sering kali melibatkan elemen visual seperti gambar besar, video, atau gradien warna.

2. Headline Menarik: Menampilkan teks utama atau judul besar untuk menyampaikan pesan inti.

3. Call to Action (CTA): Biasanya menyertakan tombol atau tautan yang mendorong pengguna untuk mengambil tindakan, seperti "Pelajari Lebih Lanjut", "Daftar Sekarang", atau "Beli Sekarang".

4. Media Visual: Menggunakan elemen seperti gambar latar, video, atau ilustrasi untuk mendukung teks dan membuatnya lebih menarik.

 

 import React from 'react';

const Hero = () => {
  return (
    <section style={styles.hero}>
      <div style={styles.content}>
        <h1 style={styles.title}>Selamat Datang di Website Kami</h1>
        <p style={styles.subtitle}>Kami menyediakan layanan terbaik untuk Anda.</p>
        <button style={styles.button}>Pelajari Lebih Lanjut</button>
      </div>
    </section>
  );
};

const styles = {
  hero: {
    height: '100vh',
    background: 'url("https://via.placeholder.com/1920x1080") center/cover no-repeat',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    color: '#fff',
    textAlign: 'center',
  },
  content: {
    maxWidth: '600px',
  },
  title: {
    fontSize: '3rem',
    fontWeight: 'bold',
  },
  subtitle: {
    fontSize: '1.5rem',
    margin: '1rem 0',
  },
  button: {
    padding: '10px 20px',
    fontSize: '1rem',
    backgroundColor: '#007BFF',
    color: '#fff',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
  },
};

export default Hero;

 Penjelasan Kode

1. Hero adalah komponen React yang berfungsi sebagai hero section.
2. styles.hero mengatur tampilan latar belakang, tinggi, dan posisi konten di tengah.
3. Elemen h1 dan p digunakan untuk judul dan deskripsi.
4. Tombol CTA memungkinkan pengguna untuk berinteraksi.

Hero Component ini bisa disesuaikan sesuai kebutuhan desain dan fungsi situs web.