Merge pull request #3 from jonerickson/feature/support

Add support page
jonerickson · Dec 13, 2024 · 3d5fec2 · 3d5fec2
2 parents aab4848 + cf1fd0b
commit 3d5fec2
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 16 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -4,15 +4,6 @@ import remarkGfm from 'remark-gfm';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  async redirects() {
-    return [
-      {
-        source: '/support/:path*',
-        destination: '/contact',
-        permanent: true,
-      },
-    ];
-  },
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
   experimental: {
     outputFileTracingIncludes: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.1.0",
+    "lucide-react": "^0.468.0",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "sharp": "0.33.1"

diff --git a/src/app/contact/page.jsx b/src/app/contact/page.jsx
@@ -2,6 +2,7 @@ import { SimpleLayout } from '@/components/SimpleLayout';
 import { ContactUsForm } from '@/components/ContactUsForm';
 import { sendContactFormMessage } from '@/lib/mail';
 import { revalidatePath } from 'next/cache';
+import Link from 'next/link';
 
 export const metadata = {
   title: 'Contact',
@@ -38,6 +39,13 @@ export default function Contact() {
       title='Send us a message.'
       intro='Reach out if you have a question about our services, need support help or just general advice on how to tackle your next project. We are always here to help!'
     >
+      <div className='mb-8 text-sm font-semibold text-zinc-800'>
+        If you are looking for support needs, please first check out our{' '}
+        <Link href='/support' className='underline' target='_blank'>
+          support
+        </Link>{' '}
+        page.
+      </div>
       <ContactUsForm siteKey={siteKey} sendMessage={sendMessage} />
     </SimpleLayout>
   );

diff --git a/src/app/page.jsx b/src/app/page.jsx
@@ -279,9 +279,9 @@ export default async function Home() {
             business shine in a competitive landscape.
           </p>
           <div className='mt-6 flex flex-row gap-2'>
-            <Button href='/contact'>Get started</Button>
-            <Button variant='secondary' href='/contact'>
-              Contact us
+            <Button href='/contact'>Contact us</Button>
+            <Button variant='secondary' href='/support'>
+              Get support
             </Button>
           </div>
           <div className='mt-6 flex gap-6'>

diff --git a/src/app/support/page.jsx b/src/app/support/page.jsx
@@ -0,0 +1,62 @@
+import { SimpleLayout } from '@/components/SimpleLayout';
+import { Mail, Slack, SquarePen } from 'lucide-react';
+import { Button } from '@/components/Button';
+
+export const metadata = {
+  title: 'Support',
+  description: 'Get help on a project or with a service.',
+};
+
+export default function Support() {
+  return (
+    <SimpleLayout
+      title='Get help.'
+      intro="We offer multiple ways to get assistance with our products and services. Please choose one of the options below for support. If you're still unable to find the help you need, feel free to reach out to us via email."
+    >
+      <div className='flex flex-col space-y-8'>
+        <div className=''>
+          <div className='font-bold'>Slack</div>
+          <div className='text-sm text-zinc-600'>
+            Slack offers a collaborative and community-driven space where you
+            can easily ask questions and receive support from both our team and
+            fellow users. It&apos;s often the quickest way to get assistance and
+            fosters a more interactive, support-focused environment.
+          </div>
+        </div>
+        <div className=''>
+          <div className='font-bold'>Email</div>
+          <div className='text-sm text-zinc-600'>
+            For more complex issues or when sensitive information—such as
+            emails, passwords, or login credentials—needs to be securely
+            exchanged, email is the preferred method of communication. It
+            ensures a private and direct channel for resolving your concerns.
+          </div>
+        </div>
+        <div className=''>
+          <div className='font-bold'>Contact Form</div>
+          <div className='text-sm text-zinc-600'>
+            For a faster way to reach our support team, use the contact form to
+            email us directly.
+          </div>
+        </div>
+        <div className='flex flex-row items-center space-x-4'>
+          <Button href='https://slack.deschutesdesigngroup.com' target='_blank'>
+            <Slack className='size-4' />
+            Join Slack
+          </Button>
+          <Button
+            variant='secondary'
+            href='mailto:support@deschutesdesigngroup.com'
+          >
+            <Mail className='size-4' />
+            Email us
+          </Button>
+          <Button variant='secondary' href='/contact'>
+            <SquarePen className='size-4' />
+            Contact form
+          </Button>
+        </div>
+      </div>
+    </SimpleLayout>
+  );
+}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -43,9 +43,7 @@ export function Footer() {
                 >
                   Clients
                 </NavLink>
-                <NavLink href='mailto:support@deschutesdesigngroup.com'>
-                  Support
-                </NavLink>
+                <NavLink href='/support'>Support</NavLink>
                 <NavLink href='/contact'>Contact</NavLink>
               </div>
               <p className='text-sm text-zinc-400 dark:text-zinc-500'>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,4 @@
 const typographyPlugin = require('@tailwindcss/typography');
-
 const typographyStyles = require('./typography');
 
 /** @type {import('tailwindcss').Config} */