design

src/components/Section.tsx

@@ -9,6 +9,7 @@ interface SectionProps {
   delay?: number;
   variant?: 'white' | 'gray';
   borderTop?: boolean;
+  connector?: React.ReactNode;
 }
 
 export const Section: React.FC<SectionProps> = ({
@@ -19,6 +20,7 @@ export const Section: React.FC<SectionProps> = ({
   delay = 0,
   variant = 'white',
   borderTop = false,
+  connector,
 }) => {
   const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white';
   const borderClass = borderTop ? 'border-t border-slate-100' : '';
@@ -29,10 +31,17 @@ export const Section: React.FC<SectionProps> = ({
         <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">
+             {/* Connector Line */}
+            {connector && (
+                <div className="absolute left-[2.5rem] top-0 bottom-0 w-24 hidden md:block -z-10 pointer-events-none">
+                    {connector}
+                </div>
+            )}
+
             <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">
+                  <span className="block text-6xl md:text-8xl font-bold text-slate-100 leading-none select-none relative bg-white/0 backdrop-blur-[2px]">
                     {number}
                   </span>
                 </Reveal>