feat: new home page
This commit is contained in:
DIYgod
parent
bea1aea16d
commit
3bb00a2a58
Binary file not shown.
|
After Width: | Height: | Size: 660 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<svg width="36" height="24" viewBox="0 0 36 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.01388 5.85572C12.5495 5.85572 16.002 9.51132 16.002 14.3177C16.002 19.1242 12.5495 22.7798 8.01388 22.7798C3.47823 22.7798 0.0595703 19.1242 0.0595703 14.3177C0.0595703 9.51132 3.47823 5.85572 8.01388 5.85572ZM1.85352 14.3177C1.85352 18.278 4.45982 21.1889 8.01388 21.1889C11.5679 21.1889 14.2081 18.278 14.2081 14.3177C14.2081 10.3575 11.6695 7.44658 7.98003 7.44658C4.29058 7.44658 1.85352 10.4252 1.85352 14.3177Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M27.375 5.85572C31.9106 5.85572 35.3631 9.51132 35.3631 14.3177C35.3631 19.1242 31.9106 22.7798 27.375 22.7798C22.8393 22.7798 19.4207 19.1242 19.4207 14.3177C19.4207 9.51132 22.8393 5.85572 27.375 5.85572ZM21.2146 14.3177C21.2146 18.278 23.8209 21.1889 27.375 21.1889C30.929 21.1889 33.5692 18.278 33.5692 14.3177C33.5692 10.3575 31.0306 7.44658 27.3411 7.44658C23.6517 7.44658 21.2146 10.4252 21.2146 14.3177Z"
|
||||
fill="black" />
|
||||
<path d="M19.8556 22.3059L17.7114 24L15.5654 22.3059L17.7114 20.6118L19.8556 22.3059Z"
|
||||
fill="#0072FF" />
|
||||
<path
|
||||
d="M33.515 0.0154049C32.9193 0.472354 32.3253 0.930996 31.7312 1.38795C29.1046 1.49626 24.6773 2.10553 20.5343 5.06216C19.6018 5.72897 18.7996 6.42962 18.1108 7.12351L17.6335 7.60077L17.1546 7.12351C16.4657 6.42962 15.6635 5.72897 14.731 5.06216C10.5897 2.10553 6.16069 1.49626 3.53577 1.38795C2.94004 0.930996 2.34601 0.472354 1.75198 0.0154049C6.9172 -0.162298 11.6796 1.20009 15.5214 3.96379C16.2559 4.49012 16.9633 5.074 17.6335 5.70189C18.3037 5.074 19.0111 4.49012 19.7439 3.96379C23.5874 1.20009 28.3498 -0.162298 33.515 0.0154049Z"
|
||||
fill="#0072FF" />
|
||||
<path d="M9.82475 14.3178H8.0308V17.3438H9.82475V14.3178Z" fill="#0072FF" />
|
||||
<path d="M27.3919 14.3178H25.598V17.3438H27.3919V14.3178Z" fill="#0072FF" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 290 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 854 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 285 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
|
|
@ -29,8 +29,8 @@ export const BlockchainInfo: React.FC<{
|
|||
? "post"
|
||||
: "page"
|
||||
: "blog"}{" "}
|
||||
has been signed and permanently stored on the blockchain by
|
||||
its creator.
|
||||
has been signed and securely stored on the blockchain by its
|
||||
creator.
|
||||
</span>
|
||||
</span>
|
||||
<ChevronUpIcon
|
||||
|
|
|
|||
|
|
@ -94,17 +94,38 @@ export const Reactions: React.FC<{
|
|||
}, [likePage.isSuccess])
|
||||
|
||||
const mint = async () => {
|
||||
if (!isConnected) {
|
||||
setMintProgress(true)
|
||||
openConnectModal?.()
|
||||
} else if (!userSite.data) {
|
||||
router.push(`${SITE_URL}/dashboard/new-site`)
|
||||
} else if (pageId) {
|
||||
if (isMint.data?.count) {
|
||||
setIsMintOpen(true)
|
||||
} else {
|
||||
mintPage.mutate(parsePageId(pageId))
|
||||
}
|
||||
// if (!isConnected) {
|
||||
// setMintProgress(true)
|
||||
// openConnectModal?.()
|
||||
// } else if (!userSite.data) {
|
||||
// router.push(`${SITE_URL}/dashboard/new-site`)
|
||||
// } else if (pageId) {
|
||||
// if (isMint.data?.count) {
|
||||
// setIsMintOpen(true)
|
||||
// } else {
|
||||
// mintPage.mutate(parsePageId(pageId))
|
||||
// }
|
||||
// }
|
||||
if (mintRef.current) {
|
||||
confetti({
|
||||
particleCount: 150,
|
||||
spread: 360,
|
||||
ticks: 50,
|
||||
gravity: 0,
|
||||
decay: 0.94,
|
||||
startVelocity: 30,
|
||||
origin: {
|
||||
x:
|
||||
(mintRef.current.getBoundingClientRect().left +
|
||||
mintRef.current.getBoundingClientRect().width / 2 || 0.5) /
|
||||
window.innerWidth,
|
||||
y:
|
||||
(mintRef.current.getBoundingClientRect().top || 0.5) /
|
||||
window.innerHeight,
|
||||
},
|
||||
shapes: ["star"],
|
||||
colors: ["FFE400", "FFBD00", "E89400", "FFCA6C", "FDFFB8"],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import React from "react"
|
||||
|
||||
export const CrossbellIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
|
||||
props,
|
||||
) => {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_1030_5486)">
|
||||
<path
|
||||
d="M12.8444 18.4185C12.8444 19.292 11.5709 20 10 20C8.42915 20 7.15491 19.292 7.15491 18.4185H12.8444Z"
|
||||
fill="#E7B75B"
|
||||
></path>
|
||||
<path
|
||||
d="M7.74317 7.8273L3.12109 8.70508C3.12109 3.8976 5.94982 0 9.43955 0L9.41103 6.32202L7.74317 7.8273Z"
|
||||
fill="#E7B75B"
|
||||
></path>
|
||||
<path
|
||||
d="M9.17857 11.0255L8.92971 13.6439L8.59172 17.2028C8.56391 17.2071 8.53538 17.2099 8.50686 17.2128C7.37238 17.3312 5.78082 16.9703 4.19212 16.151C2.27184 15.1592 0.891347 13.7751 0.560486 12.6413C1.04525 12.6043 1.51472 12.4549 1.93171 12.2049C2.50786 11.8719 2.93427 11.4206 3.13322 10.987C3.16147 10.9258 3.1853 10.8627 3.20452 10.7981C3.25558 10.6455 3.26975 10.483 3.24588 10.3239L7.73818 9.58301L9.17857 11.0255Z"
|
||||
fill="#E7B75B"
|
||||
></path>
|
||||
<path
|
||||
d="M12.2547 7.8273L16.8768 8.70508C16.8789 3.8976 14.0495 0 10.5605 0L10.589 6.32202L12.2547 7.8273Z"
|
||||
fill="#E7B75B"
|
||||
></path>
|
||||
<path
|
||||
d="M10.8215 11.0255L11.0703 13.6439L11.4083 17.2028C11.4361 17.2071 11.4647 17.2099 11.4932 17.2128C12.6277 17.3312 14.2192 16.9703 15.8079 16.151C17.7296 15.1592 19.1087 13.7751 19.4396 12.6413C18.9548 12.6043 18.4853 12.4549 18.0683 12.2049C17.4922 11.8719 17.0658 11.4206 16.8668 10.987C16.8386 10.9258 16.8147 10.8627 16.7955 10.7981C16.7445 10.6455 16.7303 10.483 16.7542 10.3239L12.2619 9.58301L10.8215 11.0255Z"
|
||||
fill="#E7B75B"
|
||||
></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1030_5486">
|
||||
<rect
|
||||
width="18.8791"
|
||||
height="20"
|
||||
fill="white"
|
||||
transform="translate(0.560486)"
|
||||
></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React from "react"
|
||||
|
||||
export const HootIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
|
||||
props,
|
||||
) => {
|
||||
return (
|
||||
<svg
|
||||
width="36"
|
||||
height="24"
|
||||
viewBox="0 0 36 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M8.01388 5.85572C12.5495 5.85572 16.002 9.51132 16.002 14.3177C16.002 19.1242 12.5495 22.7798 8.01388 22.7798C3.47823 22.7798 0.0595703 19.1242 0.0595703 14.3177C0.0595703 9.51132 3.47823 5.85572 8.01388 5.85572ZM1.85352 14.3177C1.85352 18.278 4.45982 21.1889 8.01388 21.1889C11.5679 21.1889 14.2081 18.278 14.2081 14.3177C14.2081 10.3575 11.6695 7.44658 7.98003 7.44658C4.29058 7.44658 1.85352 10.4252 1.85352 14.3177Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M27.375 5.85572C31.9106 5.85572 35.3631 9.51132 35.3631 14.3177C35.3631 19.1242 31.9106 22.7798 27.375 22.7798C22.8393 22.7798 19.4207 19.1242 19.4207 14.3177C19.4207 9.51132 22.8393 5.85572 27.375 5.85572ZM21.2146 14.3177C21.2146 18.278 23.8209 21.1889 27.375 21.1889C30.929 21.1889 33.5692 18.278 33.5692 14.3177C33.5692 10.3575 31.0306 7.44658 27.3411 7.44658C23.6517 7.44658 21.2146 10.4252 21.2146 14.3177Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M19.8556 22.3059L17.7114 24L15.5654 22.3059L17.7114 20.6118L19.8556 22.3059Z"
|
||||
fill="#0072FF"
|
||||
/>
|
||||
<path
|
||||
d="M33.515 0.0154049C32.9193 0.472354 32.3253 0.930996 31.7312 1.38795C29.1046 1.49626 24.6773 2.10553 20.5343 5.06216C19.6018 5.72897 18.7996 6.42962 18.1108 7.12351L17.6335 7.60077L17.1546 7.12351C16.4657 6.42962 15.6635 5.72897 14.731 5.06216C10.5897 2.10553 6.16069 1.49626 3.53577 1.38795C2.94004 0.930996 2.34601 0.472354 1.75198 0.0154049C6.9172 -0.162298 11.6796 1.20009 15.5214 3.96379C16.2559 4.49012 16.9633 5.074 17.6335 5.70189C18.3037 5.074 19.0111 4.49012 19.7439 3.96379C23.5874 1.20009 28.3498 -0.162298 33.515 0.0154049Z"
|
||||
fill="#0072FF"
|
||||
/>
|
||||
<path
|
||||
d="M9.82475 14.3178H8.0308V17.3438H9.82475V14.3178Z"
|
||||
fill="#0072FF"
|
||||
/>
|
||||
<path
|
||||
d="M27.3919 14.3178H25.598V17.3438H27.3919V14.3178Z"
|
||||
fill="#0072FF"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import React from "react"
|
||||
|
||||
export const XShopIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
|
||||
props,
|
||||
) => {
|
||||
return (
|
||||
<svg
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 36 36"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<g clipPath="url(#clip0_5172_21158)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M20.8372 29.6051C22.2054 30.8559 24.0886 31.1917 25.7612 30.4394C27.535 29.6416 28.6236 27.8291 28.5147 25.7279C28.4755 24.9715 28.4033 24.208 28.3026 23.4545C28.1048 21.9754 28.6278 20.3727 29.7219 19.162C30.3319 18.487 30.8374 17.8889 31.2619 17.3532C33.3032 14.7774 34.7469 11.3361 33.8239 7.44451C33.5171 6.97304 33.1771 6.48634 32.8078 6.00718C32.393 5.46902 31.9413 4.94037 31.4581 4.45348C30.9865 3.97821 30.4748 3.53262 29.953 3.12205C29.4644 2.73753 28.9669 2.38373 28.4852 2.06502C24.6225 1.82525 21.1485 2.52975 18.5573 4.55141C18.0184 4.97189 17.4164 5.47266 16.7368 6.07762C15.5177 7.16233 13.9111 7.67311 12.4336 7.46411C11.681 7.35775 10.918 7.27973 10.1619 7.23479C8.06156 7.10978 6.24074 8.18444 5.42952 9.95218C4.66451 11.619 4.98604 13.5048 6.22633 14.8825C7.93089 16.7758 10.2661 19.2698 13.3734 22.4009C16.4808 25.532 18.9569 27.8861 20.8372 29.6051Z"
|
||||
fill="#E65040"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.96671 28.9335C7.51029 30.4771 9.40148 31.6326 11.5215 32.3362C12.173 32.5524 12.8842 32.1969 13.1099 31.5421C13.3356 30.8873 12.9903 30.1812 12.3387 29.9649C10.5711 29.3783 9.01167 28.4215 7.74522 27.155C6.47876 25.8885 5.52187 24.3291 4.93533 22.5615C4.71909 21.9099 4.0129 21.5646 3.3581 21.7903C2.70329 22.0159 2.34781 22.7272 2.56404 23.3788C3.26759 25.4987 4.42313 27.3899 5.96671 28.9335ZM6.77428 23.2233C7.66872 25.4713 9.38205 27.1846 11.63 28.0791C12.2675 28.3327 12.9975 28.0185 13.2604 27.3773C13.5233 26.7361 13.2196 26.0106 12.5821 25.757C10.9605 25.1118 9.74162 23.8929 9.09639 22.2713C8.84275 21.6338 8.1173 21.3301 7.47607 21.593C6.83484 21.8559 6.52064 22.5858 6.77428 23.2233Z"
|
||||
fill="#FF8A7A"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5172_21158">
|
||||
<rect width="36" height="36" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import React from "react"
|
||||
|
||||
export const XSyncIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
|
||||
props,
|
||||
) => {
|
||||
return (
|
||||
<svg
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M25.3514 2.40039C19.9028 2.40039 15.2504 5.75659 13.383 10.4927C7.06993 10.6467 2 15.7598 2 22.0448C2 28.4267 7.22739 33.6004 13.6757 33.6004H35.8595C41.018 33.6004 45.2 29.4614 45.2 24.3559C45.2 20.0473 42.2215 16.427 38.1913 15.402C38.1934 15.3054 38.1946 15.2086 38.1946 15.1115C38.1946 8.09127 32.4446 2.40039 25.3514 2.40039Z"
|
||||
fill="#5B89F7"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M23.2001 44.7998C25.8106 44.7998 28.3869 44.1481 30.7745 42.8934C31.5083 42.5077 31.8091 41.5627 31.4462 40.7827C31.0834 40.0027 30.1943 39.6831 29.4605 40.0687C27.4698 41.115 25.3419 41.6488 23.2001 41.6488C21.0583 41.6488 18.9305 41.115 16.9399 40.0687C16.206 39.6831 15.3168 40.0027 14.954 40.7827C14.5911 41.5627 14.8919 42.5077 15.6258 42.8933C18.0133 44.1481 20.5896 44.7998 23.2001 44.7998ZM19.0545 39.0259C21.7117 40.225 24.6093 40.225 27.2665 39.0259C28.0201 38.6859 28.3716 37.761 28.0517 36.96C27.7318 36.1591 26.8616 35.7855 26.108 36.1255C24.1912 36.9905 22.1299 36.9905 20.213 36.1255C19.4595 35.7855 18.5892 36.1591 18.2693 36.96C17.9494 37.761 18.301 38.6859 19.0545 39.0259Z"
|
||||
fill="#B2C5FF"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -58,7 +58,7 @@ export function MainLayout({
|
|||
href={GITHUB_LINK}
|
||||
className="items-center hidden sm:flex hover:text-accent"
|
||||
>
|
||||
GitHub
|
||||
Source Code
|
||||
</UniLink>
|
||||
<ConnectButton size="base" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -569,8 +569,8 @@ export default function SubdomainEditor() {
|
|||
title="🎉 Published!"
|
||||
>
|
||||
<div className="p-5">
|
||||
Your post has been permanently stored on the blockchain. Now you may
|
||||
want to
|
||||
Your post has been securely stored on the blockchain. Now you may want
|
||||
to
|
||||
<ul className="list-disc pl-5 mt-2 space-y-1">
|
||||
<li>
|
||||
<UniLink
|
||||
|
|
|
|||
|
|
@ -3,14 +3,13 @@ import { useEffect, useState } from "react"
|
|||
import { DashboardIcon } from "~/components/icons/DashboardIcon"
|
||||
import { MainLayout } from "~/components/main/MainLayout"
|
||||
import { UniLink } from "~/components/ui/UniLink"
|
||||
import { LoveIcon } from "~/components/icons/LoveIcon"
|
||||
import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
|
||||
import { LaughIcon } from "~/components/icons/LaughIcon"
|
||||
import { Button } from "~/components/ui/Button"
|
||||
import { useAccountState, useConnectModal } from "@crossbell/connect-kit"
|
||||
import { useRefCallback } from "@crossbell/util-hooks"
|
||||
import { useRouter } from "next/router"
|
||||
import { GITHUB_LINK, APP_NAME, CSB_SCAN } from "~/lib/env"
|
||||
import { GITHUB_LINK, APP_NAME, CSB_SCAN, OUR_DOMAIN } from "~/lib/env"
|
||||
import { getSiteLink } from "~/lib/helpers"
|
||||
import { Link, Element } from "react-scroll"
|
||||
import { Image } from "~/components/ui/Image"
|
||||
|
|
@ -21,7 +20,20 @@ import showcase from "../../showcase.json"
|
|||
import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
|
||||
import { useAccountSites, useSubscribeToSites } from "~/queries/site"
|
||||
import { SITE_URL } from "~/lib/env"
|
||||
import { BoltIcon } from "@heroicons/react/24/outline"
|
||||
import {
|
||||
BoltIcon,
|
||||
FingerPrintIcon,
|
||||
RssIcon,
|
||||
EllipsisHorizontalIcon,
|
||||
} from "@heroicons/react/24/outline"
|
||||
import { XCharIcon } from "~/components/icons/XCharIcon"
|
||||
import { XFeedIcon } from "~/components/icons/XFeedIcon"
|
||||
import { XSyncIcon } from "~/components/icons/XSyncIcon"
|
||||
import { XShopIcon } from "~/components/icons/XShopIcon"
|
||||
import { CrossbellIcon } from "~/components/icons/CrossbellIcon"
|
||||
import { RSS3Icon } from "~/components/icons/RSS3Icon"
|
||||
import { Tooltip } from "~/components/ui/Tooltip"
|
||||
import { HootIcon } from "~/components/icons/HootIcon"
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const queryClient = new QueryClient()
|
||||
|
|
@ -53,68 +65,147 @@ export default function Home() {
|
|||
}
|
||||
}, [isTry, isConnected, router])
|
||||
|
||||
const description = [
|
||||
const features = [
|
||||
{
|
||||
screenshot: {
|
||||
src: "/assets/screenshot1.png",
|
||||
width: 3947,
|
||||
height: 1888,
|
||||
src: "/assets/easy.png",
|
||||
},
|
||||
icon: <LaughIcon className="inline mb-2" />,
|
||||
title: "Elegent",
|
||||
text: <>Out-of-the-box, good looking, no friction.</>,
|
||||
},
|
||||
{
|
||||
screenshot: {
|
||||
src: "/assets/screenshot4.png",
|
||||
width: 1542,
|
||||
height: 467,
|
||||
},
|
||||
icon: <BlockchainIcon className="inline mb-2" />,
|
||||
title: "On-chain",
|
||||
icon: <LaughIcon />,
|
||||
title: "Easy",
|
||||
text: (
|
||||
<>
|
||||
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.
|
||||
Connect with your <span className="font-bold">Web3 Wallet</span> or{" "}
|
||||
<span className="font-bold">Email</span>. Build your own site with
|
||||
custom domains, subscriptions, likes, comments, minting as nft, RSS
|
||||
and more in one second. No fees, no friction.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
screenshot: {
|
||||
src: "/assets/screenshot5.png",
|
||||
width: 1712,
|
||||
height: 1866,
|
||||
src: "/assets/safe.png",
|
||||
},
|
||||
icon: <BoltIcon className="inline mb-2 w-8 h-8" />,
|
||||
icon: <FingerPrintIcon className="w-7 h-7" />,
|
||||
title: "Safe",
|
||||
text: (
|
||||
<>
|
||||
All blog data, including configs, posts, subscriptions, comments,
|
||||
etc., are signed and securely stored on the{" "}
|
||||
<span className="font-bold">blockchain</span> with your own hands. No
|
||||
one else, including us, can make any changes.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
screenshot: {
|
||||
src: "/assets/fast.png",
|
||||
},
|
||||
icon: <BoltIcon className="w-7 h-7" />,
|
||||
title: "Fast",
|
||||
text: (
|
||||
<>
|
||||
Blockchain doesn't always mean inefficiency. xLog's
|
||||
experienced open-source maintainers have been making optimizations to
|
||||
get xLog to peak speed.
|
||||
efficient caching mechanism and numerous optimisations take it to the
|
||||
peak of performance.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
screenshot: {
|
||||
src: "/assets/screenshot2.png",
|
||||
width: 1528,
|
||||
height: 758,
|
||||
src: "/assets/customizable.png",
|
||||
},
|
||||
icon: <LoveIcon className="inline mb-2" />,
|
||||
title: "Rich Interactions",
|
||||
text: "You can follow, comment, like, and mint your blog and posts, all on the blockchain of course.",
|
||||
icon: <DashboardIcon />,
|
||||
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/screenshot3.png",
|
||||
width: 4394,
|
||||
height: 1854,
|
||||
src: "/assets/open.png",
|
||||
},
|
||||
icon: <DashboardIcon className="inline mb-2" />,
|
||||
title: "Highly Customizable",
|
||||
text: "Domain name, navigation bar, custom styles, all as you wish, and stored on the blockchain.",
|
||||
icon: <BlockchainIcon className="w-6 h-6" />,
|
||||
title: "Open",
|
||||
text: (
|
||||
<>
|
||||
Uses <span className="font-bold">standard Markdown</span> with export
|
||||
and import tools and rich APIs for a painless move in and out. All
|
||||
code is <span className="font-bold">open source</span> on GitHub, all
|
||||
data is <span className="font-bold">transparent</span> on the chain.
|
||||
</>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const integrations = [
|
||||
{
|
||||
name: "RSS",
|
||||
icon: <RssIcon className="w-full h-full text-orange-500" />,
|
||||
url:
|
||||
getSiteLink({
|
||||
subdomain: "xlog",
|
||||
}) + "/feed/xml",
|
||||
},
|
||||
{
|
||||
name: "JSON Feed",
|
||||
icon: <Image src="/assets/json-feed.png" alt="JSON Feed" />,
|
||||
url:
|
||||
getSiteLink({
|
||||
subdomain: "xlog",
|
||||
}) + "/feed",
|
||||
},
|
||||
{
|
||||
name: "xChar",
|
||||
icon: <XCharIcon className="w-full h-full" />,
|
||||
url: "https://xchar.app/",
|
||||
},
|
||||
{
|
||||
name: "xFeed",
|
||||
icon: <XFeedIcon className="w-full h-full" />,
|
||||
url: "https://crossbell.io/feed",
|
||||
},
|
||||
{
|
||||
name: "xSync",
|
||||
icon: <XSyncIcon className="w-full h-full" />,
|
||||
url: "https://xsync.app/",
|
||||
},
|
||||
{
|
||||
name: "xShop",
|
||||
icon: <XShopIcon className="w-full h-full" />,
|
||||
text: "Coming soon",
|
||||
},
|
||||
{
|
||||
name: "Crossbell Scan",
|
||||
icon: <CrossbellIcon className="w-full h-full p-[2px]" />,
|
||||
url: "https://scan.crossbell.io/",
|
||||
},
|
||||
{
|
||||
name: "Crossbell Faucet",
|
||||
icon: <CrossbellIcon className="w-full h-full p-[2px]" />,
|
||||
url: "https://faucet.crossbell.io/",
|
||||
},
|
||||
{
|
||||
name: "Crossbell Export",
|
||||
icon: <CrossbellIcon className="w-full h-full p-[2px]" />,
|
||||
url: "https://export.crossbell.io/",
|
||||
},
|
||||
{
|
||||
name: "Crossbell SDK",
|
||||
icon: <CrossbellIcon className="w-full h-full p-[2px]" />,
|
||||
url: "https://crossbell-box.github.io/crossbell.js/",
|
||||
},
|
||||
{
|
||||
name: "RSS3",
|
||||
icon: <RSS3Icon className="w-full h-full" />,
|
||||
url: "https://rss3.io/",
|
||||
},
|
||||
{
|
||||
name: "Hoot It",
|
||||
icon: <HootIcon className="w-full h-full" />,
|
||||
url: "https://hoot.it/search/xLog",
|
||||
},
|
||||
{
|
||||
name: "Raycast",
|
||||
icon: <Image src="/assets/raycast.png" alt="Raycast" />,
|
||||
url: "https://www.raycast.com/Songkeys/crossbell",
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -169,6 +260,8 @@ export default function Home() {
|
|||
doSubscribeToSites,
|
||||
])
|
||||
|
||||
const [showcaseMore, setShowcaseMore] = useState(false)
|
||||
|
||||
return (
|
||||
<MainLayout tabs={["Features", "Showcase", "Integration"]}>
|
||||
<section>
|
||||
|
|
@ -224,24 +317,41 @@ export default function Home() {
|
|||
</div>
|
||||
<div>
|
||||
<Element name="Features">
|
||||
<ul className="pt-28 space-y-24">
|
||||
{description.map((item, index) => (
|
||||
<li className="relative w-full" key={index}>
|
||||
<p className="text-4xl font-bold">
|
||||
<span className="mr-4">{item.icon}</span>
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="text-3xl font-light mt-4 leading-normal mb-8">
|
||||
{item.text}
|
||||
</p>
|
||||
<div>
|
||||
<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">Visit xlog.{OUR_DOMAIN}</p>
|
||||
</UniLink>
|
||||
<ul className="pt-20 grid 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}
|
||||
width={item.screenshot.width}
|
||||
height={item.screenshot.height}
|
||||
fill
|
||||
></Image>
|
||||
</div>
|
||||
<p className="text-2xl font-bold mt-5 flex items-center px-5">
|
||||
<span className="mr-3">{item.icon}</span>
|
||||
<span>{item.title}</span>
|
||||
</p>
|
||||
<p className="text-base font-light mt-3 mb-4 leading-normal px-5">
|
||||
{item.text}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
@ -266,7 +376,19 @@ export default function Home() {
|
|||
>
|
||||
🥳 Follow All!
|
||||
</Button>
|
||||
<ul className="mt-10 grid grid-cols-2 md:grid-cols-3 gap-10">
|
||||
<ul
|
||||
className={`pt-10 grid grid-cols-2 md:grid-cols-3 gap-10 overflow-y-hidden relative ${
|
||||
showcaseMore ? "" : "max-h-[540px]"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute bottom-0 h-20 left-0 right-0 bg-gradient-to-t from-white via-white z-40 flex items-end justify-center font-bold cursor-pointer ${
|
||||
showcaseMore ? "hidden" : ""
|
||||
}`}
|
||||
onClick={() => setShowcaseMore(true)}
|
||||
>
|
||||
Show more
|
||||
</div>
|
||||
{showcaseSites.data?.map((site: any) => (
|
||||
<li className="inline-flex align-middle" key={site.handle}>
|
||||
<UniLink
|
||||
|
|
@ -321,90 +443,43 @@ export default function Home() {
|
|||
<div className="pt-28 text-4xl font-bold">Integration</div>
|
||||
<div className="my-10 text-zinc-700">
|
||||
<p className="text-xl">
|
||||
You can integrate xLog with all of Crossbell's
|
||||
eco-projects without friction
|
||||
xLog's open design allows it to integrate with many other
|
||||
open protocols and applications without friction.
|
||||
</p>
|
||||
<ul className="space-y-8 mt-8">
|
||||
<li>
|
||||
<UniLink href="https://crossbell.io/@xlog">
|
||||
<p className="font-bold text-xl">Crossbell.io</p>
|
||||
<p className="text-zinc-500 my-4 text-lg">
|
||||
Check the updates of the xLogs you follow and the posts
|
||||
you collected
|
||||
</p>
|
||||
<Image
|
||||
className="rounded-lg"
|
||||
src="/assets/integration1.png"
|
||||
alt="integration1"
|
||||
width="3726"
|
||||
height="1888"
|
||||
></Image>
|
||||
</UniLink>
|
||||
</li>
|
||||
<li>
|
||||
<UniLink href="https://rss3.io/result?search=xlog.csb">
|
||||
<p className="font-bold text-xl">RSS3</p>
|
||||
<p className="text-zinc-500 my-4 text-lg">
|
||||
All your activities on xLog are supported and displayed
|
||||
by RSS3 and all eco-projects of RSS3
|
||||
</p>
|
||||
<Image
|
||||
className="rounded-lg"
|
||||
src="/assets/integration5.png"
|
||||
alt="integration5"
|
||||
width="3730"
|
||||
height="1888"
|
||||
></Image>
|
||||
</UniLink>
|
||||
</li>
|
||||
<li>
|
||||
<UniLink href="https://www.raycast.com/Songkeys/crossbell">
|
||||
<p className="font-bold text-xl">Raycast Crossbell</p>
|
||||
<p className="text-zinc-500 my-4 text-lg">
|
||||
Searching and browsing xLog in Raycast
|
||||
</p>
|
||||
<Image
|
||||
className="rounded-lg"
|
||||
src="/assets/integration2.png"
|
||||
alt="integration2"
|
||||
width="1724"
|
||||
height="1172"
|
||||
></Image>
|
||||
</UniLink>
|
||||
</li>
|
||||
<li>
|
||||
<UniLink href="https://export.crossbell.io">
|
||||
<p className="font-bold text-xl">Export Crossbell Data</p>
|
||||
<p className="text-zinc-500 my-4 text-lg">
|
||||
Thinking of leaving or backing up? Pack all your xLog
|
||||
site data and interaction data in one click here
|
||||
</p>
|
||||
<Image
|
||||
className="rounded-lg"
|
||||
src="/assets/integration3.png"
|
||||
alt="integration3"
|
||||
width="3726"
|
||||
height="1888"
|
||||
></Image>
|
||||
</UniLink>
|
||||
</li>
|
||||
<li>
|
||||
<UniLink href="https://github.com/Crossbell-Box/crossbell.js">
|
||||
<p className="font-bold text-xl">
|
||||
Crossbell SDK and Indexer API
|
||||
</p>
|
||||
<p className="text-zinc-500 my-4 text-lg">
|
||||
Create your own application or integration using
|
||||
Crossbell's powerful SDK and Indexer API
|
||||
</p>
|
||||
<Image
|
||||
className="rounded-lg"
|
||||
src="/assets/integration4.png"
|
||||
alt="integration4"
|
||||
width="3726"
|
||||
height="1888"
|
||||
></Image>
|
||||
</UniLink>
|
||||
<ul className="mt-14 grid grid-cols-5 gap-y-14 gap-x-2">
|
||||
{integrations.map((item, index) => (
|
||||
<li
|
||||
className="hover:scale-105 transition-transform duration-300"
|
||||
key={index}
|
||||
>
|
||||
{item.url ? (
|
||||
<UniLink
|
||||
href={item.url}
|
||||
className="w-full h-full flex items-center flex-col justify-center"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-md overflow-hidden">
|
||||
{item.icon}
|
||||
</div>
|
||||
<div className="font-medium text-xl mt-2">
|
||||
{item.name}
|
||||
</div>
|
||||
</UniLink>
|
||||
) : (
|
||||
<Tooltip label={item.text!}>
|
||||
<div className="w-full h-full flex items-center flex-col justify-center">
|
||||
<div className="w-12 h-12 rounded-md overflow-hidden">
|
||||
{item.icon}
|
||||
</div>
|
||||
<div className="font-medium text-xl mt-2">
|
||||
{item.name}
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
<li className="flex items-center justify-center">
|
||||
<EllipsisHorizontalIcon className="w-12 h-12" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue