denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: enhance layout and styling of components with improved animations and responsiveness

Browse Source
This commit is contained in:
Denshooter
2025-02-04 00:38:40 +01:00
parent b1e8775346
commit e7735e8521
10 changed files with 366 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/components/Contact.tsx
View File

@@ -22,60 +22,61 @@ export default function Contact() {
setSuccess(true);
setForm({name: "", email: "", message: ""});
} catch (err) {
//use err to avoid unused variable warning
if (err instanceof Error) {
setError("Failed to send message. Please try again.");
}
}
};
return (
<section id="contact" className="p-10 ">
<section id="contact" className="p-10">
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
Contact Me
</h2>
<form onSubmit={handleSubmit} className="mt-6 max-w-md mx-auto space-y-4">
{success && (
<p className="text-green-500">
Your message has been sent successfully!
</p>
)}
{error && <p className="text-red-500">{error}</p>}
<input
type="text"
name="name"
placeholder="Name"
className="w-full p-2 border rounded dark:text-white"
required
value={form.name}
onChange={handleChange}
/>
<input
type="email"
name="email"
placeholder="Email"
className="w-full p-2 border rounded dark:text-white"
required
value={form.email}
onChange={handleChange}
/>
<textarea
name="message"
placeholder="Message"
className="w-full p-2 border rounded dark:text-white"
rows={5}
required
value={form.message}
onChange={handleChange}
></textarea>
<button
type="submit"
className="w-full p-2 text-white rounded hover:bg-blue-600 transition"
>
Send
</button>
</form>
<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 onSubmit={handleSubmit} className="w-full space-y-4">
{success && (
<p className="text-green-500">
Your message has been sent successfully!
</p>
)}
{error && <p className="text-red-500">{error}</p>}
<input
type="text"
name="name"
placeholder="Name"
className="w-full p-2 border rounded dark:text-white"
required
value={form.name}
onChange={handleChange}
/>
<input
type="email"
name="email"
placeholder="Email"
className="w-full p-2 border rounded dark:text-white"
required
value={form.email}
onChange={handleChange}
/>
<textarea
name="message"
placeholder="Message"
className="w-full p-2 border rounded dark:text-white"
rows={5}
required
value={form.message}
onChange={handleChange}
></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>
);
}
}