Skip to content

Commit 851f4e5

Browse files
GarkatronGarkatron
committed
Download page, and base tag now used in About and Legal
1 parent ddd0d28 commit 851f4e5

4 files changed

Lines changed: 263 additions & 252 deletions

File tree

‎apps/client/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import BookingConfirmation from "./pages/booking";
2020
import Appointments from "./pages/user/Appointments";
2121
import Legal from "./pages/limpora/Legal";
2222
import About from "./pages/limpora/About";
23+
import DownloadPage from "./pages/limpora/Download";
2324
const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLIC_KEY!);
2425

2526

@@ -37,6 +38,7 @@ const App = () => {
3738
<Route path="/settings" element={<Settings />} />
3839
<Route path="/legal" element={<Legal />} />
3940
<Route path="/about" element={<About />} />
41+
<Route path="/download" element={<DownloadPage />} />
4042

4143
<Route element={<PrivateRoute />}>
4244
<Route path="/panel/:username" element={<UserPanel />} />

‎apps/client/src/pages/limpora/About.tsx‎

Lines changed: 88 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
Divider, Anchor, SimpleGrid, Badge,
66
} from "@mantine/core";
77
import { Mail, Globe, MapPin, Info, AlertCircle, Users } from "lucide-react";
8+
import Base from "../../layouts/Base";
89

