From a6a4427b1eea45ee789b0ed60a739de568c43138 Mon Sep 17 00:00:00 2001
From: imhson <phamhoangson99@gmail.com>
Date: Tue, 13 Aug 2024 16:00:06 +0700
Subject: [PATCH] update dark

---
 .../pudgy-asia-tour/FooterAnimationSection.tsx    | 15 +++++++++++++--
 .../pages/event/pudgy-asia-tour/assets/light.svg  | 10 ++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/components/pages/event/pudgy-asia-tour/assets/light.svg

diff --git a/src/components/pages/event/pudgy-asia-tour/FooterAnimationSection.tsx b/src/components/pages/event/pudgy-asia-tour/FooterAnimationSection.tsx
index bded00dd..e10bda09 100644
--- a/src/components/pages/event/pudgy-asia-tour/FooterAnimationSection.tsx
+++ b/src/components/pages/event/pudgy-asia-tour/FooterAnimationSection.tsx
@@ -8,6 +8,7 @@ import Bus1 from './assets/Bus 1.svg'
 import Bus2 from './assets/Bus 2.svg'
 import Car from './assets/Car.svg'
 import Taxi from './assets/Taxi.svg'
+import Light from './assets/light.svg'
 import { motion } from 'framer-motion'
 export default function FooterAnimationSection() {
   const hours = moment().hours()
@@ -28,7 +29,9 @@ export default function FooterAnimationSection() {
           left: `${xPosition * 100}%`,
         }}
       />
-      <Image src={Scenery} alt='' className={`w-full relative z-20 ${isDay ? '' : 'opacity-60'}`} />
+
+      <Image src={Scenery} alt='' className={`w-full relative z-20`} />
+      {isDay ? <></> : <div className='absolute inset-0 bg-black/25 z-[21]'></div>}
       <motion.div
         className='absolute z-[15] w-[10%]'
         initial={{ right: '-50%', top: '100%' }}
@@ -39,9 +42,12 @@ export default function FooterAnimationSection() {
       <motion.div
         className='absolute z-30 bottom-[14%] w-[14%]'
         initial={{ right: '-50%' }}
-        animate={{ right: ['-50%','78%', '78%', '150%'] }}
+        animate={{ right: ['-50%', '78%', '78%', '150%'] }}
         transition={{ duration: 25, repeat: Infinity, ease: 'easeInOut', times: [0, 0.6, 0.68, 1] }}>
         <Image src={Bus1} alt='' />
+        {!isDay && (
+          <Image src={Light} alt='' className='absolute right-[94%] bottom-[2%] rotate-180 w-1/2 opacity-70' />
+        )}
       </motion.div>
       <motion.div
         className='absolute z-30 bottom-[10%] w-[8%]'
@@ -49,6 +55,9 @@ export default function FooterAnimationSection() {
         animate={{ right: '150%' }}
         transition={{ duration: 17, repeat: Infinity, ease: 'linear' }}>
         <Image src={Car} alt='' />
+        {!isDay && (
+          <Image src={Light} alt='' className='absolute right-[85%] bottom-[15%] rotate-180 w-1/2 opacity-80' />
+        )}
       </motion.div>
       <motion.div
         className='absolute z-30 bottom-[4%] w-[12%]'
@@ -56,6 +65,7 @@ export default function FooterAnimationSection() {
         animate={{ left: '150%' }}
         transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}>
         <Image src={Bus2} alt='' />
+        {!isDay && <Image src={Light} alt='' className='absolute left-[97%] bottom-[15%] w-1/2 opacity-80' />}
       </motion.div>
       <motion.div
         className='absolute z-30 bottom-[1%] w-[9%]'
@@ -63,6 +73,7 @@ export default function FooterAnimationSection() {
         animate={{ left: '150%' }}
         transition={{ duration: 14, repeat: Infinity, ease: 'linear' }}>
         <Image src={Taxi} alt='' />
+        {!isDay && <Image src={Light} alt='' className='absolute left-[90%] bottom-[15%] w-1/2 opacity-80' />}
       </motion.div>
     </div>
   )
diff --git a/src/components/pages/event/pudgy-asia-tour/assets/light.svg b/src/components/pages/event/pudgy-asia-tour/assets/light.svg
new file mode 100644
index 00000000..02bbca56
--- /dev/null
+++ b/src/components/pages/event/pudgy-asia-tour/assets/light.svg
@@ -0,0 +1,10 @@
+<svg width="659" height="288" viewBox="0 0 659 288" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_23_279)">
+<path d="M-189 148.5L651.75 27.6895V269.311L-189 148.5Z" fill="#FFE600"/>
+</g>
+<defs>
+<clipPath id="clip0_23_279">
+<rect width="659" height="288" fill="white"/>
+</clipPath>
+</defs>
+</svg>