Share your feedback page

src/pages/api/normalize-structured-text/_utils/routes.json

@@ -206,6 +206,9 @@
     "/product",
     "/product-updates",
     "/security",
+    "/share-your-feedback/error",
+    "/share-your-feedback/thanks",
+    "/share-your-feedback",
     "/slack/thanks",
     "/slack",
     "/success-stories",

src/pages/share-your-feedback/_Form/index.tsx

@@ -0,0 +1,101 @@
+import Textarea from 'react-textarea-autosize';
+import s from './style.module.css';
+import { FormReactComponent } from '~/components/form/Form/ReactComponent';
+import { FieldReactComponent } from '~/components/form/Field/ReactComponent';
+import { getCookie } from '~/lib/cookies';
+
+type FormValues = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  jobFunction: string;
+  title: string;
+  body: string;
+  issueType: 'sales' | 'enterprise' | 'feedback';
+};
+
+export function Form({ issueType }: { issueType: 'sales' | 'enterprise' | 'feedback' }) {
+  const defaultValues: FormValues = {
+    firstName: '',
+    lastName: '',
+    email: getCookie('datoAccountEmail') || '',
+    jobFunction: '',
+    title: '',
+    body: '',
+    issueType,
+  };
+
+  return (
+    <div className={s.root}>
+      <FormReactComponent
+        defaultValues={defaultValues}
+        submitLabel="Get in touch"
+        nativeSubmitForm
+        // https://app.frontapp.com/settings/tim:1275912/channels/edit/9473928/settings
+        action="https://webhook.frontapp.com/forms/f51dbf7c0379d350b50e/nzap4XhKrZaOsUgc8z60aWZmDiaXqbcs69ZEcrTnEmrZ9RFy4pLak0OqBcEvkSN-Py6tbtle8KXhPe4X_QgF89gP1Qpl97WhzTQMz8wWQ3hCpUMXJqNtE9056-Av"
+      >
+        <div className={s.formCols}>
+          <FieldReactComponent
+            name="firstName"
+            label="First name"
+            placeholder="Your first name"
+            validations={{ required: 'Required' }}
+          />
+
+          <FieldReactComponent
+            name="lastName"
+            label="Last name"
+            placeholder="Your last name"
+            validations={{ required: 'Required' }}
+          />
+        </div>
+
+        <div className={s.formCols}>
+          <FieldReactComponent
+            name="email"
+            label="Work email"
+            placeholder="Your work email"
+            validations={{
+              required: 'Required',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,20}$/i,
+                message: 'Invalid email',
+              },
+            }}
+          />
+
+          <FieldReactComponent
+            name="jobFunction"
+            label="Job role"
+            validations={{ required: 'Required' }}
+            options={[
+              'Editorial & Content',
+              'Developer/Engineering',
+              'Product & Project',
+              'Sales & Marketing',
+              'Administrative',
+              'Other',
+            ]}
+          />
+        </div>
+
+        <FieldReactComponent
+          name="title"
+          label="Topic"
+          placeholder="Just a title"
+          validations={{ required: 'Required' }}
+        />
+
+        <FieldReactComponent
+          name="body"
+          label="Tell us"
+          placeholder="Your feedback"
+          validations={{ required: 'Required' }}
+          render={({ field }) => <Textarea {...field} placeholder="Your feedback" />}
+        />
+
+        <FieldReactComponent name="issueType" type="hidden" />
+      </FormReactComponent>
+    </div>
+  );
+}

src/pages/share-your-feedback/_Form/style.module.css

@@ -0,0 +1,24 @@
+.root {
+  box-shadow: var(--box-shadow);
+  border-radius: 5px;
+  overflow: hidden;
+  background: var(--light-bg-color);
+}
+
+.formCols {
+  @media (width > 900px) {
+    display: flex;
+
+    > * {
+      flex: 1;
+
+      &:first-child {
+        border-right: 1px solid var(--border-color);
+      }
+    }
+  }
+}
+
+.formCols label[for='referral'] {
+  width: 80%;
+}

src/pages/share-your-feedback/_style.module.css

