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

Finalization & add photo for keuntungan
OH-Fasilkom-UI · Oct 16, 2023 · b9e21bc · b9e21bc
2 parents 29a0de2 + 4c9505d
commit b9e21bc
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 58 deletions.
diff --git a/public/registration/campus-tour.jpg b/public/registration/campus-tour.jpg
diff --git a/public/registration/coding-exp.jpg b/public/registration/coding-exp.jpg
diff --git a/public/registration/interactive-class.jpg b/public/registration/interactive-class.jpg
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -27,7 +27,7 @@ export default function Home() {
             <h2 className="text-2xl mb-2 font-semibold font-satoshi">{is_counting ? "Open registration" : "Close registration"}</h2>
             <Image src="/home/countdown-arrow.svg" alt="" width={100} height={100}/>
             <Countdown date={is_counting ? countdown : next_countdown} />
-            <h3 className="text-sm sm:text-lg font-bold">{is_counting ? "17 Oktober 2023, 12:00 GMT+7" : "21 Oktober 2023, 23:59 GMT+7"}</h3>
+            <h3 className="mt-2 text-sm sm:text-lg font-bold">{is_counting ? "17 Oktober 2023, 12:00 GMT+7" : "21 Oktober 2023, 23:59 GMT+7"}</h3>
           </div>
             <div className="flex items-center gap-3">
               <Link href="#definition">

diff --git a/src/pages/registration.tsx b/src/pages/registration.tsx
@@ -18,53 +18,51 @@ export default function Home() {
     <main className="bg-black-1">
       <section className="bg-[url(/registration/bg-countdown.png)] bg-cover bg-center min-h-screen flex items-center justify-center relative pt-16">
         {/* <Image src="/home/background-header.png" alt="" width={1440} height={900} className="absolute top-0 left-0 object-cover brightness-[.6]" /> */}
-        <div className="z-10 text-center flex flex-col items-center justify-center gap-4 sm:gap-7 mx-5 backdrop-blur bg-black-3 sm:px-16 py-10 rounded-3xl border-2 border-green-300">
+        <div className="mt-10 z-10 text-center flex flex-col items-center justify-center gap-4 sm:gap-7 mx-5 backdrop-blur bg-black-3 sm:px-16 py-10 rounded-3xl border-2 border-green-300">
           <h1 className="font-satoshi text-white-1 bg-clip-text font-extrabold text-3xl sm:text-5xl drop-shadow-sm shadow-white px-5">
             OPEN REGISTRATION
             <br />
             <span className="text-lg sm:text-2xl">
             OPEN HOUSE FASILKOM 2023
             </span>
           </h1>
-          <div className="font-satoshi text-center flex flex-col items-center text-lg w-full">
-          <h2 className="text-2xl mb-2 font-semibold font-satoshi">{is_counting ? "Open registration" : "Close registration"}</h2>
+          <div className="font-satoshi text-center flex flex-col items-center text-lg w-full px-2">
+            <h2 className="text-2xl mb-2 font-semibold font-satoshi">{is_counting ? "Open registration" : "Close registration"}</h2>
             <Image src="/home/countdown-arrow.svg" alt="" width={100} height={100}/>
             <Countdown date={is_counting ? countdown : next_countdown} />
-            <h3 className="text-sm sm:text-lg font-bold">{is_counting ? "17 Oktober 2023, 12:00 GMT+7" : "21 Oktober 2023, 23:59 GMT+7"}</h3>
+            <h3 className="mt-2 text-sm sm:text-lg font-bold">{is_counting ? "17 Oktober 2023, 12:00 GMT+7" : "21 Oktober 2023, 23:59 GMT+7"}</h3>
+          </div>
+          <div className="flex sm:flex-row flex-col-reverse items-center gap-3">
+            <Link href="#keseruan" className="sm:w-auto w-full">
+              <Button variant="secondary" className="sm:w-auto w-full font-satoshi font-bold">
+                <HiBookOpen />
+                Learn More
+              </Button>
+            </Link>
+            {is_counting ? (
+              <Button 
+                variant="primary"
+                className="opacity-30 font-satoshi font-bold sm:w-auto w-full"
+                onClick={() => {
+                  notifications.show({
+                    title: 'Hi AInergic, sesaat lagi registrasi Open House Fasilkom UI akan dibuka',
+                    message: 'Silahkan cek lagi web page ini pada pukul 12.00 WIB, 17 Oktober yaa. See you soon!',
+                    color: "red"
+                  })
+                }}
+              >
+                <HiChevronDoubleRight />
+                Register Now
+              </Button>
+            ) : (
+              <Link target="_blank" href="https://forms.gle/NE545DK7YVqYf5Vg7">
+                <Button variant="primary" className="sm:w-auto w-full font-satoshi font-bold">
+                  <HiChevronDoubleRight />
+                  Register Now
+                </Button>
+              </Link>
+            )}
           </div>
-            <div className="flex sm:flex-row flex-col items-center gap-3">
-                <div className="flex items-center gap-3">
-                  <Link href="#keseruan">
-                    <Button variant="secondary" className="font-satoshi font-bold">
-                      <HiBookOpen />
-                      Learn More
-                    </Button>
-                  </Link>
-                  {is_counting ? (
-                    <Button 
-                      variant="primary"
-                      className="opacity-30 sm:w-auto w-full font-satoshi font-bold"
-                      onClick={() => {
-                        notifications.show({
-                          title: 'Hi AInergic, sesaat lagi registrasi Open House Fasilkom UI akan dibuka',
-                          message: 'Silahkan cek lagi web page ini pada pukul 12.00 WIB, 17 Oktober yaa. See you soon!',
-                          color: "red"
-                        })
-                      }}
-                    >
-                      <HiChevronDoubleRight />
-                      Register Now
-                    </Button>
-                  ) : (
-                    <Link target="_blank" href="https://forms.gle/NE545DK7YVqYf5Vg7">
-                      <Button variant="primary" className="sm:w-auto w-full font-satoshi font-bold">
-                        <HiChevronDoubleRight />
-                        Register Now
-                      </Button>
-                    </Link>
-                  )}
-                </div>
-            </div>
         </div>
       </section>
       <section id="keseruan" className="my-20">

diff --git a/src/sections/registration/ContactPerson.tsx b/src/sections/registration/ContactPerson.tsx
@@ -20,7 +20,12 @@ const ContactPerson = () => {
             className="w-full"
           >
             <Button variant="primary" className="w-full">
-              <BsWhatsapp /> Open House Fasilkom UI
+              <div>
+                <BsWhatsapp />
+              </div>
+              <p>
+                Open House Fasilkom UI
+              </p>
             </Button>
           </a>
         </div>

diff --git a/src/sections/registration/FAQ.tsx b/src/sections/registration/FAQ.tsx
@@ -41,9 +41,9 @@ const FAQ = () => {
                         Frequently Asked Questions
                     </h3>
                 </div>
-                <div className="flex flex-col my-8 items-center px-5">
+                <div className="flex flex-col my-8 items-center px-5 w-full">
                     {contentData.map((item, index) => (
-                        <div className="my-2 items-center sm:w-4/5" key={index}>
+                        <div className="my-2 items-center sm:w-4/5 w-full" key={index}>
                             <Dropdown header={item.header} body={item.body} />
                         </div>
                     ))}

diff --git a/src/sections/registration/Keseruan.tsx b/src/sections/registration/Keseruan.tsx
@@ -12,17 +12,6 @@ const events: {
   date: string,
   location: string
 }[] = [
-  {
-    img: "/icon/registration/icon-connect.png",
-    title: "CS Connect",
-    desc: `CS Connect adalah kegiatan yang akan diisi dengan Talkshow Online di main room Zoom dengan 
-    menghadirkan pengisi acara yang akan membawakan informasi-informasi tentang Fasilkom UI. Setelah sesi 
-    talkshow berakhir, peserta akan di-assign ke masing-masing breakout room untuk melaksanakan Mentoring 
-    Online dengan mentornya masing-masing dari LO. Materi yang diberikan akan berupa pengenalan jurusan 
-    yang ada di Fasilkom UI dan informasi teknis kegiatan pada Main Event selanjutnya.`,
-    date: "Minggu, 5 November 2023",
-    location: "Zoom Meeting"
-  },
   {
     img: "/icon/registration/icon-tourdecampus.png",
     title: "Tour de Campus",
@@ -66,6 +55,17 @@ const events: {
     date: "Sabtu, 18 November 2023",
     location: "Auditorium Gedung Lama Fasilkom UI"
   },
+  {
+    img: "/icon/registration/icon-connect.png",
+    title: "CS Connect",
+    desc: `CS Connect adalah kegiatan yang akan diisi dengan Talkshow Online di main room Zoom dengan 
+    menghadirkan pengisi acara yang akan membawakan informasi-informasi tentang Fasilkom UI. Setelah sesi 
+    talkshow berakhir, peserta akan di-assign ke masing-masing breakout room untuk melaksanakan Mentoring 
+    Online dengan mentornya masing-masing dari LO. Materi yang diberikan akan berupa pengenalan jurusan 
+    yang ada di Fasilkom UI dan informasi teknis kegiatan pada Main Event selanjutnya.`,
+    date: "Minggu, 5 November 2023",
+    location: "Zoom Meeting"
+  },
 ]
 
 export default function Keseruan() {
@@ -124,7 +124,7 @@ export default function Keseruan() {
               ))}
             </Carousel>
         ) : (
-          <div onClick={() => {setSelectedEvent(events[0]); setShowModal(true)}} className="hover:cursor-pointer border-green-300 border-2 shadow backdrop-blur-3xl rounded-lg items-center flex flex-col justify-between gap-4 h-[250px] pt-10 pb-10 px-5 mx-10">
+          <div onClick={() => {setSelectedEvent(events[1]); setShowModal(true)}} className="hover:cursor-pointer border-green-300 border-2 shadow backdrop-blur-3xl rounded-lg items-center flex flex-col justify-between gap-4 h-[250px] pt-10 pb-10 px-5 mx-10">
             <div className="h-5/6 w-full flex items-center justify-center object-contain">
               <Image src="/icon/registration/icon-connect.png" alt="" width={100} height={100} className="object-contain h-full w-full"/>
             </div>

diff --git a/src/sections/registration/Keuntungan.tsx b/src/sections/registration/Keuntungan.tsx
@@ -5,19 +5,19 @@ const benefits: {
   desc: string
 }[] = [
   {
-    img: "https://hololive.hololivepro.com/wp-content/uploads/2022/04/%E3%82%AB%E3%83%AA%E3%82%AA%E3%83%9A.png",
+    img: "/home/cs-connect.png",
     desc: "Relasi"
   },
   {
-    img: "https://hololive.hololivepro.com/wp-content/uploads/2023/01/Takanashi-Kiara_thumb.png",
+    img: "/registration/campus-tour.jpg",
     desc: "Campus Tour"
   },
   {
-    img: "https://hololive.hololivepro.com/wp-content/uploads/2022/04/%E3%81%84%E3%81%AA%E3%81%AB%E3%81%99.png",
+    img: "/registration/coding-exp.jpg",
     desc: "Coding Experience"
   },
   {
-    img: "https://hololive.hololivepro.com/wp-content/uploads/2022/04/%E3%81%90%E3%82%89.png",
+    img: "/registration/interactive-class.jpg",
     desc: "Interactive Class"
   },
 ]
@@ -32,7 +32,7 @@ export default function Keuntungan() {
         {benefits.map((benefit, index) => (
           <div key={index} className="h-full border-green-300 border-2 shadow backdrop-blur-3xl rounded-lg items-center flex flex-col gap-4 pt-10 pb-6 px-5">
             <div className="sm:w-5/6 w-full  flex items-center justify-center object-contain">
-              <Image src={benefit.img} alt="" width={100} height={100} className="object-contain h-full w-full"/>
+              <Image src={benefit.img} alt="" width={100} height={100} className="object-contain h-full w-full rounded-2xl"/>
             </div>
             <p className="flex justify-center items-center font-satoshi text-white-1 font-extrabold text-center">{benefit.desc}</p>
           </div>