HeroSection

Can be used as part of a HeroSlider or as a standalone element

https://

With Action

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Read Detail

---
import { HeroSection } from '@yatoday/astro-ui/astro';
---

<HeroSection
  title="With Action"
  description="Lorem ipsum dolor sit amet, consectetur adipisicing elit..."
  image={{
    src: '~/assets/images/800x800.svg',
    alt: 'Lorem Ipsum',
  }}
  callToAction={{ href: '#', variant: 'primary', text: 'Read Detail' }}
/>

Without action

https://

Without action

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

---
import { HeroSection } from '@yatoday/astro-ui/astro';
---

<HeroSection
  title="Without action"
  description="Lorem ipsum dolor sit amet, consectetur adipisicing elit..."
  image={{
    src: '~/assets/images/800x800.svg',
    alt: 'Lorem Ipsum',
  }}
/>

---
import { HeroSection } from '@yatoday/astro-ui/astro';
---

<HeroSection
  title="custom CSS"
  description="Lorem ipsum dolor sit amet, consectetur adipisicing elit..."
  image="~/assets/images/800x800.svg"
  classes={{
    container: 'rounded-3xl h-72 bg-linear-to-r/srgb from-gray-900 to-gray-600',
    image: '',
    title: 'font-bold uppercase bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent',
    description: 'text-zinc-300',
  }}
/>

Props