Fakultas Ilmu Komputer UI

Commit 350ce8c0 authored by Yasmin Adelia Puti Chaidir's avatar Yasmin Adelia Puti Chaidir
Browse files

[CHORES] fix responsiveness in homepage

parent 676516af
......@@ -24,49 +24,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" />
<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