refactor(component): extract "Contribution CTA" to reusable component (#87)

### Description
<!-- Please add PR description (don't leave blank) - example: This PR
[adds/removes/fixes/replaces] the [feature/bug/etc] -->
I extracted the "Contribution CTA" section from /editor/index.astro and
/browse/[alpha]/[page].astro files into a standalone reusable component.


### Related Issue
<!-- Please prefix the issue number with Fixes/Resolves - example: Fixes
#123 or Resolves #123 -->
fixes #69 


### Screenshots/Screencasts
<!-- Please provide screenshots or video recording that demos your
changes (especially if it's a visual change) -->
![screenshot
(2)](https://github.com/user-attachments/assets/00dad5e2-9304-45dc-9e2b-b403d966b46a)
![screenshot
(3)](https://github.com/user-attachments/assets/31d8e598-281a-4dfa-bb4e-d269f7e94c83)
![screenshot
(4)](https://github.com/user-attachments/assets/1e93f038-29c7-4ac8-8003-11d23289d35d)
![screenshot
(5)](https://github.com/user-attachments/assets/f7486ba9-e15c-457b-b801-b47ba5ce9273)

![screenshot](https://github.com/user-attachments/assets/876f2cfb-56d0-4485-b0f0-bd86bdf627db)



### Notes to Reviewer
<!-- Please state here if you added a new npm packages, or any extra
information that can help reviewer better review you changes -->

---------

Co-authored-by: Olabode Lawal-Shittabey <babblebey@gmail.com>

Author: Bridgetamana

src/components/contribution-cta.astro

@@ -0,0 +1,19 @@
+<section class="rounded-lg border shadow-sm">
+  <div class="space-y-1.5 p-3 md:p-6 flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+    <div class="space-y-1">
+      <h3 class="font-semibold tracking-tight text-2xl">Contribute Words</h3>
+      <p class="text-sm">
+        You can contribute new words to the jargons.dev dictionary.
+      </p>
+    </div>
+    <a
+      class="flex items-center w-fit justify-center no-underline px-4 py-2 rounded-md border border-gray-200 bg-white hover:bg-gray-100 text-sm shadow-sm hover:shadow transition-colors"
+      href="/editor/new"
+    >
+      <span>Start Now</span>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-4 h-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
+      </svg> 
+    </a>
+  </div>
+</section>

src/pages/browse/[alpha]/[page].astro

@@ -4,6 +4,7 @@ import { ALPHABETS } from "../../../../constants.js";
 import BaseLayout from "../../../layouts/base.astro";
 import Navbar from "../../../components/navbar.astro";
 import Search from "../../../components/islands/search";
+import ContributionCTA from "../../../components/contribution-cta.astro";
 
 const { page } = Astro.props;
 const params = Astro.params;
@@ -55,25 +56,7 @@ export async function getStaticPaths({ paginate }) {
           <p>
             Looks like this alphabet is feeling a bit lonely! 🤔 Why not be the first to add a word and give it some company?
           </p>  
-          <section class="rounded-lg border shadow-sm">
-            <div class="space-y-1.5 p-3 md:p-6 flex flex-col lg:flex-row lg:items-center justify-between gap-4">
-              <div class="space-y-1">
-                <h3 class="font-semibold tracking-tight text-2xl">Contribute Words</h3>
-                <p class="text-sm">
-                  You can contribute new words to the jargons.dev dictionary.
-                </p>
-              </div>
-              <a
-                class="flex items-center w-fit justify-center no-underline px-4 py-2 rounded-md border border-gray-200 bg-white hover:bg-gray-100 text-sm shadow-sm hover:shadow transition-colors"
-                href="/editor/new"
-              >
-                <span>Start Now</span>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-4 h-4">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
-                </svg> 
-              </a>
-            </div>
-          </section>
+          <ContributionCTA />
         </div>
       )}
     </div>

src/pages/editor/index.astro

@@ -6,6 +6,7 @@ import Navbar from "../../components/navbar.astro";
 import { buildStatsUrl } from "../../lib/utils/index.js";
 import { PROJECT_REPO_DETAILS } from "../../../constants.js";
 import doContributionStats from "../../lib/actions/do-contribution-stats.js";
+import ContributionCTA from "../../components/contribution-cta.astro";
 
 const { url: { pathname }, redirect } = Astro;
 
@@ -52,25 +53,7 @@ const totalWords = {
     </section>
 
     <!-- Contribution CTA -->
-    <section class="rounded-lg border shadow-sm">
-      <div class="space-y-1.5 p-3 md:p-6 flex flex-col lg:flex-row lg:items-center justify-between gap-4">
-        <div class="space-y-1">
-          <h3 class="font-semibold tracking-tight text-2xl">Contribute Words</h3>
-          <p class="text-sm">
-            You can contribute new words to the jargons.dev dictionary.
-          </p>
-        </div>
-        <a
-          class="flex items-center w-fit justify-center no-underline px-4 py-2 rounded-md border border-gray-200 bg-white hover:bg-gray-100 text-sm shadow-sm hover:shadow transition-colors"
-          href="/editor/new"
-        >
-          <span>Start Now</span>
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-4 h-4">
-            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
-          </svg> 
-        </a>
-      </div>
-    </section>
+    <ContributionCTA />
 
     <!-- Contribution Stats -->
     <section class="">