blog design

src/components/Section.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Reveal } from './Reveal';
+
+interface SectionProps {
+  number?: string;
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+  numberPosition?: 'left' | 'right';
+  delay?: number;
+}
+
+export const Section: React.FC<SectionProps> = ({
+  number,
+  title,
+  children,
+  className = "",
+  numberPosition = 'left',
+  delay = 0
+}) => {
+  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}
+        </div>
+      )}
+      {title && (
+        <Reveal delay={delay}>
+          <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">{title}</h2>
+        </Reveal>
+      )}
+      {children}
+    </section>
+  );
+};