docs(suspensive.org): beautify main page

toss · Dec 15, 2024 · 199118c · 199118c
1 parent 07a2ac0
commit 199118c
Show file tree

Hide file tree

Showing 9 changed files with 557 additions and 59 deletions.
diff --git a/docs/suspensive.org/public/img/homepage_background.svg b/docs/suspensive.org/public/img/homepage_background.svg
diff --git a/docs/suspensive.org/public/img/homepage_logo.png b/docs/suspensive.org/public/img/homepage_logo.png
diff --git a/docs/suspensive.org/src/components/HomePage.tsx b/docs/suspensive.org/src/components/HomePage.tsx
@@ -1,7 +1,7 @@
 import { motion } from 'motion/react'
 import Image from 'next/image'
+import Link from 'next/link'
 import { useRouter } from 'nextra/hooks'
-import { Link } from 'nextra-theme-docs'
 
 const CodeBlockClassName = 'nextra-code'
 
@@ -14,63 +14,95 @@ const backtickToCodeBlock = (text: string) =>
 const formatCodeBlocks = (desc: string) => backtickToCodeBlock(escapeHtml(desc))
 
 export const HomePage = ({
-  title,
   description,
   buttonText,
   items,
-  version,
+  children,
 }: {
   title: string
   description: string
   buttonText: string
   items: { title: string; desc: string }[]
   version: number
+  children?: React.ReactNode
 }) => {
   const router = useRouter()
 
   return (
-    <div className="pb-20">
-      <div className="flex flex-col items-center justify-center gap-8 pt-11 text-center">
-        <Image
-          src="/img/logo_background_star.png"
-          alt="Suspensive with star"
-          width={400}
-          height={241}
-        />
-        <div className="flex flex-col items-center gap-4">
-          <div className="relative text-5xl font-bold">
-            <span>{title}</span>{' '}
-            <span className="absolute text-sm">v{version}</span>
+    <>
+      <motion.section
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        className="-mx-6 bg-[url('/img/homepage_background.svg')] bg-cover bg-center bg-no-repeat pb-20"
+      >
+        <div className="flex flex-col items-center justify-center gap-8 text-center">
+          <div className="flex flex-col items-center">
+            <Image
+              src="/img/homepage_logo.png"
+              alt="Suspensive with star"
+              width={360}
+              height={360}
+              className="-mb-4"
+            />
+            <div className="flex flex-col items-center gap-4">
+              <div className="break-keep px-4 text-5xl font-bold leading-tight md:text-6xl">
+                <span>{description}</span>
+              </div>
+              <motion.p
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity: 0.6,
+                  transition: { delay: 0.1, duration: 1 },
+                }}
+                className="rounded-full text-xl text-white"
+              >
+                npm i @suspensive/react
+              </motion.p>
+            </div>
           </div>
-          <p className="text-3xl">{description}</p>
+          <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: 1, duration: 1 } }}
+              type="button"
+              className="animate-pulse rounded-xl bg-white px-10 py-3 text-xl font-bold text-[#111111]"
+            >
+              {buttonText}
+            </motion.button>
+          </Link>
         </div>
-        <Link href={`/${router.locale}/docs/react/motivation`}>
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            type="button"
-            className="animate-pulse rounded-xl bg-gray-800 px-10 py-3 text-xl font-bold"
-          >
-            {buttonText}
-          </motion.button>
-        </Link>
-      </div>
 
-      <div className="h-14"></div>
-      <div className="flex flex-col items-start justify-between gap-8 md:flex-row">
-        {items.map(({ title, desc }) => (
-          <div
-            className="flex flex-1 flex-col items-center justify-center gap-3 text-center"
-            key={title}
-          >
-            <div className="text-xl font-bold">{title}</div>
-            <p
-              className="text-lg"
-              dangerouslySetInnerHTML={{ __html: formatCodeBlocks(desc) }}
-            ></p>
-          </div>
-        ))}
-      </div>
-    </div>
+        <div className="h-14" />
+        <div className="container mx-auto flex flex-col items-start justify-between gap-8 px-10 md:flex-row">
+          {items.map(({ title, desc }, index) => (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{
+                opacity: 1,
+                transition: { delay: 0.2 + index * 0.05, duration: 1 },
+              }}
+              className="flex flex-1 flex-col items-center justify-center gap-3 text-center"
+              key={title}
+            >
+              <div className="text-xl font-bold">{title}</div>
+              <p
+                className="text-lg opacity-75"
+                dangerouslySetInnerHTML={{ __html: formatCodeBlocks(desc) }}
+              />
+            </motion.div>
+          ))}
+        </div>
+      </motion.section>
+      <motion.section
+        initial={{ y: 30, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.5, duration: 0.2 }}
+        className="container mx-auto px-6"
+      >
+        {children}
+      </motion.section>
+    </>
   )
 }
