Add newsletter subscription component to documentation

src/components/Newsletter.astro

@@ -0,0 +1,83 @@
+---
+import { Icon } from "@astrojs/starlight/components";
+---
+<div class="hubspot-form-wrapper">
+  <div class="newsletter-pitch">
+    <p class="newsletter-title">
+      <Icon name="email" label="Duende Newsletter" />
+      Subscribe To Our Newsletter!</p>
+    <p class="newsletter-subtitle">Stay ahead in the world of identity and access management!</p>
+    <ul>
+      <li>Latest security best practices</li>
+      <li>Product updates and releases</li>
+      <li>Technical tips and implementation guides</li>
+      <li>Industry news and trends</li>
+    </ul>
+    <p>Join our community of developers and security professionals building secure applications.</p>
+  </div>
+  <hubspot-form></hubspot-form>
+</div>
+
+<style>
+  .newsletter-title {
+    display: flex;
+    font-size: var(--sl-text-3xl);
+    font-weight: 500;
+    svg {
+      margin-right: 0.5rem;
+    }
+  }
+
+  .newsletter-subtitle {
+    font-size: var(--sl-text-lg);
+    font-weight: 400;
+  }
+
+  .hubspot-form-wrapper {
+    display: flex;
+    --sl-card-border: var(--sl-color-purple);
+    --sl-card-bg: var(--sl-color-purple-low);
+    border: 1px solid var(--sl-color-gray-5);
+    background-color: var(--sl-color-black);
+    padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
+    flex-direction: row;
+    gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
+    flex-wrap: nowrap;
+  }
+
+  @media (max-width: 768px) {
+    .hubspot-form-wrapper {
+      flex-wrap: wrap;
+    }
+  }
+
+  .newsletter-pitch {
+    vertical-align: baseline;
+    align-content: center;
+  }
+
+</style>
+
+<script>
+  import "https://js.hsforms.net/forms/embed/v2.js";
+
+  class HubspotForm extends HTMLElement {
+    constructor() {
+      super();
+
+      const div = document.createElement("div");
+      div.className = `hubspot-form-${Math.random().toString(36).substring(2, 10)}`;
+      this.appendChild(div);
+
+      hbspt.forms.create({
+        portalId: "47428297",
+        formId: "bdd9b287-d141-46e2-8b1f-90ce29fd262e",
+        region: "na1",
+        target: `.${div.className}`
+      });
+    }
+  }
+
+  customElements.define("hubspot-form", HubspotForm);
+</script>
+

src/content/docs/index.mdx

@@ -28,6 +28,7 @@ import {
   LinkButton,
   Badge,
 } from "@astrojs/starlight/components";
+import Newsletter from "~/components/Newsletter.astro";
 import TestimonialGrid from "~/components/testimonial-grid.astro";
 import Testimonial from "~/components/testimonial.astro";
 
@@ -49,8 +50,6 @@ import Testimonial from "~/components/testimonial.astro";
 
 </CardGrid>
 
-<hr />
-
 <CardGrid>
   <Card title="IdentityServer" icon="open-book">
     The most flexible and standards-compliant OpenID Connect and OAuth 2.0
@@ -87,3 +86,7 @@ import Testimonial from "~/components/testimonial.astro";
     </LinkButton>
   </Card>
 </CardGrid>
+
+<hr />
+
+<Newsletter />

src/styles/custom.css

@@ -115,3 +115,74 @@ summary {
     }
 }
 
+
+/* hubspot forms */
+.form-columns-2 {
+    display: flex;
+    align-items: baseline;
+}
+
+.hubspot-form-container {
+    padding: 1rem 0;
+}
+
+.hs-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.hs-form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.hs-input {
+    padding: 0.5rem;
+    border: 1px solid var(--sl-color-gray-4);
+    border-radius: 0.25rem;
+    background: var(--sl-color-gray-6);
+    color: var(--sl-color-white);
+    width: 90%;
+}
+
+.hs-form-required {
+    color: var(--sl-color-accent-high);
+    margin-left: 0.25rem;
+}
+
+.hs-button {
+    font-size: var(--sl-text-lg);
+    background: transparent;
+    color: var(--sl-color-white);
+    border: 1px solid var(--sl-color-white);
+    border-radius: 999rem;
+    padding: 1rem 1.5rem;
+    line-height: 1.1875;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.hs-error-msgs {
+    margin: 0;
+    padding: 0.1rem;
+    list-style: none;
+}
+
+.hs-error-msg {
+    text-decoration:var(--sl-color-accent-high) ;
+    color: var(--sl-color-accent-high);
+    font-size: 0.875rem;
+}
+
+.form-columns-1, .form-columns-2 {
+    &:has(> *[style*="display: none"]:only-child) {
+        display: none;
+        height: 0;
+        width: 0;
+        margin:0;
+    }
+}
+/* end hubspot forms */
+