subscribe and community

2024-06-02 02:41:23 +05:30 · 2023-07-13 17:55:10 +08:00 · 2023-07-13 17:55:10 +08:00 · cf299597ee
parent 8d805ce487
commit cf299597ee
24 changed files with 907 additions and 2 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -16,7 +16,8 @@
        "clsx": "^1.2.1",
        "prism-react-renderer": "^1.3.5",
        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-transition-group": "^4.4.5"
      },
      "devDependencies": {
        "@docusaurus/module-type-aliases": "2.4.1"
@ -5848,6 +5849,15 @@
        "utila": "~0.4"
      }
    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
    "node_modules/dom-serializer": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@ -10106,6 +10116,21 @@
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
      }
    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
    "node_modules/readable-stream": {
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
--- a/package.json
+++ b/package.json
@ -22,7 +22,8 @@
    "clsx": "^1.2.1",
    "prism-react-renderer": "^1.3.5",
    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-transition-group": "^4.4.5"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "2.4.1"
--- a/src/components/ActionCard/index.js
+++ b/src/components/ActionCard/index.js
@ -0,0 +1,34 @@
+import clsx from "clsx"
+import React from "react"
+
+import style from "./styles.module.css"
+
+// type Props = {
+//   skin?: "default" | "primary"
+//   title: React.ReactNode
+//   description: React.ReactNode
+//   icon?: React.ReactNode
+//   className?: string
+// }
+
+export const ActionCard = ({
+  skin = "default",
+  icon,
+  title,
+  description,
+  children,
+  className,
+}) => (
+  <div
+    className={clsx(style.root, className, {
+      [style.skinPrimary]: skin === "primary",
+    })}
+  >
+    {icon}
+    <h3 className={style.title}>{title}</h3>
+    <p className={style.description}>{description}</p>
+    <div className={style.content}>{children}</div>
+  </div>
+)
+
+export default ActionCard
--- a/src/components/ActionCard/styles.module.css
+++ b/src/components/ActionCard/styles.module.css
@ -0,0 +1,44 @@
+.root {
+  padding: 2rem;
+  border-radius: 16px;
+  background: var(--theme-attention-card-bg-color);
+}
+
+.title {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: var(--font-size-big-1);
+  font-weight: var(--ifm-font-weight-bold);
+}
+
+.description {
+  font-size: var(--font-size-large);
+}
+
+@media screen and (min-width: 880px) {
+  .root {
+    padding: 2rem;
+  }
+
+  .title {
+    font-size: 1.2rem;
+  }
+}
+
+.content {
+  display: flex;
+  flex: 1;
+}
+
+.skinPrimary {
+  background: var(--ifm-color-primary-lighter);
+}
+
+[data-theme='dark'] .skinPrimary {
+  background: var(--ifm-color-primary-darker);
+}
+
+.skinPrimary .title,
+.skinPrimary .description {
+  color: var(--theme-attention-card-text-color);
+}
--- a/src/components/ActionFooter/footer.module.css
+++ b/src/components/ActionFooter/footer.module.css
@ -0,0 +1,19 @@
+.cards {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.card__link {
+  text-transform: uppercase;
+  font-size: var(--font-size-normal);
+}
+
+.card__link:not(:last-child) {
+  margin-right: 1.5rem;
+}
+
+@media screen and (min-width: 768px) {
+  .cards {
+    grid-template-columns: 1fr 1fr;
+  }
+}
--- a/src/components/ActionFooter/foss.svg
+++ b/src/components/ActionFooter/foss.svg
@ -0,0 +1,8 @@
+<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="38" cy="38" r="38" fill="white"/>
+<path d="M54.2042 54.2042C58.5017 49.9066 60.916 44.0778 60.916 38.0001C60.916 31.9224 58.5017 26.0936 54.2042 21.7959" stroke="#1E1F27" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.7959 21.7959C17.4984 26.0936 15.0841 31.9224 15.0841 38.0001C15.0841 44.0778 17.4984 49.9066 21.7959 54.2042" stroke="#1E1F27" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.6875 27.6876C26.3332 29.0418 25.2589 30.6495 24.5259 32.419C23.7929 34.1884 23.4156 36.0849 23.4156 38.0001C23.4156 39.9154 23.7929 41.8118 24.5259 43.5813C25.2589 45.3507 26.3332 46.9584 27.6875 48.3126" stroke="#1E1F27" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M48.3126 48.3126C49.6669 46.9584 50.7412 45.3507 51.4742 43.5813C52.2072 41.8118 52.5844 39.9154 52.5844 38.0001C52.5844 36.0849 52.2072 34.1884 51.4742 32.419C50.7412 30.6495 49.6669 29.0418 48.3126 27.6876" stroke="#1E1F27" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<ellipse cx="38" cy="38" rx="4.16667" ry="4.16667" fill="#D14671"/>
+</svg>
--- a/src/components/ActionFooter/index.js
+++ b/src/components/ActionFooter/index.js
@ -0,0 +1,54 @@
+import footerCss from "./footer.module.css"
+import ActionCard from "../ActionCard"
+import FossIcon from "./foss.svg"
+import SubscribeIcon from "./subscribeIcon.svg"
+import Subscribe from "../Subscribe"
+import React from "react"
+import SvgImage from "../SvgImage"
+import Button from "../Button"
+import styles from "./styles.module.css"
+
+export const ActionFooter = () => (
+  <div className={footerCss.cards}>
+    <ActionCard
+      icon={
+        <SvgImage
+          image={<FossIcon />}
+          title="An icon showing wave propagation"
+        />
+      }
+      title="Join our developer community"
+      description="Gitea is open source. Follow us on Twitter, star our GitHub repo, and join our developer community on Discord!"
+    >
+      <a
+        className={footerCss.card__link}
+        href={'https://github.com/go-gitea/gitea'}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Go to GitHub&nbsp;&nbsp;&gt;
+      </a>
+      <a className={footerCss.card__link} href={'https://discord.com/invite/gitea'}>
+        Join Discord&nbsp;&nbsp;&gt;
+      </a>
+    </ActionCard>
+
+    <ActionCard
+      title="Subscribe to our newsletter"
+      description="Stay up to date with all things QuestDB"
+      icon={
+        <SvgImage
+          image={<SubscribeIcon />}
+          title="An icon showing a paper plane"
+        />
+      }
+      skin="primary"
+    >
+      <Subscribe
+        placeholder="Email address"
+        submitButtonVariant="secondary"
+        provider="newsletter"
+      />
+    </ActionCard>
+  </div>
+)
--- a/src/components/ActionFooter/styles.module.css
+++ b/src/components/ActionFooter/styles.module.css
@ -0,0 +1,27 @@
+.loader {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
+
+.loader:after {
+  content: " ";
+  display: block;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-color: var(--ifm-color-white) transparent var(--ifm-color-white)
+    transparent;
+  animation: loader 1.2s linear infinite;
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/src/components/ActionFooter/subscribeIcon.svg
+++ b/src/components/ActionFooter/subscribeIcon.svg
@ -0,0 +1,4 @@
+<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="38" cy="38" r="38" fill="#1E1F27"/>
+<path d="M56.9902 18.7918C56.9707 18.6843 56.9315 18.5767 56.8729 18.4887C56.8631 18.4692 56.8534 18.4399 56.8436 18.4203C56.8338 18.4008 56.8142 18.391 56.7947 18.3714C56.7556 18.3226 56.7067 18.2737 56.6579 18.2346C56.6188 18.2053 56.5797 18.176 56.5406 18.1466C56.5211 18.1368 56.5113 18.1173 56.4917 18.1075C56.4624 18.0977 56.4233 18.0782 56.3842 18.0684C56.3354 18.0488 56.2864 18.0292 56.2376 18.0195C56.1789 18.0097 56.1203 18 56.0616 18C56.0128 18 55.9639 18 55.915 18C55.8465 18.0098 55.7782 18.0293 55.7195 18.0488C55.6902 18.0587 55.6511 18.0587 55.6217 18.0684L12.5898 36.6713C12.0912 36.8864 11.8664 37.4631 12.0814 37.9617C12.1792 38.1768 12.3454 38.3624 12.5605 38.4602L28.6314 46.0167V61.0417C28.6314 61.5793 29.0713 62.0192 29.609 62.0192C29.9511 62.0192 30.264 61.8433 30.44 61.55L37.2339 50.5037L47.7328 56.0366C48.2118 56.2908 48.7984 56.1051 49.0525 55.6261C49.0916 55.5479 49.121 55.4599 49.1405 55.3816L56.9805 19.1829C56.9805 19.1633 56.9805 19.1437 56.9805 19.1242C56.9903 19.0656 56.9903 19.0167 57 18.9678C56.9999 18.9091 56.9999 18.8505 56.9902 18.7918ZM29.4134 44.2081L15.3758 37.5999L51.7016 21.92L29.4134 44.2081ZM30.5865 57.5713V47.004L35.5035 49.5945L30.5865 57.5713ZM47.5079 53.7002L38.27 48.8418L36.6082 47.8154L36.5398 47.9327L31.2512 45.1467L54.3508 22.0275L47.5079 53.7002Z" fill="white"/>
+</svg>
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@ -0,0 +1,102 @@
+import clsx from "clsx"
+import React from "react"
+
+import styles from "./styles.module.css"
+
+// export type Props = Readonly<{
+//   children: ReactNode
+//   className?: string
+//   icon?: ReactNode
+//   href?: string
+//   newTab: boolean
+//   onClick?: () => void
+//   size: "normal" | "small" | "xsmall" | "xxsmall"
+//   to?: string
+//   type?: "button" | "submit"
+//   uppercase: boolean
+//   variant: "primary" | "secondary" | "tertiary" | "plain"
+//   disabled?: boolean
+//   dataHook?: string
+// }>
+
+const Button = ({
+  children,
+  className,
+  href,
+  icon,
+  newTab,
+  onClick,
+  size,
+  to,
+  type,
+  uppercase,
+  variant,
+  disabled,
+  dataHook,
+}) => {
+  const classes = clsx(className, styles.button, {
+    [styles["button--icon"]]: icon != null,
+    [styles["button--primary"]]: variant === "primary",
+    [styles["button--secondary"]]: variant === "secondary",
+    [styles["button--small"]]: size === "small",
+    [styles["button--tertiary"]]: variant === "tertiary",
+    [styles["button--plain"]]: variant === "plain",
+    [styles["button--uppercase"]]: uppercase,
+    [styles["button--xsmall"]]: size === "xsmall",
+    [styles["button--xxsmall"]]: size === "xxsmall",
+  })
+  if (href != null) {
+    return (
+      <a
+        className={classes}
+        data-hook={dataHook}
+        {...(disabled ?? false
+          ? {}
+          : {
+              href,
+              onClick,
+            })}
+        {...(newTab
+          ? {
+              rel: "noopener noreferrer",
+              target: "_blank",
+            }
+          : {})}
+      >
+        {icon}
+        {children}
+      </a>
+    )
+  }
+
+  if (to != null) {
+    return (
+      <a data-hook={dataHook} className={classes} href={to} onClick={onClick}>
+        {icon}
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      data-hook={dataHook}
+      disabled={disabled}
+      className={classes}
+      onClick={onClick}
+      type={type ?? "button"}
+    >
+      {icon}
+      {children}
+    </button>
+  )
+}
+
+Button.defaultProps = {
+  newTab: true,
+  size: "normal",
+  uppercase: true,
+  variant: "primary",
+}
+
+export default Button
--- a/src/components/Button/styles.module.css
+++ b/src/components/Button/styles.module.css
@ -0,0 +1,95 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 55px;
+  padding: 0 2rem;
+  border: none;
+  border-radius: calc(var(--ifm-global-border-radius) / 2);
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 16px;
+  transition: background-color 100ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
+}
+
+.button:hover {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.button--plain {
+  height: auto;
+  padding: 0;
+  font-weight: unset;
+  font-size: unset;
+}
+
+.button--primary {
+  background-color: var(--theme-button-primary-background-color);
+  color: var(--theme-button-primary-text-color); }
+
+.button--primary:hover {
+  background-color: var(--theme-button-primary-hover-background-color);
+  color: var(--theme-button-primary-text-color);
+}
+
+.button--icon img, .button--icon svg {
+  margin-right: 0.5rem;
+}
+
+.button--secondary {
+  background-color: var(--theme-button-secondary-background-color);
+  color: var(--theme-button-secondary-text-color);
+}
+
+.button--secondary:hover {
+  background-color: var(--theme-button-secondary-hover-background-color);
+  color: var(--theme-button-secondary-text-color);
+}
+
+.button--tertiary {
+  background-color: var(--theme-button-tertiary-background-color);
+  color: var(--theme-button-tertiary-text-color);
+}
+
+.button--tertiary:hover {
+  color: var(--theme-button-tertiary-text-color);
+  background-color: var(--theme-button-tertiary-hover-background-color);
+}
+
+.button--small {
+  height: 3.5rem;
+}
+
+.button--xsmall {
+  height: 2.6rem;
+  padding: 0 1rem;
+}
+
+.button--xxsmall {
+  height: 2rem;
+  font-weight: normal;
+  font-size: 0.9rem;
+}
+
+.button--uppercase {
+  text-transform: uppercase;
+}
+
+@media (max-width: 996px) {
+  .button {
+    padding: 0 1.75rem;
+  }
+
+  .button--xsmall {
+    padding: 0 1rem;
+  }
+
+  .button--xxsmall {
+    padding: 0 0.9rem;
+  }
+
+
+  .button--plain {
+    padding: 0;
+  }
+}
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@ -0,0 +1,53 @@
+import clsx from "clsx"
+import React from "react"
+
+import styles from "./styles.module.css"
+
+type Props = Readonly<{
+  value?: string
+  defaultValue?: string
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  className?: string
+  name: string
+  pattern?: string
+  placeholder?: string
+  required?: boolean
+  title?: string
+  type: "text" | "number" | "email"
+}>
+
+const Input = ({
+  value,
+  defaultValue,
+  onChange,
+  className,
+  name,
+  pattern,
+  placeholder,
+  required,
+  title,
+  type,
+}: Props) => {
+  const classes = clsx(className, styles.input)
+
+  return (
+    <input
+      defaultValue={defaultValue}
+      value={value}
+      onChange={onChange}
+      className={classes}
+      name={name}
+      required={required}
+      pattern={pattern}
+      placeholder={placeholder}
+      title={title}
+      type={type}
+    />
+  )
+}
+
+Input.defaultProps = {
+  type: "text",
+}
+
+export default Input
--- a/src/components/Input/styles.module.css
+++ b/src/components/Input/styles.module.css
@ -0,0 +1,23 @@
+.input {
+  display: flex;
+  height: 55px;
+  padding: 0 2rem;
+  align-items: center;
+  border-radius: calc(var(--ifm-global-border-radius) / 2);
+  border: none;
+  background: var(--palette-rock);
+  font-size: var(--font-size-normal);
+  color: var(--palette-white);
+  border: 2px solid transparent;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--palette-white);
+}
+
+.input:placeholder {
+  color: var(--palette-pale-blue);
+  font-size: var(--font-size-normal);
+  font-weight: var(--ifm-font-weight-bold);
+}
--- a/src/components/Section/Subtitle/index.tsx
+++ b/src/components/Section/Subtitle/index.tsx
@ -0,0 +1,28 @@
+import React from "react"
+import style from "./styles.module.css"
+import clsx from "clsx"
+
+type Props = {
+  children: React.ReactNode
+  center?: boolean
+  size?: "small" | "medium"
+  className?: string
+}
+
+export const Subtitle = ({
+  children,
+  center,
+  size = "medium",
+  className = "",
+}: Props) => (
+  <p
+    className={clsx(
+      style.root,
+      { [style.center]: center },
+      style[`size-${size}`],
+      className,
+    )}
+  >
+    {children}
+  </p>
+)
--- a/src/components/Section/Subtitle/styles.module.css
+++ b/src/components/Section/Subtitle/styles.module.css
@ -0,0 +1,16 @@
+.root {
+  font-size: var(--font-size-big-2);
+  font-weight: var(--ifm-font-weight-normal);
+  color: var(--palette-pale-blue);
+  margin: 0;
+}
+
+.center {
+  text-align: center;
+}
+
+@media (max-width: 996px) {
+  .root.size-medium {
+    font-size: var(--font-size-large);
+  }
+}
--- a/src/components/Section/Title/index.tsx
+++ b/src/components/Section/Title/index.tsx
@ -0,0 +1,29 @@
+import React from "react"
+import style from "./styles.module.css"
+import clsx from "clsx"
+
+export const Title = ({
+  level = 2,
+  children,
+  center,
+  size = "medium",
+  className,
+}: {
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+  children: React.ReactNode
+  center?: boolean
+  size?: "small" | "medium"
+  className?: string
+}) =>
+  React.createElement(
+    `h${level}`,
+    {
+      className: clsx(
+        style.root,
+        { [style.center]: center },
+        style[`size-${size}`],
+        className,
+      ),
+    },
+    children,
+  )
--- a/src/components/Section/Title/styles.module.css
+++ b/src/components/Section/Title/styles.module.css
@ -0,0 +1,32 @@
+.root {
+  font-size: var(--font-size-big-3);
+  line-height: 1.2;
+}
+
+.center {
+  text-align: center;
+}
+
+.size-small {
+  font-size: var(--font-size-big-2);
+}
+
+@media screen and (min-width: 600px) {
+  .root {
+    font-size: var(--font-size-big-4);
+  }
+
+  .size-small {
+    font-size: var(--font-size-big-3);
+  }
+}
+
+@media screen and (min-width: 1000px) {
+  .root {
+    font-size: var(--font-size-big-5);
+  }
+
+  .size-small {
+    font-size: var(--font-size-big-4);
+  }
+}
--- a/src/components/Section/index.tsx
+++ b/src/components/Section/index.tsx
@ -0,0 +1,48 @@
+import React from "react"
+import style from "./styles.module.css"
+import clsx from "clsx"
+
+import { Title } from "./Title"
+import { Subtitle } from "./Subtitle"
+
+type Props = {
+  children: React.ReactNode
+  odd?: boolean
+  accent?: boolean
+  row?: boolean
+  fullWidth?: boolean
+  noGap?: boolean
+  center?: boolean
+  className?: string
+}
+
+export const Section = ({
+  fullWidth,
+  children,
+  odd,
+  accent,
+  row,
+  noGap,
+  center,
+  className = "",
+}: Props) => (
+  <div
+    className={clsx(
+      style.root,
+      {
+        [style.odd]: odd,
+        [style.accent]: accent,
+        [style.row]: row,
+        [style.fullWidth]: fullWidth,
+        [style.noGap]: noGap,
+        [style.center]: center,
+      },
+      className,
+    )}
+  >
+    {children}
+  </div>
+)
+
+Section.Title = Title
+Section.Subtitle = Subtitle
--- a/src/components/Section/styles.module.css
+++ b/src/components/Section/styles.module.css
@ -0,0 +1,41 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  max-width: var(--ifm-container-width);
+  width: 100%;
+  padding: 2rem 1rem;
+  margin: 0 auto;
+}
+
+@media screen and (min-width: 900px) {
+  .root {
+    padding: 4.5rem 2rem;
+  }
+}
+
+.row {
+  flex-direction: row;
+}
+
+.odd {
+  background-color: var(--theme-section-odd-bg-color);
+}
+
+.accent {
+  --ifm-link-hover-color: var(--palette-pink);
+  --ifm-link-color: var(--palette-pink);
+  padding-top: 7rem;
+  padding-bottom: 7.5rem;
+}
+
+.fullWidth {
+  max-width: 100%;
+}
+
+.noGap {
+  padding: 0;
+}
+
+.center {
+  align-items: center;
+}
--- a/src/components/Subscribe/index.js
+++ b/src/components/Subscribe/index.js
@ -0,0 +1,109 @@
+import React, { useState } from "react"
+import { CSSTransition, TransitionGroup } from "react-transition-group"
+
+import Input from "../Input"
+import Button from "../Button"
+import style from "./style.module.css"
+import clsx from "clsx"
+const emailPattern = "^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$"
+
+// type Provider = "enterprise" | "cloud" | "newsletter"
+
+// type Props = {
+//   provider?: Provider
+//   placeholder?: string
+//   submitButtonText?: string
+//   submitButtonVariant?: ButtonProps["variant"]
+//   className?: string
+//   classNameInputs?: string
+//   renderSubmitButton?: (props: {
+//     loading: boolean
+//     defaultLoader: ReactNode
+//   }) => ReactNode
+// }
+
+const providers = {
+  cloud: "https://crast.questdb.io/contact/cloud",
+  enterprise: "https://crast.questdb.io/contact/new",
+  newsletter:
+    "https://questdb.us7.list-manage.com/subscribe/post?u=f692ae4038a31e8ae997a0f29&id=bdd4ec2744",
+}
+
+const Spinner = () => <span className={style.loader} />
+
+const Subscribe = ({
+  placeholder = "Email address",
+  provider = "enterprise",
+  submitButtonText = "SUBMIT",
+  className,
+  classNameInputs,
+}) => {
+  const [loading, setLoading] = useState(false)
+  const [sent, setSent] = useState(false)
+
+  const onSubmit = async (event) => {
+    event.preventDefault()
+
+    setLoading(true)
+
+    const target = event.target
+    const email = new FormData(target).get("email")
+
+    try {
+      if (provider === "newsletter") {
+        await fetch(
+          `${providers.newsletter}&EMAIL=${encodeURIComponent(email)}`,
+          { method: "GET" },
+        )
+      } else {
+        await fetch(providers[provider], {
+          body: JSON.stringify({ email }),
+          headers: { "Content-Type": "application/json" },
+          method: "POST",
+        })
+      }
+    } catch (e) {}
+
+    setSent(true)
+  }
+
+  return (
+    <form className={clsx(style.root, className)} onSubmit={onSubmit}>
+      <TransitionGroup>
+        <CSSTransition
+          key={sent.toString()}
+          timeout={200}
+          classNames="transition-node"
+        >
+          {sent ? (
+            <p className={style.success}>
+              Thank you, we will be in touch soon!
+            </p>
+          ) : (
+            <div className={clsx(style.inputs, classNameInputs)}>
+              <Input
+                className={style.input}
+                name="email"
+                type="email"
+                title="Email address should be valid"
+                placeholder={placeholder}
+                required
+                pattern={emailPattern}
+              />
+
+              <Button
+                variant={"tertiary"}
+                type="submit"
+                className={style.subscribeSubmit}
+              >
+                {loading ? <Spinner /> : submitButtonText}
+              </Button>
+            </div>
+          )}
+        </CSSTransition>
+      </TransitionGroup>
+    </form>
+  )
+}
+
+export default Subscribe
--- a/src/components/Subscribe/style.module.css
+++ b/src/components/Subscribe/style.module.css
@ -0,0 +1,67 @@
+.root {
+  width: 100%;
+}
+
+.inputs {
+  display: grid;
+  gap: 1rem;
+}
+
+:global(html[data-theme="light"]) .subscribeSubmit {
+  background: #dde0e9;
+}
+
+@media screen and (min-width: 600px) {
+  .inputs {
+    grid-template-columns: 4fr 2fr;
+  }
+}
+
+.input {
+  color: var(--theme-input-text-color);
+  padding: 1rem;
+  font-size: var(--font-size-small);
+  width: 100%;
+  background-color: var(--theme-card-secondary-bg-color);
+}
+
+.input::placeholder {
+  color: var(--theme-input-text-color);
+}
+
+.submit {
+  white-space: nowrap;
+}
+
+.loader {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
+
+.loader:after {
+  content: " ";
+  display: block;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-color: var(--ifm-color-white) transparent var(--ifm-color-white)
+    transparent;
+  animation: loader 1.2s linear infinite;
+}
+
+.success {
+  font-size: 17px;
+  font-weight: var(--ifm-font-weight-bold);
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/src/components/SvgImage/index.tsx
+++ b/src/components/SvgImage/index.tsx
@ -0,0 +1,14 @@
+import { cloneElement } from "react"
+
+type Props = {
+  image: JSX.Element
+  title?: string
+}
+
+const SvgImage = ({ image, title = "" }: Props) =>
+  cloneElement(image, {
+    ...image.props,
+    title,
+  })
+
+export default SvgImage
--- a/src/css/custom.css
+++ b/src/css/custom.css
@ -14,12 +14,26 @@
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
+  --ifm-global-border-radius: 8px;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --theme-card-bg-color: #f0f1f5;
  --theme-card-bg-color-hover: rgb(225, 227, 235);
  --theme-card-border-color: #b7b9c3;
  --theme-card-text-color: #21222c;
  --theme-card-title-color: #21222c;
+  --theme-attention-card-bg-color: #f0f1f5;
+  --theme-attention-card-text-color: var(--ifm-color-white);
+  --theme-input-text-color: #555b88;
+  --theme-card-secondary-bg-color: #dde0e9;
+  --theme-button-primary-background-color: var(--ifm-color-primary);
+  --theme-button-primary-text-color: var(--ifm-color-white);
+  --theme-button-primary-hover-background-color: var(--ifm-color-primary-darker);
+  --theme-button-secondary-background-color: rgba(0, 0, 0, 0.1);
+  --theme-button-secondary-text-color: #21222c;
+  --theme-button-secondary-hover-background-color: rgba(0, 0, 0, 0.3);
+  --theme-button-tertiary-background-color: rgba(0, 0, 0, 0.3);
+  --theme-button-tertiary-text-color: rgba(0, 0, 0, 0.8);
+  --theme-button-tertiary-hover-background-color: rgba(0, 0, 0, 0.4);
 }

 /* For readability concerns, you should choose a lighter palette in dark mode. */
@ -38,6 +52,18 @@
  --theme-card-bg-color-hover: rgb(47, 49, 63);
  --theme-card-border-color: #51535f;
  --theme-card-border-radius: 8px;
+  --theme-attention-card-bg-color: var(--ifm-color-gray-200);
+  --theme-input-text-color: #b1b5d3;
+  --theme-card-secondary-bg-color: #21222c;
+  --theme-button-primary-background-color: var(--ifm-color-primary);
+  --theme-button-primary-text-color: var(--ifm-color-white);
+  --theme-button-primary-hover-background-color: var(--ifm-color-primary-darker);
+  --theme-button-secondary-background-color: var(--ifm-color-white);
+  --theme-button-secondary-text-color: #21222c;
+  --theme-button-secondary-hover-background-color: #d9d9d9;
+  --theme-button-tertiary-background-color: rgba(255, 255, 255, 0.1);
+  --theme-button-tertiary-text-color: var(--ifm-color-white);
+  --theme-button-tertiary-hover-background-color: rgba(255, 255, 255, 0.2)
 }

 .internal-href [class*='iconExternalLink'] {
--- a/src/theme/BlogPostPage/index.js
+++ b/src/theme/BlogPostPage/index.js
@ -8,6 +8,8 @@ import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata';
+import { ActionFooter } from "@site/src/components/ActionFooter";
+import { Section } from "@site/src/components/Section";
 import TOC from '@theme/TOC';
 import styles from './styles.module.css';

@ -44,6 +46,10 @@ function BlogPostPageContent({sidebar, children}) {
      {(nextItem || prevItem) && (
        <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
      )}
+
+      <Section>
+        <ActionFooter />
+      </Section>
    </BlogLayout>
  );
 }