Made with:

Welcome to my site

This is a description of my site.

It's free

0$Free

Trusted by

The Hero component is a hero section that can include an image, title (TextHightlight), description, call-to-action button, promo section, and trusted by section.

You can customize the text position, background glow, and image.

It uses the TextHighlight, Button, and AvatarsTestimonial components.

Usage

javascript
1import Hero from '@/components/landing/Hero';
2
3<Hero />

Props

Name	Type	Default	Description
textHighlight	object	`{ text: "", highlight: "", color: "", fromGradient: "", toGradient: "" }`	The text to highlight (see `TextHighlight` for more details).
description	string	`""`	The description text.
buttonText	string	`""`	The text for the call-to-action button.
buttonSubText	string	`""`	The subtext for the call-to-action button.
showPromo	boolean	`false`	Whether to show the promo section.
promo	object	`{ price: 0, text: "" }`	The promo text.
showTrustedBy	boolean	`false`	Whether to show the trusted by section.
trustedBy	object	`{ text: "", avatars: [] }`	The trusted by section.
textPosition	string	`"left"`	The position of the text.
imageSrc	string	`""`	The source of the image.
imageAlt	string	`""`	The alt text for the image.
backgroundGlow	string	`""`	The color of the background glow, see tailwind.config.
glowOpacity	number	`0.5`	The opacity of the background glow.
glowSize	string	`"30%"`	The size of the background glow.
glowBlur	number	`100`	The blur of the background glow.
className	string	`""`	Additional Tailwind utility classes.
...props	object	-	Any other valid HTML attributes for the `<header>` element.

The Hero component uses the TextLink and Button components.

Examples

Hero with Image

Made with:

Welcome to my site

This is a description of my site.

It's free

0$Free

Trusted by

Minimal Hero

Made with:

Welcome to my site

This is a description of my site.

Custom Hero with Glow and Gradient Effects

Made with:

Welcome to my site

This is a description of my site.