import { A } from '@solidjs/router'; import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'; import OpportunityGraph from '~/components/OpportunityGraph'; import PublicHeader from '~/components/PublicHeader'; import PublicFooter from '~/components/PublicFooter'; type PathCard = { title: string; description: string; button: string; chip: string; icon: 'briefcase' | 'user' | 'users' | 'code' | 'camera' | 'sparkles' | 'grad' | 'film' | 'pen' | 'share' | 'dumbbell' | 'utensils'; href: string; image: string; audience: 'customer' | 'professional' | 'company' | 'job_seeker'; }; type Flow = { label: string; title: string; description: string; image: string; steps: Array<{ title: string; description: string }>; }; const pathCards: PathCard[] = [ { title: 'Post a Job', description: 'Create verified job openings and find the right talent faster.', button: 'Start as Company', chip: 'Company', icon: 'briefcase', href: '/auth/register?intent=company&redirect=/users/onboarding/company', audience: 'company', image: 'https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?q=80&w=800&auto=format&fit=crop', }, { title: 'Apply for Jobs', description: 'Build your profile and apply to approved opportunities quickly.', button: 'Start as Job Seeker', chip: 'Job Seeker', icon: 'user', href: '/auth/register?intent=job_seeker&redirect=/users/onboarding/job-seeker', audience: 'job_seeker', image: 'https://images.unsplash.com/photo-1586281380349-632531db7ed4?q=80&w=800&auto=format&fit=crop', }, { title: 'Hire a Professional', description: 'Post your requirement and discover trusted specialists.', button: 'Start as Customer', chip: 'Customer', icon: 'users', href: '/auth/register?intent=customer&redirect=/users/onboarding/customer', audience: 'customer', image: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=800&auto=format&fit=crop', }, { title: 'Join as Developer', description: 'Build products and grow with verified client demand.', button: 'Join Developer', chip: 'Professional', icon: 'code', href: '/auth/register?intent=professional&redirect=/users/onboarding/professional&profession=developer', audience: 'professional', image: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=800&auto=format&fit=crop', }, { title: 'Join as Photographer', description: 'Capture events and campaigns with trusted bookings.', button: 'Join Photographer', chip: 'Professional', icon: 'camera', href: '/auth/register?intent=professional&redirect=/users/onboarding/professional&profession=photographer', audience: 'professional', image: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?q=80&w=800&auto=format&fit=crop', }, { title: 'Join as Makeup Artist', description: 'Offer styling services with profile-based trust signals.', button: 'Join Makeup Artist', chip: 'Professional', icon: 'sparkles', href: '/auth/register?intent=professional&redirect=/users/onboarding/professional&profession=makeup_artist', audience: 'professional', image: 'https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=800&auto=format&fit=crop', }, { title: 'Join as Tutor', description: 'Teach learners and build your reputation with verified profiles.', button: 'Join Tutor', chip: 'Professional', icon: 'grad', href: '/auth/register?intent=professional&redirect=/users/onboarding/professional&profession=tutor', audience: 'professional', image: 'https://images.unsplash.com/photo-1497633762265-9d179a990aa6?q=80&w=800&auto=format&fit=crop', }, { title: 'Join as Video Editor', description: 'Create compelling edits and work with quality clients.', button: 'Join Video Editor', chip: 'Professional', icon: 'film', href: '/auth/register?intent=professional&redirect=/users/onboarding/professional&profession=video_editor', audience: 'professional', image: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?q=80&w=800&auto=format&fit=crop', }, { title: 'Join as Graphic Designer', description: 'Design brand-ready visuals and collaborate with growing businesses.', button: 'Join Graphic Designer', chip: 'Professional', icon: 'pen', href: '/auth/register?intent=professional&redirect=/users/onboarding/professional&profession=graphic_designer', audience: 'professional', image: 'https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=800&auto=format&fit=crop', }, { title: 'Join as Social Media Manager', description: 'Plan campaigns and scale audience growth for clients.', button: 'Join Social Manager', chip: 'Professional', icon: 'share', href: '/auth/register?intent=professional&redirect=/users/onboarding/professional&profession=social_media_manager', audience: 'professional', image: 'https://images.unsplash.com/photo-1611162618071-b39a2ec055fb?q=80&w=800&auto=format&fit=crop', }, { title: 'Join as Fitness Trainer', description: 'Coach clients with structured plans and trusted profiles.', button: 'Join Trainer', chip: 'Professional', icon: 'dumbbell', href: '/auth/register?intent=professional&redirect=/users/onboarding/professional&profession=fitness_trainer', audience: 'professional', image: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=800&auto=format&fit=crop', }, { title: 'Join as Catering Services', description: 'Showcase event-ready menus to customers and companies.', button: 'Join Catering', chip: 'Professional', icon: 'utensils', href: '/auth/register?intent=professional&redirect=/users/onboarding/professional&profession=catering_services', audience: 'professional', image: 'https://images.unsplash.com/photo-1555244162-803834f70033?q=80&w=800&auto=format&fit=crop', }, ]; const benefits = [ { title: 'Verified profiles & businesses', body: 'Identity and profile checks reduce fake submissions and spam.', icon: 'shield-check' }, { title: 'Approval-based quality (24-48 hours)', body: 'Profiles, requirements, and jobs are reviewed before visibility.', icon: 'zap' }, { title: 'Smart matching using tags/skills', body: 'Tag-based relevance helps surface better opportunities faster.', icon: 'hash' }, { title: 'Focused discovery with filters', body: 'Search and filter tools keep opportunity discovery focused.', icon: 'search' }, { title: 'Controlled contact visibility', body: 'Sensitive contact flow remains controlled by role and workflow.', icon: 'lock' }, { title: 'Notifications & updates', body: 'Track approvals, responses, applications, and key updates.', icon: 'bell' }, ] as const; const flows: Flow[] = [ { label: 'Customers', title: 'Need to solution, with verified trust in the middle', description: 'Post your requirement, pass quality checks, and receive focused responses.', image: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1200&auto=format&fit=crop', steps: [ { title: 'Create account', description: 'Sign up quickly with customer intent.' }, { title: 'Share requirement', description: 'Add budget, scope, and timing.' }, { title: 'Review and verify', description: 'Quality checks run before visibility.' }, { title: 'Track responses', description: 'Monitor replies and status updates.' }, ], }, { label: 'Professionals', title: 'Profile first, opportunity next', description: 'Build profile quality once, then receive better-fit lead discovery.', image: 'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=1200&auto=format&fit=crop', steps: [ { title: 'Pick role and skills', description: 'Choose service category and specialization.' }, { title: 'Build profile', description: 'Add portfolio, strengths, and proof.' }, { title: 'Pass verification', description: 'Approval protects platform trust.' }, { title: 'Respond to opportunities', description: 'Manage matching leads in one flow.' }, ], }, { label: 'Companies', title: 'Hiring workflows without chaos', description: 'Publish requirements, keep quality high, and track applicants clearly.', image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1200&auto=format&fit=crop', steps: [ { title: 'Create company profile', description: 'Set hiring context and org details.' }, { title: 'Post requirements', description: 'Publish role details and expectations.' }, { title: 'Approval before publish', description: 'Listings are reviewed first.' }, { title: 'Manage pipeline', description: 'Track candidates and responses.' }, ], }, { label: 'Job Seekers', title: 'Onboard once, apply with confidence', description: 'Get visible only after approval, then discover jobs with targeted filters.', image: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=1200&auto=format&fit=crop', steps: [ { title: 'Set up profile', description: 'Complete essentials and work preferences.' }, { title: 'Approval check', description: 'Review keeps quality consistent.' }, { title: 'Explore matching jobs', description: 'Filter by practical criteria.' }, { title: 'Apply and track', description: 'Submit applications and watch status.' }, ], }, ]; const faqs = [ { q: 'What is Nxtgauge?', a: 'Nxtgauge connects customers, professionals, companies, and job seekers in one trusted platform.', }, { q: 'Who can join Nxtgauge?', a: 'Customers, service professionals, companies, and job seekers can create an account and choose their path.', }, { q: 'Why does Nxtgauge require verification?', a: 'Verification helps reduce fake profiles and improves trust across the platform.', }, { q: 'How long does account approval take?', a: 'Most profile approvals are completed within 24-48 hours.', }, { q: 'Do I need to choose my role during signup?', a: 'No. You can sign up once and continue with the role flow that fits you best.', }, ] as const; const chipNodes = [ { kind: 'code', left: '2%', top: '14%', size: 44, cls: 'lp-chip-slow' }, { kind: 'camera', left: '94%', top: '22%', size: 46, cls: 'lp-chip-mid' }, { kind: 'briefcase', left: '3%', top: '76%', size: 46, cls: 'lp-chip-fast' }, { kind: 'bell', left: '93%', top: '80%', size: 42, cls: 'lp-chip-slow' }, { kind: 'sparkles', left: '50%', top: '6%', size: 40, cls: 'lp-chip-mid' }, ] as const; function ChipIcon(props: { kind: (typeof chipNodes)[number]['kind'] }) { const common = { fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' } as const; if (props.kind === 'camera') { return ( ); } if (props.kind === 'briefcase') { return ( ); } if (props.kind === 'bell') { return ( ); } if (props.kind === 'sparkles') { return ( ); } return ( ); } function PathRoleIcon(props: { kind: PathCard['icon'] }) { const common = { fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' } as const; if (props.kind === 'briefcase') return ; if (props.kind === 'user') return ; if (props.kind === 'users') return ; if (props.kind === 'code') return ; if (props.kind === 'camera') return ; if (props.kind === 'sparkles') return ; if (props.kind === 'grad') return ; if (props.kind === 'film') return ; if (props.kind === 'pen') return ; if (props.kind === 'share') return ; if (props.kind === 'dumbbell') return ; return ; } function CheckBadgeIcon() { return ( ); } function WhyBenefitIcon(props: { kind: (typeof benefits)[number]['icon'] }) { const common = { fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' } as const; if (props.kind === 'shield-check') { return ( ); } if (props.kind === 'zap') { return ( ); } if (props.kind === 'hash') { return ( ); } if (props.kind === 'search') { return ( ); } if (props.kind === 'lock') { return ( ); } return ( ); } export default function PublicLanding() { const [reduceMotion, setReduceMotion] = createSignal(false); const [scrollY, setScrollY] = createSignal(0); const [heroTilt, setHeroTilt] = createSignal({ x: 0, y: 0 }); const [pathPage, setPathPage] = createSignal(0); const [cardsPerPage, setCardsPerPage] = createSignal(3); const [pathPaused, setPathPaused] = createSignal(false); const [pathTouchStartX, setPathTouchStartX] = createSignal(null); const [benefitIdx, setBenefitIdx] = createSignal(0); const [flowIndex, setFlowIndex] = createSignal(0); const [flowStepIndex, setFlowStepIndex] = createSignal(0); const [openFaq, setOpenFaq] = createSignal(0); const [showBackToTop, setShowBackToTop] = createSignal(false); onMount(() => { const media = window.matchMedia('(prefers-reduced-motion: reduce)'); const syncMotion = () => setReduceMotion(media.matches); syncMotion(); let ticking = false; const onScroll = () => { setShowBackToTop(window.scrollY > 500); if (media.matches) return; if (ticking) return; ticking = true; requestAnimationFrame(() => { setScrollY(window.scrollY || 0); ticking = false; }); }; const syncCardsPerPage = () => { const w = window.innerWidth; if (w < 640) { setCardsPerPage(1); return; } if (w < 1024) { setCardsPerPage(2); return; } setCardsPerPage(3); }; onScroll(); syncCardsPerPage(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', syncCardsPerPage); media.addEventListener('change', syncMotion); const benefitTimer = window.setInterval(() => setBenefitIdx((x) => (x + 1) % benefits.length), 4200); const flowTimer = window.setInterval(() => { const active = flows[flowIndex()]; setFlowStepIndex((prev) => { const next = prev + 1; if (next < active.steps.length) return next; setFlowIndex((f) => (f + 1) % flows.length); return 0; }); }, 3000); onCleanup(() => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', syncCardsPerPage); media.removeEventListener('change', syncMotion); window.clearInterval(benefitTimer); window.clearInterval(flowTimer); }); }); const pagedPaths = createMemo(() => { const cards = pathCards; const per = cardsPerPage(); const pages: PathCard[][] = []; for (let i = 0; i < cards.length; i += per) pages.push(cards.slice(i, i + per)); return pages; }); const activePathPage = createMemo(() => { const pages = pagedPaths(); if (pages.length === 0) return 0; return pathPage() % pages.length; }); createEffect(() => { const pagesLen = pagedPaths().length; if (reduceMotion() || pathPaused() || pagesLen <= 1) return; const timer = window.setInterval(() => { setPathPage((prev) => { const next = prev + 1; return next >= pagesLen ? 0 : next; }); }, 4200); onCleanup(() => window.clearInterval(timer)); }); return (
); }