From deba94be6c95214a99daf24685e44698e77c9ef2 Mon Sep 17 00:00:00 2001
From: Garima Chandra <143211271+Garima-149@users.noreply.github.com>
Date: Thu, 25 Jul 2024 21:43:16 +0530
Subject: [PATCH] Resolving issue Adding Contact us section #522 (#526)

---
 src/App.jsx                  |  26 +++++
 src/pages/user/Conatctus.jsx | 138 +++++++++++++++++++++++
 src/pages/user/HomePage.jsx  | 206 +++++++++++++++++++++--------------
 src/pages/user/home.css      |  33 ++++++
 4 files changed, 323 insertions(+), 80 deletions(-)
 create mode 100644 src/pages/user/Conatctus.jsx
 create mode 100644 src/pages/user/home.css

diff --git a/src/App.jsx b/src/App.jsx
index 50b94051..4108d3da 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -24,8 +24,22 @@ import NgoProfile from './pages/ngo/ngoProfile';
 import { Donationfront } from './pages/user/Donation/Donationfront/Donationfront';
 import requestPermission from './utils/Functions/notifyService';
 import TeamPage from './pages/shared/team';
+
+import NotFound from './Components/shared/PageNotfound';
+
+
+import ContactPage from './pages/user/Conatctus';
+
+
+import Preloader from './Components/shared/preloader/preloader';
+import Feedback from './pages/user/ReportIncidentPages/FeedbackForm/Feedback';
+
+import RecoveredsPage from './pages/user/RecoveredsPage/RecoveredsPage';
+import HappyRecoveriesPage from './pages/user/RecoveredsPage/HappyRecoveriesPage';
+
 import NotFound from './Components/shared/PageNotfound'; // Import NotFound component
 
