---
sidebar_position: 2
---

# Center Aligned In Dark Background

![Cards](/img/center-aligned-in-dark-background.png)

```jsx title="Frontend/sections/HeroSections/CenterAlignedInDarkBackground.tsx"
<>
      {/* <!-- Hero --> */}
      <div className="bg-neutral">
      <div className="bg-gradient-to-b from-primary/[.15] via-transparent">
        <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-8">
          {/* <!-- Announcement Banner --> */}
          <div className="flex justify-center">
            <a
              className="group inline-block bg-primary-content/[.05] hover:bg-primary-content/[.1] border border-primary-content/[.05] p-1 ps-4 rounded-full shadow-md"
              href="../figma.html"
            >
              <p className="me-2 inline-block text-primary-content text-sm">
                FastPocket UI Figma is live.
              </p>
              <span className="group-hover:bg-base-100/[.1] py-1.5 px-2.5 inline-flex justify-center items-center gap-x-2 rounded-full bg-base-100/[.075] font-semibold text-base-100 text-sm">
                <svg
                  className="flex-shrink-0 size-4"
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none"
                >
                  <path
                    d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                  />
                </svg>
              </span>
            </a>
          </div>
          {/* <!-- End Announcement Banner --> */}

          {/* <!-- Title --> */}
          <div className="max-w-3xl text-center mx-auto">
            <h1 className="block font-medium text-primary-content text-4xl sm:text-5xl md:text-6xl lg:text-7xl">
              Now it's easier than ever to build products
            </h1>
          </div>
          {/* <!-- End Title --> */}

          <div className="max-w-3xl text-center mx-auto">
            <p className="text-lg text-primary-content">
              FastPocket is a large open-source project, crafted with Tailwind CSS
              framework by Hmlstream.
            </p>
          </div>

          {/* <!-- Buttons --> */}
          <div className="text-center">
            <a
              className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-primary to-accent shadow-lg shadow-transparent hover:shadow-primary/50 border border-transparent text-primary-content text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-primary-content py-3 px-6 dark:focus:ring-offset-base-200"
              href="#"
            >
              Get started
              <svg
                className="flex-shrink-0 size-4"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="m9 18 6-6-6-6" />
              </svg>
            </a>
          </div>
          {/* <!-- End Buttons --> */}
        </div>
      </div>
      </div>
      {/* <!-- End Hero --> */}
    </>
```