Merge pull request #46 from OH-Fasilkom-UI/develop

Develop

app/bulletin-board/page.tsx

@@ -0,0 +1,13 @@
+import Footer from '@/components/elements/Footer'
+import BulletinBoardModule from '@/modules/BulletinBoardModule'
+
+const Page = () => {
+  return (
+    <main className="relative">
+      <BulletinBoardModule />
+      <Footer />
+    </main>
+  )
+}
+
+export default Page

app/merchandise/[productId]/page.tsx

@@ -0,0 +1,23 @@
+// import Footer from '@/components/elements/Footer'
+// import MerchandiseDetails from '@/modules/MerchandiseModule/sections/MerchandiseDetails'
+import { redirect } from 'next/navigation'
+
+interface MerchandisePageProps {
+  params: {
+    productId: string
+  }
+}
+
+const MerchandisePage = ({ params }: MerchandisePageProps) => {
+  return redirect('/')
+  // return (
+  //   <main className="relative">
+  //     <MerchandiseDetails productId={params.productId} />
+  //     <div className="mt-[1420px] sm:mt-[900px] lg:mt-[1100px]">
+  //       <Footer />
+  //     </div>
+  //   </main>
+  // )
+}
+
+export default MerchandisePage

app/merchandise/page.tsx

@@ -0,0 +1,9 @@
+// import { MerchandiseModule } from '@/modules/MerchandiseModule'
+import { redirect } from 'next/navigation'
+
+const Merchandise = () => {
+  return redirect('/')
+  // return <MerchandiseModule />
+}
+
+export default Merchandise

app/register/page.tsx

