# Hero 5

> hero

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/hero-5).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/hero-5
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/hero-5/light.png
- Registry item: https://blocks.cnippet.dev/r/hero-5.json
- Categories: hero
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/hero-5.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@cnippet/avatar`, `@cnippet/badge`, `@cnippet/button`, `@cnippet/checkbox`, `@cnippet/field`, `@cnippet/input-group`, `@cnippet/separator`

## Files

### `registry/default/sections/hero-5.tsx`

```tsx
import { ArrowRight, Mail, Star } from "lucide-react";
import Image from "next/image";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldLabel } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Separator } from "@/components/ui/separator";

export default function Hero() {
  return (
    <section className="relative h-screen w-full overflow-hidden py-12 font-grotesk md:py-16">
      <div className="mx-auto h-full max-w-7xl px-4 sm:px-8 lg:px-0">
        <div className="flex h-full flex-col gap-8 md:flex-row md:gap-16">
          <div className="flex w-full flex-col items-start gap-5">
            <Badge className="bg-transparent font-normal text-black text-sm dark:text-white">
              <span className="size-4 rounded-full bg-[#1868da]" />
              <span className="flex items-center gap-4 rounded-full border border-dashed px-4">
                Based in India
                <ArrowRight className="text-[#1868da]" />
              </span>
            </Badge>
            <h1 className="mt-auto max-w-xl text-3xl sm:text-4xl md:text-5xl lg:text-7xl">
              Shape Your Future with In-{" "}
              <span className="text-[#1868da]">Demand Skills</span>
            </h1>
            <p className="max-w-xl text-lg text-neutral-500 tracking-tight">
              Our platform offers a wide range of courses and resources designed
              to help you acquire new competencies and improve your
              employability.
            </p>
            <div className="w-full max-w-lg space-y-3">
              <div className="flex items-center gap-2">
                <InputGroup className="rounded-none py-2 shadow-none">
                  <InputGroupInput
                    aria-label="Email"
                    placeholder="Enter you email"
                    type="email"
                  />
                  <InputGroupAddon>
                    <Mail className="size-5 text-neutral-500" />
                  </InputGroupAddon>
                </InputGroup>
                <Button className="rounded-none border-[#1868da] bg-[#1868da] px-8 py-3 hover:bg-[#1868da]">
                  Submit
                </Button>
              </div>
              <Field>
                <FieldLabel>
                  <Checkbox />
                  Accept terms and conditions
                </FieldLabel>
              </Field>
            </div>
            <div className="flex items-start gap-3 pt-4">
              <div className="flex -space-x-3">
                {[1, 2, 3, 4].map((i) => (
                  <Avatar
                    className="size-12 border-2 border-background grayscale-100 transition-colors ease-in-out hover:grayscale-0"
                    key={i}
                  >
                    <AvatarImage
                      src={`https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a${i}.jpg`}
                    />
                    <AvatarFallback>U{i}</AvatarFallback>
                  </Avatar>
                ))}
              </div>
              <div>
                <div className="flex gap-2">
                  <div className="flex items-center gap-2">
                    4.9
                    <Star className="size-4 fill-[#1868da] stroke-[#1868da]" />
                  </div>
                  <Separator orientation="vertical" />
                  <div>2M+ users</div>
                </div>
                <p>One Platform for Learning</p>
              </div>
            </div>
          </div>
          <div className="flex h-64 w-full flex-col md:h-full">
            <Image
              alt="Instructor teaching online"
              className="h-full w-full object-cover"
              height={1080}
              src="https://res.cloudinary.com/dvwtcsh5v/image/upload/v1772549042/img_18001.jpg"
              width={1920}
            />
            <div className="pt-4">
              <div className="flex gap-8">
                {[1, 2, 3, 4].map((i) => (
                  <div className="flex items-center justify-center" key={i}>
                    <Image
                      alt="Logo"
                      className="object-cover"
                      height={500}
                      src={`https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770296407/logoipsum-${i + 1}.png`}
                      width={500}
                    />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
```