feat: redesign first screen of index

2023-02-27 23:28:24 +00:00 · 2023-02-27 23:28:24 +00:00 · f34ab3c803
parent 9cddd612f4
commit f34ab3c803
9 changed files with 95 additions and 33 deletions
--- a/README.md
+++ b/README.md
@ -3,7 +3,7 @@
 </p>
 <h1 align="center">xLog</h1>

-> The first An on-chain and open-source blogging platform for everyone.
+> The best on-chain and open-source blogging community for everyone.

 [![Discord](https://img.shields.io/badge/chat-Discord-5865F2.svg?logo=discord&style=flat-square)](https://discord.gg/46VJMMVCuF) [![Twitter](https://img.shields.io/badge/Twitter-@_xLog-1d9bf0.svg?logo=twitter&style=flat-square)](https://twitter.com/_xLog) [![build](https://img.shields.io/github/actions/workflow/status/Crossbell-Box/xLog/docker-build-push-prod.yml?logo=github&style=flat-square)](https://github.com/Crossbell-Box/xLog/actions/workflows/docker-build-push.yml)

--- a/public/locales/ja/index.json
+++ b/public/locales/ja/index.json
@ -1,6 +1,6 @@
 {
  "Blog Free": "自由に創作する",
-  "description": "<0>xLog</0>は、誰でもが利用できる<3>ブロックチェーン</3>上の<7>オープンソース</7>のブログプラットフォームです。",
+  "description": "<0>xLog</0>は、誰でもが利用できる<3>ブロックチェーン</3>上の<7>オープンソース</7>のブログコミュニティです。",
  "Get my xLog in 5 minutes": "5分で自分のxLogを手に入れよう",
  "Features": "特徴",
  "Showcase": "ショーケース",
@ -17,7 +17,7 @@
  "Customizable description": "自分の<strong>ドメイン</strong>を使用し、ウェブサイトの<strong>スタイル</strong>をカスタマイズし、完全に自由にウェブサイトを作成できます。これはあなたのウェブサイトであり、何の制限もありません。",
  "Open": "オープン",
  "Open description": "標準的な<strong>Markdown</strong>構文を採用し、インポート/エクスポートツールと豊富なAPIを提供することで、移行が簡単になりました。すべてのコードはGitHubで<strong>オープンソース</strong>であり、すべての<strong>データが透明に</strong>ブロックチェーンに保存されます。",
-  "Discover these awesome teams and geeks on xLog (sorted by update time)": "xLogでこれらの素晴らしいチームやクールな人たちを発見しましょう（更新時間順）",
+  "Discover these awesome teams and creators on xLog (sorted by update time)": "xLogでこれらの素晴らしいチームやクールな人たちを発見しましょう（更新時間順）",
  "Follow All!": "すべてをフォローする！",
  "Show more": "もっと表示する",
  "Submit yours": "自分のを投稿する",
--- a/public/locales/zh/index.json
+++ b/public/locales/zh/index.json
@ -1,6 +1,9 @@
 {
-  "Blog Free": "自由创作",
-  "description": "<0>xLog</0>，给所有人的 <3>链上</3> <7>开源</7> 博客平台。",
+  "Write.": "写作。",
+  "Own.": "拥有。",
+  "Earn.": "赚取。",
+  "Look at others'": "看看其他人的",
+  "description": "<0>xLog</0> 是面向所有人的最棒 <3>链上</3> <7>开源</7> 博客社区。",
  "Get my xLog in 5 minutes": "5 分钟拥有自己的 xLog",
  "Features": "特色",
  "Showcase": "展示柜",
@ -17,7 +20,7 @@
  "Customizable description": "使用自己的<strong>域名</strong>，自定义网站<strong>风格</strong>，完全自由地打造你的网站。这是你的网站，没有任何限制。",
  "Open": "开放",
  "Open description": "采用标准的 <strong>Markdown</strong> 语法，并提供了导入和导出工具以及丰富的API，让迁入和迁出变得轻而易举。所有的代码都<strong>开源</strong>在 GitHub 上，所有的<strong>数据都透明</strong>地存储在区块链上。",
-  "Discover these awesome teams and geeks on xLog (sorted by update time)": "在 xLog 上发现这些超棒的团队和极客们（按更新时间排序）",
+  "Discover these awesome teams and creators on xLog (sorted by update time)": "在 xLog 上发现这些超棒的团队和创作者们（按更新时间排序）",
  "Follow All!": "关注所有！",
  "Show more": "显示更多",
  "Submit yours": "提交你的",
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@ -11,7 +11,7 @@ import {
 } from "@crossbell/connect-kit"
 import { useAccountSites } from "~/queries/site"
 import { Avatar } from "~/components/ui/Avatar"
-import { Button } from "~/components/ui/Button"
+import { Button, type VariantColor, type Variant } from "~/components/ui/Button"
 import { DashboardIcon } from "../icons/DashboardIcon"
 import { UniLink } from "../ui/UniLink"
 import { useEffect, useState } from "react"
@ -47,7 +47,8 @@ type HeaderLinkType = {

 export const ConnectButton: React.FC<{
  left?: boolean
-  variant?: "text" | "primary" | "secondary" | "like" | "collect" | "crossbell"
+  variant?: Variant
+  variantColor?: VariantColor
  size?: "base" | "sm"
  hideNotification?: boolean
  mobileSimplification?: boolean
@ -55,6 +56,7 @@ export const ConnectButton: React.FC<{
 }> = ({
  left,
  variant,
+  variantColor,
  size = "sm",
  hideNotification,
  mobileSimplification,
@ -192,6 +194,7 @@ export const ConnectButton: React.FC<{
              onClick={openConnectModal}
              style={{ height: avatarSize + "px" }}
              variant={variant || "primary"}
+              variantColor={variantColor}
            >
              {t("Connect")}
            </Button>
--- a/src/components/main/MainLayout.tsx
+++ b/src/components/main/MainLayout.tsx
@ -63,7 +63,7 @@ export function MainLayout({
            >
              {t("Source Code")}
            </UniLink>
-            <ConnectButton size="base" />
+            <ConnectButton size="base" variantColor="black" />
          </div>
        </div>
      </header>
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@ -14,6 +14,9 @@ export type Variant =
  | "like"
  | "collect"
  | "crossbell"
+  | "outline"
+
+export type VariantColor = "green" | "red" | "gray" | "gradient" | "black"

 type ButtonProps = {
  isLoading?: boolean
@ -21,8 +24,8 @@ type ButtonProps = {
  isDisabled?: boolean
  isAutoWidth?: boolean
  variant?: Variant
-  variantColor?: "green" | "red" | "gray"
-  size?: "sm" | "xl"
+  variantColor?: VariantColor
+  size?: "sm" | "xl" | "2xl"
  rounded?: "full" | "lg"
 }

--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@ -39,7 +39,7 @@ a {
  @apply min-w-[100px];
  @apply whitespace-nowrap;
  @apply font-medium;
-  @apply transition-colors;
+  @apply transition;
  @apply active:scale-95;
 }

@ -104,6 +104,13 @@ a {
  @apply transition-colors;
 }

+.button.is-outline {
+  @apply border-black;
+  @apply border;
+  @apply text-black;
+  @apply fill-black;
+}
+
 .button.is-like {
  @apply shadow-none p-0;
  @apply text-gray-500 fill-gray-500;
@ -148,6 +155,23 @@ a {
  @apply bg-gray-500 hover:bg-gray-600 focus:bg-gray-700;
 }

+.button.is-gradient {
+  @apply hover:bg-gradient-to-br from-[#FF4D4D] to-[#F9CB28];
+  @apply hover:text-white;
+  @apply hover:border-none;
+}
+
+.button.is-gradient:hover > span {
+  @apply mx-[1px];
+}
+
+.button.is-black {
+  @apply bg-black hover:bg-white focus:bg-white;
+  @apply text-white hover:text-black focus:text-black;
+  @apply fill-white hover:fill-black focus:fill-black;
+  @apply border-black border;
+}
+
 .button.is-sm {
  @apply h-7;
  @apply px-3;
@ -162,6 +186,13 @@ a {
  @apply min-w-[auto];
 }

+.button.is-2xl {
+  @apply h-12;
+  @apply px-6;
+  @apply text-xl;
+  @apply min-w-[auto];
+}
+
 .button-group {
  @apply flex items-center;
 }
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@ -6,7 +6,7 @@ export const DOCS_DOMAIN = `docs.${OUR_DOMAIN}`
 export const SITE_URL = `${IS_PROD ? "https" : "http"}://${OUR_DOMAIN}`
 export const APP_DESCRIPTION =
  process.env.APP_DESCRIPTION ||
-  "xLog, the first on-chain and open-source blogging platform for everyone."
+  "xLog, the best on-chain and open-source blogging community for everyone."
 export const DISCORD_LINK = process.env.NEXT_PUBLIC_DISCORD_LINK
 export const GITHUB_LINK = process.env.NEXT_PUBLIC_GITHUB_LINK
 export const TWITTER_LINK = process.env.NEXT_PUBLIC_TWITTER_LINK
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -211,21 +211,21 @@ export default function Home() {
    <MainLayout tabs={["Features", "Showcase", "Integration"]}>
      <section>
        <div className="max-w-screen-lg px-5 mx-auto">
-          <div className="h-screen w-full flex justify-center flex-col relative">
-            <div className="w-28 h-28 mb-16">
-              <Image
-                alt="logo"
-                src="/assets/logo.svg"
-                width={200}
-                height={200}
-              />
-            </div>
-            <h2 className="text-5xl sm:text-7xl font-bold mb-5 text-sky-400">
-              🫧 {t("Blog Free")}
+          <div className="h-screen w-full flex justify-center flex-col relative text-center">
+            <h2 className="text-7xl sm:text-8xl font-bold mb-5">
+              <span className="bg-gradient-to-r from-[#007CF0] to-[#00DFD8] bg-clip-text text-transparent block sm:inline-block sm:mr-1">
+                {t("Write.")}
+              </span>
+              <span className="bg-gradient-to-r from-[#7928CA] to-[#FF0080] bg-clip-text text-transparent block sm:inline-block sm:mr-1">
+                {t("Own.")}
+              </span>
+              <span className="bg-gradient-to-r from-[#FF4D4D] to-[#F9CB28] bg-clip-text text-transparent block sm:inline-block sm:mr-1">
+                {t("Earn.")}
+              </span>
            </h2>
-            <h3 className="mt-5 text-zinc-800 text-4xl sm:text-6xl font-light">
+            <h3 className="mt-5 text-zinc-800 text-2xl sm:text-4xl font-light">
              <Trans i18nKey="description" ns="index">
-                <strong className="font-medium">xLog</strong>, the first{" "}
+                <strong className="font-medium">xLog</strong> is the best{" "}
                <UniLink
                  className="underline decoration-2 text-yellow-400 font-medium"
                  href={CSB_SCAN}
@ -239,14 +239,15 @@ export default function Home() {
                >
                  open-source
                </UniLink>{" "}
-                blogging platform for everyone.
+                blogging community for everyone.
              </Trans>
            </h3>
-            <div className="my-10 sm:my-16">
+            <div className="my-6 sm:my-12">
              <Button
-                className="text-accent w-80 h-10"
+                className="text-accent h-10 mt-4"
                onClick={tryNow}
-                size="xl"
+                size="2xl"
+                variantColor="black"
              >
                {isConnected ? (
                  <>
@ -257,8 +258,29 @@ export default function Home() {
                  t("Get my xLog in 5 minutes")
                )}
              </Button>
+              <Button
+                className="text-accent h-10 ml-4 mt-4"
+                size="2xl"
+                variant="outline"
+                variantColor="gradient"
+              >
+                <span>
+                  <Link
+                    to={"Showcase"}
+                    spy={true}
+                    smooth={true}
+                    duration={500}
+                    onClick={() => {
+                      setShowcaseMore(true)
+                    }}
+                  >
+                    {t("Look at others'")}
+                  </Link>
+                </span>
+              </Button>
            </div>
-            <div className="text-center absolute bottom-20 w-full">
+            <div className="text-center absolute bottom-20 w-full flex items-center justify-center flex-col">
+              <span>Explore the xLog way</span>
              <Link
                to="Features"
                spy={true}
@ -323,7 +345,7 @@ export default function Home() {
              <div className="my-10 text-zinc-700">
                <p className="text-lg">
                  {t(
-                    "Discover these awesome teams and geeks on xLog (sorted by update time)",
+                    "Discover these awesome teams and creators on xLog (sorted by update time)",
                  )}
                </p>
                <Button
@ -461,7 +483,7 @@ export default function Home() {
                <Button size="xl">{t("Get my xLog in 5 minutes")}</Button>
              </UniLink>
            ) : (
-              <Button onClick={tryNow} size="xl">
+              <Button onClick={tryNow} size="2xl" variantColor="black">
                {t("Get my xLog in 5 minutes")}
              </Button>
            )}