mirror of
https://git.coastit.co.za/caitlin/CRM_ENVR.git
synced 2026-07-10 11:15:43 +02:00
426 lines
12 KiB
TypeScript
426 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { motion } from "framer-motion"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { COMPANY_NAME } from "@/lib/constants"
|
|
import { Eye, EyeOff, Loader2 } from "lucide-react"
|
|
|
|
function LoginForm() {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const [email, setEmail] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [showPassword, setShowPassword] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const [remember, setRemember] = useState(false)
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setError("")
|
|
setLoading(true)
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, 1200))
|
|
|
|
router.push("/dashboard")
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<style>{`
|
|
.left-panel {
|
|
background: #0a0a0f;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.right-panel {
|
|
background: #111118;
|
|
width: 420px;
|
|
flex: none;
|
|
position: relative;
|
|
}
|
|
.panel-divider {
|
|
width: 1px;
|
|
background: rgba(180, 192, 210, 0.1);
|
|
flex: none;
|
|
}
|
|
.growth-word {
|
|
position: relative;
|
|
color: #1BB0CE;
|
|
}
|
|
.growth-word::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: #1BB0CE;
|
|
animation: pulseUnderline 2.5s ease-in-out infinite;
|
|
}
|
|
@keyframes pulseUnderline {
|
|
0%, 100% { background-color: #1BB0CE; }
|
|
50% { background-color: rgba(180, 192, 210, 0.6); }
|
|
}
|
|
.stats-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 32px;
|
|
gap: 0;
|
|
}
|
|
.stat {
|
|
flex: 1;
|
|
max-width: 120px;
|
|
text-align: center;
|
|
position: relative;
|
|
padding-top: 12px;
|
|
}
|
|
.stat::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #1BB0CE, rgba(180,192,210,1), #1BB0CE);
|
|
background-size: 200% 100%;
|
|
animation: statSweep 2.5s ease-in-out infinite;
|
|
}
|
|
.stat:nth-child(2)::before {
|
|
animation-delay: 0.6s;
|
|
}
|
|
.stat:nth-child(3)::before {
|
|
animation-delay: 1.2s;
|
|
}
|
|
@keyframes statSweep {
|
|
0% { background-position: 0% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
.stat-number {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #1BB0CE;
|
|
line-height: 1.2;
|
|
}
|
|
.stat-label {
|
|
font-size: 11px;
|
|
color: rgba(232,232,239,0.3);
|
|
margin-top: 4px;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
.testimonial {
|
|
border-left: 2px solid rgba(27,176,206,0.25);
|
|
background: rgba(27,176,206,0.06);
|
|
padding: 10px 14px;
|
|
}
|
|
.stars-canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.wave-canvas {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 200px;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background: #0a0a0f;
|
|
}
|
|
.accent-line {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, #1BB0CE, rgba(232,232,239,0.15), transparent);
|
|
animation: pulseAccent 3s ease-in-out infinite;
|
|
}
|
|
@keyframes pulseAccent {
|
|
0%, 100% { opacity: 0.5; }
|
|
50% { opacity: 1; }
|
|
}
|
|
.input-sheen {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 4px;
|
|
}
|
|
.input-sheen::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -10%;
|
|
left: -100%;
|
|
width: 60%;
|
|
height: 120%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
|
|
transform: rotate(-15deg);
|
|
animation: sheenFloat 3.2s ease-in-out infinite;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
.input-sheen-delayed::before {
|
|
animation-delay: 1s;
|
|
}
|
|
.input-sheen:focus-within::before {
|
|
animation: none;
|
|
opacity: 0;
|
|
}
|
|
@keyframes sheenFloat {
|
|
0% { left: -100%; }
|
|
100% { left: 200%; }
|
|
}
|
|
.login-input {
|
|
width: 100%;
|
|
height: 44px;
|
|
background: linear-gradient(135deg, #0d0d15, #151520, #0d0d15);
|
|
background-size: 200% 200%;
|
|
animation: bgShift 6s ease-in-out infinite;
|
|
border: 1.5px solid rgba(180,192,210,0.15);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
color: #e8e8ef;
|
|
padding: 0 12px;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: border-color 0.2s ease, background 0.2s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
.login-input::placeholder {
|
|
color: rgba(232,232,239,0.2);
|
|
}
|
|
.login-input:focus {
|
|
border-color: #1BB0CE;
|
|
outline: none;
|
|
background: #111118;
|
|
animation: none;
|
|
}
|
|
@keyframes bgShift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
.password-toggle {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: rgba(232,232,239,0.3);
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 3;
|
|
}
|
|
.password-toggle:hover {
|
|
color: rgba(232,232,239,0.5);
|
|
}
|
|
.login-checkbox {
|
|
accent-color: #1BB0CE;
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
.auth-btn {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
background: #1BB0CE;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
padding: 13px;
|
|
border-radius: 4px;
|
|
border: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: background 0.2s ease;
|
|
}
|
|
.auth-btn:hover {
|
|
background: #17a0bc;
|
|
}
|
|
.auth-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.auth-btn::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 60%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
animation: btnSweep 2.2s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
@keyframes btnSweep {
|
|
0% { left: -100%; }
|
|
100% { left: 200%; }
|
|
}
|
|
.login-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: rgba(232,232,239,0.4);
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
}
|
|
.body-text { color: rgba(232,232,239,0.5); }
|
|
.subheading-text { color: rgba(232,232,239,0.38); }
|
|
.checkbox-text { color: rgba(232,232,239,0.38); }
|
|
.footer-text { color: rgba(232,232,239,0.2); }
|
|
`}</style>
|
|
|
|
<div className="flex min-h-screen bg-[#0a0a0f]">
|
|
<div className="left-panel flex flex-1 flex-col p-12">
|
|
<div className="relative z-10">
|
|
<img
|
|
src="/logo/CompanyLogo.png"
|
|
alt={COMPANY_NAME}
|
|
className="h-44 w-auto object-contain"
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative z-10 flex-1 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<h1 className="text-[34px] font-extrabold text-[#e8e8ef] leading-tight tracking-[-0.6px]">
|
|
Your Agency's{" "}
|
|
<span className="growth-word">Growth</span>{" "}
|
|
Starts Here
|
|
</h1>
|
|
<p className="mt-4 text-[13px] leading-[1.7] max-w-[360px] mx-auto body-text">
|
|
Manage leads, track conversions, and grow your web development business with our CRM.
|
|
</p>
|
|
<div className="stats-row">
|
|
<div className="stat">
|
|
<div className="stat-number">{counts.leads.toLocaleString()}</div>
|
|
<div className="stat-label">leads tracked</div>
|
|
</div>
|
|
<div className="stat">
|
|
<div className="stat-number">{counts.conversion}%</div>
|
|
<div className="stat-label">conversion lift</div>
|
|
</div>
|
|
<div className="stat">
|
|
<div className="stat-number">{counts.users}</div>
|
|
<div className="stat-label">active users</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative z-10 testimonial">
|
|
<p className="text-[12px] italic" style={{ color: "#0a0a0f" }}>
|
|
“This CRM transformed how we manage our sales pipeline. We've seen a 40% increase in lead conversion.”
|
|
</p>
|
|
<p className="text-[11px] mt-1" style={{ color: "#0a0a0f" }}>
|
|
Marcus Johnson, Sales Lead at Coast IT
|
|
</p>
|
|
</div>
|
|
|
|
<canvas ref={canvasRef} className="wave-canvas" />
|
|
</div>
|
|
|
|
<div className="panel-divider" />
|
|
|
|
<div className="right-panel flex items-center justify-center p-10">
|
|
<canvas ref={starsCanvasRightRef} className="stars-canvas" />
|
|
<div className="accent-line" />
|
|
|
|
<div className="w-full" style={{ maxWidth: 340 }}>
|
|
<h2 className="text-[24px] font-bold text-[#e8e8ef] tracking-[-0.3px] mb-[5px]">
|
|
Welcome back
|
|
</h2>
|
|
<p className="text-[13px] mb-[26px] subheading-text">
|
|
Sign in to your account to continue
|
|
</p>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="name@company.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
autoComplete="email"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="password">Password</Label>
|
|
<button
|
|
type="button"
|
|
className="text-xs text-primary hover:underline"
|
|
>
|
|
Forgot password?
|
|
</button>
|
|
</div>
|
|
<div className="relative">
|
|
<Input
|
|
id="password"
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder="Enter your password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
autoComplete="current-password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="remember"
|
|
checked={remember}
|
|
onCheckedChange={(checked) => setRemember(checked as boolean)}
|
|
/>
|
|
<label
|
|
htmlFor="remember"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
|
|
<Button type="submit" className="w-full" disabled={loading}>
|
|
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
{loading ? "Signing in..." : "Sign in"}
|
|
</Button>
|
|
</form>
|
|
|
|
<p className="text-center text-[11px] mt-4 footer-text">
|
|
By signing in, you agree to our{" "}
|
|
<button type="button" className="text-[#1BB0CE] hover:underline">
|
|
Terms of Service
|
|
</button>{" "}
|
|
and{" "}
|
|
<button type="button" className="text-[#1BB0CE] hover:underline">
|
|
Privacy Policy
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|