style: Enhance Spacing & Add Borders for Better UI

- Adjusted spacing between elements to improve overall layout and readability.
- Added borders to specific components for a more defined and polished appearance.
- Ensured these style changes maintain consistency across different screen sizes.

Co-Authored-By: Jagad Brahma Wiraatmaja <officialelsa21@gmail.com>

Author: sayaptawon

src/components/Gallery.js

@@ -143,7 +143,7 @@ const Gallery = () => {
               <img
                 src={image.src}
                 alt={image.alt}
-                className='w-full h-full object-contain rounded-lg transition-opacity duration-300'
+                className='w-full h-full object-contain rounded-lg border transition-opacity duration-300'
                 loading='lazy'
               />
             </div>

src/components/InformationBoards.js

@@ -3,11 +3,11 @@ import data from '@/data/informationBoardsData.json';
 
 const InformationBoards = () => {
   return (
-    <section data-theme='corporate' className='p-6 border-b border-gray-200'>
-      <div className='grid gap-2 md:grid-cols-2'>
+    <section data-theme='corporate' className='p-4 border-b border-gray-200'>
+      <div className='grid gap-6 md:grid-cols-2'>
         {/* Tabel Jam Layanan */}
-        <div className='bg-white shadow-lg rounded-lg'>
-          <h3 className='text-lg md:text-xl font-semibold text-primary mb-4 text-center'>
+        <div className='bg-white shadow-lg rounded-lg border'>
+          <h3 className='text-lg md:text-xl font-semibold text-primary my-4 text-center'>
             {data.informationBoards[0].title}
           </h3>
           <div className='overflow-x-auto'>
@@ -38,8 +38,8 @@ const InformationBoards = () => {
           </div>
         </div>
         {/* Tabel Hari Kunjungan */}
-        <div className='bg-white shadow-lg rounded-lg'>
-          <h3 className='text-lg md:text-xl font-semibold text-primary mb-4 text-center'>
+        <div className='bg-white shadow-lg rounded-lg border'>
+          <h3 className='text-lg md:text-xl font-semibold text-primary my-4 text-center'>
             {data.informationBoards[1].title}
           </h3>
           <div className='overflow-x-auto'>

src/components/StatisticsWBP.js

@@ -50,14 +50,14 @@ const StatisticsWBP = () => {
   }, [processData]);
 
   return (
-    <section data-theme='corporate' className='p-6 border-b border-gray-200'>
+    <section data-theme='corporate' className='p-4 border-b border-gray-200'>
       <h2 className='text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-6 text-center'>
         Data Warga Binaan Pemasyarakatan
       </h2>
       <div className='bg-transparent'>
-        <div className='grid grid-cols-1 md:grid-cols-2 gap-2'>
+        <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
           {/* Tabel Tahanan */}
-          <div className='bg-white shadow-md rounded-lg'>
+          <div className='bg-white shadow-md rounded-lg border'>
             <h3 className='text-lg font-semibold text-primary text-center p-4 border-b'>
               Tahanan
             </h3>
@@ -87,7 +87,7 @@ const StatisticsWBP = () => {
             </div>
           </div>
           {/* Tabel Narapidana */}
-          <div className='bg-white shadow-md rounded-lg'>
+          <div className='bg-white shadow-md rounded-lg border'>
             <h3 className='text-lg font-semibold text-primary text-center p-4 border-b'>
               Narapidana
             </h3>
@@ -130,7 +130,7 @@ const StatisticsWBP = () => {
           </table>
         </div>
         <div className='mt-4 text-center'>
-          <p className='text-gray-600 small'>
+          <p className='text-gray-600 text-sm'>
             Data terakhir diperbarui pada: {lastUpdated}
           </p>
         </div>

src/components/Team.js

@@ -20,7 +20,7 @@ const Team = () => {
         {teamData.map((member, index) => (
           <div
             key={index}
-            className='card bg-gradient-to-r from-blue-500 to-teal-500 text-base-content shadow-md transition-shadow duration-300 hover:shadow-lg'
+            className='card bg-gradient-to-r from-blue-500 to-teal-500 text-base-content shadow-md border transition-shadow duration-300 hover:shadow-lg'
           >
             <figure className='relative w-full h-40 flex items-center justify-center'>
               <div className='mask mask-circle w-24 h-24 flex items-start justify-center'>