| 1 | import { Link } from "react-router-dom"; |
| 2 | import haptics from "./../utils/haptics"; |
| 3 | import { useLang } from "../context/LanguageContext"; |
| 4 | import { useAccount } from "../context/AccountContext"; |
| 5 | |
| 6 | export default function Home() { |
| 7 | const { t } = useLang(); |
| 8 | const { user, onLoggedIn, onLoggedOut } = useAccount(); |
| 9 | return ( |
| 10 | <section className="flex flex-col items-center justify-center min-h-[30vh]"> |
| 11 | <svg |
| 12 | className="w-40 mb-8 mt-8 animate-bounce" |
| 13 | viewBox="0 0 120 120" |
| 14 | fill="none" |
| 15 | xmlns="http://www.w3.org/2000/svg" |
| 16 | > |
| 17 | <circle cx="60" cy="60" r="60" fill="#f3e8ff" /> |
| 18 | <text |
| 19 | x="50%" |
| 20 | y="55%" |
| 21 | textAnchor="middle" |
| 22 | fill="#a21caf" |
| 23 | fontSize="36" |
| 24 | fontFamily="Arial, sans-serif" |
| 25 | dy=".3em" |
| 26 | > |
| 27 | 💈 |
| 28 | </text> |
| 29 | </svg> |
| 30 | <h1 className="text-3xl md:text-4xl font-bold text-center mb-4 text-cut-blue"> |
| 31 | {user ? t.welcomePersonal(user.name) : t.welcome} |
| 32 | </h1> |
| 33 | <p className="text-lg text-center mb-8 text-slate-600">{t.homeDesc}</p> |
| 34 | <Link |
| 35 | to="/cut" |
| 36 | onClick={async () => { |
| 37 | await haptics.buttonPress(); |
| 38 | }} |
| 39 | className="bg-blue-500 hover:bg-blue-600 active:scale-95 transition transform text-white px-8 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl focus:ring-2 focus:ring-blue-300 animate-pulse" |
| 40 | > |
| 41 | {t.bookNow} |
| 42 | </Link> |
| 43 | </section> |
| 44 | ); |
| 45 | } |