feat: add white paper download page

src/pages/white-paper/building-blocks/WhitePaperForm/index.module.css

@@ -0,0 +1,32 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+
+.input {
+  display: block;
+  width: 100%;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  border-radius: var(--ifm-button-border-radius);
+  border: 1px solid var(--glasskube-main-2);
+}
+
+.input:focus {
+  border-color: var(--glasskube-main-3);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--ifm-global-spacing);
+}
+
+@media (min-width: 997px) {
+  .form {
+    margin: 8px 0;
+  }
+}
+

src/pages/white-paper/building-blocks/WhitePaperForm/index.tsx

@@ -0,0 +1,202 @@
+import Heading from '@theme/Heading';
+import React from 'react';
+import styles from './index.module.css';
+
+function loadScript() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const elementId = 'hs-script';
+  if (document.getElementById(elementId) === null) {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://js-eu1.hs-scripts.com/144345473.js';
+    script.id = elementId;
+    document.head.appendChild(script);
+  }
+}
+
+interface WhitePaperRequest {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  jobTitle: string;
+  companyName: string;
+}
+
+class Form extends React.Component<unknown, {data: WhitePaperRequest}> {
+  hubSpotLoaded = false;
+
+  constructor(props: unknown) {
+    super(props);
+    this.state = {data: {} as WhitePaperRequest};
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  loadHubSpot() {
+    if (!this.hubSpotLoaded) {
+      loadScript();
+      this.hubSpotLoaded = true;
+    }
+  }
+
+  async handleSubmit(event) {
+    event.preventDefault();
+    loadScript();
+
+    await fetch('https://forms.glasskube.com/api/v1/white-paper', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(this.state.data),
+    })
+      .then(() => {
+        alert(
+          'You will receive the white paper immediately via email. Thank you!',
+        );
+      })
+      .catch(err => {
+        alert(err.message);
+        console.error(err.message);
+      });
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit} className={styles.form}>
+        <div className="row g-2 mt-1">
+          <div className="col">
+            <label htmlFor="firstName">First Name*</label>
+            <input
+              type="text"
+              className={styles.input}
+              id="firstName"
+              name="firstName"
+              placeholder="First name"
+              value={this.state.data.firstName}
+              onChange={e =>
+                this.setState(state => {
+                  state.data.firstName = e.target.value;
+                })
+              }
+              required
+            />
+          </div>
+          <div className="col">
+            <label htmlFor="lastName">Last Name*</label>
+            <input
+              type="text"
+              className={styles.input}
+              id="lastName"
+              name="lastName"
+              placeholder="Last name"
+              value={this.state.data.lastName}
+              onChange={e =>
+                this.setState(state => {
+                  state.data.lastName = e.target.value;
+                })
+              }
+              required
+            />
+          </div>
+        </div>
+        <div className="row g-2">
+          <div className="col">
+            <label htmlFor="email">Work Email*</label>
+            <input
+              type="email"
+              className={styles.input}
+              id="email"
+              placeholder="Work Email"
+              name="email"
+              value={this.state.data.email}
+              onChange={e => {
+                this.setState(state => {
+                  state.data.email = e.target.value;
+                });
+                this.loadHubSpot();
+              }}
+              required
+            />
+          </div>
+          <div className="col">
+            <label htmlFor="phone">Work Phone</label>
+            <input
+              type="tel"
+              className={styles.input}
+              id="phone"
+              placeholder="Work Phone"
+              value={this.state.data.phone}
+              onChange={e =>
+                this.setState(state => {
+                  state.data.phone = e.target.value;
+                })
+              }
+              name="phone"
+            />
+          </div>
+        </div>
+        <div className="row g-2">
+          <div className="col">
+            <label htmlFor="jobTitle">Job title*</label>
+            <input
+              type="text"
+              className={styles.input}
+              id="jobTitle"
+              placeholder="Job Title"
+              name="jobTitle"
+              value={this.state.data.jobTitle}
+              onChange={e =>
+                this.setState(state => {
+                  state.data.jobTitle = e.target.value;
+                })
+              }
+              required
+            />
+          </div>
+          <div className="col">
+            <label htmlFor="companyName">Company Name*</label>
+            <input
+              type="text"
+              className={styles.input}
+              id="companyName"
+              placeholder="Company Name"
+              name="companyName"
+              value={this.state.data.companyName}
+              onChange={e =>
+                this.setState(state => {
+                  state.data.companyName = e.target.value;
+                })
+              }
+              required
+            />
+          </div>
+        </div>
+        <button className="button button--secondary button--lg" type="submit">
+          Submit
+        </button>
+      </form>
+    );
+  }
+}
+
+export default function WhitePaperForm() {
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col">
+          <div className="text--center">
+            <Heading as={'h2'}>Get the white paper</Heading>
+            <p>You will receive the white paper immediately via email.</p>
+          </div>
+          <Form />
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/white-paper/building-blocks/index.tsx

@@ -0,0 +1,68 @@
+import Layout from '@theme/Layout';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+import React from 'react';
+import clsx from 'clsx';
+import WhitePaperForm from '@site/src/pages/white-paper/building-blocks/WhitePaperForm';
+import DefaultCTA from '@site/src/components/cta/DefaultCTA/defaultCTA';
+import Testimonials from '@site/src/components/Testimonials';
+import NewsletterSignup from '@site/src/components/NewsletterSignup';
+
+const TITLE = 'Building Blocks for Modern On-Prem Software Distribution';
+const DESCRIPTION =
+  'These building blocks lay the foundation of a successful on-prem offering that both ' +
+  'software vendors and end-customers can depend on.';
+
+function WhitePaperLayout() {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          <div className={clsx('col', 'margin-top--lg')}>
+            <div className={styles.iconBorder}>
+              <img
+                src="/img/white-paper/Glasskube%20Building%20Blocks%20White%20Paper%20Teaser.png"
+                className={styles.image}
+                alt=""
+              />
+            </div>
+          </div>
+          <div className={clsx('col col--6', 'margin-top--lg')}>
+            <WhitePaperForm />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function WhitePaperHeader() {
+  return (
+    <section className="margin-top--lg text--center">
+      <Heading as="h1">{TITLE}</Heading>
+      <p>
+        <strong>{DESCRIPTION}</strong>
+      </p>
+    </section>
+  );
+}
+
+export default function PackagePage(): JSX.Element {
+  return (
+    <Layout title={TITLE} description={DESCRIPTION}>
+      <main className="margin-vert--lg">
+        <WhitePaperHeader />
+        <WhitePaperLayout />
+        <div className="margin-top--xl"></div>
+        <Testimonials />
+        <div className="container">
+          <div className="row">
+            <div className="col col--10 col--offset-1">
+              <DefaultCTA />
+            </div>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  );
+}

src/pages/white-paper/building-blocks/styles.module.css

@@ -0,0 +1,32 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.iconHeight {
+  height: 64px;
+}
+
+.iconBorder {
+  position: relative;
+}
+
+.iconBorder::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 16px 16px 0 0;
+  border: 3px solid transparent;
+  background: linear-gradient(to right, var(--glasskube-main-3), var(--glasskube-pink)) border-box;
+  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  border-bottom: none;
+}
+
+
+.image {
+  border-radius: 16px 16px 0 0;
+  margin-bottom: -6px;
+}