design

src/components/Section.tsx

@@ -10,6 +10,7 @@ interface SectionProps {
   variant?: 'white' | 'gray';
   borderTop?: boolean;
   connector?: React.ReactNode;
+  illustration?: React.ReactNode;
 }
 
 export const Section: React.FC<SectionProps> = ({
@@ -21,12 +22,13 @@ export const Section: React.FC<SectionProps> = ({
   variant = 'white',
   borderTop = false,
   connector,
+  illustration,
 }) => {
   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}`}>
+    <section className={`relative py-24 md:py-32 group ${bgClass} ${borderClass} ${className}`}>
       <div className="narrow-container">
         <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16">
           {/* Sidebar: Number & Title */}
@@ -56,6 +58,13 @@ export const Section: React.FC<SectionProps> = ({
                   </div>
                 </Reveal>
               )}
+              {illustration && (
+                <Reveal delay={delay + 0.2}>
+                  <div className="pt-12 opacity-20 group-hover:opacity-100 transition-opacity duration-700">
+                    {illustration}
+                  </div>
+                </Reveal>
+              )}
             </div>
           </div>