feat: Update contact page and navbar (#23)

* feat: Update contact page and navbar

* fix: Apos missing issue

* fix: Use props in contact page

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emailjs/browser": "^3.11.0",
     "@nextui-org/react": "^2.1.13",
     "@sanity/image-url": "^1.0.2",
     "@sanity/vision": "^3.16.7",
@@ -17,8 +18,11 @@
     "framer-motion": "^10.16.4",
     "next": "^13.5.6",
     "next-sanity": "^5.5.4",
+    "next-themes": "^0.2.1",
     "react": "latest",
     "react-dom": "latest",
+    "react-icons": "^4.11.0",
+    "react-toastify": "^9.1.3",
     "sanity": "^3.16.7",
     "styled-components": "5.2"
   },

src/app/about/layout.tsx

@@ -0,0 +1,13 @@
+export default function AboutLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
+			<div className="inline-block max-w-lg text-center justify-center">
+				{children}
+			</div>
+		</section>
+	);
+}

src/app/about/page.tsx

@@ -0,0 +1,7 @@
+export default function AboutPage() {
+  return (
+    <div>
+      <h1 className="text-center text-4xl font-bold">About</h1>
+    </div>
+  );
+}

src/app/blog/layout.tsx

@@ -0,0 +1,13 @@
+export default function BlogLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
+			<div className="inline-block max-w-lg text-center justify-center">
+				{children}
+			</div>
+		</section>
+	);
+}

src/app/blog/page.tsx

@@ -0,0 +1,7 @@
+export default function BlogPage() {
+  return (
+    <div>
+      <h1 className="text-center text-4xl font-bold">Blog</h1>
+    </div>
+  );
+}

src/app/contact/layout.tsx

@@ -0,0 +1,13 @@
+export default function ContactLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className='flex flex-col items-center justify-center gap-4 py-8 md:py-10'>
+      <div className='justify-center inline-block max-w-lg text-center md:max-w-4xl'>
+        {children}
+      </div>
+    </section>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import React, { useRef } from 'react';
+import { motion } from 'framer-motion';
+import { BsArrowRight } from 'react-icons/bs';
+import {
+  HiOutlineMapPin,
+  HiOutlineEnvelope,
+  HiOutlinePhone,
+} from 'react-icons/hi2';
+import { ToastContainer, toast } from 'react-toastify';
+import { fadeIn } from '../../utils/variants';
+import emailjs from '@emailjs/browser';
+import 'react-toastify/dist/ReactToastify.css';
+import Map from '../../components/map';
+import Box from '../../components/box';
+
+export default function ContactPage() {
+  const ref: any = useRef();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const formData = new FormData(ref.current);
+    const requiredFields = ['user_name', 'user_email', 'subject', 'message'];
+    let isFormValid = true;
+
+    requiredFields.forEach((field) => {
+      const value = formData.get(field);
+      if (!value || '') {
+        toast.error(`Please fill in ${field} field.`, {
+          theme: 'dark',
+        });
+        isFormValid = false;
+      }
+    });
+
+    if (!isFormValid) {
+      return;
+    }
+
+    emailjs
+      .sendForm(
+        'service_ap4wbtw',
+        'template_grf4xdq',
+        ref.current,
+        'dStWJXq6rdaw4xHWs'
+      )
+      .then(
+        () => {
+          toast.success('Message sent successfully!', {
+            theme: 'dark',
+          });
+
+          ref.current.reset();
+        },
+        () => {
+          toast.error('Something went wrong!', {
+            theme: 'dark',
+          });
+        }
+      );
+  };
+
+  return (
+    <>
+      <div className='w-full h-full px-6 md:px-0'>
+        <div className='container flex items-center justify-center h-full mx-auto text-center md:py-4 xl:text-left'>
+          <div className='flex flex-col w-full max-w-[700px]'>
+            <motion.h2
+              variants={fadeIn('up', 0.2)}
+              initial='hidden'
+              animate='show'
+              exit='hidden'
+              className='mb-12 text-center text-[32px] md:text-[48px] leading-tight font-semibold'
+            >
+              Let&apos;s <span className='text-[#1E50FF]'>connect.</span>
+            </motion.h2>
+
+            <motion.form
+              ref={ref}
+              variants={fadeIn('up', 0.4)}
+              initial='hidden'
+              animate='show'
+              exit='hidden'
+              onSubmit={handleSubmit}
+              className='flex flex-col flex-1 w-full gap-6 mx-auto'
+            >
+              <div className='flex w-full gap-x-6'>
+                <input
+                  type='text'
+                  name='user_name'
+                  placeholder='Name'
+                  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'
+                />
+                <input
+                  type='email'
+                  name='user_email'
+                  placeholder='Email'
+                  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'
+                />
+              </div>
+              <input
+                type='text'
+                name='subject'
+                placeholder='Subject'
+                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'
+              />
+              <textarea
+                name='message'
+                cols={30}
+                rows={10}
+                placeholder='Message'
+                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'
+              ></textarea>
+              <button
+                type='submit'
+                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'
+              >
+                <span className='group-hover:-translate-y-[120%] group-hover:opacity-0 transition-all duration-500'>
+                  Let&apos;s talk
+                </span>
+                <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]' />
+              </button>
+              <ToastContainer />
+            </motion.form>
+          </div>
+        </div>
+      </div>
+      <div className='flex flex-col gap-8 my-12 lg:flex-row gap-x-48'>
+        <div className='w-full h-full lg:w-1/2'>
+          <Map />
+        </div>
+        <motion.div
+          variants={fadeIn('left', 1)}
+          initial='hidden'
+          animate='show'
+          exit='hidden'
+          className='w-full h-full pt-2 lg:w-1/2'
+        >
+          <Box
+            icon={<HiOutlineMapPin />}
+            name={'Address'}
+            para={'120/5 Vidya Mawatha, Colombo 00700'}
+          />
+          <Box
+            icon={<HiOutlineEnvelope />}
+            name={'Email'}
+            para={'[email protected]'}
+          />
+          <Box icon={<HiOutlinePhone />} name={'Phone'} para={'+94712691003'} />
+        </motion.div>
+      </div>
+    </>
+  );
+}

src/app/events/layout.tsx

@@ -0,0 +1,13 @@
+export default function EventsLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
+			<div className="inline-block max-w-lg text-center justify-center">
+				{children}
+			</div>
+		</section>
+	);
+}

src/app/events/page.tsx

@@ -0,0 +1,7 @@
+export default function EventsPage() {
+  return (
+    <div>
+      <h1 className="text-center text-4xl font-bold">Events</h1>
+    </div>
+  );
+}