diff --git a/templates/post.hbs b/templates/post.hbs
new file mode 100644
index 0000000..42a06cf
--- /dev/null
+++ b/templates/post.hbs
@@ -0,0 +1,475 @@
+<div id="ai_post" data-hbs-id="8og0q7p">
+  <main data-hbs-id="atn1mjt">
+    <div class="site-post" data-hbs-id="b6mm8sm">
+      <div class="content-header relative w-full" data-hbs-id="0j1ycrm">
+        <div
+          class="content-feature-image-wrapper w-full overflow-hidden relative"
+          style="height: 450px"
+         data-hbs-id="5o7mdej">
+          <img
+            src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?auto=format&fit=crop&w=1600&h=800"
+            alt="Smart Factory"
+            class="content-feature-image w-full h-full object-cover transform hover:scale-105 transition-transform duration-700"
+          / data-hbs-id="4ayqrnf">
+        </div>
+
+        <div class="relative container mx-auto px-4 md:px-8" data-hbs-id="qz5f8at">
+          <div
+            class="bg-white shadow-xl -mt-16 md:-mt-32 relative z-10 p-6 md:p-10 transform transition-all"
+           data-hbs-id="cyr8cxt">
+            <div class="flex gap-2 content-tag-container" data-hbs-id="jn4srvb">
+              <a
+                href="#"
+                class="content-tag inline-block px-4 py-1 cms-bg-dark text-white text-sm font-medium tracking-wide mb-4 transition-colors duration-300 hover:bg-gray-800"
+                 data-hbs-id="vq5wwp0">IoT</a
+              >
+            </div>
+            <h1
+              class="content-title text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-gray-900 leading-tight"
+             data-hbs-id="0bj1uqf">
+              What's Next for Smart Factories?
+            </h1>
+
+            <div
+              class="flex items-center justify-between border-t cms-border-light pt-4 mt-4"
+             data-hbs-id="yj1ivqt">
+              <div class="flex items-center" data-hbs-id="101jk27">
+                <img
+                  src="https://randomuser.me/api/portraits/men/32.jpg"
+                  alt="Author"
+                  class="w-10 h-10 rounded-full content-author-image mr-3 border-2 cms-border-light"
+                / data-hbs-id="pjpf4e0">
+                <div data-hbs-id="g8lwv3f">
+                  <div class="flex items-center" data-hbs-id="9dpnwro">
+                    <span class="cms-text-neutral text-sm" data-hbs-id="uqwmi0u">By</span>
+                    <a
+                      href="#"
+                      class="content-author cms-text-dark font-semibold ml-2 hover:cms-text-neutral transition-colors"
+                       data-hbs-id="i3k2o43">Armando Pereira</a
+                    >
+                  </div>
+                  <div class="flex items-center text-xs cms-text-neutral mt-1" data-hbs-id="muc000i">
+                    <span class="content-published-date" data-hbs-id="py9loou">June 15, 2023</span>
+                    <span class="mx-2" data-hbs-id="qkz943q">•</span>
+                    <span class="content-reading-time" data-hbs-id="95bwx39">5</span> min read
+                  </div>
+                </div>
+              </div>
+
+              <div class="relative" data-hbs-id="1w9g26p">
+                <button
+                  class="cms-bg-primary p-3 border cms-border-light shadow-sm cursor-pointer hover:bg-gray-50 transition-colors focus:outline-none"
+                  id="shareButton"
+                  aria-label="Share this article"
+                 data-hbs-id="p0rk54k">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-5 w-5 cms-text-neutral"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                   data-hbs-id="x94hxqb">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+                    />
+                  </svg>
+                </button>
+
+                <div
+                  class="absolute right-0 mt-2 w-60 cms-bg-primary border cms-border-light shadow-lg overflow-hidden transition-all transform scale-95 opacity-0 invisible z-50 hidden"
+                  id="shareDropdown"
+                 data-hbs-id="lp2rm4b">
+                  <div class="py-2" data-hbs-id="eens6yf">
+                    <a
+                      href="#"
+                      class="flex items-center px-4 py-3 cms-text-neutral hover:cms-bg-light border-l-4 border-transparent hover:border-gray-900"
+                      onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href), '_blank'); return false;"
+                     data-hbs-id="b5elj6e">
+                      <svg
+                        class="h-5 w-5 mr-3 text-blue-600"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                       data-hbs-id="3qx2jcp">
+                        <path
+                          d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
+                        />
+                      </svg>
+                      <span data-hbs-id="o35r0xa">Share on Facebook</span>
+                    </a>
+
+                    <a
+                      href="#"
+                      class="flex items-center px-4 py-3 cms-text-neutral hover:cms-bg-light border-l-4 border-transparent hover:border-gray-900"
+                      onclick="window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(window.location.href), '_blank'); return false;"
+                     data-hbs-id="n0escf3">
+                      <svg
+                        class="h-5 w-5 mr-3 text-blue-400"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                       data-hbs-id="c0k952t">
+                        <path
+                          d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.1 10.1 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
+                        />
+                      </svg>
+                      <span data-hbs-id="638s0mb">Share on Twitter/X</span>
+                    </a>
+
+                    <a
+                      href="#"
+                      class="flex items-center px-4 py-3 cms-text-neutral hover:cms-bg-light border-l-4 border-transparent hover:border-gray-900"
+                      onclick="window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(window.location.href), '_blank'); return false;"
+                     data-hbs-id="zlh1a2c">
+                      <svg
+                        class="h-5 w-5 mr-3 text-blue-700"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                       data-hbs-id="vkwuxyr">
+                        <path
+                          d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+                        />
+                      </svg>
+                      <span data-hbs-id="gqatbnf">Share on LinkedIn</span>
+                    </a>
+
+                    <a
+                      href="#"
+                      class="flex items-center px-4 py-3 cms-text-neutral hover:cms-bg-light border-l-4 border-transparent hover:border-gray-900"
+                      onclick="window.open('https://pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + '&media=https://images.unsplash.com/photo-1581091226033-d5c48150dbaa&description=What%27s%20Next%20for%20Smart%20Factories?', '_blank'); return false;"
+                     data-hbs-id="qno02hl">
+                      <svg
+                        class="h-5 w-5 mr-3 text-red-600"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                       data-hbs-id="b9dp1rc">
+                        <path
+                          d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"
+                        />
+                      </svg>
+                      <span data-hbs-id="wzrhgvl">Share on Pinterest</span>
+                    </a>
+
+                    <div class="border-t border-gray-100 my-2" data-hbs-id="j0qbrrf"></div>
+
+                    <a
+                      href="#"
+                      class="flex items-center px-4 py-3 cms-text-neutral hover:cms-bg-light border-l-4 border-transparent hover:border-gray-900"
+                      id="copyLink"
+                     data-hbs-id="fvxc0mo">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-5 w-5 mr-3 cms-text-neutral"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                       data-hbs-id="idqqfmu">
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                        />
+                      </svg>
+                      <span data-hbs-id="yiorhe5">Copy link</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="content-body bg-white" data-hbs-id="juw380j">
+        <div class="max-w-3xl mx-auto" data-hbs-id="htxgecj">
+          <p class="text-gray-800 text-lg leading-relaxed mb-6" data-hbs-id="j73nugg">
+            The manufacturing industry is undergoing a seismic transformation,
+            driven by the rapid adoption of advanced technologies that redefine
+            how factories operate. Smart factories, the cornerstone of Industry
+            4.0, are evolving into dynamic, interconnected ecosystems where
+            artificial intelligence (AI), the Internet of Things (IoT),
+            robotics, and data analytics converge to optimize efficiency,
+            enhance productivity, and ensure sustainability. As we move into
+            2025, the integration of these technologies is accelerating, paving
+            the way for unprecedented innovation and operational excellence.
+          </p>
+        </div>
+      </div>
+
+      <div class="site-paywall-subscription cms-bg-light py-10 px-4 text-center" data-hbs-id="55s51zd">
+        <div
+          class="max-w-xl mx-auto bg-white p-8 shadow-lg border border-gray-200"
+         data-hbs-id="8206v7c">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-12 w-12 mx-auto text-gray-400 mb-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+           data-hbs-id="qe4hg9r">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+            />
+          </svg>
+          <h3 class="text-2xl font-bold cms-text-dark mb-2" data-hbs-id="84dum7s">Premium Content</h3>
+          <p class="cms-text-neutral mb-6" data-hbs-id="w2wjutr">
+            This article is available exclusively for our subscribers. Sign up
+            today to continue reading and get access to all our premium content.
+          </p>
+          <div class="flex flex-col sm:flex-row justify-center gap-4" data-hbs-id="brtxvus">
+            <a
+              href="#/portal/signup"
+              class="cms-bg-dark text-white px-6 py-3 font-medium hover:bg-gray-800 transition-colors duration-300"
+               data-hbs-id="fgxap6l">SUBSCRIBE NOW</a
+            >
+            <a
+              href="#/portal/signin"
+              class="border border-gray-300 cms-text-neutral px-6 py-3 font-medium hover:bg-gray-50 transition-colors duration-300"
+               data-hbs-id="a5h29oc">SIGN IN</a
+            >
+          </div>
+        </div>
+      </div>
+
+      <div class="site-related-posts mt-10 relative container mx-auto px-4 md:px-8" data-hbs-id="69mea4b">
+      <div class="mb-6" data-hbs-id="i4t0imk">
+        <h2 class="text-xl md:text-3xl font-bold text-gray-900" data-hbs-id="mwjtjss">Related Posts</h2>
+      </div>
+       <div class="site-posts-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6" data-hbs-id="nlv61io">
+        <article
+          class="cms-card post-item bg-white group shadow hover:shadow-lg overflow-hidden transition-all duration-300 flex flex-col h-full relative"
+         data-hbs-id="ws5a8gl">
+          <div class="overflow-hidden" data-hbs-id="npv99tq">
+            <img
+              class="post-feature-image w-full h-40 object-cover transform transition-transform duration-500 group-hover:scale-105"
+              src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=600&h=400"
+              alt="Cybersecurity Concept"
+            / data-hbs-id="q9sxd58">
+          </div>
+          <div class="cms-card-content p-4 flex flex-col flex-grow" data-hbs-id="kx6yezf">
+            <a
+              href="/cybersecurity"
+              class="cms-link post-tag text-accent text-xs font-medium mb-2"
+               data-hbs-id="w0af8e5">Cybersecurity</a
+            >
+            <h3
+              class="cms-h4 post-title text-lg font-semibold mb-2 transition-colors group-hover:text-accent line-clamp-2"
+             data-hbs-id="bancfvb">
+              Cybersecurity in the Age of AI: New Threats and Solutions
+            </h3>
+            <p
+              class="cms-body post-content cms-text-neutral mb-3 line-clamp-2 text-sm flex-grow"
+             data-hbs-id="yscxhsn">
+              As artificial intelligence advances, the cybersecurity landscape
+              faces unprecedented challenges requiring innovative defensive
+              strategies.
+            </p>
+            <div
+              class="post-meta flex items-center cms-text-neutral text-xs mt-auto"
+             data-hbs-id="zuynceu">
+              <i class="far fa-clock mr-2" data-hbs-id="99b3ft3"></i>
+              <span class="cms-small"
+                 data-hbs-id="m9pfzui"><span class="post-min-read" data-hbs-id="cg3o766">7</span> min read</span
+              >
+            </div>
+          </div>
+          <a
+            href="/cybersecurity-ai-threats"
+            class="cms-link post-link absolute inset-0 z-10"
+            aria-label="Read more about Cybersecurity in the Age of AI"
+           data-hbs-id="nqpv00n"></a>
+        </article>
+
+        <article
+          class="cms-card post-item bg-white group shadow hover:shadow-lg overflow-hidden transition-all duration-300 flex flex-col h-full relative"
+         data-hbs-id="4ce4vh9">
+          <div class="overflow-hidden" data-hbs-id="vueqxn3">
+            <img
+              class="post-feature-image w-full h-40 object-cover transform transition-transform duration-500 group-hover:scale-105"
+              src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=600&h=400"
+              alt="Tech Innovation"
+            / data-hbs-id="nugvbcq">
+          </div>
+          <div class="cms-card-content p-4 flex flex-col flex-grow" data-hbs-id="hv623ai">
+            <a
+              href="/quantum-tech"
+              class="cms-link post-tag text-accent text-xs font-medium mb-2"
+               data-hbs-id="gg6pcni">Quantum Tech</a
+            >
+            <h3
+              class="cms-h4 post-title text-lg font-semibold mb-2 transition-colors group-hover:text-accent line-clamp-2"
+             data-hbs-id="m6n7f50">
+              Quantum Computing: Breaking Barriers in Problem-Solving
+            </h3>
+            <p
+              class="cms-body post-content cms-text-neutral mb-3 line-clamp-2 text-sm flex-grow"
+             data-hbs-id="gaisoai">
+              Quantum technologies are poised to solve complex problems that
+              traditional computers can't handle, revolutionizing industries
+              from pharmaceuticals to finance.
+            </p>
+            <div
+              class="post-meta flex items-center cms-text-neutral text-xs mt-auto"
+             data-hbs-id="t4drg1l">
+              <i class="far fa-clock mr-2" data-hbs-id="5lpc1bh"></i>
+              <span class="cms-small"
+                 data-hbs-id="eeswccp"><span class="post-min-read" data-hbs-id="wp29trs">9</span> min read</span
+              >
+            </div>
+          </div>
+          <a
+            href="/quantum-computing-barriers"
+            class="cms-link post-link absolute inset-0 z-10"
+            aria-label="Read more about Quantum Computing"
+           data-hbs-id="lpky2ot"></a>
+        </article>
+
+        <article
+          class="cms-card post-item bg-white group shadow hover:shadow-lg overflow-hidden transition-all duration-300 flex flex-col h-full relative"
+         data-hbs-id="msv0nzc">
+          <div class="overflow-hidden" data-hbs-id="94icihh">
+            <img
+              class="post-feature-image w-full h-40 object-cover transform transition-transform duration-500 group-hover:scale-105"
+              src="https://images.unsplash.com/photo-1507146153580-69a1fe6d8aa1?auto=format&fit=crop&w=600&h=400"
+              alt="Digital Art"
+            / data-hbs-id="ed6iycl">
+          </div>
+          <div class="cms-card-content p-4 flex flex-col flex-grow" data-hbs-id="u24whax">
+            <a
+              href="/digital-art"
+              class="cms-link post-tag text-accent text-xs font-medium mb-2"
+               data-hbs-id="7yojs50">Digital Art</a
+            >
+            <h3
+              class="cms-h4 post-title text-lg font-semibold mb-2 transition-colors group-hover:text-accent line-clamp-2"
+             data-hbs-id="hdkqxg4">
+              NFTs and Digital Ownership: Redefining Creative Value
+            </h3>
+            <p
+              class="cms-body post-content cms-text-neutral mb-3 line-clamp-2 text-sm flex-grow"
+             data-hbs-id="kbdcceu">
+              Non-fungible tokens are transforming how we think about art,
+              collectibles, and intellectual property in the digital realm.
+            </p>
+            <div
+              class="post-meta flex items-center cms-text-neutral text-xs mt-auto"
+             data-hbs-id="1hib0ef">
+              <i class="far fa-clock mr-2" data-hbs-id="ss05d5c"></i>
+              <span class="cms-small"
+                 data-hbs-id="cdenvsp"><span class="post-min-read" data-hbs-id="0t102my">6</span> min read</span
+              >
+            </div>
+          </div>
+          <a
+            href="/nfts-digital-ownership"
+            class="cms-link post-link absolute inset-0 z-10"
+            aria-label="Read more about NFTs and Digital Ownership"
+           data-hbs-id="mm066fv"></a>
+        </article>
+
+        <article
+          class="cms-card post-item bg-white group shadow hover:shadow-lg overflow-hidden transition-all duration-300 flex flex-col h-full relative"
+         data-hbs-id="9eoi1hm">
+          <div class="overflow-hidden" data-hbs-id="8o36y1p">
+            <img
+              class="post-feature-image w-full h-40 object-cover transform transition-transform duration-500 group-hover:scale-105"
+              src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?auto=format&fit=crop&w=600&h=400"
+              alt="AI Technology"
+            / data-hbs-id="wnh628p">
+          </div>
+          <div class="cms-card-content p-4 flex flex-col flex-grow" data-hbs-id="84qjx52">
+            <a
+              href="/ai-ethics"
+              class="cms-link post-tag text-accent text-xs font-medium mb-2"
+               data-hbs-id="hqpopel">AI Ethics</a
+            >
+            <h3
+              class="cms-h4 post-title text-lg font-semibold mb-2 transition-colors group-hover:text-accent line-clamp-2"
+             data-hbs-id="dlvslq4">
+              Ethical AI Development: Balancing Innovation and Responsibility
+            </h3>
+            <p
+              class="cms-body post-content cms-text-neutral mb-3 line-clamp-2 text-sm flex-grow"
+             data-hbs-id="3cg514c">
+              As artificial intelligence becomes more powerful, developers are
+              grappling with critical questions about fairness, transparency,
+              and human oversight.
+            </p>
+            <div
+              class="post-meta flex items-center cms-text-neutral text-xs mt-auto"
+             data-hbs-id="f9h5o4d">
+              <i class="far fa-clock mr-2" data-hbs-id="pij9u6w"></i>
+              <span class="cms-small"
+                 data-hbs-id="59r709a"><span class="post-min-read" data-hbs-id="zr2ht5n">8</span> min read</span
+              >
+            </div>
+          </div>
+          <a
+            href="/ethical-ai-development"
+            class="cms-link post-link absolute inset-0 z-10"
+            aria-label="Read more about Ethical AI Development"
+           data-hbs-id="q9bdvj4"></a>
+        </article>
+      </div>
+    </div>
+    </div>
+  </main>
+
+  <style>
+    .content-feature-image-wrapper {
+      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+    }
+  </style>
+
+  <script>
+    document.getElementById("copyLink").addEventListener("click", function (e) {
+      e.preventDefault();
+      const url = window.location.href;
+      navigator.clipboard
+        .writeText(url)
+        .then(function () {
+          const button = document.getElementById("copyLink");
+          const originalHTML = button.innerHTML;
+
+          setTimeout(function () {
+            button.innerHTML = originalHTML;
+          }, 2000);
+        })
+        .catch(function (err) {
+          console.error("Could not copy text: ", err);
+        });
+    });
+
+    document.addEventListener("click", function (event) {
+      const dropdown = document.getElementById("shareDropdown");
+      const shareButton = document.getElementById("shareButton");
+
+      if (shareButton.contains(event.target)) {
+        dropdown.classList.toggle("hidden");
+        if (!dropdown.classList.contains("hidden")) {
+          dropdown.classList.replace("opacity-0", "opacity-100");
+          dropdown.classList.replace("scale-95", "scale-100");
+          dropdown.classList.replace("invisible", "visible");
+        } else {
+          dropdown.classList.replace("opacity-100", "opacity-0");
+          dropdown.classList.replace("scale-100", "scale-95");
+          dropdown.classList.replace("visible", "invisible");
+        }
+      } else if (!dropdown.contains(event.target)) {
+        dropdown.classList.add("hidden", "invisible", "opacity-0", "scale-95");
+        dropdown.classList.remove("visible", "opacity-100", "scale-100");
+      }
+    });
+
+    // Initialize dropdown as hidden on page load
+    document.addEventListener("DOMContentLoaded", function () {
+      const dropdown = document.getElementById("shareDropdown");
+      dropdown.classList.add("hidden");
+    });
+  </script>
+</div>