Fakultas Ilmu Komputer UI

Commit 2a8cdf99 authored by Yasmin Adelia Puti Chaidir's avatar Yasmin Adelia Puti Chaidir Committed by Shafiya Adzhani
Browse files

fix responsiveness in halaman utama

parent 03306d27
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),
}
...@@ -6,7 +6,7 @@ const Footer = () => { ...@@ -6,7 +6,7 @@ const Footer = () => {
return ( return (
<div data-testid="Footer" className="bg-grey px-6 xl:px-60 2xl:px-60 py-8"> <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="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> <img src={Logo}></img>
</div> </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"> <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 = () => { ...@@ -17,11 +17,11 @@ const Footer = () => {
<p className="medium-text mt-4">Klien (tanya[at]justika.info)</p> <p className="medium-text mt-4">Klien (tanya[at]justika.info)</p>
<p className="medium-text">Umum (halo[at]justika.info)</p> <p className="medium-text">Umum (halo[at]justika.info)</p>
</div> </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> <h1 className="heading-3 mb-4">Customer Service</h1>
<p className="medium-text">Dewi (08XXXXXXX)</p> <p className="medium-text">Dewi (08XXXXXXX)</p>
</div> </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> <h1 className="heading-3 mb-4">Justika Business Platform</h1>
<a href="#"> <a href="#">
<p className="medium-text hover:underline"> <p className="medium-text hover:underline">
......
...@@ -26,53 +26,58 @@ const Homepage = ({location}) => { ...@@ -26,53 +26,58 @@ const Homepage = ({location}) => {
return ( return (
<div data-testid="homepage"> <div data-testid="homepage">
<Navbar isLoggedIn={loggedIn} name={name} /> <Navbar isLoggedIn={loggedIn} name={name} />
<div className="App bg-lightgrey pt-16 sm:pt-24"> <div className="App bg-lightgrey pt-16 sm:pt-24 ">
<div> <div className="flex flex-col justify-center">
<img <div className="bg-darkblue flex flex-row justify-center">
src={Hero} <div>
className="hidden md:flex h-full object-none" <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">
<img src={HeroResponsive} className="flex md:hidden w-full" /> <h1 className="heading-2 sm:heading-1 text-white">
<div className="absolute -mt-36 sm:-mt-60 px-auto md:pl-11 xl:pl-60 text-center md:text-left w-screen"> <span className="text-popyellow">One</span> Stop Legal
<h1 className="heading-2 sm:heading-1 text-white"> Platform
<span className="text-popyellow">One</span> Stop Legal Platform </h1>
</h1> <h2 className="heading-3 sm:heading-2 text-white">
<h2 className="heading-3 sm:heading-2 text-white"> Untuk para pelaku usaha kecil dan menengah.
Untuk para pelaku usaha kecil dan menengah. <br />
<br /> Aman, Mudah, Terjangkau!
Aman, Mudah, Terjangkau! </h2>
</h2> </div>
</div>
</div> </div>
</div>
<div className="-mt-8"> <div className="-mt-8">
<div className="flex flex-col md:flex-row md:px-11 xl:px-60 px-4 pb-4"> <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) => ( {data.map((value, index) => (
<Card <Card
key={index} key={index}
index={index} index={index}
image={value.image} image={value.image}
title={value.title} title={value.title}
text={value.text} text={value.text}
url={value.url} url={value.url}
/> />
))} ))}
</div> </div>
<div className="bg-white grid md:grid-cols-3 px-6 xl:px-60 py-8"> <div className="bg-white flex md:flex-row md:justify-center">
{dataBenefits.map((value, index) => ( <div className="grid md:grid-cols-3 px-6 xl:px-60 py-8 flex">
<Benefits {dataBenefits.map((value, index) => (
key={index} <Benefits
index={index} key={index}
image={value.image} index={index}
title={value.title} image={value.image}
text={value.text} title={value.title}
/> text={value.text}
))} />
</div> ))}
</div>
</div>
<Footer /> <div className="bg-grey flex md:flex-row md:justify-center">
<Footer />
</div>
</div>
</div> </div>
</div> </div>
<Toaster /> <Toaster />
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment