Merge pull request #9 from saquibreja7-hash/design/ui-de-slop-hindi-flow

design: de-slop public pages, Hindi typography, survivor flow clarity

Author: saquibreja7-hash

asmita/package-lock.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@fontsource/noto-sans-devanagari": "^5.2.8",
+    "@fontsource/noto-serif-devanagari": "^5.2.10",
     "@pdf-lib/fontkit": "^1.1.1",
     "@prisma/adapter-pg": "^7.8.0",
     "@prisma/client": "^7.8.0",

asmita/package.json

@@ -1,5 +1,6 @@
 import { AppShell } from "@/components/layout/AppShell";
 import { RegisterForm } from "./RegisterForm";
+import { FlowProgress } from "@/components/FlowProgress";
 import { getLocale } from "@/lib/get-locale";
 import { t } from "@/lib/i18n";
 
@@ -59,6 +60,7 @@ export default async function RegisterPage() {
 
             {/* RIGHT - form */}
             <div className="min-w-0 flex-1">
+              <FlowProgress step={2} locale={locale} />
               <RegisterForm locale={locale} />
             </div>
 

asmita/src/app/(auth)/register/page.tsx

@@ -15,10 +15,50 @@ export default async function HowItWorksPage() {
     { num: "06", title: t(locale, "hiw.step6.title"), body: t(locale, "hiw.step6.body") },
   ];
 
+  const tierIconProps = {
+    width: 18,
+    height: 18,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round" as const,
+    strokeLinejoin: "round" as const,
+  };
+
   const tiers = [
-    { label: "Tier 01", icon: "✉", title: t(locale, "hiw.tier1.title"), body: t(locale, "hiw.tier1.body") },
-    { label: "Tier 02", icon: "↗", title: t(locale, "hiw.tier2.title"), body: t(locale, "hiw.tier2.body") },
-    { label: "Tier 03", icon: "⚡", title: t(locale, "hiw.tier3.title"), body: t(locale, "hiw.tier3.body") },
+    {
+      label: "Tier 01",
+      icon: (
+        <svg {...tierIconProps}>
+          <rect x="3" y="5" width="18" height="14" rx="2" />
+          <path d="M3 7l9 6 9-6" />
+        </svg>
+      ),
+      title: t(locale, "hiw.tier1.title"),
+      body: t(locale, "hiw.tier1.body"),
+    },
+    {
+      label: "Tier 02",
+      icon: (
+        <svg {...tierIconProps}>
+          <path d="M7 17L17 7" />
+          <path d="M9 7h8v8" />
+        </svg>
+      ),
+      title: t(locale, "hiw.tier2.title"),
+      body: t(locale, "hiw.tier2.body"),
+    },
+    {
+      label: "Tier 03",
+      icon: (
+        <svg {...tierIconProps}>
+          <path d="M13 2L4.5 13.5H11L10 22l8.5-11.5H12L13 2z" />
+        </svg>
+      ),
+      title: t(locale, "hiw.tier3.title"),
+      body: t(locale, "hiw.tier3.body"),
+    },
   ];
 
   const timeline = [
@@ -110,9 +150,12 @@ export default async function HowItWorksPage() {
                   <p className="font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--muted)]">
                     {tier.label}
                   </p>
-                  <p className="mt-3 text-2xl" aria-hidden>
+                  <span
+                    className="mt-3 inline-flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--teal-soft)] text-[var(--teal)]"
+                    aria-hidden
+                  >
                     {tier.icon}
-                  </p>
+                  </span>
                   <h3 className="font-display mt-2 text-[18px] font-normal leading-[1.25] tracking-tight md:text-[20px]">
                     {tier.title}
                   </h3>
@@ -137,26 +180,21 @@ export default async function HowItWorksPage() {
             <p className="muted mt-5 max-w-lg text-base leading-[1.75] md:text-[17px]">
               {t(locale, "hiw.escalation.sub")}
             </p>
-            <div className="mt-10 grid gap-4 md:grid-cols-3">
+            <div className="mt-10 grid gap-8 md:grid-cols-3 md:gap-6">
               {timeline.map((item, i) => (
                 <div
                   key={item.day}
-                  className="relative rounded-xl border border-[var(--border)] bg-[var(--surface)] p-6"
-                  style={{ boxShadow: "var(--shadow-soft)" }}
+                  className="pt-5"
+                  style={{
+                    borderTop: `2px solid ${i === 0 ? "var(--teal)" : i === 1 ? "var(--saffron)" : "var(--rose)"}`,
+                  }}
                 >
-                  <div className="mb-4 flex items-center gap-3">
-                    <div
-                      className="h-2 w-2 rounded-full"
-                      style={{ background: i === 0 ? "var(--teal)" : i === 1 ? "var(--saffron)" : "var(--rose)" }}
-                      aria-hidden
-                    />
-                    <p
-                      className="font-mono text-[11px] font-semibold uppercase tracking-[0.16em]"
-                      style={{ color: i === 0 ? "var(--teal)" : i === 1 ? "var(--saffron)" : "var(--rose)" }}
-                    >
-                      {item.day}
-                    </p>
-                  </div>
+                  <p
+                    className="mb-4 font-mono text-[11px] font-semibold uppercase tracking-[0.16em]"
+                    style={{ color: i === 0 ? "var(--teal)" : i === 1 ? "var(--saffron)" : "var(--rose)" }}
+                  >
+                    {item.day}
+                  </p>
                   <h3 className="font-display text-[18px] font-normal leading-[1.25] tracking-tight md:text-[20px]">
                     {item.title}
                   </h3>

asmita/src/app/(public)/how-it-works/page.tsx

@@ -91,17 +91,47 @@ export default async function HomePage() {
                 </p>
               </div>
               <div className="hidden md:block">
+                {/* Redacted notice preview - the real artifact this platform produces */}
                 <div
-                  className="rounded-xl border border-[var(--border)] bg-[var(--surface)] px-8 py-6 text-center"
-                  style={{ boxShadow: "var(--shadow-soft)" }}
+                  className="w-[300px] rounded-md border border-[var(--border)] bg-white p-6"
+                  style={{ boxShadow: "var(--shadow-soft)", transform: "rotate(0.5deg)" }}
+                  aria-hidden
                 >
-                  <p className="font-display text-[48px] font-normal leading-none text-[var(--teal)]">
-                    {t(locale, "home.blockA.stat")}
+                  <p className="font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--muted)]">
+                    Takedown notice
                   </p>
-                  <p className="muted mt-2 text-sm leading-[1.6]">
-                    {t(locale, "home.blockA.statLabel")}
+                  <p className="font-display mt-2 text-[15px] leading-snug">
+                    Re: Removal under Rule 3(2)(b), IT Rules 2021
                   </p>
+                  <div className="mt-4 space-y-2">
+                    <div className="h-2 rounded-full bg-[var(--hairline)]" />
+                    <div className="h-2 w-4/5 rounded-full bg-[var(--hairline)]" />
+                    <div className="h-2 w-2/3 rounded-full bg-[var(--foreground)] opacity-70" />
+                    <div className="h-2 rounded-full bg-[var(--hairline)]" />
+                    <div className="h-2 w-3/5 rounded-full bg-[var(--hairline)]" />
+                  </div>
+                  <p className="mt-4 font-mono text-[10px] text-[var(--muted)]">
+                    PDQ fingerprint only. No image attached.
+                  </p>
+                  <div className="mt-4 flex items-center justify-between border-t border-[var(--hairline)] pt-3">
+                    <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--teal)]">
+                      Signed
+                    </span>
+                    <svg width="12" height="10" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M1 4l2.5 2.5L9 1"
+                        stroke="var(--teal)"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </div>
                 </div>
+                <p className="muted mt-4 max-w-[300px] text-center text-sm leading-[1.6]">
+                  <span className="font-semibold text-[var(--teal)]">{t(locale, "home.blockA.stat")}</span>{" "}
+                  {t(locale, "home.blockA.statLabel")}
+                </p>
               </div>
             </div>
           </div>
@@ -120,13 +150,9 @@ export default async function HomePage() {
               <br />
               {t(locale, "home.blockB.title.2")}
             </h2>
-            <ul className="mt-10 space-y-4">
+            <ul className="mt-8 divide-y divide-[var(--hairline)]">
               {privacyItems.map(({ bold, detail }) => (
-                <li
-                  key={bold}
-                  className="flex items-start gap-4 rounded-xl border border-[var(--border)] bg-[var(--surface)] px-6 py-5"
-                  style={{ boxShadow: "var(--shadow-soft)" }}
-                >
+                <li key={bold} className="flex items-start gap-4 py-6">
                   <span
                     className="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--teal-soft)]"
                     aria-hidden
@@ -167,26 +193,24 @@ export default async function HomePage() {
           </div>
         </section>
 
-        <div className="container">
-          <div className="hairline" />
-        </div>
-
-        {/* CLOSING - invitation, not a sales pitch */}
-        <section className="container pb-24 pt-20 text-center md:pb-32 md:pt-28">
-          <div className="mx-auto max-w-2xl">
-            <h2 className="font-display text-[32px] font-normal leading-[1.15] tracking-tight md:text-[52px] md:leading-[1.12]">
-              {t(locale, "home.closing.title")}
-            </h2>
-            <p className="muted mx-auto mt-7 max-w-lg text-base leading-[1.75] md:text-lg">
-              {t(locale, "home.closing.body")}
-            </p>
-            <div className="mt-10 flex flex-wrap justify-center gap-3">
-              <Link className="btn btn-primary" href="/start">
-                {t(locale, "home.closing.cta1")}
-              </Link>
-              <Link className="btn btn-secondary" href="/faq">
-                {t(locale, "home.closing.cta2")}
-              </Link>
+        {/* CLOSING - full-bleed teal band, invitation not a sales pitch */}
+        <section className="band-teal">
+          <div className="container pb-20 pt-16 text-center md:pb-28 md:pt-24">
+            <div className="mx-auto max-w-2xl">
+              <h2 className="font-display text-[32px] font-normal leading-[1.15] tracking-tight md:text-[52px] md:leading-[1.12]">
+                {t(locale, "home.closing.title")}
+              </h2>
+              <p className="muted mx-auto mt-7 max-w-lg text-base leading-[1.75] md:text-lg">
+                {t(locale, "home.closing.body")}
+              </p>
+              <div className="mt-10 flex flex-wrap justify-center gap-3">
+                <Link className="btn btn-inverse" href="/start">
+                  {t(locale, "home.closing.cta1")}
+                </Link>
+                <Link className="btn btn-ghost-light" href="/faq">
+                  {t(locale, "home.closing.cta2")}
+                </Link>
+              </div>
             </div>
           </div>
         </section>

asmita/src/app/(public)/page.tsx

@@ -2,6 +2,7 @@ import { redirect } from "next/navigation";
 import { AppShell } from "@/components/layout/AppShell";
 import { requireSession } from "@/lib/auth/middleware";
 import { ReviewSignForm } from "./ReviewSignForm";
+import { FlowProgress } from "@/components/FlowProgress";
 import { getLocale } from "@/lib/get-locale";
 
 export default async function ReviewSignPage() {
@@ -15,6 +16,9 @@ export default async function ReviewSignPage() {
     <AppShell>
       <div className="page-canvas">
         <div className="container py-16 md:py-24">
+          <div className="mx-auto max-w-5xl">
+            <FlowProgress step={4} locale={locale} />
+          </div>
           <ReviewSignForm locale={locale} />
         </div>
       </div>

asmita/src/app/(victim)/review-sign/page.tsx

@@ -243,6 +243,18 @@ export function SubmitForm({ enableHashUpload = false, platforms = [], locale }:
             </ul>
           )}
 
+          {hashFiles.some((f) => f.status === "hashing") && (
+            <p className="muted text-sm leading-[1.6]">
+              {t(locale, "submit.hash.processingNote")}
+            </p>
+          )}
+
+          {hashedFiles.length > 0 && hashFiles.every((f) => f.status !== "hashing") && (
+            <p className="text-sm leading-[1.6] font-medium text-[var(--teal)]">
+              {t(locale, "submit.hash.doneNote")}
+            </p>
+          )}
+
           {lowQuality && (
             <p className="text-sm text-amber-700">
               {t(locale, "submit.hash.lowQuality")}

asmita/src/app/(victim)/submit/SubmitForm.tsx

@@ -1,5 +1,6 @@
 import { AppShell } from "@/components/layout/AppShell";
 import { SubmitForm } from "./SubmitForm";
+import { FlowProgress } from "@/components/FlowProgress";
 import { listHashPickerPlatforms, type HashPickerPlatform } from "@/lib/hash-submission";
 import { getLocale } from "@/lib/get-locale";
 import { t } from "@/lib/i18n";
@@ -71,6 +72,7 @@ export default async function SubmitPage() {
 
             {/* RIGHT - form */}
             <div className="min-w-0 flex-1">
+              <FlowProgress step={3} locale={locale} />
               <h1 className="font-display text-[28px] font-normal leading-[1.2] tracking-tight md:text-[36px]">
                 {t(locale, "submit.form.title")}
               </h1>

asmita/src/app/(victim)/submit/page.tsx

@@ -1,5 +1,6 @@
 import { AppShell } from "@/components/layout/AppShell";
 import { EligibilityWizard } from "./EligibilityWizard";
+import { FlowProgress } from "@/components/FlowProgress";
 import { getLocale } from "@/lib/get-locale";
 import { t } from "@/lib/i18n";
 
@@ -59,6 +60,7 @@ export default async function EligibilityPage() {
 
             {/* RIGHT - wizard steps */}
             <div className="min-w-0 flex-1">
+              <FlowProgress step={1} locale={locale} />
               <EligibilityWizard locale={locale} />
             </div>
 

asmita/src/app/eligibility/page.tsx

@@ -12,6 +12,7 @@
   --teal-soft: #e8f5f3;
   --saffron: #9f4f17;
   --rose: #b24a5a;
+  --font-deva: "Noto Sans Devanagari";
   --radius: 8px;
   --radius-lg: 14px;
   --shadow-soft: 0 16px 50px rgba(17, 24, 39, 0.06);
@@ -22,7 +23,7 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-inter), "Inter", "Noto Sans Devanagari", system-ui, sans-serif;
   --font-mono: var(--font-geist-mono), ui-monospace, monospace;
-  --font-display: var(--font-serif), "Iowan Old Style", Georgia, "Times New Roman", serif;
+  --font-display: var(--font-serif), "Noto Serif Devanagari", "Iowan Old Style", Georgia, "Times New Roman", serif;
 }
 
 body {
@@ -40,6 +41,17 @@ body {
   letter-spacing: -0.01em;
 }
 
+/* Devanagari needs no negative tracking (compresses matras/conjuncts)
+   and taller line-height for stacked diacritics */
+html[lang="hi"] body {
+  letter-spacing: 0;
+}
+
+html[lang="hi"] .font-display {
+  letter-spacing: 0;
+  line-height: 1.45;
+}
+
 a {
   text-decoration: none;
 }
@@ -275,6 +287,27 @@ select {
   opacity: 1;
 }
 
+/* Full-bleed teal band - breaks the cream card rhythm once per page */
+.band-teal {
+  background: var(--teal);
+  color: #ffffff;
+}
+
+.band-teal .muted {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.btn-inverse {
+  background: #ffffff;
+  color: var(--teal-dark);
+}
+
+.btn-ghost-light {
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  background: transparent;
+  color: #ffffff;
+}
+
 .site-footer {
   --site-footer-text: #1f2937;
   --site-footer-muted: #4b5563;