averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: fix herbal tea image not respecting bubble shape by enforcing inner containment

Browse Source
This commit is contained in:
Avery Felts 2026-01-27 09:09:56 -07:00
parent ba9989b877
commit b28d5a3c98
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/smoking-aids/page.tsx
View File

@ -102,14 +102,16 @@ export default function SmokingAidsPage() {
<div className="flex flex-col sm:flex-row h-full relative z-10"> <div className="flex flex-col sm:flex-row h-full relative z-10">
{/* Image Section - Top on mobile, Left on desktop */} {/* 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-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 p-4 shadow-lg flex items-center justify-center"> <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">
<Image <div className="relative w-3/4 h-3/4">
src={item.image} <Image
alt={item.title} src={item.image}
fill alt={item.title}
className="object-contain drop-shadow-xl" fill
sizes="(max-width: 640px) 100vw, 300px" className="object-contain drop-shadow-sm"
/> sizes="(max-width: 640px) 100vw, 300px"
/>
</div>
</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"> <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} {item.category}