<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Announcements Emailer | Email template</title>
    <meta
      name="description"
      content="Highlight your best product announcements with this stylish email template."
    />
    <!--[if mso]>
      <style type="text/css">
        body,
        table,
        td {
          font-family: "Segoe UI", Arial, sans-serif !important;
        }
      </style>
    <![endif]-->
  </head>
  <body
    style="
      margin: 0 auto;
      max-width: 600px;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      color: #333333;
      line-height: 1.5;
    "
  >
<center>
    <table
      width="100%"
      border="0"
      cellspacing="0"
      cellpadding="0"
      style="max-width: 600px; background-color: #ffffff"
    >
      <!-- Hero Section -->
      <tr>
        <td
          style="
            padding: 40px 40px;
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: #ffffff;
          "
        >
          <h1
            style="
              margin: 0;
              line-height: 1.25;
              margin-bottom: 20px;
              font-size: 24px;
            "
          >
            Product Announcements
          </h1>
          <h2
            style="
              margin: 0;
              line-height: 1.25;
              margin-bottom: 20px;
              font-size: 20px;
              font-weight: normal;
            "
          >
            May 2025
          </h2>
          <p style="margin: 0 0 20px 0">
            This month, we're highlighting powerful new ways to connect your
            product with your team's other tools and providers.
          </p>
          <div
            style="
              display: inline-block;
              background-color: rgba(255, 255, 255, 0.2);
              padding: 8px 16px;
              border-radius: 20px;
              font-size: 14px;
            "
          >
            <span style="margin-right: 8px">✨</span> New product features
          </div>
        </td>
      </tr>

      <!-- Spotlight Section -->
      <tr>
        <td style="padding: 40px 40px 20px; background-color: #f9fafb">
          <div style="text-align: center; margin-bottom: 30px">
            <span
              style="
                display: inline-block;
                background-color: #e0e7ff;
                color: #4f46e5;
                padding: 6px 16px;
                border-radius: 20px;
                font-size: 14px;
                font-weight: bold;
              "
              >INTEGRATIONS</span
            >
            <h3
              style="
                margin: 10px 0 0 0;
                line-height: 1.25;
                font-size: 20px;
                color: #111827;
              "
            >
              Features 1
            </h3>
          </div>

          <!-- Feature -->
          <table
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="
              margin-bottom: 30px;
              background-color: #ffffff;
              border-radius: 12px;
              overflow: hidden;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            "
          >
            <tr>
              <td style="padding: 25px">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="60" valign="top">
                      <div
                        style="
                          background-color: #eef2ff;
                          width: 48px;
                          height: 48px;
                          border-radius: 12px;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        "
                      >
                        <img
                          src="download.svg"
                          alt="Feature icon"
                          width="24"
                          height="24"
                        />
                      </div>
                    </td>
                    <td style="padding-left: 20px">
                      <span
                        style="
                          display: inline-block;
                          background-color: #4f46e5;
                          color: white;
                          padding: 2px 8px;
                          border-radius: 4px;
                          font-size: 12px;
                          margin-bottom: 8px;
                        "
                        >New Release</span
                      >
                      <h4 style="margin: 0 0 10px 0; font-size: 16px">
                        Feature title can go here
                      </h4>
                      <p
                        style="
                          margin: 0 0 10px 0;
                          font-size: 14px;
                          color: #4b5563;
                        "
                      >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      </p>
                      <p style="margin: 0; font-size: 14px; color: #4b5563">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

          <!-- Feature -->
          <table
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="
              background-color: #ffffff;
              border-radius: 12px;
              overflow: hidden;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            "
          >
            <tr>
              <td style="padding: 25px">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="60" valign="top">
                      <div
                        style="
                          background-color: #eef2ff;
                          width: 48px;
                          height: 48px;
                          border-radius: 12px;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        "
                      >
                        <img
                          src="download.svg"
                          alt="Feature icon"
                          width="24"
                          height="24"
                        />
                      </div>
                    </td>
                    <td style="padding-left: 20px">
                      <span
                        style="
                          display: inline-block;
                          background-color: #4f46e5;
                          color: white;
                          padding: 2px 8px;
                          border-radius: 4px;
                          font-size: 12px;
                          margin-bottom: 8px;
                        "
                        >New Release</span
                      >
                      <h4 style="margin: 0 0 10px 0; font-size: 16px">
                        Feature title can go here, it can be a bit longer
                      </h4>
                      <p
                        style="
                          margin: 0 0 10px 0;
                          font-size: 14px;
                          color: #4b5563;
                        "
                      >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit:
                      </p>
                      <img
                        src="https://picsum.photos/500/250"
                        alt="Feature image"
                        width="500"
                        height="250"
                        style="
                          max-width: 100%;
                          height: auto;
                          margin: 10px 0;
                          border-radius: 8px;
                        "
                      />
                      <p style="margin: 0; font-size: 14px; color: #4b5563">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- CTA Section -->
      <tr>
        <td
          style="
            padding: 30px 40px;
            background-color: #4f46e5;
            text-align: center;
          "
        >
          <p style="margin: 0 0 20px 0; font-size: 14px; color: #e0e7ff">
            Learn more about these integration-focused features on our blog.
            Both require a Professional plan or higher.
          </p>
          <a
            href="#"
            style="
              display: inline-block;
              background-color: #ffffff;
              color: #4f46e5;
              text-decoration: none;
              padding: 12px 24px;
              border-radius: 8px;
              font-weight: bold;
              font-size: 14px;
            "
            >Read Blog Post →</a
          >
        </td>
      </tr>

      <!-- Features Section -->
      <tr>
        <td style="padding: 40px 40px 20px; background-color: #f0fdf4">
          <div style="text-align: center; margin-bottom: 30px">
            <span
              style="
                display: inline-block;
                background-color: #dcfce7;
                color: #166534;
                padding: 6px 16px;
                border-radius: 20px;
                font-size: 14px;
                font-weight: bold;
              "
              >PLATFORM</span
            >
            <h3
              style="
                margin: 10px 0 0 0;
                line-height: 1.25;
                font-size: 20px;
                color: #111827;
              "
            >
              Latest Improvements
            </h3>
          </div>

          <!-- Feature -->
          <table
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="
              margin-bottom: 30px;
              background-color: #ffffff;
              border-radius: 12px;
              overflow: hidden;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            "
          >
            <tr>
              <td style="padding: 25px">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="60" valign="top">
                      <div
                        style="
                          background-color: #dcfce7;
                          width: 48px;
                          height: 48px;
                          border-radius: 12px;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        "
                      >
                        <img
                          src="green-star.svg"
                          alt="Feature icon"
                          width="24"
                          height="24"
                        />
                      </div>
                    </td>
                    <td style="padding-left: 20px">
                      <span
                        style="
                          display: inline-block;
                          background-color: #166534;
                          color: white;
                          padding: 2px 8px;
                          border-radius: 4px;
                          font-size: 12px;
                          margin-bottom: 8px;
                        "
                        >Enterprise</span
                      >
                      <h4 style="margin: 0 0 10px 0; font-size: 16px">
                        Feature title can go here
                      </h4>
                      <p
                        style="
                          margin: 0 0 10px 0;
                          font-size: 14px;
                          color: #4b5563;
                        "
                      >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      </p>
                      <p style="margin: 0; font-size: 14px; color: #4b5563">
                        Interested in upgrading to Enterprise?
                        <a
                          href="#"
                          style="
                            color: #166534;
                            text-decoration: none;
                            font-weight: bold;
                          "
                          >Reach out</a
                        >.
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

          <!-- Feature -->
          <table
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="
              background-color: #ffffff;
              border-radius: 12px;
              overflow: hidden;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            "
          >
            <tr>
              <td style="padding: 25px">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="60" valign="top">
                      <div
                        style="
                          background-color: #dcfce7;
                          width: 48px;
                          height: 48px;
                          border-radius: 12px;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        "
                      >
                        <img
                          src="green-star.svg"
                          alt="Feature icon"
                          width="24"
                          height="24"
                        />
                      </div>
                    </td>
                    <td style="padding-left: 20px">
                      <h4 style="margin: 0 0 10px 0; font-size: 16px">
                        Longer feature title can go here, it can be a bit longer
                      </h4>
                      <p
                        style="
                          margin: 0 0 10px 0;
                          font-size: 14px;
                          color: #4b5563;
                        "
                      >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      </p>
                      <p style="margin: 0; font-size: 14px; color: #4b5563">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet elit.
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- More Updates Section -->
      <tr>
        <td style="padding: 40px 40px 20px; background-color: #f5f3ff">
          <div style="text-align: center; margin-bottom: 30px">
            <span
              style="
                display: inline-block;
                background-color: #ede9fe;
                color: #5b21b6;
                padding: 6px 16px;
                border-radius: 20px;
                font-size: 14px;
                font-weight: bold;
              "
              >UPDATES</span
            >
            <h3
              style="
                margin: 10px 0 0 0;
                line-height: 1.25;
                font-size: 20px;
                color: #111827;
              "
            >
              More From Your Product
            </h3>
          </div>

          <!-- Feature -->
          <table
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="
              margin-bottom: 30px;
              background-color: #ffffff;
              border-radius: 12px;
              overflow: hidden;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            "
          >
            <tr>
              <td style="padding: 25px">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="60" valign="top">
                      <div
                        style="
                          background-color: #ede9fe;
                          width: 48px;
                          height: 48px;
                          border-radius: 12px;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        "
                      >
                        <img
                          src="download.svg"
                          alt="Feature icon"
                          width="24"
                          height="24"
                        />
                      </div>
                    </td>
                    <td style="padding-left: 20px">
                      <span
                        style="
                          display: inline-block;
                          background-color: #5b21b6;
                          color: white;
                          padding: 2px 8px;
                          border-radius: 4px;
                          font-size: 12px;
                          margin-bottom: 8px;
                        "
                        >How-To</span
                      >
                      <h4 style="margin: 0 0 10px 0; font-size: 16px">
                        Feature title can go here
                      </h4>
                      <p
                        style="
                          margin: 0 0 10px 0;
                          font-size: 14px;
                          color: #4b5563;
                        "
                      >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      </p>
                      <p style="margin: 0; font-size: 14px; color: #4b5563">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

          <!-- Work at Company Name -->
          <table
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="
              background-color: #ffffff;
              border-radius: 12px;
              overflow: hidden;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            "
          >
            <tr>
              <td style="padding: 25px">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="60" valign="top">
                      <div
                        style="
                          background-color: #ede9fe;
                          width: 48px;
                          height: 48px;
                          border-radius: 12px;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        "
                      >
                        <img
                          src="download.svg"
                          alt="Feature icon"
                          width="24"
                          height="24"
                        />
                      </div>
                    </td>
                    <td style="padding-left: 20px">
                      <h4 style="margin: 0 0 10px 0; font-size: 16px">
                        Engineering Manager, company name
                      </h4>
                      <p
                        style="
                          margin: 0 0 10px 0;
                          font-size: 14px;
                          color: #4b5563;
                        "
                      >
                        Inspire, coach, and grow the team responsible for
                        critical infrastructure products that serve as
                        "keystones" for our customers as they scale, such as
                        Postgres and Key Value.
                      </p>
                      <p
                        style="
                          margin: 20px 0 0 0;
                          font-size: 14px;
                          color: #4b5563;
                        "
                      >
                        We're hiring across multiple teams!
                        <a
                          href="#"
                          style="
                            color: #5b21b6;
                            text-decoration: none;
                            font-weight: bold;
                          "
                          >Check out our careers page.</a
                        >
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- Footer -->
      <tr>
        <td
          style="
            padding: 40px 40px 20px;
            background-color: #f9fafb;
            text-align: center;
            font-size: 12px;
            color: #6b7280;
            border-top: 1px solid #e5e7eb;
          "
        >
          <img
            src="https://picsum.photos/100/30"
            alt="Company Name Logo"
            width="100"
            height="30"
            style="max-width: 100%; height: auto; margin-bottom: 20px"
          />
          <p style="margin: 0 0 10px 0">
            Company Name, Inc., 123 Main St., San Francisco, California
          </p>
          <p style="margin: 0 0 20px 0; font-size: 11px">
            © 2025 Company Name Inc. All rights reserved.
          </p>
          <p style="margin: 0">
            <a
              href="#"
              style="color: #6b7280; text-decoration: none; margin: 0 8px"
              >Twitter</a
            >
            <a
              href="#"
              style="color: #6b7280; text-decoration: none; margin: 0 8px"
              >LinkedIn</a
            >
            <a
              href="#"
              style="color: #6b7280; text-decoration: none; margin: 0 8px"
              >GitHub</a
            >
          </p>
          <p style="margin: 20px 0 0 0">
            <a
              href="#"
              style="color: #6b7280; text-decoration: none; margin: 0 8px"
              >Unsubscribe</a
            >
            |
            <a
              href="#"
              style="color: #6b7280; text-decoration: none; margin: 0 8px"
              >Manage preferences</a
            >
          </p>
        </td>
      </tr>
    </table>
  </center>
</body>
</html>
