diff --git a/src/app/contact/ContactClient.tsx b/src/app/contact/ContactClient.tsx new file mode 100644 index 000000000..63526c1a0 --- /dev/null +++ b/src/app/contact/ContactClient.tsx @@ -0,0 +1,465 @@ +"use client"; + +import Link from "next/link"; +import { useState } from "react"; +import { + Mail, + Github, + MessageSquare, + Send, + CheckCircle2, + AlertCircle, + Clock, + Globe, + Sparkles, + ArrowLeft, + Loader2, +} from "lucide-react"; + +interface FormData { + name: string; + email: string; + subject: string; + github: string; + socials: string; + message: string; +} + +export default function ContactClient() { + const [formData, setFormData] = useState({ + name: "", + email: "", + subject: "feedback", + github: "", + socials: "", + message: "", + }); + + const [errors, setErrors] = useState>({}); + const [success, setSuccess] = useState(false); + const [loading, setLoading] = useState(false); + + const validate = () => { + const newErrors: Record = {}; + + if (!formData.name.trim()) { + newErrors.name = "Name is required."; + } + + if (!formData.email.trim()) { + newErrors.email = "Email is required."; + } else if ( + !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(formData.email.trim()) + ) { + newErrors.email = "Please enter a valid email address."; + } + + if (!formData.message.trim()) { + newErrors.message = "Message is required."; + } else if (formData.message.trim().length < 10) { + newErrors.message = "Message must be at least 10 characters long."; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleChange = ( + e: React.ChangeEvent + ) => { + const { name, value } = e.target; + + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + + if (errors[name]) { + setErrors((prev) => ({ ...prev, [name]: "" })); + } + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + setSuccess(false); + + if (!validate()) return; + + try { + setLoading(true); + + // Simulate sending inquiry / client dispatch + await new Promise((r) => setTimeout(r, 1000)); + + setSuccess(true); + setFormData({ + name: "", + email: "", + subject: "feedback", + github: "", + socials: "", + message: "", + }); + } catch { + setErrors({ + submit: "Something went wrong while sending your message. Please try again.", + }); + } finally { + setLoading(false); + } + }; + + const contactCards = [ + { + icon: Github, + title: "GitHub Repository", + description: "Contribute code, open pull requests, and report issues directly.", + linkText: "reframe-oss/reframe", + href: "https://github.com/reframe-oss/reframe", + badge: "Open Source", + }, + { + icon: MessageSquare, + title: "GitHub Discussions", + description: "Join our community, request new features, or share suggestions.", + linkText: "Join community discussions", + href: "https://github.com/reframe-oss/reframe/discussions", + badge: "Community", + }, + { + icon: Mail, + title: "Direct Inquiries", + description: "Reach maintainers regarding security, collaborations, or general questions.", + linkText: "support@reframe-editor.com", + href: "mailto:support@reframe-editor.com", + badge: "Direct Contact", + }, + ]; + + return ( +
+ {/* Hero Section */} +
+
+ +
+
+ + + Back to Reframe + +
+ +
+
+ + We'd love to hear from you +
+

+ Get in Touch with Reframe +

+

+ Have a question, feedback, or need help with video processing? Reach out using the form below or connect directly through our open-source channels. +

+
+
+
+ + {/* Main Content: Info Cards & Form */} +
+
+ {/* Left Column: Contact Cards & Info */} +
+
+

+ Connect Directly +

+

+ Pick the channel that works best for your inquiry or contribution. +

+
+ +
+ {contactCards.map((card, idx) => { + const IconComponent = card.icon; + return ( + +
+
+ +
+ + {card.badge} + +
+ +

+ {card.title} +

+

+ {card.description} +

+ +
+ {card.linkText} + → +
+ + ); + })} +
+ + {/* Availability & Location Callout */} +
+
+ + Global & Client-Side +
+

+ Reframe is a fully client-side application built by an international open-source community. Your videos never leave your browser, ensuring complete privacy. +

+
+ + Response time: Usually within 24–48 hours +
+
+
+ + {/* Right Column: Contact Form */} +
+
+
+

+ Send Us a Message +

+

+ Fill in your details and we'll get back to you as soon as possible. +

+
+ + {success && ( +
+ +
+

Message Sent Successfully!

+

+ Thank you for reaching out. We have received your submission and will get back to you shortly. +

+
+
+ )} + + {errors.submit && ( +
+ +
+

Error Sending Message

+

{errors.submit}

+
+
+ )} + +
+
+ {/* Name */} +
+ + + {errors.name && ( +

+ + {errors.name} +

+ )} +
+ + {/* Email */} +
+ + + {errors.email && ( +

+ + {errors.email} +

+ )} +
+
+ +
+ {/* Subject / Topic */} +
+ + +
+ + {/* GitHub Username (Optional) */} +
+ + +
+
+ + {/* Socials / Links (Optional) */} +
+ + +
+ + {/* Message */} +
+ +