Skip to content

Commit 42c7220

Browse files
committed
feat: ✨ improve landing links
1 parent 577620e commit 42c7220

File tree

5 files changed

+126
-11
lines changed

5 files changed

+126
-11
lines changed
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
export function Angular() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
fill="none"
6+
viewBox="0 0 223 236"
7+
width="32"
8+
>
9+
<g clip-path="url(#a)">
10+
<path
11+
fill="url(#b)"
12+
d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
13+
></path>
14+
<path
15+
fill="url(#c)"
16+
d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
17+
></path>
18+
</g>
19+
<defs>
20+
<linearGradient
21+
id="b"
22+
x1="49.009"
23+
x2="225.829"
24+
y1="213.75"
25+
y2="129.722"
26+
gradientUnits="userSpaceOnUse"
27+
>
28+
<stop stop-color="#E40035"></stop>
29+
<stop offset=".24" stop-color="#F60A48"></stop>
30+
<stop offset=".352" stop-color="#F20755"></stop>
31+
<stop offset=".494" stop-color="#DC087D"></stop>
32+
<stop offset=".745" stop-color="#9717E7"></stop>
33+
<stop offset="1" stop-color="#6C00F5"></stop>
34+
</linearGradient>
35+
<linearGradient
36+
id="c"
37+
x1="41.025"
38+
x2="156.741"
39+
y1="28.344"
40+
y2="160.344"
41+
gradientUnits="userSpaceOnUse"
42+
>
43+
<stop stop-color="#FF31D9"></stop>
44+
<stop offset="1" stop-color="#FF5BE1" stop-opacity="0"></stop>
45+
</linearGradient>
46+
<clipPath id="a">
47+
<path fill="#fff" d="M0 0h223v236H0z"></path>
48+
</clipPath>
49+
</defs>
50+
</svg>
51+
);
52+
}
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function Nx() {
2+
return (
3+
<svg
4+
role="img"
5+
aria-label="Nx"
6+
viewBox="0 0 24 24"
7+
xmlns="http://www.w3.org/2000/svg"
8+
fill="#012f55"
9+
width="32"
10+
>
11+
<title>Nx</title>
12+
<path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z"></path>
13+
</svg>
14+
);
15+
}

apps/cookbook/src/css/custom.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
/* You can override the default Infima variables here. */
88
:root {
99
--marmicode-primary: #380030;
10+
--ifm-button-color: var(--marmicode-primary);
1011
--ifm-color-primary: #990a84;
1112
--ifm-color-primary-dark: #59004d;
1213
--ifm-color-primary-darker: #49003f;

apps/cookbook/src/pages/index.module.css

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,22 @@
4747
}
4848

4949
.buttons {
50+
display: flex;
51+
flex-direction: column;
52+
gap: 1rem;
53+
margin: 2rem auto;
54+
width: 250px;
55+
}
56+
57+
.link {
5058
display: flex;
5159
align-items: center;
52-
flex-direction: row;
53-
justify-content: center;
54-
margin: 2rem 0;
60+
height: 50px;
61+
padding: 5px 30px;
62+
gap: 1rem;
63+
}
64+
65+
.link p {
66+
color: var(--marmicode-primary);
67+
margin: 0;
5568
}

apps/cookbook/src/pages/index.tsx

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@ import Layout from '@theme/Layout';
55

66
import styles from './index.module.css';
77
import clsx from 'clsx';
8+
import { Angular } from '../components/logos/angular';
9+
import { Nx } from '../components/logos/nx';
810

911
export default function Home(): JSX.Element {
1012
const { siteConfig } = useDocusaurusContext();
1113
return (
1214
<Layout
13-
title={`Hello from ${siteConfig.title}`}
14-
description="Description will go into a meta tag in <head />"
15+
title={siteConfig.tagline}
16+
description={
17+
'Ingredients & Recipes for Cooking Delicious Apps with Angular & Nx'
18+
}
1519
>
1620
<HomepageHeader />
1721
</Layout>
@@ -35,14 +39,44 @@ function HomepageHeader() {
3539
</p>
3640
<p className={styles.heroTagline}>{siteConfig.tagline}</p>
3741
<div className={styles.buttons}>
38-
<Link className="button button--lg" to="/angular/testing">
39-
Angular Testing
40-
</Link>
41-
<Link className="button button--lg" to="/nx/intro">
42-
Nx
43-
</Link>
42+
<Links />
4443
</div>
4544
</div>
4645
</header>
4746
);
4847
}
48+
49+
function Links() {
50+
return (
51+
<>
52+
{[
53+
{
54+
href: '/angular/why-vitest',
55+
content: (
56+
<>
57+
<Angular />
58+
<p>Angular Testing</p>
59+
</>
60+
),
61+
},
62+
{
63+
href: '/nx/intro',
64+
content: (
65+
<>
66+
<Nx />
67+
<p>Nx Cookbook</p>
68+
</>
69+
),
70+
},
71+
].map(({ href, content }) => (
72+
<Link
73+
className={clsx('button button--secondary button--lg', styles.link)}
74+
key={href}
75+
to={href}
76+
>
77+
{content}
78+
</Link>
79+
))}
80+
</>
81+
);
82+
}

0 commit comments

Comments
 (0)