Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 | 1x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 310x 310x 310x 310x 310x 310x 310x 62x 62x 62x 62x 62x 62x 62x 62x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 186x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 248x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 310x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x 62x | 'use client';
import Link from 'next/link';
import Image from 'next/image';
import {
ArrowRight,
CheckCircle2,
Shield,
Zap,
Globe,
MessageCircle,
Users,
Star,
BadgeCheck,
Sparkles,
TrendingUp,
Lock,
Search,
Clock,
Code,
Palette,
GraduationCap,
Briefcase,
Play,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
ProfessionalsSection,
TrustScoreSection,
AdminApprovalSection,
} from '@/components/homepage';
import { PublicHeader } from '@/components/layout/PublicHeader';
import { PublicFooter } from '@/components/layout/PublicFooter';
export default function LandingPage() {
const features = [
{
icon: Shield,
title: 'Verified Identity',
desc: 'Unique cryptographic identity code. Impossible to fake, instant to verify.',
gradient: 'from-blue-500/20 to-cyan-500/20',
iconColor: 'text-blue-500',
},
{
icon: Zap,
title: 'One-Click Portfolio',
desc: 'Work samples, testimonials, and pricing in one shareable link.',
gradient: 'from-amber-500/20 to-orange-500/20',
iconColor: 'text-amber-500',
},
{
icon: Globe,
title: 'SEO Powered',
desc: 'Your profile ranks on Google. Get discovered by clients worldwide.',
gradient: 'from-green-500/20 to-emerald-500/20',
iconColor: 'text-green-500',
},
{
icon: MessageCircle,
title: 'WhatsApp Native',
desc: 'Direct contact button. No middleman. Instant client connection.',
gradient: 'from-purple-500/20 to-pink-500/20',
iconColor: 'text-purple-500',
},
];
const stats = [
{ value: '5s', label: 'Verification Time', icon: Clock },
{ value: '100%', label: 'Privacy Controlled', icon: Lock },
{ value: '20+', label: 'Countries Supported', icon: Globe },
{ value: 'Free', label: 'To Get Started', icon: Star },
];
const verticals = [
{
icon: Code,
title: 'Developers',
desc: 'GitHub-synced projects, tech stack badges, and code testimonials.',
color: 'bg-blue-500/10 text-blue-500',
},
{
icon: Palette,
title: 'Designers',
desc: 'Visual portfolio gallery, case studies, and client feedback.',
color: 'bg-pink-500/10 text-pink-500',
},
{
icon: GraduationCap,
title: 'Tutors',
desc: 'Verified reviews, subject expertise, and booking availability.',
color: 'bg-green-500/10 text-green-500',
},
{
icon: Briefcase,
title: 'Freelancers',
desc: 'Service packages, work history, and professional verification.',
color: 'bg-amber-500/10 text-amber-500',
},
];
const trustSignals = [
'Phone Verification',
'Email Verification',
'GitHub Integration',
'Client Testimonials',
'Work Samples',
];
const steps = [
{
step: '01',
title: 'Create Your Profile',
desc: 'Sign up in seconds. Add your skills, experience, and upload work samples.',
icon: Users,
},
{
step: '02',
title: 'Get Verified',
desc: 'Verify your phone, email, and connect LinkedIn or GitHub for extra trust.',
icon: BadgeCheck,
},
{
step: '03',
title: 'Share & Get Hired',
desc: 'Share your unique identity code. Clients verify you instantly and connect via WhatsApp.',
icon: TrendingUp,
},
];
return (
<div className="flex min-h-screen flex-col">
<PublicHeader />
<main className="flex-1">
{/* Hero Section */}
<section className="relative overflow-hidden py-20 md:py-32">
<div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
<div className="animate-blob absolute -left-20 top-0 h-[500px] w-[500px] rounded-full bg-primary/10 blur-3xl" />
<div className="animate-blob animation-delay-2000 absolute -right-20 top-1/2 h-[400px] w-[400px] rounded-full bg-lime-500/10 blur-3xl" />
<div className="animate-blob animation-delay-4000 absolute -bottom-20 left-1/2 h-[450px] w-[450px] rounded-full bg-green-500/10 blur-3xl" />
</div>
<div className="container">
<div className="mx-auto flex max-w-4xl flex-col items-center text-center">
<div className="slide-in-top mb-6 inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-2 text-sm">
<Sparkles className="h-4 w-4 text-primary" />
<span className="font-medium">Portable Identity for the Independent Workforce</span>
</div>
<h1 className="slide-in-bottom mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
Your Work.{' '}
<span className="gradient-text animate-gradient bg-[length:200%_auto]">
Verified.
</span>
<br />
<span className="text-muted-foreground">Trusted Everywhere.</span>
</h1>
<p className="slide-in-bottom animation-delay-200 mb-8 max-w-2xl text-lg text-muted-foreground md:text-xl">
One link. One identity code. Verified skills, testimonials, and work samples. Get
hired without the resume shuffle.
</p>
<div className="slide-in-bottom animation-delay-400 flex flex-col gap-4 sm:flex-row">
<Button size="lg" className="group" asChild>
<Link href="/login">
Create Your ProofID
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
</Link>
</Button>
<Button size="lg" variant="outline" className="group" asChild>
<Link href="/verify">
<Search className="mr-2 h-4 w-4" />
Verify Someone
</Link>
</Button>
</div>
{/* Identity Code Preview */}
<div className="slide-in-bottom animation-delay-600 mt-12 w-full max-w-md">
<div className="group relative overflow-hidden rounded-2xl border bg-gradient-to-br from-background via-background to-muted/50 p-6 shadow-lg transition-all hover:shadow-xl">
<div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/5 to-transparent transition-transform duration-1000 group-hover:translate-x-full" />
<p className="mb-4 flex items-center justify-center gap-2 text-sm text-muted-foreground">
<BadgeCheck className="h-4 w-4 text-primary" />
Your unique identity triplet
</p>
<div className="space-y-3">
<div className="flex items-center justify-between rounded-lg bg-muted/50 px-4 py-2.5">
<span className="text-sm text-muted-foreground">Username</span>
<span className="font-semibold">@subhanshu</span>
</div>
<div className="flex items-center justify-between rounded-lg bg-primary/5 px-4 py-2.5">
<span className="text-sm text-muted-foreground">Identity Code</span>
<code className="identity-code text-lg font-bold text-primary">
PFID-XQ52-B91C
</code>
</div>
<div className="flex items-center justify-between rounded-lg bg-muted/50 px-4 py-2.5">
<span className="text-sm text-muted-foreground">Profile URL</span>
<span className="font-medium text-primary">proofid.in/subhanshu</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Trust Signals Bar */}
<section className="border-y bg-muted/30 py-6">
<div className="container">
<div className="flex flex-wrap items-center justify-center gap-3 md:gap-6">
{trustSignals.map((signal, index) => (
<div
key={signal}
className="flex items-center gap-2 text-sm text-muted-foreground"
style={{ animationDelay: `${index * 100}ms` }}
>
<CheckCircle2 className="h-4 w-4 text-green-500" />
<span>{signal}</span>
</div>
))}
</div>
</div>
</section>
{/* Stats Section */}
<section className="py-16 md:py-24">
<div className="container">
<div className="grid grid-cols-2 gap-6 md:grid-cols-4 md:gap-8">
{stats.map((stat, index) => (
<div
key={stat.label}
className="group relative overflow-hidden rounded-2xl border bg-gradient-to-br from-background to-muted/30 p-6 text-center transition-all duration-300 hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5"
style={{ animationDelay: `${index * 100}ms` }}
>
<div className="mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 transition-transform duration-300 group-hover:scale-110">
<stat.icon className="h-6 w-6 text-primary" />
</div>
<div className="text-3xl font-bold md:text-4xl">{stat.value}</div>
<div className="mt-1 text-sm text-muted-foreground">{stat.label}</div>
</div>
))}
</div>
</div>
</section>
{/* Features Section */}
<section className="border-t bg-muted/20 py-20 md:py-28">
<div className="container">
<div className="mx-auto mb-16 max-w-3xl text-center">
<span className="mb-4 inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
Platform Features
</span>
<h2 className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl">
Everything You Need to
<span className="gradient-text"> Stand Out</span>
</h2>
<p className="text-lg text-muted-foreground">
Built for the way you actually get hired. WhatsApp-first, SEO-optimized, and
verification-ready.
</p>
</div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
{features.map((feature, index) => (
<Card
key={feature.title}
className="group relative overflow-hidden border-0 bg-gradient-to-br from-background to-muted/50 shadow-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
style={{ animationDelay: `${index * 100}ms` }}
>
<CardContent className="p-6">
<div
className={`mb-5 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br ${feature.gradient} transition-transform duration-300 group-hover:scale-110`}
>
<feature.icon className={`h-7 w-7 ${feature.iconColor}`} />
</div>
<h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
<p className="text-sm text-muted-foreground">{feature.desc}</p>
</CardContent>
<div className="absolute inset-0 -z-10 bg-gradient-to-br from-primary/0 to-primary/5 opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
</Card>
))}
</div>
</div>
</section>
{/* How It Works */}
<section className="py-20 md:py-28">
<div className="container">
<div className="mx-auto mb-16 max-w-3xl text-center">
<span className="mb-4 inline-block rounded-full bg-green-500/10 px-4 py-1.5 text-sm font-medium text-green-600 dark:text-green-400">
Simple Process
</span>
<h2 className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl">
Get Verified in
<span className="gradient-text"> 3 Steps</span>
</h2>
</div>
<div className="mx-auto max-w-4xl">
<div className="relative">
<div className="absolute left-1/2 top-0 hidden h-full w-px -translate-x-1/2 bg-gradient-to-b from-primary/50 via-primary to-primary/50 md:block" />
<div className="space-y-8 md:space-y-0">
{steps.map((item, index) => (
<div
key={item.step}
className={`relative flex flex-col items-center gap-6 md:flex-row ${
index % 2 === 1 ? 'md:flex-row-reverse' : ''
}`}
>
<div
className={`flex-1 ${index % 2 === 1 ? 'md:text-right' : 'md:text-left'}`}
>
<div
className={`rounded-2xl border bg-background p-6 shadow-sm transition-all duration-300 hover:shadow-lg ${
index % 2 === 1 ? 'md:ml-auto' : 'md:mr-auto'
} max-w-md`}
>
<span className="text-4xl font-bold text-primary/20">{item.step}</span>
<h3 className="mt-2 text-xl font-semibold">{item.title}</h3>
<p className="mt-2 text-muted-foreground">{item.desc}</p>
</div>
</div>
<div className="relative z-10 flex h-16 w-16 shrink-0 items-center justify-center rounded-full border-4 border-background bg-primary shadow-lg">
<item.icon className="h-7 w-7 text-primary-foreground" />
</div>
<div className="hidden flex-1 md:block" />
</div>
))}
</div>
</div>
</div>
</div>
</section>
{/* Verticals Section */}
<section className="border-t bg-muted/20 py-20 md:py-28">
<div className="container">
<div className="mx-auto mb-16 max-w-3xl text-center">
<span className="mb-4 inline-block rounded-full bg-emerald-500/10 px-4 py-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400">
Built for Everyone
</span>
<h2 className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl">
Tailored for Your
<span className="gradient-text"> Profession</span>
</h2>
<p className="text-lg text-muted-foreground">
Specialized profiles for different professions. Showcase what matters most in your
field.
</p>
</div>
<div className="mx-auto grid max-w-5xl gap-6 md:grid-cols-2">
{verticals.map((vertical, index) => (
<div
key={vertical.title}
className="group relative overflow-hidden rounded-2xl border bg-background p-6 transition-all duration-300 hover:border-primary/50 hover:shadow-lg md:p-8"
style={{ animationDelay: `${index * 100}ms` }}
>
<div
className={`mb-4 inline-flex h-14 w-14 items-center justify-center rounded-2xl ${vertical.color} transition-transform duration-300 group-hover:scale-110`}
>
<vertical.icon className="h-7 w-7" />
</div>
<h3 className="mb-2 text-xl font-semibold">{vertical.title}</h3>
<p className="text-muted-foreground">{vertical.desc}</p>
</div>
))}
</div>
</div>
</section>
<ProfessionalsSection />
<TrustScoreSection />
<AdminApprovalSection />
{/* Testimonial Section */}
<section className="py-20 md:py-28">
<div className="container">
<div className="mx-auto max-w-4xl">
<div className="overflow-hidden rounded-3xl border bg-gradient-to-br from-primary/5 via-background to-lime-500/5 p-8 md:p-12">
<div className="text-center">
<div className="mb-6 inline-flex items-center justify-center gap-1">
{[...Array(5)].map((_, i) => (
<Star key={i} className="h-6 w-6 fill-amber-400 text-amber-400" />
))}
</div>
<blockquote className="mb-6 text-xl font-medium md:text-2xl lg:text-3xl">
"ProofID helped me land 3 new clients in my first month. The instant
verification builds trust like nothing else."
</blockquote>
<div className="flex items-center justify-center gap-3">
<div className="relative h-12 w-12 overflow-hidden rounded-full">
<Image
src="/profiles/tt_pp.jpg"
alt="Trisha Tapur"
fill
className="object-cover"
sizes="48px"
/>
</div>
<div className="text-left">
<div className="font-semibold">Trisha Tapur</div>
<div className="text-sm text-muted-foreground">Corporate Lawyer</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Global CTA Section */}
<section className="border-t bg-gradient-to-br from-primary/5 via-background to-lime-500/5 py-20 md:py-28">
<div className="container">
<div className="mx-auto flex max-w-3xl flex-col items-center text-center">
<div className="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
<Globe className="h-8 w-8 text-primary" />
</div>
<h2 className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl">
Join the Global Network of
<span className="gradient-text"> Verified Professionals</span>
</h2>
<p className="mb-8 text-lg text-muted-foreground">
From Bangalore to Berlin, Toronto to Tokyo. Your ProofID works everywhere. Start
building your verified identity today.
</p>
<div className="flex flex-col gap-4 sm:flex-row">
<Button size="lg" className="group" asChild>
<Link href="/login">
Create Free Account
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
</Link>
</Button>
<Button size="lg" variant="outline" asChild>
<Link href="/about">
<Play className="mr-2 h-4 w-4" />
Learn More
</Link>
</Button>
</div>
<div className="mt-12 flex flex-wrap items-center justify-center gap-6">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Shield className="h-5 w-5 text-green-500" />
<span>Bank-level Security</span>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Lock className="h-5 w-5 text-blue-500" />
<span>GDPR Compliant</span>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<BadgeCheck className="h-5 w-5 text-purple-500" />
<span>Trusted Worldwide</span>
</div>
</div>
</div>
</div>
</section>
</main>
<PublicFooter />
</div>
);
}
|