design

src/components/Section.tsx

@@ -6,7 +6,6 @@ interface SectionProps {
   title?: string;
   children: React.ReactNode;
   className?: string;
-  numberPosition?: 'left' | 'right';
   delay?: number;
   variant?: 'white' | 'gray';
   borderTop?: boolean;
@@ -17,32 +16,44 @@ export const Section: React.FC<SectionProps> = ({
   title,
   children,
   className = "",
-  numberPosition = 'left',
   delay = 0,
   variant = 'white',
   borderTop = false,
 }) => {
-  const bgClass = variant === 'gray' ? 'bg-slate-50/50' : 'bg-white';
+  const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white';
   const borderClass = borderTop ? 'border-t border-slate-100' : '';
 
   return (
     <section className={`relative py-24 md:py-32 ${bgClass} ${borderClass} ${className}`}>
-      <div className="narrow-container relative">
-        {number && (
-          <div className={`absolute ${numberPosition === 'left' ? '-left-24' : '-right-24'} -top-24 text-[15rem] md:text-[20rem] font-bold text-slate-100/50 select-none -z-10 pointer-events-none`}>
-            {number}
-          </div>
-        )}
-        {title && (
-          <Reveal delay={delay}>
-            <div className="flex items-center gap-4 mb-12 md:mb-16">
-              <div className="h-px w-8 bg-slate-200"></div>
-              <h2 className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-400">{title}</h2>
+      <div className="narrow-container">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16">
+          {/* Sidebar: Number & Title */}
+          <div className="md:col-span-3 relative">
+            <div className="md:sticky md:top-32 space-y-6">
+              {number && (
+                <Reveal delay={delay}>
+                  <span className="block text-6xl md:text-8xl font-bold text-slate-100 leading-none select-none">
+                    {number}
+                  </span>
+                </Reveal>
+              )}
+              {title && (
+                <Reveal delay={delay + 0.1}>
+                  <div className="flex items-center gap-3">
+                    <div className="h-px w-6 bg-slate-900"></div>
+                    <h2 className="text-xs font-bold uppercase tracking-[0.3em] text-slate-900">
+                      {title}
+                    </h2>
+                  </div>
+                </Reveal>
+              )}
             </div>
-          </Reveal>
-        )}
-        <div className="relative z-10">
-          {children}
+          </div>
+
+          {/* Main Content */}
+          <div className="md:col-span-9">
+            {children}
+          </div>
         </div>
       </div>
     </section>