From a2c323191e242fb40a53ce365e2cb0c9670a1107 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 12 Sep 2025 22:18:00 +0200
Subject: [PATCH] ook

---
 src/components/ClickableGallery.tsx | 48 ++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/components/ClickableGallery.tsx b/src/components/ClickableGallery.tsx
index b81f019..7cf6be2 100644
--- a/src/components/ClickableGallery.tsx
+++ b/src/components/ClickableGallery.tsx
@@ -49,17 +49,36 @@ export function ClickableGallery() {
   const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))
 
   return (
-    <section
-      className="relative w-full h-[92vh] flex items-center justify-center overflow-hidden bg-background"
-      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="pt-24 pb-12 text-center">
+        <motion.h1
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1, delay: 1 }}
+          className="mx-auto max-w-5xl text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
+        >
+          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="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
+        <div className="relative w-full max-w-[1800px] h-full" style={{ perspective: '1600px' }}>
+          <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
           <AnimatePresence initial={false}>
             {indices.map((idx, i) => {
               const distance = i - VISIBLE
@@ -69,7 +88,7 @@ export function ClickableGallery() {
               const z = -Math.abs(distance) * DEPTH
               const r = distance * ROT_Y
               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)
 
               return (
@@ -112,7 +131,7 @@ export function ClickableGallery() {
             className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md"
             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>
         </div>
         <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"
             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>
         </div>
 
         {/* Foreground pill */}
         <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">
-            <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}
             </h2>
             <Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base">
@@ -138,5 +157,6 @@ export function ClickableGallery() {
         </div>
       </div>
     </section>
+    </>
   )
 }