Hero #4 block for Next.js
The Hero #4 block is a professionally designed React component built with shadcn/ui and Tailwind CSS for Next.js applications. This hero block is part of our comprehensive website builder library, offering developers a production-ready solution that combines modern design with clean, maintainable code.
This hero section component features responsive layouts optimized for all screen sizes, making it perfect for landing pages and marketing websites. Built with Next.js best practices, it includes support for images, call-to-action buttons, and customizable content.
This component is available in our free tier, making it accessible for all developers building with our website builder.
The component uses TypeScript for type safety, shadcn/ui for accessible UI primitives, and Tailwind CSS for utility-first styling. It follows Next.js App Router conventions and is fully compatible with React Server Components.
import Image from "next/image"
import Link from "next/link"
import type { VariantProps } from "class-variance-authority"
import { Button, buttonVariants } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { IconType, ImageType, LinkType } from "@/types"
interface Props {
badge?: string
title?: string
description?: string
buttons?: {
label: string
link: LinkType
variant?: VariantProps<typeof buttonVariants>["variant"]
icon?: IconType
}[]
image?: ImageType
stats?: {
value: string
label: string
}[]
}
export default function Hero4({
badge,
title,
description,
buttons,
image,
stats,
}: Props) {
return (
<div className="w-full relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-secondary/20 animate-gradient" />
<div className="container mx-auto relative">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center py-20 lg:py-40">
<div className="flex flex-col gap-8">
{badge && (
<div>
<Badge variant="default">{badge}</Badge>
</div>
)}
<div className="flex flex-col gap-6">
{title && (
<h1 className="text-4xl md:text-7xl font-bold tracking-tight">
{title}
</h1>
)}
{description && (
<p className="text-xl text-muted-foreground leading-relaxed">
{description}
</p>
)}
</div>
{buttons && buttons.length > 0 && (
<div className="flex flex-wrap gap-4">
{buttons.map((button, index) => (
<Link
key={index}
href={button.link.href}
className="inline-block"
>
<Button
size="lg"
className="gap-3"
variant={button.variant || "default"}
>
{button.label}
{button.icon}
</Button>
</Link>
))}
</div>
)}
{stats && stats.length > 0 && (
<div className="grid grid-cols-3 gap-8 pt-8 border-t">
{stats.map((stat, index) => (
<div key={index} className="flex flex-col gap-2">
<span className="text-3xl font-bold">{stat.value}</span>
<span className="text-sm text-muted-foreground">
{stat.label}
</span>
</div>
))}
</div>
)}
</div>
{image && (
<div className="relative aspect-square rounded-2xl overflow-hidden shadow-2xl">
<Image
src={image.src}
alt={image.alt || "Hero image"}
fill
className="object-cover h-full w-full"
priority
/>
<div className="absolute inset-0 bg-gradient-to-t from-background/20 to-transparent" />
</div>
)}
</div>
</div>
</div>
)
}
What is the Hero #4 Block?
The Hero #4 is a specialized UI component designed to enhance your Next.js applications. Built on top of the robust Shadcn UI library and styled with Tailwind CSS, this block offers a seamless way to integrate hero functionality into your projects. It serves as a foundational element that developers can easily drop into their codebase, ensuring a professional and consistent look right out of the box.
How the Hero #4 Component Works
This component operates as a self-contained unit that encapsulates specific UI logic and styling. When you integrate the Hero #4 block, you're adding a pre-configured React component that leverages modern web standards. It works by:
- Providing a responsive structure that adapts to different screen sizes.
- Utilizing Tailwind CSS utility classes for efficient and scalable styling.
- Leveraging Radix UI primitives for accessible and interactive behaviors.
- Allowing for easy prop-based customization to fit your specific data needs.
Key Benefits
Accelerated Development
Skip the tedious process of building from scratch. This block gives you a production-ready starting point, allowing you to focus on business logic rather than UI implementation.
Design Consistency
Maintain a cohesive visual identity across your application. By using components built on the same design system, you ensure that every part of your app looks and feels integrated.
Easy Customization
The code is yours to modify. With Tailwind CSS, you can rapidly adjust colors, spacing, and typography to align with your brand guidelines without fighting against rigid framework constraints.
Accessibility First
Built with accessibility in mind, this component follows WAI-ARIA patterns to ensure that your application is usable by everyone, including those relying on assistive technologies.
Explore More Hero Blocks
We offer a variety of components to suit different needs within the hero category. While this Hero #4 block is a great choice, you might also be interested in exploring other variations to find the perfect fit for your specific use case. Check out our full collection to see different layouts, styles, and functional variations that can enhance your project.
Conclusion
The Hero #4 block represents a smart way to build modern web interfaces. It combines the power of React, Next.js, and Tailwind CSS into a reusable package that saves time and improves quality. Whether you're prototyping a new idea or building a complex enterprise application, incorporating high-quality blocks like this one can significantly streamline your workflow.