From d382fa8890b8d3ff0233a431fd174753efd1b4ca Mon Sep 17 00:00:00 2001 From: yuvraj-k-singh Date: Sat, 23 May 2026 07:24:20 +0530 Subject: [PATCH 1/2] Improve Contact Us Page UI/UX and Theme Consistency --- src/pages/Contact/Contact.tsx | 476 +++++++++++++++------------------- 1 file changed, 208 insertions(+), 268 deletions(-) diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx index a0bfccbd..ba1705f2 100644 --- a/src/pages/Contact/Contact.tsx +++ b/src/pages/Contact/Contact.tsx @@ -6,6 +6,7 @@ import { Send, X, CheckCircle, + ChevronDown, } from "lucide-react"; import { ThemeContext } from "../../context/ThemeContext"; import type { ThemeContextType } from "../../context/ThemeContext"; @@ -13,334 +14,273 @@ import type { ThemeContextType } from "../../context/ThemeContext"; function Contact() { const [showPopup, setShowPopup] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); + const [focusedField, setFocusedField] = useState(null); + + // Controlled form state tracking + const [formData, setFormData] = useState({ + name: "", + email: "", + subject: "", + message: "", + }); + const themeContext = useContext(ThemeContext) as ThemeContextType; const { mode } = themeContext; + const isDark = mode === "dark"; + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; - const handleSubmit = async () => { + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); setIsSubmitting(true); - // Simulate API call + // Simulate API pipeline delay (formData can now be passed safely to your API) await new Promise((resolve) => setTimeout(resolve, 1500)); setIsSubmitting(false); setShowPopup(true); - // Auto-close popup after 5 seconds - setTimeout(() => { + // Reset Form fields safely + setFormData({ name: "", email: "", subject: "", message: "" }); + + // Auto-dismiss success notification + const timer = setTimeout(() => { setShowPopup(false); }, 5000); - }; - const handleClosePopup = () => { - setShowPopup(false); + return () => clearTimeout(timer); }; return (
- {/* Animated background elements */} -
-
-
-
-
+ {/* Neo-Grid Background Overlay */} +
+ + {/* Smooth Dynamic Radial Glow Aura */} +
-
- {/* Header Section */} -
-
-
- Logo -
-

- GitHub Tracker -

-
-

- Get in touch with us to discuss your project tracking needs or - report any issues + {/* Main Structural Container */} +

+ + {/* Exterior Main Page Context Heading Block */} +
+

+ Contact Hub +

+

+ Get in touch with us +

+

+ Have an open-source sync idea, tracking request, or ran into a system error? We are listening.

-
- {/* Contact Info Cards */} -
-
-

- Let's Connect -

-

- We're here to help you track and manage your GitHub - repositories more effectively -

+ {/* Central Core Glassmorphism Canvas Card */} +
+ + {/* Left Interactive Meta Sidebar */} +
+
+
+
+ Logo +
+

+ GitHub Tracker +

+
+ +
+

Connect with Core Devs

+

+ Have complex pipeline issues or open source integration tracking ideas? Let's build a unified roadmap together. +

+
-
- {[...Array(3)].map((_, index) => { - const contactTypes = [ - { - title: "Phone Support", - iconBg: "from-blue-500 to-cyan-500", - detail: "(123) 456-7890", - sub: "Mon-Fri, 9AM-6PM EST", - Icon: Phone, - }, - { - title: "Email Us", - iconBg: "from-purple-500 to-pink-500", - detail: "support@githubtracker.com", - sub: "We'll respond within 24 hours", - Icon: Mail, - }, - { - title: "GitHub Issues", - iconBg: "from-green-500 to-teal-500", - detail: "github.com/yourorg/githubtracker", - sub: "Report bugs & feature requests", - Icon: Github, - }, - ]; - const { title, iconBg, detail, sub, Icon } = - contactTypes[index]; - return ( -
-
-
- -
-
-

- {title} -

-

- {detail} -

-

- {sub} -

-
-
+ {/* Minimalist Actionable Communication Badges */} +
+ {[ + { label: "Direct Support", detail: "support@githubtracker.com", Icon: Mail }, + { label: "Community Hotline", detail: "(123) 456-7890", Icon: Phone }, + { label: "Open-Source Hub", detail: "github.com/yourorg/track", Icon: Github }, + ].map(({ label, detail, Icon }) => ( +
+
+
- ); - })} +
+

{label}

+

{detail}

+
+
+ ))}
- {/* Contact Form */} -
-

- Send us a Message -

- -
-
- {/* Full Name */} -
- + {/* Right Form Console */} +
+ + {/* Unified Form Inputs Grid Wrapper */} +
+ +
+ {/* Full Name field */} +
+ setFocusedField("name")} + onBlur={() => setFocusedField(null)} + placeholder="John Doe" + className={`w-full h-11 px-4 rounded-xl text-sm border outline-none transition-all duration-200 ${ + isDark + ? "bg-[#0c101d] border-slate-800 text-white placeholder-slate-500 focus:border-purple-500 focus:ring-4 focus:ring-purple-500/10" + : "bg-slate-50 border-slate-200 text-slate-800 placeholder-slate-400 focus:border-purple-500 focus:ring-4 focus:ring-purple-500/5" }`} />
- {/* Email */} -
- + {/* Email field */} +
+ setFocusedField("email")} + onBlur={() => setFocusedField(null)} + placeholder="you@example.com" + className={`w-full h-11 px-4 rounded-xl text-sm border outline-none transition-all duration-200 ${ + isDark + ? "bg-[#0c101d] border-slate-800 text-white placeholder-slate-500 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10" + : "bg-slate-50 border-slate-200 text-slate-800 placeholder-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/5" }`} />
+
- {/* Subject */} -
- + {/* Subject Dropdown Field */} +
+ +
+
+
- {/* Message */} -
- - - - -
+ {/* Message Content Area */} +
+ +