Skip to content

Expand and improve the landing page #370

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SvenVw merged 19 commits into from
Dec 18, 2025
Merged

Expand and improve the landing page #370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
cf420c9
feat: improve signin part and add introduction
SvenVw Dec 9, 2025
22f53dd
feat: Update and expand the landing page. Add a "read more" section e…
SvenVw Dec 9, 2025
88877f5
fix: button alignment
SvenVw Dec 9, 2025
9cf7b69
refactor: improve read more button
SvenVw Dec 9, 2025
6ca2165
Merge branch 'development' into FDM369
SvenVw Dec 12, 2025
1c055db
refactor: improve alt text of image
SvenVw Dec 12, 2025
ccc0110
Merge remote-tracking branch 'origin/development' into FDM369
SvenVw Dec 17, 2025
56061ca
refactor: improve atlas section
SvenVw Dec 17, 2025
867b021
refactor: improve page title and description
SvenVw Dec 17, 2025
a1ebfc2
refactor: improve metadata of landing page
SvenVw Dec 17, 2025
ff13589
refactor: make the layout consistent for the other signin pages
SvenVw Dec 17, 2025
99508d8
fix: error message when social sign does not work
SvenVw Dec 18, 2025
e6b17b1
fix: double word
SvenVw Dec 18, 2025
fb8e981
fix: alt text
SvenVw Dec 18, 2025
f5ac26d
fix: external links
SvenVw Dec 18, 2025
d03e76a
fix: respect user preference for scrolling
SvenVw Dec 18, 2025
b4a729b
refactor: improve text and layout of landing page
SvenVw Dec 18, 2025
51fae20
refactor: add screenshots to landing page and more details
SvenVw Dec 18, 2025
6098079
fix: typo
SvenVw Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/all-olives-march.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@svenvw/fdm-app": minor
---

