From 04b92284f2644c0bfaf23240d9451911285cf49b Mon Sep 17 00:00:00 2001
From: Herlin6 <156332335+Herlin6@users.noreply.github.com>
Date: Sat, 30 Nov 2024 14:28:00 +0700
Subject: [PATCH 1/2] refactor home page

---
 src/content/home/dataUnitKegiatan.js       | 50 ++++++++++++++
 src/views/home/components/unitKegiatan.jsx | 78 +++++++++++-----------
 2 files changed, 89 insertions(+), 39 deletions(-)
 create mode 100644 src/content/home/dataUnitKegiatan.js

diff --git a/src/content/home/dataUnitKegiatan.js b/src/content/home/dataUnitKegiatan.js
new file mode 100644
index 0000000..20426a4
--- /dev/null
+++ b/src/content/home/dataUnitKegiatan.js
@@ -0,0 +1,50 @@
+export const dataUnitKegiatan = {
+  ukmKesenian: {
+    title: "UKM KESENIAN",
+    description: ["Marching Band", "Band", "Tari", "Paduan Suara"],
+  },
+
+  ukmKeagamaan: {
+    title: "UKM KEAGAMAAN",
+    description: [
+      "Lembaga Dakwah Kampus Raudhatul Jannah (LDK RJ)",
+      "Persekutuan Mahasiswa Kristen (PMK)",
+      "Persaudaraan Mahasiswa Buddhis (Permadhis)",
+    ],
+  },
+
+  himpunanMahasisa: {
+    title: "HIMPUNAN MAHASISWA",
+    description: [
+      "Sistem Informasi (HIMSI)",
+      "Informatika (HIMIF)",
+      "Teknik Elektro (HMTE)",
+      "Manajemen Informatika (HIMMI)",
+      "Manajemen (MANCOM)",
+      "Akuntansi (HIMAKSI)",
+    ],
+  },
+
+  ukmLainnya: {
+    title: "UKM LAINNYA",
+    description: [
+      "Komunitas Sosial Mahasiswa (KOSMA)",
+      "Mahasiswa Pecinta Alam (MAPALA)",
+      "Programming Community",
+      "Entrepreneur Community",
+      "Galeri Investasi",
+    ],
+  },
+
+  ukmOlahraga: {
+    title: "UKM OLAHRAGA",
+    description: [
+      "Basket",
+      "Badminton",
+      "Taekwondo",
+      "Futsal",
+      "Volly",
+      "E-Sport",
+    ],
+  },
+};
diff --git a/src/views/home/components/unitKegiatan.jsx b/src/views/home/components/unitKegiatan.jsx
index b5f97cc..79f6559 100644
--- a/src/views/home/components/unitKegiatan.jsx
+++ b/src/views/home/components/unitKegiatan.jsx
@@ -1,5 +1,5 @@
 import ukm from "@assets/figure-UKM.png";
