From 993ccf2c4748211ed3441179a8e37f080e57a1be Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Thu, 2 Apr 2026 13:11:18 +0530
Subject: [PATCH] add a gradient white shadow effect when showing attractions

---
 src/components/LandingVarietyOfAdventures.tsx | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/LandingVarietyOfAdventures.tsx b/src/components/LandingVarietyOfAdventures.tsx
index 3e7ab94..4af0519 100644
--- a/src/components/LandingVarietyOfAdventures.tsx
+++ b/src/components/LandingVarietyOfAdventures.tsx
@@ -154,7 +154,7 @@ export function LandingVarietyOfAdventures() {
       <div className="container mx-auto px-4">
         {/* Header */}
         <div className="text-center mb-16 max-w-4xl mx-auto">
-          <motion.h2 
+          <motion.h2
             className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight text-foreground mb-6"
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
@@ -164,13 +164,13 @@ export function LandingVarietyOfAdventures() {
             <span className="font-bold text-primary italic">Experience</span>{' '}
             <span className="font-light">for Every Traveller</span>
           </motion.h2>
-          <motion.p 
+          <motion.p
             className="font-poppins text-xl leading-relaxed font-normal text-gray-600"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
           >
-            From iconic laneways and world-class coffee to stunning gardens and vibrant markets, 
+            From iconic laneways and world-class coffee to stunning gardens and vibrant markets,
             discover Melbourne's unique character through curated experiences that showcase the city's soul.
           </motion.p>
         </div>
@@ -180,7 +180,7 @@ export function LandingVarietyOfAdventures() {
           {/* Carousel Container - Full Width */}
           <div className="relative w-full overflow-hidden">
             {/* Scrolling Track */}
-            <motion.div 
+            <motion.div
               className="horizontal-scroll-track flex items-center gap-8 py-8"
               style={{
                 width: 'max-content',
@@ -212,10 +212,10 @@ export function LandingVarietyOfAdventures() {
                       {/* Dark Overlay */}
                       <div className="absolute inset-0 bg-black/30" />
                     </div>
-                    
+
                     {/* Bottom Content Card */}
                     <div className="absolute bottom-0 left-0 right-0 p-6">
-                      <motion.div 
+                      <motion.div
                         className="bg-white/95 backdrop-blur-sm rounded-2xl p-4 border border-white/20"
                         whileHover={{ y: -2 }}
                         transition={{ duration: 0.2 }}
@@ -230,9 +230,9 @@ export function LandingVarietyOfAdventures() {
                               {category.tourCount}
                             </p>
                           </div>
-                          
+
                           {/* Icon */}
-                          <motion.div 
+                          <motion.div
                             className="w-12 h-12 bg-warm-coral rounded-xl flex items-center justify-center flex-shrink-0"
                             whileHover={{ scale: 1.1, rotate: 5 }}
                             transition={{ duration: 0.2 }}
@@ -254,8 +254,8 @@ export function LandingVarietyOfAdventures() {
                         initial={{ opacity: 0, y: 20, scale: 0.95 }}
                         animate={{ opacity: 1, y: 0, scale: 1 }}
                         exit={{ opacity: 0, y: 10, scale: 0.95 }}
-                        transition={{ 
-                          duration: 0.3, 
+                        transition={{
+                          duration: 0.3,
                           ease: [0.25, 0.1, 0.25, 1],
                           layout: { duration: 0.2 }
                         }}
@@ -283,8 +283,8 @@ export function LandingVarietyOfAdventures() {
                                 key={attraction.name}
                                 initial={{ opacity: 0, x: -20 }}
                                 animate={{ opacity: 1, x: 0 }}
-                                transition={{ 
-                                  duration: 0.3, 
+                                transition={{
+                                  duration: 0.3,
                                   delay: idx * 0.1,
                                   ease: [0.25, 0.1, 0.25, 1]
                                 }}
@@ -298,7 +298,7 @@ export function LandingVarietyOfAdventures() {
                                     className="w-full h-full object-cover"
                                   />
                                 </div>
-                                
+
                                 {/* Attraction Info */}
                                 <div className="flex-1">
                                   <h5 className="font-semibold text-gray-900 mb-1">
@@ -332,19 +332,19 @@ export function LandingVarietyOfAdventures() {
             </motion.div>
 
             {/* Gradient Fade Edges */}
-            <div className="absolute left-0 top-0 bottom-0 w-32 bg-white/80 pointer-events-none z-10" />
-            <div className="absolute right-0 top-0 bottom-0 w-32 bg-white/80 pointer-events-none z-10" />
+            <div className="absolute left-0 top-0 bottom-0 w-32 bg-white pointer-events-none z-10" style={{ boxShadow: '47px 2px 40px 0px #fff' }} />
+            <div className="absolute right-0 top-0 bottom-0 w-32 bg-white pointer-events-none z-10" style={{ boxShadow: '-47px 2px 40px 0px #fff' }} />
           </div>
         </div>
 
         {/* CTA Button */}
-        <motion.div 
+        <motion.div
           className="text-center"
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
         >
-          <Button 
+          <Button
             withShine={true}
             size="xl"
             className="h-16 rounded-full text-lg px-8"