From 14cf3181ae982f1a64da6aa4889fdd05fa36dad8 Mon Sep 17 00:00:00 2001
From: "Gilang R." <sinyo101520@gmail.com>
Date: Thu, 17 Oct 2024 13:06:45 +0900
Subject: [PATCH] Fix display

---
 src/pages/homepage/index.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/pages/homepage/index.tsx b/src/pages/homepage/index.tsx
index 7e576d8..e11aa04 100644
--- a/src/pages/homepage/index.tsx
+++ b/src/pages/homepage/index.tsx
@@ -145,7 +145,7 @@ export function Index() {
       setDate(_date);
     }, 1000);
 
-    setGrouppedSchedules(groupDepartureDatetimes(data.schedules, 5));
+    setGrouppedSchedules(groupDepartureDatetimes(data.schedules, 6));
   }, []);
 
   useEffect(() => {
@@ -157,8 +157,8 @@ export function Index() {
   }, [grouppedSchedules]);
 
   return (
-    <div className="p-4" style={{ backgroundImage: `url(${bgImage})` }}>
-      <div className="grid grid-cols-12 gap-8">
+    <div className="h-screen" style={{ backgroundImage: `url(${bgImage})` }}>
+      <div className="p-4 grid grid-cols-12 gap-8" style={{height: "85%"}}>
         <div className="col-span-8">
           <div className="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 h-full">
             <h3 className="text-4xl font-bold text-gray-800 text-center">
@@ -283,7 +283,7 @@ export function Index() {
           </div>
         </div>
         <div className="col-span-4">
-          <div className="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 ">
+          <div className="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 h-full">
             <h3 className="text-3xl font-bold text-gray-800 text-center">
               {data.harbor.name}
             </h3>
@@ -326,13 +326,15 @@ export function Index() {
             </div>
           </div>
         </div>
+      </div>
 
-        <div className="col-span-12 h-full">
+
+      <div className="fixed bottom-10 p-4">
           <div className="border-2 rounded-md mt-4 h-12 flex">
-            <div className="w-1/12 bg-blue-400 h-full items-center justify-center flex">
+            <div className="bg-blue-400 h-full items-center justify-center flex w-40">
               <h3 className="text-xl text-center text-white">INFORMASI</h3>
             </div>
-            <div className="w-11/12 whitespace-nowrap flex items-center overflow-x-hidden ml-1">
+            <div className="whitespace-nowrap flex items-center overflow-x-hidden ml-1">
               <Marquee>
                 {data.marquee_text.map((x) => (
                   <h3 className="text-2xl ml-4 font-bold">{x}</h3>
@@ -341,7 +343,6 @@ export function Index() {
             </div>
           </div>
         </div>
-      </div>
     </div>
   );
 }