diff --git a/docs/suspensive.org/src/components/Scrollycoding.tsx b/docs/suspensive.org/src/components/Scrollycoding.tsx
@@ -83,7 +83,7 @@ export function Scrollycoding(props: unknown) {
               className="mb-56 cursor-pointer px-5 py-2 opacity-30 blur-lg transition data-[selected=true]:opacity-100 data-[selected=true]:blur-none"
             >
               <h2 className="2xl mb-4 mt-4 text-lg font-bold">{step.title}</h2>
-              <div className="opacity-90">{step.children}</div>
+              <div className="opacity-75">{step.children}</div>
             </Selectable>
           ))}
         </div>

diff --git a/docs/suspensive.org/src/components/SectionText.tsx b/docs/suspensive.org/src/components/SectionText.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react'
+
+export const SectionTitle = ({ children }: { children: ReactNode }) => (
+  <h3 className="text-1xl text-center font-bold opacity-60 md:text-2xl">
+    {children}
+  </h3>
+)
+export const SectionDescription = ({ children }: { children: ReactNode }) => (
+  <h4 className="text-center text-4xl font-bold">{children}</h4>
+)
diff --git a/docs/suspensive.org/src/components/index.ts b/docs/suspensive.org/src/components/index.ts
@@ -3,3 +3,4 @@ export { HomePage } from './HomePage'
 export { Sandpack } from './Sandpack'
 export { BubbleChart } from './BubbleChart'
 export { Scrollycoding } from './Scrollycoding'
+export { SectionTitle, SectionDescription } from './SectionText'
diff --git a/docs/suspensive.org/src/pages/en/index.mdx b/docs/suspensive.org/src/pages/en/index.mdx
@@ -1,8 +1,11 @@
-import { HomePage, Scrollycoding } from '@/components'
+import {
+  HomePage,
+  Scrollycoding,
+  SectionDescription,
+  SectionTitle,
+} from '@/components'
 
 <HomePage
-  title="Suspensive"
-  version={2}
   description="All in one for React Suspense"
   buttonText="Get Started"
   items={[
@@ -19,7 +22,7 @@ import { HomePage, Scrollycoding } from '@/components'
       desc: 'Suspensive provide clientOnly that make developer can adopt React Suspense gradually in Server-side rendering environment.',
     },
   ]}
-/>
+>
 
 <Scrollycoding>
 # !!steps If you write code without Suspense with TanStack Query, a representative library, you would write it like this.
@@ -181,9 +184,10 @@ const Page = () => (
 
 </Scrollycoding>
 
-## This is why we make Suspensive.
-
-### Suspense, ClientOnly, DefaultProps
+<SectionTitle>This is why we make Suspensive</SectionTitle>
+<br />
+<SectionDescription>Suspense, ClientOnly, DefaultProps</SectionDescription>
+<br />
 
 <Scrollycoding>
 # !!steps When using frameworks like Next.js, it can be difficult to use Suspense on the server.
@@ -299,7 +303,8 @@ const Page = () => (
 
 </Scrollycoding>
 
-### ErrorBoundaryGroup, ErrorBoundary
+<SectionDescription>ErrorBoundaryGroup, ErrorBoundary</SectionDescription>
+<br />
 
 <Scrollycoding>
 
@@ -422,3 +427,5 @@ const DeepComponent = () => (
 ```
 
 </Scrollycoding>
+
+</HomePage>
diff --git a/docs/suspensive.org/src/pages/ko/index.mdx b/docs/suspensive.org/src/pages/ko/index.mdx
@@ -1,8 +1,11 @@
-import { HomePage, Scrollycoding } from '@/components'
+import {
+  HomePage,
+  Scrollycoding,
+  SectionDescription,
+  SectionTitle,
+} from '@/components'
 
 <HomePage
-  title="Suspensive"
-  version={2}
   description="React Suspense를 위한 모든 것"
   buttonText="시작하기"
   items={[
@@ -181,9 +184,10 @@ const Page = () => (
 
 </Scrollycoding>
 
-## 이것이 우리가 Suspensive를 만드는 이유입니다.
-
-### Suspense, ClientOnly, DefaultProps
+<SectionTitle>이것이 우리가 Suspensive를 만드는 이유입니다</SectionTitle>
+<br />
+<SectionDescription>Suspense, ClientOnly, DefaultProps</SectionDescription>
+<br />
 
 <Scrollycoding>
 
@@ -300,7 +304,8 @@ const Page = () => (
 
 </Scrollycoding>
 
-### ErrorBoundaryGroup, ErrorBoundary
+<SectionDescription>ErrorBoundaryGroup, ErrorBoundary</SectionDescription>
+<br />
 
 <Scrollycoding>
 

diff --git a/docs/suspensive.org/src/styles/globals.css b/docs/suspensive.org/src/styles/globals.css
@@ -9,3 +9,7 @@
 .scrollbar-none::-webkit-scrollbar {
   display: none; /* Chrome, Safari, Opera*/
 }
+
+body {
+  background-color: #0c0c0c;
+}