From 96647fbf5a884c24586a35eb645928d6b3a0df92 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Wed, 29 May 2024 22:12:16 -0500
Subject: [PATCH] added contact page

---
 donutshop_ecommerce/src/app/about/page.js   |  1 -
 donutshop_ecommerce/src/app/contact/page.js | 64 +++++++++++++++++++++
 donutshop_ecommerce/src/app/globals.css     |  2 +-
 3 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 donutshop_ecommerce/src/app/contact/page.js

diff --git a/donutshop_ecommerce/src/app/about/page.js b/donutshop_ecommerce/src/app/about/page.js
index 417f05c..e9af4a5 100644
--- a/donutshop_ecommerce/src/app/about/page.js
+++ b/donutshop_ecommerce/src/app/about/page.js
@@ -4,7 +4,6 @@ import Footer from '../../components/layout/Footer'
 
 
 const AboutPage = () => {
-  
   return (
     <>
       <div className='w-full h-full lg:h-screen flex flex-col relative'>
diff --git a/donutshop_ecommerce/src/app/contact/page.js b/donutshop_ecommerce/src/app/contact/page.js
new file mode 100644
index 0000000..4134fac
--- /dev/null
+++ b/donutshop_ecommerce/src/app/contact/page.js
@@ -0,0 +1,64 @@
+import Image from 'next/image'
+import React from 'react'
+import Footer from '../../components/layout/Footer'
+
+const ContactPage = () => {
+  return (
+    <>
+        <div className='w-full h-full flex flex-col relative'>
+            <p className='text-center mt-20 uppercase text-[50px] sm:text-[72px] md:text-[90px] lg:text-[125px] xl:text-[140px] leading-none text-black font-extrabold tracking-tighter drop-shadow-[0_3px_3px_rgba(45,45,45,0.5)] px-5'>Contact</p>
+            <div className='bg-[#FAF3E8] w-full h-full rounded-t-3xl -mt-5 sm:-mt-10 px-5 pb-20'>
+                <p className='mt-14 text-center text-sm sm:text-base text-gray-700'>Feel free to use this contact form to reach out to us</p>
+                <p className='text-center text-sm sm:text-base text-gray-700'>Our team is ready for you!</p>
+                <div className='max-w-7xl mx-auto mt-10'>
+                    <div className='grid grid-col-2 md:grid-cols-3 gap-10'>
+                        <div className='col-span-1 md:col-span-2 pr-0 lg:pr-5 xl:pr-20 flex flex-col gap-2'>
+                            <div>
+                                <label className='text-gray-700 font-medium'>Name</label>
+                                <input type='text' className=''/>
+                            </div>
+                            <div>
+                                <label className='text-gray-700 font-medium'>Email</label>
+                                <input type='email' className=''/>
+                            </div>
+                            <div>
+                                <label className='text-gray-700 font-medium'>Phone Number</label>
+                                <input type='text' className=''/>
+                            </div>
+                            <div className='flex flex-col'>
+                                <label className='text-gray-700 font-medium'>Message</label>
+                                <textarea className='outline-none resize-none' rows="5"/>
+                            </div>
+                            <button type='button' className='bg-[#DCA0AE] p-2 rounded-md text-white font-medium'>Send</button>
+                        </div>
+                        <div className=''>
+                            <div className='flex flex-col border-b border-[#DCA0AE] pb-5 mb-5'>
+                                <p className='font-semibold mb-3 text-gray-700'>Snail Mail</p>
+                                <p>148 Terry Lane</p>
+                                <p>Maitland, FL 32751</p>
+                            </div>
+                            <div className='flex flex-col border-b border-[#DCA0AE] pb-5 mb-5'>
+                                <p className='font-semibold mb-3 text-gray-700'>Electronic Mail</p>
+                                <p>puffydough@example.com</p>
+                            </div>
+                            <div className='flex flex-col border-b border-[#DCA0AE] pb-5'>
+                                <p className='font-semibold mb-3 text-gray-700'>Phone Support</p>
+                                <p>Hours: 9am - 5pm (CST), Monday - Friday</p>
+                                <p>321-329-8783</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className='bg-[#FFC55A]'>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+                    <path fill="#FAF3E8" fill-opacity="1" d="M0,64L12,106.7C24,149,48,235,72,229.3C96,224,120,128,144,96C168,64,192,96,216,128C240,160,264,192,288,208C312,224,336,224,360,208C384,192,408,160,432,160C456,160,480,192,504,224C528,256,552,288,576,298.7C600,309,624,299,648,272C672,245,696,203,720,165.3C744,128,768,96,792,106.7C816,117,840,171,864,160C888,149,912,75,936,42.7C960,11,984,21,1008,26.7C1032,32,1056,32,1080,69.3C1104,107,1128,181,1152,202.7C1176,224,1200,192,1224,154.7C1248,117,1272,75,1296,85.3C1320,96,1344,160,1368,186.7C1392,213,1416,203,1428,197.3L1440,192L1440,0L1428,0C1416,0,1392,0,1368,0C1344,0,1320,0,1296,0C1272,0,1248,0,1224,0C1200,0,1176,0,1152,0C1128,0,1104,0,1080,0C1056,0,1032,0,1008,0C984,0,960,0,936,0C912,0,888,0,864,0C840,0,816,0,792,0C768,0,744,0,720,0C696,0,672,0,648,0C624,0,600,0,576,0C552,0,528,0,504,0C480,0,456,0,432,0C408,0,384,0,360,0C336,0,312,0,288,0C264,0,240,0,216,0C192,0,168,0,144,0C120,0,96,0,72,0C48,0,24,0,12,0L0,0Z"></path>
+                </svg>
+            </div>
+        </div>
+        <Footer/>
+    </>
+  )
+}
+
+export default ContactPage
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css
index 52ce4e9..87977f2 100644
--- a/donutshop_ecommerce/src/app/globals.css
+++ b/donutshop_ecommerce/src/app/globals.css
@@ -10,7 +10,7 @@ body{
   overflow-x: hidden;
 }
 /*===== general setup =====*/
-input[type="email"], input[type="password"], input[type="text"], input[type="tel"]{
+input[type="email"], input[type="password"], input[type="text"], input[type="tel"], textarea{
   @apply border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE]
 }
 /*===== strokel =====*/