feat(frontend): add next parity batch for public routes

docs/PAGE_PARITY_TRACKER.md

@@ -0,0 +1,40 @@
+# Frontend Page Parity Tracker
+
+Source repo: `/Users/ashwin/workspace/nxtgauge-frontendwebsite` (Next.js)
+Target repo: `/Users/ashwin/workspace/nxtgauge-frontend-solid` (SolidStart)
+
+## Status Legend
+- `done`: implemented in Solid with matching visual direction
+- `in_progress`: route exists, partial parity
+- `pending`: not ported yet
+
+## Public / Marketing
+- `/` `done`
+- `/about` `in_progress`
+- `/contact` `in_progress`
+- `/help-center` `in_progress`
+- `/help-center/article/[slug]` `pending`
+- `/support` `in_progress`
+- `/support/article/[slug]` `pending`
+- `/hire` `in_progress`
+- `/privacy` `in_progress`
+- `/terms` `in_progress`
+- `/companies` `in_progress`
+- `/professionals` `in_progress`
+- `/job-seeker` `in_progress`
+
+## Auth
+- `/auth/login` `in_progress`
+- `/auth/register` `in_progress`
+- `/auth/forgot-password` `pending`
+- `/auth/verification` `pending`
+- `/auth/login-verification` `pending`
+
+## User Workspaces (large scope)
+- `/users/*` `pending`
+- `/companies/*` dashboards `pending`
+- `/job-seeker/(workspace)/*` `pending`
+
+## Notes
+- Goal is strict visual/interaction parity with old Next.js design system, including dark gradients, glassmorphism, motion accents, and CTA structure.
+- Runtime onboarding flow already exists in Solid at `/onboarding` and will be integrated into remaining route parity.

src/app.css

@@ -770,3 +770,45 @@ body {
     grid-template-columns: 1fr;
   }
 }
+
+.marketing-page {
+  padding-top: 28px;
+  padding-bottom: 28px;
+}
+
+.glass-dark {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: linear-gradient(145deg, rgba(16, 11, 47, 0.78), rgba(16, 11, 47, 0.5));
+  color: #fff;
+  backdrop-filter: blur(14px);
+}
+
+.glass-light {
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.84));
+  backdrop-filter: blur(14px);
+}
+
+.title.light,
+.subtitle.light,
+.light {
+  color: #fff;
+}
+
+.glass-light .subtitle {
+  color: #334155;
+}
+
+.glass-light ul,
+.glass-light li,
+.glass-light p,
+.glass-light h1,
+.glass-light h2,
+.glass-light h3,
+.glass-light h4 {
+  color: #100b2f;
+}
+
+.glass-dark .subtitle {
+  color: rgba(255, 255, 255, 0.82);
+}

src/routes/about.tsx

@@ -2,29 +2,33 @@ import { A } from '@solidjs/router';
 
 export default function AboutPage() {
   return (
-    <main class="page">
+    <main class="page marketing-page">
-      <p class="eyebrow">About NXTGAUGE</p>
+      <section class="card glass-dark">
-      <h1 class="title">Trust-First Marketplace and Hiring Platform</h1>
+        <p class="eyebrow">Brand Story</p>
-      <p class="subtitle">
+        <h1 class="title light">Trust-first hiring and services.</h1>
-        NXTGAUGE helps customers, professionals, companies, and jobseekers connect through role-specific onboarding,
+        <p class="subtitle light">
-        verification checks, and runtime-configured workflows.
+          Nxtgauge is built to reduce noise, improve quality, and help people connect with confidence.
-      </p>
+        </p>
-
+        <div class="actions">
-      <section class="card" style={{ 'margin-top': '16px' }}>
+          <A class="btn primary" href="/contact">Contact us</A>
-        <h3>What We Focus On</h3>
+          <A class="btn ghost-dark" href="/">Back Home</A>
-        <p class="subtitle">Role separation, verified identities, and city-by-city controlled launch quality.</p>
+        </div>
-        <ul>
-          <li>Customer intent-first onboarding for service requests</li>
-          <li>Professional onboarding with portfolio and verification</li>
-          <li>Company onboarding with business compliance checks</li>
-          <li>Jobseeker onboarding with profile and document validation</li>
-        </ul>
       </section>
 
-      <div class="actions">
+      <section class="grid" style={{ 'margin-top': '14px' }}>
-        <A class="btn primary" href="/onboarding?schemaId=customer_onboarding_v1">Start As Customer</A>
+        <article class="card glass-light">
-        <A class="btn" href="/contact">Contact Us</A>
+          <h3>Our Manifesto</h3>
-      </div>
+          <ul>
+            <li>Verify what matters</li>
+            <li>Reduce spam and guesswork</li>
+            <li>Match people faster</li>
+          </ul>
+        </article>
+        <article class="card glass-light">
+          <h3>How trust works</h3>
+          <p>Submission → Human review → Approval → Marketplace visibility.</p>
+        </article>
+      </section>
     </main>
   );
 }

src/routes/auth/login/index.tsx

