From f5f01c8d2f5b33176d5dfe2e2cebf63a738d3c00 Mon Sep 17 00:00:00 2001
From: 503BINGPOT <dhruv503a@gmail.com>
Date: Thu, 7 Aug 2025 16:54:28 +0530
Subject: [PATCH 1/5] added functional contact page

---
 package-lock.json         | 371 ++++++++++++++++++++++++++++++++++++--
 package.json              |   3 +-
 src/App.jsx               |   2 +
 src/components/Header.jsx |   2 +-
 src/pages/Contacts.jsx    | 174 ++++++++++++++++++
 5 files changed, 533 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/Contacts.jsx

diff --git a/package-lock.json b/package-lock.json
index 5692fb9..32034c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@tailwindcss/vite": "^4.1.11",
         "axios": "^1.10.0",
         "dotenv": "^17.1.0",
-        "framer-motion": "^12.23.0",
+        "framer-motion": "^12.23.12",
         "gsap": "^3.13.0",
         "lucide-react": "^0.525.0",
         "react": "^19.1.0",
@@ -25,6 +25,7 @@
         "react-redux": "^9.2.0",
         "react-router": "^7.6.3",
         "react-toastify": "^11.0.5",
+        "reacticons": "^0.0.1",
         "tailwindcss": "^4.1.11",
         "three": "^0.178.0"
       },
