CityCards/CityCards-Website
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add a gradient white shadow effect when showing attractions

Browse Source
This commit is contained in:
aryabenade
2026-04-02 13:11:18 +05:30
parent e1fb13d4c0
commit 993ccf2c47
1 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/LandingVarietyOfAdventures.tsx
View File

@@ -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"