307 lines
No EOL
21 KiB
TypeScript
307 lines
No EOL
21 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Camera, Heart, Shield, Star, BookOpen } from 'lucide-react';
|
|
|
|
const HERO_IMAGES = [
|
|
"/banner2.jpg",
|
|
"/HOME_01.jpg"
|
|
];
|
|
|
|
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(() => {
|
|
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-[50vh] sm:h-[60vh] md: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-4 sm:space-y-6 slide-up">
|
|
<h1 className="text-3xl sm: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-base sm: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-4 sm:bottom-10 left-0 right-0 flex justify-center space-x-2 sm: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-6 sm:w-8' : 'bg-white/50'}`}
|
|
onClick={() => setCurrentSlide(idx)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Albums Section */}
|
|
<section ref={albumsRef} className="py-12 sm:py-16 md: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-8 sm:gap-12 lg:gap-16">
|
|
{/* Left side - Icon and Text */}
|
|
<div className="lg:w-1/2 text-center lg:text-left w-full">
|
|
<div className={`inline-flex items-center justify-center w-24 h-24 sm:w-32 sm:h-32 md:w-36 md:h-36 mb-6 sm: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-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 sm:mb-6 md: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-2 sm: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-sm sm:text-base md:text-lg leading-relaxed">
|
|
Escolha a cor, tamanho, tecido, acabamento, modelo,
|
|
</p>
|
|
<p className="text-sm sm:text-base md:text-lg leading-relaxed">
|
|
laminação, tipo de impressão e muito mais!
|
|
</p>
|
|
<p className="text-base sm:text-lg md:text-xl font-semibold text-brand-black mt-3 sm:mt-4">
|
|
Tenha seu álbum exclusivo e de acordo com o seu gosto.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right side - CTA */}
|
|
<div ref={ctaRef} className={`w-full lg:w-2/8 flex flex-col items-center lg:items-start justify-center lg:ml-40 mt-8 lg:mt-0 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-6 sm:p-8 md:p-10 border-t-4 transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2 w-full max-w-sm" style={{ borderColor: '#B9CF33' }}>
|
|
<div className={`flex justify-center mb-4 sm:mb-6 transition-all duration-700 ease-out delay-400 ${ctaVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-80'}`}>
|
|
<div className="w-38 h-38 sm:w-38 sm:h-38 md:w-50 md:h-50 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-base sm:text-lg md:text-xl mb-4 sm: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-6 sm:px-8 md:px-10 py-3 sm:py-4 md:py-5 text-white font-bold text-base sm: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
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Decorative elements */}
|
|
<div className="hidden sm:block absolute top-10 right-10 w-32 h-32 rounded-full opacity-10" style={{ backgroundColor: '#B9CF33' }}></div>
|
|
<div className="hidden sm:block absolute bottom-10 left-10 w-24 h-24 rounded-full opacity-10" style={{ backgroundColor: '#C2388B' }}></div>
|
|
</section>
|
|
|
|
{/* Contact Section */}
|
|
<section ref={contactRef} className="py-8 sm:py-12 md:py-16 relative overflow-hidden" style={{ backgroundColor: '#492E61' }}>
|
|
{/* Decorative gradient circles */}
|
|
<div className="hidden md:block absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-10 blur-3xl" style={{ backgroundColor: '#B9CF33' }}></div>
|
|
<div className="hidden md:block 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-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 relative z-10">
|
|
<div className={`text-center mb-8 sm:mb-10 md:mb-12 transition-all duration-700 ${contactVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10'}`}>
|
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#B9CF32] mb-2 sm:mb-3 tracking-wide">ENTRE EM CONTATO</h2>
|
|
<p className="text-sm sm:text-base 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-3 gap-4 sm:gap-6 items-start max-w-7xl mx-auto">
|
|
{/* Left side - Location Info */}
|
|
<div className={`space-y-2.5 sm:space-y-3 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-2 p-2 sm:p-2.5 rounded-lg transition-all duration-300 hover:bg-white/10 hover:shadow-lg cursor-pointer border border-white/5 hover:border-white/20">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
|
|
<svg className="w-5 h-5 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 min-w-0">
|
|
<p className="font-bold mb-0.5 text-sm">Rua Bom Recreio, 305</p>
|
|
<p className="text-white/80 text-xs">Jd. Boer II • Americana SP</p>
|
|
<p className="text-white/80 text-xs mb-1">CEP 13477-720</p>
|
|
<a
|
|
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 transition-colors inline-flex items-center gap-1 font-medium"
|
|
>
|
|
Ver no mapa →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mini Map */}
|
|
<div className="rounded-lg overflow-hidden shadow-lg border border-white/10 h-32 sm:h-36">
|
|
<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-center gap-2 p-2 sm:p-2.5 rounded-lg transition-all duration-300 hover:bg-white/10 hover:shadow-lg cursor-pointer border border-white/5 hover:border-white/20">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
|
|
<svg className="w-5 h-5 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 className="font-semibold text-sm">(19) 3405 5024</p>
|
|
<p className="font-semibold text-sm">(19) 3621 4621</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="group">
|
|
<div className="flex items-center gap-2 p-2 sm:p-2.5 rounded-lg transition-all duration-300 hover:bg-white/10 hover:shadow-lg cursor-pointer border border-white/5 hover:border-white/20">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-white/20 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
|
|
<svg className="w-5 h-5 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 min-w-0">
|
|
<a href="mailto:contato@photum.com.br" className="font-semibold hover:text-white transition-colors text-sm break-all">
|
|
contato@photum.com.br
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center - Contact Form */}
|
|
<div className={`space-y-2.5 bg-gradient-to-br from-white/10 to-white/5 p-4 sm:p-5 rounded-xl backdrop-blur-md border border-white/10 shadow-2xl transition-all duration-700 delay-250 ${contactVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
|
|
<input
|
|
type="text"
|
|
placeholder="Nome"
|
|
className="w-full px-3 py-2 text-sm 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-3 py-2 text-sm 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-2 text-sm 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={3}
|
|
className="w-full px-3 py-2 text-sm 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-6 py-2.5 text-sm text-white font-bold rounded-lg hover:opacity-90 transition-all duration-300 transform hover:scale-105 hover:shadow-xl active:scale-95 relative overflow-hidden group flex items-center justify-center gap-2"
|
|
style={{ backgroundColor: '#B9CF32' }}
|
|
>
|
|
<span className="relative z-10">Enviar</span>
|
|
<svg className="w-4 h-4 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>
|
|
|
|
{/* Right side - WhatsApp Card */}
|
|
<div className={`transition-all duration-700 delay-300 ${contactVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-20'}`}>
|
|
<div className="bg-gradient-to-br from-[#25D366]/20 to-[#128C7E]/20 p-5 sm:p-6 rounded-xl backdrop-blur-md border border-[#25D366]/30 shadow-2xl hover:shadow-[#25D366]/20 hover:-translate-y-1 transition-all duration-300">
|
|
<div className="flex flex-col items-center text-center space-y-3">
|
|
{/* WhatsApp Icon */}
|
|
<div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-[#25D366] flex items-center justify-center shadow-lg transform hover:scale-110 transition-transform duration-300">
|
|
<svg className="w-10 h-10 sm:w-12 sm:h-12 text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Text */}
|
|
<div className="space-y-1">
|
|
<h3 className="text-lg sm:text-xl font-bold text-white">Tire suas dúvidas</h3>
|
|
<p className="text-xs sm:text-sm text-white/90 leading-snug">
|
|
Faça orçamento direto no nosso WhatsApp
|
|
</p>
|
|
</div>
|
|
|
|
{/* WhatsApp Button */}
|
|
<a
|
|
href="https://wa.me/5519999999999"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-full bg-[#25D366] hover:bg-[#128C7E] text-white font-bold py-2.5 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl active:scale-95 flex items-center justify-center gap-2 group text-sm"
|
|
>
|
|
<svg className="w-5 h-5 transform group-hover:rotate-12 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
|
|
</svg>
|
|
<span>Falar no WhatsApp</span>
|
|
</a>
|
|
|
|
{/* Additional Info */}
|
|
<div className="flex items-center gap-1.5 text-xs text-white/80">
|
|
<div className="w-2 h-2 bg-[#25D366] rounded-full animate-pulse"></div>
|
|
<span>Resposta rápida garantida</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}; |