update: web-humas

app/layout.tsx

@@ -49,7 +49,7 @@ export default function RootLayout({
 								src="/headerbannerpng.png"
 								className=" w-full"
 							/>
-							<main className="pt-8 px-2 md:px-6 flex-grow">
+							<main className="pt-8 px-2 md:px-4 lg:px-6 flex-grow">
 								{children}
 							</main>
 							<Footer />

components/Landing Page/BodyLayout.tsx

@@ -8,13 +8,13 @@ import SidebarNav from './SidebarNav'
 export default function BodyLayout() {
   return (
     <div className='md:flex bg-white text-black  mt-8 pb-8'>
-      <div className='w-auto md:w-[75%] space-y-5'>
+      <div className='w-auto md:-w[65%] lg:w-[75%] space-y-5'>
         <CategorySatker />
         <RegionalNews />
         <MediaSocial />
         <ENewsPolri />
       </div>
-      <div className='w-auto md:w-[25%]'>
+      <div className='w-auto md:w-[35%] lg:w-[25%]'>
         <SidebarNav />
       </div>
     </div>

components/Landing Page/CategorySatker.tsx

@@ -26,13 +26,13 @@ export default function CategorySatker() {
         },
     ];
     return (
-        <div className='text-center bg-[#DD8306] rounded-none md:rounded-lg h-auto md:h-[338px] space-y-7 m-auto md:m-10 flex flex-col justify-center'>
+        <div className='text-center bg-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-7 m-auto md:m-10 flex flex-col justify-center border-2 border-green-500'>
             <div className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>Kategori Satker</div>
             <div className='flex items-center justify-around'>
                 <div><ChevronLeftWhite /></div>
                 <div className="gap-2 md:gap-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
                     {list.map((item, index) => (
-                        <div className='w-[157px] h-[141px] flex flex-col items-center justify-evenly'>
+                        <div key={index} className='w-[157px] h-[141px] flex flex-col items-center justify-evenly'>
                             <Image
                                 radius="lg"
                                 className="h-[59px]"

components/Landing Page/ENewsPolri.tsx

@@ -22,11 +22,11 @@ export default function ENewsPolri() {
         },
     ];
     return (
-        <div className='bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto md:h-[338px] space-y-7 m-auto md:m-10 flex flex-col justify-center items-center'>
+        <div className='bg-[#1F1A17] text-center border-2 border-purple-500 rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-7 m-auto md:m-10 flex flex-col justify-center items-center'>
             <p className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>E-Majalah Polri</p>
             <div className='flex flex-row w-full items-center justify-between'>
                 <ChevronLeftWhite />
-                <div className='md:flex space-y-4 md:space-y-0 gap-4'>
+                <div className='lg:flex space-y-4 lg:space-y-0 gap-4'>
                     {eNews.map((data) => (
                         <div key={data.id} className='h-auto md:h-[200px] w-[274px]'>
                             <Card className='text-white'

components/Landing Page/HeaderNews.tsx

@@ -5,8 +5,8 @@ import Image from 'next/image'
 
 export default function HeaderNews() {
     return (
-        <div className='md:flex items-center text-center bg-black dark:bg-white  rounded-md gap-3 p-2'>
-            <div className='w-auto md:w-[25%] p-2 bg-[#020101] text-white rounded-md'>
+        <div className='lg:flex items-center text-center bg-black dark:bg-white  rounded-md gap-3 p-2'>
+            <div className='w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md'>
                 <p className='text-lg font-bold h-10'>Berita Terkini</p>
                 <ScrollShadow hideScrollBar className=" h-[343px]">
                     <div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
@@ -39,7 +39,7 @@ export default function HeaderNews() {
                     </Button>
                 </div>
             </div>
-            <div className='w-auto md:w-[50%]'>
+            <div className='w-auto lg:w-[50%]'>
                 <Card
                     isFooterBlurred
                     radius="lg"
@@ -62,7 +62,7 @@ export default function HeaderNews() {
                     </CardFooter>
                 </Card>
             </div>
-            <div className='w-auto md:w-[25%] p-2 rounded-md text-white dark:text-black '>
+            <div className='w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black '>
                 <div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
                     <img src="/gprheader.png" alt="gpr" className='w-full' />
                 </div>

components/Landing Page/MediaSocial.tsx

@@ -73,7 +73,7 @@ export default function MediaSocial() {
                     </div>
                     <div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                 </div>
-                <div className='md:flex gap-4 justify-center'>
+                <div className='md:flex flex-wrap gap-4 justify-center'>
                     {limitedData.map((data) => (
                         <div
                             key={data.id}
@@ -115,7 +115,7 @@ export default function MediaSocial() {
                     </div>
                     <div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                 </div>
-                <div className='md:flex gap-4 justify-center'>
+                <div className='md:flex flex-wrap gap-4 justify-center'>
                     {limitedData.map((data) => (
                         <div
                             key={data.id}
@@ -157,7 +157,7 @@ export default function MediaSocial() {
                     </div>
                     <div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                 </div>
-                <div className='md:flex gap-4 justify-center'>
+                <div className='md:flex flex-wrap gap-4 justify-center'>
                     {limitedData.map((data) => (
                         <div
                             key={data.id}
@@ -197,7 +197,7 @@ export default function MediaSocial() {
                     </div>
                     <div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                 </div>
-                <div className='md:flex gap-4 justify-center'>
+                <div className='md:flex flex-wrap gap-4 justify-center'>
                     {limitedData.map((data) => (
                         <div
                             key={data.id}
@@ -237,7 +237,7 @@ export default function MediaSocial() {
                     </div>
                     <div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                 </div>
-                <div className='md:flex gap-4 justify-center'>
+                <div className='md:flex flex-wrap gap-4 justify-center'>
                     {limitedData.map((data) => (
                         <div
                             key={data.id}

components/Landing Page/SidebarNav.tsx

@@ -55,33 +55,33 @@ export default function SidebarNav() {
             </div>
             <div className='text-xl font-semibold underline underline-offset-4 decoration-red-600 pb-5'>Info Eksternal</div>
             <div className='flex flex-col space-y-4'>
-                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto md:w-[300px] p-4 shadow-md'>
+                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal1.png" alt="" className='w-full' />
                     <p className='leading-tight text-blue-500 pt-3'>Berita BPS</p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pusat Statistika Indonesia</p>
                     <p className='leading-tight text-blue-500 pt-2'>Pengumuman BPS</p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p>
                 </div>
-                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto md:w-[300px] p-4 shadow-md'>
+                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal2.png" alt="" className='w-full' />
                     <p className='leading-tight text-blue-500 pt-5'>Berita KPU</p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Komisi Pemilihan Umum Indonesia</p>
                     <p className='leading-tight text-blue-500 pt-2'>Pengumuman KPU</p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia</p>
                 </div>
-                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto md:w-[300px] p-4 shadow-md'>
+                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal3.png" alt="" className='w-full' />
                     <p className='leading-tight text-blue-500 pt-5'>Berita BAWASLU</p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia</p>
                     <p className='leading-tight text-blue-500 pt-2'>Pengumuman BAWASLU</p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p>
                 </div>
-                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto md:w-[300px] p-4 shadow-md'>
+                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal4.png" alt="" className='w-full' />
                     <p className='leading-tight text-blue-500 pt-5'>Info KPAI</p>
                     <p className='text-xs text-gray-500 pt-1'>Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia</p>
                 </div>
-                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto md:w-[300px] p-4 shadow-md'>
+                <div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal5.png" alt="" className='w-full' />
                     <p className='leading-tight text-blue-500 pt-5'>INFO KOMNAS PEREMPUAN</p>
                     <p className='text-xs text-gray-500 pt-1'>Info dan Berita terbaru dari Komnas Perempuan Indonesia</p>