Skip to content

Commit 0406206

Browse files
XueMoMoXueMoMo
committed
[prod] update
1 parent b2fc2d6 commit 0406206

File tree

7 files changed

+135
-96
lines changed

7 files changed

+135
-96
lines changed

‎src/Frame1.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,43 @@ export function Frame1() {
1111
return <div className="root_anim_item flex flex-col items-center gap-5">
1212
<TextLG lg="3" text={
1313
<>
14-
<CountUp duration={0.2} to={num} separator=","/>{suffix}
14+
<CountUp duration={0.2} to={num} separator="," />{suffix}
1515
</>
16-
} className="font-lexend text-5xl" />
16+
} className="font-lexend text-3xl md:text-5xl" />
1717
<div className="font-poppins opacity-60">{title}</div>
1818
</div>
1919
}
2020
return (
21-
<div className="w-full min-h-screen relative">
21+
<div className="w-full md:min-h-screen relative pt-18 md:pt-25">
2222
<Particles particleBaseSize={6} speed={0.1} particleSpread={40} sizeRandomness={2} className="absolute left-0 top-0 z-0 opacity-50" />
2323
<Header />
24-
<div className="flex flex-col w-full max-w-[1440px] mx-auto px-4 pb-20 relative z-10">
25-
<div className="root_anim_item flex flex-col w-2xl gap-12 py-20 font-lexend relative z-10">
26-
<div className="opacity-60 text-6xl font-medium">Strategy A Crust</div>
27-
<div className="font-semibold text-7xl flex items-center gap-8">
24+
<div className="flex flex-col w-full max-w-[1440px] mx-auto px-4 pb-20 relative z-10 gap-5 md:gap-0">
25+
<div className="root_anim_item flex flex-col w-full items-center md:items-start max-w-2xl gap-3 md:gap-12 py-8 md:py-20 font-lexend relative z-10">
26+
<div className="opacity-60 text-3xl md:text-6xl font-medium">Strategy A Crust</div>
27+
<div className="font-semibold text-4xl md:text-7xl flex items-center gap-8">
2828
<TextType text={['The Biggest', 'Decentralized']} />
2929
<TextLG text="AI." />
3030
</div>
31-
<div className="opacity-60 text-6xl font-medium">Infrastructure</div>
31+
<div className="opacity-60 text-3xl md:text-6xl font-medium">Infrastructure</div>
3232
</div>
33+
<AnimSAC className="root_anim_item md:absolute right-0 top-0 pointer-events-none" />
3334
<div className="root_anim_item flex items-center gap-5 z-10">
3435
<Button size="lg">Explore Tech</Button>
3536
<Button variant="outline" size="lg">Join Community</Button>
3637
</div>
37-
<AnimSAC className="root_anim_item absolute right-0 top-0 pointer-events-none" />
3838
{/* Text */}
3939
<TextLG
4040
lg="2"
4141
text="Trustworthy AI Build on Strategy A Crust"
42-
className="root_anim_item self-center w-fit mt-40 font-lexend text-5xl text-center leading-15 pointer-events-none"
42+
className="root_anim_item self-center w-fit mt-5 md:mt-40 font-lexend text-3xl md:text-5xl text-center leading-tight pointer-events-none"
4343
/>
44-
<div className="root_anim_item self-center text-center opacity-60 mt-6 leading-loose font-poppins pointer-events-none">
45-
By merging with Crust Network, SAC integrated decentralized storage and expand AI compute<br />capabilities to build the largest decentralized AI infrastructure.
44+
<div className="root_anim_item">
45+
<div className="self-center text-center opacity-60 mt-3 md:mt-6 leading-normal md:leading-loose font-poppins pointer-events-none">
46+
By merging with Crust Network, SAC integrated decentralized storage and expand AI compute<br />capabilities to build the largest decentralized AI infrastructure.
47+
</div>
4648
</div>
4749
{/* Numbers */}
48-
<div className="flex justify-between gap-5 mt-25 pointer-events-none">
50+
<div className="flex flex-col md:flex-row justify-between gap-5 mt-8 md:mt-25 pointer-events-none">
4951
{renderNumber("STORAGE CAPACITY", 144969, "TB")}
5052
{renderNumber("GPU POWER", 254780321, "G")}
5153
{renderNumber("VERIFY NODES", 200000, "+")}

‎src/Frame2.tsx‎

Lines changed: 38 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import AnimStep2 from "./anims/AnimStep2";
1010
import { AnimStep3 } from "./anims/AnimStep3";
1111
import { AnimStep4 } from "./anims/AnimStep4";
1212
import arrowRight from '/arrowright.svg';
13+
import { useIsMobile } from "./hooks/useIsMobile";
1314

1415
type Step = {
1516
step: 1 | 2 | 3 | 4;
@@ -68,7 +69,7 @@ function StepsBtn({ step, className }: { step?: Step['step'], className?: string
6869
<div className="flex items-center gap-6">
6970
{mstep == item.step ? <TextLG text={`0${item.step}`} className="text-2xl" /> : <span className="text-xl text-white/20">0{item.step}</span>}
7071
<div>
71-
{mstep == item.step && <img src={arrowRight} className="w-[.875rem]" />}
72+
{mstep == item.step && <img src={arrowRight} className="w-3.5" />}
7273
</div>
7374
</div>
7475
<div style={{
@@ -80,50 +81,45 @@ function StepsBtn({ step, className }: { step?: Step['step'], className?: string
8081
}
8182

8283
export function Frame2() {
83-
// const container = useRef<HTMLDivElement>(null);
84-
// useGSAP((ctx) => {
85-
// // gsap 实现pin多个元素
86-
87-
// }, { scope: container });
8884
const snap = useSnapshot(stepState)
8985
const data = steps.find(item => item.step == snap.step)!
90-
return <div className="root_anim_item flex flex-col w-full">
91-
{/* {steps.map(data => <div id={"frame2-step"} key={`step_${data.step}`}
92-
className="w-screen h-screen max-h-200 grid grid-cols-[85fr_107fr]">
93-
<div style={{ background: 'linear-gradient(180deg, #FA8B16 0%, #FFC144 100%)' }}
94-
className="h-full flex justify-end items-center ">
95-
<div className=" max-w-150 flex flex-col gap-8 items-start p-4 text-black">
96-
<div className="font-semibold text-2xl">0{data.step}</div>
97-
<div className="font-medium font-lexend text-[2rem]">{data.tit}</div>
98-
{data.text.map((item, i) => <div key={i}>{item}</div>)}
99-
</div>
100-
</div>
101-
<div className="h-full bg-black relative" >
102-
<StepsBtn step={data.step} className="absolute left-12.5 bottom-12.5" />
86+
const isMobile = useIsMobile()
87+
return <div className="flex flex-col w-full">
88+
{isMobile ?
89+
<div className="flex flex-col w-full md:hidden">
90+
{steps.map(data => <div key={`step_${data.step}`}
91+
className="w-full">
92+
<div style={{ background: 'linear-gradient(180deg, #FA8B16 0%, #FFC144 100%)' }}
93+
className="root_anim_item flex flex-col gap-5 items-start px-4 py-6 text-black">
94+
<div className="font-semibold text-2xl">0{data.step}</div>
95+
<div className="font-medium font-lexend text-[1.75rem]">{data.tit}</div>
96+
{data.text.map((item, i) => <div key={i}>{item}</div>)}
97+
</div>
98+
<div className="root_anim_item w-full p-4">{data.content}</div>
99+
</div>)}
103100
</div>
104-
</div>)} */}
105-
<div id={"frame2-step"}
106-
style={{ background: 'linear-gradient(180deg, #FA8B16 0%, #FFC144 100%)' }}
107-
className="root_anim_item w-screen h-screen max-h-200 flex">
108-
<div
109-
className=" h-full flex justify-end items-center w-full basis-[637px] flex-1">
110-
<div className="w-full max-w-[637px] relative">
111-
<AnimatePresence>
112-
<motion.div key={`frame2-step-text-${data.step}`} initial={{ opacity: 0, y: '50%' }} animate={{ y: '-50%', opacity: 1 }} exit={{ opacity: 0, y: '-150%' }}
113-
className="w-full absolute left-0 top-0 flex flex-col gap-8 items-start p-4 text-black">
114-
<div className="font-semibold text-2xl">0{data.step}</div>
115-
<div className="font-medium font-lexend text-[2rem]">{data.tit}</div>
116-
{data.text.map((item, i) => <div key={i}>{item}</div>)}
117-
</motion.div>
118-
</AnimatePresence>
101+
: <div id={"frame2-step"}
102+
style={{ background: 'linear-gradient(180deg, #FA8B16 0%, #FFC144 100%)' }}
103+
className="root_anim_item w-screen h-screen max-h-200 hidden md:flex">
104+
<div
105+
className=" h-full flex justify-end items-center w-full basis-[637px] flex-1">
106+
<div className="w-full max-w-[637px] relative">
107+
<AnimatePresence>
108+
<motion.div key={`frame2-step-text-${data.step}`} initial={{ opacity: 0, y: '50%' }} animate={{ y: '-50%', opacity: 1 }} exit={{ opacity: 0, y: '-150%' }}
109+
className="w-full absolute left-0 top-0 flex flex-col gap-8 items-start p-4 text-black">
110+
<div className="font-semibold text-2xl">0{data.step}</div>
111+
<div className="font-medium font-lexend text-[2rem]">{data.tit}</div>
112+
{data.text.map((item, i) => <div key={i}>{item}</div>)}
113+
</motion.div>
114+
</AnimatePresence>
115+
</div>
119116
</div>
120-
</div>
121-
<div className=" h-full bg-black relative flex items-center pl-5 basis-[803px] flex-1" >
122-
<motion.div key={`frame2-step-svg-${data.step}`} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }} className="w-full max-w-[803px]">
123-
{data.content}
124-
</motion.div>
125-
<StepsBtn step={data.step} className="absolute left-12.5 bottom-12.5" />
126-
</div>
127-
</div>
117+
<div className=" h-full bg-black relative flex items-center pl-5 basis-[803px] flex-1" >
118+
<motion.div key={`frame2-step-svg-${data.step}`} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }} className="w-full max-w-[803px]">
119+
{data.content}
120+
</motion.div>
121+
<StepsBtn step={data.step} className="absolute left-12.5 bottom-12.5" />
122+
</div>
123+
</div>}
128124
</div>;
129125
}

‎src/Frame4.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import iconGpu from "/gpu.svg"
1212
import iconListimage from "/listimage.svg"
1313
import iconLitenode from "/litenode.svg"
1414
import iconStorage from "/storage.svg"
15-
import iconVerifynode from "/verifynode.svg"
15+
// import iconVerifynode from "/verifynode.svg"
1616
import { Button } from './components/ui/button'
1717
import { FaArrowRight } from 'react-icons/fa6'
1818
gsap.registerPlugin(DrawSVGPlugin)
@@ -86,7 +86,7 @@ export function Frame4() {
8686
<div className='flex-1 basis-xs flex gap-4 flex-col px-4 py-10 border-r border-r-[#2E2E2E]'>
8787
<div className='root_anim_item flex flex-col gap-4'>
8888
<div className='font-lexend text-[2rem] font-medium'>LiteNodes</div>
89-
<div className='text-xl whitespace-pre-wrap'>Plug-and-play hardware device for quick data syncing and edge AI support</div>
89+
<div className='text-xl whitespace-pre-wrap'>LiteNode supports quick data syncing and edge AI capabilities, with options for standard products or equivalent-performance PCs, laptops, or servers.</div>
9090
<div className='text-xl flex items-center gap-2.5'>
9191
<img className='w-6 aspect-square' src={iconLitenode} />
9292
Standard Product
@@ -103,9 +103,9 @@ export function Frame4() {
103103
</div>
104104
<div className='flex-1 basis-xs flex gap-4 flex-col-reverse px-4 py-10'>
105105
<div className='root_anim_item flex flex-col gap-4 pl-6'>
106-
<div className='font-lexend text-[2rem] font-medium'>VerifyNodes</div>
107-
<div className='text-xl whitespace-pre-wrap'>Validate transactions, data integrity, and AI outputs</div>
108-
<div className='text-xl flex items-center gap-2.5'>
106+
<div className='font-lexend text-[2rem] font-medium'>LiteNode License NFT</div>
107+
<div className='text-xl whitespace-pre-wrap'>Purchase a LiteNode License NFT to upgrade your LiteNode to participate in the Verification Network, enabling validation of data integrity and AI outputs through consensus, ensuring tamper-proof trustworthiness, while earning more incentives.</div>
108+
{/* <div className='text-xl flex items-center gap-2.5'>
109109
<img className='w-6 aspect-square' src={iconVerifynode} />
110110
Minimum requirment
111111
</div>
@@ -115,7 +115,7 @@ export function Frame4() {
115115
<Li>Standard laptop/desktop (Intel/AMD CPU 2+ cores)</Li>
116116
<Li>8GB RAM, 500GB SSD</Li>
117117
<Li>100Mbps internet</Li>
118-
</ul>
118+
</ul> */}
119119
<Button variant="outline" size="lg" className='h-12 flex items-center gap-3 w-60 border-white/80 text-white'>Buy <FaArrowRight /></Button>
120120
</div>
121121
<SvgVerifynode className='root_anim_item' />

‎src/FrameRoadMap.tsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,37 @@ import currentUrl from '/roadmapcurrent.svg';
1010
gsap.registerPlugin(ScrollTrigger)
1111
gsap.registerPlugin(ScrollToPlugin)
1212

13+
/*
14+
15+
Q2 2026
16+
Testnet launch: LiteNode integration for Storage Network; initial PoCW testing in Compute.
17+
Q4 2026
18+
Mainnet beta: Full Storage Network rollout with RS-EC hybrid; NFT License delegation for Verify.
19+
Q2 2027
20+
Compute Network activation: Dynamic GPU auctions live; end-to-end TPS benchmarks >10K.
21+
Q4 2027
22+
Verify Network full deployment: BFT consensus optimization; AI Service Market beta.
23+
Q2 2028
24+
ZK proof integration: Privacy enhancements across networks; ecosystem partnerships.
25+
*/
1326
const items: {
1427
time: string,
1528
text: string
1629
}[] = [
1730
{
18-
time: '2026 Q1', text: 'TestNet launch in May, with initial DAS implementation and related flows, full dev docsand SDK; CDK readiness for market promotion.'
31+
time: 'Q2 2026', text: 'Testnet launch: LiteNode integration for Storage Network; initial PoCW testing in Compute.'
32+
},
33+
{
34+
time: 'Q4 2026', text: 'Mainnet beta: Full Storage Network rollout with RS-EC hybrid; NFT License delegation for Verify.'
35+
},
36+
{
37+
time: 'Q2 2027', text: 'Compute Network activation: Dynamic GPU auctions live; end-to-end TPS benchmarks >10K.'
1938
},
2039
{
21-
time: '2026 Q2', text: 'TestNet launch in May, with initial DAS implementation and related flows, full dev docsand SDK; CDK readiness for market promotion.'
40+
time: 'Q4 2027', text: 'Verify Network full deployment: BFT consensus optimization; AI Service Market beta.'
2241
},
2342
{
24-
time: '2026 Q3', text: 'TestNet launch in May, with initial DAS implementation and related flows, full dev docsand SDK; CDK readiness for market promotion.'
43+
time: 'Q2 2028', text: 'ZK proof integration: Privacy enhancements across networks; ecosystem partnerships.'
2544
},
2645
]
2746

‎src/Header.tsx‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import type { ReactNode } from "react";
22
import { FaDiscord, FaXTwitter } from "react-icons/fa6";
33
import { PiArrowUpRight } from "react-icons/pi";
44
import logo from "/logo.svg";
5+
import { cn } from "./lib/utils";
6+
import { FiMenu } from 'react-icons/fi'
7+
58
const tabs: { name: string, link: string }[] = [
69
{ name: "Tech", link: "#" },
710
{ name: "Build", link: "http" },
@@ -15,8 +18,8 @@ const sosials: { icon: ReactNode, link: string }[] = [
1518
{ icon: <FaDiscord />, link: "https://discord.com/" },
1619
]
1720

18-
export function Sosials() {
19-
return <div className="flex items-center gap-4">
21+
export function Sosials({ className }: { className?: string }) {
22+
return <div className={cn("flex items-center gap-4", className)}>
2023
{sosials.map((sosial, index) => (
2124
<a
2225
key={index}
@@ -32,31 +35,35 @@ export function Sosials() {
3235
}
3336
export function Header() {
3437
return (
35-
<div
36-
className="root_anim_item flex items-center justify-between w-full max-w-[1440px] px-4 mx-auto py-8 relative z-10">
37-
<img src={logo} alt="Logo" className="w-[100px] h-auto" />
38+
<div className="root_anim_item fixed top-0 w-full bg-black border-b border-b-white/15 md:border-b-transparent z-100">
3839
<div
39-
style={{
40-
background:
41-
"linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%),#121110",
42-
boxShadow:
43-
"0px 6px 12px 0px #FFFFFF0A inset,0px 1px 1px 0px #FFFFFF33 inset",
44-
}}
45-
className="flex rounded-full items-center gap-8 px-8"
46-
>
47-
{tabs.map((tab, index) => (
48-
<a
49-
key={index}
50-
href={tab.link}
51-
className="text-white text-sm py-2 hover:text-gray-400 transition-colors flex items-center gap-2"
52-
>
53-
{tab.name}
54-
{tab.link.startsWith("http") && <PiArrowUpRight size={16} />}
55-
</a>
56-
))}
40+
className="flex items-center justify-between w-full max-w-[1440px] px-4 mx-auto py-4 md:py-8 ">
41+
<img src={logo} alt="Logo" className="w-[100px] h-auto" />
42+
<div
43+
style={{
44+
background:
45+
"linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%),#121110",
46+
boxShadow:
47+
"0px 6px 12px 0px #FFFFFF0A inset,0px 1px 1px 0px #FFFFFF33 inset",
48+
}}
49+
className="rounded-full items-center gap-8 px-8 hidden md:flex"
50+
>
51+
{tabs.map((tab, index) => (
52+
<a
53+
key={index}
54+
href={tab.link}
55+
className="text-white text-sm py-2 hover:text-gray-400 transition-colors flex items-center gap-2"
56+
>
57+
{tab.name}
58+
{tab.link.startsWith("http") && <PiArrowUpRight size={16} />}
59+
</a>
60+
))}
61+
</div>
62+
<Sosials className="hidden md:flex" />
63+
<div className="flex justify-center items-center p-2 text-2xl relative cursor-pointer md:hidden" >
64+
<FiMenu />
65+
</div>
5766
</div>
58-
59-
<Sosials />
6067
</div>
6168
);
6269
}

0 commit comments

Comments
 (0)