Update 112Schade proposal: rename to March2026, redesign login/cover/nav, add inbox mockup, update pricing and content

- Rename route from /112SchadeProposalV2 to /112SchadeProposalMarch2026
- Redesign login screen with NoBoxDev branding and #DDE2E7 background
- Update cover section with product description and aligned typography
- Replace nav with NoBoxDev logo, updated section links with separators
- Reorder and update all feature sections with new pricing
- Add AI inbox mockup, replace emojis with text icons across mockups
- Update messaging mockup with realistic Dutch conversation
- Add "NIEUW" badge replacing star emoji in feature map
- Update contact section, roadmap placeholders, and migration text
- Update homepage Contact button color and input background

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: MemeVeels

…salV2/components/AboutSection.module.css …h2026/components/AboutSection.module.cssapp/112SchadeProposalV2/components/AboutSection.module.css renamed to app/112SchadeProposalMarch2026/components/AboutSection.module.css app/112SchadeProposalV2/components/AboutSection.module.css renamed to app/112SchadeProposalMarch2026/components/AboutSection.module.css

@@ -4,21 +4,7 @@ export default function AboutSection() {
   return (
     <section id="about" className={styles.about}>
       <div className={styles.container}>
-        <span className={styles.label}>Over</span>
-        <h2 className={styles.title}>112Schade V1 — Waar We Staan</h2>
         <div className={styles.grid}>
-          <div className={styles.text}>
-            <p>
-              112Schade is een platform voor schadebeheer dat mensen helpt bij
-              het navigeren van verzekeringsschade. Momenteel gebouwd in Bubble,
-              verwerkt het schade-intake, operatorbeheer en communicatie met verzekeraars.
-            </p>
-            <p>
-              Het platform werkt — maar wordt beperkt door de limieten van Bubble.
-              V2 verhuist naar code, voegt AI-intelligentie toe, automatiseert
-              operatorworkflows en levert een native mobiele ervaring.
-            </p>
-          </div>
           <div>
             <div className={styles.platformPreview}>
               <div className={styles.previewHeader}>
@@ -67,6 +53,13 @@ export default function AboutSection() {
               </div>
             </div>
           </div>
+          <div className={styles.text}>
+            <span className={styles.label}>Over</span>
+            <h2 className={styles.title}>112Schade Applicatie MVP</h2>
+            <p>
+              De MVP van app.112schade is een no-code webapplicatie die is opgebouwd in Bubble en functioneert als een combinatie van front-end, back-endlogica en database in één omgeving. De applicatie bestaat uit verschillende gebruikersflows voor schade-intake, dossierbeheer en statusopvolging, waarbij gegevens via formulieren worden ingevoerd, opgeslagen in de Bubble-database en vervolgens via workflows verder worden verwerkt.
+            </p>
+          </div>
         </div>
       </div>
     </section>

…deProposalV2/components/AboutSection.tsx …salMarch2026/components/AboutSection.tsxapp/112SchadeProposalV2/components/AboutSection.tsx renamed to app/112SchadeProposalMarch2026/components/AboutSection.tsx app/112SchadeProposalV2/components/AboutSection.tsx renamed to app/112SchadeProposalMarch2026/components/AboutSection.tsx

@@ -3,7 +3,7 @@
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  padding: 64px clamp(1.25rem, 3vw, 3rem);
+  padding: 64px 0;
   background: linear-gradient(135deg, #FE795D 0%, #F06A4A 40%, #E5603F 100%);
   overflow: hidden;
 }
@@ -39,14 +39,15 @@
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
+  padding: 0 clamp(1.25rem, 3vw, 3rem);
   display: flex;
   flex-direction: column;
   min-height: calc(100vh - 128px);
 }
 
 .title {
   font-family: var(--font-display);
-  font-size: clamp(4rem, 9vw, 8rem);
+  font-size: clamp(3.5rem, 7.5vw, 6.5rem);
   font-weight: 400;
   color: white;
   letter-spacing: -0.04em;
@@ -89,6 +90,27 @@
   padding-bottom: 20px;
 }
 
+.productDesc {
+  margin-top: auto;
+  max-width: 600px;
+  padding-bottom: 40px;
+}
+
+.productTitle {
+  font-family: 'Titillium Web', var(--font-body);
+  font-size: 1rem;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 12px;
+}
+
+.productBody {
+  font-family: 'Titillium Web', var(--font-body);
+  font-size: 0.9rem;
+  line-height: 1.75;
+  color: rgba(255, 255, 255, 0.75);
+}
+
 @media (max-width: 768px) {
   .cover {
     padding: 48px 24px;

…salV2/components/CoverSection.module.css …h2026/components/CoverSection.module.cssapp/112SchadeProposalV2/components/CoverSection.module.css renamed to app/112SchadeProposalMarch2026/components/CoverSection.module.css app/112SchadeProposalV2/components/CoverSection.module.css renamed to app/112SchadeProposalMarch2026/components/CoverSection.module.css

@@ -0,0 +1,33 @@
+import Image from "next/image";
+import styles from "./CoverSection.module.css";
+
+export default function CoverSection() {
+  return (
+    <section className={styles.cover}>
+      <div className={styles.glow} />
+      <Image
+        src="/images/polygon-45.png"
+        alt=""
+        width={900}
+        height={900}
+        className={styles.polygon}
+        priority
+      />
+      <div className={styles.content}>
+        <h1 className={styles.title}>Dashboard 112Schade</h1>
+        <div className={styles.divider} />
+        <div className={styles.meta}>
+          <span className={styles.metaTag}>112Schade V2</span>
+          <span className={styles.metaTag}>Platform Upgrade</span>
+          <span className={styles.metaTag}>Maart 2026</span>
+        </div>
+        <div className={styles.productDesc}>
+          <h3 className={styles.productTitle}>Productbeschrijving:</h3>
+          <p className={styles.productBody}>
+            app.112schade.nl is een webapplicatie waarmee gebruikers eenvoudig schadeclaims na een incident kunnen registreren, beheren en volgen. In plaats van het traditionele proces met formulieren, e-mail en losse documenten, biedt het platform een gestructureerde digitale omgeving waarin alle informatie rondom een schadezaak wordt verzameld. Gebruikers kunnen hun schade melden, foto&apos;s en documenten uploaden en de voortgang van hun dossier volgen. Hierdoor ontstaat één centrale plek waar het volledige claimproces overzichtelijk wordt vastgelegd.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

app/112SchadeProposalMarch2026/components/CoverSection.tsx

@@ -26,8 +26,8 @@
 .grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 64px;
-  align-items: center;
+  gap: 80px;
+  align-items: start;
 }
 
 .gridReverse {

…lV2/components/FeatureSection.module.css …026/components/FeatureSection.module.cssapp/112SchadeProposalV2/components/FeatureSection.module.css renamed to app/112SchadeProposalMarch2026/components/FeatureSection.module.css app/112SchadeProposalV2/components/FeatureSection.module.css renamed to app/112SchadeProposalMarch2026/components/FeatureSection.module.css

@@ -9,18 +9,10 @@ export default function MigrationSection() {
             <span className={styles.badge}>Inbegrepen zonder extra kosten</span>
             <h2 className={styles.title}>Platformmigratie</h2>
             <p className={styles.desc}>
-              Het Bubble-prototype was een essentiële stap — het stelde ons in staat
-              het concept te valideren, workflows te testen en het product te vormen
-              met echte gebruikers. Dat werk is niet verloren. Elke workflow,
-              automatiseringsregel en elk stuk logica uit Bubble wordt de blauwdruk
-              voor het productieplatform.
+              Voor de volgende fase in de ontwikkeling van 112Schade adviseren wij een migratie van de huidige Bubble-applicatie naar een eigen codebase. Bubble heeft uitstekend gefunctioneerd voor het ontwikkelen en valideren van de eerste versie van het product en het testen van workflows met echte gebruikers. Naarmate het platform verder groeit, zien we echter dat de mogelijkheden en flexibiliteit van het platform steeds vaker een beperking vormen voor verdere productontwikkeling.
             </p>
             <p className={styles.desc}>
-              Voor de volgende fase adviseren we een op maat gebouwde codebase.
-              Dit is niet opnieuw beginnen — het is een stap vooruit. De bewezen
-              workflows en bedrijfslogica migreren direct naar een schaalbare
-              architectuur die de AI-functies, automatisering en native mobiele
-              ervaring uit dit voorstel kan ondersteunen.
+              Het Bubble-prototype was een belangrijke stap in het ontwikkelproces en het werk dat daarin is gedaan blijft waardevol. De bestaande workflows, automatiseringen en bedrijfslogica vormen de basis voor het productieplatform. Met een op maat gebouwde codebase kunnen deze worden vertaald naar een schaalbare en toekomstbestendige architectuur die verdere groei en nieuwe functionaliteiten mogelijk maakt.
             </p>
           </div>
           <div className={styles.benefits}>
@@ -81,7 +73,7 @@ export default function MigrationSection() {
         <div className={styles.note}>
           <span className={styles.noteLabel}>€0</span>
           <span className={styles.noteText}>
-            De migratie is inbegrepen als onderdeel van dit project — wij zien het als het leggen van het fundament voor alles hierboven. Geen extra kosten.
+            De migratie naar een codebase is inbegrepen als onderdeel van dit project. Wij rekenen hiervoor geen extra kosten wanneer de overige onderdelen uit dit voorstel worden gerealiseerd. De kosten voor ontwikkeling, infrastructuur en hosting blijven onderdeel van het projectbudget. Wanneer er alleen gekozen wordt voor het herbouwen van de huidige Bubble-applicatie naar een codebase, zonder de overige onderdelen, geldt het reguliere tarief. Voor deze applicatie zou een standalone rebuild ongeveer €12.500 kosten.
           </span>
         </div>
       </div>

…ProposalV2/components/FeatureSection.tsx …lMarch2026/components/FeatureSection.tsxapp/112SchadeProposalV2/components/FeatureSection.tsx renamed to app/112SchadeProposalMarch2026/components/FeatureSection.tsx app/112SchadeProposalV2/components/FeatureSection.tsx renamed to app/112SchadeProposalMarch2026/components/FeatureSection.tsx

@@ -78,7 +78,8 @@
 }
 
 .phoneContent {
-  min-height: 680px;
+  height: 620px;
+  overflow: hidden;
 }
 
 /* -- Web frame -- */
@@ -139,6 +140,6 @@
   }
 
   .phoneContent {
-    min-height: 580px;
+    height: 480px;
   }
 }