Skip to content

Commit 667cc2f

Browse files
antons0lantons0l
authored
Coinlist images (#248)
* Coinlist page images * minor * tech and tea images * minor
1 parent fcc4480 commit 667cc2f

File tree

4 files changed

+183
-30
lines changed

4 files changed

+183
-30
lines changed

‎src/assets/partners.png‎

98.7 KB
Loading

‎src/assets/tech.png‎

752 KB
Loading

‎src/assets/traction.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/pkgx.dev/CoinListLandingPage.tsx‎

Lines changed: 182 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import DiamondIcon from "@mui/icons-material/Diamond";
77
import VerifiedIcon from "@mui/icons-material/Verified";
88
import { useEffect, useMemo, useState } from "react";
99
import { Helmet } from "react-helmet";
10+
import partnersImg from "../assets/partners.png";
11+
import tractionImg from "../assets/traction.svg";
12+
import techImg from "../assets/tech.png";
13+
import teaLogoImg from "../assets/tea-3d-logo.png";
1014

1115
function useCountdown(target: Date) {
1216
const [now, setNow] = useState<Date>(() => new Date());
@@ -111,12 +115,35 @@ export default function TeaLandingPage() {
111115
background: "radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.25), transparent 55%), radial-gradient(1200px 600px at 120% 10%, rgba(14,165,233,.25), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))",
112116
}}>
113117
{/* Hero */}
114-
<Container sx={{ pt: { xs: 10, md: 14 }, pb: { xs: 8, md: 12 } }}>
115-
<Stack spacing={4} alignItems="flex-start">
116-
<Chip label="Early Access" color="secondary" variant="outlined" sx={{ fontWeight: 700 }} />
117-
<Typography variant="h2" component="h1" sx={{ fontWeight: 800, letterSpacing: -0.5 }}>
118-
tea is now live on CoinList
119-
</Typography>
118+
<Container sx={{ pt: { xs: 2, md: 2 }, pb: { xs: 8, md: 12 } }}>
119+
<Stack spacing={8} alignItems="flex-center">
120+
<Chip label="Early Access" color="secondary" variant="outlined" sx={{ fontWeight: 700, width: 150 }} />
121+
<Stack spacing={4} alignItems="center">
122+
<img
123+
src={teaLogoImg}
124+
alt="tea"
125+
style={{
126+
height: 'auto',
127+
width: '100%',
128+
maxWidth: '70%',
129+
}}
130+
/>
131+
<Typography
132+
variant="h2"
133+
component="h1"
134+
sx={{
135+
fontWeight: 800,
136+
letterSpacing: -0.5,
137+
fontSize: {
138+
xs: '2rem', // 32px on mobile
139+
sm: '2.5rem', // 40px on small screens
140+
md: '3.75rem' // 60px on medium+ screens (h2 default)
141+
}
142+
}}
143+
>
144+
now available on CoinList
145+
</Typography>
146+
</Stack>
120147
<Typography variant="h6" color="text.secondary" maxWidth={800}>
121148
Be part of the future of open source. PKGX built tea, and now you can join the movement by participating in the official CoinList sale.
122149
</Typography>
@@ -131,15 +158,78 @@ export default function TeaLandingPage() {
131158
</Stack>
132159

133160
<Stack direction="row" spacing={3} divider={<Box sx={{ width: 1, height: 1, opacity: 0 }} />}>
134-
<Typography variant="subtitle1" color="text.secondary">
135-
Sale ends in: {t.days}d {t.hours}h {t.minutes}m {t.seconds}s
136-
</Typography>
161+
<Box sx={{
162+
background: "linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(74, 222, 128, 0.05))",
163+
border: "1px solid rgba(34, 197, 94, 0.2)",
164+
borderRadius: 2,
165+
px: 3,
166+
py: 2,
167+
display: "inline-flex",
168+
alignItems: "center",
169+
gap: 2
170+
}}>
171+
<Typography variant="body2" sx={{
172+
color: "rgb(34, 197, 94)",
173+
fontWeight: 600,
174+
textTransform: "uppercase",
175+
letterSpacing: 0.5,
176+
fontSize: "0.75rem"
177+
}}>
178+
Sale ends in
179+
</Typography>
180+
<Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
181+
{[
182+
{ value: t.days, label: "d" },
183+
{ value: t.hours, label: "h" },
184+
{ value: t.minutes, label: "m" },
185+
{ value: t.seconds, label: "s" }
186+
].map((item, index) => (
187+
<Box key={item.label} sx={{ display: "flex", alignItems: "center" }}>
188+
<Box sx={{
189+
background: "rgba(34, 197, 94, 0.1)",
190+
border: "1px solid rgba(34, 197, 94, 0.3)",
191+
borderRadius: 1,
192+
px: 1.5,
193+
py: 0.5,
194+
minWidth: "40px",
195+
textAlign: "center"
196+
}}>
197+
<Typography variant="body1" sx={{
198+
fontWeight: 700,
199+
color: "rgb(34, 197, 94)",
200+
fontFamily: "monospace",
201+
fontSize: "1rem"
202+
}}>
203+
{item.value.toString().padStart(2, '0')}
204+
</Typography>
205+
</Box>
206+
<Typography variant="caption" sx={{
207+
color: "rgb(34, 197, 94)",
208+
fontWeight: 500,
209+
ml: 0.5,
210+
fontSize: "0.7rem"
211+
}}>
212+
{item.label}
213+
</Typography>
214+
{index < 3 && (
215+
<Typography sx={{
216+
color: "rgba(34, 197, 94, 0.5)",
217+
mx: 0.5,
218+
fontWeight: 600
219+
}}>
220+
:
221+
</Typography>
222+
)}
223+
</Box>
224+
))}
225+
</Box>
226+
</Box>
137227
</Stack>
138228
</Stack>
139229
</Container>
140230

141231
{/* Why tea */}
142-
<Container sx={{ py: { xs: 8, md: 12 } }}>
232+
<Container sx={{ py: { xs: 1, md: 1 } }}>
143233
<Grid container spacing={4}>
144234
<Grid item xs={12} md={6}>
145235
<Typography variant="h4" gutterBottom fontWeight={800}>Why tea?</Typography>
@@ -160,8 +250,11 @@ export default function TeaLandingPage() {
160250
<Typography>Built to scale with the next generation of software and AI</Typography>
161251
</Stack>
162252
</Stack>
253+
<Box sx={{ mt: 3, display: 'flex', justifyContent: 'center' }}>
254+
<img src={techImg} alt="Technology Stack" style={{ maxWidth: '100%', height: 'auto' }} />
255+
</Box>
163256
</Grid>
164-
<Grid item xs={12} md={6}>
257+
<Grid item xs={12} md={6} sx={{ display: 'flex' }}>
165258
<Card sx={{ height: "100%", background: "linear-gradient(180deg, rgba(124,58,237,.12), rgba(14,165,233,.08))", border: "1px solid rgba(255,255,255,.06)" }}>
166259
<CardContent>
167260
<Typography variant="h5" gutterBottom fontWeight={800}>The CoinList Sale: Your Early Access</Typography>
@@ -202,18 +295,26 @@ export default function TeaLandingPage() {
202295
</Grid>
203296
</Container>
204297

298+
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
299+
<img src={tractionImg} alt="Traction" style={{ maxWidth: '60%', height: 'auto' }} />
300+
</Box>
301+
205302
{/* Backed by Builders */}
206-
<Container sx={{ py: { xs: 8, md: 10 } }}>
303+
<Container sx={{ py: { xs: 5, md: 5 }, textAlign: 'center' }}>
207304
<Typography variant="h4" fontWeight={800} gutterBottom>
208305
Backed by Builders & Trusted Platforms
209306
</Typography>
210-
<Typography color="text.secondary" paragraph maxWidth={900}>
307+
<Typography color="text.secondary" paragraph maxWidth={700} textAlign="start" sx={{ mx: 'auto' }}>
211308
tea was built by <strong>PKGX</strong>, trusted across the developer ecosystem. The tea association ensures transparent, community-driven governance. With <strong>CoinList</strong>, you're participating through one of the most secure, compliant token sale platforms in crypto.
212309
</Typography>
310+
311+
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'center' }}>
312+
<img src={partnersImg} alt="Partners" style={{ maxWidth: '80%', height: 'auto' }} />
313+
</Box>
213314
</Container>
214315

215316
{/* Don't Miss Out */}
216-
<Container id="signup" sx={{ py: { xs: 8, md: 12 } }}>
317+
<Container id="signup" sx={{ py: { xs: 3, md: 3 } }}>
217318
<Grid container spacing={4} alignItems="center">
218319
<Grid item xs={12} md={7}>
219320
<Typography variant="h4" fontWeight={800} gutterBottom>
@@ -222,9 +323,73 @@ export default function TeaLandingPage() {
222323
<Typography color="text.secondary" paragraph>
223324
This is your chance to support the future of open source — and to be early.
224325
</Typography>
225-
<Typography variant="subtitle1" sx={{ mt: 1 }}>
226-
Sale ends in: {t.days}d {t.hours}h {t.minutes}m {t.seconds}s
227-
</Typography>
326+
<Box sx={{
327+
background: "linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(74, 222, 128, 0.05))",
328+
border: "1px solid rgba(34, 197, 94, 0.2)",
329+
borderRadius: 2,
330+
px: 3,
331+
py: 2,
332+
display: "inline-flex",
333+
alignItems: "center",
334+
gap: 2,
335+
mt: 2
336+
}}>
337+
<Typography variant="body2" sx={{
338+
color: "rgb(34, 197, 94)",
339+
fontWeight: 600,
340+
textTransform: "uppercase",
341+
letterSpacing: 0.5,
342+
fontSize: "0.75rem"
343+
}}>
344+
Sale ends in
345+
</Typography>
346+
<Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
347+
{[
348+
{ value: t.days, label: "d" },
349+
{ value: t.hours, label: "h" },
350+
{ value: t.minutes, label: "m" },
351+
{ value: t.seconds, label: "s" }
352+
].map((item, index) => (
353+
<Box key={item.label} sx={{ display: "flex", alignItems: "center" }}>
354+
<Box sx={{
355+
background: "rgba(34, 197, 94, 0.1)",
356+
border: "1px solid rgba(34, 197, 94, 0.3)",
357+
borderRadius: 1,
358+
px: 1.5,
359+
py: 0.5,
360+
minWidth: "40px",
361+
textAlign: "center"
362+
}}>
363+
<Typography variant="body1" sx={{
364+
fontWeight: 700,
365+
color: "rgb(34, 197, 94)",
366+
fontFamily: "monospace",
367+
fontSize: "1rem"
368+
}}>
369+
{item.value.toString().padStart(2, '0')}
370+
</Typography>
371+
</Box>
372+
<Typography variant="caption" sx={{
373+
color: "rgb(34, 197, 94)",
374+
fontWeight: 500,
375+
ml: 0.5,
376+
fontSize: "0.7rem"
377+
}}>
378+
{item.label}
379+
</Typography>
380+
{index < 3 && (
381+
<Typography sx={{
382+
color: "rgba(34, 197, 94, 0.5)",
383+
mx: 0.5,
384+
fontWeight: 600
385+
}}>
386+
:
387+
</Typography>
388+
)}
389+
</Box>
390+
))}
391+
</Box>
392+
</Box>
228393
<Button sx={{ mt: 2 }} variant="text" color="primary" endIcon={<LaunchIcon />} href="https://coinlist.co" target="_blank" rel="noreferrer noopener">
229394
Join the CoinList Sale Now
230395
</Button>
@@ -343,19 +508,6 @@ export default function TeaLandingPage() {
343508
</Grid>
344509
</Grid>
345510
</Container>
346-
347-
{/* Footer */}
348-
<Box sx={{ py: 6, borderTop: "1px solid rgba(255,255,255,.06)" }}>
349-
<Container>
350-
<Stack direction={{ xs: "column", sm: "row" }} spacing={2} alignItems={{ xs: "flex-start", sm: "center" }} justifyContent="space-between">
351-
<Typography color="text.secondary">© {new Date().getFullYear()} tea — All rights reserved.</Typography>
352-
<Stack direction="row" spacing={2}>
353-
<Button size="small" color="inherit" href="#">Terms</Button>
354-
<Button size="small" color="inherit" href="#">Privacy</Button>
355-
</Stack>
356-
</Stack>
357-
</Container>
358-
</Box>
359511
</Box>
360512
</>
361513
);

0 commit comments

Comments
 (0)