348 lines
13 KiB
TypeScript
348 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
ArrowRight,
|
|
PlayCircle,
|
|
Users,
|
|
UserCog,
|
|
Briefcase,
|
|
Check,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { home } from "@/services/Constants";
|
|
|
|
const Hero = () => {
|
|
return (
|
|
<section
|
|
className="
|
|
relative overflow-hidden
|
|
bg-white
|
|
pt-28 pb-20 md:pt-32 md:pb-24
|
|
"
|
|
>
|
|
{/* Background grid + Java/Botticelli glow */}
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<div
|
|
className="absolute inset-0 opacity-[0.05]"
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(to right, rgba(15,23,42,1) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,23,42,1) 1px, transparent 1px)",
|
|
backgroundSize: "56px 56px",
|
|
}}
|
|
/>
|
|
|
|
{/* Top glow */}
|
|
<motion.div
|
|
aria-hidden
|
|
initial={{ opacity: 0.35, scale: 0.95 }}
|
|
animate={{ opacity: [0.25, 0.4, 0.25], scale: [0.95, 1.05, 0.95] }}
|
|
transition={{ duration: 12, repeat: Infinity }}
|
|
className="absolute -top-24 -left-24 h-80 w-80 rounded-full blur-3xl"
|
|
style={{
|
|
background:
|
|
"radial-gradient(circle, rgba(31,200,219,0.45) 0%, transparent 60%)",
|
|
}}
|
|
/>
|
|
|
|
{/* Bottom glow */}
|
|
<motion.div
|
|
aria-hidden
|
|
initial={{ opacity: 0.25, scale: 0.95 }}
|
|
animate={{ opacity: [0.18, 0.32, 0.18], scale: [0.95, 1.08, 0.95] }}
|
|
transition={{ duration: 14, repeat: Infinity }}
|
|
className="absolute -bottom-32 right-0 h-[28rem] w-[28rem] rounded-full blur-3xl"
|
|
style={{
|
|
background:
|
|
"radial-gradient(circle, rgba(127,216,231,0.55) 0%, transparent 62%)",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative mx-auto max-w-7xl px-4">
|
|
<div className="grid items-center gap-10 lg:grid-cols-2">
|
|
{/* Left: copy */}
|
|
<div className="text-center lg:text-left">
|
|
{/* Badge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium"
|
|
style={{
|
|
borderColor: "rgba(31,200,219,0.35)",
|
|
backgroundColor: "rgba(31,200,219,0.10)",
|
|
color: "#065F67",
|
|
}}
|
|
>
|
|
<span
|
|
className="inline-block h-2 w-2 rounded-full"
|
|
style={{ backgroundColor: "#1FC8DB" }}
|
|
/>
|
|
All-in-one ATS • HRMS • CRM for modern teams
|
|
</motion.div>
|
|
|
|
{/* Title */}
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 14 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.55, delay: 0.05 }}
|
|
className="mt-6 text-4xl font-extrabold tracking-tight text-slate-900 md:text-6xl"
|
|
>
|
|
Hire faster with a{" "}
|
|
<span
|
|
className="bg-clip-text text-transparent"
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
|
|
}}
|
|
>
|
|
clean ATS workflow
|
|
</span>
|
|
</motion.h1>
|
|
|
|
{/* Subtext */}
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 14 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.55, delay: 0.12 }}
|
|
className="mt-5 max-w-xl text-lg leading-relaxed text-slate-600 md:text-xl"
|
|
>
|
|
Winixco streamlines pipelines, interview scheduling, and employee
|
|
operations—so your team can focus on decisions, not admin work.
|
|
</motion.p>
|
|
|
|
{/* CTAs */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 14 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.55, delay: 0.2 }}
|
|
className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center lg:justify-start justify-center"
|
|
>
|
|
<Button
|
|
size="lg"
|
|
className="rounded-xl px-7 py-6 text-base font-semibold shadow-md text-white"
|
|
style={{
|
|
background:
|
|
"linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
|
|
}}
|
|
>
|
|
Book a Demo <ArrowRight className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="rounded-xl px-7 py-6 text-base font-semibold border-slate-300"
|
|
>
|
|
<PlayCircle className="mr-2 h-5 w-5" />
|
|
Watch Overview
|
|
</Button>
|
|
</motion.div>
|
|
|
|
{/* Trust line */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.55, delay: 0.28 }}
|
|
className="mt-5 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-slate-600 lg:justify-start"
|
|
>
|
|
<span className="inline-flex items-center gap-2">
|
|
<Check className="h-4 w-4 text-emerald-500" />
|
|
No credit card required
|
|
</span>
|
|
<span className="hidden sm:inline text-slate-300">•</span>
|
|
<span className="inline-flex items-center gap-2">
|
|
<Check className="h-4 w-4 text-emerald-500" />
|
|
14-day free trial
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Feature chips */}
|
|
<div className="mt-10 flex flex-wrap justify-center gap-3 lg:justify-start">
|
|
{[
|
|
{ icon: Users, title: "ATS", desc: "Pipeline + sourcing" },
|
|
{ icon: UserCog, title: "HRMS", desc: "Onboarding + reviews" },
|
|
{ icon: Briefcase, title: "CRM", desc: "Clients + pools" },
|
|
].map((f, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center gap-3 rounded-2xl border bg-white px-4 py-3"
|
|
style={{ borderColor: "rgba(15,23,42,0.10)" }}
|
|
>
|
|
<div
|
|
className="grid h-10 w-10 place-items-center rounded-xl"
|
|
style={{ backgroundColor: "rgba(31,200,219,0.14)" }}
|
|
>
|
|
<f.icon className="h-5 w-5 text-slate-800" />
|
|
</div>
|
|
<div className="leading-tight">
|
|
<div className="text-sm font-semibold text-slate-900">
|
|
{f.title}
|
|
</div>
|
|
<div className="text-xs text-slate-600">{f.desc}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right preview stays same, only accent changed */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 18 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.65, delay: 0.18 }}
|
|
className="relative"
|
|
>
|
|
<div className="rounded-3xl border bg-white shadow-xl border-slate-200">
|
|
{/* Fake topbar */}{" "}
|
|
<div
|
|
className="flex items-center justify-between border-b px-5 py-4"
|
|
style={{ borderColor: "rgba(15,23,42,0.08)" }}
|
|
>
|
|
{" "}
|
|
<div className="flex items-center gap-3">
|
|
{" "}
|
|
<div className="flex gap-1.5">
|
|
{" "}
|
|
<span className="h-2.5 w-2.5 rounded-full bg-red-400/80" />{" "}
|
|
<span className="h-2.5 w-2.5 rounded-full bg-yellow-400/80" />{" "}
|
|
<span className="h-2.5 w-2.5 rounded-full bg-green-400/80" />{" "}
|
|
</div>{" "}
|
|
<div className="text-sm font-semibold text-slate-900">
|
|
Winixco ATS
|
|
</div>{" "}
|
|
</div>{" "}
|
|
<div className="text-xs text-slate-500">Today</div>{" "}
|
|
</div>{" "}
|
|
{/* Fake content */}{" "}
|
|
<div className="p-5">
|
|
{" "}
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{" "}
|
|
<div
|
|
className="rounded-2xl border p-4"
|
|
style={{ borderColor: "rgba(15,23,42,0.10)" }}
|
|
>
|
|
{" "}
|
|
<div className="text-xs font-semibold text-slate-500">
|
|
Pipeline
|
|
</div>{" "}
|
|
<div className="mt-2 space-y-2">
|
|
{" "}
|
|
{["Applied", "Screening", "Interview", "Offer"].map(
|
|
(t) => (
|
|
<div
|
|
key={t}
|
|
className="flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2"
|
|
>
|
|
{" "}
|
|
<span className="text-sm font-medium text-slate-800">
|
|
{t}
|
|
</span>{" "}
|
|
<span className="text-xs text-slate-500">
|
|
+12
|
|
</span>{" "}
|
|
</div>
|
|
),
|
|
)}{" "}
|
|
</div>{" "}
|
|
</div>{" "}
|
|
<div
|
|
className="rounded-2xl border p-4"
|
|
style={{ borderColor: "rgba(15,23,42,0.10)" }}
|
|
>
|
|
{" "}
|
|
<div className="text-xs font-semibold text-slate-500">
|
|
Upcoming interviews
|
|
</div>{" "}
|
|
<div className="mt-3 space-y-2">
|
|
{" "}
|
|
{[
|
|
{
|
|
name: "A. Roy",
|
|
role: "Frontend Dev",
|
|
time: "11:00 AM",
|
|
},
|
|
{
|
|
name: "S. Das",
|
|
role: "Sales Lead",
|
|
time: "02:30 PM",
|
|
},
|
|
{ name: "K. Singh", role: "HR Ops", time: "05:00 PM" },
|
|
].map((x) => (
|
|
<div
|
|
key={x.name}
|
|
className="flex items-center justify-between rounded-xl px-3 py-2 bg-white"
|
|
>
|
|
{" "}
|
|
<div>
|
|
{" "}
|
|
<div className="text-sm font-semibold text-slate-900">
|
|
{x.name}
|
|
</div>{" "}
|
|
<div className="text-xs text-slate-500">
|
|
{x.role}
|
|
</div>{" "}
|
|
</div>{" "}
|
|
<div
|
|
className="rounded-full px-3 py-1 text-xs font-semibold"
|
|
style={{
|
|
backgroundColor: "rgba(5,245,228,0.18)",
|
|
color: "#064E47",
|
|
}}
|
|
>
|
|
{" "}
|
|
{x.time}{" "}
|
|
</div>{" "}
|
|
</div>
|
|
))}{" "}
|
|
</div>{" "}
|
|
</div>{" "}
|
|
</div>{" "}
|
|
{/* Stats row from your constants */}{" "}
|
|
<div className="mt-5 grid grid-cols-2 gap-3">
|
|
{" "}
|
|
{home.stats.slice(0, 2).map((s, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="rounded-2xl border p-4"
|
|
style={{ borderColor: "rgba(15,23,42,0.10)" }}
|
|
>
|
|
{" "}
|
|
<div className="text-xs font-semibold text-slate-500">
|
|
{s.label}
|
|
</div>{" "}
|
|
<div className="mt-2 text-2xl font-extrabold text-slate-900">
|
|
{s.value}
|
|
</div>{" "}
|
|
<div className="mt-2 h-1.5 w-full rounded-full bg-slate-100">
|
|
{" "}
|
|
<div
|
|
className="h-1.5 rounded-full"
|
|
style={{ width: "62%", backgroundColor: "#05F5E4" }}
|
|
/>{" "}
|
|
</div>{" "}
|
|
</div>
|
|
))}{" "}
|
|
</div>{" "}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Accent glow */}
|
|
<div
|
|
className="pointer-events-none absolute -inset-2 -z-10 rounded-[2rem] opacity-60 blur-2xl"
|
|
style={{
|
|
background:
|
|
"linear-gradient(135deg, rgba(31,200,219,0.45), rgba(127,216,231,0.35))",
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|