From 2de8652d19dcbfcb11dac2103f236940a56c95f2 Mon Sep 17 00:00:00 2001
From: LazyCodwr <khansameer84233@gmail.com>
Date: Thu, 16 Jan 2025 15:58:55 +0530
Subject: [PATCH] style: Enhance UI components with cursor styles and
 responsive adjustments

- Added 'cursor-pointer' class to Notice_Card button for better UX.
- Updated card class in Testimonials to 'cursor-grab' for draggable indication.
- Changed background color of CampusFacilities card from red to white.
- Adjusted padding and width properties in Courses and Teachers components for improved responsiveness.
- Increased font size for history and vision paragraphs in History component for better readability on smaller screens.
---
 src/components/Notice_Card.jsx                   |  1 +
 src/components/Testimonials.jsx                  |  2 +-
 .../aboutComponents/CampusFacilities.jsx         | 10 +++-------
 src/components/aboutComponents/Courses.jsx       |  5 +----
 src/components/aboutComponents/History.jsx       | 16 ++++++++--------
 src/components/aboutComponents/Teachers.jsx      |  7 ++-----
 6 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/components/Notice_Card.jsx b/src/components/Notice_Card.jsx
index ef89ed4..7192c32 100644
--- a/src/components/Notice_Card.jsx
+++ b/src/components/Notice_Card.jsx
@@ -42,6 +42,7 @@ const Notice_Card = ({
         fontWeight={900}
         size={20}
         onClick={Handle_Clone_Btn}
+        className='cursor-pointer'
       />
     </div>
   );
diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx
index 651e242..99ab1e1 100644
--- a/src/components/Testimonials.jsx
+++ b/src/components/Testimonials.jsx
@@ -81,7 +81,7 @@ const Testimonials = () => {
                 key={testimonial.id}
                 className='relative w-full flex justify-center'
               >
-                <div className='card w-[30vw] max-[599px]:w-full bg-white text-black rounded-xl px-6 py-8 transform transition-all duration-300'>
+                <div className='card cursor-grab w-[30vw] max-[599px]:w-full bg-white text-black rounded-xl px-6 py-8 transform transition-all duration-300'>
                   <div className='profile flex items-center gap-4'>
                     <div className='image w-[3.5vw] max-[599px]:w-[12vw] h-[3.5vw] max-[599px]:h-[12vw] rounded-full overflow-hidden'>
                       <img
diff --git a/src/components/aboutComponents/CampusFacilities.jsx b/src/components/aboutComponents/CampusFacilities.jsx
index 59f7712..ac87df9 100644
--- a/src/components/aboutComponents/CampusFacilities.jsx
+++ b/src/components/aboutComponents/CampusFacilities.jsx
@@ -46,16 +46,12 @@ const CampusFacilities = () => {
       setDescription({
         ...About_Page_Data.Description,
       });
-      console.log(
-        'description',
-        Description,
-      );
     }
   }, [About_Page_Data]);
 
   return (
     <section className='w-full h-full px-8 max-[599px]:px-6 py-12 bg-[#333] flex items-center justify-between gap-2 max-[599px]:gap-10 max-[599px]:flex-col'>
-      <div className='Facilites_Card_Container left w-[17.5%] max-[599px]:w-full h-full bg-red-400 p-4 max-[599px]:p-8 rounded-2xl max-[599px]:rounded-3xlxl'>
+      <div className='Facilites_Card_Container left w-[17.5%] max-[599px]:w-full h-full bg-white p-4 max-[599px]:p-8 rounded-2xl max-[599px]:rounded-3xlxl'>
         <div className=' h-auto flex items-start justify-between flex-col gap-3.5 max-[599px]:gap-4'>
           {Facilities.map(
             (Facility, index) => {
@@ -71,7 +67,7 @@ const CampusFacilities = () => {
           )}
         </div>
       </div>
-      <div className='right w-[82.5%] max-[599px]:w-full text-white px-8 max-[599px]:px-0 h-full flex items-start justify-between flex-col gap-8'>
+      <div className='right w-[82.5%] max-[599px]:w-full text-white px-8 max-[599px]:px-0 h-full flex items-start justify-between flex-col gap-6'>
         <div className='facilities'>
           <h1 className='text-[1.2vw] max-[599px]:text-[5vw] font-semibold font-[Montserrat] mb-2'>
             Capmus and Faciities
@@ -108,7 +104,7 @@ const CampusFacilities = () => {
           </p>
         </div>
         <div className='discription w-full h-full flex max-[599px]:flex-col items-start justify-start gap-7'>
-          <div className='img-container w-[11vw] max-[599px]:w-full h-[11vw] max-[599px]:h-[45vw] bg-[#FFE7E7] rounded-2xl'>
+          <div className='img-container w-[10vw] max-[599px]:w-full h-[10vw] max-[599px]:h-[45vw] bg-[#FFE7E7] rounded-2xl overflow-hidden'>
             <img
               src={Description.image}
               alt=''
diff --git a/src/components/aboutComponents/Courses.jsx b/src/components/aboutComponents/Courses.jsx
index 4325e81..3e870a4 100644
--- a/src/components/aboutComponents/Courses.jsx
+++ b/src/components/aboutComponents/Courses.jsx
@@ -19,7 +19,7 @@ const Courses = () => {
         Our Courses
       </div>
 
-      <p className='text text-[1vw] max-[599px]:text-[3.3vw] font-[Poppins] w-[40%] max-[599px]:w-full text-center pb-8'>
+      <p className='text text-[1vw] max-[599px]:text-[3vw] font-[Poppins] w-[40%] max-[599px]:w-[90%] text-center pb-8'>
         We have a group of eminent
         Faculty members with great
         personality and excellence in
@@ -112,9 +112,6 @@ const Courses = () => {
             delay: 5000,
             disableOnInteraction: false,
           }}
-          pagination={{
-            clickable: true,
-          }}
           loop={true}
           modules={[Autoplay]}
           className='mySwiper'
diff --git a/src/components/aboutComponents/History.jsx b/src/components/aboutComponents/History.jsx
index fa05847..d129c49 100644
--- a/src/components/aboutComponents/History.jsx
+++ b/src/components/aboutComponents/History.jsx
@@ -38,25 +38,25 @@ const History = () => {
           History
         </h1>
 
-        <p className='history_Para_One text-[0.9vw] max-[599px]:text-[2.5vw] font-[Poppins] text-[#333]'>
+        <p className='history_Para_One text-[0.9vw] max-[599px]:text-[3vw] font-[Poppins] text-[#333]'>
           {!history.paragraph_First
             ? 'Not Found Paragraph One'
             : history.paragraph_First}
         </p>
 
-        <p className=' history_Para_Two text-[0.9vw] max-[599px]:text-[2.5vw] font-[Poppins] text-[#333]'>
+        <p className=' history_Para_Two text-[0.9vw] max-[599px]:text-[3vw] font-[Poppins] text-[#333]'>
           {!history.paragraph_Second
             ? 'Not Found Paragraph Two'
             : history.paragraph_Second}
         </p>
 
-        <p className='history_Para_Three text-[0.9vw] max-[599px]:text-[2.5vw] font-[Poppins] text-[#333]'>
+        <p className='history_Para_Three text-[0.9vw] max-[599px]:text-[3vw] font-[Poppins] text-[#333]'>
           {!history.paragraph_Third
             ? 'Not Found Paragraph Three'
             : history.paragraph_Third}
         </p>
 
-        <p className='history_Para_Four text-[0.9vw] max-[599px]:text-[2.5vw] font-[Poppins] text-[#333]'>
+        <p className='history_Para_Four text-[0.9vw] max-[599px]:text-[3vw] font-[Poppins] text-[#333]'>
           {!history.paragraph_Four
             ? 'Not Found Paragraph Four'
             : history.paragraph_Four}
@@ -70,25 +70,25 @@ const History = () => {
             : Vision.title}
         </h1>
 
-        <p className='vision_Para_First text-[0.9vw] max-[599px]:text-[2.5vw] font-[Poppins] text-[#333]'>
+        <p className='vision_Para_First text-[0.9vw] max-[599px]:text-[3vw] font-[Poppins] text-[#333]'>
           {!Vision.paragraph_First
             ? 'Vision Para fist Not Found'
             : Vision.paragraph_First}
         </p>
 
-        <p className='vision_Para_Second text-[0.9vw] max-[599px]:text-[2.5vw] font-[Poppins] text-[#333]'>
+        <p className='vision_Para_Second text-[0.9vw] max-[599px]:text-[3vw] font-[Poppins] text-[#333]'>
           {!Vision.paragraph_Second
             ? 'Vision Para Second Not Found'
             : Vision.paragraph_Second}
         </p>
 
-        <p className='vision_Para_Third text-[0.9vw] max-[599px]:text-[2.5vw] font-[Poppins] text-[#333]'>
+        <p className='vision_Para_Third text-[0.9vw] max-[599px]:text-[3vw] font-[Poppins] text-[#333]'>
           {!Vision.paragraph_Third
             ? 'Vision Paragraph Third Not Found'
             : Vision.paragraph_Third}
         </p>
 
-        <p className='vision_Para_Four text-[0.9vw] max-[599px]:text-[2.5vw] font-[Poppins] text-[#333]'>
+        <p className='vision_Para_Four text-[0.9vw] max-[599px]:text-[3vw] font-[Poppins] text-[#333]'>
           {!Vision.paragraph_Four
             ? 'Vision Paragraph Four Not Found'
             : Vision.paragraph_Four}
diff --git a/src/components/aboutComponents/Teachers.jsx b/src/components/aboutComponents/Teachers.jsx
index 14b9668..22ef3cb 100644
--- a/src/components/aboutComponents/Teachers.jsx
+++ b/src/components/aboutComponents/Teachers.jsx
@@ -139,7 +139,7 @@ const Teachers = () => {
       <div className='title text-[3.5vw] font-semibold max-[599px]:text-[10vw]'>
         Our Teachers
       </div>
-      <p className='text text-[1.3vw] w-[50%] max-[599px]:w-full max-[599px]:font-light text-center max-[599px]:text-[3.3vw]'>
+      <p className='text text-[1.3vw] w-[50%] max-[599px]:w-[90%] max-[599px]:font-light text-center max-[599px]:text-[3vw]'>
         We have a group of eminent
         Faculty members with great
         personality and excellence in
@@ -165,12 +165,9 @@ const Teachers = () => {
           spaceBetween={30}
           centeredSlides={true}
           autoplay={{
-            delay: 1000,
+            delay: 5000,
             disableOnInteraction: true,
           }}
-          pagination={{
-            clickable: true,
-          }}
           loop={true}
           modules={[
             Autoplay,