Skip to content

Commit 2ae8dde

Browse files
yashovardhanyashovardhan
committed
Update QS
1 parent fbdb4e4 commit 2ae8dde

File tree

18 files changed

+3470
-1821
lines changed

18 files changed

+3470
-1821
lines changed

‎docusaurus.config.js

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ const {
1212
MM_RPC_URL,
1313
} = require('./src/plugins/plugin-json-rpc')
1414
const codeTheme = themes.dracula
15-
const learnDropdown = fs.readFileSync('./src/components/NavDropdown/Learn.html', 'utf-8')
1615
const productsDropdown = fs.readFileSync(
1716
'./src/components/NavDropdown/Products.html',
1817
'utf-8'
@@ -368,16 +367,6 @@ const config = {
368367
},
369368
],
370369
},
371-
{
372-
type: 'dropdown',
373-
label: 'Learn',
374-
items: [
375-
{
376-
type: 'html',
377-
value: learnDropdown,
378-
},
379-
],
380-
},
381370
{
382371
label: 'Quick Start',
383372
to: '/quickstart',

‎src/components/NavDropdown/Learn.html

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/pages/index.tsx

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function Home(): JSX.Element {
1414
title={siteConfig.title}
1515
description="Build with the world's leading self-custodial crypto wallet."
1616
button={{
17-
label: 'Quick Start',
17+
label: 'Get Started',
1818
href: '/quickstart',
1919
icon: 'arrow-right',
2020
}}
@@ -26,21 +26,21 @@ export default function Home(): JSX.Element {
2626
colorPalette="purple"
2727
cards={[
2828
{
29-
title: 'Features',
30-
description: 'Explore MetaMask features and capabilities for developers.',
31-
href: '/features/',
29+
title: 'Guides',
30+
description: 'Step-by-step guides to help you build with MetaMask.',
31+
href: '/guides/',
3232
buttonIcon: 'arrow-right',
3333
},
3434
{
35-
title: 'Tutorials',
36-
description: 'Step-by-step guides to help you build with MetaMask.',
37-
href: '/tutorials/',
35+
title: 'Quick Start',
36+
description: 'Get up and running quickly with our quickstart guides.',
37+
href: '/quickstart',
3838
buttonIcon: 'arrow-right',
3939
},
4040
{
41-
title: 'Quickstart',
42-
description: 'Get up and running quickly with our quickstart guides.',
43-
href: '/quick-start',
41+
title: 'Faucet',
42+
description: 'Access testnet tokens for development and testing purposes.',
43+
href: '/developer-tools/faucet/',
4444
buttonIcon: 'arrow-right',
4545
},
4646
]}
@@ -60,7 +60,7 @@ export default function Home(): JSX.Element {
6060
{
6161
title: 'Create embedded wallets',
6262
description: 'Onboard power users and first-time users in seconds via social logins, passkeys, or by integrating your own authentication providers.',
63-
href: '/sdk',
63+
href: '/embedded-wallets',
6464
buttonIcon: 'arrow-right',
6565
},
6666
{
@@ -81,12 +81,6 @@ export default function Home(): JSX.Element {
8181
href: '/snaps',
8282
buttonIcon: 'arrow-right',
8383
},
84-
{
85-
title: 'Get testnet tokens',
86-
description: 'Access testnet tokens for development and testing purposes.',
87-
href: '/faucet',
88-
buttonIcon: 'arrow-right',
89-
},
9084
]}
9185
/>
9286

‎src/pages/quickstart/MediaStep/MediaStep.module.css

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
/* Media Step Container */
2+
.mediaContainer {
3+
display: flex;
4+
flex-direction: column;
5+
width: 100%;
6+
height: 100%;
7+
background: var(--ifm-background-surface-color);
8+
border-radius: 12px;
9+
overflow: hidden;
10+
position: relative;
11+
}
12+
13+
/* Media Content */
14+
.mediaContent {
15+
display: flex;
16+
flex-direction: column;
17+
width: 100%;
18+
height: 100%;
19+
position: relative;
20+
transition: opacity 0.3s ease;
21+
}
22+
23+
.mediaContent.hidden {
24+
opacity: 0;
25+
pointer-events: none;
26+
}
27+
28+
/* YouTube Player */
29+
.youtubePlayer {
30+
width: 100%;
31+
height: 400px;
32+
min-height: 300px;
33+
border-radius: 8px;
34+
border: none;
35+
background: #000;
36+
aspect-ratio: 16/9;
37+
}
38+
39+
/* Video Player */
40+
.videoPlayer {
41+
width: 100%;
42+
height: auto;
43+
max-height: 100%;
44+
object-fit: contain;
45+
background: #000;
46+
border-radius: 8px;
47+
}
48+
49+
/* Image Display */
50+
.imageDisplay {
51+
width: 100%;
52+
height: auto;
53+
max-height: 100%;
54+
object-fit: contain;
55+
border-radius: 8px;
56+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
57+
}
58+
59+
/* Media Caption */
60+
.mediaCaption {
61+
padding: 1rem;
62+
background: var(--ifm-color-emphasis-50);
63+
border-top: 1px solid var(--ifm-color-emphasis-200);
64+
margin-top: auto;
65+
}
66+
67+
.mediaCaption p {
68+
margin: 0;
69+
font-size: 14px;
70+
line-height: 1.5;
71+
color: var(--ifm-color-content-secondary);
72+
text-align: center;
73+
}
74+
75+
/* Placeholder State */
76+
.mediaPlaceholder {
77+
display: flex;
78+
flex-direction: column;
79+
align-items: center;
80+
justify-content: center;
81+
height: 300px;
82+
gap: 1rem;
83+
color: var(--ifm-color-content-secondary);
84+
border: 2px dashed var(--ifm-color-emphasis-300);
85+
border-radius: 8px;
86+
margin: 1rem;
87+
}
88+
89+
.placeholderIcon {
90+
font-size: 48px;
91+
}
92+
93+
.loadButton {
94+
padding: 0.75rem 1.5rem;
95+
background: var(--ifm-color-primary);
96+
color: white;
97+
border: none;
98+
border-radius: 8px;
99+
cursor: pointer;
100+
font-size: 14px;
101+
font-weight: 500;
102+
transition: all 0.2s ease;
103+
}
104+
105+
.loadButton:hover {
106+
background: var(--ifm-color-primary-dark);
107+
transform: translateY(-1px);
108+
}
109+
110+
.mediaPlaceholder p {
111+
margin: 0;
112+
font-size: 16px;
113+
color: var(--ifm-color-content-secondary);
114+
}
115+
116+
/* Loading State */
117+
.mediaLoading {
118+
display: flex;
119+
flex-direction: column;
120+
align-items: center;
121+
justify-content: center;
122+
height: 300px;
123+
gap: 1rem;
124+
color: var(--ifm-color-content-secondary);
125+
}
126+
127+
.loadingSpinner {
128+
width: 32px;
129+
height: 32px;
130+
border: 3px solid var(--ifm-color-emphasis-300);
131+
border-top: 3px solid var(--ifm-color-primary);
132+
border-radius: 50%;
133+
animation: spin 1s linear infinite;
134+
}
135+
136+
@keyframes spin {
137+
0% {
138+
transform: rotate(0deg);
139+
}
140+
141+
100% {
142+
transform: rotate(360deg);
143+
}
144+
}
145+
146+
.mediaLoading p {
147+
margin: 0;
148+
font-size: 14px;
149+
color: var(--ifm-color-content-secondary);
150+
}
151+
152+
/* Error State */
153+
.mediaError {
154+
display: flex;
155+
flex-direction: column;
156+
align-items: center;
157+
justify-content: center;
158+
height: 300px;
159+
gap: 1rem;
160+
padding: 2rem;
161+
text-align: center;
162+
color: var(--ifm-color-content-secondary);
163+
}
164+
165+
.errorIcon {
166+
font-size: 48px;
167+
}
168+
169+
.mediaError p {
170+
margin: 0;
171+
font-size: 16px;
172+
color: var(--ifm-color-content-secondary);
173+
}
174+
175+
.retryButton {
176+
padding: 0.5rem 1rem;
177+
background: var(--ifm-color-primary);
178+
color: white;
179+
border: none;
180+
border-radius: 6px;
181+
cursor: pointer;
182+
font-size: 14px;
183+
transition: background-color 0.2s ease;
184+
}
185+
186+
.retryButton:hover {
187+
background: var(--ifm-color-primary-dark);
188+
}
189+
190+
/* Play Status Indicator */
191+
.playStatus {
192+
position: absolute;
193+
top: 1rem;
194+
right: 1rem;
195+
opacity: 0;
196+
transform: translateY(-10px);
197+
transition: all 0.3s ease;
198+
pointer-events: none;
199+
}
200+
201+
.playStatus.visible {
202+
opacity: 1;
203+
transform: translateY(0);
204+
}
205+
206+
.playIndicator {
207+
background: rgba(0, 0, 0, 0.7);
208+
color: white;
209+
padding: 0.5rem 1rem;
210+
border-radius: 20px;
211+
font-size: 12px;
212+
display: flex;
213+
align-items: center;
214+
gap: 0.5rem;
215+
backdrop-filter: blur(4px);
216+
}
217+
218+
/* Playing state effects */
219+
.mediaContent.playing .videoPlayer {
220+
box-shadow: 0 0 20px rgba(var(--ifm-color-primary-rgb), 0.3);
221+
}
222+
223+
/* Responsive Design */
224+
@media (max-width: 768px) {
225+
.mediaContainer {
226+
border-radius: 8px;
227+
}
228+
229+
.youtubePlayer {
230+
height: 250px;
231+
min-height: 200px;
232+
}
233+
234+
.mediaCaption {
235+
padding: 0.75rem;
236+
}
237+
238+
.mediaCaption p {
239+
font-size: 13px;
240+
}
241+
242+
.mediaLoading,
243+
.mediaError,
244+
.mediaPlaceholder {
245+
height: 200px;
246+
padding: 1rem;
247+
}
248+
249+
.errorIcon,
250+
.placeholderIcon {
251+
font-size: 36px;
252+
}
253+
}
254+
255+
/* Dark Mode Adjustments */
256+
[data-theme='dark'] .mediaCaption {
257+
background: var(--ifm-color-emphasis-100);
258+
border-top-color: var(--ifm-color-emphasis-300);
259+
}
260+
261+
[data-theme='dark'] .loadingSpinner {
262+
border-color: var(--ifm-color-emphasis-400);
263+
border-top-color: var(--ifm-color-primary);
264+
}
265+
266+
[data-theme='dark'] .playIndicator {
267+
background: rgba(255, 255, 255, 0.1);
268+
backdrop-filter: blur(8px);
269+
}

0 commit comments

Comments
 (0)