Add contact page

packages/docs/docusaurus.config.js

@@ -76,14 +76,15 @@ const config = (mode) => ({
               to: "/docs/resources",
               label: "Resources",
             },
-            { to: "blog", label: "Blog" },
             { to: "showcase", label: "Showcase" },
-            { to: "experts", label: "Experts" },
-            { to: "learn", label: "Learn" },
-            { to: "about", label: "About us" },
             { to: "success-stories", label: "Success Stories" },
+            { to: "blog", label: "Blog" },
+            { to: "learn", label: "Learn" },
+            { to: "experts", label: "Experts" },
             { to: "https://remotion.pro/store", label: "Store" },
             { to: "/docs/support", label: "Support" },
+            { to: "about", label: "About us" },
+            { to: "contact", label: "Contact us" },
           ],
         },
         {
@@ -196,6 +197,10 @@ const config = (mode) => ({
               label: "About us",
               to: "about",
             },
+            {
+              label: "Contact us",
+              to: "contact",
+            },
             mode === "complete"
               ? {
                   label: "Blog",

packages/docs/src/components/ContactUsHeader.module.css

@@ -0,0 +1,22 @@
+.writeincss {
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+}
+
+.writeincsstitle {
+  font-size: 4em;
+  font-family: GTPlanar;
+  font-weight: 700;
+  line-height: 1.2;
+  max-width: 1000px;
+}
+
+@media screen and (max-width: 900px) {
+  .writeincss {
+    flex-direction: column;
+  }
+  .writeincsstitle {
+    font-size: 3.5em;
+  }
+}

packages/docs/src/components/ContactUsHeader.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./AboutUsHeader.module.css";
+
+export const ContactUsHeader: React.FC = () => {
+  return (
+    <div className={styles.writeincss}>
+      <div style={{ flex: 1 }}>
+        <h1 className={styles.writeincsstitle}>Contact us</h1>
+        <p>
+          We are here to help you with any questions you may have about
+          licensing and to help you determine if Remotion is the right fit for
+          your project.
+        </p>
+        <p>
+          If you have specific requirements, please let us know via email.
+          Alternatively, you can also schedule a video call with us and include
+          your questions in the booking description. Please note that we do not
+          provide technical support via email or evaluation call.
+        </p>
+      </div>
+    </div>
+  );
+};

packages/docs/src/pages/contact/contact.module.css

@@ -0,0 +1,138 @@
+/* styles from v4.module.css */
+.container {
+  position: relative;
+  z-index: 1;
+  margin-top: -5vw;
+}
+
+.wrapper {
+  max-width: 1000px;
+  margin: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel {
+  border: 2px solid var(--ifm-font-color-base);
+  border-bottom-width: 4px;
+  padding: 14px;
+  border-radius: 8px;
+  flex: 1;
+  padding-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100px;
+  position: relative;
+}
+
+.title {
+  font-size: 1.2rem;
+  margin-bottom: 0;
+  font-weight: 500;
+  margin-top: -5px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.eventtitle {
+  font-size: 1.2rem;
+  margin-bottom: 0;
+  font-weight: 500;
+  margin-top: -5px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  margin-left: 70px;
+}
+
+.pagetitle {
+  font-size: 5em;
+  text-align: center;
+  font-weight: 900;
+}
+
+@media screen and (max-width: 900px) {
+  .pagetitle {
+    font-size: 3em;
+  }
+}
+
+.button {
+  background-color: var(--ifm-color-primary);
+  border: none;
+  border-radius: 8px;
+  padding: 3px 12px;
+  font-size: 1.1rem;
+  font-weight: 500;
+  cursor: pointer;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: inline-block;
+  text-align: center;
+  border: 2px solid black;
+  border-bottom-width: 4px;
+}
+
+.button:focus {
+  border-bottom-width: 2px;
+}
+
+.calendarbutton {
+  margin-top: -20px;
+  position: relative;
+  color: white;
+}
+
+.button a {
+  color: white;
+  font-family: "GTPlanar";
+  text-decoration: none;
+}
+
+.date {
+  background-color: var(--ifm-color-primary);
+  border: 2px solid black;
+  border-bottom: 3px solid black;
+  color: white;
+  border-radius: 8px;
+  font-family: "GTPlanar";
+  padding: 3px 8px;
+  display: inline;
+  font-weight: bold;
+  position: absolute;
+  margin-left: -20px;
+  margin-top: -8px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 20px;
+  margin-top: 20px;
+  grid-auto-rows: 1fr;
+}
+
+@media screen and (max-width: 900px) {
+  .grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.submitbutton {
+  background-color: var(--ifm-color-primary);
+  color: white;
+  font-family: GTPlanar;
+  border: none;
+  border-radius: 8px;
+  padding: 3px 12px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  display: inline;
+  position: absolute;
+  right: 20px;
+  border: 2px solid black;
+  margin-top: -30px;
+}

packages/docs/src/pages/contact/index.tsx

@@ -0,0 +1,100 @@
+import Layout from "@theme/Layout";
+import React from "react";
+import { PlainButton } from "../../../components/layout/Button";
+import { Spacer } from "../../../components/layout/Spacer";
+import { ContactUsHeader } from "../../components/ContactUsHeader";
+import styles from "./contact.module.css";
+
+import Head from "@docusaurus/Head";
+
+const container: React.CSSProperties = {
+  maxWidth: 1000,
+  margin: "auto",
+  paddingLeft: 16,
+  paddingRight: 16,
+};
+
+export default () => {
+  return (
+    <Layout>
+      <br />
+      <Head>
+        <title>Remotion | Contact</title>
+        <meta name="description" content="Contact Remotion" />
+      </Head>
+      <div style={container}>
+        <br />
+        <ContactUsHeader />
+        <div
+          style={{
+            textAlign: "center",
+            display: "flex",
+            justifyContent: "left",
+          }}
+        >
+          <a
+            style={{
+              textDecoration: "none",
+            }}
+            className={styles.a}
+            target="_blank"
+            href="mailto:hi@remotion.dev"
+          >
+            <PlainButton size="sm" loading={false} fullWidth={false}>
+              Contact via email
+            </PlainButton>
+          </a>
+          <Spacer />
+          <Spacer />
+          <a
+            style={{
+              textDecoration: "none",
+            }}
+            className={styles.a}
+            target="_blank"
+            href="https://cal.com/remotion/evaluate"
+          >
+            <PlainButton size="sm" loading={false} fullWidth={false}>
+              Schedule evaluation call
+            </PlainButton>
+          </a>
+        </div>
+        <br />
+        <h2>Do you need technical support and want to chat?</h2>
+        <p>
+          On Discord, we provide technical support for Remotion. There we can
+          quickly write messages back and forth in a public channel.
+        </p>
+
+        <p>
+          Note: Please read our{" "}
+          <a target="_blank" href="docs/support">
+            Support Policy
+          </a>
+          . {"It's"} important to know that we {"don't"} offer troubleshooting
+          help via DMs on Discord.
+        </p>
+        <div
+          style={{
+            textAlign: "center",
+            display: "flex",
+            justifyContent: "left",
+          }}
+        >
+          <a
+            style={{
+              textDecoration: "none",
+            }}
+            className={styles.a}
+            target="_blank"
+            href="https://remotion.dev/discord"
+          >
+            <PlainButton size="sm" loading={false} fullWidth={false}>
+              Join Discord
+            </PlainButton>
+          </a>
+        </div>
+      </div>
+    </Layout>
+  );
+};