From dc9777d6c8225a0bd062a0ff7f7a1f497b28d54a Mon Sep 17 00:00:00 2001
From: Miran <miranfirdausi027@gmail.com>
Date: Tue, 24 Dec 2024 08:51:32 +0530
Subject: [PATCH] fix: responsiveness imrovement of home page

---
 src/App.jsx                              | 4 ++--
 src/components/AboutUs/index.jsx         | 4 ++--
 src/components/EventsHighlight/index.jsx | 2 +-
 src/pages/Home/index.jsx                 | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index b61b6ca..129bc5a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -45,8 +45,8 @@ function App() {
                   key={route.label}
                 />
               ))}
-              </Routes>
-              <Footer/>
+            </Routes>
+            <Footer />
           </Router>
         )}
       </AnimatePresence>
diff --git a/src/components/AboutUs/index.jsx b/src/components/AboutUs/index.jsx
index 2fa8e61..8332497 100644
--- a/src/components/AboutUs/index.jsx
+++ b/src/components/AboutUs/index.jsx
@@ -159,7 +159,7 @@ export default function AboutSection() {
       <section className="relative min-h-fit bg-background-dark text-white py-12 md:px-6 lg:px-12 overflow-hidden">
         <div className="absolute top-4 -left-1 w-8 h-8 bg-white rounded-full opacity-100" />
         <div className="absolute -top-2 right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
-        <div className="max-w-full mx-auto relative z-20">
+        <div className="max-w-full mx-auto relative z-20 px-4 md:px-0">
           <h1
             className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20"
             style={{
@@ -186,7 +186,7 @@ export default function AboutSection() {
             <Link to="/about-us">
               <button
                 type="button"
-                className="absolute -bottom-6 right-0 text-xl underline text-primary hover:text-text-light transition-colors"
+                className="float-right mt-6 text-xl underline text-primary hover:text-primary-dark transition-colors"
               >
                 Know More
               </button>
diff --git a/src/components/EventsHighlight/index.jsx b/src/components/EventsHighlight/index.jsx
index c468d23..843b32a 100644
--- a/src/components/EventsHighlight/index.jsx
+++ b/src/components/EventsHighlight/index.jsx
@@ -92,7 +92,7 @@ function EventsHighlight() {
           <div
             key={image.key}
             className={`relative h-[50vh] flex items-center justify-center ${
-              image.side === "left" ? "ml-24" : "mr-24"
+              image.side === "left" ? "ml-12 md:ml-24" : "mr-12 md:mr-24"
             }`}
           >
             <div
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index 66542c3..33e9c0c 100644
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@@ -34,9 +34,9 @@ function Home() {
           <div className="flex-grow mx-auto pr-5 pl-5 space-x-30 py-8">
             <Heading
               text="MEET OUR TEAM"
-              className="text-center absolute top-0 left-0 right-0 mb-24"
+              className="text-center absolute top-0 left-0 right-0"
             />
-            <div className="flex flex-row flex-wrap gap-16 justify-center items-center mt-12">
+            <div className="flex flex-row flex-wrap gap-8 md:gap-16 justify-center items-center mt-12">
               {teamMembersData.slice(0, 3).map((member) => (
                 <TeamMember key={member.name} member={member} />
               ))}