refactor: streamline contact form input fields and remove unnecessary wrappers
Co-authored-by: ASOwnerYT <[email protected]>
This commit is contained in:
v0
+69
-69
@@ -19,7 +19,7 @@ export function Contact() {
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
setIsSubmitting(true)
|
setIsSubmitting(true)
|
||||||
setError("")
|
setError("")
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/api/send-email', {
|
const response = await fetch('/api/send-email', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -36,7 +36,7 @@ export function Contact() {
|
|||||||
|
|
||||||
setIsSubmitted(true)
|
setIsSubmitted(true)
|
||||||
setFormData({ name: "", email: "", message: "" })
|
setFormData({ name: "", email: "", message: "" })
|
||||||
|
|
||||||
// Reset success message after 5 seconds
|
// Reset success message after 5 seconds
|
||||||
setTimeout(() => setIsSubmitted(false), 5000)
|
setTimeout(() => setIsSubmitted(false), 5000)
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -81,7 +81,7 @@ export function Contact() {
|
|||||||
<span className="text-balance">Ready to Talk Tech?</span>
|
<span className="text-balance">Ready to Talk Tech?</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="max-w-2xl mx-auto text-lg text-muted-foreground">
|
<p className="max-w-2xl mx-auto text-lg text-muted-foreground">
|
||||||
Whether you need a new website, cloud hosting, or help with your
|
Whether you need a new website, cloud hosting, or help with your
|
||||||
I.T systems, we're here to help. Get in touch today.
|
I.T systems, we're here to help. Get in touch today.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -90,7 +90,7 @@ export function Contact() {
|
|||||||
{/* Contact Info */}
|
{/* Contact Info */}
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-2xl font-bold mb-8">Contact Details</h3>
|
<h3 className="text-2xl font-bold mb-8">Contact Details</h3>
|
||||||
|
|
||||||
<div className="space-y-6 mb-12">
|
<div className="space-y-6 mb-12">
|
||||||
{contactInfo.map((item) => {
|
{contactInfo.map((item) => {
|
||||||
const Icon = item.icon
|
const Icon = item.icon
|
||||||
@@ -136,7 +136,7 @@ export function Contact() {
|
|||||||
<div className="absolute -inset-4 bg-primary/5 rounded-3xl blur-xl" />
|
<div className="absolute -inset-4 bg-primary/5 rounded-3xl blur-xl" />
|
||||||
<div className="relative bg-card border border-border rounded-2xl p-8 lg:p-10">
|
<div className="relative bg-card border border-border rounded-2xl p-8 lg:p-10">
|
||||||
<h3 className="text-2xl font-bold mb-6">Send Us a Message</h3>
|
<h3 className="text-2xl font-bold mb-6">Send Us a Message</h3>
|
||||||
|
|
||||||
{isSubmitted ? (
|
{isSubmitted ? (
|
||||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||||
<div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6 animate-bounce">
|
<div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6 animate-bounce">
|
||||||
@@ -151,74 +151,74 @@ export function Contact() {
|
|||||||
<>
|
<>
|
||||||
{error && (
|
{error && (
|
||||||
<div className="mb-6 p-4 bg-destructive/10 border border-destructive/50 rounded-lg flex items-center gap-3">
|
<div className="mb-6 p-4 bg-destructive/10 border border-destructive/50 rounded-lg flex items-center gap-3">
|
||||||
<AlertCircle className="w-5 h-5 text-destructive flex-shrink-0" />
|
<AlertCircle className="w-5 h-5 text-destructive shrink-0" />
|
||||||
<p className="text-sm text-destructive">{error}</p>
|
<p className="text-sm text-destructive">{error}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label htmlFor="name" className="text-sm font-medium">
|
<label htmlFor="name" className="text-sm font-medium">
|
||||||
Your Name
|
Your Name
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
id="name"
|
id="name"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="John Smith"
|
placeholder="John Smith"
|
||||||
value={formData.name}
|
value={formData.name}
|
||||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
required
|
required
|
||||||
className="bg-background border-border focus:border-primary transition-colors"
|
className="bg-background border-border focus:border-primary transition-colors"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label htmlFor="email" className="text-sm font-medium">
|
<label htmlFor="email" className="text-sm font-medium">
|
||||||
Email Address
|
Email Address
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
id="email"
|
id="email"
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="[email protected]"
|
placeholder="[email protected]"
|
||||||
value={formData.email}
|
value={formData.email}
|
||||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||||
required
|
required
|
||||||
className="bg-background border-border focus:border-primary transition-colors"
|
className="bg-background border-border focus:border-primary transition-colors"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label htmlFor="message" className="text-sm font-medium">
|
<label htmlFor="message" className="text-sm font-medium">
|
||||||
How Can We Help?
|
How Can We Help?
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
id="message"
|
id="message"
|
||||||
placeholder="Tell us about your project or what you need help with..."
|
placeholder="Tell us about your project or what you need help with..."
|
||||||
value={formData.message}
|
value={formData.message}
|
||||||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||||||
required
|
required
|
||||||
rows={5}
|
rows={5}
|
||||||
className="w-full px-4 py-3 bg-background border border-border rounded-lg resize-none focus:outline-none focus:border-primary transition-colors"
|
className="w-full px-4 py-3 bg-background border border-border rounded-lg resize-none focus:outline-none focus:border-primary transition-colors"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
className="w-full bg-primary text-primary-foreground hover:bg-primary/90 py-6 text-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-lg hover:shadow-primary/25 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
|
className="w-full bg-primary text-primary-foreground hover:bg-primary/90 py-6 text-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-lg hover:shadow-primary/25 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
|
||||||
>
|
>
|
||||||
{isSubmitting ? (
|
{isSubmitting ? (
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex items-center gap-2">
|
||||||
<span className="w-5 h-5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
|
<span className="w-5 h-5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
|
||||||
Sending...
|
Sending...
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex items-center gap-2">
|
||||||
Send Message
|
Send Message
|
||||||
<Send className="w-5 h-5" />
|
<Send className="w-5 h-5" />
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user