ux: unify carousel cards, reorder sections, and slow marquee

Make Recently Buried and Famous Casualties use matching card spacing and section layout, move Recently Buried above Famous Casualties, and reduce carousel speed for a calmer scroll.

Made-with: Cursor

Author: dotsystemsdevs

src/app/page.tsx

@@ -103,12 +103,17 @@ export default function Page() {
       {idle && (
         <div style={{ width: '100%', marginTop: '34px', paddingBottom: 0 }}>
           <div style={{ marginBottom: '14px', textAlign: 'center' }}>
+            <p style={{ fontFamily: FONT, fontSize: '13px', fontWeight: 700, color: '#727272', margin: 0, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
+              Recently Buried
+            </p>
+          </div>
+          <RecentlyBuried onSelect={handleSelect} />
+          <div style={{ marginTop: '28px', marginBottom: '14px', textAlign: 'center' }}>
             <p style={{ fontFamily: FONT, fontSize: '13px', fontWeight: 700, color: '#727272', margin: 0, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
               Famous Casualties
             </p>
           </div>
           <Leaderboard onSelect={handleSelect} />
-          <RecentlyBuried onSelect={handleSelect} />
         </div>
       )}
 

src/components/Leaderboard.tsx

@@ -103,7 +103,7 @@ export default function Leaderboard({ onSelect }: Props) {
       <div className="marquee-track" style={{
         display: 'flex',
         gap: '14px',
-        animation: 'marquee 200s linear infinite',
+        animation: 'marquee 360s linear infinite',
         width: 'max-content',
       }}>
         {HALL_OF_SHAME.map((entry) => (

src/components/RecentlyBuried.tsx

@@ -35,8 +35,8 @@ export default function RecentlyBuried({ onSelect }: Props) {
     return `${days}d ago`
   }
 
-  // Match Famous Casualties px/s: 36 cards × 310px in 80s = 139.5 px/s
-  const duration = Math.round((entries.length * 310) / 55.8)
+  // Keep a calmer marquee pace.
+  const duration = Math.round((entries.length * 310) / 30)
 
   function Card({ entry }: { entry: typeof entries[number] }) {
     return (
@@ -82,20 +82,15 @@ export default function RecentlyBuried({ onSelect }: Props) {
         <span style={{ fontSize: '14px', fontStyle: 'italic', color: '#4d4d4d', lineHeight: 1.6, fontWeight: 500, marginTop: '2px' }}>
           {entry.cause}
         </span>
-        <span style={{ fontSize: '12px', color: '#787878', marginTop: 'auto' }}>
+        <span style={{ fontSize: '12px', color: '#787878', marginTop: '4px' }}>
           {entry.analyzedAt ? timeAgo(entry.analyzedAt) : ''}
         </span>
       </button>
     )
   }
 
   return (
-    <div style={{ width: '100%', marginTop: '28px' }}>
-      <div style={{ marginBottom: '14px', textAlign: 'center' }}>
-        <p style={{ fontFamily: FONT, fontSize: '13px', fontWeight: 700, color: '#727272', margin: 0, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
-          Recently Buried
-        </p>
-      </div>
+    <div style={{ width: '100%' }}>
       <div
         style={{ width: '100vw', marginLeft: 'calc(50% - 50vw)', overflow: 'hidden', padding: '4px 20px 8px' }}
         onMouseEnter={e => { (e.currentTarget.querySelector('.recent-track') as HTMLElement).style.animationPlayState = 'paused' }}