docs(suspensive.org): add npm install copy-button on landing page

docs/suspensive.org/src/components/HomePage.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'nextra/hooks'
 import { useEffect, useRef } from 'react'
+import { NpmInstallCopyButton } from './NpmInstallCopyButton'
 
 const CodeBlockClassName = 'nextra-code'
 
@@ -16,13 +17,12 @@ const backtickToCodeBlock = (text: string) =>
 const formatCodeBlocks = (desc: string) => backtickToCodeBlock(escapeHtml(desc))
 
 export const HomePage = ({
-  description,
+  title,
   buttonText,
   items,
   children,
 }: {
   title: string
-  description: string
   buttonText: string
   items: { title: string; desc: string }[]
   version: number
@@ -60,26 +60,15 @@ export const HomePage = ({
               />
             </div>
             <div className="flex flex-col items-center gap-4">
-              <div className="break-keep px-4 text-4xl font-bold leading-tight md:text-6xl">
-                <span>{description}</span>
+              <div className="break-keep bg-gradient-to-r from-white via-white/80 to-white/60 bg-clip-text px-4 text-4xl font-bold leading-tight text-transparent md:text-6xl">
+                <span>{title}</span>
               </div>
-              <motion.p
-                initial={{ opacity: 0 }}
-                animate={{
-                  opacity: 0.6,
-                  transition: { delay: 0.1, duration: 1 },
-                }}
-                className="rounded-full text-lg text-white md:text-xl"
-              >
-                npm i @suspensive/react
-              </motion.p>
             </div>
+            <NpmInstallCopyButton />
           </div>
           <Link href={`/${router.locale}/docs/react/motivation`}>
             <motion.button
-              whileHover={{
-                scale: 1.05,
-              }}
+              whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
               initial={{ opacity: 0 }}
               animate={{
@@ -92,7 +81,7 @@ export const HomePage = ({
                   'drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5))',
               }}
               type="button"
-              className="rounded-xl bg-white px-8 py-3 text-lg font-bold text-[#111111] md:px-10 md:py-3 md:text-xl"
+              className="rounded-xl bg-white px-7 py-2 text-lg font-bold text-[#111111] md:px-9 md:py-3 md:text-xl"
             >
               {buttonText}
             </motion.button>

docs/suspensive.org/src/components/NpmInstallCopyButton.tsx

@@ -0,0 +1,46 @@
+import { AnimatePresence, motion } from 'motion/react'
+import '../styles/globals.css'
+import Image from 'next/image'
+import { useState } from 'react'
+import checkSVG from '../../public/img/icons/check.svg'
+import content_copySVG from '../../public/img/icons/content_copy.svg'
+
+const npmInstallScript = 'npm i @suspensive/react'
+export const NpmInstallCopyButton = () => {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isClicked, setIsClicked] = useState(false)
+
+  return (
+    <motion.button
+      className="relative mt-4 flex cursor-copy"
+      type="button"
+      onHoverStart={() => setIsHovered(true)}
+      onHoverEnd={() => {
+        setIsHovered(false)
+        setIsClicked(false)
+      }}
+      whileHover={{ opacity: 1 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 0.5 }}
+      onClick={() => {
+        navigator.clipboard.writeText(npmInstallScript)
+        setIsClicked(true)
+      }}
+    >
+      ~ {npmInstallScript}
+      <motion.div className="absolute -right-8 flex items-center justify-center">
+        <AnimatePresence>
+          {isHovered ? (
+            <motion.span
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <Image src={isClicked ? checkSVG : content_copySVG} alt="" />
+            </motion.span>
+          ) : null}
+        </AnimatePresence>
+      </motion.div>
+    </motion.button>
+  )
+}

docs/suspensive.org/src/pages/en/index.mdx

@@ -6,7 +6,7 @@ import {
 } from '@/components'
 
 <HomePage
-  description="All in one for React Suspense"
+  title="All in one for React Suspense"
   buttonText="Get Started"
   items={[
     {

docs/suspensive.org/src/pages/ko/index.mdx

@@ -6,7 +6,7 @@ import {
 } from '@/components'
 
 <HomePage
-  description="React Suspense를 위한 모든 것"
+  title="React Suspense를 위한 모든 것"
   buttonText="시작하기"
   items={[
     {

docs/suspensive.org/svg.d.ts

@@ -0,0 +1 @@
+declare module '*.svg'

docs/suspensive.org/tsconfig.json

@@ -23,6 +23,7 @@
   },
   "include": [
     "next-env.d.ts",
+    "svg.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",