Skip to content

Commit 69eb911

Browse files
matheuspsmatheusps
committed
feat(docs): add landing page
1 parent e5eb0d9 commit 69eb911

9 files changed

+122
-31
lines changed

‎packages/next-docs/pages/_meta.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
{
22
"index": {
33
"title": "Home",
4-
"type": "page"
4+
"type": "page",
5+
"theme": {
6+
"layout": "full"
7+
}
58
},
69
"components": {
710
"title": "Components",

‎packages/next-docs/pages/index.mdx

+43-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,46 @@
1-
# Introduction
1+
---
2+
title: Shoreline - VTEX Desing System
3+
---
24

3-
Welcome to Shoreline!
5+
import { heroContainer, hero, subtitle, features, feature } from './index.module.css'
46

5-
## What is Shoreline?
7+
<div className={heroContainer}>
8+
<section className={hero}>
9+
<img src='assets/landing-shoreline-logo.png' alt="shoreline logo" />
10+
<div>
11+
<h2>Build great experiences for merchants in the VTEX Admin.</h2>
12+
<p className={subtitle}>Shoreline is a design system tailored for enhancing back-office experiences. The system provide design and coding tools and resources for an optimized development experience.</p>
13+
</div>
14+
</section>
15+
</div>
616

7-
Shoreline is the VTEX Design System for backoffice experiences.
17+
<section className={features}>
18+
<div className={feature}>
19+
<img src='assets/landing-foundations.png' alt="feature foundations" />
20+
<div>
21+
<h3>Foundations</h3>
22+
<p className={subtitle}>Fundamental design guidance for creating quality admin experiences</p>
23+
</div>
24+
</div>
25+
<div className={feature}>
26+
<img src='assets/landing-components.png' alt="feature components" />
27+
<div>
28+
<h3>Components</h3>
29+
<p className={subtitle}>Reusable elements and styles, packaged through code, for building admin interfaces</p>
30+
</div>
31+
</div>
32+
<div className={feature}>
33+
<img src='assets/landing-raccoon.png' alt="feature raccoon" />
34+
<div>
35+
<h3>Raccoon</h3>
36+
<p className={subtitle}>Coded names that represent design decisions for color, spacing, typography, and more</p>
37+
</div>
38+
</div>
39+
<div className={feature}>
40+
<img src='assets/landing-code.png' alt="feature api" />
41+
<div>
42+
<h3>API Reference</h3>
43+
<p className={subtitle}>Over 400 carefully designed icons focused on commerce and entrepreneurship</p>
44+
</div>
45+
</div>
46+
</section>

‎packages/next-docs/pages/index.module.css

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.heroContainer {
2+
container: hero / inline-size;
3+
width: 100%;
4+
}
5+
6+
.hero {
7+
display: grid;
8+
grid-template-columns: 1fr 1fr;
9+
gap: 15cqi;
10+
padding: 4.625rem 2.125rem;
11+
width: 100%;
12+
}
13+
14+
.hero h2 {
15+
font-size: clamp(2.75rem, 7cqi, 3.75rem);
16+
font-family: Inter;
17+
font-style: normal;
18+
font-weight: 600;
19+
line-height: 4.25rem;
20+
letter-spacing: -0.15rem;
21+
padding-bottom: 1.5rem;
22+
}
23+
24+
@container (max-width: 40rem) {
25+
.hero {
26+
grid-template-columns: 1fr;
27+
}
28+
}
29+
30+
.subtitle {
31+
font-family: Inter;
32+
font-size: 1rem;
33+
font-style: normal;
34+
font-weight: 400;
35+
line-height: 1.5rem; /* 150% */
36+
letter-spacing: -0.02rem;
37+
opacity: 0.8;
38+
}
39+
40+
.title {
41+
font-family: Inter;
42+
font-size: 1.75rem;
43+
font-style: normal;
44+
font-weight: 600;
45+
line-height: 2.25rem;
46+
letter-spacing: -0.07rem;
47+
}
48+
49+
.features {
50+
display: grid;
51+
grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
52+
gap: 1.25rem;
53+
}
54+
55+
.feature {
56+
display: flex;
57+
flex-direction: column;
58+
gap: 1.75rem;
59+
}
60+
61+
.feature h3 {
62+
padding-bottom: 0.625rem;
63+
}

‎packages/next-docs/public/assets/landing-code.png

50.3 KB
Loading

‎packages/next-docs/public/assets/landing-components.png

26.8 KB
Loading

‎packages/next-docs/public/assets/landing-foundations.png

79.5 KB
Loading

‎packages/next-docs/public/assets/landing-raccoon.png

72.5 KB
Loading

‎packages/next-docs/public/assets/landing-shoreline-logo.png

214 KB
Loading

‎packages/next-docs/theme.config.tsx

+12-26
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,23 @@ import { TokensGrid } from './components/tokens-grid'
55
import { IconsGrid } from './components/icons-grid'
66

77
const containerStyle = {
8-
display: 'flex',
9-
alignItems: 'center',
10-
gap: '0.2rem',
8+
fontWeight: 'bold',
9+
fontSize: '2rem',
10+
fontFamily: 'Inter',
1111
}
1212

1313
const config: DocsThemeConfig = {
1414
logo: (
15-
<div style={containerStyle}>
16-
<svg
17-
width="32"
18-
height="32"
19-
fill="none"
20-
xmlns="http://www.w3.org/2000/svg"
15+
<span style={containerStyle}>
16+
<span
17+
style={{
18+
fontSize: '2.5rem',
19+
}}
2120
>
22-
<rect
23-
x="-.5"
24-
y=".5"
25-
width="31"
26-
height="31"
27-
rx="5.5"
28-
transform="matrix(-1 0 0 1 31 0)"
29-
fill="#1F1F1F"
30-
stroke="#fff"
31-
/>
32-
<path
33-
d="M30.713 14.59a.5.5 0 1 1 .574.82l-.574-.82ZM1.287 18.41l-.41.286-.573-.819.41-.287.573.82Zm30-3c-.142.099-.378.317-.714.634-.322.302-.71.67-1.123 1.023a9.431 9.431 0 0 1-1.31.966c-.44.258-.936.467-1.426.467v-1c.225 0 .533-.103.92-.33.375-.22.774-.527 1.166-.862.391-.335.761-.686 1.087-.992.31-.293.61-.575.826-.726l.574.82Zm-4.573 3.09c-.528 0-.996-.273-1.38-.576-.391-.308-.774-.711-1.125-1.08-.363-.381-.695-.728-1.018-.982-.33-.26-.576-.362-.762-.362v-1c.528 0 .996.274 1.38.576.391.308.774.711 1.124 1.08.364.381.696.728 1.02.982.33.26.575.362.761.362v1Zm-4.285-3c-.186 0-.432.101-.762.362-.324.254-.655.601-1.02.983-.35.368-.733.771-1.123 1.08-.384.302-.853.575-1.381.575v-1c.186 0 .432-.102.762-.362.323-.254.655-.601 1.019-.983.35-.368.733-.771 1.124-1.08.384-.301.852-.575 1.38-.575v1Zm-4.286 3c-.528 0-.997-.273-1.38-.576-.392-.308-.775-.711-1.125-1.08-.364-.381-.695-.728-1.019-.982-.33-.26-.576-.362-.762-.362v-1c.528 0 .997.274 1.38.576.392.308.775.711 1.125 1.08.364.381.695.728 1.019.982.33.26.576.362.762.362v1Zm-4.286-3c-.186 0-.432.101-.762.362-.324.254-.655.601-1.019.983-.35.368-.733.771-1.124 1.08-.384.302-.852.575-1.38.575v-1c.186 0 .431-.102.762-.362.323-.254.655-.601 1.018-.983.35-.368.734-.771 1.124-1.08.384-.301.853-.575 1.381-.575v1Zm-4.286 3c-.528 0-.996-.273-1.38-.576-.391-.308-.774-.711-1.125-1.08-.363-.381-.695-.728-1.018-.982-.33-.26-.576-.362-.762-.362v-1c.528 0 .996.274 1.38.576.391.308.774.711 1.125 1.08.363.381.695.728 1.018.982.33.26.576.362.762.362v1Zm-4.285-3c-.225 0-.533.103-.92.33-.375.22-.774.527-1.166.862-.391.335-.761.686-1.087.992-.31.293-.61.575-.826.726l-.574-.82c.142-.099.378-.317.714-.634.322-.302.71-.67 1.123-1.023a9.435 9.435 0 0 1 1.31-.966c.44-.258.936-.467 1.426-.467v1Z"
34-
fill="#fff"
35-
/>
36-
</svg>
37-
<span>Shoreline</span>
38-
</div>
21+
≈
22+
</span>
23+
Shoreline
24+
</span>
3925
),
4026
project: {
4127
link: 'https://github.com/vtex/shoreline',

0 commit comments

Comments
 (0)