MeaChat
Docs / Hero

Hero

The Hero component is designed to grab attention immediately. It features an animated entrance, background blur effects, and clear calls to action.

Usage

import Hero from '~/components/sections/Hero.astro';

<Hero 
  badge="✨ New Release 2.0"
  title="Build Faster with"
  highlight="Astro Components"
  description="The ultimate boilerplate for your next project."
  primaryCta={{ text: "Get Started", href: "/docs" }}
  secondaryCta={{ text: "View GitHub", href: "https://github.com" }}
/>

Example

Hero background

Next Gen Landing Pages

This is how the Hero component looks when rendered. It automatically handles responsiveness and animations.

Store owner
We get too many WhatsApp and Instagram messages every day. I need the bot to answer for us.
MeaChat replies 24/7 on WhatsApp, Instagram, and your website using your own FAQs and flows.
Customer
Hi, I want to check my order status.
Your order is on the way 🚚 Delivery today between 4–6 PM. Reply 1 to change the time or 2 to talk to a human.

Props

PropTypeDefaultDescription
badgestring"✨ ..."Top label badge text.
titlestring"Build Faster with"Main headline text.
highlightstring"Premium Design"Text to be highlighted (gradient/color).
descriptionstring"A production-ready..."Subtitle text description.
primaryCta{ text: string, href: string }{ text: "Get Started", ... }Primary button configuration.
secondaryCta{ text: string, href: string }{ text: "View on GitHub", ... }Secondary button configuration.
Previous Stats Next Features Grid