@@ -1933,6 +1934,15 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
+      "license": "BSD-3-Clause OR MIT",
+      "engines": {
+        "node": ">=0.4.2"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -1956,6 +1966,15 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/ast-types": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz",
+      "integrity": "sha512-qEdtR2UH78yyHX/AUNfXmJTlM48XoFZKBdwi1nzkI1mJL21cmbu0cvjxjpkXJ5NENMq42H+hNs8VLJcqXLerBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -1977,9 +1996,17 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/base62": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/base62/-/base62-1.2.8.tgz",
+      "integrity": "sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2013,7 +2040,6 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -2156,6 +2182,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/chromath": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/chromath/-/chromath-0.0.6.tgz",
+      "integrity": "sha512-3jUFlGQW8Gkr5G+jcCNo/sQAXEseNamI8QbQ7060gO9zXrgxhinVtbalhhBBQj3FE19Jhu5N6MnmRgoO/LzEkA==",
+      "license": "MIT"
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2197,11 +2229,51 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
+    "node_modules/commoner": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/commoner/-/commoner-0.10.8.tgz",
+      "integrity": "sha512-3/qHkNMM6o/KGXHITA14y78PcfmXh4+AOCJpSoF73h4VY1JpdGv3CHMS5+JW6SwLhfJt4RhNmLAa7+RRX/62EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^2.5.0",
+        "detective": "^4.3.1",
+        "glob": "^5.0.15",
+        "graceful-fs": "^4.1.2",
+        "iconv-lite": "^0.4.5",
+        "mkdirp": "^0.5.0",
+        "private": "^0.1.6",
+        "q": "^1.1.2",
+        "recast": "^0.11.17"
+      },
+      "bin": {
+        "commonize": "bin/commonize"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commoner/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/convert-source-map": {
@@ -2283,6 +2355,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/defined": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2310,6 +2391,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/detective": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-4.7.1.tgz",
+      "integrity": "sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^5.2.1",
+        "defined": "^1.0.0"
+      }
+    },
+    "node_modules/detective/node_modules/acorn": {
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
+      "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.1.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.1.0.tgz",
@@ -2362,6 +2465,19 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/envify": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/envify/-/envify-3.4.1.tgz",
+      "integrity": "sha512-XLiBFsLtNF0MOZl+vWU59yPb3C2JtrQY2CNJn22KH75zPlHWY5ChcAQuf4knJeWT/lLkrx3sqvhP/J349bt4Bw==",
+      "license": "MIT",
+      "dependencies": {
+        "jstransform": "^11.0.3",
+        "through": "~2.3.4"
+      },
+      "bin": {
+        "envify": "bin/envify"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2602,6 +2718,31 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+      "integrity": "sha512-AWwVMNxwhN8+NIPQzAQZCm7RkLC4RbM3B1OobMuyp3i+w73X57KCKaVIxaRZb+DYCojq7rspo+fmuQfAboyhFg==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esprima-fb": {
+      "version": "15001.1.0-dev-harmony-fb",
+      "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz",
+      "integrity": "sha512-59dDGQo2b3M/JfKIws0/z8dcXH2mnVHkfSPRhCYS91JNGfGNwr7GsSF6qzWZuOGvw5Ii0w9TtylrX07MGmlOoQ==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -2777,13 +2918,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.23.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.0.tgz",
-      "integrity": "sha512-xf6NxTGAyf7zR4r2KlnhFmsRfKIbjqeBupEDBAaEtVIBJX96sAon00kMlsKButSIRwPSHjbRrAPnYdJJ9kyhbA==",
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.22.0",
-        "motion-utils": "^12.19.0",
+        "motion-dom": "^12.23.12",
+        "motion-utils": "^12.23.6",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -2873,6 +3014,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/glob": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
+      "integrity": "sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "2 || 3",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2993,6 +3151,18 @@
       "integrity": "sha512-S4uTCwTHOtImW+/jxMjzG7udbHy5z682YQRbm/4f7VXuVNEoGBRjPJnD3Fxrufomdhzdtv24KnxRhPMXSvL6Fw==",
       "license": "Apache-2.0"
     },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -3066,6 +3236,23 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3189,6 +3376,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/jstransform": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-11.0.3.tgz",
+      "integrity": "sha512-LGm87w0A8E92RrcXt94PnNHkFqHmgDy3mKHvNZOG7QepKCTCH/VB6S+IEN+bT4uLN3gVpOT0vvOOVd96osG71g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "base62": "^1.1.0",
+        "commoner": "^0.10.1",
+        "esprima-fb": "^15001.1.0-dev-harmony-fb",
+        "object-assign": "^2.0.0",
+        "source-map": "^0.4.2"
+      },
+      "bin": {
+        "jstransform": "bin/jstransform"
+      },
+      "engines": {
+        "node": ">=0.8.8"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3560,7 +3766,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -3569,6 +3774,15 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -3606,18 +3820,18 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.22.0",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.22.0.tgz",
-      "integrity": "sha512-ooH7+/BPw9gOsL9VtPhEJHE2m4ltnhMlcGMhEqA0YGNhKof7jdaszvsyThXI6LVIKshJUZ9/CP6HNqQhJfV7kw==",
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.19.0"
+        "motion-utils": "^12.23.6"
       }
     },
     "node_modules/motion-utils": {
-      "version": "12.19.0",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.19.0.tgz",
-      "integrity": "sha512-BuFTHINYmV07pdWs6lj6aI63vr2N4dg0vR+td0rtrdpWOhBzIkEklZyLcvKBoEtwSqx8Jg06vUB5RS0xDiUybw==",
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
       "license": "MIT"
     },
     "node_modules/ms": {
@@ -3659,6 +3873,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz",
+      "integrity": "sha512-CdsOUYIh5wIiozhJ3rLQgmUTgcyzFwZZrqhkKhODMoGtPKM+wt0h0CNIoauJWMsS9822EdzPsF/6mb4nLvPN5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3732,6 +3964,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -3803,6 +4044,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/private": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
+      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/promise-worker-transferable": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
@@ -3829,6 +4079,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
+      "deprecated": "You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.\n\n(For a CapTP with native promises, see @endo/eventual-send and @endo/captp)",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.0",
+        "teleport": ">=0.2.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
@@ -3996,6 +4257,52 @@
         }
       }
     },