@@ -1,4 +1,4 @@
-import { MenteeRegistrationModule } from "@/modules/MenteeRegistrationModule"
+import { MenteeRegistrationModule } from '@/modules/MenteeRegistrationModule'
 
 const Page = () => {
   return (

app/wall-of-fame/page.tsx

@@ -0,0 +1,7 @@
+import { WallOfFameModule } from '@/modules/WallOfFameModule'
+
+const Page = () => {
+  return <WallOfFameModule />
+}
+
+export default Page

components/elements/Navbar.data.ts

@@ -3,7 +3,8 @@ import {
   CircleUserRound,
   FileText,
   House,
-  SquareUserRound,
+  Presentation,
+  ShoppingBag,
   Users,
 } from 'lucide-react'
 
@@ -14,12 +15,6 @@ export const NAVBAR_LINKS = [
     label: 'Home',
     isExist: true,
   },
-  {
-    href: '/ambassador',
-    icon: SquareUserRound,
-    label: 'Ambassador',
-    isExist: false,
-  },
   {
     href: '/explore',
     icon: Building,
@@ -33,11 +28,23 @@ export const NAVBAR_LINKS = [
     isExist: true,
   },
   {
-    href: '/wefwefw',
+    href: '/wall-of-fame',
     icon: Users,
     label: 'Wall of Fame',
-    isExist: false,
+    isExist: true,
+  },
+  {
+    href: '/bulletin-board',
+    icon: Presentation,
+    label: 'Bulletin Board',
+    isExist: true,
   },
+  // {
+  //   href: '/merchandise',
+  //   icon: ShoppingBag,
+  //   label: 'Merchandise',
+  //   isExist: true,
+  // },
 ]
 
 export const NAVBAR_LOGIN = [

components/ui/Button.tsx

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 export const buttonVariants = cva(
-  'z-50 flex justify-center items-center gap-2 w-max font-semibold transition-all px-7 md:px-8 py-2.5 md:py-3 text-sm md:text-base rounded-[12px] duration-200',
+  'z-40 flex justify-center items-center gap-2 w-max font-semibold transition-all px-7 md:px-8 py-2.5 md:py-3 text-sm md:text-base rounded-[12px] duration-200',
   {
     variants: {
       variant: {

components/ui/Modal.tsx

@@ -44,21 +44,20 @@ const Modal = ({
           onInteractOutside={(e) => disableClickOutside && e.preventDefault()}
           onEscapeKeyDown={(e) => disableClickOutside && e.preventDefault()}
           className={twMerge(
-            'text-Text/TextLightBG bg-BlueRegion/Cornflower/50 fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 bg-background duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-3xl',
+            'text-Text/TextLightBG h-fit bg-Text/TextLightBG fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-3xl',
             'py-6 sm:py-8',
-            'w-[90vw] max-w-xl md:max-w-4xl'
+            'w-[90vw] max-w-xl md:max-w-7xl'
           )}
         >
-          <ScrollArea className="max-h-96">
+          <ScrollArea className="max-h-screen">
             <div
               className={twMerge(
-                'flex gap-y-4 gap-x-8 px-6 sm:px-10 mt-2',
-                'md:flex-row md:items-start md:text-left',
+                'flex gap-y-4 mt-2',
                 'flex-col items-center text-center'
               )}
             >
               <div>{Icon && <Icon size="4rem" />}</div>
-              <div className="flex flex-col space-y-1.5">
+              <div className="flex flex-col space-y-1.5 w-full">
                 <DialogPrimitive.Title className="text-3xl font-bold leading-none">
                   {title}
                 </DialogPrimitive.Title>

modules/AfterRegistrationModule/index.tsx

@@ -77,7 +77,9 @@ const AfterRegistrationModule = ({}) => {
                 size={300}
                 className="shadow-lg bg-white p-3"
               />
-              <p className="font-bold text-center mt-5">Scan saat Main Event!</p>
+              <p className="font-bold text-center mt-5">
+                Scan saat Main Event!
+              </p>
             </div>
           )}
         </div>

modules/BulletinBoardModule/components/BulletinCard.tsx

@@ -0,0 +1,91 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/Dialog'
+
+const BulletinCard = ({
+  color,
+  title,
+  description,
+}: {
+  color: string
+  title: string
+  description: string
+}) => {
+  let classNameCard
+  let classNamePin
+  let classNameModal
+  let textColor
+
+  switch (color) {
+    case 'blue':
+      classNameCard = 'bg-[#96D2FA] w-full h-[80%] -rotate-3 hover:rotate-0'
+      classNamePin =
+        'w-2 h-4 md:w-3 md:h-6 lg:w-4 lg:h-8 absolute -top-2 md:-top-3 lg:-top-4 left-[50%] -translate-x-[50%] bg-[#B91B70]'
+      classNameModal = 'bg-[#72b9e8] border-[#72b9e8] max-w-sm'
+      textColor = 'text-white'
+      break
+    case 'red':
+      classNameCard = 'bg-[#F19CA3] w-[75%] h-full rotate-2 hover:-rotate-1'
+      classNamePin =
+        'w-3 h-3 md:w-5 md:h-5 absolute -top-1 md:-top-2 left-[50%] -translate-x-[50%] bg-[#B91B70] rounded-full'
+      classNameModal = 'bg-[#EB838C] border-[#EB838C] max-w-sm'
+      textColor = 'text-white'
+      break
+    case 'yellow':
+      classNameCard = 'bg-[#C7B45D] w-[85%] h-[90%] -rotate-1 hover:rotate-2'
+      classNamePin =
+        'w-2 h-4 md:w-4 md:h-8 absolute -top-2 md:-top-4 left-[50%] -translate-x-[50%] bg-[#B91B70]'
+      classNameModal = 'bg-[#C7B45D] border-[#C7B45D] max-w-sm'
+      textColor = 'text-white'
+      break
+    case 'white':
+      classNameCard = 'bg-[#D9DCE5] w-[90%] h-[85%] -rotate-2 hover:rotate-1'
+      classNamePin =
+        'w-3 h-3 md:w-5 md:h-5 absolute -top-1 md:-top-2 left-[50%] -translate-x-[50%] bg-[#B91B70] rounded-full'
+      classNameModal = 'bg-[#D9DCE5] border-[#D9DCE5] max-w-sm'
+      textColor = 'text-BlueRegion/GovernorBay/600'
+      break
+    default:
+      classNameCard = 'bg-[#D9DCE5] w-[90%] h-[85%] -rotate-2 hover:-rotate-1'
+      classNamePin =
+        'w-3 h-3 md:w-5 md:h-5 absolute -top-1 md:-top-2 left-[50%] -translate-x-[50%] bg-[#B91B70] rounded-full'
+      classNameModal = 'bg-[#D9DCE5] border-[#D9DCE5] max-w-sm'
+      textColor = 'text-BlueRegion/GovernorBay/600'
+  }
+
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <div
+          className={`cursor-pointer shadow hover:shadow-xl transition relative ${classNameCard}`}
+        >
+          <div className={classNamePin}></div>
+        </div>
+      </DialogTrigger>
+      <DialogContent className={classNameModal} showCloseButton>
+        <DialogHeader>
+          <DialogTitle
+            className={`text-center text-2xl md:text-3xl tracking-wider ${textColor}`}
+          >
+            {title}
+          </DialogTitle>
+          <DialogDescription className={textColor}>
+            <p className="text-center max-md:text-xs">{description}</p>
+          </DialogDescription>
+        </DialogHeader>
+        <div className="w-full relative">
+          <span className="text-[#E0ECFF] text-center font-semibold absolute -bottom-16 left-[50%] -translate-x-[50%] w-full drop-shadow-[2px_2px_2px_#2E3881]">
+            Click outside the paper to exit.
+          </span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default BulletinCard

modules/BulletinBoardModule/components/PandaDuduk.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image'
+
+interface PandaDudukProps {
+  type: string
+  show: boolean
+  className?: string
+}
+
+const PandaDuduk: React.FC<PandaDudukProps> = ({ type, show, className }) => {
+  let src = ''
+  if (show) {
+    src = `/BulletinBoard/Chair${type}.png`
+  } else {
+    src = `/BulletinBoard/Chair${type}Panda.png`
+  }
+  if (!className) {
+    className = ''
+  }
+  return (
+    <div
+      className={`relative ${className} w-[128px] h-[160px] max-[889px]:h-[140px] max-[889px]:w-[112px]`}
+    >
+      <Image src={src} alt="Kursi Panda" layout="fill" />
+    </div>
+  )
+}
+
+export default PandaDuduk

modules/BulletinBoardModule/constant.ts

@@ -0,0 +1,37 @@
+export const BULLETIN_BOARD_DATA = [
+  {
+    color: 'blue',
+    title: 'Top Ranked',
+    description: "Among Indonesia's best in Computer Science! 🌏",
+  },
+  {
+    color: 'red',
+    title: 'Coding Champions',
+    description: 'ICPC World Finalists, placing 21st globally! 🏆',
+  },
+  {
+    color: 'yellow',
+    title: 'COMPFEST',
+    description: "Hosts one of Indonesia's biggest student-led IT events! 🚀",
+  },
+  {
+    color: 'white',
+    title: 'Forbes 30 Under 30',
+    description: 'Alumni behind some amazing startup success! 💸',
+  },
+  {
+    color: 'white',
+    title: 'Cutting-Edge Labs',
+    description: 'Seven labs for AI, Machine Learning, and more! 🔬',
+  },
+  {
+    color: 'yellow',
+    title: 'Global Partners',
+    description: 'Collaborations with top universities worldwide! 🌐',
+  },
+  {
+    color: 'red',
+    title: 'Innovative Research',
+    description: 'From data science to robotics, Fasilkom is on it! 🤖',
+  },
+]

modules/BulletinBoardModule/index.tsx

@@ -0,0 +1,13 @@
+import BulletinBoard from './sections/BulletinBoard'
+import HeroSection from './sections/HeroSection'
+
+const BulletinBoardModule = () => {
+  return (
+    <main className="px-5 md:px-10 lg:px-16 xl:px-20 pb-[450px] md:pb-[550px] lg:pb-[650px] xl:pb-[700px] 2xl:pb-[750px] max-w-[1440px] w-full mx-auto">
+      <HeroSection />
+      <BulletinBoard />
+    </main>
+  )
+}
+
+export default BulletinBoardModule

modules/BulletinBoardModule/sections/BulletinBoard.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import BoardDesktop from '@/public/BulletinBoard/BoardDesktop.png'
+import BoardMobile from '@/public/BulletinBoard/BoardMobile.png'
+import Sign from '@/public/BulletinBoard/Sign.png'
+import Image from 'next/image'
+import BulletinCard from '../components/BulletinCard'
+import { BULLETIN_BOARD_DATA } from '../constant'
+
+const BulletinBoard = () => {
+  return (
+    <div className="relative my-32 flex max-md:max-w-sm mx-auto">
+      <Image
+        src={Sign}
+        alt="Sign"
+        className="absolute w-[64%] md:w-[42%] -top-[16px] md:-top-[36px] left-[50%] -translate-x-[50%] z-10"
+      />
+      <Image
+        src={BoardDesktop}
+        alt="Board"
+        className="max-md:hidden w-full h-full"
+      />
+      <Image
+        src={BoardMobile}
+        alt="Board"
+        className="md:hidden w-full h-full max-w-sm"
+      />
+      <div className="absolute top-0 left-0 w-full h-full grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-5 lg:gap-8 px-7 py-9 md:px-14 md:py-10 lg:px-16 lg:py-14 xl:px-20 xl:py-16">
+        {BULLETIN_BOARD_DATA.map((item) => {
+          return (
+            <BulletinCard
+              color={item.color}
+              title={item.title}
+              description={item.description}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default BulletinBoard