Merge pull request #51 from juxt/contact-us-page

Contact us page

src/components/ContactUsForm.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'preact/hooks'
+import { useForm } from 'react-hook-form'
+
+const inputProps = {
+  type: 'text',
+  className:
+    'flex-grow-1 bg-gray-50 border border-juxt text-gray-900 text-sm rounded-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-2.5 px-2.5'
+}
+
+export default function ContactUsForm(props) {
+  const {
+    id = "form",
+    subject = "New Contact Us Submission",
+  } = props;
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting, isSubmitSuccessful }
+  } = useForm()
+
+  const [isSubmitError, setIsSubmitError] = useState<boolean>(false)
+
+  function submitContactForm(data) {
+    const json = JSON.stringify(data)
+
+    return fetch('https://api.web3forms.com/submit', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+      },
+      body: json
+    }).catch((error) => {
+      console.error(error)
+      setIsSubmitError(true)
+    })
+  }
+
+  const hasErrors = Object.keys(errors).length > 0
+
+  const isSubmittingComponent = (
+    <div className='md:px-8 text-black text-xl md:text-2xl'>
+      Submitting your form...
+    </div>
+  )
+
+  const isSubmitSuccessfulComponent = (
+    <div className='md:px-8 text-center text-xl md:text-2xl text-juxt'>
+      Thanks for your submission! We'll be in touch shortly.
+    </div>
+  )
+
+  const isSubmitErrorComponent = (
+    <div className='md:px-8 text-xl md:text-2xl text-red-600'>
+      Mmm.. It seems there's a problem.. Anyways, you can reach us directly at <strong>[email protected]</strong>
+    </div>
+  )
+
+  return (
+    <>
+      {isSubmitting ? (
+        isSubmittingComponent
+      ) : isSubmitError ? (
+        isSubmitErrorComponent
+      ) : isSubmitSuccessful ? (
+        isSubmitSuccessfulComponent
+      ) : (
+        <form
+          onSubmit={handleSubmit(submitContactForm)}
+          id={id}
+          className='flex flex-col gap-4'
+        >
+
+          <input
+            type='hidden'
+            {...register('subject')}
+            value={subject}
+          />
+          <input
+            type='hidden'
+            {...register('access_key')}
+            value='c2bf653a-2baa-466d-bbcc-390272663918'
+          />
+
+          <input
+            {...inputProps}
+            {...register('name', { required: true })}
+            placeholder='Name'
+          />
+          <input
+            {...inputProps}
+            {...register('email', { required: true })}
+            placeholder='Email'
+            type='email'
+          />
+          <textarea
+            rows={6}
+            {...inputProps}
+            {...register('description', { required: true })}
+            placeholder='How can we help?'
+          />
+
+          <div className='text-xs'>
+            By submitting your details you agree to JUXT’s{' '}
+            <a href='/privacy-policy' target='_blank' className='underline'>
+              Privacy Policy
+            </a>
+          </div>
+
+          {hasErrors && (
+            <div className='text-red-500'>
+              All fields are required
+            </div>
+          )}
+
+          <button
+            type='submit'
+            className='bg-juxt px-4 py-3 text-white hover:text-zinc-800 font-bold hover:shadow-lg visited:text-white active:text-white text-md rounded-sm'
+          >
+            Send Message &gt;&gt;
+          </button>
+        </form>
+      )}
+    </>
+  )
+}

src/components/Footer.astro

@@ -64,6 +64,12 @@ const pagesInFooter = footer
         >
           Terms of Use
         </a>
+        <a
+          href='/contact'
+          class='text-zinc-300 text-xs font-light underline'
+        >
+          Contact Us
+        </a>
       </div>
     </div>
 

src/data/metadata.json

@@ -21,6 +21,7 @@
     { "label": "Careers", "href": "/careers" },
     { "label": "Blog", "href": "/blog" },
     { "label": "XTDB", "href": "https://xtdb.com/", "target": "_blank" },
+    { "label": "Contact", "href": "/contact" },
     {
       "label": "Free Consultation",
       "href": "/consultation",

src/pages/about.astro

@@ -187,7 +187,7 @@ function imageToFilename(image: string) {
         <div class='flex flex-col gap-4 text-center'>
           <div class='text-3xl font-light'>Phone</div>
           <div class='font-light'>
-            Call us at: +44 (0) 333 93 98 309 <br /> or +1 (332) 867 0718
+            Call us at: <span class='whitespace-nowrap'>+44 (0) 333 93 98 309</span> <br /> or <span class='whitespace-nowrap'>+1 (332) 867 0718</span>
           </div>
         </div>
       </div>

src/pages/contact.astro

@@ -0,0 +1,64 @@
+---
+import { getImage } from 'astro:assets'
+import Banner from '@components/Banner.astro'
+import { LinkIcon } from '@components/Icons'
+import Section from '@components/Section.astro'
+import Layout from '@layouts/Layout.astro'
+import ContactUsForm from '@components/ContactUsForm.tsx'
+
+const bannerPicture = await getImage({
+  src: import('../assets/site/firepit.jpg'),
+  width: 1700,
+  quality: 90,
+  alt: 'contact us banner'
+}).then((img) => img.src)
+
+---
+
+<Layout navbar title='Contact Us'>
+  <main>
+    <Banner
+      text='Contact Us'
+      style={{
+        backgroundImage: `url(${bannerPicture})`
+      }}
+    />
+    <Section className='bg-gray-100 text-black py-12'>
+      <div class="grid grid-cols-5 gap-4">
+        <div class="md:col-span-3 md:order-none order-last col-span-5">
+          <div class="pb-4 text-3xl font-light">
+          Let's Talk
+          </div>
+          <ContactUsForm client:only subject="New Submission from Contact Us page" />
+        </div>
+        <div class="md:col-span-2 grid grid-cols-3 gap-12 col-span-5">
+          <div class='col-span-3 flex flex-col gap-3 text-center'>
+            <div class='text-3xl font-light'>Email</div>
+            <div class='font-light'>
+              For all general enquiries, please email
+              <span class='font-medium'>[email protected]</span>
+            </div>
+          </div>
+          <div class='col-span-3 flex flex-col gap-3 text-center'>
+            <div class='text-3xl font-light'>Home Office</div>
+            <div class='flex flex-col gap-2 font-light leading-none'>
+              <span>Norfolk House</span>
+              <span>Silbury Blvd.</span>
+              <span>Milton Keynes</span>
+              <span>MK9 2AH</span>
+              <span>UK</span>
+            </div>
+          </div>
+          <div class='col-span-3 flex flex-col gap-3 text-center'>
+            <div class='text-3xl font-light'>Phone</div>
+            <div class='font-light'>
+              Call us at: <span class='whitespace-nowrap'>+44 (0) 333 93 98 309</span>
+              <br />
+              or: <span class='whitespace-nowrap'>+1 (332) 867 0718</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  </main>
+</Layout>