diff --git a/public/nxtgauge-icon.png b/public/nxtgauge-icon.png new file mode 100644 index 0000000..22a58dd Binary files /dev/null and b/public/nxtgauge-icon.png differ diff --git a/public/nxtgauge-logo.png b/public/nxtgauge-logo.png new file mode 100644 index 0000000..b4e7e9b Binary files /dev/null and b/public/nxtgauge-logo.png differ diff --git a/src/app.css b/src/app.css index fc5ded3..9e09ee9 100644 --- a/src/app.css +++ b/src/app.css @@ -1,6 +1,11 @@ +@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&display=swap'); + :root { --brand-orange: #fd6216; + --brand-orange-dark: #e45a14; --brand-navy: #050026; + --ink: #100b2f; + --bg-soft: #f6f8ff; } * { @@ -9,9 +14,208 @@ body { margin: 0; - font-family: 'Exo 2', system-ui, sans-serif; - background: linear-gradient(140deg, #fff6f0 0%, #f7f8fc 42%, #eef2ff 100%); - color: var(--brand-navy); + font-family: 'Exo 2', sans-serif; + color: var(--ink); + background: + radial-gradient(120% 90% at 0% 0%, rgba(253, 98, 22, 0.22), transparent 52%), + radial-gradient(100% 80% at 100% 0%, rgba(26, 54, 93, 0.16), transparent 56%), + linear-gradient(180deg, #fff9f4 0%, #f8f9ff 48%, #eef2ff 100%); +} + +.container { + width: min(1140px, calc(100% - 32px)); + margin: 0 auto; +} + +.topbar { + position: sticky; + top: 0; + z-index: 40; + border-bottom: 1px solid rgba(15, 23, 42, 0.08); + background: rgba(255, 255, 255, 0.82); + backdrop-filter: blur(10px); +} + +.nav-row { + min-height: 74px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.brand-logo { + height: 46px; + width: auto; +} + +.nav-actions { + display: flex; + gap: 10px; +} + +.landing { + min-height: 100vh; +} + +.hero-wrap { + padding: 38px 0 20px; +} + +.hero-grid { + display: grid; + grid-template-columns: 1.2fr 0.8fr; + gap: 18px; +} + +.eyebrow { + margin: 0; + font-weight: 700; + color: var(--brand-orange); +} + +.hero-title { + margin: 8px 0 12px; + font-size: clamp(30px, 4vw, 52px); + line-height: 1.06; +} + +.hero-copy { + margin: 0; + color: #475569; + font-size: 16px; +} + +.hero-actions { + margin-top: 18px; + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.hero-panel { + border: 1px solid #dbe1ec; + border-radius: 18px; + background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.78)); + padding: 16px; + box-shadow: 0 20px 42px -30px rgba(2, 6, 23, 0.66); +} + +.hero-panel h3 { + margin: 0 0 10px; + font-size: 20px; +} + +.chip-grid { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.chip { + border-radius: 999px; + border: 1px solid #fed7aa; + background: #fff7ed; + color: #9a3412; + font-size: 12px; + font-weight: 700; + padding: 6px 10px; +} + +.section { + padding: 28px 0; +} + +.section.soft { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.6)); + border-top: 1px solid rgba(148, 163, 184, 0.24); +} + +.section-title { + margin: 0; + font-size: 30px; +} + +.section-copy { + margin: 8px 0 0; + color: #64748b; +} + +.role-grid { + margin-top: 16px; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; +} + +.role-card, +.card { + border: 1px solid #dbe1ec; + border-radius: 16px; + background: #fff; + padding: 14px; +} + +.role-card h3 { + margin: 8px 0; + font-size: 22px; +} + +.role-card p, +.card p, +.note { + margin: 0; + color: #64748b; + font-size: 14px; + line-height: 1.5; +} + +.role-badge { + display: inline-block; + border-radius: 999px; + border: 1px solid rgba(253, 98, 22, 0.36); + background: rgba(253, 98, 22, 0.1); + color: #9a3412; + font-size: 11px; + font-weight: 700; + padding: 4px 9px; +} + +.role-card .btn { + margin-top: 12px; +} + +.split { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} + +.card h3 { + margin-top: 0; +} + +.btn { + border: 1px solid #cbd5e1; + border-radius: 10px; + padding: 10px 14px; + font-weight: 700; + background: #fff; + color: #0f172a; + text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.btn.primary { + border-color: var(--brand-orange); + background: var(--brand-orange); + color: #fff; +} + +.btn.primary:hover { + background: var(--brand-orange-dark); } .page { @@ -20,13 +224,6 @@ body { padding: 24px; } -.card { - background: #fff; - border: 1px solid #e2e8f0; - border-radius: 16px; - padding: 18px; -} - .title { margin: 0; font-size: 30px; @@ -83,25 +280,9 @@ body { margin-top: 16px; } -.btn { - border: 1px solid #cbd5e1; - border-radius: 10px; - padding: 10px 14px; - font-weight: 700; - background: #fff; - cursor: pointer; -} - -.btn.primary { - border-color: var(--brand-orange); - background: var(--brand-orange); - color: #fff; -} - .note { margin-top: 8px; font-size: 12px; - color: #64748b; } .ok { @@ -137,8 +318,24 @@ body { overflow: auto; } -@media (max-width: 900px) { +@media (max-width: 980px) { + .hero-grid, + .split, .grid { grid-template-columns: 1fr; } + + .role-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .role-grid { + grid-template-columns: 1fr; + } + + .hero-wrap { + padding-top: 24px; + } } diff --git a/src/routes/index.tsx b/src/routes/index.tsx index add06a9..7f36488 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,17 +1,121 @@ import { A } from '@solidjs/router'; +const roleCards = [ + { + title: 'Customer', + description: 'Find verified professionals in Chennai and submit exact requirements by category.', + cta: '/onboarding?schemaId=customer_onboarding_v1', + badge: 'Hire', + }, + { + title: 'Professional', + description: 'Create your profile, upload portfolio, and complete identity verification.', + cta: '/onboarding?schemaId=professional_onboarding_v1', + badge: 'Offer Services', + }, + { + title: 'Company', + description: 'Set hiring preferences and verify your business documents for trusted recruitment.', + cta: '/onboarding?schemaId=company_onboarding_v1', + badge: 'Recruit', + }, + { + title: 'Jobseeker', + description: 'Share your profile, experience and documents once, then continue from dashboard.', + cta: '/onboarding?schemaId=jobseeker_onboarding_v1', + badge: 'Apply', + }, +]; + +const professionalCategories = [ + 'Photographer', + 'Makeup Artist', + 'Tutor', + 'Developer', + 'Video Editor', + 'Graphic Designer', + 'Social Media Manager', + 'Fitness Trainer', + 'Catering Services', +]; + export default function Home() { return ( -
-