Update and expand the landing page. Add a "read more" section explaining what fdm-app can do and how it can be used. Also improve the mobile responsiveness
4 changes: 2 additions & 2 deletions fdm-app/app/components/custom/banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,13 +183,13 @@ export function Banner() {
<>
<Button
onClick={handleAcceptCookies}
className="w-full"
className="w-1/2"
>
Accepteren
</Button>
<Button
onClick={handleDeclineCookies}
className="w-full"
className="w-1/2"
variant="secondary"
>
Weigeren
Expand Down
1,723 changes: 1,413 additions & 310 deletions fdm-app/app/routes/signin._index.tsx
View file
Open in desktop

Large diffs are not rendered by default.

109 changes: 53 additions & 56 deletions fdm-app/app/routes/signin.check-your-email.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,65 +76,62 @@ export default function SignIn() {
}

return (
<div>
<div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
<div className="flex h-screen items-center justify-center py-12">
<div className="mx-auto grid w-[350px] gap-6">
<div className="flex items-center justify-center gap-2">
<div className="flex aspect-square size-16 items-center justify-center rounded-lg bg-[#122023]">
<img
className="size-12"
src={clientConfig.logomark}
alt={clientConfig.name}
/>
<div className="w-full min-h-screen lg:grid lg:grid-cols-2">
<div className="flex items-center justify-center py-12">
<div className="mx-auto grid w-[350px] gap-6">
<Card className="shadow-xl">
<CardHeader className="text-center">
<div className="flex justify-center mb-4">
<div className="flex aspect-square size-16 items-center justify-center rounded-lg bg-[#122023]">
<img
className="size-12"
src={clientConfig.logomark}
alt={clientConfig.name}
/>
</div>
</div>
<div className="flex flex-col gap-0.5 leading-none">
<span className="font-semibold text-4xl">
{clientConfig.name}
</span>
</div>
</div>
<Card>
<CardHeader>
<CardTitle>
Controleer je e-mail inbox
</CardTitle>
<CardDescription>
Een tijdelijke aanmeldlink is naar je
e-mailadres gestuurd.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-muted-foreground">
De aanmeldlink is 15 minuten geldig en kan
maar één keer worden gebruikt.
</p>
</CardContent>
<CardFooter className="flex justify-center">
<Button
asChild
variant="secondary"
className="w-full"
>
<NavLink to="/signin">
Terug naar aanmelden
</NavLink>
</Button>
</CardFooter>
</Card>
</div>
</div>
<div className="hidden bg-muted lg:block">
<img
src="https://images.unsplash.com/photo-1662127245625-a72f1ad7e6ca?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt='Photo by <a href="https://unsplash.com/@datingjungle?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Datingjungle</a> on <a href="https://unsplash.com/photos/a-river-running-through-a-green-landscape-IXYb976ga5E?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>'
width="1920"
height="1080"
loading="lazy"
className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
/>
<h2 className="text-lg font-semibold tracking-tight text-muted-foreground mb-2">
{clientConfig.name}
</h2>
<CardTitle className="text-xl">
Controleer je e-mail inbox
</CardTitle>
<CardDescription>
Een tijdelijke aanmeldlink is naar je
e-mailadres gestuurd.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-muted-foreground text-center">
De aanmeldlink is 15 minuten geldig en kan maar
één keer worden gebruikt.
</p>
</CardContent>
<CardFooter className="flex justify-center">
<Button
asChild
variant="secondary"
className="w-full"
>
<NavLink to="/signin">
Terug naar aanmelden
</NavLink>
</Button>
</CardFooter>
</Card>
</div>
</div>
<div className="hidden bg-muted lg:block">
{/* Photo by <a href="https://unsplash.com/@datingjungle?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Datingjungle</a> on <a href="https://unsplash.com/photos/a-river-running-through-a-green-landscape-IXYb976ga5E?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> */}
<img
src="https://images.unsplash.com/photo-1662127245625-a72f1ad7e6ca?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="A river running through a green landscape"
width="1920"
height="1080"
loading="lazy"
className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
/>
</div>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
<div className="fixed bottom-3 left-3 z-50">
<Button
variant="ghost"
Expand Down
103 changes: 50 additions & 53 deletions fdm-app/app/routes/signin.invalid_token.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,62 +75,59 @@ export default function SignIn() {
}

return (
<div>
<div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
<div className="flex h-screen items-center justify-center py-12">
<div className="mx-auto grid w-[350px] gap-6">
<div className="flex items-center justify-center gap-2">
<div className="flex aspect-square size-16 items-center justify-center rounded-lg bg-[#122023]">
<img
className="size-12"
src={clientConfig.logomark}
alt={clientConfig.name}
/>
<div className="w-full min-h-screen lg:grid lg:grid-cols-2">
<div className="flex items-center justify-center py-12">
<div className="mx-auto grid w-[350px] gap-6">
<Card className="shadow-xl">
<CardHeader className="text-center">
<div className="flex justify-center mb-4">
<div className="flex aspect-square size-16 items-center justify-center rounded-lg bg-[#122023]">
<img
className="size-12"
src={clientConfig.logomark}
alt={clientConfig.name}
/>
</div>
</div>
<div className="flex flex-col gap-0.5 leading-none">
<span className="font-semibold text-4xl">
{clientConfig.name}
</span>
</div>
</div>
<Card>
<CardHeader>
<CardTitle>
Aanmeldlink is niet meer geldig
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-muted-foreground">
Helaas is de aanmeldlink niet meer geldig.
De link is slechts 15 minuten geldig en kan
maar één keer gebruikt worden.
</p>
</CardContent>
<CardFooter className="flex justify-center">
<Button
asChild
variant="default"
className="w-full"
>
<NavLink to="/signin">
Terug naar aanmelden
</NavLink>
</Button>
</CardFooter>
</Card>
</div>
</div>
<div className="hidden bg-muted lg:block">
<img
src="https://images.unsplash.com/photo-1722086853375-8b4d97ca666a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt='Photo by <a href="https://unsplash.com/@ries_bosch?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Ries Bosch</a> on <a href="https://unsplash.com/photos/a-sheep-is-standing-in-a-grassy-field-jNAsTN4qPu4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>'
width="1920"
height="1080"
loading="lazy"
className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
/>
<h2 className="text-lg font-semibold tracking-tight text-muted-foreground mb-2">
{clientConfig.name}
</h2>
<CardTitle className="text-xl">
Aanmeldlink is niet meer geldig
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-muted-foreground text-center">
Helaas is de aanmeldlink niet meer geldig. De
link is slechts 15 minuten geldig en kan maar
één keer gebruikt worden.
</p>
</CardContent>
<CardFooter className="flex justify-center">
<Button
asChild
variant="default"
className="w-full"
>
<NavLink to="/signin">
Terug naar aanmelden
</NavLink>
</Button>
</CardFooter>
</Card>
</div>
</div>
<div className="hidden bg-muted lg:block">
{/* Photo by <a href="https://unsplash.com/@ries_bosch?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Ries Bosch</a> on <a href="https://unsplash.com/photos/a-sheep-is-standing-in-a-grassy-field-jNAsTN4qPu4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> */}
<img
src="https://images.unsplash.com/photo-1722086853375-8b4d97ca666a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="A sheep standing in a grassy field"
width="1920"
height="1080"
loading="lazy"
className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
/>
</div>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
<div className="fixed bottom-3 left-3 z-50">
<Button
variant="ghost"
Expand Down
Loading