Skip to content

Commit 82c50d5

Browse files
jakehemmerlejakehemmerle
authored
Merge pull request AstarNetwork#17 from AstarNetwork/main
main -> prod
2 parents 6e74ed8 + fb8debb commit 82c50d5

File tree

10 files changed

+233
-28
lines changed

10 files changed

+233
-28
lines changed

‎docs/quickstart/demo.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
sidebar_position: 6
3+
---
4+
5+
# Demo page
6+
7+
yay!

‎src/components/HomepageFeatures/index.tsx

+64-28
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,104 @@
11
import React from 'react';
2-
import clsx from 'clsx';
3-
import styles from './styles.module.css';
2+
import '../../css/homepage-features.css';
3+
import Link from '@docusaurus/Link';
44

55
type FeatureItem = {
66
title: string;
7+
link: string;
78
Svg: React.ComponentType<React.ComponentProps<'svg'>>;
89
description: JSX.Element;
910
};
1011

1112
const FeatureList: FeatureItem[] = [
1213
{
13-
title: 'Wasm + EVM',
14-
Svg: require('@site/static/img/wasm-evm.svg').default,
14+
title: 'Start Building',
15+
link: '/docs/quickstart/',
16+
Svg: require('@site/static/img/wrench.svg').default,
1517
description: (
1618
<>
17-
Focus on developing your dapps, and well handle the rest. Astar built with Substrate, a blazing fast and modular blockchain framework
18-
built by Parity and written in Rust.
19+
This section gives you the resources you need to get started testing,
20+
deploying, and interacting with smart contracts on the network.
1921
</>
2022
),
2123
},
2224
{
23-
title: 'Multi-Chain',
24-
Svg: require('@site/static/img/multichain.svg').default,
25+
title: 'Use EVM',
26+
link: '/docs/EVM/',
27+
Svg: require('@site/static/img/evm.svg').default,
2528
description: (
2629
<>
27-
Astar is a Polkadot parachain, providing access to an advanced cross-chain protocol called XCMP.
30+
Dive deeper into EVM on Astar and explains how EVM contracts can
31+
interact with other non-EVM modules through precompiles.
2832
</>
2933
),
3034
},
3135
{
32-
title: 'Simplicity',
33-
Svg: require('@site/static/img/simple.svg').default,
36+
title: 'Use WebAssembly',
37+
link: '/docs/wasm/',
38+
Svg: require('@site/static/img/wasm.svg').default,
3439
description: (
3540
<>
36-
Astar was designed from the ground up to make it simple for developers to deploy
37-
their dapps and interact with other chains.
41+
Provide an overview of ink! and ask! WASM contract frameworks, examples
42+
for each framework,developer tooling and compiling Solidity to WASM.
43+
</>
44+
),
45+
},
46+
{
47+
title: 'Run A Node',
48+
link: '/docs/nodes/',
49+
Svg: require('@site/static/img/node.svg').default,
50+
description: (
51+
<>
52+
Explain how to run full nodes, collators, indexers, and everything you
53+
need to know related to infrastructure.
54+
</>
55+
),
56+
},
57+
{
58+
title: 'Learn Cross Chain Message (XCM)',
59+
link: '/docs/xcm/',
60+
Svg: require('@site/static/img/broadcast.svg').default,
61+
description: (
62+
<>
63+
Explain how XCM is used in Astar and how developers can use it to
64+
interact with the rest of the Polkadot network.
65+
</>
66+
),
67+
},
68+
{
69+
title: 'Integrate Toolings',
70+
link: '/docs/integrations/',
71+
Svg: require('@site/static/img/tool.svg').default,
72+
description: (
73+
<>
74+
Provide relevant information about the wallets, bridges, indexers, and
75+
oracles that are integrated with the network.
3876
</>
3977
),
4078
},
4179
];
4280