+    "node_modules/reacticons": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/reacticons/-/reacticons-0.0.1.tgz",
+      "integrity": "sha512-RbninJXcP/hZXxXYAw3xQeEI/nONhyBZDB1CwJFIexeS/RKcC191PSv+ciH+6JUwK2kj7I2MX8uXDj4sx0X34Q==",
+      "license": "MIT",
+      "dependencies": {
+        "chromath": "0.0.6",
+        "react": "0.12.0"
+      }
+    },
+    "node_modules/reacticons/node_modules/react": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-0.12.0.tgz",
+      "integrity": "sha512-p74Bwe+b6/XxwgufKmOnNMB8gnaxb/DXPPis/p35PSrRa/kO8ZG+DKcx5/8KJwSC+iD8ybZJz4Q/q6IoLUa1mw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "envify": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/recast": {
+      "version": "0.11.23",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz",
+      "integrity": "sha512-+nixG+3NugceyR8O1bLU45qs84JgI3+8EauyRZafLgC9XbdAOIVgwV1Pe2da0YzGo62KzWoZwUpVEQf6qNAXWA==",
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "0.9.6",
+        "esprima": "~3.1.0",
+        "private": "~0.1.5",
+        "source-map": "~0.5.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/recast/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/redux": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
@@ -4075,6 +4382,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -4118,6 +4431,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+      "integrity": "sha512-Y8nIfcb1s/7DcobUz1yOO1GSp7gyL+D9zLHDehT7iRESqGSxjJ448Sg7rvfgsRJCnKLdSl11uGf0s9X80cH0/A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "amdefine": ">=0.0.4"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4267,6 +4592,12 @@
       "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
       "license": "MIT"
     },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -4538,6 +4869,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index adea4f9..da7c837 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@tailwindcss/vite": "^4.1.11",
     "axios": "^1.10.0",
     "dotenv": "^17.1.0",
-    "framer-motion": "^12.23.0",
+    "framer-motion": "^12.23.12",
     "gsap": "^3.13.0",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
@@ -27,6 +27,7 @@
     "react-redux": "^9.2.0",
     "react-router": "^7.6.3",
     "react-toastify": "^11.0.5",
+    "reacticons": "^0.0.1",
     "tailwindcss": "^4.1.11",
     "three": "^0.178.0"
   },
diff --git a/src/App.jsx b/src/App.jsx
index 42995d2..a8f0de3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,6 +13,7 @@ import Settings from './pages/Settings.jsx';
 import Connections from './pages/Connections.jsx';
 import Requests from './pages/Requests.jsx';
 import NewFeature from './pages/NewFeature.jsx';
