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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 183x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x 61x | 'use client';
import { motion } from 'framer-motion';
import Link from 'next/link';
import {
FileText,
UserCheck,
BadgeCheck,
ArrowRight,
Shield,
Clock,
CheckCircle2,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
const steps = [
{
icon: FileText,
title: 'Submit Application',
description: 'Provide your credentials and supporting documents for verification.',
color: 'bg-blue-500',
},
{
icon: UserCheck,
title: 'Admin Review',
description: 'Our compliance team verifies your credentials with official sources.',
color: 'bg-purple-500',
},
{
icon: BadgeCheck,
title: 'Get Verified',
description: 'Receive your verified badge and start building trust immediately.',
color: 'bg-green-500',
},
];
export function AdminApprovalSection() {
return (
<section className="border-t bg-muted/20 py-20 md:py-28">
<div className="container">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-100px' }}
transition={{ duration: 0.6 }}
className="mx-auto mb-16 max-w-3xl text-center"
>
<span className="mb-4 inline-flex items-center gap-2 rounded-full bg-amber-500/10 px-4 py-1.5 text-sm font-medium text-amber-600 dark:text-amber-400">
<Shield className="h-4 w-4" />
Regulated Professions
</span>
<h2 className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl">
Extra Verification for
<span className="bg-gradient-to-r from-amber-500 to-orange-500 bg-clip-text text-transparent">
{' '}
Trusted Fields
</span>
</h2>
<p className="text-lg text-muted-foreground">
Doctors, Lawyers, and Elite professionals go through additional verification by our
compliance team to ensure maximum trust.
</p>
</motion.div>
{/* Process Steps */}
<div className="mx-auto max-w-4xl">
<div className="relative">
{/* Connection line */}
<div className="absolute left-1/2 top-0 hidden h-full w-0.5 -translate-x-1/2 bg-gradient-to-b from-teal-500 via-emerald-500 to-lime-500 md:block" />
<div className="space-y-8 md:space-y-0">
{steps.map((step, index) => (
<motion.div
key={step.title}
initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: '-50px' }}
transition={{ duration: 0.5, delay: index * 0.2 }}
className={`relative flex flex-col items-center gap-6 md:flex-row ${
index % 2 === 1 ? 'md:flex-row-reverse' : ''
}`}
>
{/* Content card */}
<div className={`flex-1 ${index % 2 === 1 ? 'md:text-right' : 'md:text-left'}`}>
<motion.div
whileHover={{ scale: 1.02 }}
className={`rounded-2xl border bg-background p-6 shadow-sm transition-shadow duration-300 hover:shadow-lg ${
index % 2 === 1 ? 'md:ml-auto' : 'md:mr-auto'
} max-w-md`}
>
<div
className={`mb-3 inline-flex items-center gap-2 rounded-full ${step.color}/10 px-3 py-1 text-xs font-medium ${step.color.replace('bg-', 'text-')}`}
>
<Clock className="h-3 w-3" />
Step {index + 1}
</div>
<h3 className="mb-2 text-xl font-semibold">{step.title}</h3>
<p className="text-muted-foreground">{step.description}</p>
</motion.div>
</div>
{/* Center icon */}
<motion.div
initial={{ scale: 0 }}
whileInView={{ scale: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.3, delay: index * 0.2 + 0.3 }}
className={`relative z-10 flex h-16 w-16 shrink-0 items-center justify-center rounded-full border-4 border-background ${step.color} shadow-lg`}
>
<step.icon className="h-7 w-7 text-white" />
</motion.div>
{/* Spacer */}
<div className="hidden flex-1 md:block" />
</motion.div>
))}
</div>
</div>
</div>
{/* Info cards */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.6 }}
className="mx-auto mt-16 grid max-w-4xl gap-6 md:grid-cols-3"
>
<div className="rounded-xl border bg-background p-6 text-center">
<div className="mb-3 text-3xl font-bold text-primary">2-3</div>
<div className="text-sm text-muted-foreground">Business days for review</div>
</div>
<div className="rounded-xl border bg-background p-6 text-center">
<div className="mb-3 text-3xl font-bold text-green-500">100%</div>
<div className="text-sm text-muted-foreground">Manual verification</div>
</div>
<div className="rounded-xl border bg-background p-6 text-center">
<div className="mb-3 text-3xl font-bold text-purple-500">Official</div>
<div className="text-sm text-muted-foreground">Registry cross-check</div>
</div>
</motion.div>
{/* CTA */}
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.8 }}
className="mt-12 text-center"
>
<p className="mb-4 flex items-center justify-center gap-2 text-muted-foreground">
<CheckCircle2 className="h-5 w-5 text-green-500" />
Already have your credentials? Start the verification process.
</p>
<Button className="group" asChild>
<Link href="/login">
Apply for Verification
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
</Link>
</Button>
</motion.div>
</div>
</section>
);
}
|