-
+import { dataUnitKegiatan } from "@content/home/dataUnitKegiatan";
 export const UnitKegiatan = () => {
   return (
     <div
@@ -14,19 +14,20 @@ export const UnitKegiatan = () => {
         UNIT KEGIATAN MAHASISWA
       </h1>
 
-      <div className="flex flex-col lg:flex-row justify-center gap-8 mt-4 mb-4">
+      <div className="flex flex-col lg:flex-row justify-center gap-8 mt-4 mb-4 lg:px-0 md:px-16 px-10">
         <div className="lg:w-1/2">
           <div data-aos="fade-right" data-aos-duration="700">
             <h3 className="text-xl font-bold">UKM KESENIAN</h3>
             <div className="card-unit p-3 mt-3 bg-gray-100 rounded-lg">
-              <div className="flex gap-5">
-                <ul className="list-disc pl-5 text-base">
-                  <li>Marching Band</li>
-                  <li>Paduan Suara</li>
-                </ul>
-                <ul className="list-disc pl-5 text-base">
-                  <li>Tari</li>
-                  <li>Band</li>
+              <div className="flex text-base">
+                <ul className="list-disc flex flex-wrap gap-1 pl-4 sm:text-base text-sm min-[1250px]:flex-row flex-col">
+                  {dataUnitKegiatan.ukmKesenian.description.map(
+                    (data, index) => (
+                      <li className="flex-1 min-w-[40%]" key={index}>
+                        {data}
+                      </li>
+                    )
+                  )}
                 </ul>
               </div>
             </div>
@@ -38,17 +39,19 @@ export const UnitKegiatan = () => {
           >
             <img
               src={ukm}
-              className="max-[1086px]:w-[57%] max-[1150px]:w-[56%] max-[1200px]:w-[52%] max-[1300px]:w-[48%] xl:w-[27.5%] "
+              className="max-[1086px]:w-[57%] max-[1150px]:w-[56%] max-[1200px]:w-[52%] max-[1300px]:w-[48%] xl:w-[27.5%] max-[1250px]:w-[63%]"
               alt="image"
             />
           </div>
           <div data-aos="fade-right" data-aos-duration="900">
             <h3 className="mt-3 mb-3 text-xl font-bold">UKM KEAGAMAAN</h3>
             <div className="card-unit p-3 mt-3 mb-3 bg-gray-100 rounded-lg">
-              <ul className="list-disc pl-5 text-base">
-                <li>Lembaga Dakwah Kampus Raudhatul Jannah (LDK RJ)</li>
-                <li>Persejutuan Mahasiswa Kristen (PMK)</li>
-                <li>Persaudaraan Mahasiswa Buddhis (Permadhis)</li>
+              <ul className="list-disc pl-5 sm:text-base text-sm">
+                {dataUnitKegiatan.ukmKeagamaan.description.map(
+                  (data, index) => (
+                    <li key={index}>{data}</li>
+                  )
+                )}
               </ul>
             </div>
           </div>
@@ -57,32 +60,27 @@ export const UnitKegiatan = () => {
           <div data-aos="fade-left" data-aos-duration="700">
             <h3 className="text-xl font-bold mb-3">HIMPUNAN MAHASISWA</h3>
             <div className="card-unit p-3 lg:mb-8 mb-3 mt-3 bg-gray-100 rounded-lg">
-              <ul className="list-disc flex flex-wrap gap-1 pl-4 text-base">
-                <li className="flex-1 min-w-[35%]">Sistem Informasi (HIMSI)</li>
-                <li className="flex-1 min-w-[35%]">Informatika (HIMIF)</li>
-                <li className="flex-1 min-w-[35%]">Teknik Elektro (HMTE)</li>
-                <li className="flex-1 min-w-[35%]">
-                  Manajemen Informatika (HIMMI)
-                </li>
-                <li className="flex-1 min-w-[35%]">Manajemen (MANCOM)</li>
-                <li className="flex-1 min-w-[35%]">Akuntansi (Himaksi)</li>
+              <ul className="list-disc flex flex-wrap gap-1 pl-4 sm:text-base text-sm min-[1250px]:flex-row flex-col">
+                {dataUnitKegiatan.himpunanMahasisa.description.map(
+                  (data, index) => (
+                    <li className="flex-1 min-w-[35%]" key={index}>
+                      {data}
+                    </li>
+                  )
+                )}
               </ul>
             </div>
           </div>
 
           <div data-aos="fade-left" data-aos-duration="900">
             <h3 className="text-xl font-bold mb-3">UKM LAINNYA</h3>
-            <div className="card-unit p-3 lg:mb-8 mb-4 bg-gray-100 rounded-lg h-full">
-              <ul className="list-disc flex flex-wrap gap-1 pl-4 text-base">
-                <li className="flex-1 min-w-[40%]">
-                  Komunitas Sosial Mahasiswa (KOSMA)
-                </li>
-                <li className="flex-1 min-w-[40%]">
-                  Mahasiswa Pecinta Alam (MAPALA)
-                </li>
-                <li className="flex-1 min-w-[40%]">Programming Community</li>
-                <li className="flex-1 min-w-[40%]">Entrepreneur Community</li>
-                <li className="flex-1 min-w-[40%]">Galeri Investasi</li>
+            <div className="card-unit p-3 lg:mb-8 mb-4 bg-gray-100 rounded-lg">
+              <ul className="list-disc flex flex-wrap gap-1 pl-4 sm:text-base text-sm min-[1250px]:flex-row flex-col">
+                {dataUnitKegiatan.ukmLainnya.description.map((data, index) => (
+                  <li className="flex-1 min-w-[40%]" key={index}>
+                    {data}
+                  </li>
+                ))}
               </ul>
             </div>
           </div>
@@ -90,10 +88,12 @@ export const UnitKegiatan = () => {
           <div data-aos="fade-left" data-aos-duration="1100">
             <h3 className="mt-2 text-xl font-bold">UKM OLAHRAGA</h3>
             <div className="card-unit p-3 mt-3 bg-gray-100 rounded-lg h-full">
-              <ul className="list-disc pl-5 text-base">
-                <li>Marching Band</li>
-                <li>Paduan Suara</li>
-                <li>Tari</li>
+              <ul className="list-disc flex flex-wrap gap-1 pl-4 sm:text-base text-sm min-[1250px]:flex-row flex-col">
+                {dataUnitKegiatan.ukmOlahraga.description.map((data, index) => (
+                  <li className="flex-1 min-w-[40%]" key={index}>
+                    {data}
+                  </li>
+                ))}
               </ul>
             </div>
           </div>

From 5d6c263a776f9141a9b727ddfd56b3a794d21558 Mon Sep 17 00:00:00 2001
From: Herlin6 <156332335+Herlin6@users.noreply.github.com>
Date: Sat, 30 Nov 2024 14:57:29 +0700
Subject: [PATCH 2/2] Update bidangEksekutif.jsx

---
 src/views/home/components/bidangEksekutif.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/home/components/bidangEksekutif.jsx b/src/views/home/components/bidangEksekutif.jsx
index ad270b9..bf5faea 100644
--- a/src/views/home/components/bidangEksekutif.jsx
+++ b/src/views/home/components/bidangEksekutif.jsx
@@ -20,7 +20,7 @@ export const BidangEksekutif = () => {
       </div>
 
       <div className="flex flex-col-reverse min-[1300px]:flex-row mt-3 mb-3 justify-center items-center">
-        <div className="flex flex-wrap justify-center items-center gap-4 min-[1300px]:w-1/2 mt-4 mb-4">
+        <div className="flex flex-wrap justify-center items-center gap-4 min-[1300px]:w-1/2 min-[1420px]:w-50 mt-4 mb-4 xl:p-0 sm:p-24 p-6">
           {dataEksekutif.map((item, index) => (
             <div
               key={index}
@@ -28,7 +28,7 @@ export const BidangEksekutif = () => {
                 index % 3 === 0
                   ? "bg-dark-blue text-white lg:bg-dark-blue lg:text-white"
                   : "text-black"
-              } border-bidang-eksekutif p-4 shadow-lg w-full min-[1300px]:w-80 leading-8 tracking-normal h-full`}
+              } border-bidang-eksekutif p-4 shadow-lg w-full min-[1300px]:w-60 leading-8 tracking-normal h-full`}
               data-aos="zoom-in"
               data-aos-duration={duration(index)}
             >
@@ -41,7 +41,7 @@ export const BidangEksekutif = () => {
                   <img
                     src={item.icon}
                     alt="icon"
-                    className={`w-12 h-full ${
+                    className={`w-10 h-full ${
                       index % 3 === 0 ? "filter-dark-blue" : ""
                     }`}
                   />
@@ -53,7 +53,7 @@ export const BidangEksekutif = () => {
           ))}
         </div>
 
-        <div className="lg:w-2/5 mt-4 mb-4">
+        <div className="lg:w-2/5 w-2/3 mt-4 mb-4">
           <img
             src={img}
             alt="Keluarga Cemara"