From f5a59ea7f1172d87cc37f243029a1ffc413f4fc6 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 12 Sep 2025 22:36:03 +0200
Subject: [PATCH] feat: add gradient backgrounds and animated typing effect to
 gallery component

---
 src/components/ClickableGallery.tsx | 42 ++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/ClickableGallery.tsx b/src/components/ClickableGallery.tsx
index 7cf6be2..9a38e0e 100644
--- a/src/components/ClickableGallery.tsx
+++ b/src/components/ClickableGallery.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image'
 import { motion, AnimatePresence } from 'framer-motion'
 import { wrap } from 'popmotion'
 import { Button } from '@/components/Button'
+import { TypeAnimation } from 'react-type-animation'
 
 const galleryItems = [
   { text: 'Navigate and interact with any web interface', image: '/images/interface.png' },
@@ -50,7 +51,7 @@ export function ClickableGallery() {
 
   return (
     <>
-      <div className="pt-24 pb-12 text-center">
+      <div className="relative isolate pt-24 pb-12 text-center">
         <motion.h1
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
@@ -65,8 +66,20 @@ export function ClickableGallery() {
           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.
+          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
+          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]"
+          />
+        </div>
       </div>
       <section
         className="relative w-full h-[900px] flex items-center justify-center overflow-hidden bg-background -mt-48"
@@ -78,6 +91,18 @@ export function ClickableGallery() {
         <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-full" style={{ perspective: '1600px' }}>
+          <div
+            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%+4rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%+60rem)] sm:w-[72.1875rem]"
+            />
+          </div>
           <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
           <AnimatePresence initial={false}>
             {indices.map((idx, i) => {
@@ -146,10 +171,15 @@ 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 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-[#2F3178] max-w-[820px]">
-              {galleryItems[active].text}
-            </h2>
+          <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">
+            <TypeAnimation
+              key={active}
+              sequence={[galleryItems[active].text]}
+              wrapper="h2"
+              speed={50}
+              className="text-2xl lg:text-3xl font-semibold leading-tight text-[#2F3178] max-w-[820px] h-[72px]"
+              repeat={0}
+            />
             <Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base">
                Start
             </Button>