From da5954217c8343a72cb1128496f697cf80441a12 Mon Sep 17 00:00:00 2001
From: Yash Suthar <yashsuthar0309@gmail.com>
Date: Wed, 22 Jan 2025 01:11:16 +0530
Subject: [PATCH 1/2] fixed contact us page design #45

Co-authored-by: Abhishek Kumar <Code-With-Abhishek-Kumar@users.noreply.github.com>
---
 src/components/ContactUs.jsx | 68 +++++++++++-------------------------
 src/components/Footer.jsx    | 10 +++---
 2 files changed, 25 insertions(+), 53 deletions(-)

diff --git a/src/components/ContactUs.jsx b/src/components/ContactUs.jsx
index 2a0ffa8..8f9ee33 100644
--- a/src/components/ContactUs.jsx
+++ b/src/components/ContactUs.jsx
@@ -44,41 +44,27 @@ const ContactUs = () => {
 
 
   return (
-    <div className='Form_Container flex  bg-[#d7d7d719] my-[2vh] max-[550px]:pt-[20%] px-[3vw] justify-between max-[823px]:flex-col items-center pt-[12vh] pb-[7vh]'>
-      <div className='Container_Left w-[38%] max-[823px]:w-[93vw] p-2 text-[#333333] text-wrap '>
+    <div className='Form_Container flex bg-[#d7d7d719] my-[2vh] max-[550px]:pt-[10%] px-[3vw] justify-between max-[823px]:flex-col items-center pt-[5vh] pb-[7vh]'>
+      <div className='Container_Left w-[35%] max-[823px]:w-[93vw] p-2 text-[#333333] text-wrap'>
         <h1 className='text-[2.6vw] max-[410px]:text-[8vw] max-[823px]:text-[4vw] font-semibold'>
           About Us
         </h1>
-        <p className='text-[0.9vw] max-[410px]:text-[2.5vw]   max-[823px]:text-[2.2vw] font-medium'>
-          Welcome to [Institute Name],
-          an institution dedicated to
-          fostering innovation,
-          knowledge, and personal
-          growth. Our mission is to
-          shape tomorrow’s leaders by
-          offering exceptional
-          educational opportunities and
-          encouraging intellectual
-          exploration.
+        <p className='text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] font-medium'>
+          Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. Our mission is to shape tomorrow’s leaders by offering exceptional educational opportunities and encouraging intellectual exploration.
         </p>
 
-        <h2 className='font-semibold text-[1.5vw] max-[410px]:text-[5vw]  max-[823px]:text-[3vw]  mt-[.8rem] mb-[.5rem]'>
+        <h2 className='font-semibold text-[1.5vw] max-[410px]:text-[5vw] max-[823px]:text-[3vw] mt-[.8rem] mb-[.5rem]'>
           Location
         </h2>
-        <p className='text-[0.9vw]  max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw]  font-medium'>
-          Welcome to [Institute Name],
-          an institution dedicated to
-          fostering innovation,
-          knowledge, and personal
-          growth. O
+        <p className='text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] font-medium'>
+          Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth.
         </p>
 
-        <h2 className='font-semibold text-[1.5vw] max-[410px]:text-[5vw] max-[823px]:text-[3vw]  mt-[.8rem] mb-[.5rem]'>
+        <h2 className='font-semibold text-[1.5vw] max-[410px]:text-[5vw] max-[823px]:text-[3vw] mt-[.8rem] mb-[.5rem]'>
           Our Principle
         </h2>
         <p className='text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] font-medium'>
-          Muhammad Muneeb and vice
-          Principle Sammer Khan
+          Muhammad Muneeb and vice Principle Sammer Khan
         </p>
 
         <h2 className='font-semibold text-[1.5vw] max-[410px]:text-[5vw] max-[823px]:text-[3vw] mt-[.8rem] mb-[.5rem]'>
@@ -96,43 +82,31 @@ const ContactUs = () => {
         </div>
       </div>
 
-      <div className='Container_Right bg-white rounded-3xl w-[40vw] max-[1179px]:w-[48vw] max-[822px]:w-[90vw]  h-fit p-[2vw] max-[410px]:text-[4.5vw] max-[823px]:p-[4vw] text-[#333333] border-[1.1px] border-[#D7D7D7] shadow-lg shadow-gray-300 mt-[7vh]'>
+      <div className='Container_Right bg-white rounded-3xl w-[38vw] max-[1179px]:w-[48vw] max-[822px]:w-[90vw] h-fit p-[2vw] max-[410px]:text-[4.5vw] max-[823px]:p-[4vw] text-[#333333] border-[1.1px] border-[#D7D7D7] shadow-lg shadow-gray-300 mt-[5vh] ml-[2vw]'>
         <h1 className='text-[1.3vw] max-[410px]:text-[4.5vw] max-[823px]:text-[3.5vw] font-semibold'>
           Feel free to ask any query
         </h1>
-        <p className='text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw]  mt-1 mb-[1vw] font-medium w-[85%]'>
-          
-          Welcome to [Institute Name],
-          an institution dedicated to
-          fostering innovation,
-          knowledge, and personal
-          growth.
+        <p className='text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] mt-1 mb-[1vw] font-medium w-[85%]'>
+          Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth.
         </p>
-        <form
-          className='form flex flex-col gap-[1vh]'
-          onSubmit={handleSubmit(onSubmit)}
-        >
-        
-    
-
+        <form className='form flex flex-col gap-[1vh]' onSubmit={handleSubmit(onSubmit)}>
           {errors.cName && <p className='text-red-800 -mb-4'>{errors.cName.message}</p>}
           <input
             type='text'
             {...register('cName')}
-            className='peer w-full py-1 text-[0.9vw]  max-[410px]:text-[3vw] max-[830px]:text-[2.5vw] mt-[2vh] border-b focus:outline-none transition ease-linear focus:border-[#333333] border-gray-300 shadow-sm'
+            className='peer w-full py-1 text-[0.9vw] max-[410px]:text-[3vw] max-[830px]:text-[2.5vw] mt-[2vh] border-b focus:outline-none transition ease-linear focus:border-[#333333] border-gray-300 shadow-sm'
             placeholder='Name:'
           />
 
-            {errors.cEmail && <p className='text-red-800 -mb-4'>{errors.cEmail.message}</p>}
+          {errors.cEmail && <p className='text-red-800 -mb-4'>{errors.cEmail.message}</p>}
           <input
             type='email'
             {...register('cEmail')}
-            className='border-b p-1 max-[410px]:text-[3vw] w-full border-[#A0A0A0] my-10 focus:outline-none text-[0.9vw] max-[830px]:text-[2.5vw]'
+            className='border-b p-1 max-[410px]:text-[3vw] w-full border-[#A0A0A0] my-6 focus:outline-none text-[0.9vw] max-[830px]:text-[2.5vw]'
             placeholder='Email:'
           />
 
-
-{errors.cNumber && <p className='text-red-800 -mb-4'>{errors.cNumber.message}</p>}
+          {errors.cNumber && <p className='text-red-800 -mb-4'>{errors.cNumber.message}</p>}
           <input
             type='text'
             {...register('cNumber')}
@@ -140,16 +114,14 @@ const ContactUs = () => {
             placeholder='Phone Number:'
           />
 
-  {errors.cMessage && <p className='text-red-800 -mb-4'>{errors.cMessage.message}</p>}
-
+          {errors.cMessage && <p className='text-red-800 -mb-4'>{errors.cMessage.message}</p>}
           <textarea
             {...register('cMessage')}
-            className='p-4 bg-[#F9F9F9] text-[0.9vw] max-[410px]:text-[3vw] max-[830px]:text-[2.5vw] outline-none w-full h-[15vh] rounded-lg my-[2vw] border border-[#D7D7D7]'
+            className='p-4 bg-[#F9F9F9] text-[0.9vw] max-[410px]:text-[3vw] max-[830px]:text-[2.5vw] outline-none w-full h-[8vh] rounded-lg my-[2vw] border border-[#D7D7D7]'
             placeholder='Message:'
-            id=''
           ></textarea>
 
-          <button className='text-center bg-[#333333] w-full text-white py-3 text-[1.2vw] max-[830px]:text-[3vw] rounded-lg'>
+          <button className='text-center bg-[#333333] w-full text-white py-2 text-[1.2vw] max-[830px]:text-[3vw] rounded-lg'>
             Submit
           </button>
         </form>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index a3299a2..a7f44e1 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 const Footer = () => {
   return (
     <footer className='w-full flex items-center justify-between p-10 max-[999px]:flex-col'>
-      <div className='left w-[60%] max-[599px]:pb-10 max-[999px]:w-full h-full flex items-start max-[999px]:items-center justify-center flex-col gap-4'>
+      <div className='left w-[50%] max-[599px]:pb-10 max-[999px]:w-full h-full flex items-start max-[999px]:items-center justify-center flex-col gap-4'>
         <Link to='/'>
           <img src={logo} alt='' />
         </Link>
@@ -16,8 +16,8 @@ const Footer = () => {
         </p>
       </div>
 
-      <div className='right w-[40%] max-[999px]:w-full h-full flex items-center justify-center gap-10 flex-wrap'>
-        <div className='flex max-[599px]:w-[40%] items-center justify-between flex-col gap-4'>
+      <div className='right w-[50%] max-[999px]:w-full h-full flex items-center justify-center gap-10 flex-wrap'>
+        <div className='flex max-[599px]:w-[25%] items-center justify-evenly flex-col gap-4 mb-4 mx-8'>
           <p className='text-[1vw] max-[599px]:text-[4.5vw] text-[#333] font-bold'>
             Navigation
           </p>
@@ -52,7 +52,7 @@ const Footer = () => {
             Contact Us
           </Link>
         </div>
-        <div className='flex max-[599px]:w-[45%] items-center justify-between flex-col gap-4 text-center'>
+        <div className='flex max-[599px]:w-[45%] mx-0 items-center justify-between flex-col gap-4 text-center mb-4'>
           <p className='text-[1vw] text-[#333] font-bold max-[599px]:text-[4.5vw]'>
             Important Links
           </p>
@@ -87,7 +87,7 @@ const Footer = () => {
             Support
           </Link>
         </div>
-        <div className='flex max-[599px]:w-full items-center justify-between flex-col gap-4'>
+        <div className='flex max-[599px]:w-full items-center justify-between flex-col gap-4 mb-4 mx-8'>
           <p className='text-[1vw] text-[#333] font-bold max-[599px]:text-[4.5vw]'>
             Social Media
           </p>

From a70d161623e17bd2516cf98287e0bf9372d41503 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek9661342993@gmail.com>
Date: Wed, 22 Jan 2025 12:30:15 +0530
Subject: [PATCH 2/2] feat: integrate SweetAlert2 for form submission feedback
 and add Contact API endpoint

- Install SweetAlert2
- Install axios
- Setup SweetAlert2 and axios
- Make a Post Request to The Server When User Fill the Contact Form
- Style Form Error Paragraph
---
 package-lock.json            |  11 +++
 package.json                 |   1 +
 src/components/ContactUs.jsx | 141 ++++++++++++++++++++++++++++-------
 src/utils/constants.js       |   1 +
 vite.config.js               |   4 +-
 5 files changed, 129 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b3d7a03..850fcc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react-router-dom": "^7.0.2",
         "react-slick": "^0.30.3",
         "slick-carousel": "^1.8.1",
+        "sweetalert2": "^11.15.10",
         "swiper": "^11.2.1",
         "yup": "^1.6.1"
       },
@@ -5437,6 +5438,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.15.10",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.15.10.tgz",
+      "integrity": "sha512-Sjiwcd5mWiz8X0JFkHsso2EPVQHrLCjVv+xR6Ry2LKf4KY6kSi4U5pM0Tgmn1c7SMfkyDqPal2NWqwj6vck8bw==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/swiper": {
       "version": "11.2.1",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.1.tgz",
diff --git a/package.json b/package.json
index 86d4a7c..a8b8971 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "react-router-dom": "^7.0.2",
     "react-slick": "^0.30.3",
     "slick-carousel": "^1.8.1",
+    "sweetalert2": "^11.15.10",
     "swiper": "^11.2.1",
     "yup": "^1.6.1"
   },
diff --git a/src/components/ContactUs.jsx b/src/components/ContactUs.jsx
index 2a0ffa8..18f7cf4 100644
--- a/src/components/ContactUs.jsx
+++ b/src/components/ContactUs.jsx
@@ -1,30 +1,53 @@
-import React from 'react';
+import Swal from 'sweetalert2';
+import axios from 'axios';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
+import { Contact_EndPoint } from '../utils/constants';
 
 const ContactUs = () => {
   const Form_schema = yup
     .object({
       cName: yup
         .string()
-        .min(5, 'Name must be at least 5 characters')
+        .min(
+          5,
+          'Name must be at least 5 characters',
+        )
         .required('Name is required'),
       cEmail: yup
         .string()
-        .email('Enter a valid email address')
+        .email(
+          'Enter a valid email address',
+        )
         .required('Email is required'),
       cNumber: yup
         .number()
-        .typeError('Phone number must be a number')
-        .positive('Phone number must be positive')
-        .integer('Phone number must be an integer')
-        .required('Phone number is required'),
+        .typeError(
+          'Phone number must be a number',
+        )
+        .positive(
+          'Phone number must be positive',
+        )
+        .integer(
+          'Phone number must be an integer',
+        )
+        .required(
+          'Phone number is required',
+        ),
       cMessage: yup
         .string()
-        .min(10, 'Message must be at least 10 characters')
-        .max(100, 'Message must be less than 100 characters')
-        .required('Message is required'),
+        .min(
+          10,
+          'Message must be at least 10 characters',
+        )
+        .max(
+          100,
+          'Message must be less than 100 characters',
+        )
+        .required(
+          'Message is required',
+        ),
     })
     .required();
 
@@ -36,13 +59,54 @@ const ContactUs = () => {
     resolver: yupResolver(Form_schema),
   });
 
-  let onSubmit = (data) => {
-
+  let onSubmit = async data => {
     console.log('data', data);
+    try {
+      let response = await axios.post(
+        Contact_EndPoint,
+        data,
+      );
+
+      if (response.data.message) {
+        Swal.fire({
+          icon: 'success',
+          title: 'Success',
+          text: response.data.message,
+        });
+      }
+      // if(response)
+
+      if (response.data.error) {
+        Swal.fire({
+          icon: 'error',
+          title: 'Oops...',
+          text: response.data.message,
+        });
+      }
+
+      console.log('response', response);
+    } catch (error) {
+      if (
+        error.response.error ||
+        error
+      ) {
+        Swal.fire({
+          icon: 'error',
+          title: 'Oops...',
+          text: error.message
+            ? error.response.data
+                .message
+            : 'Something went wrong!',
+        });
+      }
+      console.error('error', error);
+      console.error(
+        'error response',
+        error.response.message,
+      );
+    }
   };
 
-
-
   return (
     <div className='Form_Container flex  bg-[#d7d7d719] my-[2vh] max-[550px]:pt-[20%] px-[3vw] justify-between max-[823px]:flex-col items-center pt-[12vh] pb-[7vh]'>
       <div className='Container_Left w-[38%] max-[823px]:w-[93vw] p-2 text-[#333333] text-wrap '>
@@ -96,12 +160,11 @@ const ContactUs = () => {
         </div>
       </div>
 
-      <div className='Container_Right bg-white rounded-3xl w-[40vw] max-[1179px]:w-[48vw] max-[822px]:w-[90vw]  h-fit p-[2vw] max-[410px]:text-[4.5vw] max-[823px]:p-[4vw] text-[#333333] border-[1.1px] border-[#D7D7D7] shadow-lg shadow-gray-300 mt-[7vh]'>
+      <div className='Container_Right bg-white rounded-[2.5vw] w-[40vw] max-[1179px]:w-[48vw] max-[822px]:w-[90vw]  h-fit p-[2vw] max-[410px]:text-[4.5vw] max-[823px]:p-[4vw] text-[#333333] border-[1.1px] border-[#D7D7D7] shadow-lg shadow-gray-300 mt-[7vh]'>
         <h1 className='text-[1.3vw] max-[410px]:text-[4.5vw] max-[823px]:text-[3.5vw] font-semibold'>
           Feel free to ask any query
         </h1>
         <p className='text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw]  mt-1 mb-[1vw] font-medium w-[85%]'>
-          
           Welcome to [Institute Name],
           an institution dedicated to
           fostering innovation,
@@ -110,37 +173,59 @@ const ContactUs = () => {
         </p>
         <form
           className='form flex flex-col gap-[1vh]'
-          onSubmit={handleSubmit(onSubmit)}
+          onSubmit={handleSubmit(
+            onSubmit,
+          )}
         >
-        
-    
-
-          {errors.cName && <p className='text-red-800 -mb-4'>{errors.cName.message}</p>}
+          {errors.cName && (
+            <p className='text-red-800 -mb-4 text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] font-bold'>
+              {errors.cName.message}
+            </p>
+          )}
           <input
             type='text'
             {...register('cName')}
-            className='peer w-full py-1 text-[0.9vw]  max-[410px]:text-[3vw] max-[830px]:text-[2.5vw] mt-[2vh] border-b focus:outline-none transition ease-linear focus:border-[#333333] border-gray-300 shadow-sm'
+            className='peer w-full py-1 text-[0.9vw]  max-[410px]:text-[3vw] max-[830px]:text-[2.5vw] my-[2vh] border-b focus:outline-none transition ease-linear focus:border-[#333333] border-gray-300 shadow-sm'
             placeholder='Name:'
           />
 
-            {errors.cEmail && <p className='text-red-800 -mb-4'>{errors.cEmail.message}</p>}
+          {errors.cEmail && (
+            <p className='text-red-800 mt-[1vh] text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] font-bold'>
+              {errors.cEmail.message}
+            </p>
+          )}
           <input
             type='email'
             {...register('cEmail')}
-            className='border-b p-1 max-[410px]:text-[3vw] w-full border-[#A0A0A0] my-10 focus:outline-none text-[0.9vw] max-[830px]:text-[2.5vw]'
+            className='border-b p-1 max-[410px]:text-[3vw] w-full border-[#A0A0A0] mb-[2.5vh] focus:outline-none text-[0.9vw] max-[830px]:text-[2.5vw]'
             placeholder='Email:'
           />
 
-
-{errors.cNumber && <p className='text-red-800 -mb-4'>{errors.cNumber.message}</p>}
+          {errors.cNumber && (
+            <p className='text-red-800  text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] font-bold'>
+              {errors.cNumber.message}
+            </p>
+          )}
           <input
             type='text'
             {...register('cNumber')}
-            className='border-b p-1 max-[410px]:text-[3vw] text-[0.9vw] max-[830px]:text-[2.5vw] w-full border-[#A0A0A0] focus:outline-none'
+            onInput={e => {
+              let value =
+                e.target.value;
+              if (isNaN(value)) {
+                e.target.value =
+                  value.slice(0, -1);
+              }
+            }}
+            className='border-b p-1 max-[410px]:text-[3vw] text-[0.9vw] mb-[1vh] max-[830px]:text-[2.5vw] w-full border-[#A0A0A0] focus:outline-none'
             placeholder='Phone Number:'
           />
 
-  {errors.cMessage && <p className='text-red-800 -mb-4'>{errors.cMessage.message}</p>}
+          {errors.cMessage && (
+            <p className='text-red-800 -mb-4 text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] font-bold'>
+              {errors.cMessage.message}
+            </p>
+          )}
 
           <textarea
             {...register('cMessage')}
diff --git a/src/utils/constants.js b/src/utils/constants.js
index e47a784..ca3dd3f 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -8,3 +8,4 @@ export const Album_EndPoint =
   '/api/albums';
 export const Find_Teacher_EndPoint =
   '/api/find/teacher';
+export const Contact_EndPoint = `/api/contact/form/submit`;
diff --git a/vite.config.js b/vite.config.js
index 0ecb854..4484665 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,7 +7,9 @@ export default defineConfig({
   plugins: [react()],
   server: {
     proxy: {
-      '/api': backend_Url,
+      '/api':
+        backend_Url ||
+        'http://localhost:3000',
     },
   },
 });