muayjtp/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added contact page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-29 22:12:16 -05:00
parent 5950a15cf5
commit 96647fbf5a
3 changed files with 65 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
donutshop_ecommerce/src/app/about/page.js
View file

@ -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'>

64
donutshop_ecommerce/src/app/contact/page.js Normal file
View file

@ -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

2
donutshop_ecommerce/src/app/globals.css
View file

@ -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 =====*/