From 40f27842c230fcb90fcb16d13962f687978f0818 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Tue, 21 Jan 2025 01:19:43 +0900
Subject: [PATCH] feat: add copy button to landing page

---
 .../src/components/CopyButton.tsx             | 35 ++++++++++++
 .../src/components/HomePage.tsx               | 55 ++++++++++---------
 docs/suspensive.org/src/pages/en/index.mdx    |  3 +-
 docs/suspensive.org/src/pages/ko/index.mdx    |  3 +-
 4 files changed, 69 insertions(+), 27 deletions(-)
 create mode 100644 docs/suspensive.org/src/components/CopyButton.tsx

diff --git a/docs/suspensive.org/src/components/CopyButton.tsx b/docs/suspensive.org/src/components/CopyButton.tsx
new file mode 100644
index 000000000..a9b1d7d5b
--- /dev/null
+++ b/docs/suspensive.org/src/components/CopyButton.tsx
@@ -0,0 +1,35 @@
+import { motion } from 'motion/react'
+
+interface Props {
+  children: string
+}
+
+export function CopyButton({ children }: Props) {
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(children)
+  }
+
+  return (
+    <motion.button
+      whileHover={{
+        scale: 1.05,
+      }}
+      whileTap={{ scale: 0.95 }}
+      initial={{ opacity: 0 }}
+      animate={{
+        opacity: 1,
+        transition: {
+          delay: 0.8,
+          duration: 2,
+        },
+        filter:
+          '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"
+      onClick={handleCopyClick}
+      className="flex items-center gap-2 rounded-xl border px-7 py-2 before:content-['$'] md:px-10 md:py-3"
+    >
+      {children}
+    </motion.button>
+  )
+}
diff --git a/docs/suspensive.org/src/components/HomePage.tsx b/docs/suspensive.org/src/components/HomePage.tsx
index 56b3ad9b7..c9926346b 100644
--- a/docs/suspensive.org/src/components/HomePage.tsx
+++ b/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 { CopyButton } from './CopyButton'
 
 const CodeBlockClassName = 'nextra-code'
 
@@ -16,6 +17,7 @@ const backtickToCodeBlock = (text: string) =>
 const formatCodeBlocks = (desc: string) => backtickToCodeBlock(escapeHtml(desc))
 
 export const HomePage = ({
+  title,
   description,
   buttonText,
   items,
@@ -60,8 +62,8 @@ 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/30 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 }}
@@ -71,32 +73,35 @@ export const HomePage = ({
                 }}
                 className="rounded-full text-lg text-white md:text-xl"
               >
-                npm i @suspensive/react
+                {description}
               </motion.p>
             </div>
           </div>
-          <Link href={`/${router.locale}/docs/react/motivation`}>
-            <motion.button
-              whileHover={{
-                scale: 1.05,
-              }}
-              whileTap={{ scale: 0.95 }}
-              initial={{ opacity: 0 }}
-              animate={{
-                opacity: 1,
-                transition: {
-                  delay: 0.8,
-                  duration: 2,
-                },
-                filter:
-                  '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"
-            >
-              {buttonText}
-            </motion.button>
-          </Link>
+          <div className="flex items-center gap-4">
+            <CopyButton>npm i @suspensive/react</CopyButton>
+            <Link href={`/${router.locale}/docs/react/motivation`}>
+              <motion.button
+                whileHover={{
+                  scale: 1.05,
+                }}
+                whileTap={{ scale: 0.95 }}
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity: 1,
+                  transition: {
+                    delay: 0.8,
+                    duration: 2,
+                  },
+                  filter:
+                    '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-7 py-2 text-lg font-bold text-[#111111] md:px-9 md:py-3 md:text-xl"
+              >
+                {buttonText}
+              </motion.button>
+            </Link>
+          </div>
         </div>
 
         <div className="h-14" />
diff --git a/docs/suspensive.org/src/pages/en/index.mdx b/docs/suspensive.org/src/pages/en/index.mdx
index a043186f1..152a1f299 100644
--- a/docs/suspensive.org/src/pages/en/index.mdx
+++ b/docs/suspensive.org/src/pages/en/index.mdx
@@ -6,7 +6,8 @@ import {
 } from '@/components'
 
 <HomePage
-  description="All in one for React Suspense"
+  title="All in one for React Suspense"
+  description="Use suspense easily and powerful."
   buttonText="Get Started"
   items={[
     {
diff --git a/docs/suspensive.org/src/pages/ko/index.mdx b/docs/suspensive.org/src/pages/ko/index.mdx
index 528dfbf6e..0a5172efc 100644
--- a/docs/suspensive.org/src/pages/ko/index.mdx
+++ b/docs/suspensive.org/src/pages/ko/index.mdx
@@ -6,7 +6,8 @@ import {
 } from '@/components'
 
 <HomePage
-  description="React Suspense를 위한 모든 것"
+  title="React Suspense를 위한 모든 것"
+  description="Suspense를 쉽고 강력하게 사용하세요."
   buttonText="시작하기"
   items={[
     {