ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: center titles, constrain mockups with overflow hidden instead of scale

Browse Source
This commit is contained in:
Usman Baig
2026-03-26 23:31:50 +01:00
parent b5150e3b7a
commit 7a44787438
1 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/checkout/FeatureSlideshow.tsx
View File

@@ -50,7 +50,7 @@ export default function FeatureSlideshow() {
<div className="absolute inset-0 bg-black/40" /> <div className="absolute inset-0 bg-black/40" />
{/* Content */} {/* Content */}
<div className="relative z-10 flex h-full flex-col justify-center px-10 xl:px-14 py-12"> <div className="relative z-10 flex h-full flex-col items-center justify-center px-10 xl:px-14 py-12 overflow-hidden">
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<motion.div <motion.div
key={activeIndex} key={activeIndex}
@@ -58,27 +58,24 @@ export default function FeatureSlideshow() {
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
transition={{ duration: 0.45 }} transition={{ duration: 0.45 }}
className="flex flex-col gap-8" className="flex flex-col items-center gap-6 w-full max-w-lg"
> >
{/* Headline only */} {/* Headline — centered */}
<h2 className="text-3xl xl:text-4xl font-bold text-white leading-tight"> <h2 className="text-3xl xl:text-4xl font-bold text-white leading-tight text-center">
{slide.headline} {slide.headline}
</h2> </h2>
{/* Mockup */} {/* Mockup — constrained */}
<div className="relative"> <div className="relative w-full">
{/* Orange glow */} {/* Orange glow */}
<div className="absolute -inset-8 rounded-3xl bg-brand-orange/8 blur-3xl pointer-events-none" /> <div className="absolute -inset-8 rounded-3xl bg-brand-orange/8 blur-3xl pointer-events-none" />
<div className="relative rounded-2xl overflow-hidden max-h-[50vh]"> <div className="relative rounded-2xl overflow-hidden" style={{ maxHeight: '55vh' }}>
<div className="scale-[0.85] origin-top"> {slide.mockup}
{slide.mockup}
</div>
</div> </div>
</div> </div>
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>
</div> </div>
</div> </div>
) )