Develop

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"
   },

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,49 +59,76 @@ 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 '>
+    <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,12 +146,12 @@ 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,46 +160,69 @@ 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  text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] font-bold'>
+              {errors.cNumber.message}
+            </p>
+          )}
 
-{errors.cNumber && <p className='text-red-800 -mb-4'>{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')}
-            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>

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>

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`;

vite.config.js

@@ -7,7 +7,9 @@ export default defineConfig({
   plugins: [react()],
   server: {
     proxy: {
-      '/api': backend_Url,
+      '/api':
+        backend_Url ||
+        'http://localhost:3000',
     },
   },
 });