Hero Banner

The Hero Banner is the first thing users see — make it count. This component is designed to showcase a bold message, highlight key actions, or introduce your brand with impact.

Built with Tailwind CSS and ready for Next.js or React.js projects, it's fully responsive and easy to customize for any landing page or homepage.

Hero Banner section preview

1. Hero Banner component setup

Before setup HeroBanner component, you need setup some common components

• Button component
• Container component

Create a new file /components/sections/HeroBanner.tsx

jsx
"use client";

import { motion } from "framer-motion";

import Button from "./Button";
import Container from "./Container";

export function Hero() {
  return (
    <Container className="flex h-screen flex-col items-center justify-center">
      <h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
        <motion.div
          initial={{ x: "70%" }} // Start off-screen to the right
          animate={{ x: 0 }} // Move to its normal position
          exit={{ x: "-100%" }} // Exit off-screen to the left
          transition={{ duration: 0.7, ease: "easeInOut" }} // Smooth transition
        >
          Build Your App Fast <br />
        </motion.div>
        <motion.div
          initial={{ x: "-70%" }} // Start off-screen to the left
          animate={{ x: 0 }} // Move to the center
          exit={{ x: "100%" }} // Exit off-screen to the right
          transition={{ duration: 1, ease: "easeInOut" }} // Smooth transition
        >
          Start Earning
          <span className="relative whitespace-nowrap text-primary">
            <span className="relative"> Faster</span>
          </span>
        </motion.div>
      </h1>
      <p className="mx-auto mt-6 max-w-2xl text-center text-lg tracking-tight text-slate-700">
        Build your SaaS app, AI tool, or any other web app with Next.js templates and easy docs.
        Build fast, Launch fast, Earn faster—no tech worries.
      </p>
      <div className="mt-10 flex justify-center gap-x-6">
        <Button shadow>Get started now</Button>
      </div>
    </Container>
  );
}

2. Usages

we can use HeroBanner component in any pages on your app

jsx
import HeroBanner from "@/components/sections/HeroBanner";

...

<DefaultLayout>
  <HeroBanner />
  <About />
  <Faqs />
  <Callout />
  <Contact />
  <AboutMe />
</DefaultLayout>

The UI is shown like that