|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import React, { useRef } from 'react'; |
| 4 | +import { motion } from 'framer-motion'; |
| 5 | +import { BsArrowRight } from 'react-icons/bs'; |
| 6 | +import { |
| 7 | + HiOutlineMapPin, |
| 8 | + HiOutlineEnvelope, |
| 9 | + HiOutlinePhone, |
| 10 | +} from 'react-icons/hi2'; |
| 11 | +import { ToastContainer, toast } from 'react-toastify'; |
| 12 | +import { fadeIn } from '../../utils/variants'; |
| 13 | +import emailjs from '@emailjs/browser'; |
| 14 | +import 'react-toastify/dist/ReactToastify.css'; |
| 15 | +import Map from '../../components/map'; |
| 16 | +import Box from '../../components/box'; |
| 17 | + |
| 18 | +export default function ContactPage() { |
| 19 | + const ref: any = useRef(); |
| 20 | + |
| 21 | + const handleSubmit = (e: React.FormEvent) => { |
| 22 | + e.preventDefault(); |
| 23 | + |
| 24 | + const formData = new FormData(ref.current); |
| 25 | + const requiredFields = ['user_name', 'user_email', 'subject', 'message']; |
| 26 | + let isFormValid = true; |
| 27 | + |
| 28 | + requiredFields.forEach((field) => { |
| 29 | + const value = formData.get(field); |
| 30 | + if (!value || '') { |
| 31 | + toast.error(`Please fill in ${field} field.`, { |
| 32 | + theme: 'dark', |
| 33 | + }); |
| 34 | + isFormValid = false; |
| 35 | + } |
| 36 | + }); |
| 37 | + |
| 38 | + if (!isFormValid) { |
| 39 | + return; |
| 40 | + } |
| 41 | + |
| 42 | + emailjs |
| 43 | + .sendForm( |
| 44 | + 'service_ap4wbtw', |
| 45 | + 'template_grf4xdq', |
| 46 | + ref.current, |
| 47 | + 'dStWJXq6rdaw4xHWs' |
| 48 | + ) |
| 49 | + .then( |
| 50 | + () => { |
| 51 | + toast.success('Message sent successfully!', { |
| 52 | + theme: 'dark', |
| 53 | + }); |
| 54 | + |
| 55 | + ref.current.reset(); |
| 56 | + }, |
| 57 | + () => { |
| 58 | + toast.error('Something went wrong!', { |
| 59 | + theme: 'dark', |
| 60 | + }); |
| 61 | + } |
| 62 | + ); |
| 63 | + }; |
| 64 | + |
| 65 | + return ( |
| 66 | + <> |
| 67 | + <div className='w-full h-full px-6 md:px-0'> |
| 68 | + <div className='container flex items-center justify-center h-full mx-auto text-center md:py-4 xl:text-left'> |
| 69 | + <div className='flex flex-col w-full max-w-[700px]'> |
| 70 | + <motion.h2 |
| 71 | + variants={fadeIn('up', 0.2)} |
| 72 | + initial='hidden' |
| 73 | + animate='show' |
| 74 | + exit='hidden' |
| 75 | + className='mb-12 text-center text-[32px] md:text-[48px] leading-tight font-semibold' |
| 76 | + > |
| 77 | + Let's <span className='text-[#1E50FF]'>connect.</span> |
| 78 | + </motion.h2> |
| 79 | + |
| 80 | + <motion.form |
| 81 | + ref={ref} |
| 82 | + variants={fadeIn('up', 0.4)} |
| 83 | + initial='hidden' |
| 84 | + animate='show' |
| 85 | + exit='hidden' |
| 86 | + onSubmit={handleSubmit} |
| 87 | + className='flex flex-col flex-1 w-full gap-6 mx-auto' |
| 88 | + > |
| 89 | + <div className='flex w-full gap-x-6'> |
| 90 | + <input |
| 91 | + type='text' |
| 92 | + name='user_name' |
| 93 | + placeholder='Name' |
| 94 | + className='h-[52px] pl-6 rounded-lg w-full bg-transparent border outline-none focus:ring-1 focus:ring-[#1E50FF] border-white/20 placeholder:text-white/30 placeholder:font-light' |
| 95 | + /> |
| 96 | + <input |
| 97 | + type='email' |
| 98 | + name='user_email' |
| 99 | + placeholder='Email' |
| 100 | + className='h-[52px] pl-6 rounded-lg w-full bg-transparent border outline-none focus:ring-1 focus:ring-[#1E50FF] border-white/20 placeholder:text-white/30 placeholder:font-light' |
| 101 | + /> |
| 102 | + </div> |
| 103 | + <input |
| 104 | + type='text' |
| 105 | + name='subject' |
| 106 | + placeholder='Subject' |
| 107 | + className='h-[52px] pl-6 rounded-lg w-full bg-transparent border outline-none focus:ring-1 focus:ring-[#1E50FF] border-white/20 placeholder:text-white/30 placeholder:font-light' |
| 108 | + /> |
| 109 | + <textarea |
| 110 | + name='message' |
| 111 | + cols={30} |
| 112 | + rows={10} |
| 113 | + placeholder='Message' |
| 114 | + className='h-[180px] resize-none p-6 rounded-lg w-full bg-transparent border outline-none focus:ring-1 focus:ring-[#1E50FF] border-white/20 placeholder:text-white/30 placeholder:font-light' |
| 115 | + ></textarea> |
| 116 | + <button |
| 117 | + type='submit' |
| 118 | + className='border rounded-full h-[52px] border-white/50 max-w-[170px] px-8 transition-all duration-300 flex items-center justify-center overflow-hidden hover:border-[#1E50FF] group' |
| 119 | + > |
| 120 | + <span className='group-hover:-translate-y-[120%] group-hover:opacity-0 transition-all duration-500'> |
| 121 | + Let's talk |
| 122 | + </span> |
| 123 | + <BsArrowRight className='-translate-y-[120%] opacity-0 group-hover:flex group-hover:-translate-y-0 group-hover:opacity-100 transition-all duration-300 absolute text-[22px]' /> |
| 124 | + </button> |
| 125 | + <ToastContainer /> |
| 126 | + </motion.form> |
| 127 | + </div> |
| 128 | + </div> |
| 129 | + </div> |
| 130 | + <div className='flex flex-col gap-8 my-12 lg:flex-row gap-x-48'> |
| 131 | + <div className='w-full h-full lg:w-1/2'> |
| 132 | + <Map /> |
| 133 | + </div> |
| 134 | + <motion.div |
| 135 | + variants={fadeIn('left', 1)} |
| 136 | + initial='hidden' |
| 137 | + animate='show' |
| 138 | + exit='hidden' |
| 139 | + className='w-full h-full pt-2 lg:w-1/2' |
| 140 | + > |
| 141 | + <Box |
| 142 | + icon={<HiOutlineMapPin />} |
| 143 | + name={'Address'} |
| 144 | + para={'120/5 Vidya Mawatha, Colombo 00700'} |
| 145 | + /> |
| 146 | + <Box |
| 147 | + icon={<HiOutlineEnvelope />} |
| 148 | + name={'Email'} |
| 149 | + |
| 150 | + /> |
| 151 | + <Box icon={<HiOutlinePhone />} name={'Phone'} para={'+94712691003'} /> |
| 152 | + </motion.div> |
| 153 | + </div> |
| 154 | + </> |
| 155 | + ); |
| 156 | +} |
0 commit comments