Premium design updates for Smoking Aids and enhanced image blending
This commit is contained in:
Avery Felts
parent
3cf2e805f2
commit
143258a86d
@ -671,4 +671,55 @@
|
||||
scroll-snap-align: center;
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient-x {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-gradient-x {
|
||||
background-size: 200% 200%;
|
||||
animation: gradient-x 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-subtle {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse-subtle {
|
||||
animation: pulse-subtle 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
@ -19,9 +19,9 @@ const smokingAids = [
|
||||
url: 'https://amzn.to/3Z2BuCk',
|
||||
icon: Wind,
|
||||
color: 'text-sky-400',
|
||||
bgColor: 'bg-sky-500/10',
|
||||
borderColor: 'border-sky-500/20',
|
||||
buttonColor: 'bg-sky-500 hover:bg-sky-600',
|
||||
themeColor: 'sky',
|
||||
gradient: 'from-sky-500/20 to-indigo-500/20',
|
||||
borderColor: 'border-sky-500/30',
|
||||
},
|
||||
{
|
||||
id: 'nicotine-lozenge',
|
||||
@ -33,10 +33,10 @@ const smokingAids = [
|
||||
image: 'https://m.media-amazon.com/images/I/61h+Z88Ev9S._AC_SX679_.jpg',
|
||||
url: 'https://amzn.to/4rfQl8s',
|
||||
icon: Pill,
|
||||
color: 'text-red-400',
|
||||
bgColor: 'bg-red-500/10',
|
||||
borderColor: 'border-red-500/20',
|
||||
buttonColor: 'bg-red-500 hover:bg-red-600',
|
||||
color: 'text-rose-400',
|
||||
themeColor: 'rose',
|
||||
gradient: 'from-rose-500/20 to-pink-500/20',
|
||||
borderColor: 'border-rose-500/30',
|
||||
},
|
||||
{
|
||||
id: 'recovery-complex',
|
||||
@ -48,10 +48,10 @@ const smokingAids = [
|
||||
image: 'https://m.media-amazon.com/images/I/51HWgmCW1-L._AC_SX679_.jpg',
|
||||
url: 'https://amzn.to/3NFU1Sx',
|
||||
icon: Sparkles,
|
||||
color: 'text-purple-400',
|
||||
bgColor: 'bg-purple-500/10',
|
||||
borderColor: 'border-purple-500/20',
|
||||
buttonColor: 'bg-purple-500 hover:bg-purple-600',
|
||||
color: 'text-amber-400',
|
||||
themeColor: 'amber',
|
||||
gradient: 'from-amber-500/20 to-orange-500/20',
|
||||
borderColor: 'border-amber-500/30',
|
||||
},
|
||||
{
|
||||
id: 'mullein-tea',
|
||||
@ -63,10 +63,10 @@ const smokingAids = [
|
||||
image: 'https://m.media-amazon.com/images/I/81NU8bv72uL._SX679_PIbundle-20,TopRight,0,0_SX679SY693SH20_.jpg',
|
||||
url: 'https://amzn.to/3LzNpEM',
|
||||
icon: Coffee,
|
||||
color: 'text-green-400',
|
||||
bgColor: 'bg-green-500/10',
|
||||
borderColor: 'border-green-500/20',
|
||||
buttonColor: 'bg-green-500 hover:bg-green-600',
|
||||
color: 'text-emerald-400',
|
||||
themeColor: 'emerald',
|
||||
gradient: 'from-emerald-500/20 to-teal-500/20',
|
||||
borderColor: 'border-emerald-500/30',
|
||||
},
|
||||
];
|
||||
|
||||
@ -74,99 +74,131 @@ export function SmokingAidsContent() {
|
||||
const { theme } = useTheme();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pb-24 pt-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto space-y-16">
|
||||
<div className="min-h-screen pb-24 pt-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto space-y-16 overflow-hidden">
|
||||
{/* Hero Section */}
|
||||
<div className="relative text-center space-y-6 max-w-4xl mx-auto animate-in fade-in slide-in-from-bottom-8 duration-700">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-32 bg-purple-500/20 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative text-center space-y-6 max-w-4xl mx-auto animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-purple-500/10 dark:bg-purple-500/5 rounded-full blur-[120px] -z-10 animate-pulse-subtle" />
|
||||
|
||||
<h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight">
|
||||
Tools for Your <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-orange-400">Freedom</span>
|
||||
<h1 className="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight">
|
||||
Tools for Your <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-orange-400 animate-gradient-x">Freedom</span>
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
||||
Transform your journey with tools designed to support your physical recovery and mental resilience. You don't have to do this alone.
|
||||
<p className="text-lg sm:text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto font-medium">
|
||||
Transform your journey with tools designed to support your physical recovery and mental resilience. You don't have to do this alone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Grid Section */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
|
||||
{smokingAids.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="group animate-in fade-in slide-in-from-bottom-12 fill-mode-both"
|
||||
style={{ animationDelay: `${index * 150}ms` }}
|
||||
>
|
||||
<Card className="h-full flex flex-col overflow-hidden border-border/40 hover:border-border/80 transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 bg-card/30 backdrop-blur-xl relative group">
|
||||
{/* Full card gradient overlay on hover */}
|
||||
<div className={`absolute inset-0 bg-gradient-to-br ${item.bgColor.replace('bg-', 'from-').split('/')[0]}/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none z-0`} />
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10">
|
||||
{smokingAids.map((item, index) => {
|
||||
const cardBackground = theme === 'light'
|
||||
? `linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 100%)`
|
||||
: `linear-gradient(135deg, rgba(16, 16, 32, 0.7) 0%, rgba(24, 24, 48, 0.6) 100%)`;
|
||||
|
||||
<div className="flex flex-col sm:flex-row h-full relative z-10">
|
||||
{/* Image Section - Top on mobile, Left on desktop */}
|
||||
<div className="relative w-full sm:w-2/5 h-64 sm:h-auto bg-gradient-to-br from-white/5 to-white/0 p-6 flex items-center justify-center shrink-0">
|
||||
<div className="relative w-40 h-40 sm:w-48 sm:h-48 transition-transform duration-500 group-hover:scale-105 bg-white rounded-full shadow-lg flex items-center justify-center overflow-hidden">
|
||||
<div className="relative w-3/4 h-3/4">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-contain drop-shadow-sm"
|
||||
sizes="(max-width: 640px) 100vw, 300px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary" className="absolute top-4 left-4 backdrop-blur-md bg-white text-black border-white/20 shadow-sm px-3 py-1 text-sm font-medium">
|
||||
{item.category}
|
||||
</Badge>
|
||||
</div>
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className="group animate-in fade-in slide-in-from-bottom-12 fill-mode-both"
|
||||
style={{ animationDelay: `${index * 150}ms` }}
|
||||
>
|
||||
<Card
|
||||
className="h-full flex flex-col overflow-hidden border-border/40 transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.2)] dark:hover:shadow-[0_20px_50px_rgba(0,0,0,0.4)] hover:-translate-y-2 backdrop-blur-xl relative group"
|
||||
style={{
|
||||
background: cardBackground,
|
||||
borderColor: `rgba(var(--${item.themeColor}-500), 0.3)`
|
||||
}}
|
||||
>
|
||||
{/* Specific card glow on hover */}
|
||||
<div className={`absolute top-0 right-0 w-64 h-64 opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none blur-[80px] -translate-y-1/2 translate-x-1/2`}
|
||||
style={{ backgroundColor: `rgba(var(--${item.themeColor}-500), 0.1)` }} />
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="flex flex-col flex-grow p-6 sm:p-8">
|
||||
<div className="flex items-start justify-between gap-4 mb-4">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold group-hover:text-primary transition-colors line-clamp-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1 mt-2">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-3.5 h-3.5 ${i < Math.floor(item.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-muted'}`}
|
||||
/>
|
||||
))}
|
||||
<span className="text-xs text-muted-foreground ml-2">({item.rating})</span>
|
||||
<div className="flex flex-col sm:flex-row h-full relative z-10">
|
||||
{/* Image Section - Now with seamless blending */}
|
||||
<div className="relative w-full sm:w-2/5 h-72 sm:h-auto overflow-hidden flex items-center justify-center shrink-0">
|
||||
{/* Atmospheric background glow - larger and softer */}
|
||||
<div className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-20 group-hover:opacity-40 transition-all duration-700 blur-[60px] transform scale-150`} />
|
||||
|
||||
{/* Vertical fader to blend image area into content area */}
|
||||
<div className="absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-transparent to-transparent group-hover:from-white/5 transition-colors duration-500 hidden sm:block" />
|
||||
|
||||
<div className="relative w-48 h-48 sm:w-56 sm:h-56 transition-all duration-1000 group-hover:scale-105 flex items-center justify-center">
|
||||
{/* High-fidelity glass orb effect */}
|
||||
<div className="absolute inset-0 bg-white/10 dark:bg-white/[0.03] backdrop-blur-[30px] rounded-full border border-white/20 dark:border-white/10 shadow-[0_0_50px_rgba(0,0,0,0.3)]" />
|
||||
|
||||
{/* Inner glow/shimmer */}
|
||||
<div className="absolute inset-2 rounded-full bg-gradient-to-tr from-white/10 to-transparent opacity-50" />
|
||||
|
||||
<div className="relative w-[75%] h-[75%] z-20">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-contain filter drop-shadow-[0_15px_15px_rgba(0,0,0,0.4)] brightness-110"
|
||||
style={{
|
||||
maskImage: 'radial-gradient(circle at center, black 60%, transparent 100%)',
|
||||
WebkitMaskImage: 'radial-gradient(circle at center, black 60%, transparent 100%)'
|
||||
}}
|
||||
sizes="(max-width: 640px) 100vw, 300px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`p-2.5 rounded-xl ${item.bgColor} ${item.color} shrink-0`}>
|
||||
<item.icon className="w-5 h-5" />
|
||||
<div className="absolute top-4 left-4">
|
||||
<Badge className="bg-white/10 dark:bg-black/20 backdrop-blur-xl text-foreground border-white/20 px-3 py-1.5 text-xs font-bold uppercase tracking-widest shadow-lg">
|
||||
{item.category}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
<div className={`mt-auto p-4 rounded-xl ${item.bgColor} border ${item.borderColor} mb-6`}>
|
||||
<div className="flex gap-3">
|
||||
<Quote className={`w-4 h-4 ${item.color} shrink-0 flip-x`} />
|
||||
<p className="text-xs font-medium italic opacity-90">
|
||||
{item.benefit}
|
||||
</p>
|
||||
{/* Content Section */}
|
||||
<div className="flex flex-col flex-grow p-6 sm:p-8">
|
||||
<div className="flex items-start justify-between gap-4 mb-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl sm:text-2xl font-bold tracking-tight group-hover:text-primary transition-colors duration-300">
|
||||
{item.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1.5 mt-3">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-4 h-4 ${i < Math.floor(item.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-muted-foreground/30'}`}
|
||||
/>
|
||||
))}
|
||||
<span className="text-xs font-bold text-muted-foreground/70 ml-2 tracking-wide tracking-widest">{item.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`p-3 rounded-2xl bg-white/5 border border-white/10 ${item.color} shadow-lg shrink-0 group-hover:scale-110 transition-transform duration-500`}>
|
||||
<item.icon className="w-5 h-5 sm:w-6 sm:h-6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
asChild
|
||||
className={`w-full text-white font-semibold shadow-lg transition-all duration-300 hover:ring-2 hover:ring-offset-2 hover:ring-offset-background ${item.buttonColor} rounded-xl h-12`}
|
||||
>
|
||||
<a href={item.url} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-2">
|
||||
View on Amazon
|
||||
<ExternalLink className="w-4 h-4 ml-1" />
|
||||
</a>
|
||||
</Button>
|
||||
<p className="text-muted-foreground/80 text-sm leading-relaxed mb-8 line-clamp-3 font-medium">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
<div className={`mt-auto p-5 rounded-2xl bg-gradient-to-br ${item.gradient} border ${item.borderColor} mb-8 relative overflow-hidden group/benefit`}>
|
||||
<div className="absolute inset-0 bg-white/5 opacity-0 group-hover/benefit:opacity-100 transition-opacity duration-500" />
|
||||
<div className="flex gap-4 relative z-10">
|
||||
<Quote className={`w-5 h-5 ${item.color} shrink-0 opacity-80`} />
|
||||
<p className="text-[13px] font-semibold leading-relaxed opacity-90 italic">
|
||||
{item.benefit}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
asChild
|
||||
className={`w-full text-white font-bold shadow-[0_10px_20px_rgba(0,0,0,0.2)] hover:shadow-[0_15px_30px_rgba(0,0,0,0.3)] transition-all duration-500 hover:ring-2 hover:ring-${item.themeColor}-500/50 hover:ring-offset-4 hover:ring-offset-background bg-gradient-to-r from-primary to-primary/80 rounded-2xl h-14 group-hover:scale-[1.02] active:scale-95`}
|
||||
>
|
||||
<a href={item.url} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-3">
|
||||
View Details
|
||||
<ExternalLink className="w-5 h-5 opacity-70 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Trust/Disclaimer Section */}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user