feat(frontend): build public website home page in solid
This commit is contained in:
Ashwin Kumar
parent
6083f0e0fa
commit
c21492bf31
4 changed files with 338 additions and 37 deletions
BIN
public/nxtgauge-icon.png
Normal file
BIN
public/nxtgauge-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
public/nxtgauge-logo.png
Normal file
BIN
public/nxtgauge-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
251
src/app.css
251
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<main class="page">
|
||||
<h1 class="title">NXTGAUGE Frontend (SolidStart)</h1>
|
||||
<p class="subtitle">Runtime-only onboarding demo for customer, professional, company, and jobseeker.</p>
|
||||
<section class="card" style={{ 'margin-top': '16px' }}>
|
||||
<p>Open onboarding flows:</p>
|
||||
<div class="actions">
|
||||
<A class="btn" href="/onboarding?schemaId=customer_onboarding_v1">Customer</A>
|
||||
<A class="btn" href="/onboarding?schemaId=professional_onboarding_v1">Professional</A>
|
||||
<A class="btn" href="/onboarding?schemaId=company_onboarding_v1">Company</A>
|
||||
<A class="btn" href="/onboarding?schemaId=jobseeker_onboarding_v1">Jobseeker</A>
|
||||
<main class="landing">
|
||||
<header class="topbar">
|
||||
<div class="container nav-row">
|
||||
<img class="brand-logo" src="/nxtgauge-logo.png" alt="NXTGAUGE" />
|
||||
<div class="nav-actions">
|
||||
<A class="btn" href="/onboarding?schemaId=customer_onboarding_v1">Start</A>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero-wrap">
|
||||
<div class="container hero-grid">
|
||||
<div>
|
||||
<p class="eyebrow">Launch City: Chennai, India</p>
|
||||
<h1 class="hero-title">Verified Hiring and Services, Powered by Runtime Config</h1>
|
||||
<p class="hero-copy">
|
||||
NXTGAUGE connects customers, professionals, companies, and jobseekers with role-based onboarding,
|
||||
document verification, and dashboard-ready profiles.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<A class="btn primary" href="/onboarding?schemaId=customer_onboarding_v1">I Want To Hire</A>
|
||||
<A class="btn" href="/onboarding?schemaId=professional_onboarding_v1">I Am A Professional</A>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-panel">
|
||||
<h3>Professional Categories</h3>
|
||||
<div class="chip-grid">
|
||||
{professionalCategories.map((item) => (
|
||||
<span class="chip">{item}</span>
|
||||
))}
|
||||
</div>
|
||||
<p class="note">Customer onboarding Step 1 starts with selecting one of these service categories.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Choose Your Flow</h2>
|
||||
<p class="section-copy">Each role stays separate and gets its own onboarding questions from runtime schema.</p>
|
||||
<div class="role-grid">
|
||||
{roleCards.map((card) => (
|
||||
<article class="role-card">
|
||||
<span class="role-badge">{card.badge}</span>
|
||||
<h3>{card.title}</h3>
|
||||
<p>{card.description}</p>
|
||||
<A class="btn primary" href={card.cta}>Open {card.title} Onboarding</A>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section soft">
|
||||
<div class="container split">
|
||||
<div class="card">
|
||||
<h3>Verification First</h3>
|
||||
<p>
|
||||
Document steps are runtime controlled, with PDF-only validation for identity/business verification and
|
||||
2MB limits.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Portfolio Ready</h3>
|
||||
<p>
|
||||
Professional onboarding supports image portfolio uploads up to 6 files, ready for 3x2 dashboard preview.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>No Hardcoded Fallback</h3>
|
||||
<p>
|
||||
Forms load from runtime schemas. Admin-published config is picked first, then seeded runtime config for
|
||||
local demo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue