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

Feat/gilang

src/components/Navbar.tsx

@@ -8,27 +8,6 @@ import { STYLE_GUIDE } from './elements/Button/constant';
 import { HiMenuAlt3 } from 'react-icons/hi';
 import { HiX } from 'react-icons/hi';
 
-const NavLink = ({
-    children,
-    isActive,
-    href,
-    className,
-    disabled
-}: {
-    children: React.ReactNode;
-    isActive: boolean;
-    href: string;
-    className?: string;
-    disabled: boolean;
-}) => {
-    return (
-        <Link href={href} className={`flex items-center gap-2 font-medium ${isActive ? "text-screaminGreen-4" : "text-gray-100"} ${disabled ? "opacity-20 pointer-events-none" : "opacity-70"} ${className}`}>
-            {children}
-        </Link>
-    )
-}
-
-
 const Navbar = () => {
     const open_reg = new Date("2023-10-23T12:00:00+0700") < new Date()
 
@@ -38,6 +17,27 @@ const Navbar = () => {
 
     const [isOpen, setIsOpen] = useState(false);
 
+    const NavLink = ({
+        children,
+        isActive,
+        href,
+        className,
+        disabled,
+    }: {
+        children: React.ReactNode;
+        isActive: boolean;
+        href: string;
+        className?: string;
+        disabled: boolean;
+    }) => {
+        return (
+            <Link onClick={() => setIsOpen(false)} href={href} className={`flex items-center gap-2 font-medium ${isActive ? "text-screaminGreen-4" : "text-gray-100"} ${disabled ? "opacity-20 pointer-events-none" : "opacity-70"} ${className}`}>
+                {children}
+            </Link>
+        )
+    }
+
+
     return (
         <nav className={`border-2 bg-black border-gray-100 fixed top-0 sm:top-2 left-1/2 -translate-x-1/2 w-full sm:w-4/5 sm:rounded-md  sm:border-2 flex items-center px-5 py-2 gap-4 justify-between transition-all duration-500 z-50 backdrop-blur ${y > 100 ? "sm:top-6 sm:scale-95 border-opacity-20" : "border-opacity-10"}`}>
             <Link href="/">

src/pages/about.tsx

@@ -101,15 +101,15 @@ const AboutPage = () => {
       <ListPrestasi />
       <View360 />
       {/* Fasilitas */}
-      <section className="bg-black flex items-center justify-center mt-20">
+      <section className="bg-[url(/about/background-about-fasilitas.svg)] bg-cover bg-center flex items-center justify-center mt-20">
         <div className="w-full md:h-[700px] lg:h-[900px] flex flex-col items-center z-10 relative">
-          <Image
+          {/* <Image
             src="/about/background-about-fasilitas.svg"
             alt=""
             width={1270}
             height={880}
             className="absolute top-0 left-0 object-cover brightness-[.6]"
-          />
+          /> */}
           <div className="flex justify-center md:mb-16">
             <h1 className="font-satoshi text-white-1 text-5xl font-semibold z-10">
               Fasilitas
@@ -156,9 +156,9 @@ const AboutPage = () => {
         </div>
       </section>
       {/* Jurusan & Perbedaan */}
-      <section className="relative">
+      <section className="bg-[url(/about/background-perbedaan-jurusan.png)] bg-cover bg-center relative">
         <div className="flex justify-center py-10">
-          <Image
+          {/* <Image
             src="/about/background-about-jurusan-dan-perbedaan-kiri.svg"
             alt=""
             width={640}
@@ -171,7 +171,7 @@ const AboutPage = () => {
             width={640}
             height={130}
             className="hidden md:inline absolute top-0 right-0 object-cover brightness-[.4]"
-          />
+          /> */}
           <h1 className="font-satoshi text-white-1 text-4xl md:text-5xl text-center font-semibold">
             Jurusan & Perbedaan
           </h1>
@@ -219,13 +219,13 @@ const AboutPage = () => {
           </div>
         </div>
         <div className="flex justify-center relative h-[600px] md:h-[900px]">
-          <Image
+          {/* <Image
             src="/about/background-about-jurusan-dan-perbedaan-tengah.png"
             alt=""
             width={1920}
             height={666}
             className="absolute top-64 md:top-96 xl:top-40 left-center object-cover brightness-[.8]"
-          />
+          /> */}
           {/* Pengertian */}
           <div
             className={`absolute flex flex-col sm:flex-row transition-opacity ease-in duration-300 gap-10 md:gap-20 justify-center py-12 sm:py-24 md:py-28 px-6 ${

src/pages/index.tsx

@@ -15,8 +15,8 @@ export default function Home() {
 
   return (
     <main className="bg-[#000]">
-      <section className="min-h-screen bg-black flex items-center justify-center relative">
-        <Image src="/home/background-header.png" alt="" width={1440} height={900} className="absolute top-0 left-0 object-cover brightness-[.6]" />
+      <section className="bg-[url(/home/background-header.png)] bg-cover bg-center min-h-screen flex items-center justify-center relative">
+        {/* <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-md">
           <h1 className="font-satoshi text-white-1 bg-clip-text font-extrabold text-3xl sm:text-5xl drop-shadow-sm shadow-white">
             OPEN HOUSE

src/sections/about/View360.tsx

@@ -3,10 +3,10 @@ import { Button } from "@/components/elements/Button";
 
 export default function View360() {
   return (
-    <section className="mt-10 py-10 flex bg-black min-h-screen items-center bg-[url('/about/background-view360.png')] bg-cover bg-right">
+    <section className="mt-10 py-10 flex bg-black min-h-screen items-center bg-[url('/about/background-view360.png')] bg-cover bg-right-top">
       <div className="backdrop-blur-3xl border-emerald-200 border w-[calc(100%-40px)] mx-auto md:w-2/5 h-fit py-14 px-10 rounded-3xl shadow flex flex-col gap-6 md:gap-12 justify-center items-center">
-        <h1 className="font-satoshi text-white-1 text-3xl sm:text-5xl font-semibold">360° Campus View</h1>
-        <p className=" text-white-2 max-w-prose">
+        <h1 className="font-satoshi text-white-1 text-3xl sm:text-5xl font-semibold text-center">360° Campus View</h1>
+        <p className=" text-white-2 max-w-prose text-center">
         Ikuti tur dan dapatkan pengalaman berkunjung ke Fasilkom secara unik! 
         Kunjungi kampus kami yang nyaman dan lihatlah ruang belajar yang kondusif, 
         auditorium, ruang kuliah, lounge, dan banyak lagi!

src/sections/home/Definition.tsx

@@ -4,20 +4,20 @@ import { HiOutlineArrowRight } from 'react-icons/hi2'
 import { Carousel } from '@mantine/carousel';
 
 const images = [
-  "https://hololive.hololivepro.com/wp-content/uploads/2021/04/unnamed-file-6-855x1536.png",
-  "https://hololive.hololivepro.com/wp-content/uploads/2022/04/4001_Mori-Calliope.png",
-  "https://hololive.hololivepro.com/wp-content/uploads/2023/07/Nerissa-Ravencroft_pr-img_01.png",
-  "https://hololive.hololivepro.com/wp-content/uploads/2023/04/bg_Hoshimachi-Suisei_01-1.png",
-  "https://hololive.hololivepro.com/wp-content/uploads/2023/04/Minato-Aqua_pr-img_01b.png",
-  "https://hololive.hololivepro.com/wp-content/uploads/2022/04/4004_Gawr-Gura.png",
-  "https://hololive.hololivepro.com/wp-content/uploads/2023/02/FriedA_pr-img_01.png",
-  "https://media.istockphoto.com/id/1207762975/id/foto/gray-wolf-close-up-di-musim-dingin.jpg?s=1024x1024&w=is&k=20&c=lltCILw0oR5Jbpu7pECJqeBC9075HisoUHhyvcrq6Q4="
+  "/home/definition-1.jpg",
+  "/home/definition-2.jpg",
+  "/home/definition-3.jpg",
+  "/home/definition-4.jpg",
+  "/home/definition-5.jpg",
+  "/home/definition-6.jpg",
+  "/home/definition-7.jpg",
+  "/home/definition-8.jpg",
 ]
 
 export default function Definition() {
   return (
-    <section className="mt-10 py-10 flex flex-col items-center min-h-screen bg-black">
-        <Image src="/home/background-definition.png" alt="" width={1440} height={880} className="absolute left-0 object-cover brightness-[.6]" />
+    <section className="bg-[url(/home/background-definition.png)] bg-cover bg-center mt-10 py-10 flex flex-col items-center min-h-screen">
+        {/* <Image src="/home/background-definition.png" alt="" width={1440} height={880} className="absolute left-0 object-cover brightness-[.6]" /> */}
         <div className="z-10 text-center flex flex-col px-5 sm:px-10 items-center w-full">
             <h1 className="font-satoshi text-white-1 font-extrabold text-4xl sm:text-5xl drop-shadow-sm shadow-white">
               What is OH?
@@ -27,13 +27,20 @@ export default function Definition() {
             memperkenalkan Fakultas Ilmu Komputer Universitas Indonesia kepada masyarakat luas dan membantu
             para calon mahasiswa dalam memantapkan pilihan program studinya di Fasilkom UI.
           </p>
-          <Button
-            variant="secondary"
-            className="px-28 mb-10"
+          <a
+            href={'https://drive.google.com/file/d/1p-ID9rRpPGkYhEt_eIn5trdmliaUdkD5/view?usp=sharing'}
+            target="__blank"
+            rel="noreferrer"
+            className="mb-10"
           >
-            Baca Selengkapnya
-            <HiOutlineArrowRight/>
-          </Button>
+            <Button
+              variant="secondary"
+              className="px-28"
+            >
+              Baca Selengkapnya
+              <HiOutlineArrowRight/>
+            </Button>
+          </a>
           {/* TODO: Add responsiveness */}
           <Carousel
             withIndicators

src/sections/home/VideoOH.tsx

@@ -3,18 +3,18 @@ import React from 'react'
 
 const VideoOH = () => {
   return (
-    <div className="z-10 text-center flex flex-col items-center overflow-hidden">
-    <div className="px-5 z-10 text-center flex flex-col items-center justify-center gap-7 mx-5 sm:px-16 rounded-md">
-      <h2 className="font-satoshi text-white-1 font-extrabold text-5xl drop-shadow-sm shadow-white">
-        Video OH
-      </h2>
-    </div>
-    <div className="relative w-full flex justify-center items-center mt-10 sm:mt-16 overflow-hidden">
-        <div className="relative md:max-w-xl w-full aspect-video p-5 overflow-x-hidden">
-            <Image src="/home/video-holder.webp" alt="" fill className="z-10 absolute top-0 left-0 origin-center aspect-[4/3] pointer-events-none" />
-            <iframe src="https://www.youtube.com/embed/VJ4YQ0_zriI?si=Gt4O8BPalGNklpBL" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" className="w-full h-full" />
-        </div>
-    </div>
+    <div className="z-10 text-center flex flex-col items-center overflow-hidden mx-10">
+      <div className="px-5 z-10 text-center flex flex-col items-center justify-center gap-7 mx-5 sm:px-16 rounded-md">
+        <h2 className="font-satoshi text-white-1 font-extrabold text-4xl sm:text-5xl drop-shadow-sm shadow-white text-center mb-5">
+          Video OH
+        </h2>
+      </div>
+      <div className="relative w-full flex justify-center items-center mt-10 sm:mt-16 overflow-hidden">
+          <div className="relative md:max-w-xl w-full aspect-video p-5 overflow-x-hidden">
+              <Image src="/home/video-holder.webp" alt="" fill className="z-10 absolute top-0 left-0 origin-center aspect-[4/3] pointer-events-none" />
+              <iframe src="https://www.youtube.com/embed/VJ4YQ0_zriI?si=Gt4O8BPalGNklpBL" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" className="w-full h-full" />
+          </div>
+      </div>
     </div>
   )
 }