910
const Section = ({ icon: Icon, title, children }) => (
1011
<Stack gap="sm">
@@ -22,96 +23,98 @@ export default function About() {
2223
const { t } = useTranslation();
2324

2425
return (
25-
<Box maw={720} mx="auto" p={{ base: "md", sm: "xl" }}>
26-
<Stack gap="xl">
27-
28-
{/* Header */}
29-
<Stack gap={4}>
30-
<Badge variant="light" radius="xl" size="sm" w="fit-content">
31-
{t("about.badge")}
32-
</Badge>
33-
<Title order={2} fz={{ base: "1.6rem", sm: "2rem" }} fw={700} style={{ letterSpacing: "-0.02em" }}>
34-
{t("about.title")}
35-
</Title>
36-
<Text size="sm" style={{ opacity: 0.65 }} maw={540}>
37-
{t("about.description")}
38-
</Text>
39-
</Stack>
40-
41-
<Divider />
42-
43-
{/* What is Limpora */}
44-
<Paper withBorder radius="xl" p="lg">
45-
<Stack gap="xl">
46-
47-
<Section icon={Info} title={t("about.what.title")}>
48-
<Text size="sm" lh={1.75} style={{ opacity: 0.75 }}>
49-
{t("about.what.body")}
50-
</Text>
51-
</Section>
26+
<Base>
27+
<Box maw={720} mx="auto" p={{ base: "md", sm: "xl" }}>
28+
<Stack gap="xl">
29+
30+
{/* Header */}
31+
<Stack gap={4}>
32+
<Badge variant="light" radius="xl" size="sm" w="fit-content">
33+
{t("about.badge")}
34+
</Badge>
35+
<Title order={2} fz={{ base: "1.6rem", sm: "2rem" }} fw={700} style={{ letterSpacing: "-0.02em" }}>
36+
{t("about.title")}
37+
</Title>
38+
<Text size="sm" style={{ opacity: 0.65 }} maw={540}>
39+
{t("about.description")}
40+
</Text>
41+
</Stack>
5242

53-
<Section icon={Users} title={t("about.who.title")}>
54-
<Text size="sm" lh={1.75} style={{ opacity: 0.75 }}>
55-
{t("about.who.body")}
56-
</Text>
57-
</Section>
43+
<Divider />
5844

59-
<Section icon={AlertCircle} title={t("about.disclaimer.title")}>
60-
<Text size="sm" lh={1.75} style={{ opacity: 0.75 }}>
61-
{t("about.disclaimer.body")}
62-
</Text>
63-
</Section>
45+
{/* What is Limpora */}
46+
<Paper withBorder radius="xl" p="lg">
47+
<Stack gap="xl">
48+
49+
<Section icon={Info} title={t("about.what.title")}>
50+
<Text size="sm" lh={1.75} style={{ opacity: 0.75 }}>
51+
{t("about.what.body")}
52+
</Text>
53+
</Section>
54+
55+
<Section icon={Users} title={t("about.who.title")}>
56+
<Text size="sm" lh={1.75} style={{ opacity: 0.75 }}>
57+
{t("about.who.body")}
58+
</Text>
59+
</Section>
60+
61+
<Section icon={AlertCircle} title={t("about.disclaimer.title")}>
62+
<Text size="sm" lh={1.75} style={{ opacity: 0.75 }}>
63+
{t("about.disclaimer.body")}
64+
</Text>
65+
</Section>
66+
67+
</Stack>
68+
</Paper>
6469

70+
{/* Contact */}
71+
<Stack gap="sm">
72+
<Text fw={600} size="sm" tt="uppercase" style={{ letterSpacing: "0.08em", opacity: 0.5 }}>
73+
{t("about.contact.title")}
74+
</Text>
75+
<Paper withBorder radius="xl" p="lg">
76+
<SimpleGrid cols={{ base: 1, sm: 3 }} spacing="lg">
77+
78+
<Group gap="sm" align="flex-start">
79+
<ThemeIcon size={32} radius="xl" variant="light" mt={2}>
80+
<Mail size={15} />
81+
</ThemeIcon>
82+
<Stack gap={2}>
83+
<Text size="xs" style={{ opacity: 0.5 }}>{t("about.contact.email_label")}</Text>
84+
<Anchor href="mailto:soporte@limpora.es" size="sm" fw={500} underline="hover">
85+
soporte@limpora.es
86+
</Anchor>
87+
</Stack>
88+
</Group>
89+
90+
<Group gap="sm" align="flex-start">
91+
<ThemeIcon size={32} radius="xl" variant="light" mt={2}>
92+
<Globe size={15} />
93+
</ThemeIcon>
94+
<Stack gap={2}>
95+
<Text size="xs" style={{ opacity: 0.5 }}>{t("about.contact.web_label")}</Text>
96+
<Anchor href="https://limpora.es" size="sm" fw={500} underline="hover" target="_blank">
97+
limpora.es
98+
</Anchor>
99+
</Stack>
100+
</Group>
101+
102+
<Group gap="sm" align="flex-start">
103+
<ThemeIcon size={32} radius="xl" variant="light" mt={2}>
104+
<MapPin size={15} />
105+
</ThemeIcon>
106+
<Stack gap={2}>
107+
<Text size="xs" style={{ opacity: 0.5 }}>{t("about.contact.location_label")}</Text>
108+
<Text size="sm" fw={500}>España</Text>
109+
</Stack>
110+
</Group>
111+
112+
</SimpleGrid>
113+
</Paper>
65114
</Stack>
66-
</Paper>
67115

68-
{/* Contact */}
69-
<Stack gap="sm">
70-
<Text fw={600} size="sm" tt="uppercase" style={{ letterSpacing: "0.08em", opacity: 0.5 }}>
71-
{t("about.contact.title")}
72-
</Text>
73-
<Paper withBorder radius="xl" p="lg">
74-
<SimpleGrid cols={{ base: 1, sm: 3 }} spacing="lg">
75-
76-
<Group gap="sm" align="flex-start">
77-
<ThemeIcon size={32} radius="xl" variant="light" mt={2}>
78-
<Mail size={15} />
79-
</ThemeIcon>
80-
<Stack gap={2}>
81-
<Text size="xs" style={{ opacity: 0.5 }}>{t("about.contact.email_label")}</Text>
82-
<Anchor href="mailto:soporte@limpora.es" size="sm" fw={500} underline="hover">
83-
soporte@limpora.es
84-
</Anchor>
85-
</Stack>
86-
</Group>
87-
88-
<Group gap="sm" align="flex-start">
89-
<ThemeIcon size={32} radius="xl" variant="light" mt={2}>
90-
<Globe size={15} />
91-
</ThemeIcon>
92-
<Stack gap={2}>
93-
<Text size="xs" style={{ opacity: 0.5 }}>{t("about.contact.web_label")}</Text>
94-
<Anchor href="https://limpora.es" size="sm" fw={500} underline="hover" target="_blank">
95-
limpora.es
96-
</Anchor>
97-
</Stack>
98-
</Group>
99-
100-
<Group gap="sm" align="flex-start">
101-
<ThemeIcon size={32} radius="xl" variant="light" mt={2}>
102-
<MapPin size={15} />
103-
</ThemeIcon>
104-
<Stack gap={2}>
105-
<Text size="xs" style={{ opacity: 0.5 }}>{t("about.contact.location_label")}</Text>
106-
<Text size="sm" fw={500}>España</Text>
107-
</Stack>
108-
</Group>
109-
110-
</SimpleGrid>
111-
</Paper>
112116
</Stack>
113-
114-
</Stack>
115-
</Box>
117+
</Box>
118+
</Base>
116119
);
117120
}

apps/client/src/pages/limpora/download.tsx renamed to apps/client/src/pages/limpora/Download.tsx

Lines changed: 73 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
Paper, Divider, Anchor,
66
} from "@mantine/core";
77
import { Download, ShieldCheck, Smartphone, Wifi, Star, AlertTriangle } from "lucide-react";
8+
import Base from "../../layouts/Base";
89

910
/* ── Fade-in hook ── */
1011
const useFadeIn = (delay = 0) => {
@@ -165,78 +166,80 @@ export default function DownloadPage() {
165166
const refRight = useFadeIn(120);
166167

167168
return (
168-
<Box maw={900} mx="auto" p={{ base: "md", sm: "xl" }}>
169-
<Stack gap="xl">
170-
171-
{/* Header */}
172-
<Stack gap={4}>
173-
<Badge variant="light" radius="xl" size="sm" w="fit-content">
174-
{t("download.badge")}
175-
</Badge>
176-
<Title order={2} fz={{ base: "1.5rem", sm: "2rem" }} fw={700} style={{ letterSpacing: "-0.02em" }}>
177-
{t("download.title")}
178-
</Title>
179-
<Text size="sm" style={{ opacity: 0.6 }}>{t("download.subtitle")}</Text>
180-
</Stack>
181-
182-
{/* Main card */}
183-
<Paper withBorder radius="xl" p={{ base: "lg", sm: "xl" }}>
184-
<Group
185-
gap="xl"
186-
align="center"
187-
wrap="wrap"
188-
style={{ flexDirection: "row" }}
189-
>
190-
191-
{/* Phone mockup */}
192-
<Box ref={refLeft} style={{ display: "flex", justifyContent: "center" }}>
193-
<PhoneMockup />
194-
</Box>
195-
196-
{/* Right content */}
197-
<Stack ref={refRight} gap="lg" style={{ flex: 1, minWidth: 240 }}>
198-
199-
<Stack gap={4}>
200-
<Text fw={700} fz="1.2rem" style={{ letterSpacing: "-0.01em" }}>
201-
Limpora
202-
</Text>
203-
<Text size="sm" style={{ opacity: 0.6 }}>
204-
{t("download.app_description")}
205-
</Text>
206-
</Stack>
207-
208-
{/* Meta info */}
209-
<Stack gap={8}>
210-
<InfoRow icon={Smartphone} text={t("download.info.android")} />
211-
<InfoRow icon={Wifi} text={t("download.info.size")} />
212-
<InfoRow icon={Star} text={t("download.info.version")} />
213-
<InfoRow icon={ShieldCheck} text={t("download.info.verified")} />
214-
</Stack>
215-
216-
<Divider />
217-
218-
{/* Download button */}
219-
<DownloadButton
220-
href="/limpora.apk"
221-
sublabel={t("download.btn.sublabel")}
222-
label={t("download.btn.label")}
223-
/>
224-
225-
{/* Warning */}
226-
<Paper radius="lg" p="sm" style={{ background: "var(--mantine-color-yellow-light)" }}>
227-
<Group gap="xs" align="flex-start">
228-
<AlertTriangle size={14} style={{ marginTop: 2, flexShrink: 0, opacity: 0.7 }} />
229-
<Text size="xs" lh={1.6} style={{ opacity: 0.8 }}>
230-
{t("download.warning")}
169+
<Base>
170+
<Box maw={900} mx="auto" p={{ base: "md", sm: "xl" }}>
171+
<Stack gap="xl">
172+
173+
{/* Header */}
174+
<Stack gap={4}>
175+
<Badge variant="light" radius="xl" size="sm" w="fit-content">
176+
{t("download.badge")}
177+
</Badge>
178+
<Title order={2} fz={{ base: "1.5rem", sm: "2rem" }} fw={700} style={{ letterSpacing: "-0.02em" }}>
179+
{t("download.title")}
180+
</Title>
181+
<Text size="sm" style={{ opacity: 0.6 }}>{t("download.subtitle")}</Text>
182+
</Stack>
183+
184+
{/* Main card */}
185+
<Paper withBorder radius="xl" p={{ base: "lg", sm: "xl" }}>
186+
<Group
187+
gap="xl"
188+
align="center"
189+
wrap="wrap"
190+
style={{ flexDirection: "row" }}
191+
>
192+
193+
{/* Phone mockup */}
194+
<Box ref={refLeft} style={{ display: "flex", justifyContent: "center" }}>
195+
<PhoneMockup />
196+
</Box>
197+
198+
{/* Right content */}
199+
<Stack ref={refRight} gap="lg" style={{ flex: 1, minWidth: 240 }}>
200+
201+
<Stack gap={4}>
202+
<Text fw={700} fz="1.2rem" style={{ letterSpacing: "-0.01em" }}>
203+
Limpora
231204
</Text>
232-
</Group>
233-
</Paper>
205+
<Text size="sm" style={{ opacity: 0.6 }}>
206+
{t("download.app_description")}
207+
</Text>
208+
</Stack>
209+
210+
{/* Meta info */}
211+
<Stack gap={8}>
212+
<InfoRow icon={Smartphone} text={t("download.info.android")} />
213+
<InfoRow icon={Wifi} text={t("download.info.size")} />
214+
<InfoRow icon={Star} text={t("download.info.version")} />
215+
<InfoRow icon={ShieldCheck} text={t("download.info.verified")} />
216+
</Stack>
217+
218+
<Divider />
219+
220+
{/* Download button */}
221+
<DownloadButton
222+
href="/limpora.apk"
223+
sublabel={t("download.btn.sublabel")}
224+
label={t("download.btn.label")}
225+
/>
226+
227+
{/* Warning */}
228+
<Paper radius="lg" p="sm" style={{ background: "var(--mantine-color-yellow-light)" }}>
229+
<Group gap="xs" align="flex-start">
230+
<AlertTriangle size={14} style={{ marginTop: 2, flexShrink: 0, opacity: 0.7 }} />
231+
<Text size="xs" lh={1.6} style={{ opacity: 0.8 }}>
232+
{t("download.warning")}
233+
</Text>
234+
</Group>
235+
</Paper>
234236

235-
</Stack>
236-
</Group>
237-
</Paper>
237+
</Stack>
238+
</Group>
239+
</Paper>
238240

239-
</Stack>
240-
</Box>
241+
</Stack>
242+
</Box>
243+
</Base>
241244
);
242245
}

0 commit comments

Comments
 (0)