feat: index and logo new design
This commit is contained in:
DIYgod
parent
f34ab3c803
commit
626527b6ca
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 47 KiB |
|
|
@ -1 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 143.73 143.74"><g id="c"><g><rect x="3" y="3" width="137.73" height="137.74" style="fill:none; stroke:#121212; stroke-miterlimit:10; stroke-width:6px;"/><path d="M69.16,96c0,11.94-8.7,20.63-20.46,20.63s-20.68-8.69-20.68-20.63,8.69-20.51,20.63-20.51,20.51,8.69,20.51,20.51Z"/><path d="M115.95,96.59v14.43c-3.58,3.46-9.48,5.68-15.91,5.68-13.47,0-22.04-7.84-22.04-19.95s9.49-21.18,22.83-21.18v21.02h15.12Z"/><polygon points="115.95 53.51 115.95 67.95 78 67.95 78 27.19 101.03 27.19 101.03 53.51 115.95 53.51"/><polygon points="27.78 68.08 39.93 45.45 28.28 27.03 68.91 27.03 57.26 45.45 69.4 68.08 27.78 68.08"/></g></g></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128.81 128.17">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: url(#gradient3);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="gradient3" x1="57.54" y1="31.44" x2="128.81" y2="31.44" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#ff4d4d"/>
|
||||
<stop offset=".99" stop-color="#f9cb28"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="b">
|
||||
<g>
|
||||
<path d="M56.32,100.47c0,15.98-11.84,27.61-27.85,27.61S.33,116.45,.33,100.47s11.83-27.45,28.08-27.45,27.91,11.63,27.91,27.45Z"/>
|
||||
<path d="M120,101.26v19.31c-4.87,4.63-12.9,7.6-21.65,7.6-18.33,0-30-10.49-30-26.7s12.92-28.34,31.07-28.34v28.13h20.58Z"/>
|
||||
<polygon class="cls-1" points="119.7 21.48 128.81 38.51 83.27 62.88 57.54 14.79 85.17 0 101.79 31.06 119.7 21.48"/>
|
||||
<polygon points="0 63.11 16.54 32.82 .68 8.17 55.98 8.17 40.12 32.82 56.65 63.11 0 63.11"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 721 B After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 854 KiB |
|
|
@ -1 +1,16 @@
|
|||
{}
|
||||
{
|
||||
"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. <aown>Learn how Crossbell works.</aown>",
|
||||
"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 <strong>web3 wallets</strong> and <strong>email</strong> 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 <strong>real-time preview</strong> for an excellent writing experience, using standard <axfm>Markdown syntax</axfm> with support for <strong>HTML</strong>, <strong>audio/video</strong>, 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 <strong>PWA</strong> for local installation and use.",
|
||||
"Safe text": "All blog data, including configs, posts, subscriptions, comments, etc., are signed and securely stored on the <strong>blockchain</strong> with your own hands, with control only accessible through the <strong>private key</strong> held by yourself. No one else, including xLog, can make any changes.",
|
||||
"Customizable text": "You're free to use your <strong>own domain</strong>, customize your website, and <strong>design it</strong> in any way you like. This is your website, with no restrictions. xLog encourage and will provide a rich system of <strong>themes and plugins</strong> to help you customize it.",
|
||||
"Open text": "xLog offers import and export tools, as well as rich <strong>APIs</strong> and third-party <strong>integrations</strong>. All code is <strong>open source</strong> on GitHub, and all data is <strong>transparent</strong> on the blockchain. xLog has nothing to hide.",
|
||||
"Token text": "In the early stages, xLog will provide incentives through <strong>stable coins</strong> from our own pockets. The token economy system is still <strong>under design</strong> 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 <strong>tokens</strong> earned by creators represent their <strong>rights</strong>."
|
||||
}
|
||||
|
|
@ -1,25 +1,39 @@
|
|||
{
|
||||
"Write.": "写作。",
|
||||
"Own.": "拥有。",
|
||||
"Earn.": "赚取。",
|
||||
"Write": "写作",
|
||||
"Own": "拥有",
|
||||
"Earn": "赚取",
|
||||
".": "。",
|
||||
"Look at others'": "看看其他人的",
|
||||
"description": "<0>xLog</0> 是面向所有人的最棒 <3>链上</3> <7>开源</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 想这样做。 <aown>了解 Crossbell 是如何工作的。</aown>",
|
||||
"Earn subtitle": "赚取代币和权利",
|
||||
"Earn description": "优秀的创作者们应该得到更多的奖励和权利，而区块链的设计使得 xLog 可以通过一系列代币激励以及 DAO 机制更好地追求这一目标。",
|
||||
"Features": "特色",
|
||||
"Showcase": "展示柜",
|
||||
"Integration": "集成",
|
||||
"Source Code": "源码",
|
||||
"Visit": "访问",
|
||||
"Easy": "简单",
|
||||
"Easy description": "使用 <strong>Web3钱包</strong> 或 <strong>电子邮件</strong> 连接，轻松构建拥有自定义域名、订阅、点赞、评论、NFT铸造、RSS等功能的个人网站，无需任何费用和限制。",
|
||||
"Easy to get started": "简单上手",
|
||||
"Easy to get started text": "xLog 支持 <strong>web3 钱包</strong>和<strong>电子邮件</strong>连接，使您能够快速创建一个定制的博客，具有自定义域名、订阅、评论、NFT 铸造、RSS 订阅和 AI 增强等功能，仅需 5 分钟即可完成，无需申请或费用。",
|
||||
"Safe": "安全",
|
||||
"Safe description": "所有的博客数据，包括配置、文章、订阅、评论等，都由你亲手签名并安全地存储在<strong>区块链</strong>上，除了你自己，包括我们在内的任何人都无法进行更改。",
|
||||
"Safe text": "所有博客数据，包括配置、文章、订阅、评论等，都由你自己签名并安全地存储在<strong>区块链</strong>上，只有你持有的<strong>私钥</strong>才能进行控制和访问。包括 xLog 在内的任何人都无法进行更改。",
|
||||
"Fast": "快速",
|
||||
"Fast description": "区块链不意味着低效。xLog 采用高效的缓存机制和多项优化措施，发挥了极致的性能。",
|
||||
"Fast text": "区块链并不总意味着低效率。xLog通过其高效的缓存机制和众多优化，可以达到最佳性能。站点还支持<strong>PWA</strong>用于本地安装和使用。",
|
||||
"Customizable": "可定制",
|
||||
"Customizable description": "使用自己的<strong>域名</strong>，自定义网站<strong>风格</strong>，完全自由地打造你的网站。这是你的网站，没有任何限制。",
|
||||
"Customizable text": "你可以自由地使用<strong>自己的域名</strong>、自定义网站并按自己的喜好进行<strong>设计</strong>。这是你的网站，没有任何限制。xLog 鼓励并将提供丰富的<strong>主题和插件</strong>系统，以帮助你进行自定义。",
|
||||
"Open": "开放",
|
||||
"Open description": "采用标准的 <strong>Markdown</strong> 语法，并提供了导入和导出工具以及丰富的API，让迁入和迁出变得轻而易举。所有的代码都<strong>开源</strong>在 GitHub 上，所有的<strong>数据都透明</strong>地存储在区块链上。",
|
||||
"Open text": "xLog提供导入和导出工具，以及丰富的 <strong>API</strong> 和第三方<strong>集成</strong>。所有代码都在 GitHub 上<strong>开源</strong>，所有数据都在区块链上<strong>透明</strong>。xLog 没有任何隐瞒。",
|
||||
"Elegant experience": "优雅的体验",
|
||||
"Elegant experience text": "xLog 提供双栏编辑器，具有<strong>实时预览</strong>功能，提供优秀的写作体验，使用标准的 <strong>Markdown 语法</strong>，支持 <strong>HTML</strong>、<strong>音视频</strong>和数学表达式。页面设计优雅，为读者提供舒适的阅读体验。",
|
||||
"Token": "代币",
|
||||
"Token text": "在早期阶段，xLog 将通过我们自掏腰包提供的<strong>稳定币</strong>作为激励。代币经济系统仍在<strong>设计中</strong>，可能需要一些时间。因为垃圾内容是我们的共同敌人，xLog 需要确保社区不会被其淹没。",
|
||||
"DAO": "DAO",
|
||||
"DAO text": "xLog 将以 DAO 的形式进行管理，创作者获得的<strong>代币</strong>将代表他们的<strong>权利</strong>。",
|
||||
"Discover these awesome teams and creators on xLog (sorted by update time)": "在 xLog 上发现这些超棒的团队和创作者们（按更新时间排序）",
|
||||
"Follow All!": "关注所有！",
|
||||
"Show more": "显示更多",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@ export function MainLayout({
|
|||
/>
|
||||
<header className="py-5 fixed w-full top-0 bg-white z-10">
|
||||
<div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
|
||||
<div className="text-3xl font-extrabold flex items-center">
|
||||
<div className="inline-block w-9 h-9">
|
||||
<div className="text-2xl font-extrabold flex items-center">
|
||||
<div className="inline-block w-9 h-9 mr-3">
|
||||
<Image
|
||||
alt={APP_NAME}
|
||||
src="/assets/logo.svg"
|
||||
|
|
@ -42,6 +42,7 @@ export function MainLayout({
|
|||
height={100}
|
||||
/>
|
||||
</div>
|
||||
xLog
|
||||
</div>
|
||||
<div className="space-x-14 text-zinc-500 flex">
|
||||
{tabs?.map((tab, index) => (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ function MyApp({ Component, pageProps }: any) {
|
|||
urlComposer={urlComposer}
|
||||
>
|
||||
<Hydrate state={pageProps.dehydratedState}>
|
||||
<ReactQueryDevtools />
|
||||
{/* <ReactQueryDevtools /> */}
|
||||
<NextNProgress
|
||||
options={{ easing: "linear", speed: 500, trickleSpeed: 100 }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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 <strong>Web3 Wallet</strong> or <strong>Email</strong>. 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 <strong>blockchain</strong> 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 <strong>domain</strong>, customise your site and <strong>style</strong> it however you like. This is your site, there are no restrictions.",
|
||||
},
|
||||
{
|
||||
screenshot: {
|
||||
src: "/assets/open.png",
|
||||
},
|
||||
icon: "🌐",
|
||||
title: "Open",
|
||||
text: "Uses standard <strong>Markdown</strong> with export and import tools and rich APIs for a painless move in and out. All code is <strong>open source</strong> on GitHub, all <strong>data is transparent</strong> on the chain.",
|
||||
title: "Earn",
|
||||
subfeatures: [
|
||||
{
|
||||
icon: "🪙",
|
||||
title: "Token",
|
||||
},
|
||||
{
|
||||
icon: "🏟️",
|
||||
title: "DAO",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -213,15 +248,15 @@ export default function Home() {
|
|||
<div className="max-w-screen-lg px-5 mx-auto">
|
||||
<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>
|
||||
{features.map((feature) => (
|
||||
<span
|
||||
key={feature.title}
|
||||
className={`text-feature text-feature-${feature.title.toLocaleLowerCase()} block sm:inline-block sm:mr-1`}
|
||||
>
|
||||
{t(feature.title)}
|
||||
{t(".")}
|
||||
</span>
|
||||
))}
|
||||
</h2>
|
||||
<h3 className="mt-5 text-zinc-800 text-2xl sm:text-4xl font-light">
|
||||
<Trans i18nKey="description" ns="index">
|
||||
|
|
@ -244,14 +279,14 @@ export default function Home() {
|
|||
</h3>
|
||||
<div className="my-6 sm:my-12">
|
||||
<Button
|
||||
className="text-accent h-10 mt-4"
|
||||
className="text-accent h-10 mt-4 block sm:inline-block"
|
||||
onClick={tryNow}
|
||||
size="2xl"
|
||||
variantColor="black"
|
||||
>
|
||||
{isConnected ? (
|
||||
<>
|
||||
<span className="i-bi-grid text-lg mr-2"></span>
|
||||
<span className="i-bi-grid text-lg mr-2 inline-block"></span>
|
||||
<span>{t("Dashboard")}</span>
|
||||
</>
|
||||
) : (
|
||||
|
|
@ -259,7 +294,7 @@ export default function Home() {
|
|||
)}
|
||||
</Button>
|
||||
<Button
|
||||
className="text-accent h-10 ml-4 mt-4"
|
||||
className="text-accent h-10 sm:ml-4 mt-4 block sm:inline-block"
|
||||
size="2xl"
|
||||
variant="outline"
|
||||
variantColor="gradient"
|
||||
|
|
@ -279,8 +314,8 @@ export default function Home() {
|
|||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-center absolute bottom-20 w-full flex items-center justify-center flex-col">
|
||||
<span>Explore the xLog way</span>
|
||||
<div className="text-center absolute bottom-14 w-full flex items-center justify-center flex-col">
|
||||
<span className="mb-3">{t("Explore the xLog way")}</span>
|
||||
<Link
|
||||
to="Features"
|
||||
spy={true}
|
||||
|
|
@ -292,56 +327,100 @@ export default function Home() {
|
|||
</div>
|
||||
<div>
|
||||
<Element name="Features">
|
||||
<UniLink
|
||||
className="underline pt-28 w-full"
|
||||
href={getSiteLink({
|
||||
subdomain: "xlog",
|
||||
})}
|
||||
>
|
||||
<Image
|
||||
src="/assets/overall.png"
|
||||
alt="overall"
|
||||
width={3785}
|
||||
height={2170}
|
||||
></Image>
|
||||
<p className="text-center">
|
||||
{t("Visit")} xlog.{OUR_DOMAIN}
|
||||
</p>
|
||||
</UniLink>
|
||||
<ul className="pt-20 grid grid-cols-1 sm:grid-cols-3 gap-8">
|
||||
{features.map((item, index) => (
|
||||
<li
|
||||
className="border rounded-xl overflow-hidden bg-white hover:shadow-md hover:scale-105 transition duration-300 cursor-default"
|
||||
key={item.title}
|
||||
>
|
||||
<div className="w-full h-44">
|
||||
<Image
|
||||
className="object-cover"
|
||||
src={item.screenshot.src}
|
||||
alt={item.title}
|
||||
fill
|
||||
></Image>
|
||||
{features.map((feature, index) => (
|
||||
<div className="text-center mt-28" key={feature.title}>
|
||||
<div className="">
|
||||
<div
|
||||
className={`h-20 w-[1px] bg-gradient-to-b mx-auto text-feature-${feature.title.toLocaleLowerCase()}`}
|
||||
style={
|
||||
{
|
||||
"--tw-gradient-from": "transparent",
|
||||
} as any
|
||||
}
|
||||
></div>
|
||||
<div
|
||||
className={`block rounded-full w-10 h-10 mx-auto p-2 text-white bg-gradient-to-br text-feature-${feature.title.toLocaleLowerCase()}`}
|
||||
>
|
||||
{index + 1}
|
||||
</div>
|
||||
<p className="text-2xl font-bold mt-5 flex items-center px-5">
|
||||
<span className="mr-3">{item.icon}</span>
|
||||
<span>{t(item.title)}</span>
|
||||
</p>
|
||||
<p className="text-base font-light mt-3 mb-4 leading-normal px-5">
|
||||
<h3
|
||||
className={`mt-6 inline-block text-3xl font-bold text-feature text-feature-${feature.title.toLocaleLowerCase()}`}
|
||||
>
|
||||
{t(feature.title)}
|
||||
</h3>
|
||||
<h4 className="mt-6 text-5xl sm:text-6xl font-bold">
|
||||
{t(`${feature.title} subtitle`)}
|
||||
</h4>
|
||||
<p className="mt-6 text-zinc-500">
|
||||
<Trans
|
||||
i18nKey={`${item.title} description`}
|
||||
defaults={item.text}
|
||||
i18nKey={`${feature.title} description`}
|
||||
components={{
|
||||
strong: <strong className="font-bold" />,
|
||||
aown: (
|
||||
<UniLink
|
||||
className="underline"
|
||||
href="https://github.com/Crossbell-Box/Crossbell-Contracts/wiki"
|
||||
>
|
||||
.
|
||||
</UniLink>
|
||||
),
|
||||
}}
|
||||
ns="index"
|
||||
/>
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<ul className="pt-10 grid grid-cols-1 sm:grid-cols-3 gap-8">
|
||||
{feature.subfeatures.map((item, index) => (
|
||||
<li
|
||||
className="border rounded-xl overflow-hidden bg-white hover:shadow-md hover:scale-105 transition duration-300 cursor-default"
|
||||
key={item.title}
|
||||
>
|
||||
{item.screenshot?.src && (
|
||||
<div className="w-full h-44">
|
||||
<Image
|
||||
className="object-cover"
|
||||
src={item.screenshot.src}
|
||||
alt={item.title}
|
||||
fill
|
||||
></Image>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-2xl font-bold mt-5 flex items-center px-5">
|
||||
<span className="mr-3">{item.icon}</span>
|
||||
<span
|
||||
className={`text-feature text-feature-${feature.title.toLocaleLowerCase()}`}
|
||||
>
|
||||
{t(item.title)}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-base font-light mt-3 mb-4 leading-normal px-5 text-left">
|
||||
<Trans
|
||||
i18nKey={`${item.title} text`}
|
||||
components={{
|
||||
strong: <strong className="font-bold" />,
|
||||
axfm: (
|
||||
<UniLink
|
||||
className="underline"
|
||||
href={`${getSiteLink({
|
||||
subdomain: "xlog",
|
||||
})}/xfm`}
|
||||
>
|
||||
.
|
||||
</UniLink>
|
||||
),
|
||||
}}
|
||||
ns="index"
|
||||
/>
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</Element>
|
||||
<Element name="Showcase">
|
||||
<div className="pt-28 text-4xl font-bold">{t("Showcase")}</div>
|
||||
<Element name="Showcase" className="text-center">
|
||||
<div className="pt-32 text-5xl sm:text-6xl font-bold">
|
||||
{t("Showcase")}
|
||||
</div>
|
||||
<div className="my-10 text-zinc-700">
|
||||
<p className="text-lg">
|
||||
{t(
|
||||
|
|
@ -361,7 +440,7 @@ export default function Home() {
|
|||
🥳 {t("Follow All!")}
|
||||
</Button>
|
||||
<ul
|
||||
className={`pt-10 grid grid-cols-2 md:grid-cols-3 gap-10 overflow-y-hidden relative ${
|
||||
className={`pt-10 grid grid-cols-2 md:grid-cols-3 gap-10 overflow-y-hidden relative text-left ${
|
||||
showcaseMore ? "" : "max-h-[540px]"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -419,8 +498,10 @@ export default function Home() {
|
|||
</ul>
|
||||
</div>
|
||||
</Element>
|
||||
<Element name="Integration">
|
||||
<div className="pt-28 text-4xl font-bold">{t("Integration")}</div>
|
||||
<Element name="Integration" className="text-center">
|
||||
<div className="pt-32 text-5xl sm:text-6xl font-bold">
|
||||
{t("Integration")}
|
||||
</div>
|
||||
<div className="my-10 text-zinc-700">
|
||||
<p className="text-xl">
|
||||
{t(
|
||||
|
|
@ -480,7 +561,9 @@ export default function Home() {
|
|||
href="/dashboard"
|
||||
className="text-accent inline-flex items-center space-x-2"
|
||||
>
|
||||
<Button size="xl">{t("Get my xLog in 5 minutes")}</Button>
|
||||
<Button size="2xl" variantColor="black">
|
||||
{t("Get my xLog in 5 minutes")}
|
||||
</Button>
|
||||
</UniLink>
|
||||
) : (
|
||||
<Button onClick={tryNow} size="2xl" variantColor="black">
|
||||
|
|
|
|||
Loading…
Reference in New Issue