Hero Komponens

Hero szekció

A Hero komponens a weboldal kiemelt szekciója, ami feltűnő megjelenést biztosít a főoldalon vagy landing oldalon.

Hero variációk

Egyetlen CTA gombbal

BÜCHL Hero Kép

Egy ötlettel előrébb

Innováció találkozik a fenntarthatósággal.

Kapcsolatfelvétel
      <BuchlHero
  title="Egy ötlettel előrébb"
  subtitle="Innováció találkozik a fenntarthatósággal."
  image="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1600&h=600&fit=crop"
  :primary-cta="{
    label: 'Kapcsolatfelvétel',
    to: '/kapcsolat'
  }"
/>

Külső hivatkozással

BÜCHL Hero Kép

Karrier a BÜCHL-nél

Legyen csapatunk tagja.

Állásajánlatok
      <BuchlHero
  title="Karrier a BÜCHL-nél"
  subtitle="Legyen csapatunk tagja."
  image="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600&h=600&fit=crop"
  :primary-cta="{
    label: 'Állásajánlatok',
    href: 'https://karrier.buchl.hu'
  }"
/>

Zöld háttérrel - Tömör gomb

BÜCHL Hero Kép

A fenntarthatóság a küldetésünk

Együtt egy tisztább jövőért.

Fenntarthatóság
      <BuchlHero
  title="A fenntarthatóság a küldetésünk"
  subtitle="Együtt egy tisztább jövőért."
  image="https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?w=1600&h=600&fit=crop"
  bgColor="green"
  :primary-cta="{
    label: 'Fenntarthatóság',
    to: '/fenntarthatosag'
  }"
/>

Zöld háttérrel - Fehér konturos gomb

BÜCHL Hero Kép

Innovatív. Sokszínű. Családias.

Fenntartható megoldások egy jobb világért.

Tudjon meg többetKüldetésünk
      <BuchlHero
  title="Innovatív. Sokszínű. Családias."
  subtitle="Fenntartható megoldások egy jobb világért."
  image="https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?w=1600&h=600&fit=crop"
  bgColor="green"
  :primary-cta="{
    label: 'Tudjon meg többet',
    to: '/rolunk'
  }"
  :secondary-cta="{
    label: 'Küldetésünk',
    to: '/kuldetes'
  }"
/>

Permanent Marker betűtípussal

BÜCHL Hero Kép

BÜCHL - Egy ötlettel tovább

Fenntartható megoldások innovatív szemlélettel.

KapcsolatfelvételRólunk
      <BuchlHero
  title="BÜCHL - Egy ötlettel tovább"
  subtitle="Fenntartható megoldások innovatív szemlélettel."
  image="https://images.unsplash.com/photo-1611735341450-74d61e660ad2?w=1600&h=600&fit=crop"
  bgColor="green"
  titleFont="permanent-marker"
  :primary-cta="{
    label: 'Kapcsolatfelvétel',
    to: '/kapcsolat'
  }"
  :secondary-cta="{
    label: 'Rólunk',
    to: '/rolunk'
  }"
/>

Ferde háttérrel (Skewed)

BÜCHL Hero Kép

Karrier a Büchlnél

INNOVATÍV. SOKSZÍNŰ. CSALÁDIAS.

Karrier lehetőségek
      <BuchlHero
  title="Karrier a Büchlnél"
  subtitle="INNOVATÍV. SOKSZÍNŰ. CSALÁDIAS."
  image="https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?w=1600&h=800&fit=crop"
  bgColor="blue"
  titleFont="permanent-marker"
  :skewed="true"
  :primary-cta="{
    label: 'Karrier lehetőségek',
    to: '/karrier'
  }"
/>

Ferde háttérrel videóval

Innováció és fenntarthatóság

25 ÉVE A KÖRNYEZETÉRT

FenntarthatóságProjektek
      <BuchlHero
  title="Innováció és fenntarthatóság"
  subtitle="25 ÉVE A KÖRNYEZETÉRT"
  image="https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?w=1600&h=800&fit=crop"
  :videoUrl="videoUrl"
  bgColor="green"
  titleFont="permanent-marker"
  :skewed="true"
  :primary-cta="{
    label: 'Fenntarthatóság',
    to: '/fenntarthatosag'
  }"
  :secondary-cta="{
    label: 'Projektek',
    to: '/projektek'
  }"
/>

// A videoUrl változót így definiáljuk:
// Professzionális HD videó
const videoUrl = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4'

// Vagy használhatod a saját videód:
// const videoUrl = '/videos/recycling-plant.mp4'

💡 Tipp: YouTube videó használata

A YouTube videó beágyazásához (mint például a Hungaroplast recycling videó), az alábbi módszereket használhatod:

  1. Töltsd le a videót és helyezd el a /public/videos/ mappában
  2. Használd YouTube letöltő szolgáltatásokat (pl. y2mate.com)
  3. Ha már van lokális videófájlod, használd így:
      <BuchlHero
  title="Hungaroplast recikling"
  subtitle="A FENNTARTHATÓ JÖVŐ SZOLGÁLATÁBAN"
  image="/images/hungaroplast-poster.jpg"
  :videoUrl="/videos/hungaroplast-recycling.mp4"
  bgColor="green"
  titleFont="permanent-marker"
  :skewed="true"
  :primaryCta="{
    label: 'Kapcsolatfelvétel',
    to: '/kapcsolat'
  }"
/>