style: build layout and form
This commit is contained in:
Chneemann
parent
3b3521ca91
commit
8ac0e8eb08
1 changed files with 124 additions and 0 deletions
|
|
@ -1,4 +1,17 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Contact() {
|
||||
// Placeholder
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
// Mailer / Formspree / API Call integration goes here
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
id="contactme"
|
||||
|
|
@ -13,6 +26,117 @@ export default function Contact() {
|
|||
Contact me<span className="text-blue-500">.</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-12 gap-8 items-start">
|
||||
{/* Left column */}
|
||||
<div className="md:col-span-5 flex flex-col justify-between p-5 rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md shadow-lg shadow-black/40 border-t-slate-600/50 relative overflow-hidden space-y-6">
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/15 rounded-full blur-xl pointer-events-none" />
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span> Got
|
||||
a project in mind?
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-300 leading-relaxed">
|
||||
Feel free to reach out using this form. I am always open to
|
||||
discussing new projects, creative ideas, or opportunities to
|
||||
contribute to your team.
|
||||
</p>
|
||||
|
||||
<div className="p-3.5 rounded-xl bg-slate-950/80 border border-slate-800/80 font-mono text-[11px] space-y-1.5 shadow-inner">
|
||||
<div className="text-slate-500">// Terminal Direct Contact</div>
|
||||
<div className="text-slate-300 flex items-center gap-1">
|
||||
<span className="text-blue-400">chneemann@portfolio</span>:
|
||||
<span className="text-emerald-400">~</span>$ mail --send
|
||||
</div>
|
||||
<div className="text-slate-400 pl-2.5 border-l-2 border-blue-500/40 text-[10px] py-0.5">
|
||||
Status:{" "}
|
||||
<span className="text-emerald-400">
|
||||
Ready to receive messages
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t border-slate-800/80 font-mono text-xs">
|
||||
<span className="text-slate-500 block text-[10px] mb-1">
|
||||
// Prefer email?
|
||||
</span>
|
||||
<span className="text-slate-300 hover:text-blue-400 transition-colors flex items-center gap-1.5 text-xs cursor-pointer">
|
||||
<span className="text-blue-500">▸</span> dev@andre-kempf.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right column */}
|
||||
<div className="md:col-span-7">
|
||||
<div
|
||||
className="relative p-4 md:p-6 rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md
|
||||
shadow-lg shadow-black/40 border-t-slate-600/50 overflow-hidden"
|
||||
>
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
|
||||
|
||||
{submitted ? (
|
||||
<div className="py-12 text-center space-y-3">
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-500/10 text-blue-400 font-mono text-4xl mb-2 border border-blue-500/20">
|
||||
✓
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white">Thank you!</h3>
|
||||
<p className="text-sm max-w-sm mx-auto">
|
||||
Your message has been sent successfully. I'll get back to you
|
||||
as soon as possible!
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-bold mb-1.5">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="John Doe"
|
||||
className="w-full px-4 py-2.5 rounded-xl bg-slate-950/60 border border-slate-800 text-white placeholder:text-slate-600 focus:outline-none focus:border-blue-500/80 focus:ring-1 focus:ring-blue-500/80 transition-colors text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold mb-1.5">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
placeholder="john@example.com"
|
||||
className="w-full px-4 py-2.5 rounded-xl bg-slate-950/60 border border-slate-800 text-white placeholder:text-slate-600 focus:outline-none focus:border-blue-500/80 focus:ring-1 focus:ring-blue-500/80 transition-colors text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold mb-1.5">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
required
|
||||
placeholder="Hi André, I would like to discuss a potential project with you..."
|
||||
className="w-full px-4 py-2.5 rounded-xl bg-slate-950/60 border border-slate-800 text-white placeholder:text-slate-600 focus:outline-none focus:border-blue-500/80 focus:ring-1 focus:ring-blue-500/80 transition-colors text-sm resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-6 py-3 bg-slate-900 border border-slate-800 hover:border-slate-700 hover:bg-slate-850 rounded-lg transition-all hover:-translate-y-0.5 duration-200 cursor-pointer"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue