# Hero 6

> 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-6).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/hero-6
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/hero-6/light.png
- Registry item: https://blocks.cnippet.dev/r/hero-6.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-6.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/badge`, `@cnippet/button`, `@cnippet/tabs`

## Files

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

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

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

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>
              <Button
                className="group relative flex items-center justify-between overflow-hidden rounded-none border-none bg-[#1868da] p-1.5 pr-5 font-normal text-base hover:bg-[#1868da]"
                size="lg"
              >
                <span className="bg-white p-3 transition-all duration-500 ease-in group-hover:translate-x-60">
                  <ArrowRight className="size-4 text-primary" />
                </span>
                <span className="absolute -translate-x-40 bg-white p-3 transition-all delay-200 duration-500 ease-in group-hover:translate-x-0">
                  <ArrowRight className="size-4 text-primary" />
                </span>
                <span className="transition-all delay-150 duration-500 ease-in group-hover:translate-x-32 group-hover:opacity-0">
                  Get Started Now
                </span>

                <span className="absolute -left-10 opacity-0 transition-all delay-75 duration-500 ease-in group-hover:left-16 group-hover:opacity-100">
                  Get Started Now
                </span>
              </Button>
            </div>
            <div className="pt-10">
              <Tabs defaultValue="tab-1">
                <TabsPanel
                  className="w-full max-w-full rounded-2xl border border-neutral-200 bg-neutral-50 p-5 sm:w-116"
                  value="tab-1"
                >
                  <h2 className="text-lg tracking-tight">Law Workplace</h2>
                  <p className="text-sm">
                    Delivering agile and tech-driven legal solutions for any
                    type of businesses challenges.
                  </p>
                  <Button className="px-0 hover:bg-transparent" variant="ghost">
                    Learn more
                  </Button>
                </TabsPanel>
                <TabsPanel
                  className="w-full max-w-full rounded-2xl border border-neutral-200 bg-neutral-50 p-5 sm:w-116"
                  value="tab-2"
                >
                  <h2 className="text-lg tracking-tight">Law Workplace</h2>
                  <p className="text-sm">
                    Delivering agile and tech-driven legal solutions for any
                    type of businesses challenges.
                  </p>
                  <Button className="px-0 hover:bg-transparent" variant="ghost">
                    Learn more
                  </Button>
                </TabsPanel>
                <TabsPanel
                  className="w-full max-w-full rounded-2xl border border-neutral-200 bg-neutral-50 p-5 sm:w-116"
                  value="tab-3"
                >
                  <h2 className="text-lg tracking-tight">Law Workplace</h2>
                  <p className="text-sm">
                    Delivering agile and tech-driven legal solutions for any
                    type of businesses challenges.
                  </p>
                  <Button className="px-0 hover:bg-transparent" variant="ghost">
                    Learn more
                  </Button>
                </TabsPanel>
                <TabsPanel
                  className="w-full max-w-full rounded-2xl border border-neutral-200 bg-neutral-50 p-5 sm:w-116"
                  value="tab-4"
                >
                  <h2 className="text-lg tracking-tight">Law Workplace</h2>
                  <p className="text-sm">
                    Delivering agile and tech-driven legal solutions for any
                    type of businesses challenges.
                  </p>
                  <Button className="px-0 hover:bg-transparent" variant="ghost">
                    Learn more
                  </Button>
                </TabsPanel>

                <TabsList className="gap-2 bg-white">
                  <TabsTab
                    className="border border-neutral-300 data-active:bg-neutral-200"
                    value="tab-1"
                  >
                    Solution
                  </TabsTab>
                  <TabsTab
                    className="border border-neutral-300 data-active:bg-neutral-200"
                    value="tab-2"
                  >
                    Workplace
                  </TabsTab>
                  <TabsTab
                    className="border border-neutral-300 data-active:bg-neutral-200"
                    value="tab-3"
                  >
                    Advisory
                  </TabsTab>
                  <TabsTab
                    className="border border-neutral-300 data-active:bg-neutral-200"
                    value="tab-4"
                  >
                    Handbooks
                  </TabsTab>
                </TabsList>
              </Tabs>
            </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_18003.jpg"
              width={1920}
            />
            <div className="pt-4">
              <div className="grid grid-cols-4 gap-4 sm:grid-cols-12 sm:gap-8">
                <p className="text-xs sm:col-span-3">
                  50+ tech companies and professional lawyers
                </p>
                {[1, 2, 3].map((i) => (
                  <div
                    className="flex items-center justify-center sm:col-span-3"
                    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>
  );
}
```