+import Contacts from './pages/Contacts.jsx';
 const App = () => {
     return (
         <>
@@ -33,6 +34,7 @@ const App = () => {
                 <Route path ="settings" element={<Settings/>} >
                     <Route path="edit-profile" element={<EditProfile/>} />
                 </Route>
+                <Route path="contacts" element={<Contacts/>} />
                 <Route path="*" element={<NewFeature/>} />
             </Route>
         </Routes>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 7ee8702..f7bc65e 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -95,7 +95,7 @@ const Header = () => {
                             <span className="absolute left-0 -bottom-1 w-0 h-0.5 bg-gradient-to-r from-pink-500 to-yellow-500 transition-all group-hover:w-full"></span>
                         </Motion.a>
                         <Motion.a
-                            href="/contact"
+                            href="/contacts"
                             className={`hover:text-[${colors.primary.main}] transition-colors duration-200 relative group`}
                             whileHover={{ scale: 1.08 }}
                         >
diff --git a/src/pages/Contacts.jsx b/src/pages/Contacts.jsx
new file mode 100644
index 0000000..2f0318f
--- /dev/null
+++ b/src/pages/Contacts.jsx
@@ -0,0 +1,174 @@
+import React, { useRef,useState} from 'react'
+import { FaEnvelope, FaMapMarkedAlt, FaPhone, FaGithub, FaLinkedin } from 'react-icons/fa'
+import { motion } from 'framer-motion';
+import emailjs from 'emailjs-com'
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 90 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.8 } }
+};
+
+
+const Contacts = () => {
+    const form = useRef();
+    const [loading, setLoading] = useState(false);
+    const [success, setSuccess] = useState(false);
+
+      const sendEmail = (e) => {
+        e.preventDefault();
+        setLoading(true); // start loading
+      
+        emailjs.sendForm('service_x5pt8im', 'template_gvlvdef', form.current, 'sZUimy8I6Qj_AY-Y4')
+          .then((result) => {
+            console.log(result.text);
+            setLoading(false);
+            setSuccess(true);
+            form.current.reset();
+          }, (error) => {
+            console.log(error.text);
+            setLoading(false);
+          });
+      };
+
+    return (
+        <div>
+ <section
+    className='min-h-screen flex flex-col justify-center items-center px-8 md:px-20 py-10 md:py-20 bg-[#333436] text-white'
+    >
+      <div className=" flex flex-col md:flex-row items-center justify-between w-full max-w-6xl gap-6 md:gap-10">
+        <motion.div
+        className='flex-1'
+        variants={fadeUp}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.3 }}
+        >
+        <h2 className='text-4xl md:text-5xl font-bold mb-4'>
+         Contact <span className='bg-clip-text text-white'>Us</span> 
+        </h2>
+
+
+        <div className='flex flex-col md:flex-row gap-6 md:gap-10'>
+          <div className='flex-1 space-y-2'>
+          <div className='flex items-center gap-4'>
+          <div className='p-4 bg-gray-800 rounded-full text-white hover:scale-110 transition-all duration-200 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700'>
+          <FaEnvelope size={20}/>
+          </div>
+          <div>
+            <p className='font-semibold'>Email</p>
+            <p className='text-gray-400'>yourEmail@gmail.com</p>
+          </div>
+          </div>
+
+                <div className="flex items-center gap-4">
+            <div className="p-4 bg-gray-800 rounded-full text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 hover:scale-110 transition-all duration-200">
+              <FaPhone size={20} />
+            </div>
+            <div>
+              <p className="font-semibold">Phone</p>
+              <p className="text-gray-400">XXXXXXXXXX</p>
+            </div>
+          </div>
+
+          <div className='flex items-center gap-4'>
+            <div className='p-4 bg-gray-800 rounded-full text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 hover:scale-110 transition-all duration-200'>
+              <FaMapMarkedAlt size={20}/>
+            </div>
+            <div>
+            <p className='font-semibold'>Location</p>
+            <p className='text-gray-400'>Your Location</p>
+          </div>
+          </div>
+        </div>
+        </div>
+        </motion.div>
+
+      <motion.form ref={form} 
+      onSubmit={sendEmail} 
+      className='flex-1 bg-[rgba(34,34,34,0.85)] p-6 md:p-8 rounded-xl space-y-4 md:space-y-6 shadow-md mt-6 md:mt-8'
+      initial={{ opacity: 0, x: 40 }}
+      whileInView={{ opacity: 1, x: 0 }}
+     transition={{ duration: 0.6, delay: 0.2 }}
+    viewport={{ once: true }}
+                  >
+        <div>          
+          <label className='block font-semibold mb-1'>Name</label>
+            <input
+            type='text'
+            name='user_name'
+            placeholder='Your Name'
+            required
+            className='w-full px-4 py-2 bg-[rgba(34,34,34,0.85)] border border-gray-600 rounded-md text-white focus:outline-none focus:ring-blue-500'
+            />
+            </div>
+
+
+            <div>
+          <label className='block font-semibold mb-1'>Email</label>
+            <input
+            type='email'
+            name='user_email'
+            placeholder='your.email@example.com'
+            required
+            className='w-full px-4 py-2 bg-[rgba(34,34,34,0.85)] border border-gray-600 rounded-md text-white focus:outline-none focus:ring-blue-500'
+            />
+            </div>
+
+            <div>
+          <label className='block font-semibold mb-1'>Message</label>
+       <textarea
+        name='message'
+        rows="4"
+        placeholder='Tell me about your project...'
+        required
+        className='w-full px-4 py-2 bg-[rgba(34,34,34,0.85)]  border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500'
+       />
+            </div>
+   <button
+  type="submit"
+  disabled={loading}
+  className="w-full bg-gradient-to-r from-[#ff512f] to-[#dd2476] rounded-lg hover:from-[#dd2476] hover:to-[#ff512f] text-white py-3 font-semibold hover:opacity-90 transition disabled:opacity-50 disabled:cursor-not-allowed"
+>
+  {loading ? 'Sending...' : 'Send Message'}
+</button>
+{success && <p className='text-green-400 text-sm mt-2'>Message sent Successfully!</p>}
+
+      </motion.form>
+        </div>
+
+  <motion.div className="flex justify-center mt-4 md:mt-8"
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+            viewport={{ once: true }}
+  >
+        <div className=' flex flex-row gap-4 md:gap-6 text-2xl md:text-3xl text-gray-300 '>
+          <h3 className='py-2 md:py-4 flex text-lg md:text-2xl font-semibold '>Find me on</h3>
+           <div className='p-3 md:p-4 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-full text-white hover:scale-110 transition-all duration-200'>
+          <a
+          href='https://www.linkedin.com/in/dhruv-mantri-952965266/'
+          target='_blank'
+          rel="noopener noreferrer"
+          >
+            <FaLinkedin/>
+          </a>
+          </div>
+          <div className='p-3 md:p-4 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-full text-white hover:scale-110 transition-all duration-200'>
+          <a
+          href='https://github.com/503BINGPOT'
+          target='_blank'
+          rel="noopener noreferrer"
+          >
+            <FaGithub/>
+          </a>
+          </div>
+        </div>
+        </motion.div>
+    </section>
+        </div>
+    )
+}
+
+
+
+export default Contacts;
\ No newline at end of file

