atualização
This commit is contained in:
Yago Santana
parent
44ed329b68
commit
2a5ee8ca19
8 changed files with 718 additions and 149 deletions
125
App.tsx
125
App.tsx
|
|
@ -9,6 +9,9 @@ import { TeamPage } from "./pages/Team";
|
|||
import { FinancePage } from "./pages/Finance";
|
||||
import { SettingsPage } from "./pages/Settings";
|
||||
import { AlbumsPage } from "./pages/Albums";
|
||||
import { PrivacyPolicy } from "./pages/PrivacyPolicy";
|
||||
import { TermsOfUse } from "./pages/TermsOfUse";
|
||||
import { LGPD } from "./pages/LGPD";
|
||||
import { AuthProvider, useAuth } from "./contexts/AuthContext";
|
||||
import { DataProvider } from "./contexts/DataContext";
|
||||
import { Construction } from "lucide-react";
|
||||
|
|
@ -30,6 +33,9 @@ const AppContent: React.FC = () => {
|
|||
);
|
||||
if (currentPage === "login") return user ? <Dashboard /> : <Login />;
|
||||
if (currentPage === "register") return user ? <Dashboard /> : <Register onNavigate={setCurrentPage} />;
|
||||
if (currentPage === "privacy") return <PrivacyPolicy onNavigate={setCurrentPage} />;
|
||||
if (currentPage === "terms") return <TermsOfUse onNavigate={setCurrentPage} />;
|
||||
if (currentPage === "lgpd") return <LGPD onNavigate={setCurrentPage} />;
|
||||
|
||||
if (!user) return <Login />;
|
||||
|
||||
|
|
@ -70,100 +76,87 @@ const AppContent: React.FC = () => {
|
|||
<main>{renderPage()}</main>
|
||||
|
||||
{currentPage === "home" && (
|
||||
<footer className="bg-brand-black text-white py-20">
|
||||
<div className="w-full max-w-[1400px] mx-auto px-8 sm:px-12 lg:px-20">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-16 lg:gap-24 mb-20">
|
||||
<footer className="bg-gradient-to-br from-brand-purple to-brand-purple/90 text-brand-black py-16 md:py-20">
|
||||
<div className="w-full max-w-[1600px] mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 sm:gap-10 md:gap-12 lg:gap-16 xl:gap-20 mb-12 md:mb-16">
|
||||
{/* Logo e Descrição */}
|
||||
<div className="lg:col-span-1">
|
||||
<h3 className="text-2xl font-serif font-bold mb-4" style={{color: '#B9CF33'}}>
|
||||
Photum Formaturas
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm leading-relaxed">
|
||||
<img src="/logo.png" alt="Photum Formaturas" className="h-40 sm:h-34 md:h-28 lg:h-42 mb-4 md:mb-6" />
|
||||
<p className="text-brand-black/80 text-sm sm:text-base md:text-lg leading-relaxed">
|
||||
Eternizando momentos únicos com excelência e profissionalismo desde 2020.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Serviços */}
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-4 uppercase tracking-wider text-sm">Serviços</h4>
|
||||
<ul className="space-y-3 text-gray-400 text-sm">
|
||||
<li>
|
||||
<a href="#" className="hover:text-brand-gold transition-colors">
|
||||
Fotografia de Eventos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-brand-gold transition-colors">
|
||||
Álbuns Personalizados
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-brand-gold transition-colors">
|
||||
Gestão de Formaturas
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-brand-gold transition-colors">
|
||||
Cobertura Completa
|
||||
</a>
|
||||
</li>
|
||||
<h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">Serviços</h4>
|
||||
<ul className="space-y-2 md:space-y-3 text-brand-black/70 text-sm sm:text-base md:text-lg">
|
||||
<li>Fotografia de Eventos</li>
|
||||
<li>Álbuns Personalizados</li>
|
||||
<li>Gestão de Formaturas</li>
|
||||
<li>Cobertura Completa</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Links Úteis */}
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-4 uppercase tracking-wider text-sm">Links Úteis</h4>
|
||||
<ul className="space-y-3 text-gray-400 text-sm">
|
||||
<h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">Links Úteis</h4>
|
||||
<ul className="space-y-2 md:space-y-3 text-brand-black/70 text-sm sm:text-base md:text-lg">
|
||||
<li>
|
||||
<a href="#" onClick={() => setCurrentPage('login')} className="hover:text-brand-gold transition-colors">
|
||||
<a href="#" onClick={() => setCurrentPage('login')} className="hover:text-brand-black transition-colors">
|
||||
Área do Cliente
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onClick={() => setCurrentPage('register')} className="hover:text-brand-gold transition-colors">
|
||||
<a href="#" onClick={() => setCurrentPage('register')} className="hover:text-brand-black transition-colors">
|
||||
Cadastre sua Formatura
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-brand-gold transition-colors">
|
||||
Portfólio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-brand-gold transition-colors">
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contato */}
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-4 uppercase tracking-wider text-sm">Contato</h4>
|
||||
<ul className="space-y-3 text-gray-400 text-sm">
|
||||
<li className="flex items-center gap-2">
|
||||
<span>📧</span>
|
||||
<a href="mailto:contato@photum.com.br" className="hover:text-brand-gold transition-colors">
|
||||
<h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">Contato</h4>
|
||||
<ul className="space-y-3 md:space-y-4 text-brand-black/70 text-sm sm:text-base md:text-lg">
|
||||
<li className="flex items-center gap-2 md:gap-3">
|
||||
<svg className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
|
||||
</svg>
|
||||
<a href="mailto:contato@photum.com.br" className="hover:text-brand-black transition-colors break-all">
|
||||
contato@photum.com.br
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span>📱</span>
|
||||
<span>(11) 99999-9999</span>
|
||||
<li className="flex items-start gap-2 md:gap-3">
|
||||
<svg className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 12h2c0-4.97-4.03-9-9-9v2c3.87 0 7 3.13 7 7zm-4 0h2c0-2.76-2.24-5-5-5v2c1.66 0 3 1.34 3 3z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p>(19) 3405 5024</p>
|
||||
<p>(19) 3621 4621</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span>📍</span>
|
||||
<span>São Paulo, SP</span>
|
||||
<li className="flex items-center gap-2 md:gap-3">
|
||||
<svg className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
||||
</svg>
|
||||
<span>Americana, SP</span>
|
||||
</li>
|
||||
<li className="flex gap-4 mt-4">
|
||||
<a href="#" className="hover:text-brand-gold transition-colors text-xl">
|
||||
📷
|
||||
<li className="flex gap-4 md:gap-5 mt-4 md:mt-6">
|
||||
<a href="#" className="hover:text-brand-black transition-colors">
|
||||
<svg className="w-7 h-7 md:w-8 md:h-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" className="hover:text-brand-gold transition-colors text-xl">
|
||||
👥
|
||||
<a href="#" className="hover:text-brand-black transition-colors">
|
||||
<svg className="w-7 h-7 md:w-8 md:h-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" className="hover:text-brand-gold transition-colors text-xl">
|
||||
▶️
|
||||
<a href="#" className="hover:text-brand-black transition-colors">
|
||||
<svg className="w-7 h-7 md:w-8 md:h-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -171,16 +164,16 @@ const AppContent: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
|
||||
<div className="border-t border-black/20 pt-6 md:pt-8 flex flex-col md:flex-row justify-between items-center text-xs sm:text-sm md:text-base text-brand-black/60 gap-4">
|
||||
<p>© 2025 PhotumFormaturas. Todos os direitos reservados.</p>
|
||||
<div className="flex space-x-8 mt-4 md:mt-0">
|
||||
<a href="#" className="hover:text-brand-gold transition-colors">
|
||||
<div className="flex flex-wrap justify-center gap-4 sm:gap-6 md:gap-8">
|
||||
<a href="#" onClick={() => setCurrentPage('privacy')} className="hover:text-brand-black transition-colors">
|
||||
Política de Privacidade
|
||||
</a>
|
||||
<a href="#" className="hover:text-brand-gold transition-colors">
|
||||
<a href="#" onClick={() => setCurrentPage('terms')} className="hover:text-brand-black transition-colors">
|
||||
Termos de Uso
|
||||
</a>
|
||||
<a href="#" className="hover:text-brand-gold transition-colors">
|
||||
<a href="#" onClick={() => setCurrentPage('lgpd')} className="hover:text-brand-black transition-colors">
|
||||
LGPD
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
127
index.html
127
index.html
|
|
@ -38,32 +38,117 @@
|
|||
width: 8px;
|
||||
}
|
||||
|
||||
::- webkit - scrollbar - track {
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
:: -webkit - scrollbar - thumb {
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #B9CF33;
|
||||
border - radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:: -webkit - scrollbar - thumb:hover {
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a5bd2e;
|
||||
}
|
||||
|
||||
.fade -in {
|
||||
animation: fadeIn 0.5s ease- out forwards;
|
||||
/* Loading Screen */
|
||||
#loading-screen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #492E61 0%, #6B4694 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
animation: fadeOut 0.5s ease-out 2.5s forwards;
|
||||
}
|
||||
|
||||
.slide - up {
|
||||
animation: slideUp 0.6s ease - out forwards;
|
||||
@keyframes fadeOut {
|
||||
to {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-logo {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
margin-bottom: 30px;
|
||||
animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 20px;
|
||||
animation: fadeInUp 0.8s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-bar {
|
||||
width: 200px;
|
||||
height: 3px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.8s ease-out 0.5s both;
|
||||
}
|
||||
|
||||
.loading-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #B9CF33, #C2388B);
|
||||
border-radius: 10px;
|
||||
animation: loadingProgress 2s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes loadingProgress {
|
||||
from {
|
||||
width: 0%;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slideUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -74,7 +159,22 @@
|
|||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Page entrance animation */
|
||||
#root {
|
||||
animation: pageEntrance 0.5s ease-out 2.5s both;
|
||||
}
|
||||
|
||||
@keyframes pageEntrance {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
|
@ -84,6 +184,15 @@
|
|||
</head>
|
||||
|
||||
<body class="bg-white text-brand-black antialiased selection:bg-brand-gold selection:text-white">
|
||||
<!-- Loading Screen -->
|
||||
<div id="loading-screen">
|
||||
<img src="/logo.png" alt="Photum Formaturas" class="loading-logo" />
|
||||
<div class="loading-text">PHOTUM FORMATURAS</div>
|
||||
<div class="loading-bar">
|
||||
<div class="loading-bar-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/index.tsx"></script>
|
||||
</body>
|
||||
|
|
|
|||
142
pages/Home.tsx
142
pages/Home.tsx
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Camera, Heart, Shield, Star, BookOpen } from 'lucide-react';
|
||||
|
||||
const HERO_IMAGES = [
|
||||
|
|
@ -10,8 +10,38 @@ interface HomeProps {
|
|||
onEnter: () => void;
|
||||
}
|
||||
|
||||
// Hook para detectar quando elemento está visível
|
||||
const useIntersectionObserver = (options = {}) => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
}, { threshold: 0.1, ...options });
|
||||
|
||||
if (ref.current) {
|
||||
observer.observe(ref.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (ref.current) {
|
||||
observer.unobserve(ref.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return [ref, isVisible] as const;
|
||||
};
|
||||
|
||||
export const Home: React.FC<HomeProps> = ({ onEnter }) => {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [albumsRef, albumsVisible] = useIntersectionObserver();
|
||||
const [ctaRef, ctaVisible] = useIntersectionObserver();
|
||||
const [testimonialsRef, testimonialsVisible] = useIntersectionObserver();
|
||||
const [contactRef, contactVisible] = useIntersectionObserver();
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
|
|
@ -60,20 +90,20 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
|
|||
</div>
|
||||
|
||||
{/* Albums Section */}
|
||||
<section className="py-24 relative overflow-hidden" style={{ backgroundColor: '#ffffff' }}>
|
||||
<section ref={albumsRef} className="py-24 relative overflow-hidden" style={{ backgroundColor: '#ffffff' }}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-16">
|
||||
{/* Left side - Icon and Text */}
|
||||
<div className="lg:w-1/2 text-left fade-in">
|
||||
<div className="inline-flex items-center justify-center w-36 h-36 mb-8 transform transition-transform duration-300 hover:scale-110 hover:rotate-3">
|
||||
<div className="lg:w-1/2 text-left">
|
||||
<div className={`inline-flex items-center justify-center w-36 h-36 mb-8 transform transition-all duration-700 ease-out ${albumsVisible ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 -rotate-12'} hover:scale-110 hover:rotate-3`}>
|
||||
<img src="/HOME_17.png" alt="Álbuns" className="w-full h-full object-contain drop-shadow-2xl" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-5xl md:text-6xl font-bold mb-8 leading-tight" style={{color: '#B9CF33'}}>
|
||||
<h2 className={`text-5xl md:text-6xl font-bold mb-8 leading-tight transition-all duration-700 ease-out delay-100 ${albumsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`} style={{color: '#B9CF33'}}>
|
||||
ÁLBUNS<br/>PERSONALIZADOS
|
||||
</h2>
|
||||
|
||||
<div className="space-y-3 text-gray-700">
|
||||
<div className={`space-y-3 text-gray-700 transition-all duration-700 ease-out delay-200 ${albumsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
|
||||
<p className="text-lg leading-relaxed">
|
||||
Escolha a cor, tamanho, tecido, acabamento, modelo,
|
||||
</p>
|
||||
|
|
@ -87,19 +117,19 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
|
|||
</div>
|
||||
|
||||
{/* Right side - CTA */}
|
||||
<div className="lg:w-2/8 flex flex-col items-center lg:items-start justify-center ml-40 slide-up">
|
||||
<div ref={ctaRef} className={`lg:w-2/8 flex flex-col items-center lg:items-start justify-center ml-40 transition-all duration-700 ease-out delay-300 ${ctaVisible ? 'opacity-100 translate-x-0 scale-100' : 'opacity-0 translate-x-20 scale-90'}`}>
|
||||
<div className="bg-white rounded-lg shadow-2xl p-10 border-t-4 transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2" style={{ borderColor: '#B9CF33' }}>
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className={`flex justify-center mb-6 transition-all duration-700 ease-out delay-400 ${ctaVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-80'}`}>
|
||||
<div className="w-29 h-29 transform transition-transform duration-300 hover:scale-110">
|
||||
<img src="/logo.png" alt="Cadastrar" className="w-full h-full object-contain drop-shadow-lg" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-700 text-xl mb-5 text-center font-medium leading-relaxed">
|
||||
<p className={`text-gray-700 text-xl mb-5 text-center font-medium leading-relaxed transition-all duration-700 ease-out delay-500 ${ctaVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}>
|
||||
Faça parte da Photum e cadastre sua formatura.
|
||||
</p>
|
||||
<button
|
||||
onClick={onEnter}
|
||||
className="w-full px-10 py-5 text-white font-bold text-lg rounded-md transition-all duration-300 transform hover:scale-105 hover:shadow-2xl active:scale-95"
|
||||
className={`w-full px-10 py-5 text-white font-bold text-lg rounded-md transition-all duration-700 ease-out delay-600 transform hover:scale-105 hover:shadow-2xl active:scale-95 ${ctaVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}
|
||||
style={{ backgroundColor: '#B9CF33' }}
|
||||
>
|
||||
Cadastrar Formatura
|
||||
|
|
@ -115,33 +145,36 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
|
|||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section className="py-24 relative overflow-hidden" style={{ backgroundColor: '#492E61' }}>
|
||||
<div className="max-w-7xl mx-auto px-8 sm:px-12 lg:px-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-wide">ENTRE EM CONTATO</h2>
|
||||
<p className="text-white/90 text-lg">Envie sua mensagem, ligue ou faça uma visita em nossa empresa!</p>
|
||||
<section ref={contactRef} className="py-16 relative overflow-hidden" style={{ backgroundColor: '#492E61' }}>
|
||||
{/* Decorative gradient circles */}
|
||||
<div className="absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-10 blur-3xl" style={{ backgroundColor: '#B9CF33' }}></div>
|
||||
<div className="absolute -bottom-24 -left-24 w-96 h-96 rounded-full opacity-10 blur-3xl" style={{ backgroundColor: '#C2388B' }}></div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-8 sm:px-12 lg:px-20 relative z-10">
|
||||
<div className={`text-center mb-12 transition-all duration-700 ${contactVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10'}`}>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#B9CF32] mb-3 tracking-wide">ENTRE EM CONTATO</h2>
|
||||
<p className="text-white/90">Envie sua mensagem, ligue ou faça uma visita em nossa empresa!</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-start max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start max-w-6xl mx-auto">
|
||||
{/* Left side - Contact Info */}
|
||||
<div className="space-y-6 text-white">
|
||||
<div className={`space-y-5 text-white transition-all duration-700 delay-200 ${contactVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-20'}`}>
|
||||
<div className="group">
|
||||
<div className="flex items-start gap-4 p-3 rounded-lg transition-all duration-300 hover:bg-white/10">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<div className="flex items-start gap-3 p-3 rounded-xl transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:-translate-y-1 cursor-pointer border border-white/5 hover:border-white/20">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
|
||||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold mb-1">Rua Bom Recreio, 305</p>
|
||||
<p className="font-bold mb-1">Rua Bom Recreio, 305</p>
|
||||
<p className="text-white/80 text-sm">Jd. Boer II • Americana SP</p>
|
||||
<p className="text-white/80 text-sm mb-1">CEP 13477-720</p>
|
||||
<p className="text-white/80 text-sm mb-2">CEP 13477-720</p>
|
||||
<a
|
||||
href="https://goo.gl/maps/4EwukztUUXP2"
|
||||
href="https://www.google.com/maps/place/Photum+Formaturas/@-22.7442887,-47.290221,21z/data=!4m12!1m5!3m4!2zMjLCsDQ0JzM5LjMiUyA0N8KwMTcnMjQuOCJX!8m2!3d-22.744247!4d-47.290221!3m5!1s0x94c89755cd9e70a9:0x15496eb4ec405483!8m2!3d-22.7442757!4d-47.2902662!16s%2Fg%2F11g6my_mm1?hl=pt&entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs underline hover:text-white/70 transition-colors inline-flex items-center gap-1"
|
||||
className="text-xs underline hover:text-white transition-colors inline-flex items-center gap-1 font-medium"
|
||||
>
|
||||
Ver no mapa →
|
||||
</a>
|
||||
|
|
@ -149,29 +182,42 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mini Map */}
|
||||
<div className="rounded-xl overflow-hidden shadow-lg border border-white/10 h-48">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d235.28736842715582!2d-47.29022099999999!3d-22.7442887!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94c89755cd9e70a9%3A0x15496eb4ec405483!2sPhotum%20Formaturas!5e0!3m2!1spt-BR!2sbr!4v1701234567890!5m2!1spt-BR!2sbr"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div className="group">
|
||||
<div className="flex items-start gap-4 p-3 rounded-lg transition-all duration-300 hover:bg-white/10">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
<div className="flex items-start gap-3 p-3 rounded-xl transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:-translate-y-1 cursor-pointer border border-white/5 hover:border-white/20">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
|
||||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 12h2c0-4.97-4.03-9-9-9v2c3.87 0 7 3.13 7 7zm-4 0h2c0-2.76-2.24-5-5-5v2c1.66 0 3 1.34 3 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p>(19) 3405.5024</p>
|
||||
<p>(19) 3621.4621</p>
|
||||
<p className="font-semibold">(19) 3405.5024</p>
|
||||
<p className="font-semibold">(19) 3621.4621</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group">
|
||||
<div className="flex items-start gap-4 p-3 rounded-lg transition-all duration-300 hover:bg-white/10">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
<div className="flex items-start gap-3 p-3 rounded-xl transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:-translate-y-1 cursor-pointer border border-white/5 hover:border-white/20">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
|
||||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<a href="mailto:contato@photum.com.br" className="hover:text-white/70 transition-colors">
|
||||
<a href="mailto:contato@photum.com.br" className="font-semibold hover:text-white transition-colors">
|
||||
contato@photum.com.br
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -180,26 +226,36 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
|
|||
</div>
|
||||
|
||||
{/* Right side - Contact Form */}
|
||||
<div className="space-y-5 bg-white/5 p-6 rounded-xl backdrop-blur-sm">
|
||||
<div className={`space-y-5 bg-gradient-to-br from-white/10 to-white/5 p-6 rounded-2xl backdrop-blur-md border border-white/10 shadow-2xl transition-all duration-700 delay-300 ${contactVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-20'}`}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nome"
|
||||
className="w-full px-3 py-3 bg-transparent border-b-2 border-white/30 text-white placeholder-white/60 focus:border-white focus:outline-none transition-colors"
|
||||
className="w-full px-4 py-3 bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="E-mail"
|
||||
className="w-full px-4 py-3 bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Telefone"
|
||||
className="w-full px-3 py-3 bg-transparent border-b-2 border-white/30 text-white placeholder-white/60 focus:border-white focus:outline-none transition-colors"
|
||||
className="w-full px-4 py-3 bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Mensagem"
|
||||
rows={4}
|
||||
className="w-full px-3 py-3 bg-transparent border-b-2 border-white/30 text-white placeholder-white/60 focus:border-white focus:outline-none transition-colors resize-none"
|
||||
className="w-full px-4 py-3 bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none rounded-t-lg"
|
||||
></textarea>
|
||||
<button
|
||||
className="w-full px-8 py-3 bg-white text-brand-black font-bold rounded-lg hover:bg-white/90 transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg"
|
||||
className="w-full px-10 py-3 text-white font-bold rounded-xl hover:opacity-90 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl active:scale-95 relative overflow-hidden group flex items-center justify-center gap-2"
|
||||
style={{ backgroundColor: '#B9CF32' }}
|
||||
>
|
||||
enviar
|
||||
<span className="relative z-10">Enviar</span>
|
||||
<svg className="w-5 h-5 relative z-10 rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
||||
</svg>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
135
pages/LGPD.tsx
Normal file
135
pages/LGPD.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
import React from 'react';
|
||||
|
||||
interface LGPDProps {
|
||||
onNavigate: (page: string) => void;
|
||||
}
|
||||
|
||||
export const LGPD: React.FC<LGPDProps> = ({ onNavigate }) => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white py-20 px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<button
|
||||
onClick={() => onNavigate('home')}
|
||||
className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
|
||||
>
|
||||
← Voltar para Home
|
||||
</button>
|
||||
|
||||
<h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
|
||||
LGPD - Lei Geral de Proteção de Dados
|
||||
</h1>
|
||||
|
||||
<div className="prose prose-lg max-w-none text-gray-700 space-y-6">
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">Nosso Compromisso com a LGPD</h2>
|
||||
<p>
|
||||
A Photum Formaturas está totalmente comprometida com a proteção de dados pessoais conforme
|
||||
estabelecido pela Lei Geral de Proteção de Dados (Lei nº 13.709/2018).
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Princípios que Seguimos</h2>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li><strong>Finalidade:</strong> Coletamos dados apenas para propósitos específicos e legítimos</li>
|
||||
<li><strong>Adequação:</strong> O tratamento é compatível com as finalidades informadas</li>
|
||||
<li><strong>Necessidade:</strong> Limitamos a coleta ao mínimo necessário</li>
|
||||
<li><strong>Transparência:</strong> Informamos claramente sobre o uso dos dados</li>
|
||||
<li><strong>Segurança:</strong> Adotamos medidas técnicas e administrativas para proteção</li>
|
||||
<li><strong>Prevenção:</strong> Evitamos danos por meio de boas práticas</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Seus Direitos sob a LGPD</h2>
|
||||
<p>Como titular de dados, você tem os seguintes direitos:</p>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li><strong>Confirmação e Acesso:</strong> Saber se tratamos seus dados e acessá-los</li>
|
||||
<li><strong>Correção:</strong> Corrigir dados incompletos, inexatos ou desatualizados</li>
|
||||
<li><strong>Anonimização, Bloqueio ou Eliminação:</strong> Solicitar remoção de dados desnecessários</li>
|
||||
<li><strong>Portabilidade:</strong> Receber seus dados em formato estruturado</li>
|
||||
<li><strong>Eliminação:</strong> Excluir dados tratados com seu consentimento</li>
|
||||
<li><strong>Informação:</strong> Saber com quem compartilhamos seus dados</li>
|
||||
<li><strong>Revogação do Consentimento:</strong> Retirar autorização a qualquer momento</li>
|
||||
<li><strong>Oposição:</strong> Se opor ao tratamento realizado com base em uma das hipóteses legais</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Tratamento de Dados</h2>
|
||||
<p>Tratamos dados pessoais nas seguintes situações:</p>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Mediante seu consentimento</li>
|
||||
<li>Para cumprimento de obrigação legal</li>
|
||||
<li>Para execução de contrato</li>
|
||||
<li>Para exercício regular de direitos</li>
|
||||
<li>Para proteção do crédito</li>
|
||||
<li>Por legítimo interesse</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Compartilhamento de Dados</h2>
|
||||
<p>
|
||||
Seus dados podem ser compartilhados apenas com:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Prestadores de serviços essenciais (processamento de pagamentos, armazenamento em nuvem)</li>
|
||||
<li>Autoridades quando exigido por lei</li>
|
||||
<li>Parceiros comerciais, mediante seu consentimento explícito</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Segurança dos Dados</h2>
|
||||
<p>Implementamos medidas de segurança como:</p>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Criptografia de dados sensíveis</li>
|
||||
<li>Controles de acesso rigorosos</li>
|
||||
<li>Monitoramento constante de segurança</li>
|
||||
<li>Treinamento de equipe sobre proteção de dados</li>
|
||||
<li>Backups regulares e seguros</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Retenção de Dados</h2>
|
||||
<p>
|
||||
Mantemos seus dados pessoais apenas pelo tempo necessário para cumprir as finalidades
|
||||
para as quais foram coletados, incluindo requisitos legais, contratuais e de prestação de contas.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">7. Encarregado de Dados (DPO)</h2>
|
||||
<p>
|
||||
Para exercer seus direitos ou esclarecer dúvidas sobre o tratamento de dados pessoais,
|
||||
entre em contato com nosso Encarregado de Proteção de Dados:
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
<strong>E-mail:</strong>{' '}
|
||||
<a href="mailto:lgpd@photum.com.br" className="text-brand-purple hover:underline">
|
||||
lgpd@photum.com.br
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Telefone:</strong> (19) 3405-5024
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">8. Autoridade Nacional</h2>
|
||||
<p>
|
||||
Você também pode entrar em contato com a Autoridade Nacional de Proteção de Dados (ANPD)
|
||||
para questões relacionadas à proteção de seus dados pessoais.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<p className="text-sm text-gray-500 mt-8">
|
||||
Última atualização: Dezembro de 2025
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
116
pages/Login.tsx
116
pages/Login.tsx
|
|
@ -46,7 +46,7 @@ export const Login: React.FC = () => {
|
|||
alt="Photum Login"
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-brand-black/40 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#492E61]/90 to-[#492E61]/70 flex items-center justify-center">
|
||||
<div className="text-center text-white p-12">
|
||||
<h1 className="text-5xl font-serif font-bold mb-4">Photum Formaturas</h1>
|
||||
<p className="text-xl font-light tracking-wide max-w-md mx-auto">Gestão de eventos premium para quem não abre mão da excelência.</p>
|
||||
|
|
@ -58,33 +58,100 @@ export const Login: React.FC = () => {
|
|||
<div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16">
|
||||
<div className="max-w-md w-full space-y-8 fade-in">
|
||||
<div className="text-center lg:text-left">
|
||||
<span className="text-brand-gold font-bold tracking-widest uppercase text-sm">Bem-vindo de volta</span>
|
||||
<span className="font-bold tracking-widest uppercase text-sm" style={{color: '#B9CF33'}}>Bem-vindo de volta</span>
|
||||
<h2 className="mt-2 text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Não tem uma conta?{' '}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => window.location.hash = '#register'}
|
||||
className="font-medium hover:opacity-80 transition-opacity"
|
||||
style={{color: '#B9CF33'}}
|
||||
>
|
||||
Cadastre-se
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="mt-8 space-y-6" onSubmit={handleLogin}>
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
label="E-mail Corporativo ou Pessoal"
|
||||
type="email"
|
||||
required
|
||||
placeholder="nome@exemplo.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
error={error}
|
||||
/>
|
||||
<Input
|
||||
label="Senha"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
readOnly
|
||||
className="bg-gray-50 cursor-not-allowed"
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
E-MAIL CORPORATIVO OU PESSOAL
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
placeholder="nome@exemplo.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
|
||||
style={{focusRing: '2px solid #B9CF33'}}
|
||||
onFocus={(e) => e.target.style.borderColor = '#B9CF33'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
|
||||
/>
|
||||
{error && <span className="text-xs text-red-500 mt-1 block">{error}</span>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
SENHA
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
readOnly
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 cursor-not-allowed"
|
||||
/>
|
||||
<button type="button" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" size="lg" isLoading={isLoading}>
|
||||
Entrar no Sistema
|
||||
</Button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full px-10 py-4 text-white font-bold text-lg rounded-lg transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
style={{backgroundColor: '#1a1a1a'}}
|
||||
>
|
||||
{isLoading ? 'Entrando...' : 'Entrar no Sistema'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Demo Users Quick Select */}
|
||||
<div className="mt-10 pt-10 border-t border-gray-200">
|
||||
<p className="text-xs uppercase tracking-widest mb-4 text-center text-gray-400">Usuários de Demonstração (Clique para preencher)</p>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{availableUsers.map(user => (
|
||||
<button
|
||||
key={user.id}
|
||||
onClick={() => fillCredentials(user.email)}
|
||||
className="flex flex-col items-start p-4 border-2 rounded-lg hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.02]"
|
||||
style={{borderColor: '#e5e7eb'}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#B9CF33';
|
||||
e.currentTarget.style.boxShadow = '0 4px 12px rgba(185, 207, 51, 0.15)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<span className="text-sm font-bold text-gray-900">{user.name}</span>
|
||||
<span className="text-xs uppercase tracking-wide mt-1 font-semibold" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
|
||||
<span className="text-xs text-gray-500 mt-1 truncate w-full">{user.email}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>yle={{backgroundColor: '#1a1a1a'}}
|
||||
>
|
||||
{isLoading ? 'Entrando...' : 'Entrar no Sistema'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Demo Users Quick Select */}
|
||||
|
|
@ -95,10 +162,13 @@ export const Login: React.FC = () => {
|
|||
<button
|
||||
key={user.id}
|
||||
onClick={() => fillCredentials(user.email)}
|
||||
className="flex flex-col items-start p-3 border border-gray-200 rounded-sm hover:border-brand-gold hover:bg-gray-50 transition-all text-left group"
|
||||
className="flex flex-col items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all text-left group"
|
||||
style={{borderColor: '#e5e7eb'}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.borderColor = '#B9CF33'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.borderColor = '#e5e7eb'}
|
||||
>
|
||||
<span className="text-xs font-bold text-gray-700 group-hover:text-brand-black">{user.name}</span>
|
||||
<span className="text-[10px] uppercase tracking-wide text-brand-gold mt-1">{getRoleLabel(user.role)}</span>
|
||||
<span className="text-[10px] uppercase tracking-wide mt-1" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
|
||||
<span className="text-[10px] text-gray-400 mt-0.5 truncate w-full">{user.email}</span>
|
||||
</button>
|
||||
))}
|
||||
|
|
|
|||
95
pages/PrivacyPolicy.tsx
Normal file
95
pages/PrivacyPolicy.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import React from 'react';
|
||||
|
||||
interface PrivacyPolicyProps {
|
||||
onNavigate: (page: string) => void;
|
||||
}
|
||||
|
||||
export const PrivacyPolicy: React.FC<PrivacyPolicyProps> = ({ onNavigate }) => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white py-20 px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<button
|
||||
onClick={() => onNavigate('home')}
|
||||
className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
|
||||
>
|
||||
← Voltar para Home
|
||||
</button>
|
||||
|
||||
<h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
|
||||
Política de Privacidade
|
||||
</h1>
|
||||
|
||||
<div className="prose prose-lg max-w-none text-gray-700 space-y-6">
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Informações que Coletamos</h2>
|
||||
<p>
|
||||
A Photum Formaturas coleta informações que você nos fornece diretamente ao criar uma conta,
|
||||
solicitar serviços ou entrar em contato conosco. Isso pode incluir:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Nome completo</li>
|
||||
<li>Endereço de e-mail</li>
|
||||
<li>Número de telefone</li>
|
||||
<li>Informações sobre o evento (formatura)</li>
|
||||
<li>Dados de pagamento (processados de forma segura)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Como Usamos suas Informações</h2>
|
||||
<p>Utilizamos as informações coletadas para:</p>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Fornecer e gerenciar nossos serviços de fotografia</li>
|
||||
<li>Processar pagamentos e enviar confirmações</li>
|
||||
<li>Comunicar sobre seus eventos e serviços contratados</li>
|
||||
<li>Melhorar nossos serviços e experiência do cliente</li>
|
||||
<li>Enviar atualizações e informações relevantes</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Proteção de Dados</h2>
|
||||
<p>
|
||||
Implementamos medidas de segurança técnicas e organizacionais para proteger suas informações
|
||||
pessoais contra acesso não autorizado, alteração, divulgação ou destruição.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Compartilhamento de Informações</h2>
|
||||
<p>
|
||||
Não vendemos, alugamos ou compartilhamos suas informações pessoais com terceiros, exceto
|
||||
quando necessário para fornecer nossos serviços ou quando exigido por lei.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Seus Direitos</h2>
|
||||
<p>Você tem o direito de:</p>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Acessar suas informações pessoais</li>
|
||||
<li>Corrigir dados incorretos</li>
|
||||
<li>Solicitar a exclusão de seus dados</li>
|
||||
<li>Retirar seu consentimento a qualquer momento</li>
|
||||
<li>Solicitar a portabilidade de seus dados</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Contato</h2>
|
||||
<p>
|
||||
Para questões sobre esta Política de Privacidade, entre em contato conosco em:{' '}
|
||||
<a href="mailto:contato@photum.com.br" className="text-brand-purple hover:underline">
|
||||
contato@photum.com.br
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<p className="text-sm text-gray-500 mt-8">
|
||||
Última atualização: Dezembro de 2025
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -136,7 +136,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
|
|||
alt="Photum Cadastro"
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-brand-black/40 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#492E61]/90 to-[#492E61]/70 flex items-center justify-center">
|
||||
<div className="text-center text-white p-12">
|
||||
<h1 className="text-5xl font-serif font-bold mb-4">Faça parte da Photum</h1>
|
||||
<p className="text-xl font-light tracking-wide max-w-md mx-auto">
|
||||
|
|
@ -150,13 +150,14 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
|
|||
<div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16">
|
||||
<div className="max-w-md w-full space-y-8 fade-in">
|
||||
<div className="text-center lg:text-left">
|
||||
<span className="text-brand-gold font-bold tracking-widest uppercase text-sm">Comece agora</span>
|
||||
<span className="font-bold tracking-widest uppercase text-sm" style={{color: '#B9CF33'}}>Comece agora</span>
|
||||
<h2 className="mt-2 text-3xl font-serif font-bold text-gray-900">Crie sua conta</h2>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Já tem uma conta?{' '}
|
||||
<button
|
||||
onClick={() => onNavigate('login')}
|
||||
className="text-brand-gold hover:text-brand-gold/80 font-medium"
|
||||
className="font-medium hover:opacity-80 transition-opacity"
|
||||
style={{color: '#B9CF33'}}
|
||||
>
|
||||
Faça login
|
||||
</button>
|
||||
|
|
@ -219,15 +220,16 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
|
|||
type="checkbox"
|
||||
checked={agreedToTerms}
|
||||
onChange={(e) => setAgreedToTerms(e.target.checked)}
|
||||
className="mt-1 h-4 w-4 text-brand-gold focus:ring-brand-gold border-gray-300 rounded"
|
||||
className="mt-1 h-4 w-4 border-gray-300 rounded focus:ring-2"
|
||||
style={{accentColor: '#B9CF33'}}
|
||||
/>
|
||||
<label className="ml-2 text-sm text-gray-600">
|
||||
Concordo com os{' '}
|
||||
<a href="#" className="text-brand-gold hover:text-brand-gold/80">
|
||||
<a href="#" className="hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
|
||||
termos de uso
|
||||
</a>{' '}
|
||||
e{' '}
|
||||
<a href="#" className="text-brand-gold hover:text-brand-gold/80">
|
||||
<a href="#" className="hover:opacity-80 transition-opacity" style={{color: '#B9CF33'}}>
|
||||
política de privacidade
|
||||
</a>
|
||||
</label>
|
||||
|
|
@ -237,12 +239,13 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start bg-gray-50 border border-gray-200 rounded-sm p-4">
|
||||
<div className="flex items-start bg-gray-50 border border-gray-200 rounded-lg p-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.wantsToAddInstitution}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, wantsToAddInstitution: e.target.checked }))}
|
||||
className="mt-1 h-4 w-4 text-brand-gold focus:ring-brand-gold border-gray-300 rounded"
|
||||
className="mt-1 h-4 w-4 border-gray-300 rounded focus:ring-2"
|
||||
style={{accentColor: '#B9CF33'}}
|
||||
/>
|
||||
<label className="ml-2 text-sm text-gray-700">
|
||||
<span className="font-medium">Cadastrar universidade agora (Opcional)</span>
|
||||
|
|
|
|||
108
pages/TermsOfUse.tsx
Normal file
108
pages/TermsOfUse.tsx
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import React from 'react';
|
||||
|
||||
interface TermsOfUseProps {
|
||||
onNavigate: (page: string) => void;
|
||||
}
|
||||
|
||||
export const TermsOfUse: React.FC<TermsOfUseProps> = ({ onNavigate }) => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white py-20 px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<button
|
||||
onClick={() => onNavigate('home')}
|
||||
className="mb-8 text-brand-purple hover:underline flex items-center gap-2"
|
||||
>
|
||||
← Voltar para Home
|
||||
</button>
|
||||
|
||||
<h1 className="text-4xl font-bold mb-8" style={{ color: '#B9CF33' }}>
|
||||
Termos de Uso
|
||||
</h1>
|
||||
|
||||
<div className="prose prose-lg max-w-none text-gray-700 space-y-6">
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">1. Aceitação dos Termos</h2>
|
||||
<p>
|
||||
Ao acessar e usar os serviços da Photum Formaturas, você concorda em cumprir e estar
|
||||
vinculado a estes Termos de Uso. Se você não concordar com algum destes termos,
|
||||
não utilize nossos serviços.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">2. Serviços Oferecidos</h2>
|
||||
<p>
|
||||
A Photum Formaturas oferece serviços de fotografia profissional, gestão de eventos de formatura,
|
||||
criação de álbuns personalizados e plataforma digital para gerenciamento de fotos.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">3. Cadastro e Conta</h2>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Você deve fornecer informações precisas e completas ao criar uma conta</li>
|
||||
<li>Você é responsável por manter a confidencialidade de sua senha</li>
|
||||
<li>Você deve notificar imediatamente sobre qualquer uso não autorizado de sua conta</li>
|
||||
<li>Contas são pessoais e intransferíveis</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">4. Direitos Autorais e Uso de Imagens</h2>
|
||||
<p>
|
||||
Todas as fotografias produzidas pela Photum Formaturas são protegidas por direitos autorais.
|
||||
Os clientes recebem licença de uso pessoal e não comercial das imagens adquiridas.
|
||||
</p>
|
||||
<ul className="list-disc pl-6 space-y-2 mt-4">
|
||||
<li>As imagens não podem ser usadas para fins comerciais sem autorização</li>
|
||||
<li>A Photum Formaturas pode usar as imagens em seu portfólio e materiais promocionais</li>
|
||||
<li>É proibida a reprodução não autorizada das fotografias</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">5. Pagamentos e Cancelamentos</h2>
|
||||
<p>
|
||||
Os valores dos serviços são estabelecidos em contrato. Cancelamentos devem seguir as
|
||||
políticas específicas acordadas no momento da contratação.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">6. Limitação de Responsabilidade</h2>
|
||||
<p>
|
||||
A Photum Formaturas não se responsabiliza por:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Problemas técnicos causados por terceiros</li>
|
||||
<li>Perdas indiretas ou consequenciais</li>
|
||||
<li>Eventos fora de nosso controle (caso fortuito ou força maior)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">7. Modificações dos Termos</h2>
|
||||
<p>
|
||||
Reservamos o direito de modificar estes termos a qualquer momento. As alterações entrarão
|
||||
em vigor imediatamente após sua publicação no site.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold mb-4 text-brand-purple">8. Contato</h2>
|
||||
<p>
|
||||
Para questões sobre estes Termos de Uso, entre em contato:{' '}
|
||||
<a href="mailto:contato@photum.com.br" className="text-brand-purple hover:underline">
|
||||
contato@photum.com.br
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<p className="text-sm text-gray-500 mt-8">
|
||||
Última atualização: Dezembro de 2025
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in a new issue