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

Add photos for merch
OH-Fasilkom-UI · Nov 14, 2023 · 6be240d · 6be240d
2 parents 38e0b61 + 30f530a
commit 6be240d
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 23 deletions.
diff --git a/public/merch/crewneck.png b/public/merch/crewneck.png
diff --git a/public/merch/keychains.png b/public/merch/keychains.png
diff --git a/public/merch/lanyard.png b/public/merch/lanyard.png
diff --git a/public/merch/stickers.png b/public/merch/stickers.png
diff --git a/public/merch/t-shirt1.png b/public/merch/t-shirt1.png
diff --git a/public/merch/t-shirt2.png b/public/merch/t-shirt2.png
diff --git a/public/merch/tote.png b/public/merch/tote.png
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -51,15 +51,8 @@ const Footer = () => {
                                 Wall of Fame
                             </Link>
                             <Link
-                                href={""}
-                                onClick={() => {
-                                    disabled && notifications.show({
-                                        title: 'Coming soon~',
-                                        message: '',
-                                        color: "red"
-                                    })
-                                }}
-                                className={` transition-colors duration-300 ease-out ${disabled ? "opacity-50" : "hover:text-aqua-2"}`}
+                                href={"/merchandise"}
+                                className={`transition-colors duration-300 ease-out hover:text-aqua-2`}
                             >
                                 Merchandise
                             </Link>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -76,7 +76,7 @@ const Navbar = () => {
                     <HiUserGroup />
                     <span className='text-white'>Wall of Fame</span>
                 </NavLink>
-                <NavLink href='' isActive={router.pathname === "/merchandise"} disabled>
+                <NavLink href='/merchandise' isActive={router.pathname === "/merchandise"} disabled={false}>
                     <HiShoppingBag />
                     <span className='text-white'>Merchandise</span>
                 </NavLink>

diff --git a/src/pages/merchandise.tsx b/src/pages/merchandise.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@/components/elements/Button";
 import Image from "next/image"
 
 interface CardProps {
@@ -9,12 +10,18 @@ interface CardProps {
 
 function Card(props: CardProps) {
   return (
-    <div className="border-screaminGreen-4 border-2 border-solid p-8 rounded-lg text-left flex flex-col gap-4 items-start">
-      <Image src={props.src} width={128} height={256} alt="" />
-      <p className="text-white-1 px-3 text-sm py-1 rounded-full border-screaminGreen-2 border-2 border-solid">{props.preorder}</p>
-      <p className="text-white-1">{props.name}</p>
-      <p className="bg-shimmerGreen bg-clip-text text-transparent font-bold">{props.price}</p>
-    </div>
+    <a
+      href={'https://docs.google.com/forms/d/e/1FAIpQLSfCvs1slkswhpjx26kiBpDF8I713zIpIDGXzi6SKuReyeQ7lQ/viewform'}
+      target="__blank"
+      rel="noreferrer" 
+    >
+      <div className="transition-all duration-200 hover:scale-105 active:scale-100 active:opacity-30 border-screaminGreen-4 border-2 border-solid p-8 rounded-lg text-left flex flex-col gap-4 items-start">
+        <Image className="bg-zinc-500 rounded-xl bg-opacity-30 mx-auto object-contain" src={props.src} width={256} height={256} alt="" />
+          <p className="text-white-1 px-3 text-sm py-1 rounded-full border-screaminGreen-2 border-2 border-solid">Preorder Now!</p>
+        <p className="text-white-1">{props.name}</p>
+        <p className="bg-shimmerGreen bg-clip-text text-transparent font-bold">{props.price}</p>
+      </div>
+    </a>
   )
 }
 
@@ -28,13 +35,13 @@ export default function Merch() {
       <h1 className="px-5 text-3xl sm:text-5xl mb-10 bg-shimmerGreen bg-clip-text text-transparent">Exclusive Preorders!</h1>
       <div className="bg-[url(/merch/bg-merch-mobile.png)] sm:bg-[url(/merch/bg-merch-desktop.png)] bg-cover bg-center min-h-screen" />
       <div className="flex justify-center px-10 gap-10 flex-wrap">
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
+        <Card name="T-SHIRT CSUI" preorder="PREORDER NOW!" price="Rp90.000" src="/merch/t-shirt1.png" />
+        <Card name="T-SHIRT OH FASILKOM" preorder="PREORDER NOW!" price="Rp85.000" src="/merch/t-shirt2.png" />
+        <Card name="CREWNECK" preorder="PREORDER NOW!" price="Rp160.000" src="/merch/crewneck.png" />
+        <Card name="TOTEBAG" preorder="PREORDER NOW!" price="Rp45.000" src="/merch/tote.png" />
+        <Card name="LANYARD" preorder="PREORDER NOW!" price="Rp20.000" src="/merch/lanyard.png" />
+        <Card name="STICKER" preorder="PREORDER NOW!" price="Rp7.000" src="/merch/stickers.png" />
+        <Card name="KEYCHAIN" preorder="PREORDER NOW!" price="Rp15.000" src="/merch/keychains.png" />
       </div>
       <div className="bg-[url(/merch/bg-bottom-merch.png)] bg-center bg-no-repeat min-h-screen" />
     </div>