fix: responsiveness imrovement of home page

Author: Miran-Firdausi

src/App.jsx

@@ -45,8 +45,8 @@ function App() {
                   key={route.label}
                 />
               ))}
-              </Routes>
-              <Footer/>
+            </Routes>
+            <Footer />
           </Router>
         )}
       </AnimatePresence>

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>

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

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} />
               ))}