Hero Component

The Hero component is the first thing visitors see on your landing page. It includes a headline, description, feature checklist, CTA button, and an optional hero image.

Location


src/components/Hero/Hero.tsx

Usage

app/page.tsx


import Hero from '@/components/Hero/Hero'
 
export default function Home() {
  return <Hero />
}

Customization

All customization happens by editing the component file directly. Open Hero.tsx and modify the variables at the top:

Hero Image

Hero.tsx


const Hero: React.FC = () => {
  const heroImage = Demo.src  // Change to your image path

Options:

Use an imported image: import MyImage from '@/public/my-image.png'
Use a path string: const heroImage = '/images/hero.png'
Remove image: const heroImage = undefined

Image Position

Hero.tsx


const Hero: React.FC = () => {
  const heroImageLeft = false  // false = right, true = left

false - Image on the right (default)
true - Image on the left

Powered By Section

Hero.tsx


const Hero: React.FC = () => {
  const poweredByText = undefined  // e.g., "Powered by"
  const poweredByImage = undefined  // Logo image
  const poweredByImageLeft = false  // Image position

Example:


const poweredByText = "Powered by"
const poweredByImage = "/logos/openai.png"
const poweredByImageLeft = false

This displays: “Powered by [OpenAI Logo]“

Description Text

Hero.tsx


const Hero: React.FC = () => {
  const description =
    'Use this full-stack Next.js and Express boilerplate to kickstart your AI-tool, SaaS, or any other web application.'

Change this to describe your product or service.

Feature Checklist

Hero.tsx


const Hero: React.FC = () => {
  const checkList = ['Easy to set up', 'Save time', 'Customizable']

Customization:


const checkList = [
  'Launch in days, not months',
  'Production-ready code',
  'Stripe payments included',
  'SEO optimized'
]

Checklist Icon

Hero.tsx


const Hero: React.FC = () => {
  const checkListIcon = null  // Uses default checkmark

Custom icon:


import { AiFillStar } from 'react-icons/ai'
 
const checkListIcon = <AiFillStar className="w-4 h-4 mr-2 inline fill-success" />

Icon position:


const checkListIconRight = false  // false = left, true = right

Complete Example

Here’s a fully customized Hero component:

Hero.tsx


import PricingCTAButton from '@/components/Button/PricingCTAButton'
import Image from 'next/image'
import React from 'react'
import { AiFillStar } from 'react-icons/ai'
import MyHeroImage from '../../../public/my-hero.png'
 
const Hero: React.FC = () => {
  const heroImage = MyHeroImage.src
  const heroImageLeft = true  // Image on left
  
  const poweredByText = "Built with"
  const poweredByImage = "/logos/nextjs.png"
  const poweredByImageLeft = false
  
  const description =
    'Launch your SaaS in record time with our production-ready boilerplate. Authentication, payments, and admin dashboard included.'
  
  const checkList = [
    'Ship in 24 hours',
    'Stripe integration',
    'Google OAuth',
    'Admin dashboard'
  ]
  
  const checkListIcon = <AiFillStar className="w-4 h-4 mr-2 inline fill-warning" />
  const checkListIconRight = false
 
  return (
    <section
      className={`max-w-7xl mx-auto mb-20 flex flex-col ${heroImageLeft ? 'xl:flex-row-reverse' : 'xl:flex-row'} items-center justify-center gap-16 xl:gap-20 xl:items-start px-8 py-8 xl:py-20 `}
    >
      {/* ... rest of component */}
    </section>
  )
}
 
export default Hero

Styling

Section Styling

The main section uses these classes:


<section className="max-w-7xl mx-auto mb-20 flex flex-col xl:flex-row items-center justify-center gap-16 xl:gap-20 xl:items-start px-8 py-8 xl:py-20">

max-w-7xl mx-auto - Centered with max width
mb-20 - Bottom margin
flex flex-col xl:flex-row - Column on mobile, row on desktop
gap-16 xl:gap-20 - Spacing between elements
px-8 py-8 xl:py-20 - Padding

Headline Styling

The headline has a special design with a highlighted word:


<h1 className="font-extrabold text-3xl md:text-6xl tracking-tight">
  <span className="relative">Ship your full-stack</span>
  <span className="whitespace-nowrap relative">
    <span className="mr-3 sm:mr-4 md:mr-5">project in,</span>
    <span className="relative whitespace-nowrap">
      <span className="absolute bg-neutral -left-2 -top-1 -bottom-1 -right-2 -rotate-1"></span>
      <span className="relative text-neutral-content">no time</span>
    </span>
  </span>
</h1>

The “no time” text has a rotated background box for emphasis.

Customizing the headline:


<h1 className="font-extrabold text-3xl md:text-6xl tracking-tight">
  <span className="relative">Launch your</span>
  <span className="whitespace-nowrap relative">
    <span className="mr-3 sm:mr-4 md:mr-5">startup in</span>
    <span className="relative whitespace-nowrap">
      <span className="absolute bg-primary -left-2 -top-1 -bottom-1 -right-2 -rotate-1"></span>
      <span className="relative text-primary-content">24 hours</span>
    </span>
  </span>
</h1>

Image Styling


<Image
  src={heroImage}
  alt="Hero Image"
  className="w-full max-w-lg rounded-lg"
  width={500}
  height={500}
/>

w-full max-w-lg - Responsive width with max limit
rounded-lg - Rounded corners

Layout Options

Image Right (Default)


const heroImageLeft = false


┌─────────────────────────────────┐
│  Text Content    │   Image      │
│  - Headline      │              │
│  - Description   │              │
│  - Checklist     │              │
│  - CTA Button    │              │
└─────────────────────────────────┘

Image Left


const heroImageLeft = true


┌─────────────────────────────────┐
│   Image      │  Text Content    │
│              │  - Headline      │
│              │  - Description   │
│              │  - Checklist     │
│              │  - CTA Button    │
└─────────────────────────────────┘

No Image


const heroImage = undefined


┌─────────────────────────────────┐
│        Text Content Centered    │
│          - Headline             │
│          - Description          │
│          - Checklist            │
│          - CTA Button           │
└─────────────────────────────────┘

CTA Button

The Hero component uses the PricingCTAButton component. To customize it:

Open /components/CTA/CTA.tsx
Modify the button configuration:

CTA.tsx


export const buttonText = 'Get Started'
export const buttonLogo = <FaRocket />
export const buttonLogoRight = false

See Buttons documentation for more details.

Responsive Behavior

Mobile (< 768px)

Single column layout
Image below text (if present)
Centered text
Smaller font sizes

Tablet (768px - 1024px)

Still single column
Larger spacing
Medium font sizes

Desktop (> 1024px)

Two-column layout
Image beside text
Left-aligned text
Large font sizes

Best Practices

Headline

Keep it short and impactful (5-10 words)
Focus on the main benefit
Use action words
Highlight the key phrase with the background box

Description

Explain what you do in one sentence
Focus on the value proposition
Keep it under 30 words

Checklist

List 3-5 key benefits
Use short phrases (2-5 words each)
Focus on outcomes, not features
Make them scannable

Image

Use high-quality images (at least 1000px wide)
Show your product in action
Use WebP format for better performance
Include alt text for accessibility

Common Customizations

Remove Checklist


const checkList = null  // or undefined

Add More Checklist Items


const checkList = [
  'Feature 1',
  'Feature 2',
  'Feature 3',
  'Feature 4',
  'Feature 5',
  'Feature 6'
]

Change Colors


{/* Change checkmark color */}
<AiOutlineCheck className="w-4 h-4 mr-2 inline fill-primary" />
 
{/* Change background box color */}
<span className="absolute bg-primary -left-2 -top-1 -bottom-1 -right-2 -rotate-1"></span>
<span className="relative text-primary-content">highlighted text</span>

Add Animation


<h1 className="font-extrabold text-3xl md:text-6xl tracking-tight animate-fade-in">
  {/* ... */}
</h1>

(Requires adding animation in tailwind.config.ts)

Accessibility

The Hero component follows accessibility best practices:

Uses semantic HTML (<section>, <h1>, <p>, <ul>)
Includes alt text for images
Proper heading hierarchy
Keyboard navigable CTA button
Sufficient color contrast

SEO Considerations

The <h1> tag is used for the main headline (only one per page)
Description text provides context for search engines
Image alt text improves image search rankings
Clear CTA helps with conversion tracking

Next Steps

Pricing Component - Add pricing tables
FAQ Component - Answer common questions
Buttons - Customize CTA buttons
DaisyUI Themes - Change colors and themes