Skip to content

Commit b67b1ef

Browse files
jessicachitasjessicachitas
committed
add QuickStart for when docs is ready assisted by Cursor
1 parent 952869b commit b67b1ef

File tree

2 files changed

+314
-0
lines changed

2 files changed

+314
-0
lines changed

‎src/components/QuickStart/index.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import styles from "./styles.module.css";
2+
import {useHistory} from "react-router-dom";
3+
4+
const steps = [
5+
{
6+
number: "1",
7+
title: "Install CLI",
8+
description: "Get started by installing the Flight Control CLI tool",
9+
command: "curl -s https://flightctl.io/install.sh | bash",
10+
},
11+
{
12+
number: "2",
13+
title: "Deploy Service",
14+
description: "Deploy the Flight Control service to your cluster",
15+
command: "flightctl deploy --config config.yaml",
16+
},
17+
{
18+
number: "3",
19+
title: "Register Devices",
20+
description: "Connect your edge devices to the platform",
21+
command: "flightctl device register --name my-device",
22+
},
23+
];
24+
25+
export default function QuickStart() {
26+
const history = useHistory();
27+
28+
const copyToClipboard = (text) => {
29+
navigator.clipboard.writeText(text);
30+
};
31+
32+
return (
33+
<div className={styles.quickStart}>
34+
<div className={styles.container}>
35+
<div className={styles.header}>
36+
<h2 className={styles.title}>Get Started in Minutes</h2>
37+
<p className={styles.subtitle}>
38+
Deploy Flight Control and start managing your edge devices in three simple steps
39+
</p>
40+
</div>
41+
42+
<div className={styles.stepsGrid}>
43+
{steps.map((step, idx) => (
44+
<div key={idx} className={styles.step}>
45+
<div className={styles.stepNumber}>{step.number}</div>
46+
<h3 className={styles.stepTitle}>{step.title}</h3>
47+
<p className={styles.stepDescription}>{step.description}</p>
48+
<div className={styles.codeBlock}>
49+
<code className={styles.code}>{step.command}</code>
50+
<button
51+
className={styles.copyButton}
52+
onClick={() => copyToClipboard(step.command)}
53+
aria-label="Copy command"
54+
>
55+
📋
56+
</button>
57+
</div>
58+
</div>
59+
))}
60+
</div>
61+
62+
<div className={styles.ctaSection}>
63+
<p className={styles.ctaText}>
64+
Ready to dive deeper?
65+
</p>
66+
<div className={styles.ctaButtons}>
67+
<button
68+
className={`${styles.button} ${styles.primaryBtn}`}
69+
onClick={() => history.push("/docs/user/getting-started")}
70+
>
71+
Full Installation Guide
72+
</button>
73+
<button
74+
className={`${styles.button} ${styles.secondaryBtn}`}
75+
onClick={() => history.push("/docs/user")}
76+
>
77+
View Documentation
78+
</button>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
);
84+
}
85+