@@ -0,0 +1,16 @@
+import { A } from '@solidjs/router';
+
+export default function LoginPage() {
+  return (
+    <main class="page marketing-page">
+      <section class="card glass-light">
+        <h1 class="title">Login</h1>
+        <p class="subtitle">Auth parity page scaffolded. Final auth integration to be connected in next migration stage.</p>
+        <div class="actions">
+          <A class="btn primary" href="/">Back Home</A>
+          <A class="btn" href="/auth/register">Register</A>
+        </div>
+      </section>
+    </main>
+  );
+}

src/routes/auth/register/index.tsx

@@ -0,0 +1,16 @@
+import { A } from '@solidjs/router';
+
+export default function RegisterPage() {
+  return (
+    <main class="page marketing-page">
+      <section class="card glass-light">
+        <h1 class="title">Register</h1>
+        <p class="subtitle">Auth parity page scaffolded. Final OTP/signup integration to be connected in next migration stage.</p>
+        <div class="actions">
+          <A class="btn primary" href="/">Back Home</A>
+          <A class="btn" href="/auth/login">Login</A>
+        </div>
+      </section>
+    </main>
+  );
+}

src/routes/companies/index.tsx

@@ -0,0 +1,14 @@
+import { A } from '@solidjs/router';
+
+export default function CompaniesLandingPage() {
+  return (
+    <main class="page marketing-page">
+      <section class="card glass-dark">
+        <p class="eyebrow">For Companies</p>
+        <h1 class="title light">Post jobs with verified company identity</h1>
+        <p class="subtitle light">Complete company onboarding and manage recruitment workflows with trust signals.</p>
+        <A class="btn primary" href="/onboarding?schemaId=company_onboarding_v1">Start Company Onboarding</A>
+      </section>
+    </main>
+  );
+}

src/routes/contact.tsx

@@ -1,25 +1,68 @@
-import { A } from '@solidjs/router';
+import { createMemo, createSignal } from 'solid-js';
 
 export default function ContactPage() {
-  return (
+  const [name, setName] = createSignal('');
-    <main class="page">
+  const [email, setEmail] = createSignal('');
-      <p class="eyebrow">Contact NXTGAUGE</p>
+  const [topic, setTopic] = createSignal('');
-      <h1 class="title">We Are Here To Help</h1>
+  const [message, setMessage] = createSignal('');
-      <p class="subtitle">For onboarding, verification, or launch support, contact our team.</p>
+  const [sent, setSent] = createSignal(false);
 
-      <section class="card" style={{ 'margin-top': '16px' }}>
+  const canSubmit = createMemo(() => name().trim() && email().trim() && topic().trim() && message().trim().length >= 20);
-        <h3>Support Details</h3>
+
-        <p><strong>Email:</strong> support@nxtgauge.com</p>
+  return (
-        <p><strong>Launch City:</strong> Chennai, India</p>
+    <main class="page marketing-page">
-        <p><strong>Support Window:</strong> 10:00 AM - 7:00 PM IST</p>
+      <section class="card glass-dark">
+        <p class="eyebrow">Reach Out</p>
+        <h1 class="title light">Contact us</h1>
+        <p class="subtitle light">Tell us what you need — we’ll get back to you.</p>
       </section>
 
-      <section class="card" style={{ 'margin-top': '12px' }}>
+      <section class="grid" style={{ 'margin-top': '14px' }}>
-        <h3>Quick Actions</h3>
+        <form
-        <div class="actions">
+          class="card glass-light"
-          <A class="btn primary" href="/onboarding?schemaId=customer_onboarding_v1">Start Onboarding</A>
+          onSubmit={(e) => {
-          <A class="btn" href="/about">About Us</A>
+            e.preventDefault();
-        </div>
+            if (!canSubmit()) return;
+            setSent(true);
+            setTimeout(() => setSent(false), 2500);
+            setName('');
+            setEmail('');
+            setTopic('');
+            setMessage('');
+          }}
+        >
+          <div class="field">
+            <label class="label">Full Name</label>
+            <input class="input" value={name()} onInput={(e) => setName(e.currentTarget.value)} />
+          </div>
+          <div class="field">
+            <label class="label">Email</label>
+            <input class="input" type="email" value={email()} onInput={(e) => setEmail(e.currentTarget.value)} />
+          </div>
+          <div class="field">
+            <label class="label">Topic</label>
+            <select class="select" value={topic()} onInput={(e) => setTopic(e.currentTarget.value)}>
+              <option value="">Select topic</option>
+              <option>Account & Login</option>
+              <option>Verification</option>
+              <option>Leads / Matching</option>
+              <option>Other</option>
+            </select>
+          </div>
+          <div class="field">
+            <label class="label">Message</label>
+            <textarea class="textarea" value={message()} onInput={(e) => setMessage(e.currentTarget.value)} />
+          </div>
+          <button class="btn primary" disabled={!canSubmit()} type="submit">Send message</button>
+          {sent() && <p class="note ok">Message sent. We&apos;ll reply soon.</p>}
+        </form>
+
+        <aside class="card glass-dark">
+          <h3 class="light">Contact details</h3>
+          <p class="subtitle light">support@nxtgauge.com</p>
+          <p class="subtitle light">Typically within 24–48 hours</p>
+          <p class="subtitle light">Chennai, India</p>
+        </aside>
       </section>
     </main>
   );

src/routes/help-center/index.tsx

@@ -0,0 +1,30 @@
+import { A } from '@solidjs/router';
+
+const articles = [
+  { slug: 'how-verification-works', title: 'How verification works' },
+  { slug: 'how-to-post-a-requirement', title: 'How to post a requirement' },
+  { slug: 'profile-approval-timeline', title: 'Profile approval timeline' },
+];
+
+export default function HelpCenterPage() {
+  return (
+    <main class="page marketing-page">
+      <section class="card glass-dark">
+        <p class="eyebrow">Help Center</p>
+        <h1 class="title light">Knowledge base and support guides</h1>
+        <p class="subtitle light">Find quick answers for onboarding, verification, and account workflows.</p>
+      </section>
+
+      <section class="card glass-light" style={{ 'margin-top': '14px' }}>
+        <h3>Popular Articles</h3>
+        <div class="faq-list">
+          {articles.map((item) => (
+            <A class="faq-item" href={`/support/article/${item.slug}`}>
+              <span class="faq-q"><span>{item.title}</span><span>→</span></span>
+            </A>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}

src/routes/hire.tsx

@@ -0,0 +1,14 @@
+import { A } from '@solidjs/router';
+
+export default function HirePage() {
+  return (
+    <main class="page marketing-page">
+      <section class="card glass-dark">
+        <p class="eyebrow">For Customers</p>
+        <h1 class="title light">Hire verified professionals in Chennai</h1>
+        <p class="subtitle light">Start with category selection, share requirements, and track verified responses.</p>
+        <A class="btn primary" href="/onboarding?schemaId=customer_onboarding_v1">Start Customer Onboarding</A>
+      </section>
+    </main>
+  );
+}

src/routes/job-seeker/index.tsx

@@ -0,0 +1,14 @@
+import { A } from '@solidjs/router';
+
+export default function JobSeekerLandingPage() {
+  return (
+    <main class="page marketing-page">
+      <section class="card glass-dark">
+        <p class="eyebrow">For Job Seekers</p>
+        <h1 class="title light">Onboard once and apply with confidence</h1>
+        <p class="subtitle light">Complete profile, experience, and identity verification to access opportunities.</p>
+        <A class="btn primary" href="/onboarding?schemaId=jobseeker_onboarding_v1">Start Jobseeker Onboarding</A>
+      </section>
+    </main>
+  );
+}

src/routes/privacy.tsx

@@ -0,0 +1,15 @@
+export default function PrivacyPage() {
+  return (
+    <main class="page marketing-page">
+      <section class="card glass-light">
+        <h1 class="title">Privacy Policy</h1>
+        <p class="subtitle">We collect only necessary account, onboarding, and verification data for platform operations and trust.</p>
+        <ul>
+          <li>Data used for role onboarding and verification.</li>
+          <li>Access controlled by role and workflow.</li>
+          <li>Support: support@nxtgauge.com.</li>
+        </ul>
+      </section>
+    </main>
+  );
+}

src/routes/professionals.tsx

@@ -0,0 +1,14 @@
+import { A } from '@solidjs/router';
+
+export default function ProfessionalsPage() {
+  return (
+    <main class="page marketing-page">
+      <section class="card glass-dark">
+        <p class="eyebrow">For Professionals</p>
+        <h1 class="title light">Build your verified professional profile</h1>
+        <p class="subtitle light">Upload portfolio (up to 6), submit PDF identity docs, and unlock lead flow.</p>
+        <A class="btn primary" href="/onboarding?schemaId=professional_onboarding_v1">Start Professional Onboarding</A>
+      </section>
+    </main>
+  );
+}

src/routes/support/index.tsx

@@ -0,0 +1,17 @@
+import { A } from '@solidjs/router';
+
+export default function SupportPage() {
+  return (
+    <main class="page marketing-page">
+      <section class="card glass-dark">
+        <p class="eyebrow">Support</p>
+        <h1 class="title light">Need help with your account?</h1>
+        <p class="subtitle light">Open help guides or contact support directly for faster resolution.</p>
+        <div class="actions">
+          <A class="btn primary" href="/contact">Contact Support</A>
+          <A class="btn ghost-dark" href="/help-center">Open Help Center</A>
+        </div>
+      </section>
+    </main>
+  );
+}

src/routes/terms.tsx

@@ -0,0 +1,15 @@
+export default function TermsPage() {
+  return (
+    <main class="page marketing-page">
+      <section class="card glass-light">
+        <h1 class="title">Terms and Conditions</h1>
+        <p class="subtitle">Using NXTGAUGE means accepting role-based onboarding, verification checks, and platform moderation policies.</p>
+        <ul>
+          <li>Accounts must provide accurate information.</li>
+          <li>Verification documents are mandatory for approval.</li>
+          <li>Spam or fraudulent activity may lead to suspension.</li>
+        </ul>
+      </section>
+    </main>
+  );
+}