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 = () => {
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">
......
......@@ -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 />
......
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