├── .gitignore
├── README.md
├── components
    ├── Toast.js
    └── ToastContainer.js
├── context
    └── ToastContext.js
├── hooks
    └── useToast.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── api
    │   └── contact.js
    └── index.js
├── postcss.config.js
├── public
    ├── favicon.ico
    └── vercel.svg
├── styles
    ├── Home.module.css
    └── globals.css
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/components/Toast.js:
--------------------------------------------------------------------------------
  1 | import { useToastDispatchContext } from '../context/ToastContext';
  2 | 
  3 | export default function Toast({ type, message, id }) {
  4 |   const dispatch = useToastDispatchContext();
  5 |   return (
  6 |     <>
  7 |       {type == 'success' && (
  8 |         <div className="rounded-md bg-green-50 p-4 m-3">
  9 |           <div className="flex">
 10 |             <div className="flex-shrink-0">
 11 |               <svg
 12 |                 className="h-5 w-5 text-green-400"
 13 |                 xmlns="http://www.w3.org/2000/svg"
 14 |                 viewBox="0 0 20 20"
 15 |                 fill="currentColor"
 16 |                 aria-hidden="true">
 17 |                 <path
 18 |                   fillRule="evenodd"
 19 |                   d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
 20 |                   clipRule="evenodd"
 21 |                 />
 22 |               </svg>
 23 |             </div>
 24 |             <div className="ml-3">
 25 |               <p className="text-sm font-medium text-green-800">{message}</p>
 26 |             </div>
 27 |             <div className="ml-auto pl-3">
 28 |               <div className="-mx-1.5 -my-1.5">
 29 |                 <button
 30 |                   onClick={() => {
 31 |                     dispatch({ type: 'DELETE_TOAST', id: id });
 32 |                   }}
 33 |                   className="inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600">
 34 |                   <span className="sr-only">Dismiss</span>
 35 | 
 36 |                   <svg
 37 |                     className="h-5 w-5"
 38 |                     xmlns="http://www.w3.org/2000/svg"
 39 |                     viewBox="0 0 20 20"
 40 |                     fill="currentColor"
 41 |                     aria-hidden="true">
 42 |                     <path
 43 |                       fillRule="evenodd"
 44 |                       d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
 45 |                       clipRule="evenodd"
 46 |                     />
 47 |                   </svg>
 48 |                 </button>
 49 |               </div>
 50 |             </div>
 51 |           </div>
 52 |         </div>
 53 |       )}
 54 |       {type == 'error' && (
 55 |         <div className="rounded-md bg-red-100 p-4 m-3">
 56 |           <div className="flex">
 57 |             <div className="flex-shrink-0">
 58 |               <svg
 59 |                 className="h-5 w-5 text-red-500"
 60 |                 xmlns="http://www.w3.org/2000/svg"
 61 |                 viewBox="0 0 20 20"
 62 |                 fill="currentColor"
 63 |                 aria-hidden="true">
 64 |                 <path
 65 |                   fillRule="evenodd"
 66 |                   d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
 67 |                   clipRule="evenodd"
 68 |                 />
 69 |               </svg>
 70 |             </div>
 71 |             <div className="ml-3">
 72 |               <p className="text-sm font-medium text-red-800">{message}</p>
 73 |             </div>
 74 |             <div className="ml-auto pl-3">
 75 |               <div className="-mx-1.5 -my-1.5">
 76 |                 <button
 77 |                   onClick={() => {
 78 |                     dispatch({ type: 'DELETE_TOAST', id: id });
 79 |                   }}
 80 |                   className="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600">
 81 |                   <span className="sr-only">Dismiss</span>
 82 | 
 83 |                   <svg
 84 |                     className="h-5 w-5"
 85 |                     xmlns="http://www.w3.org/2000/svg"
 86 |                     viewBox="0 0 20 20"
 87 |                     fill="currentColor"
 88 |                     aria-hidden="true">
 89 |                     <path
 90 |                       fillRule="evenodd"
 91 |                       d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
 92 |                       clipRule="evenodd"
 93 |                     />
 94 |                   </svg>
 95 |                 </button>
 96 |               </div>
 97 |             </div>
 98 |           </div>
 99 |         </div>
100 |       )}
101 |       {type == 'update' && (
102 |         <div className="rounded-md bg-indigo-50 p-4 m-3">
103 |           <div className="flex">
104 |             <div className="flex-shrink-0">
105 |               <svg
106 |                 className="h-5 w-5 text-indigo-400"
107 |                 xmlns="http://www.w3.org/2000/svg"
108 |                 viewBox="0 0 20 20"
109 |                 fill="currentColor"
110 |                 aria-hidden="true">
111 |                 <path
112 |                   fillRule="evenodd"
113 |                   d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
114 |                   clipRule="evenodd"
115 |                 />
116 |               </svg>
117 |             </div>
118 |             <div className="ml-3">
119 |               <p className="text-sm font-medium text-indigo-800">{message}</p>
120 |             </div>
121 |             <div className="ml-auto pl-3">
122 |               <div className="-mx-1.5 -my-1.5">
123 |                 <button
124 |                   onClick={() => {
125 |                     dispatch({ type: 'DELETE_TOAST', id: id });
126 |                   }}
127 |                   className="inline-flex bg-indigo-50 rounded-md p-1.5 text-indigo-500 hover:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-50 focus:ring-indigo-600">
128 |                   <span className="sr-only">Dismiss</span>
129 | 
130 |                   <svg
131 |                     className="h-5 w-5"
132 |                     xmlns="http://www.w3.org/2000/svg"
133 |                     viewBox="0 0 20 20"
134 |                     fill="currentColor"
135 |                     aria-hidden="true">
136 |                     <path
137 |                       fillRule="evenodd"
138 |                       d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
139 |                       clipRule="evenodd"
140 |                     />
141 |                   </svg>
142 |                 </button>
143 |               </div>
144 |             </div>
145 |           </div>
146 |         </div>
147 |       )}
148 |       {type == 'warning' && (
149 |         <div className="rounded-md bg-yellow-50 p-4 m-3">
150 |           <div className="flex">
151 |             <div className="flex-shrink-0">
152 |               <svg
153 |                 className="h-5 w-5 text-yellow-400"
154 |                 xmlns="http://www.w3.org/2000/svg"
155 |                 viewBox="0 0 20 20"
156 |                 fill="currentColor"
157 |                 aria-hidden="true">
158 |                 <path
159 |                   fillRule="evenodd"
160 |                   d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
161 |                   clipRule="evenodd"
162 |                 />
163 |               </svg>
164 |             </div>
165 |             <div className="ml-3">
166 |               <p className="text-sm font-medium text-yellow-800">{message}</p>
167 |             </div>
168 |             <div className="ml-auto pl-3">
169 |               <div className="-mx-1.5 -my-1.5">
170 |                 <button
171 |                   onClick={() => {
172 |                     dispatch({ type: 'DELETE_TOAST', id: id });
173 |                   }}
174 |                   className="inline-flex bg-yellow-50 rounded-md p-1.5 text-yellow-500 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-yellow-50 focus:ring-yellow-600">
175 |                   <span className="sr-only">Dismiss</span>
176 | 
177 |                   <svg
178 |                     className="h-5 w-5"
179 |                     xmlns="http://www.w3.org/2000/svg"
180 |                     viewBox="0 0 20 20"
181 |                     fill="currentColor"
182 |                     aria-hidden="true">
183 |                     <path
184 |                       fillRule="evenodd"
185 |                       d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
186 |                       clipRule="evenodd"
187 |                     />
188 |                   </svg>
189 |                 </button>
190 |               </div>
191 |             </div>
192 |           </div>
193 |         </div>
194 |       )}
195 |     </>
196 |   );
197 | }
198 | 


--------------------------------------------------------------------------------
/components/ToastContainer.js:
--------------------------------------------------------------------------------
 1 | import Toast from '../components/Toast';
 2 | import { useToastStateContext } from '../context/ToastContext';
 3 | 
 4 | export default function ToastContainer() {
 5 |   const { toasts } = useToastStateContext();
 6 |   return (
 7 |     <div className="absolute bottom-10 w-full z-50">
 8 |       <div className="max-w-xl mx-auto">
 9 |         {toasts &&
10 |           toasts.map((toast) => (
11 |             <Toast
12 |               id={toast.id}
13 |               key={toast.id}
14 |               type={toast.type}
15 |               message={toast.message}
16 |             />
17 |           ))}
18 |       </div>
19 |     </div>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/context/ToastContext.js:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, useReducer } from 'react';
 2 | 
 3 | const ToastStateContext = createContext({ toasts: [] });
 4 | const ToastDispatchContext = createContext(null);
 5 | 
 6 | function ToastReducer(state, action) {
 7 |   switch (action.type) {
 8 |     case 'ADD_TOAST': {
 9 |       return {
10 |         ...state,
11 |         toasts: [...state.toasts, action.toast],
12 |       };
13 |     }
14 |     case 'DELETE_TOAST': {
15 |       const updatedToasts = state.toasts.filter((e) => e.id != action.id);
16 |       return {
17 |         ...state,
18 |         toasts: updatedToasts,
19 |       };
20 |     }
21 |     default: {
22 |       throw new Error('unhandled action type');
23 |     }
24 |   }
25 | }
26 | 
27 | export function ToastProvider({ children }) {
28 |   const [state, dispatch] = useReducer(ToastReducer, {
29 |     toasts: [],
30 |   });
31 |   return (
32 |     <ToastStateContext.Provider value={state}>
33 |       <ToastDispatchContext.Provider value={dispatch}>
34 |         {children}
35 |       </ToastDispatchContext.Provider>
36 |     </ToastStateContext.Provider>
37 |   );
38 | }
39 | 
40 | export const useToastDispatchContext = () => useContext(ToastDispatchContext);
41 | export const useToastStateContext = () => useContext(ToastStateContext);
42 | 


--------------------------------------------------------------------------------
/hooks/useToast.js:
--------------------------------------------------------------------------------
 1 | import { useToastDispatchContext } from '../context/ToastContext';
 2 | 
 3 | export function useToast() {
 4 |   const dispatch = useToastDispatchContext();
 5 | 
 6 |   function toast(type, message) {
 7 |     const id = Math.random().toString(36).substr(2, 9);
 8 |     dispatch({ type: 'ADD_TOAST', toast: { type, message, id } });
 9 | 
10 |     setTimeout(() => {
11 |       dispatch({ type: 'DELETE_TOAST', id: id });
12 |     }, 4000);
13 |   }
14 | 
15 |   return toast;
16 | }
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "forms",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "next": "10.0.7",
13 |     "nodemailer": "^6.4.18",
14 |     "react": "17.0.1",
15 |     "react-dom": "17.0.1",
16 |     "react-hook-form": "^6.15.3"
17 |   },
18 |   "devDependencies": {
19 |     "autoprefixer": "^10.2.4",
20 |     "postcss": "^8.2.6",
21 |     "tailwindcss": "^2.0.3"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import 'tailwindcss/tailwind.css';
 2 | import ToastContainer from '../components/ToastContainer';
 3 | import { ToastProvider } from '../context/ToastContext';
 4 | function MyApp({ Component, pageProps }) {
 5 |   return (
 6 |     <div>
 7 |       <ToastProvider>
 8 |         <Component {...pageProps} />
 9 |         <ToastContainer />
10 |       </ToastProvider>
11 |     </div>
12 |   );
13 | }
14 | 
15 | export default MyApp;
16 | 


--------------------------------------------------------------------------------
/pages/api/contact.js:
--------------------------------------------------------------------------------
 1 | import nodemailer from 'nodemailer';
 2 | export default async (req, res) => {
 3 |   const { name, email, message, phone } = req.body;
 4 | 
 5 |   const transporter = nodemailer.createTransport({
 6 |     host: 'smtp.gmail.com',
 7 |     port: 465,
 8 |     secure: true,
 9 |     auth: {
10 |       user: process.env.user,
11 |       pass: process.env.pass,
12 |     },
13 |   });
14 | 
15 |   try {
16 |     // const emailRes = await transporter.sendMail({
17 |     //   from: email,
18 |     //   to: 'adaamr@gmail.com',
19 |     //   subject: `Contact form submission from ${name}`,
20 |     //   html: `<p>You have a new contact form submission</p><br>
21 |     //   <p><strong>Name: </strong> ${name} </p><br>
22 |     //   <p><strong>Phone: </strong> ${phone} </p><br>
23 |     //   <p><strong>Message: </strong> ${message} </p><br>
24 | 
25 |     //   `,
26 |     // });
27 | 
28 |     console.log('Message Sent');
29 |   } catch (err) {
30 |     console.log(err);
31 |   }
32 | 
33 |   res.status(200).json(req.body);
34 | };
35 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import { useForm } from 'react-hook-form';
  2 | import axios from 'axios';
  3 | import { useRouter } from 'next/router';
  4 | import { useToast } from '../hooks/useToast';
  5 | 
  6 | export default function Home() {
  7 |   const toast = useToast();
  8 |   const { register, handleSubmit, errors, reset } = useForm();
  9 |   const router = useRouter();
 10 |   async function onSubmitForm(values) {
 11 |     let config = {
 12 |       method: 'post',
 13 |       url: `${process.env.NEXT_PUBLIC_API_URL}/api/contact`,
 14 |       headers: {
 15 |         'Content-Type': 'application/json',
 16 |       },
 17 |       data: values,
 18 |     };
 19 | 
 20 |     try {
 21 |       const response = await axios(config);
 22 |       console.log(response);
 23 |       if (response.status == 200) {
 24 |         reset();
 25 |         toast(
 26 |           'success',
 27 |           'Thank you for contacting us, we will be in touch soon.'
 28 |         );
 29 |       }
 30 |     } catch (err) {}
 31 |   }
 32 | 
 33 |   return (
 34 |     <div className="b py-16 bg-gray-50 px-4 sm:px-6 h-screen w-screen flex justify-center items-center">
 35 |       <div className="mx-auto w-full max-w-2xl rounded-xl bg-white p-8 shadow">
 36 |         <form
 37 |           onSubmit={handleSubmit(onSubmitForm)}
 38 |           className="grid grid-cols-1 gap-y-6">
 39 |           <div>
 40 |             <label for="name" className="sr-only">
 41 |               Full name
 42 |             </label>
 43 |             <input
 44 |               type="text"
 45 |               name="name"
 46 |               ref={register({
 47 |                 required: {
 48 |                   value: true,
 49 |                   message: 'You must enter your name',
 50 |                 },
 51 |               })}
 52 |               className={`block w-full shadow py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md focus:outline-none focus:ring-2 ${
 53 |                 errors.name ? 'ring-2 ring-red-500' : null
 54 |               }`}
 55 |               placeholder="Full name"
 56 |             />
 57 |             <span className="text-red-400 text-sm py-2">
 58 |               {errors?.name?.message}
 59 |             </span>
 60 |           </div>
 61 |           <div>
 62 |             <label for="email" className="sr-only">
 63 |               Email
 64 |             </label>
 65 |             <input
 66 |               name="email"
 67 |               type="text"
 68 |               ref={register({
 69 |                 required: {
 70 |                   value: true,
 71 |                   message: 'You must enter your email address',
 72 |                 },
 73 |                 minLength: {
 74 |                   value: 8,
 75 |                   message: 'This is not long enough to be an email',
 76 |                 },
 77 |                 maxLength: {
 78 |                   value: 120,
 79 |                   message: 'This is too long',
 80 |                 },
 81 |                 pattern: {
 82 |                   value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
 83 |                   message: 'This needs to be a valid email address',
 84 |                 },
 85 |               })}
 86 |               className={`block w-full shadow py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md focus:outline-none focus:ring-2 ${
 87 |                 errors.email ? 'ring-2 ring-red-500' : null
 88 |               }`}
 89 |               placeholder="Email"
 90 |             />
 91 |             <span className="text-red-400 text-sm py-2">
 92 |               {errors?.email?.message}
 93 |             </span>
 94 |           </div>
 95 |           <div>
 96 |             <label for="phone" className="sr-only">
 97 |               Phone
 98 |             </label>
 99 |             <input
100 |               type="text"
101 |               name="phone"
102 |               ref={register}
103 |               className="block w-full shadow py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md focus:outline-none focus:ring-2"
104 |               placeholder="Phone"
105 |             />
106 |           </div>
107 |           <div>
108 |             <label for="message" className="sr-only">
109 |               Message
110 |             </label>
111 |             <textarea
112 |               name="message"
113 |               rows="4"
114 |               ref={register({
115 |                 required: {
116 |                   value: true,
117 |                   message: 'You need to enter your message',
118 |                 },
119 |                 maxLength: {
120 |                   value: 1000,
121 |                   message: "Your message can't be more than 1000 characters",
122 |                 },
123 |                 minLength: {
124 |                   value: 50,
125 |                   message: 'Your message must be longer than this!',
126 |                 },
127 |               })}
128 |               className={`block w-full shadow py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md focus:outline-none focus:ring-2 ${
129 |                 errors.message ? 'ring-2 ring-red-500' : null
130 |               }`}
131 |               placeholder="Message"></textarea>
132 |             <span className="text-red-400 text-sm py-2">
133 |               {errors?.message?.message}
134 |             </span>
135 |           </div>
136 |           <div>
137 |             <button
138 |               type="submit"
139 |               className="inline-flex justify-center py-3 px-6 border border-transparent shadow text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
140 |               Submit
141 |             </button>
142 |           </div>
143 |         </form>
144 |       </div>
145 |     </div>
146 |   );
147 | }
148 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adamrichardson14/forms/7f259f5cf0d416d11292a25997eaa23194a6ce2b/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   min-height: 100vh;
  3 |   padding: 0 0.5rem;
  4 |   display: flex;
  5 |   flex-direction: column;
  6 |   justify-content: center;
  7 |   align-items: center;
  8 | }
  9 | 
 10 | .main {
 11 |   padding: 5rem 0;
 12 |   flex: 1;
 13 |   display: flex;
 14 |   flex-direction: column;
 15 |   justify-content: center;
 16 |   align-items: center;
 17 | }
 18 | 
 19 | .footer {
 20 |   width: 100%;
 21 |   height: 100px;
 22 |   border-top: 1px solid #eaeaea;
 23 |   display: flex;
 24 |   justify-content: center;
 25 |   align-items: center;
 26 | }
 27 | 
 28 | .footer img {
 29 |   margin-left: 0.5rem;
 30 | }
 31 | 
 32 | .footer a {
 33 |   display: flex;
 34 |   justify-content: center;
 35 |   align-items: center;
 36 | }
 37 | 
 38 | .title a {
 39 |   color: #0070f3;
 40 |   text-decoration: none;
 41 | }
 42 | 
 43 | .title a:hover,
 44 | .title a:focus,
 45 | .title a:active {
 46 |   text-decoration: underline;
 47 | }
 48 | 
 49 | .title {
 50 |   margin: 0;
 51 |   line-height: 1.15;
 52 |   font-size: 4rem;
 53 | }
 54 | 
 55 | .title,
 56 | .description {
 57 |   text-align: center;
 58 | }
 59 | 
 60 | .description {
 61 |   line-height: 1.5;
 62 |   font-size: 1.5rem;
 63 | }
 64 | 
 65 | .code {
 66 |   background: #fafafa;
 67 |   border-radius: 5px;
 68 |   padding: 0.75rem;
 69 |   font-size: 1.1rem;
 70 |   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 71 |     Bitstream Vera Sans Mono, Courier New, monospace;
 72 | }
 73 | 
 74 | .grid {
 75 |   display: flex;
 76 |   align-items: center;
 77 |   justify-content: center;
 78 |   flex-wrap: wrap;
 79 |   max-width: 800px;
 80 |   margin-top: 3rem;
 81 | }
 82 | 
 83 | .card {
 84 |   margin: 1rem;
 85 |   flex-basis: 45%;
 86 |   padding: 1.5rem;
 87 |   text-align: left;
 88 |   color: inherit;
 89 |   text-decoration: none;
 90 |   border: 1px solid #eaeaea;
 91 |   border-radius: 10px;
 92 |   transition: color 0.15s ease, border-color 0.15s ease;
 93 | }
 94 | 
 95 | .card:hover,
 96 | .card:focus,
 97 | .card:active {
 98 |   color: #0070f3;
 99 |   border-color: #0070f3;
100 | }
101 | 
102 | .card h3 {
103 |   margin: 0 0 1rem 0;
104 |   font-size: 1.5rem;
105 | }
106 | 
107 | .card p {
108 |   margin: 0;
109 |   font-size: 1.25rem;
110 |   line-height: 1.5;
111 | }
112 | 
113 | .logo {
114 |   height: 1em;
115 | }
116 | 
117 | @media (max-width: 600px) {
118 |   .grid {
119 |     width: 100%;
120 |     flex-direction: column;
121 |   }
122 | }
123 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 6 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 | }
 8 | 
 9 | a {
10 |   color: inherit;
11 |   text-decoration: none;
12 | }
13 | 
14 | * {
15 |   box-sizing: border-box;
16 | }
17 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: [],
 3 |   darkMode: false, // or 'media' or 'class'
 4 |   theme: {
 5 |     extend: {},
 6 |   },
 7 |   variants: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | }
12 | 


--------------------------------------------------------------------------------