diff --git a/README.md b/README.md index 1634842b..cc0389cf 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ ### Easy -Connect with your **Web3 Wallet** or **Email**. Build your own site with custom domains, subscriptions, likes, comments, minting as nft, RSS and more in one second. No fees, no friction. +Connect with your **Web3 Wallet** or **Email**. Build your own site with custom domains, subscriptions, likes, comments, minting as NFT, RSS and more in one second. No fees, no friction. ![](https://raw.githubusercontent.com/Crossbell-Box/xLog/dev/public/assets/easy.png) diff --git a/public/assets/experience.png b/public/assets/experience.png new file mode 100644 index 00000000..a2b4a1ea Binary files /dev/null and b/public/assets/experience.png differ diff --git a/public/assets/logo.png b/public/assets/logo.png index aa84a0c9..b4c4fad4 100644 Binary files a/public/assets/logo.png and b/public/assets/logo.png differ diff --git a/public/assets/logo.svg b/public/assets/logo.svg index 4ff81610..fa2264fe 100644 --- a/public/assets/logo.svg +++ b/public/assets/logo.svg @@ -1 +1,22 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/overall.png b/public/assets/overall.png deleted file mode 100644 index 422e07dc..00000000 Binary files a/public/assets/overall.png and /dev/null differ diff --git a/public/locales/en/index.json b/public/locales/en/index.json index 9e26dfee..d26d4e33 100644 --- a/public/locales/en/index.json +++ b/public/locales/en/index.json @@ -1 +1,16 @@ -{} \ No newline at end of file +{ + "Write subtitle": "Write when inspiration strikes", + "Write description": "Free writers from time-consuming, unnecessary processes that slow your writing, so you and your team can focus on creating.", + "Own subtitle": "Own content on the blockchain", + "Own description": "You own your content by publishing content on the Crossbell blockchain. xLog won't store any data and can't take away or modify your rights and content, even if xLog wanted to. Learn how Crossbell works.", + "Earn subtitle": "Earn tokens and rights", + "Earn description": "Great creators deserve more rewards and rights, and thanks to the design of blockchain, xLog can better pursue this goal through a range of token incentives, as well as a DAO mechanism.", + "Easy to get started text": "xLog supports web3 wallets and email connections, allowing you to quickly create a customized blog with features like a custom domain, subscriptions, comments, NFT minting, RSS feeds, and AI enhancements in just 5 minutes - with no application or costs required.", + "Elegant experience text": "xLog offers a dual-pane editor with real-time preview for an excellent writing experience, using standard Markdown syntax with support for HTML, audio/video, and math expressions. The elegantly designed page provides a comfortable reading experience for readers.", + "Fast text": "Blockchain doesn't always mean low efficiency. xLog operates at peak performance thanks to its efficient caching mechanism and numerous optimizations. The site also supports PWA for local installation and use.", + "Safe text": "All blog data, including configs, posts, subscriptions, comments, etc., are signed and securely stored on the blockchain with your own hands, with control only accessible through the private key held by yourself. No one else, including xLog, can make any changes.", + "Customizable text": "You're free to use your own domain, customize your website, and design it in any way you like. This is your website, with no restrictions. xLog encourage and will provide a rich system of themes and plugins to help you customize it.", + "Open text": "xLog offers import and export tools, as well as rich APIs and third-party integrations. All code is open source on GitHub, and all data is transparent on the blockchain. xLog has nothing to hide.", + "Token text": "In the early stages, xLog will provide incentives through stable coins from our own pockets. The token economy system is still under design and may take some time. Because junk content is our common enemy, xLog need to ensure that the community is not overwhelmed by it.", + "DAO text": "xLog will be managed in the form of a DAO, where the tokens earned by creators represent their rights." +} \ No newline at end of file diff --git a/public/locales/zh/index.json b/public/locales/zh/index.json index 894aad28..b3082828 100644 --- a/public/locales/zh/index.json +++ b/public/locales/zh/index.json @@ -1,25 +1,39 @@ { - "Write.": "写作。", - "Own.": "拥有。", - "Earn.": "赚取。", + "Write": "写作", + "Own": "拥有", + "Earn": "赚取", + ".": "。", "Look at others'": "看看其他人的", "description": "<0>xLog 是面向所有人的最棒 <3>链上 <7>开源 博客社区。", "Get my xLog in 5 minutes": "5 分钟拥有自己的 xLog", + "Explore the xLog way": "探索 xLog 之路", + "Write subtitle": "当灵感来临时写作", + "Write description": "让创作者们摆脱耗时、不必要的流程，减少写作过程中的阻碍，让你和团队能够专注于创造。", + "Own subtitle": "在区块链上拥有自己的内容", + "Own description": "通过在 Crossbell 区块链上发布来拥有自己的内容。 xLog 不会存储任何数据，xLog 也无法剥夺或修改您的权利和内容，即使 xLog 想这样做。 了解 Crossbell 是如何工作的。", + "Earn subtitle": "赚取代币和权利", + "Earn description": "优秀的创作者们应该得到更多的奖励和权利，而区块链的设计使得 xLog 可以通过一系列代币激励以及 DAO 机制更好地追求这一目标。", "Features": "特色", "Showcase": "展示柜", "Integration": "集成", "Source Code": "源码", "Visit": "访问", - "Easy": "简单", - "Easy description": "使用 Web3钱包 或 电子邮件 连接，轻松构建拥有自定义域名、订阅、点赞、评论、NFT铸造、RSS等功能的个人网站，无需任何费用和限制。", + "Easy to get started": "简单上手", + "Easy to get started text": "xLog 支持 web3 钱包和电子邮件连接，使您能够快速创建一个定制的博客，具有自定义域名、订阅、评论、NFT 铸造、RSS 订阅和 AI 增强等功能，仅需 5 分钟即可完成，无需申请或费用。", "Safe": "安全", - "Safe description": "所有的博客数据，包括配置、文章、订阅、评论等，都由你亲手签名并安全地存储在区块链上，除了你自己，包括我们在内的任何人都无法进行更改。", + "Safe text": "所有博客数据，包括配置、文章、订阅、评论等，都由你自己签名并安全地存储在区块链上，只有你持有的私钥才能进行控制和访问。包括 xLog 在内的任何人都无法进行更改。", "Fast": "快速", - "Fast description": "区块链不意味着低效。xLog 采用高效的缓存机制和多项优化措施，发挥了极致的性能。", + "Fast text": "区块链并不总意味着低效率。xLog通过其高效的缓存机制和众多优化，可以达到最佳性能。站点还支持PWA用于本地安装和使用。", "Customizable": "可定制", - "Customizable description": "使用自己的域名，自定义网站风格，完全自由地打造你的网站。这是你的网站，没有任何限制。", + "Customizable text": "你可以自由地使用自己的域名、自定义网站并按自己的喜好进行设计。这是你的网站，没有任何限制。xLog 鼓励并将提供丰富的主题和插件系统，以帮助你进行自定义。", "Open": "开放", - "Open description": "采用标准的 Markdown 语法，并提供了导入和导出工具以及丰富的API，让迁入和迁出变得轻而易举。所有的代码都开源在 GitHub 上，所有的数据都透明地存储在区块链上。", + "Open text": "xLog提供导入和导出工具，以及丰富的 API 和第三方集成。所有代码都在 GitHub 上开源，所有数据都在区块链上透明。xLog 没有任何隐瞒。", + "Elegant experience": "优雅的体验", + "Elegant experience text": "xLog 提供双栏编辑器，具有实时预览功能，提供优秀的写作体验，使用标准的 Markdown 语法，支持 HTML、音视频和数学表达式。页面设计优雅，为读者提供舒适的阅读体验。", + "Token": "代币", + "Token text": "在早期阶段，xLog 将通过我们自掏腰包提供的稳定币作为激励。代币经济系统仍在设计中，可能需要一些时间。因为垃圾内容是我们的共同敌人，xLog 需要确保社区不会被其淹没。", + "DAO": "DAO", + "DAO text": "xLog 将以 DAO 的形式进行管理，创作者获得的代币将代表他们的权利。", "Discover these awesome teams and creators on xLog (sorted by update time)": "在 xLog 上发现这些超棒的团队和创作者们（按更新时间排序）", "Follow All!": "关注所有！", "Show more": "显示更多", diff --git a/showcase.json b/showcase.json index ced47363..a563289c 100644 --- a/showcase.json +++ b/showcase.json @@ -17,7 +17,6 @@ "kanikig", "coosir", "0x1", - "duogeyu", "isheep", "henryqw", "twifag", @@ -26,7 +25,6 @@ "stars", "somehacker", "novonine", - "nafidurmus", "qfdk", "fblauer", "anxiete", @@ -40,7 +38,6 @@ "atlas", "meow-7218", "erection", - "vup", "jowno", "walt", "adazz", @@ -85,5 +82,10 @@ "tommy-1329", "harvey", "xn--uurr57b0n7a-2881", - "jackyoung-5042" + "jackyoung-5042", + "lylelove-809", + "moojok", + "maji-may-7766", + "passerby5566", + "southfox" ] diff --git a/src/components/main/MainLayout.tsx b/src/components/main/MainLayout.tsx index 63de3655..5a00bf89 100644 --- a/src/components/main/MainLayout.tsx +++ b/src/components/main/MainLayout.tsx @@ -33,8 +33,8 @@ export function MainLayout({ />
-
-
+
+
{APP_NAME}
+ xLog
{tabs?.map((tab, index) => ( diff --git a/src/css/tailwind.css b/src/css/tailwind.css index ad865481..149ea400 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -30,6 +30,22 @@ a { @apply focus-visible:outline-none; } +.text-feature { + @apply bg-gradient-to-r bg-clip-text text-transparent; +} + +.text-feature-write { + @apply from-[#007CF0] to-[#00DFD8]; +} + +.text-feature-own { + @apply from-[#7928CA] to-[#FF0080]; +} + +.text-feature-earn { + @apply from-[#FF4D4D] to-[#F9CB28]; +} + .button { @apply inline-flex; @apply items-center; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a8f285b4..eb2ae07d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -52,7 +52,7 @@ function MyApp({ Component, pageProps }: any) { urlComposer={urlComposer} > - + {/* */} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b56c1259..fe1d6f4c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -36,6 +36,7 @@ import { import { useTranslation, Trans } from "next-i18next" import { serverSideTranslations } from "next-i18next/serverSideTranslations" import { languageDetector } from "~/lib/language-detector" +import { cn } from "~/lib/utils" export const getServerSideProps: GetServerSideProps = async (ctx) => { const queryClient = new QueryClient() @@ -62,46 +63,80 @@ export default function Home() { router.push("/dashboard") }) - const features = [ + const features: { + title: string + subfeatures: { + screenshot?: { + src: string + } + icon: string + title: string + }[] + }[] = [ { - screenshot: { - src: "/assets/easy.png", - }, - icon: "😆", - title: "Easy", - text: "Connect with your Web3 Wallet or Email. Build your own site with custom domains, subscriptions, likes, comments, minting as nft, RSS and more in one second. No fees, no friction.", + title: "Write", + subfeatures: [ + { + screenshot: { + src: "/assets/easy.png", + }, + icon: "🤪", + title: "Easy to get started", + }, + { + screenshot: { + src: "/assets/experience.png", + }, + icon: "😆", + title: "Elegant experience", + }, + { + screenshot: { + src: "/assets/fast.png", + }, + icon: "🚀", + title: "Fast", + }, + ], }, { - screenshot: { - src: "/assets/safe.png", - }, - icon: "🔒", - title: "Safe", - text: "All blog data, including configs, posts, subscriptions, comments, etc., are signed and securely stored on the blockchain with your own hands. No one else, including us, can make any changes.", + title: "Own", + subfeatures: [ + { + screenshot: { + src: "/assets/safe.png", + }, + icon: "🔒", + title: "Safe", + }, + { + screenshot: { + src: "/assets/customizable.png", + }, + icon: "🎨", + title: "Customizable", + }, + { + screenshot: { + src: "/assets/open.png", + }, + icon: "🌐", + title: "Open", + }, + ], }, { - screenshot: { - src: "/assets/fast.png", - }, - icon: "🚀", - title: "Fast", - text: "Blockchain doesn't always mean inefficiency. xLog's efficient caching mechanism and numerous optimisations take it to the peak of performance.", - }, - { - screenshot: { - src: "/assets/customizable.png", - }, - icon: "🎨", - title: "Customizable", - text: "Use your own domain, customise your site and style it however you like. This is your site, there are no restrictions.", - }, - { - screenshot: { - src: "/assets/open.png", - }, - icon: "🌐", - title: "Open", - text: "Uses standard Markdown with export and import tools and rich APIs for a painless move in and out. All code is open source on GitHub, all data is transparent on the chain.", + title: "Earn", + subfeatures: [ + { + icon: "🪙", + title: "Token", + }, + { + icon: "🏟️", + title: "DAO", + }, + ], }, ] @@ -213,15 +248,15 @@ export default function Home() {

- - {t("Write.")} - - - {t("Own.")} - - - {t("Earn.")} - + {features.map((feature) => ( + + {t(feature.title)} + {t(".")} + + ))}

@@ -244,14 +279,14 @@ export default function Home() {

-
- Explore the xLog way +
+ {t("Explore the xLog way")}
- - overall -

- {t("Visit")} xlog.{OUR_DOMAIN} -

- -
    - {features.map((item, index) => ( -
  • -
    - {item.title} + {features.map((feature, index) => ( +
    +
    +
    +
    + {index + 1}
    -

    - {item.icon} - {t(item.title)} -

    -

    +

    + {t(feature.title)} +

    +

    + {t(`${feature.title} subtitle`)} +

    +

    , + aown: ( + + . + + ), }} ns="index" />

    -
    • - ))} -
+
+
    + {feature.subfeatures.map((item, index) => ( +
  • + {item.screenshot?.src && ( +
    + {item.title} +
    + )} +

    + {item.icon} + + {t(item.title)} + +

    +

    + , + axfm: ( + + . + + ), + }} + ns="index" + /> +

    +
    • + ))} +
+
+ ))} - -
{t("Showcase")}
+ +
+ {t("Showcase")} +

{t( @@ -361,7 +440,7 @@ export default function Home() { 🥳 {t("Follow All!")}

    @@ -419,8 +498,10 @@ export default function Home() {
- -
{t("Integration")}
+ +
+ {t("Integration")} +

{t( @@ -480,7 +561,9 @@ export default function Home() { href="/dashboard" className="text-accent inline-flex items-center space-x-2" > - + ) : (