mirror of
https://github.com/altstackHQ/altstack-data.git
synced 2026-04-18 03:53:14 +02:00
Initialize public data and docs repository
This commit is contained in:
AltStack Bot
127
docs/components/ContactForm.tsx
Normal file
127
docs/components/ContactForm.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Loader2, Send } from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export default function ContactForm() {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle')
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
|
||||
// Simulate network request
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
const formData = new FormData(e.currentTarget)
|
||||
const data = Object.fromEntries(formData.entries())
|
||||
|
||||
// Construct mailto link as fallback since we don't have a backend
|
||||
const subject = encodeURIComponent(`Contact Form: ${data.subject}`)
|
||||
const body = encodeURIComponent(`Name: ${data.name}\nEmail: ${data.email}\n\nMessage:\n${data.message}`)
|
||||
|
||||
window.location.href = `mailto:hello@thealtstack.com?subject=${subject}&body=${body}`
|
||||
|
||||
setIsLoading(false)
|
||||
setStatus('success')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-2xl mx-auto mt-12 font-sans selection:bg-red-500/30">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="relative z-10 w-full bg-black border border-white/10 p-8 md:p-12 rounded-3xl backdrop-blur-md shadow-2xl"
|
||||
>
|
||||
<div className="text-center mb-10">
|
||||
<h2 className="text-3xl font-black text-white mb-4">
|
||||
Get in <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-500">Touch</span>
|
||||
</h2>
|
||||
<p className="text-slate-400 font-light">
|
||||
Have a question regarding self-hosting or the AltStack? We're here to help.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-xs font-mono uppercase text-slate-500 tracking-wider">Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-red-500/50 focus:ring-1 focus:ring-red-500/50 transition-all"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-xs font-mono uppercase text-slate-500 tracking-wider">Email *</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-red-500/50 focus:ring-1 focus:ring-red-500/50 transition-all"
|
||||
placeholder="jane@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="subject" className="text-xs font-mono uppercase text-slate-500 tracking-wider">Subject</label>
|
||||
<select
|
||||
id="subject"
|
||||
name="subject"
|
||||
className="w-full bg-[#111] border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-red-500/50 focus:ring-1 focus:ring-red-500/50 transition-all appearance-none cursor-pointer"
|
||||
style={{ colorScheme: 'dark' }}
|
||||
>
|
||||
<option value="General Inquiry">General Inquiry</option>
|
||||
<option value="Support">Support Request</option>
|
||||
<option value="Feedback">Feedback</option>
|
||||
<option value="Partnership">Partnership</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="message" className="text-xs font-mono uppercase text-slate-500 tracking-wider">Message *</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
rows={5}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-red-500/50 focus:ring-1 focus:ring-red-500/50 transition-all resize-none"
|
||||
placeholder="How can we help you?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full py-4 bg-white text-black font-bold rounded-xl hover:bg-slate-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<span>Sending...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>Send Message</span>
|
||||
<Send className="w-4 h-4" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{status === 'success' && (
|
||||
<div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20 text-green-400 text-sm text-center font-medium animate-in fade-in slide-in-from-bottom-2">
|
||||
🚀 Message prepared! Opening your email client...
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user