websites page

src/components/Section.tsx

@@ -11,6 +11,7 @@ interface SectionProps {
   borderTop?: boolean;
   connector?: React.ReactNode;
   containerVariant?: 'narrow' | 'normal' | 'wide';
+  illustration?: React.ReactNode;
 }
 
 export const Section: React.FC<SectionProps> = ({
@@ -23,6 +24,7 @@ export const Section: React.FC<SectionProps> = ({
   borderTop = false,
   connector,
   containerVariant = 'narrow',
+  illustration,
 }) => {
   const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white';
   const borderClass = borderTop ? 'border-t border-slate-100' : '';
@@ -91,6 +93,13 @@ export const Section: React.FC<SectionProps> = ({
                     </div>
                   </Reveal>
                 )}
+                {illustration && (
+                  <Reveal delay={delay + 0.2}>
+                    <div className="pt-12 opacity-100 group-hover:scale-110 transition-transform duration-700 origin-left">
+                      {illustration}
+                    </div>
+                  </Reveal>
+                )}
               </div>
             </div>