‎src/components/QuickStart/styles.module.css‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
.quickStart {
2+
padding: 6rem 2rem;
3+
background: linear-gradient(135deg, #214c88 0%, #1ba8ff 100%);
4+
color: white;
5+
}
6+
7+
[data-theme="dark"] .quickStart {
8+
background: linear-gradient(135deg, #0e2a4d 0%, #0094f0 100%);
9+
}
10+
11+
.container {
12+
max-width: 1200px;
13+
margin: 0 auto;
14+
}
15+
16+
.header {
17+
text-align: center;
18+
margin-bottom: 4rem;
19+
}
20+
21+
.title {
22+
font-size: 3rem;
23+
font-weight: 700;
24+
margin-bottom: 1rem;
25+
color: white;
26+
}
27+
28+
@media screen and (max-width: 768px) {
29+
.title {
30+
font-size: 2rem;
31+
}
32+
}
33+
34+
.subtitle {
35+
font-size: 1.3rem;
36+
color: rgba(255, 255, 255, 0.9);
37+
max-width: 700px;
38+
margin: 0 auto;
39+
}
40+
41+
@media screen and (max-width: 768px) {
42+
.subtitle {
43+
font-size: 1.1rem;
44+
}
45+
}
46+
47+
.stepsGrid {
48+
display: grid;
49+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
50+
gap: 2rem;
51+
margin-bottom: 4rem;
52+
}
53+
54+
@media screen and (max-width: 768px) {
55+
.stepsGrid {
56+
grid-template-columns: 1fr;
57+
gap: 1.5rem;
58+
}
59+
}
60+
61+
.step {
62+
background: rgba(255, 255, 255, 0.1);
63+
backdrop-filter: blur(10px);
64+
border: 1px solid rgba(255, 255, 255, 0.2);
65+
border-radius: 20px;
66+
padding: 2rem;
67+
transition: all 0.3s ease;
68+
animation: fadeInUp 0.6s ease-out forwards;
69+
}
70+
71+
.step:hover {
72+
transform: translateY(-5px);
73+
background: rgba(255, 255, 255, 0.15);
74+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
75+
}
76+
77+
@keyframes fadeInUp {
78+
from {
79+
opacity: 0;
80+
transform: translateY(20px);
81+
}
82+
to {
83+
opacity: 1;
84+
transform: translateY(0);
85+
}
86+
}
87+
88+
.stepNumber {
89+
width: 50px;
90+
height: 50px;
91+
background: white;
92+
color: #214c88;
93+
border-radius: 50%;
94+
display: flex;
95+
align-items: center;
96+
justify-content: center;
97+
font-size: 1.5rem;
98+
font-weight: 700;
99+
margin-bottom: 1.5rem;
100+
}
101+
102+
.stepTitle {
103+
font-size: 1.5rem;
104+
font-weight: 700;
105+
margin-bottom: 0.75rem;
106+
color: white;
107+
}
108+
109+
.stepDescription {
110+
font-size: 1.1rem;
111+
color: rgba(255, 255, 255, 0.85);
112+
margin-bottom: 1.5rem;
113+
line-height: 1.6;
114+
}
115+
116+
.codeBlock {
117+
background: rgba(0, 0, 0, 0.3);
118+
border-radius: 12px;
119+
padding: 1rem;
120+
display: flex;
121+
align-items: center;
122+
justify-content: space-between;
123+
gap: 1rem;
124+
border: 1px solid rgba(255, 255, 255, 0.1);
125+
}
126+
127+
.code {
128+
font-family: var(--ifm-font-family-monospace);
129+
font-size: 0.9rem;
130+
color: #70c8ff;
131+
flex: 1;
132+
overflow-x: auto;
133+
white-space: nowrap;
134+
}
135+
136+
.copyButton {
137+
background: rgba(255, 255, 255, 0.1);
138+
border: 1px solid rgba(255, 255, 255, 0.2);
139+
border-radius: 8px;
140+
padding: 0.5rem 0.75rem;
141+
cursor: pointer;
142+
transition: all 0.2s ease;
143+
font-size: 1.2rem;
144+
}
145+
146+
.copyButton:hover {
147+
background: rgba(255, 255, 255, 0.2);
148+
transform: scale(1.1);
149+
}
150+
151+
.ctaSection {
152+
text-align: center;
153+
padding: 3rem 2rem;
154+
background: rgba(255, 255, 255, 0.1);
155+
backdrop-filter: blur(10px);
156+
border-radius: 20px;
157+
border: 1px solid rgba(255, 255, 255, 0.2);
158+
}
159+
160+
.ctaText {
161+
font-size: 1.5rem;
162+
font-weight: 600;
163+
margin-bottom: 2rem;
164+
color: white;
165+
}
166+
167+
@media screen and (max-width: 768px) {
168+
.ctaText {
169+
font-size: 1.2rem;
170+
}
171+
}
172+
173+
.ctaButtons {
174+
display: flex;
175+
gap: 1rem;
176+
justify-content: center;
177+
flex-wrap: wrap;
178+
}
179+
180+
@media screen and (max-width: 768px) {
181+
.ctaButtons {
182+
flex-direction: column;
183+
align-items: center;
184+
}
185+
}
186+
187+
.button {
188+
padding: 0.85rem 2rem;
189+
font-size: 1.1rem;
190+
font-weight: 600;
191+
font-family: inherit;
192+
border-radius: 12px;
193+
cursor: pointer;
194+
transition: all 0.3s ease;
195+
border: 2px solid transparent;
196+
text-decoration: none;
197+
white-space: nowrap;
198+
}
199+
200+
@media screen and (max-width: 768px) {
201+
.button {
202+
width: 100%;
203+
max-width: 300px;
204+
}
205+
}
206+
207+
.primaryBtn {
208+
background: white;
209+
color: #214c88;
210+
border-color: white;
211+
}
212+
213+
.primaryBtn:hover {
214+
transform: translateY(-2px);
215+
box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
216+
}
217+
218+
.secondaryBtn {
219+
background: transparent;
220+
color: white;
221+
border: 2px solid white;
222+
}
223+
224+
.secondaryBtn:hover {
225+
transform: translateY(-2px);
226+
background: rgba(255, 255, 255, 0.1);
227+
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
228+
}
229+

0 commit comments

Comments
 (0)