# Hero 1

> A premium marketing hero block for educational courses featuring interactive progress track selectors, graduate avatar groups, and statistics summary cards.

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

- Page, with a live preview: https://shadcn.exchange/r/pacekit/marketing-hero-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/pacekit/marketing-hero-1-light-67eaf690468f0c1f.png
- Registry item: https://ui.pacekit.dev/r/marketing-hero-1.json
- Listed: 2026-10-21, source last changed 2026-10-21

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/pacekit/marketing-hero-1.json
```

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

## Dependencies

- Registry items: `avatar`, `badge`, `button`, `card`, `progress`, `separator`

## Files

### `components/blocks/marketing/hero/hero-1.tsx`

```tsx
import { useState } from "react";

import { BookOpen, Brain, GraduationCap, Menu, Sparkles, Star } from "lucide-react";

import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress";

export const MarketingHero1 = () => {
    const [selectedLevel, setSelectedLevel] = useState<number>(0);

    const levels = [
        { name: "Foundations", modules: 12, rating: "4.9/5", status: "Active" },
        { name: "Advanced Layouts", modules: 18, rating: "5.0/5", status: "Locked" },
    ];

    const currentLevel = levels[selectedLevel];

    return (
        <div className="bg-background relative flex justify-center p-8">
            <div className="flex w-full max-w-5xl flex-col gap-8 xl:gap-16">
                <header className="flex items-center justify-between py-4">
                    <div className="flex items-center gap-2">
                        <BookOpen className="text-primary size-5" />
                        <span className="text-lg font-medium">DesignEngine</span>
                    </div>
                    <nav className="text-muted-foreground hidden items-center gap-8 text-sm font-medium md:flex">
                        <span className="cursor-pointer">Courses</span>
                        <span className="cursor-pointer">Instructors</span>
                        <span className="cursor-pointer">Community</span>
                    </nav>
                    <Button variant="outline" size="icon-sm" className="cursor-pointer">
                        <Menu className="size-4" />
                    </Button>
                </header>

                <div className="grid grid-cols-1 items-center gap-8 lg:grid-cols-12">
                    <div className="flex flex-col lg:col-span-6">
                        <div className="flex">
                            <Badge variant="secondary">Interactive Academy</Badge>
                        </div>
                        <h1 className="mt-2 text-3xl font-semibold">Build the Future Of User Interfaces</h1>
                        <p className="text-muted-foreground mt-2 text-sm">
                            Learn layout engineering, logical props design, and semantic token frameworks from industry
                            leads.
                        </p>
                        <div className="mt-6 flex items-center gap-4">
                            <Button size="lg" className="cursor-pointer">
                                Learn Now
                            </Button>
                            <Button size="lg" variant="outline" className="cursor-pointer">
                                View Paths
                            </Button>
                        </div>
                        <div className="mt-6 flex items-center gap-4">
                            <AvatarGroup>
                                <Avatar size="sm">
                                    <AvatarImage src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=face" />
                                    <AvatarFallback>S1</AvatarFallback>
                                </Avatar>
                                <Avatar size="sm">
                                    <AvatarImage src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=crop&crop=face" />
                                    <AvatarFallback>S2</AvatarFallback>
                                </Avatar>
                                <Avatar size="sm">
                                    <AvatarImage src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=face" />
                                    <AvatarFallback>S3</AvatarFallback>
                                </Avatar>
                            </AvatarGroup>
                            <div className="flex flex-col">
                                <span className="text-sm font-medium">1,200+ graduates</span>
                                <span className="text-muted-foreground text-sm">Guiding global interfaces</span>
                            </div>
                        </div>
                    </div>

                    <div className="lg:col-span-6">
                        <Card>
                            <CardHeader className="flex flex-row items-center justify-between">
                                <CardTitle className="font-medium">Track Progress</CardTitle>
                                <Sparkles className="size-5" />
                            </CardHeader>
                            <CardContent className="flex flex-col gap-6">
                                <div className="grid grid-cols-2 gap-4">
                                    {levels.map((lvl, index) => {
                                        const isSelected = selectedLevel === index;
                                        return (
                                            <div
                                                key={index}
                                                className={`flex cursor-pointer flex-col rounded-md border p-4 transition-colors ${
                                                    isSelected
                                                        ? "border-foreground/30 bg-muted"
                                                        : "border-input bg-card"
                                                }`}
                                                onClick={() => setSelectedLevel(index)}>
                                                <span className="text-sm font-medium">{lvl.name}</span>
                                                <div className="text-muted-foreground mt-1 flex flex-col gap-1 text-xs">
                                                    <span>{lvl.modules} Modules</span>
                                                    <span>Rating: {lvl.rating}</span>
                                                </div>
                                                <Badge className="mt-3" variant={isSelected ? "default" : "secondary"}>
                                                    {lvl.status}
                                                </Badge>
                                            </div>
                                        );
                                    })}
                                </div>
                                <Progress value={currentLevel.modules * 5}>
                                    <ProgressLabel className="text-sm">Syllabus Completion</ProgressLabel>
                                    <ProgressValue className="text-sm" />
                                </Progress>
                            </CardContent>
                        </Card>
                    </div>
                </div>

                <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
                    <Card>
                        <CardContent className="flex flex-col gap-3">
                            <div className="flex items-center justify-between">
                                <span className="text-2xl font-semibold">2M+</span>
                                <Brain className="text-primary size-5" />
                            </div>
                            <span className="font-medium">Bright starts for bright minds</span>
                            <p className="text-muted-foreground text-sm">
                                Design systems curriculum built to prepare engineers for modern software team standards.
                            </p>
                        </CardContent>
                    </Card>
                    <Card>
                        <CardContent className="flex flex-col gap-3">
                            <div className="flex items-center justify-between">
                                <span className="text-2xl font-semibold">35K+</span>
                                <GraduationCap className="text-primary size-5" />
                            </div>
                            <span className="text-sm font-semibold">Active Learners</span>
                            <p className="text-muted-foreground text-sm">
                                Engineering graduates actively developing reusable, accessible component layouts.
                            </p>
                        </CardContent>
                    </Card>
                    <Card>
                        <CardContent className="flex flex-col gap-3">
                            <div className="flex items-center justify-between">
                                <span className="text-2xl font-semibold">180+</span>
                                <Star className="text-primary size-5" />
                            </div>
                            <span className="text-sm font-semibold">Expert Authors</span>
                            <p className="text-muted-foreground text-sm">
                                Industry-leading engineers guiding layout structural concepts and design specs.
                            </p>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    );
};
```