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">
{/* 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 p-4 shadow-lg flex items-center justify-center">
<Image
src={item.image}
alt={item.title}
fill
className="object-contain drop-shadow-xl"
sizes="(max-width: 640px) 100vw, 300px"
/>
<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}