photum/frontend/pages/Home.tsx
João Vitor 7fc96d77d2 feat: add photographer finance page and UI improvements
- Add photographer finance page at /meus-pagamentos with payment history table
- Remove university management page and related routes
- Update Finance and UserApproval pages with consistent spacing and typography
- Fix Dashboard background color to match other pages (bg-gray-50)
- Standardize navbar logo sizing across all pages
- Change institution field in course form from dropdown to text input
- Add year and semester fields for university graduation dates
- Improve header spacing on all pages to pt-20 sm:pt-24 md:pt-28 lg:pt-32
- Apply font-serif styling consistently across page headers
2025-12-12 16:26:12 -03:00

83 lines
2.5 KiB
TypeScript

import React from "react";
import { Button } from "../components/Button";
interface HomeProps {
onEnter: () => void;
}
export const Home: React.FC<HomeProps> = ({ onEnter }) => {
return (
<div
className="min-h-screen flex items-center justify-center relative overflow-hidden"
style={{ backgroundColor: "#B9CF33" }}
>
<style>{`
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.animate-fade-in-scale {
animation: fadeInScale 0.6s ease-out forwards;
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
`}</style>
{/* Círculos decorativos animados */}
<div
className="absolute top-5 sm:top-10 left-5 sm:left-10 w-32 sm:w-48 md:w-64 h-32 sm:h-48 md:h-64 bg-white/20 rounded-full blur-2xl sm:blur-3xl animate-float"
style={{ animationDelay: "0s" }}
></div>
<div
className="absolute bottom-10 sm:bottom-20 right-10 sm:right-20 w-48 sm:w-64 md:w-80 h-48 sm:h-64 md:h-80 bg-white/20 rounded-full blur-2xl sm:blur-3xl animate-float"
style={{ animationDelay: "2s" }}
></div>
<div
className="absolute top-1/3 right-5 sm:right-10 w-32 sm:w-40 md:w-48 h-32 sm:h-40 md:h-48 bg-white/20 rounded-full blur-xl sm:blur-2xl animate-float"
style={{ animationDelay: "4s" }}
></div>
<div className="bg-white rounded-xl sm:rounded-2xl shadow-2xl p-6 sm:p-8 md:p-12 max-w-[90%] sm:max-w-md w-full mx-3 sm:mx-4 animate-fade-in-scale relative z-10">
{/* Logo */}
<div className="flex justify-center mb-4 sm:mb-6">
<img
src="/logo_preta.png"
alt="Photum Formaturas"
className="h-16 sm:h-20 md:h-24 lg:h-32 w-auto object-contain"
/>
</div>
{/* Botões */}
<div className="space-y-3 sm:space-y-4">
<Button onClick={onEnter} className="w-full" size="lg">
Entrar
</Button>
<Button
onClick={() => (window.location.href = "/cadastro")}
variant="outline"
className="w-full"
size="lg"
>
Cadastre-se agora
</Button>
</div>
</div>
</div>
);
};