Hero
A hero banner is a large, prominent web page header showcasing key content or branding.
Lorem ipsum dolor sit amet.Read more →
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, placeat?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem sed maxime incidunt ad rem enim voluptates? Natus reiciendis in, quod autem minima obcaecati harum ea.
function Hero() {
return (
<div className="bg-base-300">
<div className="relative isolate px-6 pt-14 lg:px-8">
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div className="hidden sm:mb-8 sm:flex sm:justify-center">
<div className="relative px-3 py-1 badge badge-outline">
Lorem ipsum dolor sit amet.
<a href="/" className="font-semibold text-primary ml-1">
<span className="absolute inset-0" />
Read more <span>→</span>
</a>
</div>
</div>
<div className="text-center">
<h1 className="text-4xl font-bold tracking-tight text-base-content sm:text-6xl">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia,
placeat?
</h1>
<p className="mt-6 text-lg leading-8 text-base-content/70">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem
sed maxime incidunt ad rem enim voluptates? Natus reiciendis in,
quod autem minima obcaecati harum ea.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<a href="/" className="btn btn-primary">
Get started
</a>
<a
href="/"
className="text-sm font-semibold leading-6 text-base-content"
>
Learn more <span>→</span>
</a>
</div>
</div>
</div>
</div>
</div>
);
}
Lorem ipsum dolor sit amet.Read more →
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ab.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias fugiat magni nesciunt eligendi quod nisi eius, illum sequi, et dolor eos! Architecto illum ipsam ea!
function Hero() {
return (
<div className="bg-base-300">
<div className="relative isolate overflow-hidden pt-14">
<img
src="/images/2100x900.jpeg"
alt=""
className="absolute inset-0 -z-10 h-full w-full object-cover"
/>
<div className="absolute inset-0 -z-10 h-full w-full bg-base-300/70"></div>
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div className="hidden sm:mb-8 sm:flex sm:justify-center">
<div className="relative px-3 py-1 badge badge-outline">
Lorem ipsum dolor sit amet.
<a href="/" className="font-semibold text-primary ml-1">
<span className="absolute inset-0" />
Read more <span>→</span>
</a>
</div>
</div>
<div className="text-center">
<h1 className="text-4xl font-bold tracking-tight text-base-content sm:text-6xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis,
ab.
</h1>
<p className="mt-6 text-lg leading-8 text-base-content/70">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias
fugiat magni nesciunt eligendi quod nisi eius, illum sequi, et
dolor eos! Architecto illum ipsam ea!
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<a href="/" className="btn btn-primary">
Get started
</a>
<a
href="/"
className="text-sm font-semibold leading-6 text-base-content"
>
Learn more <span>→</span>
</a>
</div>
</div>
</div>
</div>
</div>
);
}
Lorem ipsum dolor sit amet.Read more →
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde, ut!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, velit, cupiditate quasi omnis facere doloribus fuga et quae assumenda, tempora quis! Labore sint vel maiores.
function Hero() {
return (
<div className="relative bg-base-300">
<div className="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
<div className="px-6 pb-24 pt-10 sm:pb-32 lg:col-span-7 lg:px-0 lg:pb-56 lg:pt-48 xl:col-span-6">
<div className="mx-auto max-w-2xl lg:mx-0">
<img className="h-11" src={siteConfig.logo} alt={siteConfig.name} />
<div className="hidden sm:mt-32 sm:flex lg:mt-16">
<div className="relative px-3 py-1 badge badge-outline">
Lorem ipsum dolor sit amet.
<a href="/" className="font-semibold text-primary ml-1">
<span className="absolute inset-0" />
Read more <span>→</span>
</a>
</div>
</div>
<h1 className="mt-24 text-4xl font-bold tracking-tight text-base-content sm:mt-10 sm:text-6xl">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde,
ut!
</h1>
<p className="mt-6 text-lg leading-8 text-base-content/70">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi,
velit, cupiditate quasi omnis facere doloribus fuga et quae
assumenda, tempora quis! Labore sint vel maiores.
</p>
<div className="mt-10 flex items-center gap-x-6">
<a href="/" className="btn btn-primary">
Get started
</a>
<a
href="/"
className="text-sm font-semibold leading-6 text-base-content"
>
Learn more <span>→</span>
</a>
</div>
</div>
</div>
<div className="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
<img
className="aspect-[3/2] w-full bg-base-300/50 object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:h-full"
src="/images/1200x900.jpeg"
alt=""
/>
</div>
</div>
</div>
);
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, minima.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus eligendi a reiciendis aliquam, explicabo vel deserunt cum. Iste est veniam blanditiis hic tenetur adipisci.
function Hero() {
return (
<div className="bg-base-300">
<main>
<div className="relative isolate">
<div className="overflow-hidden">
<div className="mx-auto max-w-7xl px-6 pb-32 pt-36 sm:pt-60 lg:px-8 lg:pt-32">
<div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
<div className="w-full max-w-xl lg:shrink-0 xl:max-w-2xl">
<h1 className="text-4xl font-bold tracking-tight text-base-content sm:text-6xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempora, minima.
</h1>
<p className="relative mt-6 text-lg leading-8 text-base-content/70 sm:max-w-md lg:max-w-none">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam possimus eligendi a reiciendis aliquam, explicabo
vel deserunt cum. Iste est veniam blanditiis hic tenetur
adipisci.
</p>
<div className="mt-10 flex items-center gap-x-6">
<a href="/" className="btn btn-primary">
Get started
</a>
<a
href="/"
className="text-sm font-semibold leading-6 text-base-content"
>
Live demo <span>→</span>
</a>
</div>
</div>
<div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
<div className="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-none xl:pt-80">
<div className="relative">
<img
src="/images/600x900.jpeg"
alt=""
className="aspect-[2/3] w-full rounded-xl bg-base-300/5 object-cover shadow-lg"
/>
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-base-300/10" />
</div>
</div>
<div className="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
<div className="relative">
<img
src="/images/600x900.jpeg"
alt=""
className="aspect-[2/3] w-full rounded-xl bg-base-300/5 object-cover shadow-lg"
/>
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-base-300/10" />
</div>
<div className="relative">
<img
src="/images/600x900.jpeg"
alt=""
className="aspect-[2/3] w-full rounded-xl bg-base-300/5 object-cover shadow-lg"
/>
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-base-300/10" />
</div>
</div>
<div className="w-44 flex-none space-y-8 pt-32 sm:pt-0">
<div className="relative">
<img
src="/images/600x900.jpeg"
alt=""
className="aspect-[2/3] w-full rounded-xl bg-base-300/5 object-cover shadow-lg"
/>
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-base-300/10" />
</div>
<div className="relative">
<img
src="/images/600x900.jpeg"
alt=""
className="aspect-[2/3] w-full rounded-xl bg-base-300/5 object-cover shadow-lg"
/>
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-base-300/10" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
);
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, unde!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem provident, nostrum ipsa ea voluptatem eos repudiandae laudantium maiores, quibusdam voluptates tenetur officiis distinctio, ex harum?
function Hero() {
return (
<div className="bg-base-300">
<div className="relative isolate overflow-hidden pt-14">
<div className="mx-auto max-w-7xl px-6 py-32 sm:py-40 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:gap-x-16 lg:gap-y-6 xl:grid-cols-1 xl:grid-rows-1 xl:gap-x-8">
<h1 className="max-w-2xl text-4xl font-bold tracking-tight text-base-content sm:text-6xl lg:col-span-2 xl:col-auto">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam,
unde!
</h1>
<div className="mt-6 max-w-xl lg:mt-0 xl:col-end-1 xl:row-start-1">
<p className="text-lg leading-8 text-base-content/70">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem
provident, nostrum ipsa ea voluptatem eos repudiandae laudantium
maiores, quibusdam voluptates tenetur officiis distinctio, ex
harum?
</p>
<div className="mt-10 flex items-center gap-x-6">
<a href="/" className="btn btn-primary">
Get started
</a>
<a
href="/"
className="text-sm font-semibold leading-6 text-base-content"
>
Learn more <span>→</span>
</a>
</div>
</div>
<img
src="/images/1920x1080.jpeg"
alt=""
className="mt-10 aspect-[6/5] w-full max-w-lg rounded-2xl object-cover sm:mt-16 lg:mt-0 lg:max-w-none xl:row-span-2 xl:row-end-2 xl:mt-36"
/>
</div>
</div>
<div className="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-base-300 sm:h-32" />
</div>
</div>
);
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, voluptatibus?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi cumque totam architecto? Tempora nisi sapiente voluptatibus est qui quisquam fugit? Corporis totam ipsam officia. Explicabo?
import { ChevronRightIcon } from "@heroicons/react/20/solid";
function Hero() {
return (
<div className="relative isolate overflow-hidden bg-base-300">
<div className="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-40">
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-shrink-0 lg:pt-8">
<img className="h-11" src={siteConfig.logo} alt={siteConfig.name} />
<div className="mt-24 sm:mt-32 lg:mt-16">
<a href="/" className="inline-flex space-x-6">
<span className="px-3 py-1 badge badge-primary">What's new</span>
<span className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-base-content/70">
<span>v1.0</span>
<ChevronRightIcon className="h-5 w-5 text-base-content/70" />
</span>
</a>
</div>
<h1 className="mt-10 text-4xl font-bold tracking-tight text-base-content sm:text-6xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci,
voluptatibus?
</h1>
<p className="mt-6 text-lg leading-8 text-base-content/70">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi
cumque totam architecto? Tempora nisi sapiente voluptatibus est qui
quisquam fugit? Corporis totam ipsam officia. Explicabo?
</p>
<div className="mt-10 flex items-center gap-x-6">
<a href="/" className="btn btn-primary">
Get started
</a>
<a
href="/"
className="text-sm font-semibold leading-6 text-base-content"
>
Learn more <span>→</span>
</a>
</div>
</div>
<div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
<div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
<div className="-m-2 rounded-xl bg-base-300/5 p-2 ring-1 ring-inset ring-base-300/10 lg:-m-4 lg:rounded-2xl lg:p-4">
<img
src="/images/1920x1080.jpeg"
alt=""
className="w-[76rem] rounded-md shadow-2xl ring-1 ring-base-300/10"
/>
</div>
</div>
</div>
</div>
</div>
);
}