+
 function App() {
   useEffect(() => {
     // Request user for notification permission
@@ -59,7 +73,19 @@ function App() {
               <Route path="/ngoProfile" element={<NgoProfile />} /> {/* Renders the NgoProfile component */}
               <Route path="/donationfront" element={<Donationfront />} />
               <Route path="/team" element={<TeamPage />} />
+
+
+
+              <Route path="/contact" element={<ContactPage />} />
+
+              <Route path="/recovereds-page" element={<RecoveredsPage />} />
+              <Route path="/happy-recoveries" element={<HappyRecoveriesPage />} />
+
+
+
+
               <Route path="*" element={<NotFound />} /> {/* Renders the NotFound component for any unmatched route */}
+
             </Routes>
           </NgoProvider>
 
diff --git a/src/pages/user/Conatctus.jsx b/src/pages/user/Conatctus.jsx
new file mode 100644
index 00000000..393d052e
--- /dev/null
+++ b/src/pages/user/Conatctus.jsx
@@ -0,0 +1,138 @@
+import { Link, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { FaStar } from "react-icons/fa";
+import { PiPawPrintFill } from "react-icons/pi";
+import ReactiveButton from "reactive-button";
+import InputField from "../../Components/shared/InputField";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faPhone,
+  faMapMarkerAlt,
+  faEnvelope,
+} from "@fortawesome/free-solid-svg-icons";
+import "./home.css";
+
+const customButtonStyle = {
+  borderRadius: "20px",
+  background: "linear-gradient(to bottom, #b3d9ff, #3399ff)",
+  padding: "20px 40px",
+  fontSize: "12px",
+  fontWeight: "800",
+  boxShadow: "rgb(38, 57, 77) 0px 15px 30px -10px",
+  letterSpacing: "0.1rem",
+  width: "fit-content",
+};
+const stars = Array.from({ length: 45 /*no of stars*/ }, (_, i) => (
+    <FaStar
+      key={i}
+      className="absolute text-white animate-ping opacity-75"
+      style={{
+        top: `${Math.random() * 70}vh`,
+        left: `${Math.random() * 95}vw`,
+        fontSize: `${Math.random() * 1.5}rem` /*size*/,
+        animationDuration: `${Math.random() * 12 + 1.1}s` /*how long star should stay*/,
+      }}
+    />
+));
+  
+function ContactPage() {
+  const [name, setName] = useState("");
+  const [message, setMessage] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [state, setButtonState] = useState("idle");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setName("");
+    setEmail("");
+    setPhone("");
+    setButtonState("submitted");
+  };
+
+    return (
+        <div
+        style={{
+          overflowY: "scroll",
+          height: "100vh",
+          scrollbarWidth: "thin",
+          scrollbarColor: "#888 transparent",
+            }}
+            className="bg-custom-gradient"
+      >
+    <div
+      style={{
+        backgroundRepeat: "no-repeat",
+        
+        backgroundPosition: "right",
+        height: "50rem",
+        width: "50rem",
+        padding: "0rem",
+      }}
+      className="p-10 md:p-0 bg-transparent"
+    >
+      <div
+        className=" w-full flex justify-center items-center shadow-[0_2px_20px_rgba(0,0,0,0.5)] rounded-3xl md:rounded-none md:shadow-[0_0px_0px_rgba(0,0,0,0)]"
+        style={{
+          width: "87rem",
+          marginTop: "4rem",
+          marginLeft: "4rem",
+          marginRight: "4rem",
+            height: "39rem",
+            backgroundRepeat: "no-repeat",
+          backgroundPosition:"right",
+          backgroundImage: `url(https://blush.design/api/download?shareUri=f44zabd-9DwNxPMs&c=Hair_0%7Ec38741-0.2%7Effc943_Skin_0%7Eecafa3-0.2%7Ef6cbc3&w=800&h=800&fm=png)`,
+        }}
+      >
+        <div class="container"></div>
+        <form
+          className="w-[85%] md:w-full gap-[1rem] flex flex-col justify-center items-left py-20"
+          onSubmit={handleSubmit}
+          style={{ paddingBottom: "0rem", paddingTop: "0rem" }}
+        >
+          <h1 className="w-[20%] text-center z-[3] text-indigo-1000 font-semibold text-[2.5em] md:text-[2rem]">
+            Contact Us
+          </h1>
+          <input
+            className="input-with-icon placeholder-stone h-12 md:h-12  bg-opacity-45 w-80 sm:w-60 px-4 py-2 items-center outline-0 border-b-2 border-blue-800 text-black text-lg bg-white shadow-dashBoardCardImageShadow"
+            type="text"
+            placeholder="Full Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+          <input
+            className="input-with-icon placeholder-stone h-12 md:h-12 mt-5 bg-opacity-45 w-80 sm:w-60 px-4 py-2 items-center outline-0 border-b-2 border-blue-800 text-black text-lg bg-white shadow-dashBoardCardImageShadow"
+            type="email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <input
+            className="input-with-icon placeholder-stone h-12 md:h-12 mt-5 bg-opacity-45 w-80 sm:w-60 px-4 py-2 items-center outline-0 border-b-2 border-blue-800 text-black text-lg bg-white shadow-dashBoardCardImageShadow"
+            type="text"
+            placeholder="Message"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            required
+          />
+
+          <div
+            className="w-screen relative h-20 flex justify-left "
+            style={{ padding: "7px", marginBottom: "2rem" }}
+          >
+            <ReactiveButton
+              style={customButtonStyle}
+              buttonState={state}
+              idleText="Send Message"
+              type="submit"
+            />
+          </div>
+        </form>
+      </div>
+     </div>
+       </div>
+  );
+}
+export default ContactPage;
diff --git a/src/pages/user/HomePage.jsx b/src/pages/user/HomePage.jsx
index 06e42656..f88aa5ab 100644
--- a/src/pages/user/HomePage.jsx
+++ b/src/pages/user/HomePage.jsx
@@ -1,95 +1,141 @@
 import { Link, useNavigate } from "react-router-dom";
-import { useEffect } from "react";
-import { FaStar } from 'react-icons/fa';
+import { useEffect, useState } from "react";
+import { FaStar } from "react-icons/fa";
 import { PiPawPrintFill } from "react-icons/pi";
+import ReactiveButton from "reactive-button";
+import InputField from "../../Components/shared/InputField";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPhone, faMapMarkerAlt, faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import './home.css';
+import './Conatctus';
 
 const stars = Array.from({ length: 45 /*no of stars*/ }, (_, i) => (
-    <FaStar
-        key={i}
-        className="absolute text-white animate-ping opacity-75"
-        style={{
-            top: `${Math.random() * 70}vh`,
-            left: `${Math.random() * 95}vw`,
-            fontSize: `${Math.random() * 1.5}rem`, /*size*/
-            animationDuration: `${Math.random() * 12 + 1.1}s`, /*how long star should stay*/
-        }}
-    />
+  <FaStar
+    key={i}
+    className="absolute text-white animate-ping opacity-75"
+    style={{
+      top: `${Math.random() * 70}vh`,
+      left: `${Math.random() * 95}vw`,
+      fontSize: `${Math.random() * 1.5}rem` /*size*/,
+      animationDuration: `${Math.random() * 12 + 1.1}s` /*how long star should stay*/,
+    }}
+  />
 ));
 
+const customButtonStyle = {
+  borderRadius: "20px",
+  background: "linear-gradient(to bottom, #b3d9ff, #3399ff)",
+  padding: "20px 40px",
+  fontSize: "12px",
+  fontWeight: "800",
+  boxShadow: "rgb(38, 57, 77) 0px 15px 30px -10px",
+  letterSpacing: "0.1rem",
+  width: "fit-content",
+};
+
 function LandingPage() {
-    const navigate = useNavigate();
-    const csrftoken = localStorage.getItem('csrftoken');
-    const userType = localStorage.getItem('userType');
-    
-    useEffect(() => {
-        const img = new Image();
-        img.src = "./images/paws.webp";
-        document.body.style.overflow = 'hidden';
-        document.body.style.touchAction = 'manipulation';
-    
-        return () => {
-          document.body.style.overflow = '';
-          document.body.style.touchAction = '';
-        };
-      }, []);
-    
-    useEffect(() => {
-        if (csrftoken && userType === "ngo") {
-          navigate('/stats');
-        }
-      }, [csrftoken, userType, navigate]);
+    const [name, setName] = useState("");
+    const [message, setMessage] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [state, setButtonState] = useState("idle");
+
+  const navigate = useNavigate();
+  const csrftoken = localStorage.getItem("csrftoken");
+  const userType = localStorage.getItem("userType");
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = "./images/paws.webp";
+    document.body.style.overflow = "hidden";
+    document.body.style.touchAction = "manipulation";
+
+    return () => {
+      document.body.style.overflow = "";
+      document.body.style.touchAction = "";
+    };
+  }, []);
 
-    return (
-        <div style={{
-            overflowY: 'scroll',
-            height: '100vh',
-            scrollbarWidth: 'thin',
-            scrollbarColor: '#888 transparent',
-        }}>
-            <div>
-    <div className="z-[-2] h-[120vh] bg-custom-gradient w-full flex flex-col items-center font-VarelaRound">
-        {stars}
-            <div className="flex flex-col items-center justify-between h-[70vh] gap-2.5">
-                <div className="flex flex-col items-center gap-2 max-h-[650px] -mt-[40px]">
-                    <div className="mt-[50px] relative">
-                        <div className="absolute top-3 right-[-2rem] flex flex-row items-start">
-                            <PiPawPrintFill className="text-white text-[2.2rem] transform rotate-45 " />
-                            <PiPawPrintFill className="text-white text-[2rem] transform -rotate-12 mt-4" />
-                        </div>
-                        <h2 style={{ textShadow: '2px 4px 6px black' }} className=" text-[6rem] text-white drop-shadow-3xl font-extrabold font-VarelaRound tracking-wider`">Paws</h2>
-                        <div className="absolute bottom-0 left-[-2rem] flex flex-row items-start">
-                            <PiPawPrintFill className="text-white text-[2.2rem] transform rotate-45 " />
-                            <PiPawPrintFill className="text-white text-[2rem] transform -rotate-12 mt-4 " />
-                        </div>
-                    </div>
-                    <img
+  useEffect(() => {
+    if (csrftoken && userType === "ngo") {
+      navigate("/stats");
+    }
+  }, [csrftoken, userType, navigate]);
 
-                        className="mx-auto my-auto h-72 backdrop-blur"
-                        src="./images/paws.webp"
-                        alt="Paws"
-                    />
-                    <p className="text-[24px] drop-shadow-3xl w-full px-4 text-center font-semibold tracking-wider h-md:hidden">Pause to save Paws</p>
-                <div className="text-[18px] text-center max-width-[95%] pt-3 font-baijam drop- tracking-wider">
-                    <p>
-                        "Save lives - Click below to report 
-                    </p>
-                    <p>
-                        injured animals to authorities."
-                    </p>
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setName("");
+    setEmail("");
+    setPhone("");
+    setButtonState("submitted");
+  };
+
+  return (
+    <div
+      style={{
+        overflowY: "scroll",
+        height: "100vh",
+        scrollbarWidth: "thin",
+        scrollbarColor: "#888 transparent",
+      }}
+    >
+      <div>
+        <div className="z-[-2] h-[120vh] bg-custom-gradient w-full flex flex-col items-center font-VarelaRound">
+          {stars}
+          <div className="flex flex-col items-center justify-between h-[70vh] gap-2.5">
+            <div className="flex flex-col items-center gap-2 max-h-[650px] -mt-[40px]">
+              <div className="mt-[50px] relative">
+                <div className="absolute top-3 right-[-2rem] flex flex-row items-start">
+                  <PiPawPrintFill className="text-white text-[2.2rem] transform rotate-45 " />
+                  <PiPawPrintFill className="text-white text-[2rem] transform -rotate-12 mt-4" />
+                </div>
+                <h2
+                  style={{ textShadow: "2px 4px 6px black" }}
+                  className=" text-[6rem] text-white drop-shadow-3xl font-extrabold font-VarelaRound tracking-wider"
+                >
+                  Paws
+                </h2>
+                <div className="absolute bottom-0 left-[-2rem] flex flex-row items-start">
+                  <PiPawPrintFill className="text-white text-[2.2rem] transform rotate-45 " />
+                  <PiPawPrintFill className="text-white text-[2rem] transform -rotate-12 mt-4 " />
                 </div>
-                {/* BUTTON */}
-            <div className="">
+              </div>
+              <img
+                className="mx-auto my-auto h-72 backdrop-blur"
+                src="./images/paws.webp"
+                alt="Paws"
+              />
+              <p className="text-[24px] drop-shadow-3xl w-full px-4 text-center font-semibold tracking-wider h-md:hidden">
+                Pause to save Paws
+              </p>
+              <div className="text-[18px] text-center max-width-[95%] pt-3 font-baijam tracking-wider">
+                <p>"Save lives - Click below to report</p>
+                <p>injured animals to authorities."</p>
+              </div>
+              {/* BUTTON */}
+              <div className="">
                 <button
-                    type='submit'
-                    className="bg-gradient-to-r from-[#f27b79] via-[#e6466c] to-[#f3285b] text-white focus:outline-none rounded-[40px] shadow-buttonShadow py-4 font-bold tracking-widest text-[2rem] px-10">
-                    <Link to="/report-incident">Report</Link>
+                  type="submit"
+                 className="bg-gradient-to-r from-[#f27b79] via-[#e6466c] to-[#f3285b] text-white focus:outline-none rounded-[40px] shadow-buttonShadow py-4 font-bold tracking-widest text-[2rem] px-10"
+                 style={{ marginBottom: "3rem" }}
+                >
+                  <Link to="/report-incident">Report</Link>
                 </button>
-            </div>
-            </div>
-            </div>
-            </div>
+                                       
+                </div>
+                <button
+                  type="submit"
+                 className="bg-transparent text-white focus:outline-none rounded-[40px] shadow-buttonShadow py-4 font-bold tracking-widest text-[2rem] px-10"
+                 style={{ marginBottom: "3rem" }}
+                >
+                  <Link to="/contact">Contact Us</Link>
+                </button>           
+             </div> 
+         </div>
         </div>
+      </div>
     </div>
-);}
+  );
+}
 
-export default LandingPage;
\ No newline at end of file
+export default LandingPage;
diff --git a/src/pages/user/home.css b/src/pages/user/home.css
new file mode 100644
index 00000000..20fa86ef
--- /dev/null
+++ b/src/pages/user/home.css
@@ -0,0 +1,33 @@
+
+  
+  .input-with-icon {
+    padding-left: 30px; /* Adjust based on icon size and padding */
+    background-color: azure;
+    background-repeat: no-repeat;
+    background-position:left; /* Adjust as needed */
+    border-radius: 0.5rem;
+    
+  }
+  
+  .input-with-icon::placeholder {
+    color: #999;
+  }
+  
+ 
+  .container {
+    background-color: rgb(4, 4, 83);
+    color: white;
+    padding: 20px;
+    margin-left: 0px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-right: 0px;
+    border-radius: 0px;
+    position: absolute;
+    top: 60px;
+    left: 64px;
+    width: 87rem;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    
+
+ } 
\ No newline at end of file