From 2a323d90ba7b426408475e17dc7b23f38adf594d Mon Sep 17 00:00:00 2001
From: 503BINGPOT <dhruv503a@gmail.com>
Date: Thu, 7 Aug 2025 17:04:46 +0530
Subject: [PATCH 2/5] changed linkedin link and gmail link

---
 src/pages/Contacts.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Contacts.jsx b/src/pages/Contacts.jsx
index 2f0318f..1652086 100644
--- a/src/pages/Contacts.jsx
+++ b/src/pages/Contacts.jsx
@@ -146,7 +146,7 @@ const Contacts = () => {
           <h3 className='py-2 md:py-4 flex text-lg md:text-2xl font-semibold '>Find me on</h3>
            <div className='p-3 md:p-4 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-full text-white hover:scale-110 transition-all duration-200'>
           <a
-          href='https://www.linkedin.com/in/dhruv-mantri-952965266/'
+          href='https://www.linkedin.com/in/rishi-verma-sde/'
           target='_blank'
           rel="noopener noreferrer"
           >
@@ -155,7 +155,7 @@ const Contacts = () => {
           </div>
           <div className='p-3 md:p-4 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-full text-white hover:scale-110 transition-all duration-200'>
           <a
-          href='https://github.com/503BINGPOT'
+          href='/'
           target='_blank'
           rel="noopener noreferrer"
           >

From 99bec5e401ccc3e137a155fd167643eae3e5122e Mon Sep 17 00:00:00 2001
From: 503BINGPOT <dhruv503a@gmail.com>
Date: Thu, 7 Aug 2025 17:07:53 +0530
Subject: [PATCH 3/5] changed github link

---
 src/pages/Contacts.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Contacts.jsx b/src/pages/Contacts.jsx
index 1652086..99aa9e6 100644
--- a/src/pages/Contacts.jsx
+++ b/src/pages/Contacts.jsx
@@ -155,7 +155,7 @@ const Contacts = () => {
           </div>
           <div className='p-3 md:p-4 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-full text-white hover:scale-110 transition-all duration-200'>
           <a
-          href='/'
+          href='https://github.com/coder-writes'
           target='_blank'
           rel="noopener noreferrer"
           >

From 9f284eb2c44d9082e27184f21c316121068e24e9 Mon Sep 17 00:00:00 2001
From: diiviikk5 <divikstudy100@gmail.com>
Date: Tue, 5 Aug 2025 22:16:02 +0530
Subject: [PATCH 4/5] Add FAQ section to landing page

- Added expandable FAQ component to Index page
- FAQ appears below main content with smooth animations
- Maintains consistent styling with existing theme
- Removed FAQ from footer to keep it clean
- Updated footer to full-width layout
---
 src/components/Footer.jsx |  29 ++++----
 src/pages/Index.jsx       | 137 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 148 insertions(+), 18 deletions(-)

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 53ac478..3384e16 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -9,18 +9,18 @@ const Footer = () => {
 
     return (
         <Motion.footer
-            className="w-fit py-7 bg-gradient-to-r from-[#232526] to-[#414345] text-white  shadow-inner "
+            className="w-full py-7 bg-gradient-to-r from-[#232526] to-[#414345] text-white shadow-inner"
             initial={{ y: 60, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ duration: 0.7, type: 'spring' }}
         >
-            <div className="max-w-fit mx-auto px-25 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-10 gap-x-24 text-sm text-center sm:text-left">
+            <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-10 gap-x-8 text-sm text-center sm:text-left">
 
                 {/* Logo & About */}
-                <div >
-                    <div className="flex items-center justify-center sm:justify-start gap-3 mb-4 ml-3">
-                        <img src={Logo} alt="DevTinder Logo" className="w-12 h-12 object-cover " />
-                        <span className="text-2xl font-extrabold hover:underline transition-all  duration-300 cursor-pointer">DevTinder</span>
+                <div>
+                    <div className="flex items-center justify-center sm:justify-start gap-3 mb-4">
+                        <img src={Logo} alt="DevTinder Logo" className="w-12 h-12 object-cover" />
+                        <span className="text-2xl font-extrabold hover:underline transition-all duration-300 cursor-pointer">DevTinder</span>
                     </div>
                     <p className="text-gray-300 text-lg">
                         Connect. Collaborate. Code. Your perfect coding partner awaits.
@@ -29,25 +29,24 @@ const Footer = () => {
 
                 {/* Contact Info */}
                 <div>
-                    <h3 className=" font-extrabold mb-4 text-2xl hover:underline transition-all  duration-300 cursor-pointer">Contact</h3>
+                    <h3 className="font-extrabold mb-4 text-2xl hover:underline transition-all duration-300 cursor-pointer">Contact</h3>
                     <ul className="space-y-3 text-gray-200 text-lg">
                         <li className="flex items-center justify-center sm:justify-start gap-2">
                             <MdPhone className="text-[#ff512f]" /> +91 123 456 7890
                         </li>
-                        <li className="flex items-center justify-center sm:justify-start gap-2 ">
+                        <li className="flex items-center justify-center sm:justify-start gap-2">
                             <MdEmail className="text-[#ff512f]" /> devtinder@example.com
                         </li>
-                        <li className="flex items-center justify-center sm:justify-start gap-2 ">
+                        <li className="flex items-center justify-center sm:justify-start gap-2">
                             <MdLocationOn className="text-[#ff512f]" /> India
                         </li>
                     </ul>
-
                 </div>
 
                 {/* Quick Links */}
                 <div className='text-center sm:text-left'>
-                    <h3 className="text-2xl font-extrabold mb-4 hover:underline transition-all  duration-300 cursor-pointer">Quick Links</h3>
-                    <ul className="space-y-3 text-gray-200 text-lg flex flex-col items-center sm:items-start ml-5">
+                    <h3 className="text-2xl font-extrabold mb-4 hover:underline transition-all duration-300 cursor-pointer">Quick Links</h3>
+                    <ul className="space-y-3 text-gray-200 text-lg flex flex-col items-center sm:items-start">
                         <li>
                             <a href="/" className="hover:bg-gradient-to-r hover:from-[#ff512f] hover:to-[#dd2476] hover:text-transparent hover:bg-clip-text transition">
                                 Home
@@ -69,12 +68,11 @@ const Footer = () => {
                             </a>
                         </li>
                     </ul>
-
                 </div>
 
                 {/* Newsletter */}
                 <div className="text-center">
-                    <h3 className="text-2xl font-bold mb-4 text-white ">Subscribe for Updates</h3>
+                    <h3 className="text-2xl font-bold mb-4 text-white">Subscribe for Updates</h3>
 
                     <input
                         type="email"
@@ -124,11 +122,10 @@ const Footer = () => {
                 </p>
             </div>
             <div className="text-center text-gray-300 mt-2">
-                <p className="text-md">All rights reserved.</p>
+                <p className="text-md">All Rights reserved.</p>
             </div>
         </Motion.footer>
     );
 };
 
 export default Footer;
-
diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx
index a5c06fd..a917b40 100644
--- a/src/pages/Index.jsx
+++ b/src/pages/Index.jsx
@@ -1,14 +1,144 @@
-import React from 'react';
-import { motion as Motion } from 'framer-motion';
+import React, { useState } from 'react';
+import { motion as Motion, AnimatePresence } from 'framer-motion';
+import { FaChevronDown, FaQuestionCircle } from 'react-icons/fa';
 import { HeroSection, FeatureCard } from '../components';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router';
+
+const FAQ = () => {
+    const [openIndex, setOpenIndex] = useState(null);
+
+    const faqs = [
+        {
+            question: "How does DevTinder work?",
+            answer: "DevTinder works like a dating app but for developers! Create your profile, showcase your skills, and swipe through other developers. Match with those who share your interests and start collaborating on exciting projects."
+        },
+        {
+            question: "Is DevTinder completely free?",
+            answer: "Yes! Creating an account, browsing profiles, and matching with developers is completely free. We believe in building a strong developer community without barriers."
+        },
+        {
+            question: "What kind of developers can I find?",
+            answer: "You'll find developers from all backgrounds - frontend, backend, mobile, DevOps, data science, AI/ML, and more. From beginners learning their first language to senior engineers with decades of experience."
+        },
+        {
+            question: "How do I start collaborating after matching?",
+            answer: "Once you match with someone, you can start chatting directly through our platform. Share project ideas, discuss tech stacks, or even plan meetups. Many successful collaborations start with a simple 'Hello!'."
+        },
+        {
+            question: "Can I find developers for specific technologies?",
+            answer: "Absolutely! Our advanced filtering system lets you search by programming languages, frameworks, experience level, location, and project interests. Find exactly the kind of developer you're looking for."
+        }
+    ];
+
+    const toggleFAQ = (index) => {
+        setOpenIndex(openIndex === index ? null : index);
+    };
+
+    return (
+        <Motion.section
+            className="w-full max-w-4xl mx-auto mt-20 px-4"
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 2 }}
+        >
+            {/* Header */}
+            <Motion.div
+                className="text-center mb-12"
+                initial={{ y: -30, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ duration: 0.6, delay: 2.2 }}
+            >
+                <div className="flex items-center justify-center gap-3 mb-4">
+                    <FaQuestionCircle className="text-[#ff512f] text-3xl" />
+                    <h2 className="text-4xl font-bold bg-gradient-to-r from-[#ff512f] to-[#dd2476] bg-clip-text text-transparent">
+                        Frequently Asked Questions
+                    </h2>
+                </div>
+                <p className="text-gray-300 text-lg max-w-2xl mx-auto">
+                    Got questions about DevTinder? We've got answers! Here are some common questions from our developer community.
+                </p>
+            </Motion.div>
+
+            {/* FAQ Items */}
+            <div className="space-y-4">
+                {faqs.map((faq, index) => (
+                    <Motion.div
+                        key={index}
+                        className="bg-[rgba(34,34,34,0.85)] rounded-xl border border-gray-700 overflow-hidden backdrop-blur-sm"
+                        initial={{ x: -50, opacity: 0 }}
+                        animate={{ x: 0, opacity: 1 }}
+                        transition={{ duration: 0.5, delay: 2.4 + index * 0.1 }}
+                        whileHover={{ 
+                            scale: 1.02,
+                            boxShadow: "0 10px 30px rgba(255, 81, 47, 0.1)"
+                        }}
+                    >
+                        <button
+                            onClick={() => toggleFAQ(index)}
+                            className="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[rgba(255,81,47,0.05)] transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-[#ff512f] focus:ring-opacity-50"
+                        >
+                            <span className="font-semibold text-lg text-white pr-4">
+                                {faq.question}
+                            </span>
+                            <Motion.div
+                                animate={{ rotate: openIndex === index ? 180 : 0 }}
+                                transition={{ duration: 0.3 }}
+                            >
+                                <FaChevronDown className="text-[#ff512f] text-xl flex-shrink-0" />
+                            </Motion.div>
+                        </button>
+                        
+                        <AnimatePresence>
+                            {openIndex === index && (
+                                <Motion.div
+                                    initial={{ height: 0, opacity: 0 }}
+                                    animate={{ height: "auto", opacity: 1 }}
+                                    exit={{ height: 0, opacity: 0 }}
+                                    transition={{ duration: 0.3 }}
+                                    className="overflow-hidden"
+                                >
+                                    <div className="px-6 pb-5 pt-2">
+                                        <p className="text-gray-300 leading-relaxed">
+                                            {faq.answer}
+                                        </p>
+                                    </div>
+                                </Motion.div>
+                            )}
+                        </AnimatePresence>
+                    </Motion.div>
+                ))}
+            </div>
+
+            {/* Call to Action */}
+            <Motion.div
+                className="text-center mt-12"
+                initial={{ y: 30, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ duration: 0.6, delay: 3 }}
+            >
+                <p className="text-gray-300 mb-6">
+                    Still have questions? We'd love to help!
+                </p>
+                <a
+                    href="mailto:devtinder@example.com"
+                    className="inline-block px-8 py-3 text-base font-semibold text-white bg-gradient-to-r from-[#ff512f] to-[#dd2476] rounded-lg hover:from-[#dd2476] hover:to-[#ff512f] transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105"
+                >
+                    Contact Support
+                </a>
+            </Motion.div>
+        </Motion.section>
+    );
+};
+
 const Index = () => {
     const user = useSelector((state) => state.user);
     const navigate = useNavigate();
+    
     if(user){
         navigate('/feed');
     }
+    
     return (
         <Motion.div
             className="flex flex-col items-center justify-center flex-grow py-16 px-4 text-white"
@@ -79,6 +209,9 @@ const Index = () => {
                     </a>
                 </Motion.div>
             </Motion.div>
+
+            {/* FAQ Section */}
+            <FAQ />
         </Motion.div>
     );
 };

From 6f4831a1ee8d4d5b110c1bf170ca4a84f695f93b Mon Sep 17 00:00:00 2001
From: 503BINGPOT <dhruv503a@gmail.com>
Date: Tue, 26 Aug 2025 16:59:22 +0530
Subject: [PATCH 5/5] conflicts resolved

---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index fc29b82..4c318bb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 
 import GoToTopButton from './components/ui/GoToTopButton';
-import { BrowserRouter,Route,Routes } from 'react-router';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import {Index} from './pages/Index.jsx';
 import Header from './components/Header.jsx';
 import Footer from './components/Footer.jsx';