ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

refactor: standardize vertical spacing across feature sections

Browse Source 
- Reduced py-10 to py-8 for consistent spacing in feature grids and carousels
- Restructured HomeHosting and HomeTab sections with full-width border layout pattern
- Replaced HomeTab card grid with bento-style component showcase layout
This commit is contained in:
sasha-astiadi
2025-11-06 19:46:09 +01:00
parent 7ee6da68fe
commit ae3e78f75a
12 changed files with 194 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/home/StackSectionDark.tsx
View File

@@ -7,9 +7,12 @@ import { FadeIn } from "@/components/ui/FadeIn";
export function StackSectionDark() {
return (
<section className="relative w-full bg-[#121212] overflow-hidden py-24 isolate">
<section className="relative w-full bg-[#171717] overflow-hidden">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
<div className="w-full border-t border-l border-r border-gray-600" />
{/* === Background Layer === */}
<div className="absolute inset-0 z-0 bg-transparent">
<div className="absolute inset-0 z-0 bg-transparent border-t-0 border-b-0 border-gray-600">
{/* Central main aura */}
<motion.div
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
@@ -51,7 +54,7 @@ export function StackSectionDark() {
</div>
{/* === Content === */}
<div className="relative mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center pt-12">
<div className="relative mx-auto max-w-7xl px-6 lg:px-12 border border-t-0 border-b-0 border-gray-600 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center py-24 ">
{/* Left Column - Text */}
<div className="text-center lg:text-left z-10">
<FadeIn>
@@ -69,7 +72,7 @@ export function StackSectionDark() {
</div>
{/* Right Column - Animated Stack */}
<div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10">
<div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10 pt-10">
<motion.div
initial={{ y: 30, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
@@ -93,6 +96,9 @@ export function StackSectionDark() {
</motion.div>
</div>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-600" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
</section>
);
}