Skip to content

Contact UI #127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mehul-m-prajapati merged 1 commit into from
Jul 25, 2025
Merged

Contact UI #127

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
255 changes: 179 additions & 76 deletions src/pages/Contact/Contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,100 +1,203 @@
import { FormEvent, useRef, useState } from 'react';
import { useState } from 'react';
import { Github, Mail, Phone, Send, X, CheckCircle } from 'lucide-react';

function Contact() {
const [showPopup, setShowPopup] = useState(false);
const formRef = useRef<HTMLFormElement>(null);
const [isSubmitting, setIsSubmitting] = useState(false);

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const handleSubmit = async () => {
setIsSubmitting(true);

// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1500));

setIsSubmitting(false);
setShowPopup(true);

// Optional: Clear the form
if (formRef.current) {
formRef.current.reset();
}

// Optional: Auto-close popup after 4 seconds
// Auto-close popup after 5 seconds
setTimeout(() => {
setShowPopup(false);
}, 4000);
}, 5000);
};

const handleClosePopup = () => {
setShowPopup(false);
};

return (
<div className="container mx-auto p-6 max-w-4xl">
<h1 className="text-4xl font-semibold text-center mb-6">Contact Us</h1>

{/* Contact Methods */}
<section className="grid grid-cols-1 sm:grid-cols-2 gap-8 mb-8">
<div className="bg-gray-50 p-6 rounded-lg shadow-md">
<strong className="text-xl">📞 Phone</strong>
<p className="mt-2 text-gray-600">(123) 456-7890</p>
</div>
<div className="bg-gray-50 p-6 rounded-lg shadow-md">
<strong className="text-xl">✉️ Email</strong>
<p className="mt-2 text-gray-600">contact@company.com</p>
</div>
</section>

{/* Contact Form */}
<form className="space-y-6" onSubmit={handleSubmit} ref={formRef}>
<div>
<label className="block text-sm font-medium text-gray-700">Name</label>
<input
type="text"
className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Your Name"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">Email</label>
<input
type="email"
className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Your Email"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">Message</label>
<textarea
className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
rows={4}
placeholder="Your Message"
required
></textarea>
<div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden">
{/* Animated background elements */}
<div className="absolute inset-0">
<div className="absolute top-20 left-20 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
<div className="absolute top-40 right-20 w-72 h-72 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-1000"></div>
<div className="absolute -bottom-8 left-1/2 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-2000"></div>
</div>

<div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl h-full flex flex-col">
{/* Header Section */}
<div className="text-center mb-8 flex-shrink-0">
<div className="flex justify-center items-center gap-3 mb-4">
<div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
<img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
</div>
<h1 className="text-6xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
GitHub Tracker
</h1>
</div>
<p className="text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed">
Get in touch with us to discuss your project tracking needs or report any issues
</p>
</div>
<div>
<button
type="submit"
className="mt-4 px-6 py-3 w-full bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Send Message
</button>

<div className="grid lg:grid-cols-2 gap-8 items-start flex-1 min-h-0">
{/* Contact Info Cards */}
<div className="space-y-6 h-full flex flex-col">
<div className="text-center lg:text-left flex-shrink-0">
<h2 className="text-2xl font-bold text-white mb-3">Let's Connect</h2>
<p className="text-gray-400 text-base">
We're here to help you track and manage your GitHub repositories more effectively
</p>
</div>

<div className="space-y-4 flex-1 flex flex-col justify-center">
<div className="group bg-white/10 backdrop-blur-lg p-5 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
<div className="flex items-center gap-4">
<div className="p-2.5 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full group-hover:scale-110 transition-transform duration-300">
<Phone className="w-4 h-4 text-white" />
</div>
<div>
<h3 className="text-base font-semibold text-white">Phone Support</h3>
<p className="text-gray-300 text-sm">(123) 456-7890</p>
<p className="text-xs text-gray-400">Mon-Fri, 9AM-6PM EST</p>
</div>
</div>
</div>

<div className="group bg-white/10 backdrop-blur-lg p-5 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
<div className="flex items-center gap-4">
<div className="p-2.5 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full group-hover:scale-110 transition-transform duration-300">
<Mail className="w-4 h-4 text-white" />
</div>
<div>
<h3 className="text-base font-semibold text-white">Email Us</h3>
<p className="text-gray-300 text-sm">support@githubtracker.com</p>
<p className="text-xs text-gray-400">We'll respond within 24 hours</p>
</div>
</div>
</div>

<div className="group bg-white/10 backdrop-blur-lg p-5 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
<div className="flex items-center gap-4">
<div className="p-2.5 bg-gradient-to-r from-green-500 to-teal-500 rounded-full group-hover:scale-110 transition-transform duration-300">
<Github className="w-4 h-4 text-white" />
</div>
<div>
<h3 className="text-base font-semibold text-white">GitHub Issues</h3>
<p className="text-gray-300 text-sm">github.com/yourorg/githubtracker</p>
<p className="text-xs text-gray-400">Report bugs & feature requests</p>
</div>
</div>
</div>
</div>
</div>

{/* Contact Form */}
<div className="bg-white/10 backdrop-blur-lg p-6 rounded-3xl border border-white/20 shadow-2xl h-full flex flex-col">
<h2 className="text-xl font-bold text-white mb-4 text-center flex-shrink-0">Send us a Message</h2>

<div className="space-y-4 flex-1 flex flex-col">
<div className="space-y-3 flex-1">
<div>
<label className="block text-xs font-medium text-gray-300 mb-1">
Full Name
</label>
<input
type="text"
className="w-full p-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 text-sm"
placeholder="Enter your full name"
required
/>
</div>

<div>
<label className="block text-xs font-medium text-gray-300 mb-1">
Email Address
</label>
<input
type="email"
className="w-full p-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 text-sm"
placeholder="your.email@example.com"
required
/>
</div>

<div>
<label className="block text-xs font-medium text-gray-300 mb-1">
Subject
</label>
<select className="w-full p-3 bg-white/5 border border-white/20 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 text-sm">
<option value="" className="bg-slate-800">Select a topic</option>
<option value="bug" className="bg-slate-800">Bug Report</option>
<option value="feature" className="bg-slate-800">Feature Request</option>
<option value="support" className="bg-slate-800">Technical Support</option>
<option value="general" className="bg-slate-800">General Inquiry</option>
</select>
</div>

<div className="flex-1">
<label className="block text-xs font-medium text-gray-300 mb-1">
Message
</label>
<textarea
className="w-full h-full min-h-[120px] p-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 resize-none text-sm"
placeholder="Tell us about your GitHub tracking needs or describe your issue..."
required
></textarea>
</div>
</div>

<button
type="button"
onClick={handleSubmit}
disabled={isSubmitting}
className="w-full py-3 px-6 bg-gradient-to-r from-purple-500 to-blue-500 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-transparent transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none flex items-center justify-center gap-3 flex-shrink-0 text-sm"
>
{isSubmitting ? (
<>
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
Sending...
</>
) : (
<>
<Send className="w-5 h-5" />
Send Message
</>
)}
</button>
</div>
</div>
</div>
</form>
</div>

{/* Popup Modal */}
{/* Success Popup Modal */}
{showPopup && (
<div
className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 z-50"
role="dialog"
aria-modal="true"
>
<div className="bg-white p-8 rounded-lg shadow-lg w-full sm:w-1/3">
<h2 className="text-2xl font-semibold mb-4 text-center">Message Sent!</h2>
<p className="text-gray-600 text-center mb-6">
Your message has been successfully sent. We will get back to you soon.
</p>
<div className="flex justify-center">
<div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-50 p-4">
<div className="bg-white/10 backdrop-blur-lg p-8 rounded-3xl border border-white/20 w-full max-w-md transform animate-in zoom-in-95 duration-300">
<div className="text-center">
<div className="mx-auto w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mb-4">
<CheckCircle className="w-8 h-8 text-white" />
</div>

<h2 className="text-2xl font-bold text-white mb-2">Message Sent Successfully!</h2>
<p className="text-gray-300 mb-6 leading-relaxed">
Thank you for reaching out to GitHub Tracker. We've received your message and will get back to you within 24 hours.
</p>

<button
onClick={handleClosePopup}
className="px-6 py-3 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-red-500 to-pink-500 text-white font-semibold rounded-xl hover:from-red-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-red-500 transition-all duration-300 transform hover:scale-105"
>
<X className="w-4 h-4" />
Close
</button>
</div>
Expand All @@ -105,4 +208,4 @@ function Contact() {
);
}

export default Contact;
export default Contact;