Optimize desktop view (#39)

Co-authored-by: Resi Respati <resir014@gmail.com>
Co-authored-by: Angelo <angelo@angeloanan.xyz>

Author: 3 people

src/components/SiteHeader.tsx

@@ -7,7 +7,7 @@ import { KominfodLogo } from './KominfodLogo'
 export function SiteHeader() {
   return (
     <header className='flex h-[60px] w-full items-center bg-brand-bg px-4'>
-      <div className='mx-auto flex w-full max-w-screen-sm items-center justify-between'>
+      <div className='mx-auto flex w-full max-w-screen-xl items-center justify-between'>
         <Link href='/'>
           <a>
             <span className='sr-only'>Kominfo&apos;d</span>

src/pages/index.tsx

@@ -72,14 +72,14 @@ const IndexPage = ({ PSEData: data, blockData, trustPositifData }: IndexPageProp
       <div className='flex flex-col bg-brand-bg-light'>
         <SiteHeader />
         <PageContent>
-          <div className='mx-auto w-full max-w-screen-sm'>
+          <div className='mx-auto w-full max-w-screen-xl'>
             <div className='space-y-8'>
               <WelcomeMessageSection />
               {websiteSections.map((item) => (
                 <section key={item.title}>
                   <h2 className='text-2xl font-semibold'>{item.title}</h2>
                   <div>{item.description}</div>
-                  <ul className='mt-4 grid grid-flow-row grid-cols-1 gap-8 sm:grid-cols-2'>
+                  <ul className='mt-4 grid max-w-screen-xl grid-flow-row grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
                     {item.sites.map((website) => (
                       <WebsiteEntry
                         website={website.icon}