ourworld_web/www_mycelium_cloud2
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: adjust spacing and responsive layout for stack section and cubes

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-19 00:27:35 +02:00
parent 2b5c502724
commit a035500c34
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/StackSection.tsx
View File

@@ -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>

8
src/components/ui/StackedCubes.tsx
View File

@@ -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>