Initial commit from v0
This commit is contained in:
v0
@@ -0,0 +1,211 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Mail, Phone, MapPin, Send, ArrowRight } from "lucide-react"
|
||||
|
||||
export function Contact() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
message: ""
|
||||
})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [isSubmitted, setIsSubmitted] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
// Simulate form submission
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
|
||||
setIsSubmitting(false)
|
||||
setIsSubmitted(true)
|
||||
setFormData({ name: "", email: "", message: "" })
|
||||
|
||||
// Reset success message after 5 seconds
|
||||
setTimeout(() => setIsSubmitted(false), 5000)
|
||||
}
|
||||
|
||||
const contactInfo = [
|
||||
{
|
||||
icon: Mail,
|
||||
label: "Email",
|
||||
value: "[email protected]",
|
||||
href: "mailto:[email protected]"
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
label: "Phone",
|
||||
value: "09 123 4567",
|
||||
href: "tel:+6491234567"
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Location",
|
||||
value: "Auckland, New Zealand",
|
||||
href: "#"
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<section id="contact" className="relative py-32 bg-card/30">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-20">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 mb-6 border border-border rounded-full bg-card/50">
|
||||
<span className="text-sm text-muted-foreground">Get Started</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6">
|
||||
<span className="text-balance">Ready to Talk Tech?</span>
|
||||
</h2>
|
||||
<p className="max-w-2xl mx-auto text-lg text-muted-foreground">
|
||||
Whether you need a new website, cloud hosting, or help with your
|
||||
I.T systems, we're here to help. Get in touch today.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20">
|
||||
{/* Contact Info */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-8">Contact Details</h3>
|
||||
|
||||
<div className="space-y-6 mb-12">
|
||||
{contactInfo.map((item) => {
|
||||
const Icon = item.icon
|
||||
return (
|
||||
<a
|
||||
key={item.label}
|
||||
href={item.href}
|
||||
className="flex items-center gap-4 p-4 bg-card border border-border rounded-xl transition-all duration-300 hover:border-primary/50 hover:bg-card/80 group"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center transition-all duration-300 group-hover:bg-primary group-hover:scale-110">
|
||||
<Icon className="w-5 h-5 text-primary transition-colors duration-300 group-hover:text-primary-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">{item.label}</div>
|
||||
<div className="font-medium">{item.value}</div>
|
||||
</div>
|
||||
<ArrowRight className="w-5 h-5 ml-auto opacity-0 -translate-x-2 transition-all duration-300 group-hover:opacity-100 group-hover:translate-x-0 text-primary" />
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Hours */}
|
||||
<div className="p-6 bg-card border border-border rounded-xl">
|
||||
<h4 className="font-bold mb-4">Business Hours</h4>
|
||||
<div className="space-y-2 text-muted-foreground">
|
||||
<div className="flex justify-between">
|
||||
<span>Monday - Friday</span>
|
||||
<span className="text-foreground">8:30am - 5:30pm</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Saturday</span>
|
||||
<span className="text-foreground">By Appointment</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Sunday</span>
|
||||
<span className="text-foreground">Closed</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t border-border">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="w-2 h-2 bg-primary rounded-full animate-pulse" />
|
||||
<span className="text-muted-foreground">24/7 Emergency Support Available</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div className="relative">
|
||||
<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">
|
||||
<h3 className="text-2xl font-bold mb-6">Send Us a Message</h3>
|
||||
|
||||
{isSubmitted ? (
|
||||
<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">
|
||||
<Send className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold mb-2">Message Sent!</h4>
|
||||
<p className="text-muted-foreground">
|
||||
Thanks for reaching out. We'll get back to you soon.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-medium">
|
||||
Your Name
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="John Smith"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
className="bg-background border-border focus:border-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-medium">
|
||||
Email Address
|
||||
</label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="[email protected]"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
required
|
||||
className="bg-background border-border focus:border-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="message" className="text-sm font-medium">
|
||||
How Can We Help?
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
placeholder="Tell us about your project or what you need help with..."
|
||||
value={formData.message}
|
||||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||||
required
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
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"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<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" />
|
||||
Sending...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
Send Message
|
||||
<Send className="w-5 h-5" />
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user