Skip to content

Commit 5e2b17c

Browse files
Copilotmikebarkmin
Copilot
and
mikebarkmin
committed
Add landing page with hero section, featured maps, and teacher-student use case
Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>
1 parent 2d94194 commit 5e2b17c

4 files changed

Lines changed: 492 additions & 2 deletions

File tree

‎platforms/web/index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@
55
<meta charset="UTF-8" />
66
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Learningmap</title>
8+
<title>Learningmap - Interactive Visual Maps for Teaching and Learning</title>
9+
<meta name="description" content="Create, share, and explore interactive visual learning maps. Perfect for teachers and students. All data stored locally in your browser for privacy and offline access." />
10+
<meta name="keywords" content="learning map, education, teaching, interactive learning, visual learning, roadmap" />
11+
<meta property="og:title" content="Learningmap - Interactive Visual Maps for Teaching and Learning" />
12+
<meta property="og:description" content="Create, share, and explore interactive visual learning maps. Perfect for teachers and students." />
13+
<meta property="og:type" content="website" />
914
</head>
1015

1116
<body>

‎platforms/web/src/App.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
33
import { LearningMapEditor } from '@learningmap/learningmap';
44
import "@learningmap/learningmap/index.css";
55
import Learn from './Learn';
6+
import Landing from './Landing';
67

