From 0d2c92052bfc5de30bf96933011dc266d058d219 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Sat, 24 Feb 2024 23:39:00 +0400
Subject: [PATCH] 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.
---
 .../ui/banners/AnnouncementBanner.astro       | 81 +++++++++++++++++++
 src/images/banner-pattern.svg                 | 29 +++++++
 src/pages/index.astro                         | 17 +++-
 3 files changed, 123 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ui/banners/AnnouncementBanner.astro
 create mode 100644 src/images/banner-pattern.svg

diff --git a/src/components/ui/banners/AnnouncementBanner.astro b/src/components/ui/banners/AnnouncementBanner.astro
new file mode 100644
index 0000000..535cfaf
--- /dev/null
+++ b/src/components/ui/banners/AnnouncementBanner.astro
@@ -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>
diff --git a/src/images/banner-pattern.svg b/src/images/banner-pattern.svg
new file mode 100644
index 0000000..4f11173
--- /dev/null
+++ b/src/images/banner-pattern.svg
@@ -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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d3dd9a6..3ec912b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -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."