@@ -0,0 +1,100 @@
+.root {
+  margin: rfs(50px) 0 rfs(100px);
+  position: relative;
+}
+
+.rootInner {
+  @media (width > 900px) {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+}
+
+.intro,
+.picker {
+  flex: 1;
+}
+
+.picker {
+  margin: 0 calc(var(--page-margin) * -0.5);
+  @media (width > 900px) {
+    margin: 0;
+    min-width: 540px;
+  }
+}
+
+.intro {
+  margin-bottom: rfs(70px);
+
+  @media (width > 900px) {
+    margin-right: 70px;
+    margin-bottom: 0;
+  }
+}
+
+.introSub {
+  font-weight: bold;
+  margin-bottom: 30px;
+}
+
+.introTitle {
+  font-family: var(--font-headline);
+  line-height: 1;
+  font-size: rfs(80px);
+  letter-spacing: -0.02em;
+  margin-bottom: 50px;
+  font-weight: bold;
+}
+
+.introKicker {
+  margin-bottom: 20px;
+  font-weight: bold;
+  color: var(--extra-light-body-color);
+  text-transform: uppercase;
+}
+
+.box {
+  color: var(--light-body-color);
+  margin-top: 20px;
+  border: 1px solid var(--border-color);
+  padding: 20px;
+  border-radius: 5px;
+  font-size: 16px;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.inquiries {
+  padding: 0;
+  list-style-type: none;
+
+  li {
+    margin: 0 0 15px 0;
+    padding-right: 30px;
+    position: relative;
+
+    &:before {
+    }
+  }
+}
+
+.inquiry {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.inquiryTitle {
+  font-weight: bold;
+}
+
+.inquiryDesc {
+  font-size: 15px;
+}

src/pages/share-your-feedback/error.astro

@@ -0,0 +1,5 @@
+---
+import { FormResultLayout } from '~/layouts/FormResultLayout';
+---
+
+<FormResultLayout type="failure" kicker="Contact us" />

src/pages/share-your-feedback/index.astro

@@ -0,0 +1,67 @@
+---
+import { Layout } from '~/layouts/Layout';
+import s from './_style.module.css';
+import { Wrapper } from '~/components/Wrapper';
+import { LogosBar } from '~/components/LogosBar';
+import { Form } from './_Form';
+import { Prose } from '~/components/Prose';
+import { Space } from '~/components/Space';
+---
+
+<Layout seo={[]}>
+  <Fragment slot="head">
+    <title>Share your Feedback</title>
+  </Fragment>
+  <div class={s.root}>
+    <Wrapper>
+      <div class={s.rootInner}>
+        <div class={s.intro}>
+          <div class={s.introKicker}>We’d love to hear from you!</div>
+          <div class={s.introTitle}>Share Your Feedback</div>
+          <Prose class={s.introBody}>
+            <p>
+              Whether you have a quick thought to share, an idea for improvement, or want to discuss
+              your experience with DatoCMS, we’re all ears.
+            </p>
+
+            <p>Your insights help us shape the product and make it even better.</p>
+
+            <p>Fill out the form, and we’ll review your feedback as soon as possible.</p>
+
+            <p>
+              <strong>The more details you provide, the more useful your input will be!</strong>
+              {' '}
+              It helps us understand your needs better and reduces the back-and-forth.
+            </p>
+          </Prose>
+
+          <Space top={1}>
+            <p class={s.box}>
+              <strong>Want to chat?</strong> Book a 30-minute call with our designer to share your experience
+              directly. <a href="/">Book a call</a>
+            </p>
+
+            <p class={s.box}>
+              <strong>Want to be part of something bigger?</strong> Join our Research Program, this is
+              the best way to help shape the product.
+              <a href="/research-program">Learn more & sign up</a>
+            </p>
+          </Space>
+        </div>
+        <div class={s.picker}>
+          <Form client:load issueType="feedback" />
+        </div>
+      </div>
+    </Wrapper>
+  </div>
+  <LogosBar
+    title="We power experiences for over half a billion users"
+    clients={[
+      'svg/logos/deutsche-telekom',
+      'svg/logos/hashicorp',
+      'svg/logos/verizon',
+      'svg/logos/polestar',
+      'svg/logos/vercel',
+    ]}
+  />
+</Layout>

src/pages/share-your-feedback/thanks.astro

@@ -0,0 +1,11 @@
+---
+import { FormResultLayout } from '~/layouts/FormResultLayout';
+---
+
+<FormResultLayout type="success" kicker="Contact us">
+  <p>
+    We have successfully received your request, and
+    <strong> you will shortly receive an automated confirmation via email</strong>. Thank you for
+    your interest in DatoCMS!
+  </p>
+</FormResultLayout>