legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: slicing home page, adjust for mobile view

Browse Source 
slicing home page, adjust for mobile view
This commit is contained in:
fredy.siswanto 2025-02-20 01:37:35 +07:00
parent fe441ad5ac
commit f17627bdf2
13 changed files with 412 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/components/ui/banner.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Link } from 'react-router'
import { APP } from '~/data/meta'
export default function Banner() {
return (
<div className="min-h-[65px] bg-amber-400 sm:mx-10">
<div className="relative">
<Link
to="/#"
className="mt-2 h-full py-2"
>
<img
src={'https://placehold.co/1200x70.png'}
alt={APP.title}
className="h-[70px] w-auto sm:h-full"
/>
</Link>
<p className="absolute top-2 mx-10">
Lorem ipsum dolor sit, amet consectetur
</p>
</div>
</div>
)
}

4
app/components/ui/button.tsx
View File

@ -29,8 +29,8 @@ const buttonVariants = cva(
default: 'h-[50px] w-[150px]',
block: 'h-[50px] w-full',
icon: 'h-9 w-9',
// sm: 'h-8 rounded-md px-3 text-xs',
// lg: 'h-10 rounded-md px-8',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
},
},
defaultVariants: {

90
app/components/ui/carousel.tsx
View File

@ -9,7 +9,8 @@ import { Button } from './button'
export const Carousel = (properties: TNews) => {
const { title, description, items, type } = properties
return (
<div>
<>
{/* <div >
<div className="mb-[30px] flex items-center justify-between border-b border-black pb-[30px]">
<div className="grid">
<h2 className="text-4xl font-extrabold text-[#2E2F7C]">{title}</h2>
@ -74,6 +75,93 @@ export const Carousel = (properties: TNews) => {
</div>
))}
</div>
</div> */}
<div className="">
<div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
<div className="grid">
<h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
{title}
</h2>
<p className="text-xl font-light text-[#777777] italic sm:text-2xl">
{description}
</p>
</div>
<div className="flex gap-2.5">
<CarouselPreviousIcon
color="#DCDCDC"
className="cursor-pointer"
width={45}
height={45}
/>
<CarouselNextIcon
color="#2E2F7C"
className="cursor-pointer"
width={45}
height={45}
/>
</div>
</div>
<div
className={twMerge(
'grid sm:grid sm:gap-x-8',
type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
)}
>
{items.map(({ image, title, content, tag }, index) => (
<div
key={index}
className={twMerge(
'grid sm:gap-x-8',
type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
)}
>
<img
className={twMerge(
'w-full object-cover',
type === 'hero'
? 'col-span-2 aspect-[174/100]'
: 'aspect-[5/4] rounded-md',
)}
src={image}
alt={title}
/>
<div
className={twMerge(
'flex flex-col justify-between',
type === 'hero' ? 'gap-7' : 'gap-4',
)}
>
<div className={`${type === 'hero' ? 'hidden' : ''} `}>
{tag?.map((item) => (
<span className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1">
{item}
</span>
))}
</div>
<div>
<h3
className={twMerge(
'mt-2 w-full font-bold lg:mt-0',
type === 'hero'
? 'text-2xl sm:text-4xl'
: 'text-xl sm:text-2xl',
)}
>
{title}
</h3>
<p className="text-md mt-5 text-[#777777] sm:text-xl">
{content}
</p>
</div>
<Button size="block">View More</Button>
</div>
</div>
))}
</div>
</div>
</>
)
}

44
app/components/ui/newsletter.tsx Normal file
View File

@ -0,0 +1,44 @@
import { Button } from '~/components/ui/button'
import { APP } from '~/data/meta'
export const UiNewsLetter = () => {
return (
<>
<div className="relative col-span-2 my-5 grid max-h-[400px] gap-y-6 bg-[#2E2F7C] p-5 px-10 text-white sm:grid-cols-2 sm:px-10">
<div className="grid-1">
<h2 className="text-2xl font-bold sm:text-4xl">
Join Our Newsletter
</h2>
<p className="text:md sm:text-lg">
Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat
informasi kajian dan networking terbaru? ikuti Newsletter kami and
Stay up to Speed!
</p>
</div>
<div className="w-max-h-[400px] absolute right-0 bottom-0 w-auto sm:top-0">
<img
src={'https://placehold.co/800x200.png'}
alt={APP.title}
className="h-full w-auto"
/>
</div>
<div className="z-10">
<form className="grid gap-5">
<input
placeholder="Daftarkan Email Disini"
className="h-[50px] flex-1 bg-white text-center text-lg font-light text-black placeholder:text-[#777777] focus:ring-0 focus:outline-none"
size={1}
/>
<Button
type="submit"
variant="newsPrimary"
size="block"
>
Subscribe
</Button>
</form>
</div>
</div>
</>
)
}

24
app/layouts/footer-links.tsx
View File

@ -6,20 +6,22 @@ import { COPYRIGHT_MENU, FOOTER_MENU } from './menu'
export const FooterLinks = () => {
return (
<div className="col-span-3 flex flex-col justify-between">
<div className="grid grid-cols-3 gap-4">
<div className="col-span-1 flex flex-col justify-between sm:col-span-3">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
{FOOTER_MENU.map(({ group, items }, index) => (
<div
key={index}
className="flex flex-col gap-3"
className="flex w-full flex-col gap-3"
>
<h3 className="text-xl font-semibold sm:text-2xl">{group}</h3>
<div
className={`${group === 'Follow Us' ? 'flex-col-2 flex w-full flex-wrap' : ''}`}
>
<h3 className="text-2xl font-semibold">{group}</h3>
<div>
{items.map(({ url, icon: Icon, title }, subIndex) => (
<Link
key={subIndex}
to={url}
className="flex items-center gap-3 py-2"
className="flex w-1/2 items-center gap-3 py-1 sm:w-full"
>
{Icon && (
<Icon
@ -35,21 +37,21 @@ export const FooterLinks = () => {
</div>
))}
</div>
<div className="flex justify-between border-t border-white pt-8 text-sm">
<div>
{new Date().getFullYear()} {APP.title}. All rights reserved.
</div>
<div className="mt-8 justify-between border-t border-white pt-8 text-center text-xs sm:flex sm:text-sm">
<div className="flex gap-6">
{COPYRIGHT_MENU.map(({ url, title }, index) => (
<Link
key={index}
to={url}
className="text-white underline"
className={`w-full text-white underline`}
>
{title}
</Link>
))}
</div>
<div className="mt-2 sm:order-first">
{new Date().getFullYear()} {APP.title}. All rights reserved.
</div>
</div>
</div>
)

25
app/layouts/footer-newsletter.tsx
View File

@ -5,7 +5,8 @@ import { APP } from '~/data/meta'
export const FooterNewsletter = () => {
return (
<div className="col-span-2 grid gap-y-6">
<>
<div className="col-span-2 hidden gap-y-6 sm:grid">
<div className="h-[75px] bg-white p-3">
<Link
to="/news"
@ -18,11 +19,12 @@ export const FooterNewsletter = () => {
/>
</Link>
</div>
<h2 className="text-4xl font-bold">Join Our Newsletter</h2>
<p className="text-lg">
Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat informasi
kajian dan networking terbaru? ikuti Newsletter kami and Stay up to
Speed!
Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat
informasi kajian dan networking terbaru? ikuti Newsletter kami and
Stay up to Speed!
</p>
<form className="grid gap-5">
<input
@ -39,5 +41,20 @@ export const FooterNewsletter = () => {
</Button>
</form>
</div>
<div className="block sm:hidden">
<div className="h-[60px] bg-white p-3">
<Link
to="/news"
className="h-full"
>
<img
src={APP.logo}
alt={APP.title}
className="h-full w-auto"
/>
</Link>
</div>
</div>
</>
)
}

88
app/layouts/header-menu-mobile.tsx Normal file
View File

@ -0,0 +1,88 @@
import { useState } from 'react'
import { Link } from 'react-router'
import { HeaderSearch } from '~/layouts/header-search'
import { MENU } from './menu'
export default function HeaderMenuMobile() {
const [isMenuOpen, setIsMenuOpen] = useState(false)
const handleToggleMenu = (): void => {
setIsMenuOpen(!isMenuOpen)
}
return (
<>
<div className="relative z-50 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
<div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-center gap-4 align-middle">
{/* Menu */}
<div
className={`z-50 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
isMenuOpen ? 'translate-x-0' : '-translate-x-full'
}`}
>
{/* Tombol Close */}
<button
onClick={handleToggleMenu}
className="fixed top-2 right-4 z-[100] flex h-9 w-9 items-center justify-center lg:hidden"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-3.5 w-3.5 fill-white"
viewBox="0 0 320.591 320.591"
>
<path d="M30.391 318.583a30.37 30.37 0 0 1-21.56-7.288c-11.774-11.844-11.774-30.973 0-42.817L266.643 10.665c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875L51.647 311.295a30.366 30.366 0 0 1-21.256 7.288z" />
<path d="M287.9 318.583a30.37 30.37 0 0 1-21.257-8.806L8.83 51.963C-2.078 39.225-.595 20.055 12.143 9.146c11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414a30.368 30.368 0 0 1-23.078 7.288z" />
</svg>
</button>
{/* List Menu */}
<ul className="mx-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
{MENU.map((item) => (
<li className="px-3 max-lg:border-b max-lg:py-3">
<Link
key={item.title}
to={item.url}
className={
'flex h-full items-center justify-center border-white px-[35px] sm:border-r'
}
>
{item.title}
</Link>
</li>
))}
<button className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden">
Akun
</button>
</ul>
</div>
{/* Search dan Toggle Button */}
<div className="align-center flex w-full justify-center">
<button
onClick={handleToggleMenu}
className="h-[63px] border border-white px-4 lg:hidden"
>
<svg
className="h-7 w-7"
fill="#fff"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clipRule="evenodd"
/>
</svg>
</button>
<div className="w-full py-3">
<HeaderSearch></HeaderSearch>
</div>
</div>
</div>
</div>
</>
)
}

7
app/layouts/header-menu.tsx
View File

@ -1,11 +1,14 @@
import { Link } from 'react-router'
import HeaderMenuMobile from '~/layouts/header-menu-mobile'
import { HeaderSearch } from './header-search'
import { MENU } from './menu'
export const HeaderMenu = () => {
return (
<div className="flex h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white">
<>
<div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
{MENU.map((item) => (
<Link
key={item.title}
@ -19,5 +22,7 @@ export const HeaderMenu = () => {
))}
<HeaderSearch />
</div>
<HeaderMenuMobile />
</>
)
}

4
app/layouts/header-search.tsx
View File

@ -6,14 +6,14 @@ export const HeaderSearch = () => {
<form className="flex flex-1 justify-between gap-[15px] px-[35px]">
<input
placeholder="Cari..."
className="flex-1 placeholder:text-white focus:ring-0 focus:outline-none"
className="flex-1 text-xl placeholder:text-white focus:ring-0 focus:outline-none sm:text-2xl"
size={1}
/>
<Button
type="submit"
variant="icon"
size="icon"
className="[&_svg]:size-[30px]"
className="[&_svg]:size-[20px] sm:[&_svg]:size-[30px]"
>
<SearchIcon />
</Button>

21
app/layouts/header-top.tsx
View File

@ -5,24 +5,31 @@ import { APP } from '~/data/meta'
export const HeaderTop = () => {
return (
<div className="flex h-[100px] items-center justify-between gap-[15px] bg-white px-[50px] py-[20px]">
<div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
<Link
to="/news"
className="h-full py-[5px]"
className="mt-2 h-full py-2"
>
<img
src={APP.logo}
alt={APP.title}
className="h-full w-auto"
className="h-3/4 w-auto sm:h-full"
/>
</Link>
<div className="flex h-full items-center py-1.5 font-light whitespace-pre-line">
<div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
{APP.description}
</div>
<div className="flex items-center gap-[15px]">
<Button>About Us</Button>
<Button variant="newsSecondary">Akun</Button>
<div className="w-[60px]">
<Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
About Us
</Button>
<Button
variant="newsSecondary"
className="hidden sm:block"
>
Akun
</Button>
<div className="w-[50px] sm:w-[60px]">
<img
alt="language"
src="/flags/id.svg"

6
app/pages/news/data.ts
View File

@ -24,18 +24,21 @@ export const BERITA: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
image: '/images/news-2.jpg',
tag: ['Hukum Property'],
},
{
title: 'How does writing influence your personal brand?',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
image: '/images/news-3.jpg',
tag: ['Hukum'],
},
{
title: 'Helping a local business reinvent itself',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
image: '/images/news-4.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
},
],
}
@ -50,18 +53,21 @@ export const KAJIAN: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
image: '/images/news-2.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
},
{
title: 'How does writing influence your personal brand?',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
image: '/images/news-3.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
},
{
title: 'Helping a local business reinvent itself',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
image: '/images/news-4.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
},
],
}

7
app/routes/_layout.news.tsx
View File

@ -12,15 +12,16 @@ const NewsLayout = () => {
<HeaderTop />
<HeaderMenu />
</header>
<div className="mx-[50px] my-[25px] grid gap-y-[25px]">
<div className="grid sm:mx-[50px] sm:my-[25px] sm:gap-y-[25px]">
<img
src="/images/banner.png"
alt="banner"
className="h-[100px] w-full object-contain"
className="h-[50px] w-full object-fill sm:h-[100px] sm:object-contain"
/>
<Outlet />
</div>
<footer className="grid w-full grid-cols-5 gap-16 bg-[#2E2F7C] px-16 py-20 text-white">
<footer className="grid w-full grid-cols-1 gap-6 bg-[#2E2F7C] px-5 py-20 text-white sm:grid-cols-5 sm:gap-16 sm:px-16">
<FooterNewsletter />
<FooterLinks />
</footer>

1
app/types/news.ts
View File

@ -6,5 +6,6 @@ export type TNews = {
title: string
content: string
image: string
tag?: Array<string>
}[]
}