Skip to content

Commit cda5a3a

Browse files
mehul-m-prajapatimehul-m-prajapati
authored
Merge pull request #196 from Sindhura-Karumuri/contact-responsive
Added responsive Contact page with improved layout
2 parents 00a00d6 + b304861 commit cda5a3a

File tree

1 file changed

+72
-45
lines changed

1 file changed

+72
-45
lines changed

‎src/pages/Contact/Contact.tsx‎

Lines changed: 72 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { useState, useContext } from "react";
2-
import { Github, Mail, Phone, Send, X, CheckCircle } from "lucide-react";
2+
import {
3+
Github,
4+
Mail,
5+
Phone,
6+
Send,
7+
X,
8+
CheckCircle,
9+
} from "lucide-react";
310
import { ThemeContext } from "../../context/ThemeContext";
411
import type { ThemeContextType } from "../../context/ThemeContext";
512

@@ -30,7 +37,7 @@ function Contact() {
3037

3138
return (
3239
<div
33-
className={`h-screen w-screen relative overflow-hidden ${
40+
className={`min-h-screen w-screen relative overflow-y-auto ${
3441
mode === "dark"
3542
? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
3643
: "bg-gradient-to-br from-indigo-100 via-purple-100 to-indigo-100"
@@ -43,57 +50,60 @@ function Contact() {
4350
<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>
4451
</div>
4552

46-
<div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl h-full flex flex-col">
53+
<div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl flex flex-col pb-20">
4754
{/* Header Section */}
4855
<div className="text-center mb-8 flex-shrink-0">
49-
<div className="flex justify-center items-center gap-3 mb-4">
56+
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-3 mb-4">
5057
<div
51-
className={`inline-flex items-center justify-center w-20 h-20 mb-6 shadow-2xl transition-transform transform hover:scale-105 overflow-hidden rounded-3xl ${
58+
className={`inline-flex items-center justify-center w-14 h-14 sm:w-20 sm:h-20 shadow-2xl transition-transform transform hover:scale-105 overflow-hidden rounded-2xl sm:rounded-3xl ${
5259
mode === "dark" ? "bg-white" : "bg-purple-200"
5360
}`}
5461
>
5562
<img
5663
src="/crl-icon.png"
5764
alt="Logo"
58-
className="w-14 h-14 object-contain"
65+
className="w-10 h-10 sm:w-14 sm:h-14 object-contain"
5966
/>
6067
</div>
61-
<h1 className="text-6xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
68+
<h1
69+
className="text-2xl sm:text-4xl md:text-5xl lg:text-6xl font-bold
70+
bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent"
71+
>
6272
GitHub Tracker
6373
</h1>
6474
</div>
6575
<p
66-
className={`text-lg max-w-2xl mx-auto leading-relaxed ${
76+
className={`text-sm sm:text-lg max-w-xl md:max-w-2xl mx-auto leading-relaxed ${
6777
mode === "dark" ? "text-gray-300" : "text-gray-700"
6878
}`}
6979
>
70-
Get in touch with us to discuss your project tracking needs or report
71-
any issues
80+
Get in touch with us to discuss your project tracking needs or
81+
report any issues
7282
</p>
7383
</div>
7484

75-
<div className="grid lg:grid-cols-2 gap-8 items-start flex-1 min-h-0">
85+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-8 items-start flex-1 min-h-0">
7686
{/* Contact Info Cards */}
77-
<div className="space-y-6 h-full flex flex-col">
87+
<div className="space-y-4 sm:space-y-6 h-full flex flex-col">
7888
<div className="text-center lg:text-left flex-shrink-0">
7989
<h2
80-
className={`text-2xl font-bold mb-3 ${
90+
className={`text-lg sm:text-2xl font-bold mb-2 sm:mb-3 ${
8191
mode === "dark" ? "text-white" : "text-gray-800"
8292
}`}
8393
>
8494
Let's Connect
8595
</h2>
8696
<p
87-
className={`text-base ${
97+
className={`text-xs sm:text-base ${
8898
mode === "dark" ? "text-gray-400" : "text-gray-600"
8999
}`}
90100
>
91-
We're here to help you track and manage your GitHub repositories
92-
more effectively
101+
We're here to help you track and manage your GitHub
102+
repositories more effectively
93103
</p>
94104
</div>
95105

96-
<div className="space-y-4 flex-1 flex flex-col justify-center">
106+
<div className="space-y-3 sm:space-y-4 flex-1 flex flex-col justify-center">
97107
{[...Array(3)].map((_, index) => {
98108
const contactTypes = [
99109
{
@@ -118,44 +128,53 @@ function Contact() {
118128
Icon: Github,
119129
},
120130
];
121-
const { title, iconBg, detail, sub, Icon } = contactTypes[index];
131+
const { title, iconBg, detail, sub, Icon } =
132+
contactTypes[index];
122133
return (
123134
<div
124135
key={title}
125-
className={`group p-5 rounded-2xl backdrop-blur-lg transition-all duration-300 hover:scale-105 ${
136+
className={`group p-3 sm:p-5 rounded-xl sm:rounded-2xl backdrop-blur-lg transition-all duration-300 hover:scale-105 ${
126137
mode === "dark"
127138
? "bg-white/10 border border-white/20 hover:bg-white/20"
128139
: "bg-white border border-gray-300 hover:bg-gray-100"
129140
}`}
130141
>
131-
<div className="flex items-center gap-4">
142+
<div className="flex items-center gap-3 sm:gap-4">
132143
<div
133-
className={`p-2.5 rounded-full transition-transform duration-300 group-hover:scale-110 bg-gradient-to-r ${iconBg}`}
144+
className={`p-2 sm:p-2.5 rounded-full transition-transform duration-300 group-hover:scale-110 bg-gradient-to-r ${iconBg}`}
134145
>
135146
<Icon
136-
className={`w-4 h-4 ${
137-
mode === "dark" ? "text-white" : "text-gray-800"
147+
className={`w-4 h-4 sm:w-5 sm:h-5 ${
148+
mode === "dark"
149+
? "text-white"
150+
: "text-gray-800"
138151
}`}
139152
/>
140153
</div>
141154
<div>
142155
<h3
143-
className={`text-base font-semibold ${
144-
mode === "dark" ? "text-white" : "text-gray-800"
156+
className={`text-sm sm:text-base font-semibold ${
157+
mode === "dark"
158+
? "text-white"
159+
: "text-gray-800"
145160
}`}
146161
>
147162
{title}
148163
</h3>
149164
<p
150-
className={`text-sm ${
151-
mode === "dark" ? "text-gray-300" : "text-gray-600"
165+
className={`text-xs sm:text-sm ${
166+
mode === "dark"
167+
? "text-gray-300"
168+
: "text-gray-600"
152169
}`}
153170
>
154171
{detail}
155172
</p>
156173
<p
157174
className={`text-xs ${
158-
mode === "dark" ? "text-gray-400" : "text-gray-500"
175+
mode === "dark"
176+
? "text-gray-400"
177+
: "text-gray-500"
159178
}`}
160179
>
161180
{sub}
@@ -170,27 +189,29 @@ function Contact() {
170189

171190
{/* Contact Form */}
172191
<div
173-
className={`p-6 rounded-3xl shadow-2xl h-full flex flex-col backdrop-blur-lg ${
192+
className={`p-4 sm:p-6 rounded-xl sm:rounded-3xl shadow-2xl h-full flex flex-col backdrop-blur-lg ${
174193
mode === "dark"
175194
? "bg-white/10 border border-white/20"
176195
: "bg-white border border-gray-300"
177196
}`}
178197
>
179198
<h2
180-
className={`text-xl font-bold mb-4 text-center flex-shrink-0 ${
199+
className={`text-base sm:text-xl font-bold mb-4 text-center flex-shrink-0 ${
181200
mode === "dark" ? "text-white" : "text-gray-800"
182201
}`}
183202
>
184203
Send us a Message
185204
</h2>
186205

187-
<div className="space-y-4 flex-1 flex flex-col">
206+
<div className="space-y-3 sm:space-y-4 flex-1 flex flex-col">
188207
<div className="space-y-3 flex-1">
189208
{/* Full Name */}
190209
<div>
191210
<label
192211
className={`block text-xs font-medium mb-1 ${
193-
mode === "dark" ? "text-gray-300" : "text-gray-700"
212+
mode === "dark"
213+
? "text-gray-300"
214+
: "text-gray-700"
194215
}`}
195216
>
196217
Full Name
@@ -199,7 +220,7 @@ function Contact() {
199220
type="text"
200221
placeholder="Enter your full name"
201222
required
202-
className={`w-full p-3 rounded-xl text-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
223+
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
203224
mode === "dark"
204225
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
205226
: "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
@@ -211,7 +232,9 @@ function Contact() {
211232
<div>
212233
<label
213234
className={`block text-xs font-medium mb-1 ${
214-
mode === "dark" ? "text-gray-300" : "text-gray-700"
235+
mode === "dark"
236+
? "text-gray-300"
237+
: "text-gray-700"
215238
}`}
216239
>
217240
Email Address
@@ -220,7 +243,7 @@ function Contact() {
220243
type="email"
221244
placeholder="your.email@example.com"
222245
required
223-
className={`w-full p-3 rounded-xl text-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
246+
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
224247
mode === "dark"
225248
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
226249
: "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
@@ -232,13 +255,15 @@ function Contact() {
232255
<div>
233256
<label
234257
className={`block text-xs font-medium mb-1 ${
235-
mode === "dark" ? "text-gray-300" : "text-gray-700"
258+
mode === "dark"
259+
? "text-gray-300"
260+
: "text-gray-700"
236261
}`}
237262
>
238263
Subject
239264
</label>
240265
<select
241-
className={`w-full p-3 rounded-xl text-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
266+
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
242267
mode === "dark"
243268
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
244269
: "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
@@ -260,16 +285,18 @@ function Contact() {
260285
<div className="relative">
261286
<label
262287
className={`block text-xs font-medium mb-1 ${
263-
mode === "dark" ? "text-gray-300" : "text-gray-700"
288+
mode === "dark"
289+
? "text-gray-300"
290+
: "text-gray-700"
264291
}`}
265292
>
266293
Message
267294
</label>
268295
<textarea
269296
placeholder="Type your message here..."
270297
required
271-
rows={5}
272-
className={`w-full p-3 rounded-xl text-sm resize-none transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
298+
rows={4}
299+
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base resize-none transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
273300
mode === "dark"
274301
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
275302
: "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
@@ -279,7 +306,7 @@ function Contact() {
279306
<button
280307
onClick={handleSubmit}
281308
disabled={isSubmitting}
282-
className={`absolute bottom-3 right-3 flex items-center gap-2 rounded-full px-4 py-2 text-xs font-semibold transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
309+
className={`absolute bottom-2 sm:bottom-3 right-2 sm:right-3 flex items-center gap-1.5 sm:gap-2 rounded-full px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-semibold transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
283310
isSubmitting
284311
? "bg-purple-400 cursor-wait text-white"
285312
: "bg-purple-600 hover:bg-purple-700 text-white"
@@ -298,19 +325,19 @@ function Contact() {
298325
{/* Success Popup */}
299326
{showPopup && (
300327
<div
301-
className={`fixed top-6 left-1/2 transform -translate-x-1/2 z-50 max-w-md w-full px-6 py-4 rounded-3xl shadow-lg flex items-center gap-4 ${
328+
className={`fixed top-4 sm:top-6 left-1/2 transform -translate-x-1/2 z-50 w-[90%] sm:w-auto max-w-sm sm:max-w-md px-4 sm:px-6 py-3 sm:py-4 rounded-xl sm:rounded-2xl shadow-lg flex items-center gap-3 sm:gap-4 ${
302329
mode === "dark"
303330
? "bg-green-900 border border-green-700 text-green-100"
304331
: "bg-green-100 border border-green-400 text-green-900"
305332
}`}
306333
>
307-
<CheckCircle className="w-7 h-7" />
308-
<div className="flex-1 text-sm font-semibold">
334+
<CheckCircle className="w-6 h-6 sm:w-7 sm:h-7" />
335+
<div className="flex-1 text-xs sm:text-sm font-semibold">
309336
Thank you for contacting us! We will get back to you shortly.
310337
</div>
311338
<button
312339
onClick={handleClosePopup}
313-
className="text-xl font-semibold px-3 py-1 rounded-xl hover:bg-green-200/40 focus:outline-none focus:ring-2 focus:ring-green-400"
340+
className="text-lg sm:text-xl px-2 sm:px-3 py-1 rounded-xl hover:bg-green-200/40 focus:outline-none focus:ring-2 focus:ring-green-400"
314341
aria-label="Close notification"
315342
>
316343
<X />

0 commit comments

Comments
 (0)