From a035500c343f61908a84c5b01e07b4446a04f2ee Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 19 Sep 2025 00:27:35 +0200
Subject: [PATCH] style: adjust spacing and responsive layout for stack section
 and cubes

---
 src/components/StackSection.tsx    | 4 ++--
 src/components/ui/StackedCubes.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/StackSection.tsx b/src/components/StackSection.tsx
index fea4567..d2f7c37 100644
--- a/src/components/StackSection.tsx
+++ b/src/components/StackSection.tsx
@@ -7,7 +7,7 @@ import { FadeIn } from "./FadeIn";
 export function StackSectionPreview() {
 
   return (
-        <section className="w-full bg-transparent lg:px-0 py-24 px-6 relative">
+        <section className="w-full bg-transparent lg:px-0 py-12 lg:py-24 px-6 relative">
       <div className="mx-auto max-w-7xl">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
           {/* Left Column - Text (1/3 width) */}
@@ -25,7 +25,7 @@ export function StackSectionPreview() {
             </FadeIn>
           </div>
           {/* Right Column - Stacked Cubes (2/3 width) */}
-          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2">
+          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2 mt-8 lg:mt-0">
             <FadeIn>
               <StackedCubes />
             </FadeIn>
diff --git a/src/components/ui/StackedCubes.tsx b/src/components/ui/StackedCubes.tsx
index cb33333..0753bbc 100644
--- a/src/components/ui/StackedCubes.tsx
+++ b/src/components/ui/StackedCubes.tsx
@@ -33,7 +33,7 @@ const stackData = [
 
 export function StackedCubes() {
   const [active, setActive] = useState<string | null>("agent");
-  const [selectedForMobile, setSelectedForMobile] = useState<string | null>(null);
+  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
 
   const handleCubeClick = (id: string) => {
     setSelectedForMobile(prev => (prev === id ? null : id));
@@ -44,11 +44,11 @@ export function StackedCubes() {
   return (
     <div className="flex flex-col items-center">
     <div 
-      className="relative w-full flex items-center justify-center lg:justify-start min-h-[300px] sm:min-h-[400px] lg:min-h-[400px]"
+      className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
       onMouseLeave={() => setActive("agent")}
     >
       <motion.div
-        className="relative ml-0 sm:ml-4 lg:ml-8 h-[300px] sm:h-[400px] lg:h-[400px] w-64 sm:w-80 lg:w-96"
+        className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96 scale-120 lg:scale-100"
         animate={{ y: ["-8px", "8px"] }}
         transition={{
           duration: 4,
@@ -81,7 +81,7 @@ export function StackedCubes() {
       </motion.div>
     </div>
     {selectedMobileLayer && (
-      <div className="lg:hidden w-full max-w-md p-6 mt-8 bg-gray-800/50 rounded-lg">
+      <div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-800/50 rounded-lg">
         <h4 className="text-white text-lg font-semibold mb-2 text-center">
           {selectedMobileLayer.descriptionTitle}
         </h4>