Skip to content

Commit 8cc6799

Browse files
author
Suhani1234-5
committed
Contact UI
1 parent 89deff8 commit 8cc6799

File tree

1 file changed

+179
-76
lines changed

1 file changed

+179
-76
lines changed

‎src/pages/Contact/Contact.tsx‎

Lines changed: 179 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,203 @@
1-
import { FormEvent, useRef, useState } from 'react';
1+
import { useState } from 'react';
2+
import { Github, Mail, Phone, Send, X, CheckCircle } from 'lucide-react';
23

34
function Contact() {
45
const [showPopup, setShowPopup] = useState(false);
5-
const formRef = useRef<HTMLFormElement>(null);
6+
const [isSubmitting, setIsSubmitting] = useState(false);
67

7-
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
8-
e.preventDefault();
8+
const handleSubmit = async () => {
9+
setIsSubmitting(true);
10+
11+
// Simulate API call
12+
await new Promise(resolve => setTimeout(resolve, 1500));
13+
14+
setIsSubmitting(false);
915
setShowPopup(true);
1016

11-
// Optional: Clear the form
12-
if (formRef.current) {
13-
formRef.current.reset();
14-
}
15-
16-
// Optional: Auto-close popup after 4 seconds
17+
// Auto-close popup after 5 seconds
1718
setTimeout(() => {
1819
setShowPopup(false);
19-
}, 4000);
20+
}, 5000);
2021
};
2122

2223
const handleClosePopup = () => {
2324
setShowPopup(false);
2425
};
2526

