Project 1:Create a card and inside card write a word “response” and animate it using framer motion in such a way that it should scale in x axis first then scale in y axis and after that it should stay like that for 1 second and then it should come back to its original position and this animation should repeat again and again with a delay of 0.5 seconds and below the card write “Make your animation work on all device” and add some shadow effect to it.

import React from "react";
import { motion } from "framer-motion";

const App = () => {
  return (
    <div className="bg-black text-white h-screen w-screen items-center justify-center flex">
      <div className="bg-amber-950 w-36 py-1 px-2 rounded-xl font-sans overflow-hidden">
        <div className="text-6xl  max-h-48 font-semibold overflow-y-hidden  overflow-x-hidden tracking-widest break-words ">
          <motion.p
            initial={{ scaleX: 1, scaleY: 1 }}
            animate={{
              opacity: [0, 1, 1, 1, 1],
              scaleX: [1, 1, 2, 3, 3, 3],
              scaleY: [1, 1, 1, 1, 2, 3],
            }}
            transition={{
              duration: 4,
              delay: 0.5,
              repeatType: "reverse",
              repeat: Infinity,
              repeatDelay: 0.5,
            }}
            className="w-2/3"
            style={{ transformOrigin: "top left" }}
          >
            response
          </motion.p>
        </div>
        <div className="relative p-2 z-99">
          <div className="bg-black w-full blur-md opacity-20 right-1   absolute h-full "></div>
          Make your animation work on all device
        </div>
      </div>
    </div>
  );
};

export default App;