ok
This commit is contained in:
@@ -54,47 +54,32 @@ export function ClickableGallery() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={ref}>
|
<div ref={ref}>
|
||||||
<div className="relative isolate pt-24 pb-0 text-center w-full">
|
<div className="py-24 relative isolate pt-24 pb-0 bg-black text-center w-full">
|
||||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} transition={{ duration: 0.8, delay: 0.1 }} className="mx-auto max-w-5xl">
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} transition={{ duration: 0.8, delay: 0.1 }} className="mx-auto max-w-5xl">
|
||||||
<H2 className="text-center">One Agent, Endless Possibilities.</H2>
|
<H2 className="text-center mt-12">One Agent, Endless Possibilities.</H2>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} transition={{ duration: 0.8, delay: 0.2 }} className="mx-auto max-w-4xl mt-6">
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} transition={{ duration: 0.8, delay: 0.2 }} className="mx-auto max-w-4xl mt-6">
|
||||||
<P className="text-center" color="custom">
|
<P className="text-center" color="primary">
|
||||||
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.
|
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.
|
||||||
</P>
|
</P>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
|
|
||||||
transition={{ duration: 1, delay: 0.3 }}
|
|
||||||
aria-hidden="true"
|
|
||||||
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
clipPath:
|
|
||||||
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
|
||||||
}}
|
|
||||||
className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
<motion.section
|
<motion.section
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
|
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
|
||||||
transition={{ duration: 1, delay: 0.4 }}
|
transition={{ duration: 1, delay: 0.4 }}
|
||||||
className="relative w-full flex items-center justify-center overflow-hidden bg-background -mt-16 pt-0 pb-32"
|
className="relative w-full flex items-center justify-center overflow-hidden bg-black pt-0 pb-32"
|
||||||
onMouseEnter={() => setHovering(true)}
|
onMouseEnter={() => setHovering(true)}
|
||||||
onMouseLeave={() => setHovering(false)}
|
onMouseLeave={() => setHovering(false)}
|
||||||
>
|
>
|
||||||
{/* Soft edge fades */}
|
{/* 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 left-0 w-32 bg-gradient-to-r from-black 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="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-black to-transparent" />
|
||||||
|
|
||||||
<div className="relative w-full max-w-[1800px] h-[500px]" style={{ perspective: '1600px' }}>
|
<div className="relative w-full max-w-[1800px] h-[500px]" style={{ perspective: '1600px' }}>
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
className="absolute inset-x-0 -z-10 transform-gpu overflow-hidden blur-3xl"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -140,7 +125,7 @@ export function ClickableGallery() {
|
|||||||
src={item.image}
|
src={item.image}
|
||||||
alt={item.text}
|
alt={item.text}
|
||||||
fill
|
fill
|
||||||
className="object-contain rounded-2xl"
|
className="object-contain rounded-2xl text-black"
|
||||||
priority={i === VISIBLE}
|
priority={i === VISIBLE}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -173,7 +158,7 @@ export function ClickableGallery() {
|
|||||||
{/* 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 justify-between w-[1040px] 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 justify-between w-[1040px] gap-6 rounded-3xl bg-white/95 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 py-6 backdrop-blur">
|
||||||
<H4 as="h4" className="max-w-[820px] h-[72px]">
|
<H4 as="h4" className="max-w-[820px] h-[72px] text-black">
|
||||||
<TypeAnimation
|
<TypeAnimation
|
||||||
key={active}
|
key={active}
|
||||||
sequence={[galleryItems[active].text]}
|
sequence={[galleryItems[active].text]}
|
||||||
|
@@ -116,7 +116,7 @@ function ReviewGrid() {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-black" />
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-black" />
|
||||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black" />
|
<div className="pointer-events-none absolute inset-x-0 bottom-12 h-32 bg-gradient-to-t from-black" />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -162,23 +162,6 @@ export function UseCases() {
|
|||||||
<ReviewGrid />
|
<ReviewGrid />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Background Gradient */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
|
|
||||||
transition={{ duration: 1, delay: 0.3 }}
|
|
||||||
aria-hidden="true"
|
|
||||||
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
clipPath:
|
|
||||||
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
|
||||||
}}
|
|
||||||
className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
</Container>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
|
Reference in New Issue
Block a user