| 1 | import { Button } from "@/components/ui/button"; |
| 2 | import { ArrowRight } from "lucide-react"; |
| 3 | import { Link } from "react-router-dom"; |
| 4 | import buildingModel from "@/assets/building-crypto.png"; |
| 5 | const Hero = () => { |
| 6 | return <section className="pt-32 pb-20 md:pt-40 md:pb-32 bg-background overflow-hidden"> |
| 7 | <div className="container"> |
| 8 | <div className="max-w-4xl mx-auto text-center"> |
| 9 | <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight animate-fade-up">Blockchain Expense Management</h1> |
| 10 | <p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto animate-fade-up animation-delay-100">Solving problems like company purchases, cross-border transactions, international payments using Light Data APIs.</p> |
| 11 | <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-up animation-delay-200"> |
| 12 | <Link to="/cfo-overview"> |
| 13 | <Button variant="hero" size="lg"> |
| 14 | CFO Overview <ArrowRight className="w-5 h-5" /> |
| 15 | </Button> |
| 16 | </Link> |
| 17 | <Link to="/employee-portal"> |
| 18 | <Button variant="navy-outline" size="lg"> |
| 19 | Employee Spending Portal |
| 20 | </Button> |
| 21 | </Link> |
| 22 | </div> |
| 23 | </div> |
| 24 | |
| 25 | {/* 3D Building Model */} |
| 26 | <div className="mt-16 md:mt-24 flex justify-center animate-fade-up animation-delay-400"> |
| 27 | <div className="relative max-w-2xl"> |
| 28 | <div className="absolute inset-0 bg-primary/10 rounded-2xl blur-3xl" /> |
| 29 | <img src={buildingModel} alt="3D Building Model" className="relative w-full h-auto drop-shadow-2xl hover:scale-105 transition-transform duration-300 cursor-pointer" /> |
| 30 | </div> |
| 31 | </div> |
| 32 | </div> |
| 33 | </section>; |
| 34 | }; |
| 35 | export default Hero; |