fastpocket/Frontend/sections/AnnouncementBanners/FullWidthCenterAlignedLinkO...

40 lines
1.3 KiB
TypeScript

import React from "react";
function FullWidthCenterAlignedLinkOnGrayBackground() {
return (
<>
{/* <!-- Announcement Banner --> */}
<a
className="group block bg-base-100 hover:bg-base-300 p-4 rounded-lg text-center transition-all duration-300"
href="#"
>
<div className="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
<p className="me-2 inline-block text-sm text-secondary-content">
Shop for everyone on your list with the FastPocket Guide.
</p>
<span className="group-hover:underline decoration-2 inline-flex justify-center items-center gap-x-2 font-semibold text-primary text-sm">
Shop now
<svg
className="flex-shrink-0 w-4"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</span>
</div>
</a>
{/* <!-- End Announcement Banner --> */}
</>
);
}
export default FullWidthCenterAlignedLinkOnGrayBackground;