fix gry

src/components/ClickableGallery.tsx

@@ -5,26 +5,25 @@ import Image from 'next/image'
 import { motion, AnimatePresence, useInView } from 'framer-motion'
 import { wrap } from 'popmotion'
 import { Button } from '@/components/Button';
-import { H2, P, H4 } from '@/components/Texts';
+import { H2, P, H4, CT, CP } from '@/components/Texts';
 import { TypeAnimation } from 'react-type-animation'
 
 const galleryItems = [
-  { text: 'Navigate and interact with any web interface', image: '/images/interface.png' },
-  { text: 'Process documents across all formats', image: '/images/docs.png' },
-  { text: 'Execute multi-step workflows autonomously', image: '/images/flow.png' },
-  { text: 'Manage calendars, emails, and tasks', image: '/images/calendar.png' },
-  { text: 'Perform deep semantic search across all data sources', image: '/images/data.png' },
-  { text: 'Identify patterns in complex datasets', image: '/images/datasets.png' },
-  { text: 'Provide real-time market intelligence', image: '/images/market.png' },
-  { text: 'Generate and debug code in multiple languages', image: '/images/code.png' },
-  { text: 'Create consistent branded content', image: '/images/branding.png' },
-  { text: 'Translate and localize materials', image: '/images/translate.png' },
-  { text: 'Transform and migrate data structures', image: '/images/structure.png' },
+  { text: 'Navigate and interact with any web interface', image: '/images/gallery/interface.jpg', width: 448, height: 277 },
+  { text: 'Process documents across all formats', image: '/images/gallery/docs.jpg', width: 448, height: 277 },
+  { text: 'Execute multi-step workflows autonomously', image: '/images/gallery/flow.jpg', width: 448, height: 277 },
+  { text: 'Manage calendars, emails, and tasks', image: '/images/gallery/calendar.jpg', width: 448, height: 277 },
+  { text: 'Perform deep semantic search across all data sources', image: '/images/gallery/data.jpg', width: 448, height: 277 },
+  { text: 'Identify patterns in complex datasets', image: '/images/gallery/datasets.jpg', width: 448, height: 277 },
+  { text: 'Provide real-time market intelligence', image: '/images/gallery/market.jpg', width: 448, height: 277 },
+  { text: 'Generate and debug code in multiple languages', image: '/images/gallery/code.jpg', width: 448, height: 277 },
+  { text: 'Create consistent branded content', image: '/images/gallery/branding.jpg', width: 448, height: 277 },
+  { text: 'Translate and localize materials', image: '/images/gallery/translate.jpg', width: 448, height: 277 },
+  { text: 'Transform and migrate data structures', image: '/images/gallery/structure.jpg', width: 448, height: 277 },
 ]
 
 // 🔧 Carousel Config
 const VISIBLE = 4
-const CARD_SIZE = 360 // square size on desktop
 const GAP = 300       // spacing for larger cards
 const ROT_Y = 18
 const DEPTH = 210
@@ -54,9 +53,9 @@ export function ClickableGallery() {
 
   return (
     <div ref={ref}>
-      <div className="relative isolate pt-24 pb-0  bg-black text-center w-full">
+      <div className="relative isolate pt-8 pb-0  bg-transparent 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">
-          <H2 className="text-center mt-12">One Agent, Endless Possibilities.</H2>
+          <H2 className="text-center">One Agent, Endless Possibilities.</H2>
         </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">
           <P className="text-center" color="primary">
@@ -68,7 +67,7 @@ export function ClickableGallery() {
         initial={{ opacity: 0 }}
         animate={isInView ? { opacity: 1 } : { opacity: 0 }}
         transition={{ duration: 1, delay: 0.4 }}
-        className="relative w-full flex items-center justify-center overflow-hidden bg-black pt-0 pb-24"
+        className="relative w-full flex items-center justify-center overflow-hidden bg-transparent -mt-8 pt-0 pb-12"
         onMouseEnter={() => setHovering(true)}
         onMouseLeave={() => setHovering(false)}
       >
@@ -85,33 +84,33 @@ 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.90
+              const o = distance === 0 ? 1 : 0.80
               const zIndex = 100 - Math.abs(distance)
 
               return (
                 <motion.div
                   key={`${idx}-${i}`}
-                  className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 will-change-transform"
+                  className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 will-change-transform overflow-hidden ${distance === 0 ? 'rounded-xl' : ''}`}
                   initial={{ opacity: 0 }}
                   animate={{
                     transform: `translateX(${x}px) translateZ(${z}px) rotateY(${r}deg) scale(${s})`,
                     zIndex,
                     opacity: o,
+                    boxShadow: distance === 0 ? '0 0 20px 5px rgba(255, 255, 255, 0.2)' : 'none',
                   }}
                   exit={{ opacity: 0 }}
                   transition={{ type: 'spring', stiffness: 220, damping: 26 }}
                   onClick={() => setActive(idx)}
                 >
-                  {/* Square container, keeps image ratio inside */}
                   <div
-                    className="relative rounded-2xl overflow-hidden bg-white flex items-center justify-center"
-                    style={{ width: CARD_SIZE, height: CARD_SIZE }}
+                    className="relative bg-black flex items-center justify-center"
                   >
                     <Image
                       src={item.image}
                       alt={item.text}
-                      fill
-                      className="object-contain rounded-2xl text-black"
+                      width={item.width}
+                      height={item.height}
+                      className="object-contain text-white"
                       priority={i === VISIBLE}
                     />
                   </div>
@@ -125,7 +124,7 @@ export function ClickableGallery() {
         <div className="absolute inset-y-0 left-8 flex items-center z-50">
           <button
             onClick={prev}
-            className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md"
+            className="bg-transparent  rounded-full p-2 shadow-lg backdrop-blur-md"
             aria-label="Previous"
           >
             <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"/>' }} />
@@ -134,7 +133,7 @@ export function ClickableGallery() {
         <div className="absolute inset-y-0 right-8 flex items-center z-50">
           <button
             onClick={next}
-            className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md"
+            className="bg-transparent  rounded-full p-2 shadow-lg backdrop-blur-md"
             aria-label="Next"
           >
             <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"/>' }} />
@@ -143,8 +142,8 @@ export function ClickableGallery() {
 
         {/* 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 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] text-black">
+          <div className="flex items-center justify-between w-[1040px] gap-6 rounded-2xl bg-black/30 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 backdrop-blur">
+            <CT as="h4" className="max-w-[820px] h-[72px] text-white flex items-center">
               <TypeAnimation
                 key={active}
                 sequence={[galleryItems[active].text]}
@@ -152,7 +151,7 @@ export function ClickableGallery() {
                 speed={50}
                 repeat={0}
               />
-            </H4>
+            </CT>
             <Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base">
                Start
             </Button> 

src/components/ui/bento-grid.tsx

@@ -57,7 +57,7 @@ export const BentoGridItem = ({
           <Image src={img} alt={title as string} width={300} height={300} className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300" />
         ) : null}
       </div>
-      <div className="p-4 transition duration-200 group-hover/bento:translate-x-2">
+      <div className="p-4 transition duration-200 group-hover/bento:translate-x-2 backdrop-blur-md">
         <CT>{title}</CT>
         <CP className="font-medium">{subtitle}</CP>
         <CP className="mt-2">{description}</CP>