Hero Component

A modern and responsive hero section component for landing pages.

Preview

Hero Component Preview

The Hero component in action, showcasing the gradient background and interactive elements.

Usage

Import and use the Hero component in your landing page:

import { Hero } from "@/components/landing/Hero";


export default function LandingPage() {
  return (
    <main>
      <Hero />
      {/* Other sections */}
    </main>
  );
}

Features

Responsive Design

Fully responsive layout with mobile-first approach.

Visual Effects

Beautiful gradients and hover effects.

Interactive Elements

Animated buttons with hover states.

Customizable

Easy to modify content and styling.

Next Steps

Profile Button →

Learn about the profile button component

Pricing Component →

Explore the pricing section implementation