Add new Announcement Banner component
Implemented a new Announcement Banner component on the main page. This banner features a dismiss button and is customizable with dynamic properties for title, bannerId, button Id, button title, and URL. Also, added a new SVG file for the banner's background pattern.
This commit is contained in:
Emil Gulamov
parent
f81a5542dd
commit
0d2c92052b
3 changed files with 123 additions and 4 deletions
81
src/components/ui/banners/AnnouncementBanner.astro
Normal file
81
src/components/ui/banners/AnnouncementBanner.astro
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
const { title, bannerId, btnId, btnTitle, url } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
bannerId: string;
|
||||
btnId: string;
|
||||
btnTitle: string;
|
||||
url: string;
|
||||
}
|
||||
---
|
||||
|
||||
<astro-banner id={bannerId} btnId={btnId}>
|
||||
<div
|
||||
id={bannerId}
|
||||
class="fixed bottom-0 start-1/2 z-50 mx-auto w-full -translate-x-1/2 transform p-6 sm:max-w-4xl"
|
||||
>
|
||||
<div
|
||||
class="rounded-xl bg-neutral-800 bg-[url('src/images/banner-pattern.svg')] bg-cover bg-center bg-no-repeat p-4 text-center shadow-sm dark:bg-neutral-200"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="ml-auto">
|
||||
<p
|
||||
class="me-2 inline-block font-medium text-neutral-200 dark:text-neutral-800"
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
<a
|
||||
class="group inline-flex items-center gap-x-2 rounded-full border-2 border-neutral-50 px-3 py-2 text-sm font-semibold text-neutral-50 transition duration-300 hover:border-neutral-100/70 hover:text-neutral-100/70 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-800 dark:hover:border-neutral-700/70 dark:hover:text-neutral-800/70 dark:focus:outline-none"
|
||||
href={url}
|
||||
target="_blank"
|
||||
|
||||
>
|
||||
{btnTitle}
|
||||
<svg
|
||||
class="size-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
|
||||
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"></path></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto inline-flex items-center gap-x-2 rounded-full border border-transparent bg-gray-100 p-2 text-sm font-semibold text-gray-800 hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-700 dark:text-neutral-50 dark:hover:bg-neutral-700/80 dark:hover:text-neutral-50 dark:focus:outline-none"
|
||||
id={btnId}
|
||||
>
|
||||
<span class="sr-only">Dismiss</span>
|
||||
<svg
|
||||
class="size-5 flex-shrink-0"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</astro-banner>
|
||||
<script>
|
||||
class AstroBanner extends HTMLElement {
|
||||
connectedCallback() {
|
||||
const btnId = this.getAttribute('btnId');
|
||||
const button = this.querySelector(`#${btnId}`);
|
||||
button.addEventListener('click', () => this.remove());
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('astro-banner', AstroBanner);
|
||||
</script>
|
||||
29
src/images/banner-pattern.svg
Normal file
29
src/images/banner-pattern.svg
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1002 285">
|
||||
<g clip-path="url(#a)">
|
||||
<path fill="#FDE68A" d="M132.693 132.957V65.953h67.003l-67.003 67.004Z"/>
|
||||
<path fill="#FDE68A" d="M67.003 132.957V65.953h67.004l-67.004 67.004Z"/>
|
||||
<path fill="#F59E0B" d="M162.91 131.643H67.003v48.61h95.907v-48.61Z"/>
|
||||
<path fill="#FDE68A" d="M67.004 131.643H0v48.61h67.004v-48.61Z"/>
|
||||
<path fill="#FACC15" d="M134.007 65.953v67.004H67.003l67.004-67.004Z"/>
|
||||
<path fill="#FACC15" d="M67.004 65.953v67.004H0l67.004-67.004Zm132.692-1.313v67.004h-67.003l67.003-67.003Z"/>
|
||||
<path fill="#FDE68A" d="M251.535 52c-28.298 0-51.238 22.94-51.238 51.239 0 28.298 22.94 51.238 51.238 51.238s51.238-22.94 51.238-51.238-22.94-51.238-51.238-51.238Z"/>
|
||||
<path fill="#FACC15" d="M251.535 82.216c-11.609 0-21.021 9.412-21.021 21.021 0 11.61 9.412 21.021 21.021 21.021s21.021-9.411 21.021-21.021c0-11.61-9.412-21.02-21.021-21.02Zm47.296 72.26V87.473h67.003l-67.003 67.003Z"/>
|
||||
<path fill="#FDE68A" d="M999.983 42.52c-13.301 0-26.057 5.34-35.462 14.848-9.405 9.507-14.688 22.401-14.688 35.847 0 13.445 5.283 26.339 14.688 35.847 9.405 9.507 22.161 14.848 35.462 14.848v-23.535a26.726 26.726 0 0 1-18.999-7.955c-5.039-5.094-7.87-12.002-7.87-19.205 0-7.204 2.831-14.112 7.87-19.206a26.724 26.724 0 0 1 18.999-7.955V42.52Z"/>
|
||||
<path fill="#FACC15" d="M999.982 0c-24.577 0-48.147 9.82-65.526 27.302-17.379 17.48-27.142 41.19-27.142 65.912 0 24.721 9.763 48.431 27.142 65.912 17.379 17.48 40.949 27.301 65.526 27.301v-43.274a49.5 49.5 0 0 1-35.106-14.627c-9.31-9.365-14.541-22.068-14.541-35.312 0-13.245 5.231-25.948 14.541-35.313a49.502 49.502 0 0 1 35.106-14.627V0Z"/>
|
||||
<path stroke="#F59E0B" stroke-width="3.271" d="M939.475 162.988c-33.116 0-59.962 26.846-59.962 59.962s26.846 59.962 59.962 59.962 59.962-26.846 59.962-59.962-26.846-59.962-59.962-59.962Z"/>
|
||||
<path stroke="#F59E0B" stroke-width="3.271" d="M939.476 173.89c-27.095 0-49.06 21.965-49.06 49.06 0 27.095 21.965 49.06 49.06 49.06 27.095 0 49.06-21.965 49.06-49.06 0-27.095-21.965-49.06-49.06-49.06Z"/>
|
||||
<path stroke="#F59E0B" stroke-width="3.271" d="M939.475 183.702c-21.676 0-39.248 17.572-39.248 39.247 0 21.676 17.572 39.248 39.248 39.248s39.248-17.572 39.248-39.248c0-21.675-17.572-39.247-39.248-39.247Z"/>
|
||||
<path stroke="#F59E0B" stroke-width="3.271" d="M939.476 194.604c-15.655 0-28.346 12.69-28.346 28.345s12.691 28.346 28.346 28.346 28.346-12.691 28.346-28.346-12.691-28.345-28.346-28.345Z"/>
|
||||
<path stroke="#F59E0B" stroke-width="3.271" d="M939.475 205.506c-9.634 0-17.444 7.809-17.444 17.443s7.81 17.444 17.444 17.444 17.443-7.81 17.443-17.444-7.809-17.443-17.443-17.443Z"/>
|
||||
<path stroke="#FDE68A" stroke-width="3.271" d="M939.476 215.317a7.632 7.632 0 1 0 0 15.264 7.632 7.632 0 0 0 0-15.264Z"/>
|
||||
<path fill="#F59E0B" d="M862.615 180.977h55.601v-40.338h-55.601v40.338Z"/>
|
||||
<path fill="#FACC15" d="M862.615 235.488v-55.601h55.601l-55.601 55.601Z"/>
|
||||
<path stroke="#FACC15" stroke-width="2.18" d="m778.311 199.75 55.165-89.232 55.166 89.232H778.311Z"/>
|
||||
<path fill="#FACC15" d="m790.958 91 57.122 91.578H733.837L790.958 91Z"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h1002v285H0z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -9,6 +9,7 @@ import FeaturesNavs from "../components/sections/features/FeaturesNavs.astro";
|
|||
import TestimonialsSection from "../components/sections/testimonials/TestimonialsSection.astro";
|
||||
import PricingSection from "../components/sections/pricing/PricingSection.astro";
|
||||
import FAQ from "../components/sections/FAQ.astro";
|
||||
import AnnouncementBanner from "../components/ui/banners/AnnouncementBanner.astro";
|
||||
|
||||
const avatarSrcs: Array<string> = [
|
||||
"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
|
||||
|
|
@ -19,6 +20,14 @@ const avatarSrcs: Array<string> = [
|
|||
---
|
||||
|
||||
<MainLayout>
|
||||
<AnnouncementBanner
|
||||
title="ScrewFast is Live"
|
||||
bannerId="banner-with-dismiss-button"
|
||||
btnId="dismiss-button"
|
||||
btnTitle="Learn more"
|
||||
url="https://github.com/mearashadowfax/ScrewFast"
|
||||
/>
|
||||
|
||||
<HeroSection
|
||||
title=`Equip Your Projects with <span
|
||||
class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>`
|
||||
|
|
@ -38,9 +47,9 @@ const avatarSrcs: Array<string> = [
|
|||
title="Trusted by Industry Leaders"
|
||||
subTitle="Experience the reliability chosen by industry giants."
|
||||
/>
|
||||
|
||||
|
||||
<FeaturesGeneral />
|
||||
|
||||
|
||||
<FeaturesNavs />
|
||||
|
||||
<TestimonialsSection
|
||||
|
|
@ -81,9 +90,9 @@ const avatarSrcs: Array<string> = [
|
|||
/>
|
||||
|
||||
<PricingSection />
|
||||
|
||||
|
||||
<FAQ />
|
||||
|
||||
|
||||
<HeroSectionAlt
|
||||
title="Let's Build Together"
|
||||
subTitle="ScrewFast is an open-source template, meticulously crafted with Astro, Tailwind CSS, and Preline UI frameworks."
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue