<Link href="/Examples/basic-layouts/stack" onClick={() => posthog.capture('example-clicked', { name: 'stack', kind: 'basic-layouts' })}>
      <div className='summary-item'>
        <div className='image-container'>![basic-layouts-stack](../../../app/app/demos/basic-layouts/stack/preview.png)</div>
        <div className='label-container'>
          Stack
        </div>
      </div>
    </Link>

    <Link href="/Examples/basic-layouts/parallax" onClick={() => posthog.capture('example-clicked', { name: 'parallax', kind: 'basic-layouts' })}>
      <div className='summary-item'>
        <div className='image-container'>![basic-layouts-parallax](../../../app/app/demos/basic-layouts/parallax/preview.png)</div>
        <div className='label-container'>
          Parallax
        </div>
      </div>
    </Link>

    <Link href="/Examples/basic-layouts/normal" onClick={() => posthog.capture('example-clicked', { name: 'normal', kind: 'basic-layouts' })}>
      <div className='summary-item'>
        <div className='image-container'>![basic-layouts-normal](../../../app/app/demos/basic-layouts/normal/preview.png)</div>
        <div className='label-container'>
          Normal
        </div>
      </div>
    </Link>

    <Link href="/Examples/basic-layouts/left-align" onClick={() => posthog.capture('example-clicked', { name: 'left-align', kind: 'basic-layouts' })}>
      <div className='summary-item'>
        <div className='image-container'>![basic-layouts-left-align](../../../app/app/demos/basic-layouts/left-align/preview.png)</div>
        <div className='label-container'>
          Left Align
        </div>
      </div>
    </Link>

    <Link href="/Examples/utils/pagination" onClick={() => posthog.capture('example-clicked', { name: 'pagination', kind: 'utils' })}>
      <div className='summary-item'>
        <div className='image-container'>![utils-pagination](../../../app/app/demos/utils/pagination/preview.png)</div>
        <div className='label-container'>
          Pagination
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/tinder" onClick={() => posthog.capture('example-clicked', { name: 'tinder', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-tinder](../../../app/app/demos/custom-animations/tinder/preview.png)</div>
        <div className='label-container'>
          Tinder
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/scale-fade-in-out" onClick={() => posthog.capture('example-clicked', { name: 'scale-fade-in-out', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-scale-fade-in-out](../../../app/app/demos/custom-animations/scale-fade-in-out/preview.png)</div>
        <div className='label-container'>
          Scale Fade In Out
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/rotate-in-out" onClick={() => posthog.capture('example-clicked', { name: 'rotate-in-out', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-rotate-in-out](../../../app/app/demos/custom-animations/rotate-in-out/preview.png)</div>
        <div className='label-container'>
          Rotate In Out
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/rotate-fade-in-out" onClick={() => posthog.capture('example-clicked', { name: 'rotate-fade-in-out', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-rotate-fade-in-out](../../../app/app/demos/custom-animations/rotate-fade-in-out/preview.png)</div>
        <div className='label-container'>
          Rotate Fade In Out
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/quick-swipe" onClick={() => posthog.capture('example-clicked', { name: 'quick-swipe', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-quick-swipe](../../../app/app/demos/custom-animations/quick-swipe/preview.png)</div>
        <div className='label-container'>
          Quick Swipe
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/press-swipe" onClick={() => posthog.capture('example-clicked', { name: 'press-swipe', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-press-swipe](../../../app/app/demos/custom-animations/press-swipe/preview.png)</div>
        <div className='label-container'>
          Press Swipe
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/multiple" onClick={() => posthog.capture('example-clicked', { name: 'multiple', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-multiple](../../../app/app/demos/custom-animations/multiple/preview.png)</div>
        <div className='label-container'>
          Multiple
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/fold" onClick={() => posthog.capture('example-clicked', { name: 'fold', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-fold](../../../app/app/demos/custom-animations/fold/preview.png)</div>
        <div className='label-container'>
          Fold
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/flow" onClick={() => posthog.capture('example-clicked', { name: 'flow', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-flow](../../../app/app/demos/custom-animations/flow/preview.png)</div>
        <div className='label-container'>
          Flow
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/curve" onClick={() => posthog.capture('example-clicked', { name: 'curve', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-curve](../../../app/app/demos/custom-animations/curve/preview.png)</div>
        <div className='label-container'>
          Curve
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/cube-3d" onClick={() => posthog.capture('example-clicked', { name: 'cube-3d', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-cube-3d](../../../app/app/demos/custom-animations/cube-3d/preview.png)</div>
        <div className='label-container'>
          Cube 3d
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/circular" onClick={() => posthog.capture('example-clicked', { name: 'circular', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-circular](../../../app/app/demos/custom-animations/circular/preview.png)</div>
        <div className='label-container'>
          Circular
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/blur-rotate" onClick={() => posthog.capture('example-clicked', { name: 'blur-rotate', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-blur-rotate](../../../app/app/demos/custom-animations/blur-rotate/preview.png)</div>
        <div className='label-container'>
          Blur Rotate
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/blur-parallax" onClick={() => posthog.capture('example-clicked', { name: 'blur-parallax', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-blur-parallax](../../../app/app/demos/custom-animations/blur-parallax/preview.png)</div>
        <div className='label-container'>
          Blur Parallax
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/anim-tab-bar" onClick={() => posthog.capture('example-clicked', { name: 'anim-tab-bar', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-anim-tab-bar](../../../app/app/demos/custom-animations/anim-tab-bar/preview.png)</div>
        <div className='label-container'>
          Anim Tab Bar
        </div>
      </div>
    </Link>

    <Link href="/Examples/custom-animations/advanced-parallax" onClick={() => posthog.capture('example-clicked', { name: 'advanced-parallax', kind: 'custom-animations' })}>
      <div className='summary-item'>
        <div className='image-container'>![custom-animations-advanced-parallax](../../../app/app/demos/custom-animations/advanced-parallax/preview.png)</div>
        <div className='label-container'>
          Advanced Parallax
        </div>
      </div>
    </Link>