NXTGAUGE Frontend (SolidStart)

-

Runtime-only onboarding demo for customer, professional, company, and jobseeker.

-
-

Open onboarding flows:

-
- Customer - Professional - Company - Jobseeker +
+
+
+ +
+ Start +
+
+
+ +
+
+
+

Launch City: Chennai, India

+

Verified Hiring and Services, Powered by Runtime Config

+

+ NXTGAUGE connects customers, professionals, companies, and jobseekers with role-based onboarding, + document verification, and dashboard-ready profiles. +

+
+ I Want To Hire + I Am A Professional +
+
+
+

Professional Categories

+
+ {professionalCategories.map((item) => ( + {item} + ))} +
+

Customer onboarding Step 1 starts with selecting one of these service categories.

+
+
+
+ +
+
+

Choose Your Flow

+

Each role stays separate and gets its own onboarding questions from runtime schema.

+
+ {roleCards.map((card) => ( + + ))} +
+
+
+ +
+
+
+

Verification First

+

+ Document steps are runtime controlled, with PDF-only validation for identity/business verification and + 2MB limits. +

+
+
+

Portfolio Ready

+

+ Professional onboarding supports image portfolio uploads up to 6 files, ready for 3x2 dashboard preview. +

+
+
+

No Hardcoded Fallback

+

+ Forms load from runtime schemas. Admin-published config is picked first, then seeded runtime config for + local demo. +

+