Skip to content

Commit 7ee2366

Browse files
rebecamurillorebecamurillo
committed
fix: how to in homepage
1 parent c242514 commit 7ee2366

5 files changed

Lines changed: 214 additions & 60 deletions

File tree

‎src/components/FAQ.astro‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
import { InfoAlert } from "./react";
3+
---
4+
5+
<div class="gap-4 flex flex-col mt-8">
6+
<h4>Need help ?</h4>
7+
<InfoAlert
8+
variant="question"
9+
title="Are you a SUM Living Lab ?"
10+
actionHref="/lab-admin/signup"
11+
actionText="Sign up"
12+
hideIcon
13+
client:load
14+
>
15+
<small>
16+
If this is your first time accessing the platform, create a new account
17+
and select your Living Lab from the list.
18+
</small>
19+
</InfoAlert>
20+
21+
<InfoAlert
22+
variant="question"
23+
title="Are you a SUM project partner ?"
24+
hideIcon
25+
client:load
26+
>
27+
<small>
28+
For administrator access, please contact the administrator at
29+
<a class="underline" href="mailto:odp@sum-project.eu"
30+
>odp@sum-project.eu</a
31+
> to request special access to the platform.
32+
</small>
33+
</InfoAlert>
34+
35+
<InfoAlert
36+
variant="question"
37+
title="Do you want to create a new Living Lab?"
38+
hideIcon
39+
client:load
40+
>
41+
<small>
42+
Thank you for your interest in contributing to the SUM project! The
43+
feature is currently under construction. Please reach out to the platform
44+
administrator at <a class="underline" href="mailto:odp@sum-project.eu"
45+
>odp@sum-project.eu</a
46+
> for more information.
47+
</small>
48+
</InfoAlert>
49+
</div>

‎src/components/react/form/SignupForm.tsx‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,37 @@ export default function SignupForm({ livingLabs }: Props) {
3030
const [error, setError] = useState("");
3131
const [progress, setProgress] = useState("");
3232

33+
const validateForm = () => {
34+
if (!name || !email || !password) {
35+
setError("Please fill in all required fields.");
36+
return false;
37+
}
38+
const emailTrim = email.trim();
39+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
40+
if (!emailRegex.test(emailTrim)) {
41+
setError("Please enter a valid email address.");
42+
return false;
43+
}
44+
45+
if (password.length < 8) {
46+
setError("Password must be at least 8 characters long.");
47+
return false;
48+
}
49+
if (mode === "join" && !livingLab) {
50+
setError("Please select a Living Lab.");
51+
return false;
52+
}
53+
return true;
54+
};
55+
3356
async function handleSubmit(e: React.FormEvent) {
3457
e.preventDefault();
58+
setError("");
59+
setProgress("");
3560

61+
if (!validateForm()) {
62+
return;
63+
}
3664
setIsLoading(true);
3765
try {
3866
const newUser = await api.signupLabEditor({
@@ -163,18 +191,7 @@ export default function SignupForm({ livingLabs }: Props) {
163191
onClick={handleSubmit}
164192
/>
165193

166-
<RButton
167-
type="button"
168-
variant="secondary"
169-
text="Cancel"
170-
onClick={() => {
171-
setName("");
172-
setEmail("");
173-
setPassword("");
174-
setLivingLab("");
175-
setMode("join");
176-
}}
177-
/>
194+
<RButton variant="secondary" text="Go back" href={getUrl("/")} />
178195
</div>
179196

180197
<div className="text-center mt-6">

‎src/pages/index.astro‎

Lines changed: 131 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
MobilityMeasures,
99
ODPTimeline,
1010
LivingLabsMapSection,
11+
RButton,
1112
} from "../components/react";
1213
import heroImage from "../assets/img/sum-hero.png";
1314
import ApiClient from "../lib/api-client/ApiClient";
@@ -57,6 +58,49 @@ const labs = livingLabsData?.map((lab) => {
5758
sustainablePercentage: 0.4,
5859
};
5960
});
61+
62+
const steps = [
63+
{
64+
id: 1,
65+
color: "primary",
66+
icon: "👤",
67+
title: "Create your account",
68+
description:
69+
"Sign up and join your existing Living Lab, or create a new one to start contributing.",
70+
},
71+
{
72+
id: 2,
73+
color: "secondary",
74+
icon: "🏙️",
75+
title: "Describe your Living Lab",
76+
description:
77+
"Provide key details: name, city, and zone or area of intervention for your Living Lab.",
78+
},
79+
{
80+
id: 3,
81+
color: "warning",
82+
icon: "📊",
83+
title: "Collect baseline data",
84+
description:
85+
"Input your first round of KPI values before implementing mobility measures.",
86+
},
87+
{
88+
id: 4,
89+
color: "info",
90+
icon: "⚙️",
91+
title: "Add your measures",
92+
description:
93+
"Document the mobility measures and policies implemented in your Living Lab.",
94+
},
95+
{
96+
id: 5,
97+
color: "primary",
98+
icon: "📈",
99+
title: "Collect post-data",
100+
description:
101+
"Measure KPIs again to assess the impact of measures and share results in the platform.",
102+
},
103+
];
60104
---
61105

62106
<Layout role="visitor">
@@ -134,6 +178,92 @@ const labs = livingLabsData?.map((lab) => {
134178
</CTASection>
135179
</div>
136180

181+
<section class="bg-gray-50 py-16 px-4 sm:px-8 lg:px-16">
182+
<div class="max-w-5xl mx-auto text-center mb-16">
183+
<h2 class="text-3xl font-bold text-gray-900 mb-4">
184+
How to Contribute to the SUM Open Data Platform
185+
</h2>
186+
<p class="text-lg text-gray-600">
187+
Join the SUM Open Data Platform and help shape the future of sustainable
188+
urban mobility. Living Labs contribute real-world data to evaluate and
189+
improve New Shared Mobility measures across Europe.
190+
</p>
191+
</div>
192+
193+
<div class="relative max-w-5xl mx-auto mt-40">
194+
{/* Vertical line: left on mobile, centered on md+ */}
195+
<div
196+
class="absolute left-4 md:left-1/2 transform md:-translate-x-1/2 w-1 bg-primary h-full rounded"
197+
>
198+
</div>
199+
200+
{
201+
steps.map((step, index) => (
202+
<div
203+
key={step.id}
204+
class={`mb-16 flex items-start w-full md:justify-between md:items-center md:-mt-28 ${
205+
index % 2 === 0 ? "md:flex-row-reverse" : ""
206+
}`}
207+
>
208+
{/* Empty space on one side only for md+ (keeps centered layout on larger screens) */}
209+
<div class="hidden md:block md:w-5/12" />
210+
211+
{/* Step marker + connector: circle and line adjacent (no extra spacing) */}
212+
<div
213+
class={`z-20 flex items-center ml-2 ${
214+
index % 2 === 0
215+
? "flex-row md:-ml-18"
216+
: "md:flex-row-reverse md:-mr-18"
217+
}`}
218+
>
219+
<div
220+
class={`flex items-center justify-center w-5 h-5 rounded-full bg-${step.color} border-2 border-${step.color} text-xs font-extralight text-light shadow`}
221+
>
222+
{step.id}
223+
</div>
224+
225+
{/* Connector between marker and card (visible on md+) */}
226+
<div class="hidden md:block md:w-14">
227+
<div class="w-full h-0.5 bg-primary rounded" />
228+
</div>
229+
</div>
230+
231+
{/* Card: full width on mobile to the right of the line, constrained on md+ */}
232+
<div
233+
class={`relative w-full md:w-5/12 bg-white rounded-xl shadow-lg p-6 border-${step.color} ml-6 md:ml-0 ${
234+
index % 2 === 0 ? "border-r-8" : "border-l-8"
235+
}`}
236+
>
237+
<div class="flex items-center mb-2">
238+
<span class="text-2xl mr-3">{step.icon}</span>
239+
<h5 class="text-xl font-semibold text-gray-900">
240+
{step.title}
241+
</h5>
242+
</div>
243+
<p class="text-gray-600">{step.description}</p>
244+
</div>
245+
</div>
246+
))
247+
}
248+
</div>
249+
250+
{/* CTA */}
251+
<div
252+
class="text-center mt-16 flex flex-col md:flex-row gap-4 mx-auto justify-center"
253+
>
254+
<RButton
255+
href="/lab-admin/login"
256+
variant="primary"
257+
className="bg-warning text-light"
258+
>
259+
Login to your account →
260+
</RButton>
261+
<RButton href="/lab-admin/signup" variant="primary">
262+
Join the Platform →
263+
</RButton>
264+
</div>
265+
</section>
266+
137267
<!-- TODO: enable when features become available, only one section for tools -->
138268
<!-- <CTASection
139269
title="Push and pull measures impact assessment tool"
@@ -175,7 +305,7 @@ const labs = livingLabsData?.map((lab) => {
175305
order="center"
176306
linkText="Contribute feedback or request features"
177307
linkHref="https://fider-webapp.inocs-sum.lille.inria.fr"
178-
className="border-t border-gray-200 py-10"
308+
class="border-t border-gray-200 py-10"
179309
>
180310
<div class="my-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
181311
<!-- Feature 1 -->

‎src/pages/lab-admin/login.astro‎

Lines changed: 2 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import Layout from "../../layouts/Layout.astro";
33
import LoginForm from "../../components/react/form/LoginForm";
4-
import { InfoAlert } from "../../components/react";
4+
import FAQ from "../../components/FAQ.astro";
55
---
66

77
<Layout role="visitor">
@@ -13,52 +13,7 @@ import { InfoAlert } from "../../components/react";
1313
</p>
1414
<LoginForm client:load />
1515

16-
<div class="gap-4 flex flex-col mt-8">
17-
<h4>Need help ?</h4>
18-
<InfoAlert
19-
variant="question"
20-
title="Are you a SUM Living Lab ?"
21-
actionHref="/lab-admin/signup"
22-
actionText="Sign up"
23-
hideIcon
24-
client:load
25-
>
26-
<small>
27-
If this is your first time accessing the platform, create a new
28-
account and select your Living Lab from the list.
29-
</small>
30-
</InfoAlert>
31-
32-
<InfoAlert
33-
variant="question"
34-
title="Are you a SUM project partner ?"
35-
hideIcon
36-
client:load
37-
>
38-
<small>
39-
For administrator access, please contact the administrator at
40-
<a class="underline" href="mailto:odp@sum-project.eu"
41-
>odp@sum-project.eu</a
42-
> to request special access to the platform.
43-
</small>
44-
</InfoAlert>
45-
46-
<InfoAlert
47-
variant="question"
48-
title="Do you want to create a new Living Lab?"
49-
hideIcon
50-
client:load
51-
>
52-
<small>
53-
Thank you for your interest in contributing to the SUM project! The
54-
feature is currently under construction. Please reach out to the
55-
platform administrator at <a
56-
class="underline"
57-
href="mailto:odp@sum-project.eu">odp@sum-project.eu</a
58-
> for more information.
59-
</small>
60-
</InfoAlert>
61-
</div>
16+
<FAQ />
6217
</section>
6318
</div>
6419
</Layout>

‎src/pages/lab-admin/signup.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import Layout from "../../layouts/Layout.astro";
33
import SignupForm from "../../components/react/form/SignupForm";
44
import ApiClient from "../../lib/api-client/ApiClient";
5+
import FAQ from "../../components/FAQ.astro";
56
67
const api = new ApiClient(Astro.request);
78
const livingLabs = await api.getLivingLabs();
@@ -23,6 +24,8 @@ const labs =
2324
Please use official partner emails for security and moderation purposes.
2425
</p>
2526
<SignupForm livingLabs={labs} client:load />
27+
28+
<FAQ />
2629
</section>
2730
</div>
2831
</Layout>

0 commit comments

Comments
 (0)