Skip to content

Commit

Permalink
Merge pull request #11 from UKM-Programming-UMDP/herlin-dev
Browse files Browse the repository at this point in the history 
refactor home page
  • Loading branch information
@UsmanYap
UsmanYap authored Nov 30, 2024
2 parents bdc1cf7 + 04b9228 commit 3479dec
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 39 deletions.
50 changes: 50 additions & 0 deletions src/content/home/dataUnitKegiatan.js
View file
Original file line number Diff line number Diff line change
@@ -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",
],
},
};
78 changes: 39 additions & 39 deletions src/views/home/components/unitKegiatan.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import ukm from "@assets/figure-UKM.png";

import { dataUnitKegiatan } from "@content/home/dataUnitKegiatan";
export const UnitKegiatan = () => {
return (
<div
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -57,43 +60,40 @@ 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>

<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>
Expand Down

0 comments on commit 3479dec

Please sign in to comment.