GIF Feature is now implemented

frontend/src/components/weather/WeatherCard.jsx

@@ -47,20 +47,20 @@ const WeatherCard = ({
     <div className='w-[22rem] min-w-[22rem] h-[30rem] glassCard p-4'>
       <div className='flex w-full just-center, items-center gap-4 mt-12 mb-4'>
         <img src={icon} alt="weather_icon" />
-        <p className='font-bold text-5xl flex justify-center text-green-500 items-center' >{temperature} &deg;C</p>
+        <p className='font-bold text-5xl flex justify-center text-white items-center' >{temperature} &deg;C</p>
       </div>
-      <div className='font-bold text-center text-xl text-green-500'>
+      <div className='font-bold text-center text-xl text-white'>
         {place}
       </div>
-      <div className='w-full flex text-green-500 justify-between items-center mt-4'>
+      <div className='w-full flex text-white justify-between items-center mt-4'>
         <p className='flex-1 text-center p-2'>{new Date().toDateString()}</p>
         <p className='flex-1 text-center p-2'>{time}</p>
       </div>
       <div className='w-full flex justify-between items-center mt-4 gap-4'>
         <p className='flex-1 text-center p-2 font-bold bg-blue-600 shadow rounded-lg text-white'>Wind Speed <p className='font-normal'>{windspeed} km/h</p></p>
         <p className='flex-1 text-center p-2 font-bold rounded-lg bg-green-600 text-white'>Humidity <p className='font-normal'>{humidity} gm/m&#179;</p></p>
       </div>
-      <div className='w-full p-3 mt-4 flex justify-between text-green-500 items-center'>
+      <div className='w-full p-3 mt-4 flex justify-between text-white items-center'>
         <p className='font-semibold text-lg'>Heat Index</p>
         <p className='text-lg'>{heatIndex ? heatIndex : 'N/A'}</p>
       </div>

frontend/src/pages/Forecast.jsx

@@ -1,65 +1,114 @@
-import { useState } from 'react'
-import '../App.css'
-import search from '../assets/icons/search.svg'
-import { useStateContext } from '../context/StateContextProvider'
-import { BackgroundLayout, WeatherCard, MiniCard } from '../components/weather'
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import '../App.css';
+import search from '../assets/icons/search.svg';
+import summerGif from '../assets/summer-4134.gif'; // Summer GIF
+import rainGif from '../assets/rain-4431.gif'; // Rain GIF
+import { useStateContext } from '../context/StateContextProvider';
+import { BackgroundLayout, WeatherCard, MiniCard } from '../components/weather';
 
 function Forecast() {
-
-  const [input, setInput] = useState('')
-  const { weather, thisLocation, values, setPlace } = useStateContext()
-  // console.log(weather)
+  const [input, setInput] = useState('');
+  const { weather, thisLocation, values, setPlace } = useStateContext();
 
   const submitCity = () => {
-    setPlace(input)
-    setInput('')
-  }
+    setPlace(input);
+    setInput('');
+  };
+
+  // Choose the appropriate GIF based on humidity
+  const weatherGif = weather.humidity > 70 ? rainGif : summerGif;
 
   return (
-    <>
-    <div className='w-full mt-12 min-h-screen px-4 sm:px-6 lg:px-8 '>
-      <nav className='w-full p-3 flex flex-col md:flex-row justify-between items-center'>
-        <h1 className='font-bold tracking-wide text-green-500 text-2xl sm:text-3xl mt-5'>Forecast</h1>
-        <div className='bg-white w-[15rem] border border-green-500 overflow-hidden shadow-2xl rounded flex items-center p-2 gap-2 mt-3 sm:mt-5'>
-          <img src={search} alt="search" className='w-[1.5rem] h-[1.5rem]' />
-          <input onKeyUp={(e) => {
-            if (e.key === 'Enter') {
-              // sumit the form
-              submitCity()
-            }
-          }} type="text" placeholder='Search city' className='focus:outline-none w-full  text-green-500 text-lg' value={input} onChange={e => setInput(e.target.value)} />
-        </div>
-      </nav>
-      {/* <BackgroundLayout></BackgroundLayout> */}
-      <main className='w-full flex flex-wrap gap-8 py-4 px-[10%] text-green-500 items-center justify-center'>
-        <WeatherCard
-          place={thisLocation}
-          windspeed={weather.wspd}
-          humidity={weather.humidity}
-          temperature={weather.temp}
-          heatIndex={weather.heatindex}
-          iconString={weather.conditions}
-          conditions={weather.conditions}
-        />
+    <div className="relative w-full min-h-screen overflow-hidden">
+      {/* Background GIF */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: `url(${weatherGif})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          filter: 'blur(5px)',
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 w-full min-h-screen px-4 sm:px-6 lg:px-8 bg-black bg-opacity-50">
+        <nav className="w-full p-3 flex flex-col md:flex-row justify-between items-center">
+          <motion.h1
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="font-bold tracking-wide text-white text-3xl sm:text-4xl mt-20"
+          >
+            Forecast
+          </motion.h1>
+          <motion.div
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg w-[18rem] border border-white overflow-hidden shadow-2xl rounded-full flex items-center p-2 gap-2 mt-10 sm:mt-12"
+          >
+            <img src={search} alt="search" className="w-[1.5rem] h-[1.5rem]" />
+            <input
+              onKeyUp={(e) => {
+                if (e.key === 'Enter') {
+                  submitCity();
+                }
+              }}
+              type="text"
+              placeholder="Search city"
+              className="focus:outline-none w-full bg-transparent text-white text-lg placeholder-white"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+            />
+          </motion.div>
+        </nav>
+
+        <main className="w-full flex flex-wrap gap-8 py-4 px-[5%] text-white items-center justify-center">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <WeatherCard
+              place={thisLocation}
+              windspeed={weather.wspd}
+              humidity={weather.humidity}
+              temperature={weather.temp}
+              heatIndex={weather.heatindex}
+              iconString={weather.conditions}
+              conditions={weather.conditions}
+            />
+          </motion.div>
 
-        <div className='flex justify-center  gap-8 flex-wrap w-[60%]'>
-          {
-            values?.slice(1, 7).map(curr => {
-              return (
+          <motion.div
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="flex justify-center gap-4 flex-wrap w-full md:w-[60%]"
+          >
+            {values?.slice(1, 7).map((curr, index) => (
+              <motion.div
+                key={curr.datetime}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3, delay: index * 0.1 }}
+              >
                 <MiniCard
-                  key={curr.datetime}
                   time={curr.datetime}
                   temp={curr.temp}
                   iconString={curr.conditions}
                 />
-              )
-            })
-          }
-        </div>
-      </main>
+              </motion.div>
+            ))}
+          </motion.div>
+        </main>
+      </div>
     </div>
-    </>
-  )
+  );
 }
 
-export default Forecast
+export default Forecast;