refactor: sanierung

apps/web/src/components/Section.tsx

@@ -31,6 +31,7 @@ export const Section: React.FC<SectionProps> = ({
   illustration,
   effects,
 }) => {
+  const hasSidebar = !!(number || title || illustration);
   const bgClass = {
     white: "bg-white",
     gray: "bg-slate-50/50",
@@ -81,9 +82,9 @@ export const Section: React.FC<SectionProps> = ({
       {effects}
 
       <div className={cn("relative z-10", containerClass)}>
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-24">
-          {/* Sidebar: Number & Title (Only if provided) */}
-          {(number || title || illustration) && (
+        {hasSidebar ? (
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-24">
+            {/* Sidebar: Number & Title */}
             <div className="md:col-span-3">
               <div className="md:sticky md:top-40 flex flex-col gap-4 md:gap-8">
                 <div className="flex items-end md:flex-col md:items-start gap-6 md:gap-8">
@@ -91,7 +92,6 @@ export const Section: React.FC<SectionProps> = ({
                     <Reveal delay={delay}>
                       <span className="block text-4xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
                         {number}
-                        {/* Subtle binary overlay on number */}
                         <span
                           className="absolute -top-1 md:top-1 left-0 text-[7px] md:text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
                           aria-hidden="true"
@@ -106,7 +106,6 @@ export const Section: React.FC<SectionProps> = ({
                   {title && (
                     <Reveal delay={delay + 0.1}>
                       <div className="flex items-center gap-3 md:gap-4 mb-2 md:mb-0">
-                        {/* Animated dot indicator */}
                         <div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
                         <Label className="text-slate-900 text-[9px] md:text-[10px] tracking-[0.3em] md:tracking-[0.4em]">
                           {title}
@@ -124,19 +123,13 @@ export const Section: React.FC<SectionProps> = ({
                 )}
               </div>
             </div>
-          )}
 
-          {/* Main Content */}
-          <div
-            className={cn(
-              number || title || illustration
-                ? "md:col-span-9"
-                : "md:col-span-12",
-            )}
-          >
-            {children}
+            {/* Main Content */}
+            <div className="md:col-span-9">{children}</div>
           </div>
-        </div>
+        ) : (
+          <div className="w-full">{children}</div>
+        )}
       </div>
     </section>
   );