Add - Added hover effect to Item boxes , added original and offer pri…

…ces of the item
RamakrushnaBiswal · Oct 9, 2024 · 6a0fbf0 · 6a0fbf0
1 parent 2be66cd
commit 6a0fbf0
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 15 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -30,4 +30,13 @@ input[type="radio"] {
     cursor: pointer;
     font-size: 2rem;
     margin-bottom: 0;
-}
+}
+
+.card {
+    transition: all 0.3s ease; /* Ensure smooth transitions */
+  }
+
+  /* Shadow effect on hover */
+  .card:hover {
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add a shadow on hover */
+  }
diff --git a/frontend/src/components/Pages/Menu.jsx b/frontend/src/components/Pages/Menu.jsx
@@ -60,10 +60,16 @@ function ParallaxImage() {
           <h1 className="text-5xl md:text-9xl font-roboto">Flip Menu</h1>
           <GiArrowDunk size={60} className="mt-2 text-orange-400" />
         </div>
-        <div className="w-full md:flex md:items-center md:justify-center">
+        {/* <div className="w-full md:flex md:items-center md:justify-center">
           <Mybook />
         </div>
-        <TodaysSpecial />
+        <TodaysSpecial /> */}
+        <div className="w-full md:flex md:items-center md:justify-center mb-20"> {/* Adjust this container */}
+          <Mybook />
+        </div>
+        <div className="w-full md:flex md:items-center md:justify-center" style={{ paddingBottom: '80px' }}> {/* Add bottom padding here */}
+          <TodaysSpecial />
+</div>
       </div>
     </>
   );

diff --git a/frontend/src/components/Pages/TodaysSpecial.jsx b/frontend/src/components/Pages/TodaysSpecial.jsx
@@ -11,24 +11,25 @@ import caesar_salad from '../../assets/TSimg/caesar_salad.webp';
 
 const menuItems = {
   coffee: [
-    { name: "Espresso", description: "Rich and bold coffee shot.", image: espresso },
-    { name: "Cappuccino", description: "Creamy coffee with frothy milk.", image: cappuccino },
-    { name: "Latte", description: "Smooth coffee with steamed milk.", image: latte },
+    { name: "Espresso", description: "Rich and bold coffee shot.", image: espresso, originalPrice: "$3.00", offerPrice: "$2.50" },
+    { name: "Cappuccino", description: "Creamy coffee with frothy milk.", image: cappuccino, originalPrice: "$3.50", offerPrice: "$3.00" },
+    { name: "Latte", description: "Smooth coffee with steamed milk.", image: latte, originalPrice: "$4.00", offerPrice: "$3.50" },
   ],
   drinks: [
-    { name: "Mango Smoothie", description: "Refreshing mango blend.", image: mango_smoothie },
-    { name: "Lemonade", description: "Zesty and chilled lemonade.", image: lemonade },
-    { name: "Iced Tea", description: "Cool iced tea with lemon.", image: iced_tea },
+    { name: "Mango Smoothie", description: "Refreshing mango blend.", image: mango_smoothie, originalPrice: "$4.50", offerPrice: "$4.00" },
+    { name: "Lemonade", description: "Zesty and chilled lemonade.", image: lemonade, originalPrice: "$2.50", offerPrice: "$2.00" },
+    { name: "Iced Tea", description: "Cool iced tea with lemon.", image: iced_tea, originalPrice: "$2.00", offerPrice: "$1.50" },
   ],
   food: [
-    { name: "Cheese Sandwich", description: "Toasted sandwich with cheese.", image: cheese_sandwich },
-    { name: "Pasta Primavera", description: "Veggies and pasta in a light sauce.", image: pasta_primavera },
-    { name: "Caesar Salad", description: "Crispy salad with Caesar dressing.", image: caesar_salad },
+    { name: "Cheese Sandwich", description: "Toasted sandwich with cheese.", image: cheese_sandwich, originalPrice: "$3.50", offerPrice: "$3.00" },
+    { name: "Pasta Primavera", description: "Veggies and pasta in a light sauce.", image: pasta_primavera, originalPrice: "$5.50", offerPrice: "$5.00" },
+    { name: "Caesar Salad", description: "Crispy salad with Caesar dressing.", image: caesar_salad, originalPrice: "$5.00", offerPrice: "$4.50" },
   ],
 };
 
 const TodaysSpecial = () => {
   const [todaysSpecial, setTodaysSpecial] = useState({ coffee: {}, drink: {}, food: {} });
+  const [hoveredItem, setHoveredItem] = useState(null); // State to track the hovered item
 
   // Function to update today's special (cycling through 3 items)
   const updateTodaysSpecial = () => {
@@ -51,20 +52,61 @@ const TodaysSpecial = () => {
     <div className="mt-10">
       <h2 className="text-5xl font-bold text-center mb-9">Today's Special</h2>
       <div className="flex flex-col md:flex-row justify-around items-center mb-8 space-y-8 md:space-y-0 md:space-x-4">
-        <div className="card bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center">
+        {/* Coffee Card */}
+        <div
+          className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          style={{ minHeight: '300px' }} // Ensure a minimum height for the card
+          onMouseEnter={() => setHoveredItem('coffee')}
+          onMouseLeave={() => setHoveredItem(null)}
+        >
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} />
           <h3 className="text-xl font-semibold">{todaysSpecial.coffee.name}</h3>
           <p className="text-gray-600">{todaysSpecial.coffee.description}</p>
+          {/* Show prices below the image and description */}
+          {hoveredItem === 'coffee' && (
+            <div className="mt-4">
+              <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.coffee.originalPrice}</p>
+              <p className="text-xl font-bold text-red-500">{todaysSpecial.coffee.offerPrice}</p>
+            </div>
+          )}
         </div>
-        <div className="card bg-teal-100 p-4 rounded-lg shadow-lg max-w-xs text-center">
+
+        {/* Food Card */}
+        <div
+          className="bg-teal-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          style={{ minHeight: '300px' }} // Ensure a minimum height for the card
+          onMouseEnter={() => setHoveredItem('food')}
+          onMouseLeave={() => setHoveredItem(null)}
+        >
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.food.image} alt={todaysSpecial.food.name} />
           <h3 className="text-xl font-semibold">{todaysSpecial.food.name}</h3>
           <p className="text-gray-600">{todaysSpecial.food.description}</p>
+          {/* Show prices below the image and description */}
+          {hoveredItem === 'food' && (
+            <div className="mt-4">
+              <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.food.originalPrice}</p>
+              <p className="text-xl font-bold text-red-500">{todaysSpecial.food.offerPrice}</p>
+            </div>
+          )}
         </div>
-        <div className="card bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center">
+
+        {/* Drink Card */}
+        <div
+          className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          style={{ minHeight: '300px' }} // Ensure a minimum height for the card
+          onMouseEnter={() => setHoveredItem('drink')}
+          onMouseLeave={() => setHoveredItem(null)}
+        >
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} />
           <h3 className="text-xl font-semibold">{todaysSpecial.drink.name}</h3>
           <p className="text-gray-600">{todaysSpecial.drink.description}</p>
+          {/* Show prices below the image and description */}
+          {hoveredItem === 'drink' && (
+            <div className="mt-4">
+              <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.drink.originalPrice}</p>
+              <p className="text-xl font-bold text-red-500">{todaysSpecial.drink.offerPrice}</p>
+            </div>
+          )}
         </div>
       </div>
     </div>