Skip to content

Commit d85dfe9

Browse files
author
Jordan Violet
committed
minimal demo homepage, quick logo and sidebar configs
1 parent 273b13b commit d85dfe9

File tree

12 files changed

+485
-433
lines changed

12 files changed

+485
-433
lines changed

‎docs/tutorial-basics/markdown-features.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,18 +43,18 @@ Let's see how to [Create a page](./create-a-page.md).
4343

4444
Regular Markdown images are supported.
4545

46-
You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
46+
You can use absolute paths to reference images in the static directory:
4747

4848
```md
49-
![Docusaurus logo](/img/docusaurus.png)
49+
![Netwrix Logo](/img/Logo_RGB.svg)
5050
```
5151

52-
![Docusaurus logo](/img/docusaurus.png)
52+
![Netwrix Logo](/img/Logo_RGB.svg)
5353

5454
You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
5555

5656
```md
57-
![Docusaurus logo](./img/docusaurus.png)
57+
![Product Logo](./img/product-logo.png)
5858
```
5959

6060
## Code Blocks

‎docusaurus.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const config = {
5959
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
6060
({
6161
// Replace with your project's social card
62-
image: 'img/docusaurus-social-card.jpg',
62+
image: 'img/Logo_RGB.svg',
6363
navbar: {
6464
title: 'Documentation',
6565
logo: {
@@ -126,6 +126,9 @@ const config = {
126126
darkTheme: prismThemes.dracula,
127127
},
128128
}),
129+
stylesheets: [
130+
'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap',
131+
],
129132
};
130133

131134
export default config;

‎src/css/custom.css‎

Lines changed: 229 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,240 @@
66

77
/* You can override the default Infima variables here. */
88
:root {
9-
--ifm-color-primary: #2e8555;
10-
--ifm-color-primary-dark: #29784c;
11-
--ifm-color-primary-darker: #277148;
12-
--ifm-color-primary-darkest: #205d3b;
13-
--ifm-color-primary-light: #33925d;
14-
--ifm-color-primary-lighter: #359962;
15-
--ifm-color-primary-lightest: #3cad6e;
9+
--ifm-color-primary: #0256b4; /* Netwrix blue */
10+
--ifm-color-primary-dark: #024da2;
11+
--ifm-color-primary-darker: #024899;
12+
--ifm-color-primary-darkest: #023b7e;
13+
--ifm-color-primary-light: #025fc6;
14+
--ifm-color-primary-lighter: #0263cf;
15+
--ifm-color-primary-lightest: #0270ea;
1616
--ifm-code-font-size: 95%;
17+
--ifm-font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
18+
--ifm-heading-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
19+
--ifm-navbar-height: 5rem;
20+
--ifm-navbar-padding-vertical: 1.25rem;
1721
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
22+
--network-card-border-radius: 8px;
23+
--netwrix-secondary: #f1594e; /* Netwrix red accent */
24+
--netwrix-tertiary: #05d5a3; /* Teal accent for call to actions */
25+
--netwrix-text-gray: #677788;
26+
--netwrix-bg-light: #f9fbfd;
27+
--netwrix-gradient-start: #0256b4;
28+
--netwrix-gradient-end: #0270ea;
1829
}
1930

2031
/* For readability concerns, you should choose a lighter palette in dark mode. */
2132
[data-theme='dark'] {
22-
--ifm-color-primary: #25c2a0;
23-
--ifm-color-primary-dark: #21af90;
24-
--ifm-color-primary-darker: #1fa588;
25-
--ifm-color-primary-darkest: #1a8870;
26-
--ifm-color-primary-light: #29d5b0;
27-
--ifm-color-primary-lighter: #32d8b4;
28-
--ifm-color-primary-lightest: #4fddbf;
33+
--ifm-color-primary: #3b89dc;
34+
--ifm-color-primary-dark: #247ad7;
35+
--ifm-color-primary-darker: #2073cb;
36+
--ifm-color-primary-darkest: #1b5fa7;
37+
--ifm-color-primary-light: #5298e1;
38+
--ifm-color-primary-lighter: #5e9fe3;
39+
--ifm-color-primary-lightest: #82b6ea;
2940
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
41+
--netwrix-bg-light: #1c1e21;
42+
--netwrix-text-gray: #a0a0a0;
43+
}
44+
45+
/* Modern styles for the homepage */
46+
.homepage-header {
47+
padding: 6rem 0;
48+
text-align: center;
49+
position: relative;
50+
overflow: hidden;
51+
background: linear-gradient(135deg, var(--netwrix-gradient-start), var(--netwrix-gradient-end));
52+
color: white;
53+
}
54+
55+
.homepage-header h1 {
56+
font-size: 3.5rem;
57+
font-weight: 800;
58+
margin-bottom: 1rem;
59+
line-height: 1.2;
60+
}
61+
62+
.homepage-header p {
63+
font-size: 1.5rem;
64+
margin-bottom: 2rem;
65+
font-weight: 400;
66+
max-width: 800px;
67+
margin-left: auto;
68+
margin-right: auto;
69+
}
70+
71+
.homepage-cta {
72+
display: inline-block;
73+
padding: 0.75rem 1.5rem;
74+
font-size: 1.1rem;
75+
font-weight: 600;
76+
border-radius: 50px;
77+
background: white;
78+
color: var(--ifm-color-primary);
79+
text-decoration: none;
80+
transition: all 0.3s ease;
81+
margin: 0 0.5rem 1rem;
82+
}
83+
84+
.homepage-cta:hover {
85+
transform: translateY(-3px);
86+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
87+
text-decoration: none;
88+
}
89+
90+
.homepage-cta.cta-primary {
91+
background: var(--netwrix-tertiary);
92+
color: white;
93+
}
94+
95+
.product-card {
96+
border-radius: var(--network-card-border-radius);
97+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
98+
padding: 2rem;
99+
height: 100%;
100+
transition: all 0.3s ease;
101+
display: flex;
102+
flex-direction: column;
103+
align-items: center;
104+
text-align: center;
105+
background: white;
106+
}
107+
108+
.product-card:hover {
109+
transform: translateY(-5px);
110+
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
111+
}
112+
113+
[data-theme='dark'] .product-card {
114+
background: var(--ifm-card-background-color);
115+
}
116+
117+
.product-card img {
118+
width: 80px;
119+
height: 80px;
120+
margin-bottom: 1.5rem;
121+
}
122+
123+
.product-card h3 {
124+
font-size: 1.5rem;
125+
font-weight: 700;
126+
margin-bottom: 1rem;
127+
}
128+
129+
.product-card p {
130+
color: var(--netwrix-text-gray);
131+
flex: 1;
132+
margin-bottom: 1.5rem;
133+
}
134+
135+
.section-title {
136+
font-size: 2.5rem;
137+
font-weight: 800;
138+
margin-bottom: 1.5rem;
139+
text-align: center;
140+
}
141+
142+
.section-subtitle {
143+
font-size: 1.25rem;
144+
max-width: 800px;
145+
margin: 0 auto 3rem;
146+
text-align: center;
147+
color: var(--netwrix-text-gray);
148+
}
149+
150+
.section {
151+
padding: 5rem 0;
152+
}
153+
154+
.section.section-alternate {
155+
background-color: var(--netwrix-bg-light);
156+
}
157+
158+
.features-container {
159+
display: flex;
160+
flex-wrap: wrap;
161+
justify-content: space-between;
162+
gap: 2rem;
163+
}
164+
165+
.feature-item {
166+
flex: 1;
167+
min-width: 300px;
168+
display: flex;
169+
align-items: flex-start;
170+
margin-bottom: 2rem;
171+
}
172+
173+
.feature-icon {
174+
width: 48px;
175+
height: 48px;
176+
margin-right: 1rem;
177+
color: var(--ifm-color-primary);
178+
font-size: 2rem;
179+
display: flex;
180+
align-items: center;
181+
justify-content: center;
182+
}
183+
184+
.feature-text h3 {
185+
font-size: 1.25rem;
186+
font-weight: 700;
187+
margin-bottom: 0.5rem;
188+
}
189+
190+
.feature-text p {
191+
color: var(--netwrix-text-gray);
192+
margin: 0;
193+
}
194+
195+
.testimonials {
196+
position: relative;
197+
padding: 5rem 0;
198+
background: linear-gradient(135deg, var(--netwrix-gradient-start), var(--netwrix-gradient-end));
199+
color: white;
200+
}
201+
202+
.testimonial-card {
203+
background: rgba(255, 255, 255, 0.1);
204+
backdrop-filter: blur(10px);
205+
border-radius: var(--network-card-border-radius);
206+
padding: 2rem;
207+
margin-bottom: 2rem;
208+
}
209+
210+
.testimonial-text {
211+
font-style: italic;
212+
font-size: 1.1rem;
213+
margin-bottom: 1rem;
214+
}
215+
216+
.testimonial-author {
217+
font-weight: 600;
218+
}
219+
220+
.stat-number {
221+
font-size: 3rem;
222+
font-weight: 800;
223+
margin-bottom: 0.5rem;
224+
color: var(--ifm-color-primary);
225+
}
226+
227+
.stat-label {
228+
font-size: 1.1rem;
229+
color: var(--netwrix-text-gray);
230+
}
231+
232+
/* Make the homepage responsive */
233+
@media screen and (max-width: 996px) {
234+
.homepage-header h1 {
235+
font-size: 2.5rem;
236+
}
237+
238+
.homepage-header p {
239+
font-size: 1.2rem;
240+
}
241+
242+
.section-title {
243+
font-size: 2rem;
244+
}
30245
}

0 commit comments

Comments
 (0)