diff --git a/.changeset/all-olives-march.md b/.changeset/all-olives-march.md new file mode 100644 index 000000000..faff10b7e --- /dev/null +++ b/.changeset/all-olives-march.md @@ -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 diff --git a/fdm-app/app/components/custom/banner.tsx b/fdm-app/app/components/custom/banner.tsx index 1347c46e3..b572c718c 100644 --- a/fdm-app/app/components/custom/banner.tsx +++ b/fdm-app/app/components/custom/banner.tsx @@ -183,13 +183,13 @@ export function Banner() { <> + + + )} + + ) +} + /** * Renders the sign-in page with social authentication options. * @@ -115,6 +266,10 @@ function getSafeRedirect(address: string | null) { */ export default function SignIn() { const [searchParams, setSearchParams] = useSearchParams() // Get search params + const moreInfoRef = useRef(null) + const [socialSignInError, setSocialSignInError] = useState( + null, + ) const rawRedirectTo = searchParams.get("redirectTo") const redirectTo = getSafeRedirect(rawRedirectTo) // Validate redirectTo to prevent open redirect @@ -134,7 +289,7 @@ export default function SignIn() { ) const handleSignInError = (provider: string, error: unknown) => { - toast( + setSocialSignInError( `Er is helaas iets misgegaan bij het aanmelden met ${provider}. Probeer het opnieuw.`, ) console.error("Social sign-in failed:", error) @@ -148,6 +303,15 @@ export default function SignIn() { openCookieSettings() } + const scrollToMoreInfo = () => { + const reduce = window.matchMedia?.( + "(prefers-reduced-motion: reduce)", + )?.matches + moreInfoRef.current?.scrollIntoView({ + behavior: reduce ? "auto" : "smooth", + }) + } + const form = useRemixForm>({ mode: "onTouched", resolver: zodResolver(FormSchema), @@ -163,334 +327,1273 @@ export default function SignIn() { }, [form.setValue]) return ( -
-
-
-
-
-
- {clientConfig.name} -
-
- - {clientConfig.name} - +
+ +
+ {/* Mobile Background Image */} +
+ Background +
+
+ +
+
+
+ + +
+
+ {clientConfig.name} +
+
+

+ {clientConfig.name} +

+ + Meld je aan om toegang te krijgen tot je + dashboard. + + + +
+
+ +
+
+ +
+ {socialSignInError && ( +

+ {socialSignInError} +

+ )} +
+
+
+ +
+
+ + Of + +
+
+ + + + + +

+ Door verder te gaan, gaat u akkoord met + het{" "} + + Privacybeleid + +

+ + +
+
- {/* End logo and title fix */} -

- {`Maak een account aan bij ${clientConfig.name} en krijg toegang tot:`} -

-
+
+
+
+ A tractor plowing a field at sunset +
+
+
+
+
+
-
- - {" "} - -
-

- Nutriëntenbalans -

-

- Aanvoer en afvoer van nutriënten op - bedrijfsniveau -

+
+ + Innovatie in de praktijk +
+

+ Samen leren en innoveren +

+
+

+ {clientConfig.name} is een initiatief + van het Nutriënten Management Instituut + (NMI) en is volop in ontwikkeling, maar + nu al inzetbaar voor uw bedrijf.{" "} + {clientConfig.name} is bovendien een + open-source. Dit betekent transparantie + en de mogelijkheid voor derden om bij te + dragen aan de doorontwikkeling. Door + drie innovatieve projecten samen te + brengen, faciliteren we kennisdeling en + versnellen we de transitie naar een + duurzamere landbouw: +

+
    +
  • + + + + Pilot Maatwerkaanpak: + {" "} + In samenwerking met boeren, de + agrarische sector, + kennisinstellingen, overheden en + overheidsorganisaties testen we + hoe doelsturing werkt in de + praktijk, met de Stikstofbalans + als basis. + +
    • +
  • + + + + PPS BAAT: + {" "} + Samen met Wageningen Plant + Research maken we + bemestingsadvies toegankelijker. + Krijg inzicht in zowel de + geadviseerde gift als + milieu-impact voor een bewuste + meststofkeuze. + +
    • +
  • + + + + Open Bodem Index & BBWP: + {" "} + Deze twee veelgebruikte methoden + helpen boeren en adviseurs nu al + in het effectief nemen van + maatregelen en het inzicht + krijgen in de bodemgezondheid. + In 2026 komen OBI en BBWP ook + beschikbaar in{" "} + {clientConfig.name} en maken we + ze nog toegangelijker. + +
    • +
+
+
+

+ Partners +

+
+ ZLTO•LTO Noord + •WUR•LVVN• + NVWA•RVO
-
-
+
+ + + + + + Uitgangspunten + + + +
+
+ +
+
+

+ Praktijktoets +

+

+ Leren en ontdekken hoe + doelsturing werkt in de + echte wereld. +

+
+
+
+
+ +
+
+

+ Transparant & deelbaar +

+

+ Als open-source inititiaf + zijn de rekenregels en + methodes beschikbaar en kan + iedereen deze lezen en + verbeteringn ops + voorstellen. +

+
+
+
+
+ +
+
+

+ In ontwikkeling +

+

+ Een groeiend platform dat + continu wordt verbeterd op + basis van uw feedback. +

+
+
+ + +
+
+
+
+ +
+
+
+

+ Doelsturing: Kansen en uitdagingen +

+

+ Doelsturing kan een effectieve methode zijn om + de waterkwaliteit te verbeteren en + ammoniakemissies te verminderen, doordat u als + ondernemer zelf de maatregelen kiest. De + keerzijde is dat dit vraagt om veel en + gedetailleerde data. {clientConfig.name} streeft + ernaar om deze complexe berekening zo eenvoudig + mogelijk te maken, zonder in te leveren op + nauwkeurigheid. +

+
+ +
+ {/* Connecting line for desktop */} +
+ - - {" "} - -
-

- OS Balans -

-

- Opbouw van organische stof per - perceel -

+ + +
+ +
+ {/* Step 1: Supply */} +
+
+
+

+ Aanvoer +

+
    +
  • • Kunstmest
    • +
  • • Dierlijke mest
    • +
  • • Compost
    • +
  • • Overige meststoffen
    • +
  • • Bodemlevering
    • +
  • • Depositie
    • +
+
+ + {/* Step 2: Removal & Ammonia */} +
+
+ +
+

+ Afvoer & Emissie +

+
    +
  • • Oogst
    • +
  • • Gewasresten
    • +
  • • Ammoniak
    • +
  • • Nitraat
    • +
+
+ + {/* Step 3: Surplus */} +
+
+ +
+

+ Stikstofbodemoverschot +

+

+ Het stikstofbodemoverschot laat zien hoe + efficiënt stikstof wordt gebruik. +

+
+ + {/* Step 4: Leaching */} +
+
+ +
+

+ Waterkwaliteit +

+

+ Nitraatuitspoeling berekend als fractie + van het overschot. +

+
+
+
+ +
+
+
+

+ Atlas: Alles in kaart gebracht +

+

+ Verken agrarisch Nederland met de interactieve + Atlas. Navigeer door de jaren heen en krijg + direct inzicht in perceelshistorie, het + microreliëf en gebiedskenmerken. +

+
+
+ {/* 1. Rotatie (Wide Top-Left) */} + +
+
+ +
+ + Gewasrotatie in beeld + +

+ De interactieve kaart toont + gewaspercelen tot 2020, helder + ingekleurd per gewasgroup. Krijg direct + visueel inzicht in toegepaste rotaties + door de jaren heen. +

+
+
+ Gewasrotatie screenshot +
+ + + {/* 3. History (Tall Right) - HTML order swapped for Mobile/Desktop strategy, + but explicit grid placement puts it on the right. + Actually, if I want Elevation second on mobile, History must be 3rd in HTML. + Explicit grid placement handles Desktop. */} + + {/* 2. Elevation (Wide Middle-Left) */} + + +
+ +
+ + Hoogtekaart (AHN4) + +

+ Bekijk de AHN4 voor een gedetailleerde + weergave van het hoogteverloop. +

+ +
+ Hoogtekaart AHN4 +
+ + + {/* 3. History (Tall Right) */} + + +
+ +
+ + Gewashistorie + +

+ Klik op een perceel voor meer + informatie: bekijk de volledige + gewashistorie tot 2009. +

+ +
+ Gewashistorie screenshot +
+ + {/* 4. Normen (Small Bottom-Left) */} + + +
+ +
+ + Gebiedsgerichte normen + + + +

+ Zie direct in welke regio's voor de + gebruiksnormen het perceel ligt. +

+ + + + {/* 5. Bodem (Wide Bottom-Right) */} + + +
+ +
+ + Bodem & water + + + +

+ Raadpleeg data voor uw gewas: van + grondwatertrappen tot de + bodemsamenstelling zoals zand-, klei- en + siltgehalte. +

+ + +
{" "} +
+
+ +
+
+
+

+ Bemestingsadviezen: Kennis binnen handbereik +

+

+ Bij NMI hebben we jarenlange kennis van + bemesting en bodemvruchtbaarheid omgezet in + digitale adviezen, direct beschikbaar in{" "} + {clientConfig.name}. +

+
+ +
+ {/* Left: Text with Benefits */}
-
- - {" "} - -
-

- Meststofkeuzeadviestool +

+ Altijd het juiste advies voor uw gewas +

+
+
+ +
+

+ Gebundelde expertise +

+

+ We brengen per perceel en voor + elk gewas in beeld wat de + gewenste bemesting is volgens de + adviezen uit{" "} + + CBGV (Bemestingsadvies) + {" "} + en{" "} + + CBAV (Handboek Bodem en + Bemesting) + {" "} + . +

+
+
+
+ +
+

+ Voor alle nutriënten +

+

+ Adviezen omvatten primaire (N, + P, K), organische stof, + secundaire en micronutriënten, + specifiek voor uw gewas en + bodemtoestand. +

+
+
+
+ +
+

+ Inzicht in uw bemesting +

+

+ Naast de geadviseerde gift tonen + we per nutriënt ook hoeveel u + daadwerkelijk heeft gegeven, + gebaseerd op uw ingevoerde + bemestingsplannen. +

+
+
+
+
+ + {/* Right: Emphasize Importance */} + + + + + Waarom is een bemestingsadvies + belangrijk + + + +

+ Bemestingsadviezen gaan verder dan enkel + de wettelijke + + {" "} + gebruiksnormen + + . Ze zijn cruciaal for: +

+
    +
  • + + + Optimale opbrengst en kwaliteit + van het gewas. + +
    • +
  • + + + Het behouden en verbeteren van + bodemvruchtbaarheid op lange + termijn. + +
    • +
  • + + + Efficiënt gebruik van + nutriënten, ter voorkoming van + overbemesting en verliezen. + +
    • +
+ + +
+ + {/* Full width screenshot */} +
+
+
+
+
+
+
+ {/*
+ fdm.app/advies +
*/} +
+
+ Bemestingsadvies tabel +
+
+
+
+ +
+
+
+

+ Gebruiksruimte: Binnen de kaders, met inzicht +

+

+ Naast een bemestingsadvies is ook de wettelijke + gebruiksruimte cruciaal. {clientConfig.name}{" "} + berekent uw gebruiksruimte zodat u bij het + bepalen van uw bemestingsplan ook ziet of u deze + niet overschrijdt op perceels- en + bedrijfsniveau. +

+
+ +
+ {/* Left: Features */} +
+
+
+ +
+
+

+ Blijf binnen de normen +

+

+ We berekenen de gebruiksruimte for + stikstof (N), fosfaat (P2O5) en + dierlijke mest op basis van uw + percelen en gewassen en tellen die + op naar bedrijfsniveau. Zo ziet u + direct of uw bemestingsplan voldoet.

-

- Integraal bemestingsadvies dat - rekening houdt met productie en - milieu +

+
+
+
+ +
+
+

+ Inzicht in de berekening +

+

+ Geen zwarte doos: we geven inzicht + in de opbouw van de berekening, + inclusief alle correcties en normen + die voor uw specifieke situatie + gelden.

+ + {/* Right: Disclaimer Box */} +
+
+ +

+ Hulp bij berekenen +

+
+

+ {clientConfig.name} helpt je bij het + berekenen van de gebruiksnormen. De getoonde + getallen zijn indicatief en bedoeld ter + ondersteuning. +

+

+ Voor de juridische werkelijkheid en + definitieve opgaven verwijzen we je naar de + RVO en je adviseur. +

+
+
+
+
+ +
+
+
+

+ Handige functies +

+

+ Van slimme imports tot samenwerken met uw + adviseur. Met handige functies proberen we het + zo makkelijk mogelijk te maken om eenvoudig + gegevens in te vullen, zodat u snel toegang + heeft tot +

- - - -

- Let op! + +

+ {/* Feature 1: Import */} +
+
+ +
+

+ Percelen ophalen bij RVO +

+

+ Start direct door uw percelen in te lezen + via een RVO shapefile. Uw percelen staan + binnen enkele seconden correct op de kaart, + inclusief het gewas.

- - -

- {`${clientConfig.name} is nog in ontwikkeling. Functionaliteiten - kunnen nog ontbreken of veranderen.`} +

+ Binnenkort heeft u ook de mogelijkheid + direct vanuit RVO percelen te importeren met + behulp van eHerkenning.

- - - - - Aanmelden - - Kies een van de onderstaande opties om aan - te melden. - - - -
-
- -
-
- -
+
+ + {/* Feature 2: PDF Parsing */} +
+
+
-
-
- -
-
- - Of - +

+ Bodemanalyses +

+

+ Upload de PDF van uw bodemanalyse en{" "} + {clientConfig.name} leest automatisch de + juiste waarden uit. Heeft u geen + bodemanalyse voor een perceel? Dan kunt u + gebruiken maken van geschatte bodemwaardes + door het NMI. +

+
+ + {/* Feature 3: Bulk Actions */} +
+
+ +
+

+ Slimme tabellen +

+

+ Beheer uw bouwplan, bemesting en oogst in + overzichtelijke tabellen. Voer acties uit + voor meerdere percelen of gewassen tegelijk. +

+
+
+ + {/* Collaboration Section */} +
+
+
+
+ + Samenwerking
+

+ Deel kennis, behoud controle +

+

+ {clientConfig.name} is gebouwd for + samenwerking. Geef uw adviseur of + organisatie toegang om mee te kijken of + advies te geven. +

+
    +
  • +
    + +
    + + Nodig adviseurs uit per mail + +
    • +
  • +
    + +
    + + Deel met uw organisatie + +
    • +
- - - - - -

- Door verder te gaan, gaat u akkoord met het{" "} - - Privacybeleid - -

- - - {/*
- -
*/} + + +
+
+
-
- Photo by <a href="https://unsplash.com/@tombelgium?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Tom De Decker</a> on <a href="https://unsplash.com/photos/a-tractor-plowing-a-field-at-sunset-_dnc3j1oVlk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> +
+
+

+ Nieuwsgierig naar de mogelijkheden? +

+

+ Probeer {clientConfig.name} uit. We horen graag wat + uw mening is en of u tips heeft. +

+ +
+
+ +
+
+
+

+ Veelgestelde vragen +

+

+ Antwoorden op de meest voorkomende vragen over{" "} + {clientConfig.name}. +

+
+ + + + + Wat kost het gebruik van {clientConfig.name} + ? + + + {clientConfig.name} is een open-source + initiatief en momenteel gratis te gebruiken + tijdens de pilotfase. Ons doel is om een + toegankelijke standaard te zetten voor de + sector. + + + + + + Wat heb ik nodig om te starten? + + + Om optimaal gebruik te maken van{" "} + {clientConfig.name} heeft u uw perceelsdata + (RVO shapefile) en recente bodemanalyses + (PDF) nodig. U kunt deze eenvoudig + importeren. + + + + + + Is mijn data veilig? + + + Ja. Uw data wordt versleuteld opgeslagen en + is alleen toegankelijk voor u. U bepaalt + zelf of en met wie (bijv. uw adviseur) u + gegevens deelt. + + + + + + Kan ik samenwerken met mijn adviseur? + + + Zeker. U kunt uw adviseur of andere + betrokkenen uitnodigen voor uw bedrijf. U + bepaalt welke rechten zij krijgen. + + + + + + Is {clientConfig.name} een officieel + overheidsinstrument? + + + Nee, {clientConfig.name} is ontwikkeld door + NMI als ondersteunend instrument voor de + sector. Hoewel we nauw samenwerken met onze + partners, dient het als inzicht- en + adviestool, niet voor wettelijke aangifte. + + + + + + Waar kan ik terecht voor ondersteuning? + + + Voor technische vragen of feedback kunt u + contact opnemen met het supportteam van NMI. + We horen graag uw bevindingen om{" "} + {clientConfig.name} verder te verbeteren.{" "} + {clientConfig.name} bevat ook een + feedbackknop in de zijbalk om eenvoudig + feedback te geven. + + + +
+
+ +
+
+
+
+
+
+ {clientConfig.name} +
+ + {clientConfig.name} + +
+

+ Innovatieve software voor een duurzame + landbouw. Een initiatief van het NMI in + samenwerking met de sector. +

+
+ +
+

Links

+ +
+
+
+ Ontwikkeld door het Nutriënten Management Instituut. + Gelicentieerd onder de MIT-licentie. +
+
-
-
-
) diff --git a/fdm-app/app/routes/signin.check-your-email.tsx b/fdm-app/app/routes/signin.check-your-email.tsx index 3e16f7858..c072b5894 100644 --- a/fdm-app/app/routes/signin.check-your-email.tsx +++ b/fdm-app/app/routes/signin.check-your-email.tsx @@ -76,65 +76,62 @@ export default function SignIn() { } return ( -
-
-
-
-
-
- {clientConfig.name} +
+
+
+ + +
+
+ {clientConfig.name} +
-
- - {clientConfig.name} - -
-
- - - - Controleer je e-mail inbox - - - Een tijdelijke aanmeldlink is naar je - e-mailadres gestuurd. - - - -

- De aanmeldlink is 15 minuten geldig en kan - maar één keer worden gebruikt. -

- - - - - -
-
-
- 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> +

+ {clientConfig.name} +

+ + Controleer je e-mail inbox + + + Een tijdelijke aanmeldlink is naar je + e-mailadres gestuurd. + + + +

+ De aanmeldlink is 15 minuten geldig en kan maar + één keer worden gebruikt. +

+ + + + +
+
+ {/* Photo by Datingjungle on Unsplash */} + A river running through a green landscape +
- - -
-
-
- 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> +

+ {clientConfig.name} +

+ + Aanmeldlink is niet meer geldig + + + +

+ Helaas is de aanmeldlink niet meer geldig. De + link is slechts 15 minuten geldig en kan maar + één keer gebruikt worden. +

+ + + + +
+
+ {/* Photo by Ries Bosch on Unsplash */} + A sheep standing in a grassy field +
+ />
- - - - - - - {/*
- -
*/} -
-
-
- Herd of cows on green grass field during daytime by Rickie-Tom Schünemann on Unsplash +
+ ( + + + Achternaam + + + + + + + + )} + /> +
+ +
+ + + + + +
+
+ Herd of cows on green grass field during daytime by Rickie-Tom Schünemann on Unsplash +