78
function App() {
89
return (
910
<BrowserRouter>
1011
<Routes>
11-
<Route path="/" element={<LearningMapEditor jsonStore="https://json.openpatch.org" />} />
12+
<Route path="/" element={<Landing />} />
13+
<Route path="/create" element={<LearningMapEditor jsonStore="https://json.openpatch.org" />} />
1214
<Route path="/learn" element={<Learn />} />
1315
</Routes>
1416
</BrowserRouter>

‎platforms/web/src/Landing.css‎

Lines changed: 361 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,361 @@
1+
.landing-container {
2+
min-height: 100vh;
3+
display: flex;
4+
flex-direction: column;
5+
background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
6+
}
7+
8+
/* Header */
9+
.landing-header {
10+
background-color: white;
11+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
12+
position: sticky;
13+
top: 0;
14+
z-index: 100;
15+
}
16+
17+
.header-content {
18+
max-width: 1200px;
19+
margin: 0 auto;
20+
padding: 1rem 2rem;
21+
display: flex;
22+
justify-content: space-between;
23+
align-items: center;
24+
}
25+
26+
.logo-section {
27+
display: flex;
28+
align-items: center;
29+
gap: 0.75rem;
30+
}
31+
32+
.logo {
33+
height: 40px;
34+
width: 40px;
35+
}
36+
37+
.logo-text {
38+
font-size: 1.5rem;
39+
font-weight: 600;
40+
color: #333;
41+
}
42+
43+
.nav-links {
44+
display: flex;
45+
gap: 1rem;
46+
}
47+
48+
.nav-button {
49+
padding: 0.5rem 1rem;
50+
background-color: transparent;
51+
border: 1px solid #ddd;
52+
border-radius: 6px;
53+
cursor: pointer;
54+
font-size: 0.95rem;
55+
color: #333;
56+
transition: all 0.2s ease;
57+
}
58+
59+
.nav-button:hover {
60+
background-color: #f5f5f5;
61+
border-color: #999;
62+
}
63+
64+
.nav-button:focus {
65+
outline: 2px solid #4a90e2;
66+
outline-offset: 2px;
67+
}
68+
69+
/* Hero Section */
70+
.hero-section {
71+
max-width: 900px;
72+
margin: 0 auto;
73+
padding: 4rem 2rem;
74+
text-align: center;
75+
}
76+
77+
.hero-title {
78+
font-size: 2.5rem;
79+
font-weight: 700;
80+
color: #1a1a1a;
81+
line-height: 1.2;
82+
margin-bottom: 1rem;
83+
}
84+
85+
.hero-subtitle {
86+
font-size: 1.25rem;
87+
color: #666;
88+
margin-bottom: 2.5rem;
89+
line-height: 1.6;
90+
}
91+
92+
.cta-buttons {
93+
display: flex;
94+
gap: 1rem;
95+
justify-content: center;
96+
flex-wrap: wrap;
97+
}
98+
99+
.cta-primary,
100+
.cta-secondary {
101+
padding: 1rem 2rem;
102+
font-size: 1.1rem;
103+
font-weight: 600;
104+
border: none;
105+
border-radius: 8px;
106+
cursor: pointer;
107+
transition: all 0.2s ease;
108+
}
109+
110+
.cta-primary {
111+
background-color: #4a90e2;
112+
color: white;
113+
}
114+
115+
.cta-primary:hover {
116+
background-color: #357abd;
117+
transform: translateY(-2px);
118+
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
119+
}
120+
121+
.cta-primary:focus {
122+
outline: 2px solid #4a90e2;
123+
outline-offset: 3px;
124+
}
125+
126+
.cta-secondary {
127+
background-color: white;
128+
color: #4a90e2;
129+
border: 2px solid #4a90e2;
130+
}
131+
132+
.cta-secondary:hover {
133+
background-color: #f0f7ff;
134+
transform: translateY(-2px);
135+
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
136+
}
137+
138+
.cta-secondary:focus {
139+
outline: 2px solid #4a90e2;
140+
outline-offset: 3px;
141+
}
142+
143+
/* Use Case Section */
144+
.use-case-section {
145+
background-color: #e8f4f8;
146+
padding: 3rem 2rem;
147+
}
148+
149+
.use-case-content {
150+
max-width: 800px;
151+
margin: 0 auto;
152+
text-align: center;
153+
}
154+
155+
.use-case-content h2 {
156+
font-size: 2rem;
157+
color: #1a1a1a;
158+
margin-bottom: 1rem;
159+
}
160+
161+
.use-case-content p {
162+
font-size: 1.1rem;
163+
color: #555;
164+
line-height: 1.7;
165+
}
166+
167+
/* Featured Section */
168+
.featured-section {
169+
max-width: 1200px;
170+
margin: 0 auto;
171+
padding: 4rem 2rem;
172+
}
173+
174+
.featured-title {
175+
font-size: 2rem;
176+
color: #1a1a1a;
177+
text-align: center;
178+
margin-bottom: 0.5rem;
179+
}
180+
181+
.featured-subtitle {
182+
font-size: 1.1rem;
183+
color: #666;
184+
text-align: center;
185+
margin-bottom: 2.5rem;
186+
}
187+
188+
.featured-grid {
189+
display: grid;
190+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
191+
gap: 2rem;
192+
}
193+
194+
.featured-card {
195+
background-color: white;
196+
border: 1px solid #e0e0e0;
197+
border-radius: 12px;
198+
padding: 2rem;
199+
transition: all 0.2s ease;
200+
display: flex;
201+
flex-direction: column;
202+
}
203+
204+
.featured-card:hover {
205+
transform: translateY(-4px);
206+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
207+
border-color: #4a90e2;
208+
}
209+
210+
.featured-card:focus-within {
211+
outline: 2px solid #4a90e2;
212+
outline-offset: 2px;
213+
}
214+
215+
.card-thumbnail {
216+
font-size: 3rem;
217+
text-align: center;
218+
margin-bottom: 1rem;
219+
}
220+
221+
.card-title {
222+
font-size: 1.3rem;
223+
color: #1a1a1a;
224+
margin-bottom: 0.75rem;
225+
}
226+
227+
.card-description {
228+
font-size: 1rem;
229+
color: #666;
230+
line-height: 1.6;
231+
flex-grow: 1;
232+
margin-bottom: 1rem;
233+
}
234+
235+
.card-footer {
236+
display: flex;
237+
justify-content: center;
238+
padding-top: 1rem;
239+
border-top: 1px solid #f0f0f0;
240+
}
241+
242+
.card-badge {
243+
display: inline-block;
244+
padding: 0.4rem 0.8rem;
245+
background-color: #e8f4f8;
246+
color: #357abd;
247+
border-radius: 20px;
248+
font-size: 0.85rem;
249+
font-weight: 600;
250+
}
251+
252+
/* Info Banner */
253+
.info-banner {
254+
background-color: #fff9e6;
255+
border-top: 2px solid #ffd93d;
256+
border-bottom: 2px solid #ffd93d;
257+
padding: 1.5rem 2rem;
258+
}
259+
260+
.info-content {
261+
max-width: 1200px;
262+
margin: 0 auto;
263+
text-align: center;
264+
font-size: 1rem;
265+
color: #666;
266+
}
267+
268+
.info-content strong {
269+
color: #333;
270+
}
271+
272+
/* Footer */
273+
.landing-footer {
274+
background-color: white;
275+
padding: 2rem;
276+
text-align: center;
277+
color: #666;
278+
font-size: 0.95rem;
279+
border-top: 1px solid #e0e0e0;
280+
margin-top: auto;
281+
}
282+
283+
.landing-footer p {
284+
margin: 0.5rem 0;
285+
}
286+
287+
.landing-footer a {
288+
color: #4a90e2;
289+
text-decoration: none;
290+
transition: color 0.2s ease;
291+
}
292+
293+
.landing-footer a:hover {
294+
color: #357abd;
295+
text-decoration: underline;
296+
}
297+
298+
.landing-footer a:focus {
299+
outline: 2px solid #4a90e2;
300+
outline-offset: 2px;
301+
border-radius: 2px;
302+
}
303+
304+
/* Responsive Design */
305+
@media (max-width: 768px) {
306+
.hero-title {
307+
font-size: 2rem;
308+
}
309+
310+
.hero-subtitle {
311+
font-size: 1.1rem;
312+
}
313+
314+
.cta-buttons {
315+
flex-direction: column;
316+
align-items: stretch;
317+
}
318+
319+
.cta-primary,
320+
.cta-secondary {
321+
width: 100%;
322+
}
323+
324+
.featured-grid {
325+
grid-template-columns: 1fr;
326+
}
327+
328+
.use-case-content h2 {
329+
font-size: 1.6rem;
330+
}
331+
332+
.use-case-content p {
333+
font-size: 1rem;
334+
}
335+
336+
.header-content {
337+
padding: 1rem;
338+
}
339+
340+
.logo-text {
341+
font-size: 1.25rem;
342+
}
343+
}
344+
345+
@media (max-width: 480px) {
346+
.hero-title {
347+
font-size: 1.75rem;
348+
}
349+
350+
.hero-subtitle {
351+
font-size: 1rem;
352+
}
353+
354+
.featured-title {
355+
font-size: 1.6rem;
356+
}
357+
358+
.card-thumbnail {
359+
font-size: 2.5rem;
360+
}
361+
}

0 commit comments

Comments
 (0)