feat: redesign home page

src/components/icons/LaughIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+
+export const LaughIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
+  props,
+) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      {...props}
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M512 16C238 16 16 238 16 512s222 496 496 496 496-222 496-496S786 16 512 16z m282.8 778.8c-75.6 75.6-176 117.2-282.8 117.2s-207.2-41.6-282.8-117.2S112 618.8 112 512s41.6-207.2 117.2-282.8S405.2 112 512 112s207.2 41.6 282.8 117.2S912 405.2 912 512s-41.6 207.2-117.2 282.8zM672 448c35.4 0 64-28.6 64-64s-28.6-64-64-64-64 28.6-64 64 28.6 64 64 64z m-320 0c35.4 0 64-28.6 64-64s-28.6-64-64-64-64 28.6-64 64 28.6 64 64 64z m388.8 128H283.2c-16.4 0-29 14-27 30 15 118.4 117.8 210 242.2 210h27.2c124.4 0 227.2-91.6 242.2-210 2-16-10.6-30-27-30z"
+        p-id="2265"
+      ></path>
+    </svg>
+  )
+}

src/components/icons/LoveIcon.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+
+export const LoveIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
+  props,
+) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      {...props}
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M921.6 288.341333a42.666667 42.666667 0 0 1-81.066667 26.666667 163.669333 163.669333 0 0 0-40.405333-64.682667c-66.346667-66.346667-174.592-66.261333-241.408 0.085334l-16.213333 16.597333a43.818667 43.818667 0 0 1-61.013334 0l-16.64-17.066667a171.221333 171.221333 0 0 0-240.981333 0.384 171.221333 171.221333 0 0 0 0 241.749334L512 780.202667l18.944-18.901334a42.624 42.624 0 1 1 60.330667 60.330667l-49.109334 49.066667a42.496 42.496 0 0 1-60.330666 0l-318.293334-318.293334a256.597333 256.597333 0 0 1 0-362.410666c95.146667-95.189333 247.850667-99.413333 348.501334-12.544 101.034667-86.784 253.354667-82.517333 348.416 12.544A248.149333 248.149333 0 0 1 921.6 288.341333zM768 384a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 0a42.666667 42.666667 0 1 1 0 85.333333 42.666667 42.666667 0 1 1 0-85.333333z m-213.333333 42.666667a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 1 1 85.333333 0z m85.333333 42.666666c94.122667 0 170.666667 76.544 170.666667 170.666667 0 47.061333-38.272 85.333333-85.333333 85.333333h-170.666667c-47.061333 0-85.333333-38.272-85.333333-85.333333 0-94.122667 76.544-170.666667 170.666666-170.666667z m-85.333333 170.666667h170.538667c0.128-47.104-38.144-85.333333-85.205334-85.333333-47.061333 0-85.333333 38.272-85.333333 85.333333z"
+        fill="#000000"
+        p-id="14000"
+      ></path>
+    </svg>
+  )
+}

src/components/main/MainLayout.tsx

