fix responsiveness in halaman utama

src/api/services/account.js

-import axios from 'axios'
-import BASE_API from '../constant'
-
-const API = `${BASE_API.API_BASE_URL}/api/v1/auth`
-
-export default {
-  login: (data) => axios.post(`${API}/login/`, data),
-  register: (data) => axios.post(`${API}/register/`, data),
-}

src/components/Footer/Footer.js

@@ -6,7 +6,7 @@ const Footer = () => {
   return (
     <div data-testid="Footer" className="bg-grey px-6 xl:px-60 2xl:px-60 py-8">
       <div className="flex flex-col md:flex-row lg:flex-row xl:flex-row 2xl:flex-row">
-        <div className="mr-6 mb-2 mt-2">
+        <div className="lg:w-1/4 xl:w-1/4 2xl:w-1/4 mb-2 mt-2">
           <img src={Logo}></img>
         </div>
         <div className="lg:w-1/4 xl:w-1/4 2xl:w-1/4 lg:mr-10 xl:mr-10 2xl:mr-10 mb-2 mt-2">
@@ -17,11 +17,11 @@ const Footer = () => {
           <p className="medium-text mt-4">Klien (tanya[at]justika.info)</p>
           <p className="medium-text">Umum (halo[at]justika.info)</p>
         </div>
-        <div className="mr-10 mb-2">
+        <div className="lg:w-1/4 xl:w-1/4 2xl:w-1/4 mb-2">
           <h1 className="heading-3 mb-4">Customer Service</h1>
           <p className="medium-text">Dewi (08XXXXXXX)</p>
         </div>
-        <div className="lg:w-1/4 xl:w-1/4 2xl:w-1/4 mb-2">
+        <div className="lg:w-1/4 xl:w-1/4 2xl:w-1/4 mb-2 mr-10">
           <h1 className="heading-3 mb-4">Justika Business Platform</h1>
           <a href="#">
             <p className="medium-text hover:underline">

src/pages/homepage.js

@@ -26,53 +26,58 @@ const Homepage = ({location}) => {
   return (
     <div data-testid="homepage">
       <Navbar isLoggedIn={loggedIn} name={name} />
-      <div className="App bg-lightgrey pt-16 sm:pt-24">
-        <div>
-          <img
-            src={Hero}
-            className="hidden md:flex h-full object-none"
-            data-testid="hero-image"
-          />
-          <img src={HeroResponsive} className="flex md:hidden w-full" />
-          <div className="absolute -mt-36 sm:-mt-60 px-auto md:pl-11 xl:pl-60 text-center md:text-left w-screen">
-            <h1 className="heading-2 sm:heading-1 text-white">
-              <span className="text-popyellow">One</span> Stop Legal Platform
-            </h1>
-            <h2 className="heading-3 sm:heading-2 text-white">
-              Untuk para pelaku usaha kecil dan menengah.
-              <br />
-              Aman, Mudah, Terjangkau!
-            </h2>
+      <div className="App bg-lightgrey pt-16 sm:pt-24 ">
+        <div className="flex flex-col justify-center">
+          <div className="bg-darkblue flex flex-row justify-center">
+            <div>
+              <img src={Hero} className="hidden md:flex h-full object-none" />
+              <img src={HeroResponsive} className="flex md:hidden w-full" />
+              <div className="absolute -mt-36 sm:-mt-60 px-auto md:pl-11 xl:pl-60 text-center md:text-left w-screen">
+                <h1 className="heading-2 sm:heading-1 text-white">
+                  <span className="text-popyellow">One</span> Stop Legal
+                  Platform
+                </h1>
+                <h2 className="heading-3 sm:heading-2 text-white">
+                  Untuk para pelaku usaha kecil dan menengah.
+                  <br />
+                  Aman, Mudah, Terjangkau!
+                </h2>
+              </div>
+            </div>
           </div>
-        </div>
 
-        <div className="-mt-8">
-          <div className="flex flex-col md:flex-row md:px-11 xl:px-60 px-4 pb-4">
-            {data.map((value, index) => (
-              <Card
-                key={index}
-                index={index}
-                image={value.image}
-                title={value.title}
-                text={value.text}
-                url={value.url}
-              />
-            ))}
-          </div>
+          <div className="-mt-8">
+            <div className="flex flex-col md:flex-row md:px-11 xl:px-60 px-4 pb-4 md:justify-center">
+              {data.map((value, index) => (
+                <Card
+                  key={index}
+                  index={index}
+                  image={value.image}
+                  title={value.title}
+                  text={value.text}
+                  url={value.url}
+                />
+              ))}
+            </div>
 
-          <div className="bg-white grid md:grid-cols-3 px-6 xl:px-60 py-8">
-            {dataBenefits.map((value, index) => (
-              <Benefits
-                key={index}
-                index={index}
-                image={value.image}
-                title={value.title}
-                text={value.text}
-              />
-            ))}
-          </div>
+            <div className="bg-white flex md:flex-row md:justify-center">
+              <div className="grid md:grid-cols-3 px-6 xl:px-60 py-8 flex">
+                {dataBenefits.map((value, index) => (
+                  <Benefits
+                    key={index}
+                    index={index}
+                    image={value.image}
+                    title={value.title}
+                    text={value.text}
+                  />
+                ))}
+              </div>
+            </div>
 
-          <Footer />
+            <div className="bg-grey flex md:flex-row md:justify-center">
+              <Footer />
+            </div>
+          </div>
         </div>
       </div>
       <Toaster />