update

app/(private)/jackpot/page.tsx

@@ -100,7 +100,7 @@ export default function Page() {
             <div>
               <Image src={Machine} alt='' className='w-[236px] h-[252px]' />
             </div>
-            <div className='text-sm text-[#FFFFFF] mt-8'>
+            <div className='text-xs text-[#FFFFFF] mt-8'>
               The Dragon will appear and fulfill your wish at at 2 pm, 24th Mar 2024 (UTC +7)
             </div>
             <div className='mt-4 flex gap-4'>

app/(private)/layout.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import ForceActive from '@/app/(private)/assets/force-active.svg'
-import ForceInactive from '@/app/(private)/assets/force-inactive.svg'
-import JackpotActive from '@/app/(private)/assets/jackpot-active.svg'
-import JackpotInactive from '@/app/(private)/assets/jackpot-inactive.svg'
-import QuestActive from '@/app/(private)/assets/quest-active.svg'
-import QuestInactive from '@/app/(private)/assets/quest-inactive.svg'
+import ForceActive from '@/app/(private)/assets/force-active.png'
+import ForceInactive from '@/app/(private)/assets/force-inactive.png'
+import JackpotActive from '@/app/(private)/assets/jackpot-active.png'
+import JackpotInactive from '@/app/(private)/assets/jackpot-inactive.png'
+import QuestActive from '@/app/(private)/assets/quest-active.png'
+import QuestInactive from '@/app/(private)/assets/quest-inactive.png'
 import Active from '@/app/(private)/assets/active-tab.png'
 import Inactive from '@/app/(private)/assets/inactive-tab.png'
 import { Bangkok, Context } from '@/provider'
@@ -33,7 +33,7 @@ export default function Layout({ children }: { children: ReactNode }) {
     }
   }, [account?.wallet_address, status, address])
   return (
-    <div className='flex max-w-6xl mx-auto pt-20 md:pt-24 px-1 md:px-4 flex-col md:flex-row gap-4 md:gap-2'>
+    <div className='flex max-w-7xl mx-auto pt-20 md:pt-24 px-1 md:px-4 flex-col md:flex-row gap-4 md:gap-2'>
       <div className='flex md:flex-col gap-4 items-center justify-center md:justify-normal'>
         <div
           className='cursor-pointer'
@@ -99,7 +99,7 @@ export default function Layout({ children }: { children: ReactNode }) {
           />
         </div>
       </div>
-      <div>{children}</div>
+      <div className='flex-1'>{children}</div>
     </div>
   )
 }

components/header/index.tsx

@@ -21,7 +21,7 @@ export function Header() {
   return (
     <header ref={ref} className='fixed top-0 w-full z-50 '>
       <div className='border-b border-[#550E0E] bg-[linear-gradient(126deg,rgba(85,5,5,0.30)_13.84%,rgba(40,3,3,0.00)_74.14%)] shadow-[0px_4px_20px_1px_rgba(0,0,0,0.20)] backdrop-blur-[20px]'>
-        <div className='flex justify-between items-center w-full max-w-6xl mx-auto px-4 py-3'>
+        <div className='flex justify-between items-center w-full max-w-7xl mx-auto px-4 py-3'>
           <Link href='/'>
             <Image src={Logo} alt='' className='w-[77px] sm:w-[108px]' />
           </Link>