ourworld_web/www_mycelium_cloud2
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ook

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-12 22:18:00 +02:00
parent 3e79ab7ab8
commit a2c323191e
1 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/ClickableGallery.tsx
View File

@@ -49,17 +49,36 @@ export function ClickableGallery() {
const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1)) const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))
return ( return (
<section <>
className="relative w-full h-[92vh] flex items-center justify-center overflow-hidden bg-background" <div className="pt-24 pb-12 text-center">
onMouseEnter={() => setHovering(true)} <motion.h1
onMouseLeave={() => setHovering(false)} initial={{ opacity: 0 }}
> animate={{ opacity: 1 }}
{/* Soft edge fades */} transition={{ duration: 1, delay: 1 }}
<div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-background to-transparent" /> className="mx-auto max-w-5xl text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
<div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-background to-transparent" /> >
One Agent, Endless Possibilities.
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1.5 }}
className="mx-auto max-w-3xl mt-8 text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
>
The future isn’t about more tools — it’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
</motion.p>
</div>
<section
className="relative w-full h-[900px] flex items-center justify-center overflow-hidden bg-background -mt-48"
onMouseEnter={() => setHovering(true)}
onMouseLeave={() => setHovering(false)}
>
{/* Soft edge fades */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-background to-transparent" />
<div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-background to-transparent" />
<div className="relative w-full max-w-[1800px] h-[900px]" style={{ perspective: '1600px' }}> <div className="relative w-full max-w-[1800px] h-full" style={{ perspective: '1600px' }}>
<div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}> <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
<AnimatePresence initial={false}> <AnimatePresence initial={false}>
{indices.map((idx, i) => { {indices.map((idx, i) => {
const distance = i - VISIBLE const distance = i - VISIBLE
@@ -69,7 +88,7 @@ export function ClickableGallery() {
const z = -Math.abs(distance) * DEPTH const z = -Math.abs(distance) * DEPTH
const r = distance * ROT_Y const r = distance * ROT_Y
const s = 1 - Math.abs(distance) * SCALE_DROP const s = 1 - Math.abs(distance) * SCALE_DROP
const o = distance === 0 ? 1 : 0.85 const o = distance === 0 ? 1 : 0.90
const zIndex = 100 - Math.abs(distance) const zIndex = 100 - Math.abs(distance)
return ( return (
@@ -112,7 +131,7 @@ export function ClickableGallery() {
className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md" className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md"
aria-label="Previous" aria-label="Previous"
> >
<svg className="size-8" viewBox="0 0 24 24" fill="none"><path d="M15 19L8 12l7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg> <svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M15 19L8 12l7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
</button> </button>
</div> </div>
<div className="absolute inset-y-0 right-8 flex items-center z-50"> <div className="absolute inset-y-0 right-8 flex items-center z-50">
@@ -121,14 +140,14 @@ export function ClickableGallery() {
className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md" className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md"
aria-label="Next" aria-label="Next"
> >
<svg className="size-8" viewBox="0 0 24 24" fill="none"><path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg> <svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
</button> </button>
</div> </div>
{/* Foreground pill */} {/* Foreground pill */}
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60]"> <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60]">
<div className="flex items-center gap-6 rounded-3xl bg-white/95 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 py-6 backdrop-blur"> <div className="flex items-center gap-6 rounded-3xl bg-white/95 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 py-6 backdrop-blur">
<h2 className="text-2xl lg:text-3xl font-semibold leading-tight text-black max-w-[820px]"> <h2 className="text-2xl lg:text-3xl font-semibold leading-tight text-[#2F3178] max-w-[820px]">
{galleryItems[active].text} {galleryItems[active].text}
</h2> </h2>
<Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base"> <Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base">
@@ -138,5 +157,6 @@ export function ClickableGallery() {
</div> </div>
</div> </div>
</section> </section>
</>
) )
} }