@@ -27,7 +27,7 @@ export function MainLayout({
         description={APP_DESCRIPTION}
       />
       <header className="py-10">
-        <div className="max-w-screen-md px-5 mx-auto flex justify-between items-center">
+        <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
           <h1 className="inline-block text-2xl font-extrabold">{APP_NAME}</h1>
           <div className="space-x-5 text-zinc-500">
             <ConnectButton />
@@ -35,8 +35,8 @@ export function MainLayout({
         </div>
       </header>
       {children}
-      <footer className="mt-10 text-sm font-medium text-zinc-500">
-        <div className="max-w-screen-md px-5 mx-auto flex justify-between">
+      <footer className="mt-10 font-medium text-zinc-500 border-t">
+        <div className="max-w-screen-lg px-5 py-14 mx-auto flex justify-between">
           <div>
             <span className="align-middle">
               &copy;{" "}
@@ -50,11 +50,11 @@ export function MainLayout({
               </UniLink>
             </span>
             <span className="text-zinc-400 ml-2 inline-flex items-center space-x-1 align-middle">
-              <UniLink href={DISCORD_LINK}>
+              <UniLink className="flex items-center" href={DISCORD_LINK}>
                 <span className="inline-block i-mdi-discord text-xl hover:text-indigo-500"></span>
               </UniLink>
               {GITHUB_LINK && (
-                <UniLink href={GITHUB_LINK}>
+                <UniLink className="flex items-center" href={GITHUB_LINK}>
                   <span className="inline-block i-mdi-github text-xl hover:text-zinc-900"></span>
                 </UniLink>
               )}

src/components/ui/Button.tsx

@@ -14,7 +14,7 @@ type ButtonProps = {
   isAutoWidth?: boolean
   variant?: "primary" | "secondary" | "text" | "like" | "collect" | "crossbell"
   variantColor?: "green" | "red" | "gray"
-  size?: "sm"
+  size?: "sm" | "xl"
   rounded?: "full" | "lg"
 }
 

src/css/tailwind.css

@@ -141,6 +141,13 @@ body {
   @apply min-w-[auto];
 }
 
+.button.is-xl {
+  @apply h-10;
+  @apply px-6;
+  @apply text-xl;
+  @apply min-w-[auto];
+}
+
 .button-group {
   @apply flex items-center;
 }

src/pages/index.tsx

@@ -8,6 +8,13 @@ import { FLY_REGION } from "~/lib/env.server"
 import { useStore } from "~/lib/store"
 import { useAccount } from "wagmi"
 import { ConnectButton } from "~/components/common/ConnectButton"
+import Image from "next/image"
+import { DotsHorizontalIcon } from "@heroicons/react/solid"
+import { LaughIcon } from "~/components/icons/LaughIcon"
+import { LoveIcon } from "~/components/icons/LoveIcon"
+import { Button } from "~/components/ui/Button"
+import { useConnectModal } from "@rainbow-me/rainbowkit"
+import { useRouter } from "next/router"
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   return {
@@ -21,6 +28,8 @@ export default function Home({ region }: { region: string | null }) {
   const setLoginModalOpened = useStore((store) => store.setLoginModalOpened)
   const [addressIn, setAddressIn] = useState<string>("")
   const { address } = useAccount()
+  const { openConnectModal } = useConnectModal()
+  const router = useRouter()
 
   useEffect(() => {
     console.log("-> region", region)
@@ -28,20 +37,34 @@ export default function Home({ region }: { region: string | null }) {
     setAddressIn(address || "")
   }, [region, address])
 
+  const [isTry, setIsTry] = useState(false)
+  const tryNow = () => {
+    setIsTry(true)
+    openConnectModal?.()
+  }
+
+  useEffect(() => {
+    if (isTry && address) {
+      router.push("/dashboard")
+      setIsTry(false)
+    }
+  }, [isTry, address, router])
+
   return (
     <MainLayout>
       <section>
-        <div className="max-w-screen-md px-5 mx-auto">
-          <div className="bg-zinc-50 rounded-xl p-10">
-            <h2 className="text-5xl font-extrabold">
-              On-Chain Content Creating
+        <div className="max-w-screen-lg px-5 mx-auto">
+          <div className="mt-28">
+            <h2 className="text-6xl font-bold">
+              Blog on the Blockchain.
               <br />
-              for Absolutely Everyone
+              Blogging geekily.
             </h2>
             <h3 className="mt-5 text-zinc-500">
               Meet xlog, the on-chain and open-source blogging platform for
               everyone.
               <br />
+              Blog data, including config, posts, following, comment...
               Permanently stored on the blockchain and signed by you.
             </h3>
             <div className="mt-10">
@@ -57,6 +80,104 @@ export default function Home({ region }: { region: string | null }) {
                 <ConnectButton />
               )}
             </div>
+            <div className="mt-8 text-zinc-500">
+              Trusted by these awesome teams and geeks
+              <ul className="mt-4 space-x-4">
+                <li className="inline-flex w-20 align-middle items-center">
+                  <Image
+                    src="/RSS3.png"
+                    alt="RSS3"
+                    width="2518"
+                    height="629"
+                  ></Image>
+                </li>
+                <li className="inline-flex h-5 align-middle items-center">
+                  <UniLink className="inline-block" href="#">
+                    <DotsHorizontalIcon className="w-4 h-4" />
+                  </UniLink>
+                </li>
+              </ul>
+            </div>
+            <ul className="my-28 space-y-24">
+              <li className="relative w-full flex items-center justify-center">
+                <div className="w-3/5">
+                  <Image
+                    src="/screenshot2.png"
+                    alt="screenshot2"
+                    width="812"
+                    height="1041"
+                  ></Image>
+                </div>
+                <div className="w-2/5 px-8">
+                  <p className="text-4xl font-bold">
+                    <LoveIcon className="inline mb-2" />
+                    <br />
+                    Rich interactions
+                  </p>
+                  <p className="text-zinc-500 mt-4">
+                    Users can follow, comment, like, and collect your blog and
+                    posts, all on the blockchain of course.
+                  </p>
+                </div>
+              </li>
+              <li className="relative w-full flex items-center justify-center">
+                <div className="w-3/5">
+                  <Image
+                    src="/screenshot3.png"
+                    alt="screenshot3"
+                    width="1101"
+                    height="721"
+                  ></Image>
+                </div>
+                <div className="w-2/5 px-8">
+                  <p className="text-4xl font-bold">
+                    <DashboardIcon className="inline mb-2" />
+                    <br />
+                    Highly customizable
+                  </p>
+                  <p className="text-zinc-500 mt-4">
+                    Domain name, navigation bar, custom styles, all as you wish,
+                    and stored on the blockchain.
+                  </p>
+                </div>
+              </li>
+              <li className="relative w-full flex items-center justify-center">
+                <div className="w-3/5">
+                  <Image
+                    src="/screenshot1.png"
+                    alt="screenshot1"
+                    width="812"
+                    height="835"
+                  ></Image>
+                </div>
+                <div className="w-2/5 px-8">
+                  <p className="text-4xl font-bold">
+                    <LaughIcon className="inline mb-2" />
+                    <br />
+                    Elegant
+                  </p>
+                  <p className="text-zinc-500 mt-4">
+                    Elegant and clean default theme allows you to get a great
+                    looking blog straight away.
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div className="mt-10 text-center">
+            <p className="text-5xl font-bold mb-8">xlog</p>
+            {addressIn ? (
+              <UniLink
+                href="/dashboard"
+                className="text-indigo-500 inline-flex items-center space-x-2 hover:text-indigo-600"
+              >
+                <Button size="xl">Try xlog today</Button>
+              </UniLink>
+            ) : (
+              <Button onClick={tryNow} size="xl">
+                Try xlog today
+              </Button>
+            )}
           </div>
         </div>
       </section>