Merge pull request #43 from OH-Fasilkom-UI/feat/gilang

Feat/gilang

package.json

@@ -23,7 +23,6 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
-    "embla-carousel-react": "8.0.0-rc14",
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.19",
     "next": "^13.4.19",

src/pages/index.tsx

@@ -27,7 +27,7 @@ export default function Home() {
             <h2 className="text-2xl mb-2 text-white-1 font-bold font-satoshi">Open registration</h2>
             <Image src="/home/countdown-arrow.svg" alt="" width={100} height={100}/>
             <Countdown date={next_countdown} />
-            <h3 className="text-lg font-bold">23 Oktober 2023, 12:00 GMT+7</h3>
+            <h3 className="text-sm sm:text-lg font-bold">23 Oktober 2023, 12:00 GMT+7</h3>
           </div>
             {is_counting ? 
               <div className="flex items-center gap-3">
@@ -67,7 +67,7 @@ export default function Home() {
         <VideoOH />
       </section>
       <section className="pb-20">
-        {/* <WTS/> */}
+        <WTS/>
       </section>
 
     </main>

src/sections/about/WhatIsPacil.tsx

@@ -1,5 +1,5 @@
-import { HiUserPlus } from "react-icons/hi2"
 import Image from 'next/image'
+import { HiOutlineArrowLeft, HiOutlineArrowRight } from 'react-icons/hi2'
 import { Carousel } from "@mantine/carousel"
 import { Button } from "../../components/elements/Button"
 
@@ -47,6 +47,16 @@ export const WhatIsPacil = () => {
           slidesToScroll={1}
           slideGap="md"
           slideSize="100%"
+          previousControlIcon={
+            <div className="bg-emerald-200 rounded-full p-2">
+              <HiOutlineArrowLeft/>
+            </div>
+        }
+        nextControlIcon={
+            <div className="bg-emerald-200 rounded-full p-2">
+              <HiOutlineArrowRight/>
+            </div>
+        }
           className="w-full sm:w-96"
         >
           <Carousel.Slide>

src/sections/home/Definition.tsx

@@ -1,7 +1,8 @@
 import Image from "next/image";
 import { Button } from "@/components/elements/Button";
-import { HiOutlineArrowRight } from 'react-icons/hi2'
+import { HiOutlineArrowLeft, HiOutlineArrowRight } from 'react-icons/hi2'
 import { Carousel } from '@mantine/carousel';
+import { useRef } from "react";
 
 const images = [
   "/home/definition-1.jpg",
@@ -50,6 +51,16 @@ export default function Definition() {
             loop
             align="start"
             slidesToScroll={1}
+            previousControlIcon={
+                <div className="bg-emerald-200 rounded-full p-2">
+                  <HiOutlineArrowLeft/>
+                </div>
+            }
+            nextControlIcon={
+                <div className="bg-emerald-200 rounded-full p-2">
+                  <HiOutlineArrowRight/>
+                </div>
+            }
             className="w-full"
           >
             {

src/sections/home/WTS.tsx

@@ -5,28 +5,34 @@ import { HiArrowLeft, HiArrowRight } from 'react-icons/hi2'
 
 const testimonials = [
   {
-    name: 'Mori Calliope',
-    imageUrl: "https://hololive.hololivepro.com/wp-content/uploads/2021/04/unnamed-file-6-855x1536.png",
-    quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    major: "Ilmu Komputer 2024",
+    name: 'Waode Inaya Diza Ma’inah',
+    imageUrl: "/home/Diza.jpg",
+    quote: 'Such a fun experience! Ketemu sama kakak pacil dan ngerasain gimana sih jadi anak pacil dalam setengah hari. Diceritainn pengalaman merekaa di organisasi, magang, dan juga pengalaman selama di pacil. Pokoknya buat kalian yang bingung dan penasaran di Fasilkom UI gimana, cocok banget nih buat ikutan Open House Fasilkom UI 2023!!',
+    major: "Sistem Informasi 2023",
   },
   {
-    name: 'Mori Calliope',
-    imageUrl: "https://hololive.hololivepro.com/wp-content/uploads/2021/04/unnamed-file-6-855x1536.png",
-    quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    major: "Ilmu Komputer 2024",
+    name: 'Sayyid Thariq Gilang Muttaqien',
+    imageUrl: "/home/Sayyid.jpg",
+    quote: 'Open House Fasilkom UI seru banget! Acaranya informatif, menarik, dan membangkitkan semangat untuk masuk Fasilkom. Banyak informasi yang tadinya saya tidak tahu disediakan dan dipaparkan di Open House Fasilkom ini. Rangkaian acaranya juga menarik, salah satu yang paling seru adalah Tour De Campus dan Fun Coding. Open House Fasilkom recommended banget deh buat kalian yang tertarik sama bidang IT ataupun buat kalian yang masih ragu untuk masuk jurusan apa.',
+    major: "Sistem Informasi 2023",
   },
   {
-    name: 'Mori Calliope',
-    imageUrl: "https://hololive.hololivepro.com/wp-content/uploads/2021/04/unnamed-file-6-855x1536.png",
-    quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    major: "Ilmu Komputer 2024",
+    name: 'Karina Maharani',
+    imageUrl: "/home/Karina.jpg",
+    quote: 'Worth it, banyak banget info yang aku dapetin selama Open House Fasilkom. Selama ikut Open House Fasilkom, hal yang jadi paling memorable buat aku adalah sesi Fun Coding di mana kita bisa main game sambil belajar coding di sesi Fun Coding. Tidak hanya itu, Tour De Campus juga menjadi highlight karena sesi ini dibarengi dengan kakak yang keren. Setelah Open House Fasilkom, aku bukan hanya makin kenal dengan Fasilkom UI tapi juga makin kenal dengan teman-teman yang sekarang menjadi teman seangkatan di Fasilkom angkatan 2023. Pokoknya bagi yang masih ragu, jangan segan-segan untuk daftar.',
+    major: "Sistem Informasi 2023",
   },
   {
-    name: 'Mori Calliope',
-    imageUrl: "https://hololive.hololivepro.com/wp-content/uploads/2021/04/unnamed-file-6-855x1536.png",
-    quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    major: "Ilmu Komputer 2024",
+    name: 'Patricia Herningtyas',
+    imageUrl: "/home/Tyas.jpg",
+    quote: 'OH Fasilkom tahun 2022, pengalaman yang bikin keputusanku semakin bulat untuk masuk Fasilkom UI! Di OH, aku dapat wawasan baru karena bebas tanya apapun tentang kehidupan di pacil :)\nDari semua rangkaian acara, favoritku adalah Fun Coding dan Interactive Class. Waktu itu aku belum bisa ngoding dan gapapa banget #rill!!! Karena bakal ditemenin step by step sama kakak-kakak yang seru dan helpful.',
+    major: "Ilmu Komputer 2023",
+  },
+  {
+    name: 'Athazahra Nabila Ruby',
+    imageUrl: "/home/Zahra.jpg",
+    quote: 'Open House Fasilkom tahun lalu seru banget, bener-bener bikin kebayang jadi mahasiswa Fasilkom tuh gimana! Kakak-kakak mentornya super baik & santai, ada sesi Fun Coding (beneran coding dibuat fun), Interactive Class (dari dosen Fasilkom langsung), dan pokoknya jadi kedorong bgtt kemauan aku buat masuk Fasilkom. 10/10 recommend buat yg tertarik Fasilkom! (syp tahu jadi manifestasi)',
+    major: "Ilmu Komputer 2023",
   },
 ]
 
@@ -51,16 +57,16 @@ const WTS = () => {
                       <aside className={`${selected !== index ? "flex-1" : "w-1/3"} min-w-[200px]`}>
                         <div className="flex flex-col items-center h-full justify-center">
                         <div className=" rounded-full bg-white-2 w-36 h-36 block mb-5">
-                        {/* <Image src={testimonial.imageUrl} alt="" width={100} height={100} className="" /> */}
+                          <Image src={testimonial.imageUrl} alt="" width={100} height={100} className="" />
                         </div>
                         <h1 className="text-2xl text-white-1 font-semibold">{testimonial.name}</h1>
                         <p className="text-sm font-semibold">{testimonial.major}</p>
                         </div>
                       </aside>
                       <aside className={`${selected === index ? "flex-1 px-5 sm:px-10": "w-0"} transition-all duration-300 relative overflow-hidden text-left flex flex-col gap-3 justify-center`}>
-                        <Image src='/left-quote.png' alt="" width={30} height={30} className={`${selected === index ? "opacity-100 delay-200" : "opacity-0 duration-0"} transition-opacity duration-500 mr-auto`} />
+                        <Image src='/home/left-quote.png' alt="" width={30} height={30} className={`${selected === index ? "opacity-100 delay-200" : "opacity-0 duration-0"} transition-opacity duration-500 mr-auto`} />
                         <p className={`${selected === index ? "opacity-100 delay-200" : "opacity-0 transition-none"} max-w-[30ch] sm:max-w-prose text-white-1 transition-opacity duration-500`}>{testimonial.quote}</p>
-                        <Image src='/right-quote.png' alt="" width={30} height={30} className={`${selected === index ? "opacity-100 delay-200" : "opacity-0 duration-0"} transition-opacity duration-500 ml-auto`} />
+                        <Image src='/home/right-quote.png' alt="" width={30} height={30} className={`${selected === index ? "opacity-100 delay-200" : "opacity-0 duration-0"} transition-opacity duration-500 ml-auto`} />
                       </aside>
                     </article>
                 ))