| 1 | import { TrendingUp, Wallet } from "lucide-react"; |
| 2 | |
| 3 | const EmployeeHero = () => { |
| 4 | const budgetUsed = 2450; |
| 5 | const budgetTotal = 5000; |
| 6 | const percentUsed = (budgetUsed / budgetTotal) * 100; |
| 7 | |
| 8 | return ( |
| 9 | <section className="pt-28 pb-12 md:pt-36 md:pb-16 bg-background"> |
| 10 | <div className="container"> |
| 11 | <div className="max-w-4xl mx-auto"> |
| 12 | {/* Welcome Message */} |
| 13 | <div className="text-center mb-10 animate-fade-up"> |
| 14 | <p className="text-sm font-medium text-primary mb-2">Welcome back, Sarah</p> |
| 15 | <h1 className="text-3xl md:text-5xl font-bold text-foreground leading-tight"> |
| 16 | You're doing great with your budget |
| 17 | </h1> |
| 18 | <p className="mt-4 text-lg text-muted-foreground"> |
| 19 | Engineering Department • Q4 2024 |
| 20 | </p> |
| 21 | </div> |
| 22 | |
| 23 | {/* Main Budget Card */} |
| 24 | <div className="bg-card rounded-2xl border border-border p-6 md:p-10 animate-fade-up animation-delay-100"> |
| 25 | <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6"> |
| 26 | <div className="flex-1"> |
| 27 | <div className="flex items-center gap-3 mb-4"> |
| 28 | <div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center"> |
| 29 | <Wallet className="w-6 h-6 text-primary" /> |
| 30 | </div> |
| 31 | <div> |
| 32 | <p className="text-sm text-muted-foreground">Department Budget</p> |
| 33 | <p className="text-2xl md:text-3xl font-bold text-foreground"> |
| 34 | ${budgetTotal.toLocaleString()} |
| 35 | </p> |
| 36 | </div> |
| 37 | </div> |
| 38 | |
| 39 | {/* Progress Bar */} |
| 40 | <div className="space-y-2"> |
| 41 | <div className="h-3 bg-muted rounded-full overflow-hidden"> |
| 42 | <div |
| 43 | className="h-full bg-primary rounded-full transition-all duration-500" |
| 44 | style={{ width: `${percentUsed}%` }} |
| 45 | /> |
| 46 | </div> |
| 47 | <div className="flex justify-between text-sm"> |
| 48 | <span className="text-muted-foreground"> |
| 49 | ${budgetUsed.toLocaleString()} spent |
| 50 | </span> |
| 51 | <span className="text-foreground font-medium"> |
| 52 | ${(budgetTotal - budgetUsed).toLocaleString()} remaining |
| 53 | </span> |
| 54 | </div> |
| 55 | </div> |
| 56 | </div> |
| 57 | |
| 58 | {/* Stats */} |
| 59 | <div className="flex gap-6 md:gap-8"> |
| 60 | <div className="text-center"> |
| 61 | <div className="flex items-center justify-center gap-1 text-primary mb-1"> |
| 62 | <TrendingUp className="w-4 h-4" /> |
| 63 | <span className="text-sm font-medium">12%</span> |
| 64 | </div> |
| 65 | <p className="text-xs text-muted-foreground">Under budget</p> |
| 66 | </div> |
| 67 | <div className="text-center"> |
| 68 | <p className="text-2xl font-bold text-foreground">18</p> |
| 69 | <p className="text-xs text-muted-foreground">Days left</p> |
| 70 | </div> |
| 71 | </div> |
| 72 | </div> |
| 73 | </div> |
| 74 | </div> |
| 75 | </div> |
| 76 | </section> |
| 77 | ); |
| 78 | }; |
| 79 | |
| 80 | export default EmployeeHero; |