Skip to content

added back to home feature #402

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

Open
ArshiBansal wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added back to home feature #402

Show file tree
Hide file tree
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
89 changes: 61 additions & 28 deletions src/pages/Contact/Contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,22 @@ import {
Send,
X,
CheckCircle,
ArrowLeft,
} from "lucide-react";
import { useNavigate } from "react-router-dom";

import { ThemeContext } from "../../context/ThemeContext";
import type { ThemeContextType } from "../../context/ThemeContext";

function Contact() {
const [showPopup, setShowPopup] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);

const themeContext = useContext(ThemeContext) as ThemeContextType;
const { mode } = themeContext;

const navigate = useNavigate();

const handleSubmit = async () => {
setIsSubmitting(true);

Expand Down Expand Up @@ -51,6 +57,33 @@ function Contact() {
</div>

<div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl flex flex-col pb-20">
{/* Back to Home Button */}
<div className="mb-6 flex justify-start">
<button
onClick={() => navigate("/")}
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 ${
mode === "dark"
? "bg-white/10 text-white border-white/20 hover:bg-white/20"
: "bg-white/80 text-gray-800 border-gray-200 hover:bg-white"
}`}
>
{/* Glow Effect */}
<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>

{/* Icon */}
<div
className={`relative z-10 flex items-center justify-center w-8 h-8 rounded-full transition-all duration-300 group-hover:-translate-x-1 ${
mode === "dark" ? "bg-white/10" : "bg-purple-100"
}`}
>
<ArrowLeft className="w-4 h-4" />
</div>

{/* Text */}
<span className="relative z-10">Back to Home</span>
</button>
</div>

{/* Header Section */}
<div className="text-center mb-8 flex-shrink-0">
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-3 mb-4">
Expand All @@ -65,13 +98,15 @@ function Contact() {
className="w-10 h-10 sm:w-14 sm:h-14 object-contain"
/>
</div>

<h1
className="text-2xl sm:text-4xl md:text-5xl lg: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-sm sm:text-lg max-w-xl md:max-w-2xl mx-auto leading-relaxed ${
mode === "dark" ? "text-gray-300" : "text-gray-700"
Expand All @@ -93,13 +128,14 @@ function Contact() {
>
Let's Connect
</h2>

<p
className={`text-xs sm:text-base ${
mode === "dark" ? "text-gray-400" : "text-gray-600"
}`}
>
We're here to help you track and manage your GitHub
repositories more effectively
We're here to help you track and manage your GitHub repositories
more effectively
</p>
</div>

Expand Down Expand Up @@ -128,8 +164,10 @@ function Contact() {
Icon: Github,
},
];

const { title, iconBg, detail, sub, Icon } =
contactTypes[index];

return (
<div
key={title}
Expand All @@ -145,36 +183,31 @@ function Contact() {
>
<Icon
className={`w-4 h-4 sm:w-5 sm:h-5 ${
mode === "dark"
? "text-white"
: "text-gray-800"
mode === "dark" ? "text-white" : "text-gray-800"
}`}
/>
</div>

<div>
<h3
className={`text-sm sm:text-base font-semibold ${
mode === "dark"
? "text-white"
: "text-gray-800"
mode === "dark" ? "text-white" : "text-gray-800"
}`}
>
{title}
</h3>

<p
className={`text-xs sm:text-sm ${
mode === "dark"
? "text-gray-300"
: "text-gray-600"
mode === "dark" ? "text-gray-300" : "text-gray-600"
}`}
>
{detail}
</p>

<p
className={`text-xs ${
mode === "dark"
? "text-gray-400"
: "text-gray-500"
mode === "dark" ? "text-gray-400" : "text-gray-500"
}`}
>
{sub}
Expand Down Expand Up @@ -209,13 +242,12 @@ function Contact() {
<div>
<label
className={`block text-xs font-medium mb-1 ${
mode === "dark"
? "text-gray-300"
: "text-gray-700"
mode === "dark" ? "text-gray-300" : "text-gray-700"
}`}
>
Full Name
</label>

<input
type="text"
placeholder="Enter your full name"
Expand All @@ -232,13 +264,12 @@ function Contact() {
<div>
<label
className={`block text-xs font-medium mb-1 ${
mode === "dark"
? "text-gray-300"
: "text-gray-700"
mode === "dark" ? "text-gray-300" : "text-gray-700"
}`}
>
Email Address
</label>

<input
type="email"
placeholder="your.email@example.com"
Expand All @@ -255,25 +286,25 @@ function Contact() {
<div>
<label
className={`block text-xs font-medium mb-1 ${
mode === "dark"
? "text-gray-300"
: "text-gray-700"
mode === "dark" ? "text-gray-300" : "text-gray-700"
}`}
>
Subject
</label>

<select
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 ${
mode === "dark"
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
: "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
? "bg-white/5 border border-white/20 text-white"
: "bg-gray-50 border border-gray-300 text-gray-800"
}`}
required
defaultValue=""
>
<option value="" disabled>
Select a subject
</option>

<option>General Inquiry</option>
<option>Bug Report</option>
<option>Feature Request</option>
Expand All @@ -285,13 +316,12 @@ function Contact() {
<div className="relative">
<label
className={`block text-xs font-medium mb-1 ${
mode === "dark"
? "text-gray-300"
: "text-gray-700"
mode === "dark" ? "text-gray-300" : "text-gray-700"
}`}
>
Message
</label>

<textarea
placeholder="Type your message here..."
required
Expand All @@ -313,6 +343,7 @@ function Contact() {
}`}
>
{isSubmitting ? "Sending..." : "Send"}

<Send className="w-4 h-4" />
</button>
</div>
Expand All @@ -332,9 +363,11 @@ function Contact() {
}`}
>
<CheckCircle className="w-6 h-6 sm:w-7 sm:h-7" />

<div className="flex-1 text-xs sm:text-sm font-semibold">
Thank you for contacting us! We will get back to you shortly.
</div>

<button
onClick={handleClosePopup}
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"
Expand Down
Loading
Loading