title: Hero
description: Elevate website experience with unique hero blocks.
---

### Hero Section 1

```vue
<template>
  <section class="relative flex min-h-screen w-full flex-col items-center justify-center">
    <FallingStarsBg class="bg-black" />
    <div class="absolute inset-0 z-[1] bg-black opacity-50"></div>
    <div class="z-[2] flex max-w-xl flex-col items-center gap-2">
      <BlurReveal
        :delay="0.5"
        class="flex flex-col items-center justify-center gap-4"
      >
        <span
          class="flex flex-col items-center justify-center bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text text-center text-4xl font-bold text-transparent md:text-6xl"
        >
          <span>
            Building
            <FlipWords
              :words="['beautiful', 'stunning', 'amazing']"
              :duration="3000"
              class="w-52 bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text text-transparent"
            />
          </span>
          web experience
        </span>

        <span class="text-center text-xl">
          Inspira UI is the new way to build beautiful website
        </span>

        <div class="my-2 flex flex-row items-center justify-center gap-4">
          <UiButton to="/components"> Get Started </UiButton>
          <UiButton
            to="/blocks"
            variant="secondary"
          >
            Learn More
          </UiButton>
        </div>

        <div
          class="relative flex h-fit w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background p-px md:shadow-xl"
        >
          <img
            src="https://cdn.inspira-ui.com/images/Inspira-dark.png"
            class="w-full rounded-md"
          />
          <BorderBeam
            :size="250"
            :duration="12"
            :delay="9"
            :border-width="2"
          />
        </div>
      </BlurReveal>
    </div>
  </section>
</template>

```

#### Components used:

- [Falling Stars Background](https://inspira-ui.com/components/backgrounds/falling-stars)
- [Blur Reveal](https://inspira-ui.com/components/text-animations/blur-reveal)
- [Flip Words](https://inspira-ui.com/components/text-animations/flip-words)
- [Border Beam](https://inspira-ui.com/components/special-effects/border-beam)

### Hero Section 2

```vue
<template>
  <section class="relative mx-auto h-screen w-full overflow-hidden">
    <Vortex
      background-color="black"
      :range-y="800"
      :particle-count="500"
      :base-hue="120"
      class="absolute inset-0 flex items-center justify-center px-8"
    >
      <div class="flex size-full max-w-6xl flex-col md:flex-row">
        <div
          class="flex size-full h-[36rem] flex-col items-center justify-center md:h-full md:items-start md:p-8"
        >
          <span
            class="inline-block gap-2 bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text text-center text-5xl font-bold text-transparent md:text-left md:text-6xl"
          >
            Build beautiful websites with
            <TextHighlight
              class="rounded-xl bg-gradient-to-r from-pink-500 to-violet-500 px-4 py-1"
              text-end-color="hsl(var(--accent))"
            >
              Inspira UI
            </TextHighlight>
          </span>
          <span class="flex w-full flex-row justify-center py-6 md:justify-start">
            <AnimatedTooltip :items="people" />
          </span>
          <UiButton>Get Started</UiButton>
        </div>
        <div class="relative flex flex-col items-center justify-center overflow-hidden md:max-w-96">
          <div class="relative flex size-fit flex-col items-center justify-center rounded-3xl">
            <CardContainer>
              <CardBody
                class="group/card h-fit w-full gap-2 rounded-xl border border-black/[0.1] bg-gray-50 px-4 py-6 dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1]"
              >
                <CardItem
                  :translate-z="25"
                  class="mb-4 w-full"
                >
                  <NuxtImg
                    src="https://cdn.inspira-ui.com/og-image-v2.1.png"
                    height="auto"
                    width="auto"
                    class="h-24 w-full rounded-xl object-cover group-hover/card:shadow-xl"
                    alt="logo"
                    crossorigin="anonymous"
                  />
                </CardItem>

                <CardItem
                  as="p"
                  translate-z="25"
                  class="mt-2 max-w-sm text-sm text-neutral-500 dark:text-neutral-300"
                >
                  Subscribe to newletter & get latest update from Inspira UI.
                </CardItem>

                <CardItem class="mt-4 flex w-full flex-col gap-4">
                  <IInput placeholder="Enter email"></IInput>
                  <UiButton>Sign Me Up!</UiButton>
                </CardItem>
              </CardBody>
            </CardContainer>
            <BorderBeam
              :size="250"
              :duration="12"
              :delay="9"
              :border-width="2"
            />
          </div>
        </div>
      </div>
    </Vortex>
  </section>
</template>

<script lang="ts" setup>
const people = [
  {
    id: 1,
    name: "John Doe",
    designation: "Software Engineer",
    image:
      "https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3387&q=80",
  },
  {
    id: 2,
    name: "Robert Johnson",
    designation: "Product Manager",
    image:
      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60",
  },
  {
    id: 3,
    name: "Jane Smith",
    designation: "Data Scientist",
    image:
      "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60",
  },
  {
    id: 4,
    name: "Emily Davis",
    designation: "UX Designer",
    image:
      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60",
  },
  {
    id: 5,
    name: "Tyler Durden",
    designation: "Soap Developer",
    image:
      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3540&q=80",
  },
  {
    id: 6,
    name: "Dora",
    designation: "The Explorer",
    image:
      "https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3534&q=80",
  },
];
</script>

```

#### Components used:

- [Vortex Background](https://inspira-ui.com/components/backgrounds/vortex)
- [Animated Tooltip](https://inspira-ui.com/components/miscellaneous/animated-tooltip)
- [Text Highlight](https://inspira-ui.com/components/text-animations/text-highlight)
- [3D Card](https://inspira-ui.com/components/cards/3d-card)