43-
function Feature({title, Svg, description}: FeatureItem) {
81+
function Feature({ title, Svg, description, link }: FeatureItem) {
4482
return (
45-
<div className={clsx('col col--4')}>
46-
<div className="text--center">
47-
<Svg className={styles.featureSvg} role="img" />
83+
<Link to={link} className="box">
84+
<div className="row--title">
85+
<Svg className="icon" role="img" />
86+
<span className="text--title">{title}</span>
4887
</div>
49-
<div className="text--center padding-horiz--md">
50-
<h3>{title}</h3>
51-
<p>{description}</p>
88+
<div className="row--description">
89+
<span className="text--description">{description}</span>
5290
</div>
53-
</div>
91+
</Link>
5492
);
5593
}
5694

5795
export default function HomepageFeatures(): JSX.Element {
5896
return (
59-
<section className={styles.features}>
60-
<div className="container">
61-
<div className="row">
62-
{FeatureList.map((props, idx) => (
63-
<Feature key={idx} {...props} />
64-
))}
65-
</div>
97+
<section className="section--front-page">
98+
<div className="container--front-page">
99+
{FeatureList.map((props, idx) => (
100+
<Feature key={idx} {...props} />
101+
))}
66102
</div>
67103
</section>
68104
);

‎src/css/custom.css

+4
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
--ifm-color-primary-lighter: #5ecbec;
1515
--ifm-color-primary-lightest: #64d7fb;
1616
--ifm-code-font-size: 95%;
17+
--box-background: #ffffff;
18+
--text-color-description: #001f40;
1719
}
1820

1921
/* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -25,6 +27,8 @@
2527
--ifm-color-primary-light: #4daac6;
2628
--ifm-color-primary-lighter: #5ecbec;
2729
--ifm-color-primary-lightest: #64d7fb;
30+
--box-background: #1b1e21;
31+
--text-color-description: #ffff;
2832
}
2933

3034
.docusaurus-highlight-code-line {

‎src/css/homepage-features.css

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.section--front-page {
2+
width: 100%;
3+
padding: 54px 0;
4+
}
5+
6+
.container--front-page {
7+
display: grid;
8+
grid-template-columns: auto;
9+
justify-content: center;
10+
row-gap: 54px;
11+
}
12+
13+
@media screen and (min-width: 1024px) {
14+
.container--front-page {
15+
grid-template-columns: auto auto;
16+
column-gap: 42px;
17+
}
18+
}
19+
20+
@media screen and (min-width: 1420px) {
21+
.container--front-page {
22+
grid-template-columns: auto auto auto;
23+
column-gap: 50px;
24+
}
25+
}
26+
27+
.box {
28+
width: 340px;
29+
height: 186px;
30+
background-color: var(--box-background);
31+
padding: 14px 24px;
32+
filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.1));
33+
border-radius: 8px;
34+
}
35+
36+
.box:hover {
37+
text-decoration: none;
38+
}
39+
40+
@media screen and (min-width: 768px) {
41+
.box {
42+
width: 100%;
43+
max-width: 480px;
44+
padding: 20px 38px;
45+
}
46+
}
47+
@media screen and (min-width: 1024px) {
48+
.box {
49+
max-width: 460px;
50+
}
51+
}
52+
53+
@media screen and (min-width: 1420px) {
54+
.box {
55+
width: 420px;
56+
}
57+
}
58+
59+
.icon {
60+
width: 38px;
61+
height: 38px;
62+
}
63+
64+
.row--title {
65+
display: flex;
66+
align-items: center;
67+
column-gap: 14px;
68+
margin-bottom: 22px;
69+
}
70+
71+
.text--title {
72+
color: #0297fb;
73+
font-size: 16px;
74+
font-weight: 800;
75+
}
76+
77+
.row--description {
78+
line-height: 18px;
79+
}
80+
81+
.text--description {
82+
color: var(--text-color-description);
83+
font-size: 14px;
84+
font-weight: 500;
85+
}

‎static/img/broadcast.svg

+17
Loading

‎static/img/evm.svg

+8
Loading

‎static/img/node.svg

+15
Loading

‎static/img/tool.svg

+12
Loading

‎static/img/wasm.svg

+11
Loading

‎static/img/wrench.svg

+10
Loading

0 commit comments

Comments
 (0)