52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
// app/components/Contact.tsx
|
|
import React, {useEffect, useState} from "react";
|
|
|
|
export default function Contact() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setIsVisible(true);
|
|
}, 350); // Delay to start the animation after Projects
|
|
}, []);
|
|
|
|
return (
|
|
<section id="contact" className={`p-10 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
|
|
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
|
|
Contact Me
|
|
</h2>
|
|
<div
|
|
className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto mt-6">
|
|
<form className="w-full space-y-4">
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
placeholder="Name"
|
|
className="w-full p-2 border rounded dark:text-white"
|
|
required
|
|
/>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="Email"
|
|
className="w-full p-2 border rounded dark:text-white"
|
|
required
|
|
/>
|
|
<textarea
|
|
name="message"
|
|
placeholder="Message"
|
|
className="w-full p-2 border rounded dark:text-white"
|
|
rows={5}
|
|
required
|
|
></textarea>
|
|
<button
|
|
type="submit"
|
|
className="w-full p-2 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded hover:from-blue-600 hover:to-purple-600 transition"
|
|
>
|
|
Send
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |