Skip to content

Commit 1237f45

Browse files
ArshiBansalArshiBansal
committed
added back to home feature
1 parent 9d34c19 commit 1237f45

3 files changed

Lines changed: 278 additions & 132 deletions

File tree

‎src/pages/Contact/Contact.tsx‎

Lines changed: 61 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,22 @@ import {
66
Send,
77
X,
88
CheckCircle,
9+
ArrowLeft,
910
} from "lucide-react";
11+
import { useNavigate } from "react-router-dom";
12+
1013
import { ThemeContext } from "../../context/ThemeContext";
1114
import type { ThemeContextType } from "../../context/ThemeContext";
1215

1316
function Contact() {
1417
const [showPopup, setShowPopup] = useState(false);
1518
const [isSubmitting, setIsSubmitting] = useState(false);
19+
1620
const themeContext = useContext(ThemeContext) as ThemeContextType;
1721
const { mode } = themeContext;
1822

23+
const navigate = useNavigate();
24+
1925
const handleSubmit = async () => {
2026
setIsSubmitting(true);
2127

@@ -51,6 +57,33 @@ function Contact() {
5157
</div>
5258

5359
<div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl flex flex-col pb-20">
60+
{/* Back to Home Button */}
61+
<div className="mb-6 flex justify-start">
62+
<button
63+
onClick={() => navigate("/")}
64+
className={`group relative inline-flex items-center gap-2 overflow-hidden rounded-2xl px-5 py-3 text-sm sm:text-base font-semibold shadow-lg backdrop-blur-xl border transition-all duration-300 hover:scale-105 hover:-translate-y-0.5 active:scale-95 ${
65+
mode === "dark"
66+
? "bg-white/10 text-white border-white/20 hover:bg-white/20"
67+
: "bg-white/80 text-gray-800 border-gray-200 hover:bg-white"
68+
}`}
69+
>
70+
{/* Glow Effect */}
71+
<span className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-blue-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
72+
73+
{/* Icon */}
74+
<div
75+
className={`relative z-10 flex items-center justify-center w-8 h-8 rounded-full transition-all duration-300 group-hover:-translate-x-1 ${
76+
mode === "dark" ? "bg-white/10" : "bg-purple-100"
77+
}`}
78+
>
79+
<ArrowLeft className="w-4 h-4" />
80+
</div>
81+
82+
{/* Text */}
83+
<span className="relative z-10">Back to Home</span>
84+
</button>
85+
</div>
86+
5487
{/* Header Section */}
5588
<div className="text-center mb-8 flex-shrink-0">
5689
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-3 mb-4">
@@ -65,13 +98,15 @@ function Contact() {
6598
className="w-10 h-10 sm:w-14 sm:h-14 object-contain"
6699
/>
67100
</div>
101+
68102
<h1
69103
className="text-2xl sm:text-4xl md:text-5xl lg:text-6xl font-bold
70104
bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent"
71105
>
72106
GitHub Tracker
73107
</h1>
74108
</div>
109+
75110
<p
76111
className={`text-sm sm:text-lg max-w-xl md:max-w-2xl mx-auto leading-relaxed ${
77112
mode === "dark" ? "text-gray-300" : "text-gray-700"
@@ -93,13 +128,14 @@ function Contact() {
93128
>
94129
Let's Connect
95130
</h2>
131+
96132
<p
97133
className={`text-xs sm:text-base ${
98134
mode === "dark" ? "text-gray-400" : "text-gray-600"
99135
}`}
100136
>
101-
We're here to help you track and manage your GitHub
102-
repositories more effectively
137+
We're here to help you track and manage your GitHub repositories
138+
more effectively
103139
</p>
104140
</div>
105141

@@ -128,8 +164,10 @@ function Contact() {
128164
Icon: Github,
129165
},
130166
];
167+
131168
const { title, iconBg, detail, sub, Icon } =
132169
contactTypes[index];
170+
133171
return (
134172
<div
135173
key={title}
@@ -145,36 +183,31 @@ function Contact() {
145183
>
146184
<Icon
147185
className={`w-4 h-4 sm:w-5 sm:h-5 ${
148-
mode === "dark"
149-
? "text-white"
150-
: "text-gray-800"
186+
mode === "dark" ? "text-white" : "text-gray-800"
151187
}`}
152188
/>
153189
</div>
190+
154191
<div>
155192
<h3
156193
className={`text-sm sm:text-base font-semibold ${
157-
mode === "dark"
158-
? "text-white"
159-
: "text-gray-800"
194+
mode === "dark" ? "text-white" : "text-gray-800"
160195
}`}
161196
>
162197
{title}
163198
</h3>
199+
164200
<p
165201
className={`text-xs sm:text-sm ${
166-
mode === "dark"
167-
? "text-gray-300"
168-
: "text-gray-600"
202+
mode === "dark" ? "text-gray-300" : "text-gray-600"
169203
}`}
170204
>
171205
{detail}
172206
</p>
207+
173208
<p
174209
className={`text-xs ${
175-
mode === "dark"
176-
? "text-gray-400"
177-
: "text-gray-500"
210+
mode === "dark" ? "text-gray-400" : "text-gray-500"
178211
}`}
179212
>
180213
{sub}
@@ -209,13 +242,12 @@ function Contact() {
209242
<div>
210243
<label
211244
className={`block text-xs font-medium mb-1 ${
212-
mode === "dark"
213-
? "text-gray-300"
214-
: "text-gray-700"
245+
mode === "dark" ? "text-gray-300" : "text-gray-700"
215246
}`}
216247
>
217248
Full Name
218249
</label>
250+
219251
<input
220252
type="text"
221253
placeholder="Enter your full name"
@@ -232,13 +264,12 @@ function Contact() {
232264
<div>
233265
<label
234266
className={`block text-xs font-medium mb-1 ${
235-
mode === "dark"
236-
? "text-gray-300"
237-
: "text-gray-700"
267+
mode === "dark" ? "text-gray-300" : "text-gray-700"
238268
}`}
239269
>
240270
Email Address
241271
</label>
272+
242273
<input
243274
type="email"
244275
placeholder="your.email@example.com"
@@ -255,25 +286,25 @@ function Contact() {
255286
<div>
256287
<label
257288
className={`block text-xs font-medium mb-1 ${
258-
mode === "dark"
259-
? "text-gray-300"
260-
: "text-gray-700"
289+
mode === "dark" ? "text-gray-300" : "text-gray-700"
261290
}`}
262291
>
263292
Subject
264293
</label>
294+
265295
<select
266296
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 ${
267297
mode === "dark"
268-
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
269-
: "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
298+
? "bg-white/5 border border-white/20 text-white"
299+
: "bg-gray-50 border border-gray-300 text-gray-800"
270300
}`}
271301
required
272302
defaultValue=""
273303
>
274304
<option value="" disabled>
275305
Select a subject
276306
</option>
307+
277308
<option>General Inquiry</option>
278309
<option>Bug Report</option>
279310
<option>Feature Request</option>
@@ -285,13 +316,12 @@ function Contact() {
285316
<div className="relative">
286317
<label
287318
className={`block text-xs font-medium mb-1 ${
288-
mode === "dark"
289-
? "text-gray-300"
290-
: "text-gray-700"
319+
mode === "dark" ? "text-gray-300" : "text-gray-700"
291320
}`}
292321
>
293322
Message
294323
</label>
324+
295325
<textarea
296326
placeholder="Type your message here..."
297327
required
@@ -313,6 +343,7 @@ function Contact() {
313343
}`}
314344
>
315345
{isSubmitting ? "Sending..." : "Send"}
346+
316347
<Send className="w-4 h-4" />
317348
</button>
318349
</div>
@@ -332,9 +363,11 @@ function Contact() {
332363
}`}
333364
>
334365
<CheckCircle className="w-6 h-6 sm:w-7 sm:h-7" />
366+
335367
<div className="flex-1 text-xs sm:text-sm font-semibold">
336368
Thank you for contacting us! We will get back to you shortly.
337369
</div>
370+
338371
<button
339372
onClick={handleClosePopup}
340373
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"

0 commit comments

Comments
 (0)