2627
return (
27-
<div className="container mx-auto p-6 max-w-4xl">
28-
<h1 className="text-4xl font-semibold text-center mb-6">Contact Us</h1>
29-
30-
{/* Contact Methods */}
31-
<section className="grid grid-cols-1 sm:grid-cols-2 gap-8 mb-8">
32-
<div className="bg-gray-50 p-6 rounded-lg shadow-md">
33-
<strong className="text-xl">📞 Phone</strong>
34-
<p className="mt-2 text-gray-600">(123) 456-7890</p>
35-
</div>
36-
<div className="bg-gray-50 p-6 rounded-lg shadow-md">
37-
<strong className="text-xl">✉️ Email</strong>
38-
<p className="mt-2 text-gray-600">contact@company.com</p>
39-
</div>
40-
</section>
41-
42-
{/* Contact Form */}
43-
<form className="space-y-6" onSubmit={handleSubmit} ref={formRef}>
44-
<div>
45-
<label className="block text-sm font-medium text-gray-700">Name</label>
46-
<input
47-
type="text"
48-
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"
49-
placeholder="Your Name"
50-
required
51-
/>
52-
</div>
53-
<div>
54-
<label className="block text-sm font-medium text-gray-700">Email</label>
55-
<input
56-
type="email"
57-
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"
58-
placeholder="Your Email"
59-
required
60-
/>
61-
</div>
62-
<div>
63-
<label className="block text-sm font-medium text-gray-700">Message</label>
64-
<textarea
65-
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"
66-
rows={4}
67-
placeholder="Your Message"
68-
required
69-
></textarea>
28+
<div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden">
29+
{/* Animated background elements */}
30+
<div className="absolute inset-0">
31+
<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>
32+
<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>
33+
<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>
34+
</div>
35+
36+
<div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl h-full flex flex-col">
37+
{/* Header Section */}
38+
<div className="text-center mb-8 flex-shrink-0">
39+
<div className="flex justify-center items-center gap-3 mb-4">
40+
<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">
41+
<img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
42+
</div>
43+
<h1 className="text-6xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
44+
GitHub Tracker
45+
</h1>
46+
</div>
47+
<p className="text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed">
48+
Get in touch with us to discuss your project tracking needs or report any issues
49+
</p>
7050
</div>
71-
<div>
72-
<button
73-
type="submit"
74-
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"
75-
>
76-
Send Message
77-
</button>
51+
52+
<div className="grid lg:grid-cols-2 gap-8 items-start flex-1 min-h-0">
53+
{/* Contact Info Cards */}
54+
<div className="space-y-6 h-full flex flex-col">
55+
<div className="text-center lg:text-left flex-shrink-0">
56+
<h2 className="text-2xl font-bold text-white mb-3">Let's Connect</h2>
57+
<p className="text-gray-400 text-base">
58+
We're here to help you track and manage your GitHub repositories more effectively
59+
</p>
60+
</div>
61+
62+
<div className="space-y-4 flex-1 flex flex-col justify-center">
63+
<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">
64+
<div className="flex items-center gap-4">
65+
<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">
66+
<Phone className="w-4 h-4 text-white" />
67+
</div>
68+
<div>
69+
<h3 className="text-base font-semibold text-white">Phone Support</h3>
70+
<p className="text-gray-300 text-sm">(123) 456-7890</p>
71+
<p className="text-xs text-gray-400">Mon-Fri, 9AM-6PM EST</p>
72+
</div>
73+
</div>
74+
</div>
75+
76+
<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">
77+
<div className="flex items-center gap-4">
78+
<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">
79+
<Mail className="w-4 h-4 text-white" />
80+
</div>
81+
<div>
82+
<h3 className="text-base font-semibold text-white">Email Us</h3>
83+
<p className="text-gray-300 text-sm">support@githubtracker.com</p>
84+
<p className="text-xs text-gray-400">We'll respond within 24 hours</p>
85+
</div>
86+
</div>
87+
</div>
88+
89+
<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">
90+
<div className="flex items-center gap-4">
91+
<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">
92+
<Github className="w-4 h-4 text-white" />
93+
</div>
94+
<div>
95+
<h3 className="text-base font-semibold text-white">GitHub Issues</h3>
96+
<p className="text-gray-300 text-sm">github.com/yourorg/githubtracker</p>
97+
<p className="text-xs text-gray-400">Report bugs & feature requests</p>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
104+
{/* Contact Form */}
105+
<div className="bg-white/10 backdrop-blur-lg p-6 rounded-3xl border border-white/20 shadow-2xl h-full flex flex-col">
106+
<h2 className="text-xl font-bold text-white mb-4 text-center flex-shrink-0">Send us a Message</h2>
107+
108+
<div className="space-y-4 flex-1 flex flex-col">
109+
<div className="space-y-3 flex-1">
110+
<div>
111+
<label className="block text-xs font-medium text-gray-300 mb-1">
112+
Full Name
113+
</label>
114+
<input
115+
type="text"
116+
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"
117+
placeholder="Enter your full name"
118+
required
119+
/>
120+
</div>
121+
122+
<div>
123+
<label className="block text-xs font-medium text-gray-300 mb-1">
124+
Email Address
125+
</label>
126+
<input
127+
type="email"
128+
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"
129+
placeholder="your.email@example.com"
130+
required
131+
/>
132+
</div>
133+
134+
<div>
135+
<label className="block text-xs font-medium text-gray-300 mb-1">
136+
Subject
137+
</label>
138+
<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">
139+
<option value="" className="bg-slate-800">Select a topic</option>
140+
<option value="bug" className="bg-slate-800">Bug Report</option>
141+
<option value="feature" className="bg-slate-800">Feature Request</option>
142+
<option value="support" className="bg-slate-800">Technical Support</option>
143+
<option value="general" className="bg-slate-800">General Inquiry</option>
144+
</select>
145+
</div>
146+
147+
<div className="flex-1">
148+
<label className="block text-xs font-medium text-gray-300 mb-1">
149+
Message
150+
</label>
151+
<textarea
152+
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"
153+
placeholder="Tell us about your GitHub tracking needs or describe your issue..."
154+
required
155+
></textarea>
156+
</div>
157+
</div>
158+
159+
<button
160+
type="button"
161+
onClick={handleSubmit}
162+
disabled={isSubmitting}
163+
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"
164+
>
165+
{isSubmitting ? (
166+
<>
167+
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
168+
Sending...
169+
</>
170+
) : (
171+
<>
172+
<Send className="w-5 h-5" />
173+
Send Message
174+
</>
175+
)}
176+
</button>
177+
</div>
178+
</div>
78179
</div>
79-
</form>
180+
</div>
80181

81-
{/* Popup Modal */}
182+
{/* Success Popup Modal */}
82183
{showPopup && (
83-
<div
84-
className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 z-50"
85-
role="dialog"
86-
aria-modal="true"
87-
>
88-
<div className="bg-white p-8 rounded-lg shadow-lg w-full sm:w-1/3">
89-
<h2 className="text-2xl font-semibold mb-4 text-center">Message Sent!</h2>
90-
<p className="text-gray-600 text-center mb-6">
91-
Your message has been successfully sent. We will get back to you soon.
92-
</p>
93-
<div className="flex justify-center">
184+
<div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-50 p-4">
185+
<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">
186+
<div className="text-center">
187+
<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">
188+
<CheckCircle className="w-8 h-8 text-white" />
189+
</div>
190+
191+
<h2 className="text-2xl font-bold text-white mb-2">Message Sent Successfully!</h2>
192+
<p className="text-gray-300 mb-6 leading-relaxed">
193+
Thank you for reaching out to GitHub Tracker. We've received your message and will get back to you within 24 hours.
194+
</p>
195+
94196
<button
95197
onClick={handleClosePopup}
96-
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"
198+
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"
97199
>
200+
<X className="w-4 h-4" />
98201
Close
99202
</button>
100203
</div>
@@ -105,4 +208,4 @@ function Contact() {
105208
);
106209
}
107210

108-
export default Contact;
211+
export default Contact;

0 commit comments

Comments
 (0)