Как использовать Framer Motion для создания анимации уменьшения высоты?

Для создания анимации уменьшения высоты и сворачивания карточки после развертывания с использованием Framer Motion вам понадобится:

1. Установите библиотеку Framer Motion, если еще не установлена. Чтобы установить ее, выполните следующую команду в командной строке:
```
npm install framer-motion
```

2. Импортируйте необходимые компоненты из библиотеки Framer Motion в ваш файл:
```javascript
import { motion, useReducedMotion } from "framer-motion";
```

3. Создайте компонент карточки, который будет содержать кнопку "Показать больше", и определите состояние, отвечающее за развернутость карточки:
```javascript
const Card = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpanded = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div>
      <motion.div
        initial={{ height: "100px" }} // начальная высота карточки
        animate={{ height: isExpanded ? "300px" : "100px" }} // конечная высота в зависимости от состояния "развёрнутости"
        transition={{ duration: 0.5 }} // длительность анимации
      >
        {/* содержимое карточки */}
      </motion.div>
      <button onClick={toggleExpanded}>
        {isExpanded ? "Скрыть" : "Показать больше"}
      </button>
    </div>
  );
};
```

4. Добавьте этот компонент в свою исходную разметку или использование компонента `Card`:
```javascript
import React from "react";
import ReactDOM from "react-dom";
import Card from "./Card";

ReactDOM.render(<Card />, document.getElementById("root"));
```

После этих шагов у вас должна быть анимация уменьшения высоты карточки и кнопка "Показать больше", которая будет разворачивать и сворачивать карточку. Анимация будет создана с использованием Framer Motion.