From b3048619c6192763c4cc57327ce4fde3999592b1 Mon Sep 17 00:00:00 2001
From: Sindhura Karumuri <karu07sind@gmail.com>
Date: Mon, 18 Aug 2025 21:34:48 +0530
Subject: [PATCH] Added responsive Contact page with improved layout

---
 src/pages/Contact/Contact.tsx | 117 +++++++++++++++++++++-------------
 1 file changed, 72 insertions(+), 45 deletions(-)

diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
index 8515032..a0bfccb 100644
--- a/src/pages/Contact/Contact.tsx
+++ b/src/pages/Contact/Contact.tsx
@@ -1,5 +1,12 @@
 import { useState, useContext } from "react";
-import { Github, Mail, Phone, Send, X, CheckCircle } from "lucide-react";
+import {
+  Github,
+  Mail,
+  Phone,
+  Send,
+  X,
+  CheckCircle,
+} from "lucide-react";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
 
@@ -30,7 +37,7 @@ function Contact() {
 
   return (
     <div
-      className={`h-screen w-screen relative overflow-hidden ${
+      className={`min-h-screen w-screen relative overflow-y-auto ${
         mode === "dark"
           ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
           : "bg-gradient-to-br from-indigo-100 via-purple-100 to-indigo-100"
@@ -43,57 +50,60 @@ function Contact() {
         <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">
+      <div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl flex flex-col pb-20">
         {/* Header Section */}
         <div className="text-center mb-8 flex-shrink-0">
-          <div className="flex justify-center items-center gap-3 mb-4">
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-3 mb-4">
             <div
-              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 ${
+              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 ${
                 mode === "dark" ? "bg-white" : "bg-purple-200"
               }`}
             >
               <img
                 src="/crl-icon.png"
                 alt="Logo"
-                className="w-14 h-14 object-contain"
+                className="w-10 h-10 sm:w-14 sm: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">
+            <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-lg max-w-2xl mx-auto leading-relaxed ${
+            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"
             }`}
           >
-            Get in touch with us to discuss your project tracking needs or report
-            any issues
+            Get in touch with us to discuss your project tracking needs or
+            report any issues
           </p>
         </div>
 
-        <div className="grid lg:grid-cols-2 gap-8 items-start flex-1 min-h-0">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-8 items-start flex-1 min-h-0">
           {/* Contact Info Cards */}
-          <div className="space-y-6 h-full flex flex-col">
+          <div className="space-y-4 sm:space-y-6 h-full flex flex-col">
             <div className="text-center lg:text-left flex-shrink-0">
               <h2
-                className={`text-2xl font-bold mb-3 ${
+                className={`text-lg sm:text-2xl font-bold mb-2 sm:mb-3 ${
                   mode === "dark" ? "text-white" : "text-gray-800"
                 }`}
               >
                 Let's Connect
               </h2>
               <p
-                className={`text-base ${
+                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>
 
-            <div className="space-y-4 flex-1 flex flex-col justify-center">
+            <div className="space-y-3 sm:space-y-4 flex-1 flex flex-col justify-center">
               {[...Array(3)].map((_, index) => {
                 const contactTypes = [
                   {
@@ -118,44 +128,53 @@ function Contact() {
                     Icon: Github,
                   },
                 ];
-                const { title, iconBg, detail, sub, Icon } = contactTypes[index];
+                const { title, iconBg, detail, sub, Icon } =
+                  contactTypes[index];
                 return (
                   <div
                     key={title}
-                    className={`group p-5 rounded-2xl backdrop-blur-lg transition-all duration-300 hover:scale-105 ${
+                    className={`group p-3 sm:p-5 rounded-xl sm:rounded-2xl backdrop-blur-lg transition-all duration-300 hover:scale-105 ${
                       mode === "dark"
                         ? "bg-white/10 border border-white/20 hover:bg-white/20"
                         : "bg-white border border-gray-300 hover:bg-gray-100"
                     }`}
                   >
-                    <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-3 sm:gap-4">
                       <div
-                        className={`p-2.5 rounded-full transition-transform duration-300 group-hover:scale-110 bg-gradient-to-r ${iconBg}`}
+                        className={`p-2 sm:p-2.5 rounded-full transition-transform duration-300 group-hover:scale-110 bg-gradient-to-r ${iconBg}`}
                       >
                         <Icon
-                          className={`w-4 h-4 ${
-                            mode === "dark" ? "text-white" : "text-gray-800"
+                          className={`w-4 h-4 sm:w-5 sm:h-5 ${
+                            mode === "dark"
+                              ? "text-white"
+                              : "text-gray-800"
                           }`}
                         />
                       </div>
                       <div>
                         <h3
-                          className={`text-base font-semibold ${
-                            mode === "dark" ? "text-white" : "text-gray-800"
+                          className={`text-sm sm:text-base font-semibold ${
+                            mode === "dark"
+                              ? "text-white"
+                              : "text-gray-800"
                           }`}
                         >
                           {title}
                         </h3>
                         <p
-                          className={`text-sm ${
-                            mode === "dark" ? "text-gray-300" : "text-gray-600"
+                          className={`text-xs sm:text-sm ${
+                            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}
@@ -170,27 +189,29 @@ function Contact() {
 
           {/* Contact Form */}
           <div
-            className={`p-6 rounded-3xl shadow-2xl h-full flex flex-col backdrop-blur-lg ${
+            className={`p-4 sm:p-6 rounded-xl sm:rounded-3xl shadow-2xl h-full flex flex-col backdrop-blur-lg ${
               mode === "dark"
                 ? "bg-white/10 border border-white/20"
                 : "bg-white border border-gray-300"
             }`}
           >
             <h2
-              className={`text-xl font-bold mb-4 text-center flex-shrink-0 ${
+              className={`text-base sm:text-xl font-bold mb-4 text-center flex-shrink-0 ${
                 mode === "dark" ? "text-white" : "text-gray-800"
               }`}
             >
               Send us a Message
             </h2>
 
-            <div className="space-y-4 flex-1 flex flex-col">
+            <div className="space-y-3 sm:space-y-4 flex-1 flex flex-col">
               <div className="space-y-3 flex-1">
                 {/* Full Name */}
                 <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
@@ -199,7 +220,7 @@ function Contact() {
                     type="text"
                     placeholder="Enter your full name"
                     required
-                    className={`w-full p-3 rounded-xl text-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
+                    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"
@@ -211,7 +232,9 @@ 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
@@ -220,7 +243,7 @@ function Contact() {
                     type="email"
                     placeholder="your.email@example.com"
                     required
-                    className={`w-full p-3 rounded-xl text-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
+                    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"
@@ -232,13 +255,15 @@ 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-3 rounded-xl text-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
+                    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"
@@ -260,7 +285,9 @@ 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
@@ -268,8 +295,8 @@ function Contact() {
                   <textarea
                     placeholder="Type your message here..."
                     required
-                    rows={5}
-                    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 ${
+                    rows={4}
+                    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 ${
                       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"
@@ -279,7 +306,7 @@ function Contact() {
                   <button
                     onClick={handleSubmit}
                     disabled={isSubmitting}
-                    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 ${
+                    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 ${
                       isSubmitting
                         ? "bg-purple-400 cursor-wait text-white"
                         : "bg-purple-600 hover:bg-purple-700 text-white"
@@ -298,19 +325,19 @@ function Contact() {
       {/* Success Popup */}
       {showPopup && (
         <div
-          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 ${
+          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 ${
             mode === "dark"
               ? "bg-green-900 border border-green-700 text-green-100"
               : "bg-green-100 border border-green-400 text-green-900"
           }`}
         >
-          <CheckCircle className="w-7 h-7" />
-          <div className="flex-1 text-sm font-semibold">
+          <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-xl font-semibold px-3 py-1 rounded-xl hover:bg-green-200/40 focus:outline-none focus:ring-2 focus:ring-green-400"
+            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"
             aria-label="Close notification"
           >
             <X />