update

aura-nw · Aug 27, 2024 · 82dc2da · 82dc2da
1 parent f5eeda7
commit 82dc2da
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 6 deletions.
diff --git a/src/components/pages/event/pudgy-asia-tour/Pudgy.tsx b/src/components/pages/event/pudgy-asia-tour/Pudgy.tsx
@@ -9,6 +9,7 @@ import Link from 'next/link'
 export default function PudgyList() {
   const [page, setPage] = useState(1)
   const [selected, setSelected] = useState(pudgyData[0])
+  const [selectedPudgy, setSelectedPudgy] = useState(pudgyData[0])
   const [scope, animate] = useAnimate()
   return (
     <>
@@ -93,12 +94,13 @@ export default function PudgyList() {
                       { transform: ['rotateY(180deg)', 'rotateY(360deg)', 'rotateY(0deg)'] },
                       { duration: 1, times: [0.5, 1, 1], ease: 'linear' }
                     )
+                    setSelectedPudgy(data)
                     setTimeout(() => setSelected(data), 500)
                   }
                 }}>
                 <div className='relative'>
                   <Image src={data.image} alt='' className='w-full aspect-square rounded-mlg border border-black' />
-                  {selected.name == data.name && <div className='absolute inset-0 rounded-mlg border-[3px] border-text-info-primary'></div>}
+                  {selectedPudgy.name == data.name && <div className='absolute inset-0 rounded-mlg border-[3px] border-text-info-primary'></div>}
                 </div>
                 <div className='mt-4 trailer-font font-black text-lg uppercase'>{data.name}</div>
               </div>

diff --git a/src/components/pages/event/pudgy-asia-tour/TimeLine.tsx b/src/components/pages/event/pudgy-asia-tour/TimeLine.tsx
@@ -2,23 +2,85 @@ import Image from 'next/image'
 import PudgyWithCup from './assets/pudgy-with-cup.svg'
 import Bamboo from './assets/bamboo.svg'
 import Cup from './assets/cuo.svg'
-import Image2 from './assets/i2.png'
+import Image2 from './assets/i2.svg'
+import Image1 from './assets/i1.svg'
 import R1 from './assets/r1.png'
 import R2 from './assets/r2.png'
 import R3 from './assets/r3.png'
 import Line from './assets/line.svg'
 import TimeLineImage from './assets/timeline.png'
 import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+import Modal from 'components/Modal'
