Add animated call-to-action button

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^11.3.19",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

src/App.tsx

@@ -1,8 +1,37 @@
+import { motion } from 'framer-motion'
+import { useEffect, useState } from 'react'
+import CallToAction from './components/CallToAction'
+
 export default function App() {
+  const [showCallToAction, setShowCallToAction] = useState<boolean>(false)
+  const animationDuration: number = 0.5 // In seconds.
+  const callToActionDelay: number = 3500 // In milliseconds.
+  const callToActionURL: string = 'https://www.youtube.com/watch?v=OOscn6lrabs'
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowCallToAction(true)
+    }, callToActionDelay)
+
+    return () => clearTimeout(timer)
+  }, [])
+
   return (
     <div className='flex min-h-screen items-center justify-center bg-customPurple'>
-      <div className='relative bottom-[10vh] rounded-2xl bg-white p-8 shadow-lg'>
-        <h1 className='text-center text-8xl font-bold uppercase'>You Are!</h1>
+      <div className='relative bottom-[10vh] rounded-2xl '>
+        <motion.h1
+          animate={{ opacity: showCallToAction ? 0.3 : 1 }}
+          className='z-10 text-center text-8xl font-bold uppercase text-white'
+          transition={{ duration: animationDuration, ease: 'easeOut' }}
+        >
+          You Are!
+        </motion.h1>
+        {showCallToAction && (
+          <CallToAction
+            animationDuration={animationDuration}
+            callToActionURL={callToActionURL}
+          />
+        )}
       </div>
     </div>
   )

src/components/CallToAction.tsx

@@ -0,0 +1,29 @@
+import { motion } from 'framer-motion'
+
+interface CallToActionProps {
+  animationDuration: number,
+  callToActionURL: string
+}
+
+type FnHandleClick = (callToActionURL: CallToActionProps['callToActionURL']) => void;
+
+const handleClick: FnHandleClick = (url) => {
+  window.location.href = url
+}
+
+export default function CallToAction({ animationDuration, callToActionURL }: CallToActionProps) {
+  return (
+    <div className='absolute left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2'>
+      <motion.button
+        animate={{ opacity: 1, rotate: -15, x: 0 }}
+        className='rounded-xl bg-white px-8 py-4 text-2xl hover:bg-amber-400 focus:bg-amber-400'
+        initial={{ opacity: 0, rotate: 340, x: 100 }}
+        onClick={() => handleClick(callToActionURL)}
+        transition={{ duration: animationDuration, ease: 'easeOut' }}
+        type='button'
+      >
+        Show Me!
+      </motion.button>
+    </div>
+  )
+}