210 lines
No EOL
10 KiB
TypeScript
210 lines
No EOL
10 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Camera, Heart, Shield, Star, BookOpen } from 'lucide-react';
|
|
|
|
const HERO_IMAGES = [
|
|
"/banner2.jpg",
|
|
"/HOME_01.jpg"
|
|
];
|
|
|
|
interface HomeProps {
|
|
onEnter: () => void;
|
|
}
|
|
|
|
export const Home: React.FC<HomeProps> = ({ onEnter }) => {
|
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentSlide((prev) => (prev + 1) % HERO_IMAGES.length);
|
|
}, 5000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
{/* Hero Section */}
|
|
<div className="relative h-[70vh] w-full overflow-hidden">
|
|
{HERO_IMAGES.map((img, idx) => (
|
|
<div
|
|
key={idx}
|
|
className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${idx === currentSlide ? 'opacity-100' : 'opacity-0'}`}
|
|
>
|
|
<img src={img} alt="Hero" className="w-full h-full object-cover scale-110" />
|
|
<div className="absolute inset-0 bg-black/40"></div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Text - Only visible on first slide */}
|
|
<div className={`absolute inset-0 flex items-center justify-center text-center px-4 transition-opacity duration-500 ${currentSlide === 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
|
|
<div className="max-w-4xl space-y-6 slide-up">
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-white leading-tight">
|
|
Eternizando Momentos <br />
|
|
<span className="text-brand-gold italic">Únicos</span>
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-gray-200 font-light max-w-2xl mx-auto tracking-wide">
|
|
Gestão completa para eventos inesquecíveis. Do planejamento à entrega do álbum perfeito.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Carousel Dots */}
|
|
<div className="absolute bottom-10 left-0 right-0 flex justify-center space-x-3">
|
|
{HERO_IMAGES.map((_, idx) => (
|
|
<button
|
|
key={idx}
|
|
className={`w-2 h-2 rounded-full transition-all ${idx === currentSlide ? 'bg-brand-gold w-8' : 'bg-white/50'}`}
|
|
onClick={() => setCurrentSlide(idx)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Albums Section */}
|
|
<section 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">
|
|
<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'}}>
|
|
ÁLBUNS<br/>PERSONALIZADOS
|
|
</h2>
|
|
|
|
<div className="space-y-3 text-gray-700">
|
|
<p className="text-lg leading-relaxed">
|
|
Escolha a cor, tamanho, tecido, acabamento, modelo,
|
|
</p>
|
|
<p className="text-lg leading-relaxed">
|
|
laminação, tipo de impressão e muito mais!
|
|
</p>
|
|
<p className="text-xl font-semibold text-brand-black mt-4">
|
|
Tenha seu álbum exclusivo e de acordo com o seu gosto.
|
|
</p>
|
|
</div>
|
|
</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 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="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">
|
|
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"
|
|
style={{ backgroundColor: '#B9CF33' }}
|
|
>
|
|
Cadastrar Formatura
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Decorative elements */}
|
|
<div className="absolute top-10 right-10 w-32 h-32 rounded-full opacity-10" style={{ backgroundColor: '#B9CF33' }}></div>
|
|
<div className="absolute bottom-10 left-10 w-24 h-24 rounded-full opacity-10" style={{ backgroundColor: '#C2388B' }}></div>
|
|
</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>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-start max-w-6xl mx-auto">
|
|
{/* Left side - Contact Info */}
|
|
<div className="space-y-6 text-white">
|
|
<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" />
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-semibold 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>
|
|
<a
|
|
href="https://goo.gl/maps/4EwukztUUXP2"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs underline hover:text-white/70 transition-colors inline-flex items-center gap-1"
|
|
>
|
|
Ver no mapa →
|
|
</a>
|
|
</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 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" />
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p>(19) 3405.5024</p>
|
|
<p>(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" />
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1">
|
|
<a href="mailto:contato@photum.com.br" className="hover:text-white/70 transition-colors">
|
|
contato@photum.com.br
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right side - Contact Form */}
|
|
<div className="space-y-5 bg-white/5 p-6 rounded-xl backdrop-blur-sm">
|
|
<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"
|
|
/>
|
|
<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"
|
|
/>
|
|
<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"
|
|
></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"
|
|
>
|
|
enviar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}; |