Add cards animation

[w3b3]

https://www.framer.com/motion/
https://www.framer.com/api/motion/animate-shared-layout/

const [selectedId, setSelectedId] = useState(null)
 
<AnimateSharedLayout type="crossfade">
  {items.map(item => (
    <motion.div layoutId={item.id} onClick={() => setSelectedId(item.id)}>
      <motion.h5>{item.subtitle}</motion.h5>
      <motion.h2>{item.title}</motion.h2>
    </motion.div>
  ))}
 
  <AnimatePresence>
    {selectedId && (
      <motion.div layoutId={selectedId}>
        <motion.h5>{item.subtitle}</motion.h5>
        <motion.h2>{item.title}</motion.h2>
        <motion.button onClick={() => setSelectedId(null)} />
      </motion.div>
    )}
  </AnimatePresence>
</AnimateSharedLayout>