---
import Section from '@components/Section.astro';
import Button from '@components/Button.astro';
import Icon from '@components/Icon.astro';
---

<Section>
	<div class="flow flow-space-3 text-center max-w-2xl mx-auto">
		<span
			class="text-xs bg-gradient-to-br from-orange-100 to-pink-100 text-black/75 rounded-full px-3 py-1.5 leading-none inline-block uppercase font-bold tracking-wide"
		>
			Example
		</span>
		<h1>Building a Website has Never Been This Easy</h1>
		<p class="text-xl text-balance">
			Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec a
			diam lectus.
		</p>
		<Button href="/contact">
			Get Started
			<Icon name="arrow-right" class="text-white text-xl" slot="end" />
		</Button>
	</div>
</Section>

<!-- /*
Usage:
<Hero />
*/ -->

--- import Section from '@components/Section.astro'; import Button from '@components/Button.astro'; import Icon from '@components/Icon.astro'; --- <Section> <div class="flow flow-space-3 text-center max-w-2xl mx-auto"> <span class="text-xs bg-gradient-to-br from-orange-100 to-pink-100 text-black/75 rounded-full px-3 py-1.5 leading-none inline-block uppercase font-bold tracking-wide" > Example </span> <h1>Building a Website has Never Been This Easy</h1> <p class="text-xl text-balance"> Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. </p> <Button href="/contact"> Get Started <Icon name="arrow-right" class="text-white text-xl" slot="end" /> </Button> </div> </Section> <!-- /* Usage: <Hero /> */ -->

---
import Section from '@components/Section.astro';
import Button from '@components/Button.astro';
import Icon from '@components/Icon.astro';
---

<Section
	backgroundImage="https://unsplash.it/1920/1080"
	innerClass="text-white bg-gradient-to-br from-orange-500/80 to-pink-500/80 bg-opacity-50"
>
	<div class="flow text-center mx-auto max-w-lg">
		<h2>This is a Section</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a
			diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac
			quam viverra nec consectetur ante hendrerit.
		</p>
		<Button href="/contact" icon="caret-down" variant="secondary">
			Get Started
			<Icon name="arrow-right" class="fill-current text-xl" slot="end" />
		</Button>
	</div>
</Section>

<!-- /*
Usage:
<Hero />
*/ -->

--- import Section from '@components/Section.astro'; import Button from '@components/Button.astro'; import Icon from '@components/Icon.astro'; --- <Section backgroundImage="https://unsplash.it/1920/1080" innerClass="text-white bg-gradient-to-br from-orange-500/80 to-pink-500/80 bg-opacity-50" > <div class="flow text-center mx-auto max-w-lg"> <h2>This is a Section</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. </p> <Button href="/contact" icon="caret-down" variant="secondary"> Get Started <Icon name="arrow-right" class="fill-current text-xl" slot="end" /> </Button> </div> </Section> <!-- /* Usage: <Hero /> */ -->

---
import Section from '@components/Section.astro';
import Button from '@components/Button.astro';
import Icon from '@components/Icon.astro';
---

<Section
	backgroundImage="https://unsplash.it/1920/1080"
	innerClass="text-white bg-gradient-to-br from-orange-500/80 to-pink-500/80 bg-opacity-50"
	collapse
>
	<div class="flow max-w-lg pt-32 pb-10">
		<h2>This is a Section</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a
			diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac
			quam viverra nec consectetur ante hendrerit.
		</p>
		<Button href="/contact" icon="caret-down" variant="secondary">
			Get Started
			<Icon name="arrow-right" class="fill-current text-xl" slot="end" />
		</Button>
	</div>
</Section>

<!-- /*
Usage:
<Hero />
*/ -->

--- import Section from '@components/Section.astro'; import Button from '@components/Button.astro'; import Icon from '@components/Icon.astro'; --- <Section backgroundImage="https://unsplash.it/1920/1080" innerClass="text-white bg-gradient-to-br from-orange-500/80 to-pink-500/80 bg-opacity-50" collapse > <div class="flow max-w-lg pt-32 pb-10"> <h2>This is a Section</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. </p> <Button href="/contact" icon="caret-down" variant="secondary"> Get Started <Icon name="arrow-right" class="fill-current text-xl" slot="end" /> </Button> </div> </Section> <!-- /* Usage: <Hero /> */ -->

---
import Carousel from '@components/Carousel.astro';
import CarouselSlide from '@components/CarouselSlide.astro';
import CenteredTextOnly from './CenteredTextOnly.astro';
import LeftAlignedWithImage from './LeftAlignedWithImage.astro';
---

<Carousel withArrows>
	<CarouselSlide>
		<CenteredTextOnly />
	</CarouselSlide>
	<CarouselSlide>
		<LeftAlignedWithImage />
	</CarouselSlide>
</Carousel>

--- import Carousel from '@components/Carousel.astro'; import CarouselSlide from '@components/CarouselSlide.astro'; import CenteredTextOnly from './CenteredTextOnly.astro'; import LeftAlignedWithImage from './LeftAlignedWithImage.astro'; --- <Carousel withArrows> <CarouselSlide> <CenteredTextOnly /> </CarouselSlide> <CarouselSlide> <LeftAlignedWithImage /> </CarouselSlide> </Carousel>