forked from mrwyndham/fastpocket
78 lines
3.1 KiB
Markdown
78 lines
3.1 KiB
Markdown
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# Media Object Style With Blurred Background
|
|
|
|
|
|
|
|
```jsx title="Frontend/sections/AnnouncementBanners/MediaObjectStyleWithBlurredBackground.tsx"
|
|
<>
|
|
{/* <!-- Announcement Banner --> */}
|
|
<div className="bg-base-100/[.6] backdrop-blur-lg">
|
|
<div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
|
|
{/* <!-- Grid --> */}
|
|
<div className="grid justify-center sm:grid-cols-2 sm:items-center gap-4">
|
|
<div className="flex items-center gap-x-3 md:gap-x-5">
|
|
<svg
|
|
className="flex-shrink-0 size-10 md:size-14"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 40 40"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
width="40"
|
|
height="40"
|
|
rx="6"
|
|
fill="currentColor"
|
|
className="fill-primary"
|
|
/>
|
|
<path
|
|
d="M8 32.5V19.5C8 12.8726 13.3726 7.5 20 7.5C26.6274 7.5 32 12.8726 32 19.5C32 26.1274 26.6274 31.5 20 31.5H19"
|
|
stroke="base-100"
|
|
stroke-width="2"
|
|
/>
|
|
<path
|
|
d="M12 32.5V19.66C12 15.1534 15.5817 11.5 20 11.5C24.4183 11.5 28 15.1534 28 19.66C28 24.1666 24.4183 27.82 20 27.82H19"
|
|
stroke="base-100"
|
|
stroke-width="2"
|
|
/>
|
|
<circle cx="20" cy="19.5214" r="5" fill="base-100" />
|
|
</svg>
|
|
|
|
<div className="grow">
|
|
<p className="md:text-xl text-secondary-content font-semibold">
|
|
Get started today.
|
|
</p>
|
|
<p className="text-sm md:text-base text-secondary-content">
|
|
Sign up to get unlimited updates.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* <!-- End Col --> */}
|
|
|
|
<div className="text-center sm:text-start flex sm:justify-end sm:items-center gap-x-3 md:gap-x-4">
|
|
<a
|
|
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent bg-primary text-base-100 hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
Free trial
|
|
</a>
|
|
<a
|
|
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-secondary-content text-secondary-content hover:border-base-300 hover:text-base-300 disabled:opacity-50 disabled:pointer-events-none dark:text-base-100 dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
Buy now
|
|
</a>
|
|
</div>
|
|
{/* <!-- End Col --> */}
|
|
</div>
|
|
{/* <!-- End Grid --> */}
|
|
</div>
|
|
</div>
|
|
{/* <!-- End Announcement Banner --> */}
|
|
</>
|
|
```
|