Hero 3

Left-aligned hero with dashboard screenshot preview

by Shaban Haider

Vite + React + TS

Building Digital Experiences That Drive Growth

We help brands scale faster through design, development and strategic execution.

Usage.tsxComponent.tsx

import { HeroSection } from "@/components/ui/hero-3";
import { Header } from "@/components/ui/header-3"; // @efferd/header-3

export default function DemoOne() {
    return (
        <div className="flex w-full flex-col">
        <Header />
          <main className="grow" >
            <HeroSection />
          </main>
        </div>
    );
}

Dependencies

lucide-react

Published

3/20/2026

Similar components

Responsive Hero Banner

Hero

Hero 1

BG Patterns

Integrations Grid

Chart

Macbook Pro

Images Slider