forked from mrwyndham/fastpocket
65 lines
2.8 KiB
Markdown
65 lines
2.8 KiB
Markdown
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# Center Aligned With Video Play Button On Image
|
|
|
|
|
|
|
|
```jsx title="Frontend/sections/HeroSections/CenterAlignedWithVideoPlayButtonOnImage.tsx"
|
|
<>
|
|
{/* <!-- Hero --> */}
|
|
<div className="relative overflow-hidden">
|
|
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
|
<div className="max-w-2xl text-center mx-auto">
|
|
<h1 className="block text-3xl font-bold text-base-content sm:text-4xl md:text-5xl">
|
|
Designed for you to get more{" "}
|
|
<span className="text-primary">simple</span>
|
|
</h1>
|
|
<p className="mt-3 text-lg text-secondary-content">
|
|
Build your business here. Take it anywhere.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-10 relative max-w-5xl mx-auto">
|
|
<div className="w-full object-cover h-96 sm:h-[480px] bg-[url('https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80')] bg-no-repeat bg-center bg-cover rounded-xl"></div>
|
|
|
|
<div className="absolute inset-0 size-full">
|
|
<div className="flex flex-col justify-center items-center size-full">
|
|
<a
|
|
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-base-200 bg-base-100 text-base-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-non dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-base-100"
|
|
href="#"
|
|
>
|
|
<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"
|
|
>
|
|
<polygon points="5 3 19 12 5 21 5 3" />
|
|
</svg>
|
|
Play the overview
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute bottom-12 -start-20 -z-[1] size-48 bg-gradient-to-b from-orange-500 to-white p-px rounded-lg dark:to-slate-900">
|
|
<div className="bg-white size-48 rounded-lg dark:bg-slate-900"></div>
|
|
</div>
|
|
|
|
<div className="absolute -top-12 -end-20 -z-[1] size-48 bg-gradient-to-t from-blue-600 to-cyan-400 p-px rounded-full">
|
|
<div className="bg-white size-48 rounded-full dark:bg-slate-900"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <!-- End Hero --> */}
|
|
</>
|
|
```
|