+import { useRouter } from 'next/router'
 export default function TimeLine() {
   const { t } = useTranslation()
+  const { locale } = useRouter()
+  const [open, setOpen] = useState(false)
   return (
     <>
+      <style jsx>
+        {`
+          @keyframes blink {
+            0% {
+              color: #00e160;
+            }
+            50% {
+              color: #009640;
+            }
+          }
+          .blinking {
+            animation: blink 1s step-end infinite;
+          }
+        `}
+      </style>
+      <Modal open={open} setOpen={setOpen}>
+        {locale == 'vn' ? (
+          <div className='flex flex-col gap-4 items-center p-8 pt-12'>
+            <div className='trailer-font text-[40px] leading-[52px] font-black'>GIAI THUONG</div>
+            <div className='estedad-font text-lg font-semibold max-w-[483px]'>
+              🏆 Giải thưởng: <br />
+              🥇1 Giải Nhất: 10.000.000 VNĐ
+              <br />
+              🥈1 Giải Nhì: 5.000.000 VNĐ <br />
+              🥉1 Giải Ba: 2.500.000 VNĐ <br />
+              🏅7 Giải 4 - 10: 1.250.000 VNĐ <br />
+              🎖️10 Giải 11 - 20: 500.000 VNĐ <br />
+              🔥 Đặc biệt, Top 20 họa sĩ xuất sắc nhất sẽ nhận được ấn phẩm truyện độc quyền của cuộc thi.
+            </div>
+          </div>
+        ) : (
+          <div className='flex flex-col gap-4 items-center p-8 pt-12'>
+            <div className='trailer-font text-[40px] leading-[52px] font-black'>PRIZE</div>
+            <div className='estedad-font text-lg font-semibold max-w-[483px]'>
+              🏆 Prizes: <br />
+              🥇 1 First Prize: $400 <br />
+              🥈 1 Second Prize: $200 <br />
+              🥉 1 Third Prize: $100 <br />
+              🏅 7 Prizes for 4th - 10th place: $50 each <br />
+              🎖️ 10 Prizes for 11th - 20th place: $20 each <br />
+              🔥 Special: The Top 20 most outstanding artists will receive an exclusive comic book of the contest!
+            </div>
+          </div>
+        )}
+      </Modal>
       <div className='hidden xl:block pt-16 pk-container'>
         <div className='uppercase text-white text-center w-full drop-shadow-[2px_2px_0px_#000] trailer-font text-[64px] leading-[84px] font-black text-stroke'>
           {t('IT’s Time TO TRAVEL')}
         </div>
         <div className='relative mt-28 font-semibold'>
           <Image src={TimeLineImage} alt='' className='w-full' />
+          <Image
+            src={Image1}
+            alt=''
+            className='absolute top-[50%] left-[14%] w-[215px] -translate-y-full hover:w-[250px] transition-all'
+          />
+          <Image
+            src={Image2}
+            alt=''
+            className='absolute top-[70%] left-[55%] -rotate-[22deg] w-[240px] -translate-x-1/2 -translate-y-full hover:w-[270px] transition-all'
+          />
+
           <div className='absolute flex flex-col items-center top-[-16%] left-[6.5%]'>
             <div className='text-sm text-[#009640]'>01/08/2024</div>
             <div className='text-lg text-center max-w-[154px]'>{t(`"Join the Waddle and start flappin'!"`)}</div>
@@ -40,11 +102,11 @@ export default function TimeLine() {
               />
               <path d='M68.1214 66.75L76 83.8076L83.8786 66.75H68.1214Z' fill='#FF5050' stroke='black' />
             </svg>
-            <div className='absolute inset-x-2.5 top-2.5 flex flex-col items-center'>
+            <div className='absolute inset-x-2.5 top-2.5 flex flex-col items-center' onClick={() => setOpen(true)}>
               <div className='uppercase text-stroke font-black text-2xl drop-shadow-[1px_1px_0px_#000] trailer-font text-[#FFDC48]'>
                 {t('upto 2.000 USD')}
               </div>
-              <div className='-mt-1 uppercase text-stroke font-black text-base drop-shadow-[1px_1px_0px_#000] trailer-font text-[#16CC64]'>
+              <div className='-mt-1 uppercase font-black text-base drop-shadow-[1px_1px_0px_#000] trailer-font blinking'>
                 {t('Click Me')}
               </div>
             </div>
@@ -65,11 +127,11 @@ export default function TimeLine() {
               />
               <path d='M68.1214 66.75L76 83.8076L83.8786 66.75H68.1214Z' fill='#FF5050' stroke='black' />
             </svg>
-            <div className='absolute inset-x-2.5 top-2.5 flex flex-col items-center'>
+            <div className='absolute inset-x-2.5 top-2.5 flex flex-col items-center' onClick={() => setOpen(true)}>
               <div className='uppercase text-stroke font-black text-2xl drop-shadow-[1px_1px_0px_#000] trailer-font text-[#FFDC48]'>
                 {t('upto 2.000 USD')}
               </div>
-              <div className='-mt-1 uppercase text-stroke font-black text-base drop-shadow-[1px_1px_0px_#000] trailer-font text-[#16CC64]'>
+              <div className='-mt-1 uppercase font-black text-base drop-shadow-[1px_1px_0px_#000] trailer-font blinking'>
                 {t('Click Me')}
               </div>
             </div>

diff --git a/src/components/pages/event/pudgy-asia-tour/assets/i1.svg b/src/components/pages/event/pudgy-asia-tour/assets/i1.svg
diff --git a/src/components/pages/event/pudgy-asia-tour/assets/i2.svg b/src/components/pages/event/pudgy-asia-tour/assets/i2.svg
diff --git a/src/components/pages/event/pudgy-asia-tour/assets/timeline.png b/src/components/pages/event/pudgy-asia-tour/assets/timeline.png