Evandro Fonseca Junior
6ec67c8f5a
Enhance the About page with new story sections detailing personal journey and core values, including icons and structured content for better user engagement and self-presentation.
97 lines
3.8 KiB
TypeScript
97 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "motion/react";
|
|
import { ShimmerButton } from "@/components/magicui/shimmer-button";
|
|
import { useRef, useState } from "react";
|
|
import { usePortfolioData } from "@/lib/usePortfolioData";
|
|
import { ContactForm } from "./ContactForm"; // Importar o novo componente
|
|
import { ContactInfo } from "./ContactInfo"; // Importar o novo componente
|
|
|
|
export default function Contact() {
|
|
const { data } = usePortfolioData();
|
|
const contactSectionRef = useRef<HTMLElement>(null);
|
|
const [formType, setFormType] = useState<"simple" | "advanced">("simple"); // Estado para controlar o tipo de formulário
|
|
|
|
const handleWhatsAppClick = () => {
|
|
setFormType("simple"); // Redireciona para o formulário simples
|
|
if (contactSectionRef.current) {
|
|
contactSectionRef.current.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
const scrollToContact = () => {
|
|
if (contactSectionRef.current) {
|
|
contactSectionRef.current.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
if (!data) {
|
|
return null; // Ou um componente de carregamento/erro
|
|
}
|
|
|
|
return (
|
|
<section
|
|
id="contact"
|
|
ref={contactSectionRef}
|
|
className="py-20 px-4 bg-gradient-to-t from-black/20 to-transparent"
|
|
>
|
|
<div className="max-w-6xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-cyan-400/10 to-blue-500/10 px-6 py-3 rounded-full mb-6 border border-cyan-400/20">
|
|
<div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
|
<span className="text-sm font-medium text-cyan-300">
|
|
Vamos Conversar
|
|
</span>
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
|
Vamos Conversar
|
|
</h2>
|
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
|
Estou sempre interessado em novos desafios e oportunidades. Vamos
|
|
discutir como posso ajudar seu projeto?
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8 items-start mt-16">
|
|
{/* Contact Info */}
|
|
<ContactInfo onWhatsAppClick={handleWhatsAppClick} />
|
|
|
|
{/* Contact Options and Map */}
|
|
<div className="flex flex-col gap-8">
|
|
<ContactForm formType={formType} setFormType={setFormType} />{" "}
|
|
{/* Usar o novo componente ContactForm */}
|
|
{/* Mapa */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<h3 className="text-2xl font-semibold mb-4 text-blue-400">
|
|
Onde me encontrar
|
|
</h3>
|
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d41412.34944306462!2d-48.8485392!3d-26.0388466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dc04ecd7709991%3A0x91fa53b8c6ced1e0!2sGaruva%2C%20SC%2C%2089248-000!5e1!3m2!1spt-BR!2sbr!4v1760215413380!5m2!1spt-BR!2sbr"
|
|
width="100%"
|
|
height="450"
|
|
style={{ border: 0 }}
|
|
allowFullScreen={true}
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
></iframe>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|