feat: home page text and mobile styles

Crossbell-Box · Sep 8, 2022 · 6ff457f · 6ff457f
1 parent 9bd55f5
commit 6ff457f
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 30 deletions.
diff --git a/.env.example b/.env.example
@@ -3,12 3,12 @@
 #### And inline by Next.js during docker build
 #############################################################
 
-NEXT_PUBLIC_APP_NAME=XLog
 NEXT_PUBLIC_OUR_DOMAIN=localhost:3000
 NEXT_PUBLIC_DISCORD_LINK="https://discord.gg/9XscSqJEq4"
 NEXT_PUBLIC_GITHUB_LINK="https://github.com/Crossbell-Box/xlog"
 NEXT_PUBLIC_CSB_IO="https://crossbell.io"
 NEXT_PUBLIC_CSB_SCAN="https://scan.crossbell.io"
 NEXT_PUBLIC_IPFS_GATEWAY="/_ipfs/"
 
 NEXT_PUBLIC_APP_NAME=
 REDIS_URL=
diff --git a/deploy/prod/secrets.yaml b/deploy/prod/secrets.yaml
@@ -1,7 1,6 @@
 # Remember to add it in env.production because it is the nextjs project
 apiVersion: v1
 stringData:
- NEXT_PUBLIC_APP_NAME: xlog
  NEXT_PUBLIC_OUR_DOMAIN: xlog.app
  NEXT_PUBLIC_DISCORD_LINK: "https://discord.gg/9XscSqJEq4"
  NEXT_PUBLIC_GITHUB_LINK: "https://github.com/Crossbell-Box/xlog"

diff --git a/src/components/main/MainLayout.tsx b/src/components/main/MainLayout.tsx
@@ -33,7 33,7 @@ export function MainLayout({
  {tabs?.map((tab, index) => (
  <Link
  activeClass="text-theme-color"
- className="cursor-pointer flex items-center"
  className="cursor-pointer items-center hidden sm:flex"
  to={tab}
  spy={true}
  smooth={true}

diff --git a/src/lib/env.ts b/src/lib/env.ts
@@ -1,6 1,6 @@
 import { IS_PROD } from "./constants"
 
-export const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME
 export const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME || "Xlog"
 export const OUR_DOMAIN = process.env.NEXT_PUBLIC_OUR_DOMAIN
 export const DOCS_DOMAIN = `docs.${OUR_DOMAIN}`
 export const SITE_URL = `${IS_PROD ? "https" : "http"}://${OUR_DOMAIN}`

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -64,9 64,9 @@ export default function Home({ region }: { region: string | null }) {
  title: "On-chain",
  text: (
  <>
- All blog data, including config, posts, following, comment, etc., are
- permanently stored on the blockchain <b>by your own hands</b> and can
- only be controlled by yourself and not the platform.
  All blog data, including configs, posts, following, comments, etc.,
  are permanently stored on the blockchain <b>with your own hands</b>{" "}
  and can only be controlled by yourself and not the platform.
  </>
  ),
  },
@@ -113,13 113,13 @@ export default function Home({ region }: { region: string | null }) {
  <div className="w-28 h-28 mb-16">
  <Image alt="logo" src="/logo.svg" width={200} height={200} />
  </div>
- <h2 className="text-5xl font-bold mb-5">Blog Free</h2>
- <h3 className="mt-5 text-zinc-800 text-6xl font-light">
  <h2 className="text-3xl sm:text-5xl font-bold mb-5">Blog Free</h2>
  <h3 className="mt-5 text-zinc-800 text-4xl sm:text-6xl font-light">
  {APP_NAME}, an on-chain and{" "}
  <UniLink href={GITHUB_LINK}>open-source</UniLink> blogging
  platform for everyone.
  </h3>
- <div className="my-16">
  <div className="my-10 sm:my-16">
  <Button
  className="text-theme-color w-80 h-10"
  onClick={() =>
@@ -173,6 173,13 @@ export default function Home({ region }: { region: string | null }) {
  </Element>
  <Element name={`Why ${APP_NAME}`}>
  <div className="pt-28 text-4xl font-bold">Why {APP_NAME}</div>
  <div className="text-xl mt-10 leading-normal">
  We believe freedom of expression is a universal right. In your
  long-form writing, you should be able to express your thoughts
  freely; without fear of your post being removed or censored.
  Xlog ensures that whatever you write, it will be immutable and
  permanently stored.
  </div>
  <div className="my-10 text-zinc-500">
  Trusted by these awesome teams and geeks
  <ul className="mt-4 space-x-4">
@@ -211,26 218,6 @@ export default function Home({ region }: { region: string | null }) {
  </li>
  </ul>
  </div>
- <table className="w-full table-fixed border-y-2 border-zinc-800">
- <tbody>
- <tr className="text-xl">
- <th className="text-center w-60"></th>
- <th className="text-center py-3">{APP_NAME}</th>
- <th className="text-center">Mirror.xyz</th>
- </tr>
- {comparing.map((item, index) => (
- <tr className="" key={index}>
- <td className="text-center py-3">{item}</td>
- <td className="text-center">
- <span className="i-bxs:check-circle inline-block text-green-600 text-lg"></span>
- </td>
- <td className="text-center">
- <span className="i-bxs:x-circle inline-block text-red-600 text-lg"></span>
- </td>
- </tr>
- ))}
- </tbody>
- </table>
  </Element>
  </div>
  <div className="my-20 text-center">