50 lines
1.4 KiB
Plaintext
50 lines
1.4 KiB
Plaintext
---
|
|
import type { HTMLAttributes } from "astro/types";
|
|
import { tv } from "tailwind-variants";
|
|
|
|
import { Button } from "@/components/starwind/button";
|
|
|
|
interface Props extends HTMLAttributes<"section"> {
|
|
headline?: string;
|
|
subheadline?: string;
|
|
primaryCtaText?: string;
|
|
primaryCtaHref?: string;
|
|
secondaryCtaText?: string;
|
|
secondaryCtaHref?: string;
|
|
}
|
|
|
|
const heroStyles = tv({
|
|
base: "relative overflow-hidden py-20 md:py-32 lg:py-40",
|
|
});
|
|
|
|
const {
|
|
headline = "Herramientas gratuitas para tu día a día",
|
|
subheadline = "Resuely es una marca paraguas de aplicaciones web gratuitas diseñadas para usuarios venezolanos",
|
|
primaryCtaText = "Explorar apps",
|
|
primaryCtaHref = "/#apps",
|
|
secondaryCtaText = "Saber más",
|
|
secondaryCtaHref = "/#about",
|
|
class: className,
|
|
...rest
|
|
} = Astro.props;
|
|
---
|
|
|
|
<section class={heroStyles({ class: className })} {...rest}>
|
|
<div class="mx-auto max-w-7xl px-4 text-center">
|
|
<h1 class="font-heading text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
|
|
{headline}
|
|
</h1>
|
|
<p class="mt-6 text-lg text-muted-foreground md:text-xl max-w-2xl mx-auto">
|
|
{subheadline}
|
|
</p>
|
|
<div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
|
|
<Button href={primaryCtaHref} size="lg">
|
|
{primaryCtaText}
|
|
</Button>
|
|
<Button href={secondaryCtaHref} variant="outline" size="lg">
|
|
{secondaryCtaText}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|