design

src/components/Section.tsx

@@ -8,6 +8,8 @@ interface SectionProps {
   className?: string;
   numberPosition?: 'left' | 'right';
   delay?: number;
+  variant?: 'white' | 'gray';
+  borderTop?: boolean;
 }
 
 export const Section: React.FC<SectionProps> = ({
@@ -16,21 +18,33 @@ export const Section: React.FC<SectionProps> = ({
   children,
   className = "",
   numberPosition = 'left',
-  delay = 0
+  delay = 0,
+  variant = 'white',
+  borderTop = false,
 }) => {
+  const bgClass = variant === 'gray' ? 'bg-slate-50/50' : 'bg-white';
+  const borderClass = borderTop ? 'border-t border-slate-100' : '';
+
   return (
-    <section className={`narrow-container relative ${className}`}>
-      {number && (
-        <div className={`absolute ${numberPosition === 'left' ? '-left-24' : '-right-24'} -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10`}>
-          {number}
+    <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>
+          </Reveal>
+        )}
+        <div className="relative z-10">
+          {children}
         </div>
-      )}
-      {title && (
-        <Reveal delay={delay}>
-          <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">{title}</h2>
-        </Reveal>
-      )}
-      {children}
+      </div>
     </section>
   );
 };