When: She Knows

What Exactly Is Psychological Abuse ?

Abuse means someone uses words or actions to make you feel bad about yourself all the time. They might say mean things or make you scared, even if you didn't do anything wrong. It's not okay for anyone to treat you like that. It can make you feel really sad and scared, but you're not alone. There are people who can help you feel better and safer. Remember, it's not your fault, and you deserve to be treated with kindness and respect

What Exactly Is Psychological Abuse ?

175 |

176 |

177 | Become A Volunteer 178 |

179 |

180 |

181 |

182 |

183 | Name 184 |

185 |

186 | setName(e.target.value)} 188 | placeholder="Enter your name " 189 | value={name} 190 | className="peer h-full w-full rounded-md border border-black border-opacity-20 focus:border-black focus:border-opacity-100 bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50" 191 | /> 192 |

193 |

194 | Phone Number 195 |

196 |

197 | setPhoneNumber(e.target.value)} 199 | value={phoneNumber} 200 | placeholder="Entere your phone number" 201 | className="peer h-full w-full rounded-md border border-black border-opacity-20 focus:border-black focus:border-opacity-100 bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50" 202 | /> 203 |

204 |

205 | Location 206 |

207 |

208 |

setLocation(e.target.value)}
211 |                   placeholder="Enter your location"
212 |                   className="peer h-full w-full rounded-md border border-black border-opacity-20 focus:border-black focus:border-opacity-100 bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
213 |                   rows="4"
214 |                 />
215 |               </div>
216 |               
217 |             </div>
218 | 
219 |             <button
220 |               onClick={handleVolunteerButtonClick}
221 |               className="mt-6 block w-full  select-none rounded-lg bg-[#DED0B6] py-3 px-6 text-center align-middle font-sans text-xs font-semibold uppercase text-black shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
222 |               type="button"
223 |             >
224 |               Join as volunteer
225 |             </button>
226 |           </form>
227 |         </div>
228 |       </Modal>
229 |     </>
230 |   );
231 | };
232 | 
233 | export default StoryPageCard;
234 |

--------------------------------------------------------------------------------
/src/components/cards/StoryPage.jsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import Modal from "react-modal";
  3 | import { FaArrowRight } from "react-icons/fa";
  4 | import { IoClose } from "react-icons/io5";
  5 | import { BASE_URL, local } from "../../constents";
  6 | import axios from "axios";
  7 | import { toast } from "react-toastify";
  8 | 
  9 | const StoryPage = () => {
 10 |   const [isModalOpen, setIsModalOpen] = useState(false);
 11 |   const [name, setName] = useState("");
 12 |   const [title, setTitle] = useState("");
 13 |   const [description, setDescription] = useState("");
 14 |   const [image, setImage] = useState(null);
 15 |   const [stories, setStories] = useState([]);
 16 |   const [count, setCount] = useState(3);
 17 |   useEffect(() => {
 18 |     axios
 19 |       .get(BASE_URL + "stories")
 20 |       .then((response) => {
 21 |         console.log(response.data.story);
 22 |         setStories(response.data.story);
 23 |       })
 24 |       .catch((error) => toast.error(error));
 25 |   }, []);
 26 | 
 27 |   function counterIncrease() {
 28 |     var i = 0;
 29 |     while (i < 3) {
 30 |       if (count <= stories.length) {
 31 |         setCount((count) => count + 1);
 32 |         i = i + 1;
 33 |       } else {
 34 |         break;
 35 |       }
 36 |     }
 37 |   }
 38 | 
 39 |   const openModal = () => {
 40 |     setIsModalOpen(true);
 41 |   };
 42 | 
 43 |   const closeModal = () => {
 44 |     setIsModalOpen(false);
 45 |   };
 46 | 
 47 |   const handleImageChange = (e) => {
 48 |     const file = e.target.files[0];
 49 |     if (file) {
 50 |       setImage(file);
 51 |   
 52 |       const reader = new FileReader();
 53 |       reader.onload = (e) => {
 54 |         const imageViewer = document.querySelector(".image-viewer");
 55 |         if (imageViewer) {
 56 |           imageViewer.style.backgroundImage = `url(${e.target.result})`; // Corrected
 57 |           imageViewer.style.display = "block";
 58 |         }
 59 |       };
 60 |       reader.readAsDataURL(file);
 61 |     }
 62 |   };
 63 |   
 64 |   const handleShare = () => {
 65 |     const formData = new FormData();
 66 |     formData.append("image", image);
 67 |     formData.append("name", name);
 68 |     formData.append("title", title);
 69 |     formData.append("description", description);
 70 |     axios
 71 |       .post(BASE_URL + "add-story", formData)
 72 |       .then((response) => {
 73 |         console.log(response.data);
 74 |         console.log("Request successful:", response.data);
 75 |       })
 76 |       .catch((error) => {
 77 |         console.error("Error:", error);
 78 |       });
 79 | 
 80 |     setName("");
 81 |     setTitle("");
 82 |     setDescription("");
 83 |     setImage(null);
 84 |     closeModal();
 85 |   };
 86 | 
 87 |   return (
 88 |     <>
 89 |       {stories.map((prop, index) => {
 90 |         if (index % 2 == 0 && index < count) {
 91 |           return (
 92 |             <div className=" px-auto my-8 ">
 93 |               <div
 94 |                 className="  rounded-3xl  md:mx-16 lg:mx-24 mx-8 flex max-lg:flex-col flex-row justify-center items-center p-10"
 95 |                 style={{ backgroundColor: "#B2B377" }}
 96 |               >
 97 |                 <img
 98 |                   className="ml-5 object-cover h-72 lg:hidden w-96 rounded-3xl "
 99 |                   src={local + prop.image}
100 |                   alt=""
101 |                 />
102 |                 <div className="font-serif max-lg:mt-10 ">
103 |                   {prop.description}
104 |                   <br /> <br />
105 |                   <b>{prop.name}</b>
106 |                   <br />
107 |                   {prop.title}
108 |                 </div>
109 |                 <img
110 |                   className="ml-5 object-cover h-72 max-lg:hidden w-96 rounded-3xl "
111 |                   src={local + prop.image}
112 |                   alt=""
113 |                 />
114 |               </div>
115 |             </div>
116 |           );
117 |         } else if (index % 2 == 1 && index < count) {
118 |           return (
119 |             <div className=" px-auto my-8">
120 |               <div
121 |                 className=" rounded-3xl  md:mx-16 lg:mx-24 mx-8 flex max-lg:flex-col flex-row justify-center items-center p-10"
122 |                 style={{ backgroundColor: "#B2B377" }}
123 |               >
124 |                 <img
125 |                   className="mr-5 object-cover  h-72 w-96 rounded-3xl"
126 |                   src={local + prop.image}
127 |                   alt=""
128 |                 />
129 |                 <div className="font-serif max-lg:mt-10">
130 |                   {prop.description}
131 |                   <br /> <br />
132 |                   <b>{prop.name}</b>
133 |                   <br />
134 |                   {prop.title}
135 |                 </div>
136 |               </div>
137 |             </div>
138 |           );
139 |         }
140 |       })}
141 | 
142 |       <div
143 |         className="flex justify-center items-center mt-2"
144 |         onClick={() => counterIncrease()}
145 |       >
146 |         <button className=" flex border border-gray-500 p-3 m-3  rounded-lg ">
147 |           Load More
148 |           <span className="pl-2 mt-1">
149 |             <FaArrowRight />
150 |           </span>
151 |         </button>
152 |       </div>
153 | 
154 |       <div className="flex flex-col justify-center font-serif items-center mt-3 p-8 lg:h-[500px] bg-[#F2F1EB]">
155 |         <div className="mx-8 text-center">
156 |           <span className="text-4xl max-md:text-3xl font-extrabold">
157 |             Add Stories
158 |           </span>
159 |         </div>
160 |         <div className="md:mt-10 mt-5 mx-8 text-center">
161 |           <span>
162 |             Dive into the powerful narratives on our "Breaking Chains: Women's
163 |             Stories of Resilience" page, where courage takes center stage. These
164 |             are more than just stories—they're beacons of strength, showcasing
165 |             women who've faced adversity and emerged victorious. In this
166 |             collection, find inspiration, support, and a testament to the
167 |             unyielding spirit that triumphs over the darkest moments. Join us as
168 |             we celebrate the indomitable resilience of these women, proving that
169 |             even in the face of abuse, the human spirit can break free and soar.
170 |           </span>
171 |         </div>
172 | 
173 |         <div
174 |           onClick={openModal}
175 |           className="flex justify-center items-center  mt-5 lg:mt-12"
176 |         >
177 |           <button className=" flex border border-gray-500 p-3 m-3 font-serif  rounded-lg ">
178 |             Add Stories
179 |           </button>
180 |         </div>
181 |       </div>
182 | 
183 |       <Modal
184 |         isOpen={isModalOpen}
185 |         onRequestClose={closeModal}
186 |         className="Modal"
187 |         overlayClassName="Overlay"
188 |         style={{
189 |           overlay: {
190 |             position: "fixed",
191 |             top: 0,
192 |             left: 0,
193 |             right: 0,
194 |             bottom: 0,
195 |             backgroundColor: "rgba(0, 0, 0, 0.5)",
196 |             zIndex: 999,
197 |           },
198 |           content: {
199 |             position: "absolute",
200 |             top: "50%",
201 |             left: "50%",
202 |             transform: "translate(-50%, -50%)",
203 |             backgroundColor: "white",
204 |             padding: "20px",
205 |             borderRadius: "8px",
206 |             maxWidth: "100vw",
207 |             maxHeight: "90vh",
208 |             overflow: "auto",
209 |             zIndex: 1000,
210 |           },
211 |         }}
212 |       >
213 |         <div className="flex justify-end">
214 |           <button onClick={closeModal}>
215 |             <IoClose />
216 |           </button>
217 |         </div>
218 | 
219 |         <div className="modal-content ">
220 |           <div className="flex justify-center items-center">
221 |             <h4 className=" font-mono  text-2xl antialiased font-extrabold leading-snug tracking-normal text-blue-gray-900">
222 |               Share your Story
223 |             </h4>
224 |           </div>
225 |           <form className="max-w-screen-lg mt-5 mb-2 w-80 sm:w-96">
226 |             <div className="flex flex-col gap-4 mb-1">
227 |               <h6 className="block text-sm -mb-3 font-sans  antialiased font-semibold leading-relaxed tracking-normal text-blue-gray-900">
228 |                 Name
229 |               </h6>
230 |               <div className="relative h-11 w-full min-w-[200px]">
231 |                 <input
232 |                   value={name}
233 |                   onChange={(e) => setName(e.target.value)}
234 |                   placeholder="Enter your name "
235 |                   className="peer h-full w-full rounded-md border border-black border-opacity-20 focus:border-black focus:border-opacity-100 bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
236 |                 />
237 |               </div>
238 |               <h6 className="block text-sm -mb-3 font-sans  antialiased font-semibold leading-relaxed tracking-normal text-blue-gray-900">
239 |                 Title
240 |               </h6>
241 |               <div className="relative h-11 w-full min-w-[200px]">
242 |                 <input
243 |                   value={title}
244 |                   onChange={(e) => setTitle(e.target.value)}
245 |                   placeholder="Entere your Title"
246 |                   className="peer h-full w-full rounded-md border border-black border-opacity-20 focus:border-black focus:border-opacity-100 bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
247 |                 />
248 |               </div>
249 |               <h6 className="block -mb-3 font-sans text-sm antialiased font-semibold leading-relaxed tracking-normal text-blue-gray-900">
250 |                 Description
251 |               </h6>
252 |               <div className="relative h-auto w-full min-w-[200px]">
253 |                 <textarea
254 |                   value={description}
255 |                   onChange={(e) => setDescription(e.target.value)}
256 |                   placeholder="Enter your story"
257 |                   className="peer h-full w-full rounded-md border border-black border-opacity-20 focus:border-black focus:border-opacity-100 bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
258 |                   rows="4"
259 |                 />
260 |               </div>
261 | 
262 |               <h6 className="block text-sm -mb-2 font-sans antialiased font-semibold leading-relaxed tracking-normal text-blue-gray-900">
263 |                 Upload Image
264 |               </h6>
265 |               <div className="relative w-full min-w-[200px]">
266 |                 <input
267 |                   type="file"
268 |                   onChange={handleImageChange}
269 |                   className="file:bg-gradient-to-b mb-3  file:from-gray-400 file:to-gray-400 file:p-2 file:text-white  file:border-none file:rounded-xl  peer h-full w-full rounded-md border border-black border-opacity-20 focus:border-black focus:border-opacity-100 bg-transparent px-2 py-2 font-sans text-xs font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
270 |                 />
271 |               </div>
272 |               {image ? (
273 |                 <div className="image-viewer h-[130px] w-[200px] mx-auto bg-cover bg-center"></div>
274 |               ) : (
275 |                 ""
276 |               )}
277 |             </div>
278 | 
279 |             <button
280 |               onClick={handleShare}
281 |               className="mt-6 block w-full  select-none rounded-lg bg-[#DED0B6] py-3 px-6 text-center align-middle font-sans text-xs font-semibold uppercase text-black shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
282 |               type="button"
283 |             >
284 |               Share
285 |             </button>
286 |           </form>
287 |         </div>
288 |       </Modal>
289 |     </>
290 |   );
291 | };
292 | 
293 | export default StoryPage;

--------------------------------------------------------------------------------
/src/components/cards/landingcard.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Card = ({prop}) => {
 4 |   return (
 5 |     <div className="max-sm:w-[70%] w-72 bg-gray-50 p-3 h-96 rounded-md overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-110">
 6 |       <img src={prop.img} alt="Placeholder" className="w-full h-56 object-cover" />
 7 |       <div className="px-6 py-4 flex flex-col items-center">
 8 |         <div className="font-bold text-xl font-mono mb-2">{prop.header}</div>
 9 |         <p className="text-gray-700 text-xs">{prop.content}</p>
10 |       </div>
11 |     </div>
12 |   );
13 | };
14 | 
15 | export default Card;
16 |

--------------------------------------------------------------------------------
/src/components/cards/storycard.jsx:
--------------------------------------------------------------------------------
 1 | import { useNavigate } from "react-router-dom";
 2 | import { BASE_URL, local } from "../../constents";
 3 | 
 4 | 
 5 | const StoryCard = ({prop}) => {
 6 |     const navigator=useNavigate()
 7 |     console.log(local+prop.image)
 8 |     return (
 9 |         <div onClick={()=>navigator('/stories')} className=" max-sm:w-[70%] w-72 p-3 h-96 rounded-md overflow-hidden transform transition-transform duration-300 hover:scale-105">
10 |             <img src={local+prop.image} alt="Placeholder" className="w-full h-56 object-cover" />
11 |             <div className="px-6 py-4 flex flex-col items-center">
12 |                 <div className="font-bold text-lg font-mono mb-2">{prop.title}</div>
13 |                 <p className="text-gray-700 text-xs">{prop.description}</p>
14 |                 <p>read more </p>
15 |             </div>
16 |         </div>
17 |     );
18 | }
19 | 
20 | export default StoryCard

--------------------------------------------------------------------------------
/src/components/landing/banner.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | const Banner = () => {
 3 |     return (
 4 |         <div className="relative">
 5 |             <div className="bg-cover bg-center h-screen" style={{ backgroundImage: `url("/banner.jpeg")` }}>
 6 |                 <div className=" inset-0 flex ">
 7 | 
 8 |                     <div className="max-w-2xl mx-4 sm:py-14 max-md:mt-32 md:mt-48 max-md:p-5 p-10 text-black" data-aos="zoom-in">
 9 |                         <h1 className="md:text-6xl text-5xl  md:mt-0  max-[400px]:text-3xl font-serif font-bold">From Hurt to Healing</h1>
10 |                         <p className="mt-4 font-sans text-base md:text-lg  max-[400px]:text-sm">Welcome to "From Hurt to Healing," a platform dedicated to supporting women who have experienced psychological abuse within their households. We understand the pain and trauma that can stem from such experiences, and we're here to provide a safe space for healing and empowerment.</p>
11 | 
12 |                     </div>
13 |                 </div>
14 |             </div>
15 |         </div>
16 |     );
17 | } 
18 |     
19 | export default Banner;
20 |

--------------------------------------------------------------------------------
/src/components/message/input.css:
--------------------------------------------------------------------------------
  1 | .messageBox {
  2 |     width: fit-content;
  3 |     height: 40px;
  4 |     display: flex;
  5 |     align-items: center;
  6 |     justify-content: center;
  7 |     background-color: #2d2d2d;
  8 |     padding: 0 15px;
  9 |     border-radius: 10px;
 10 |     border: 1px solid rgb(63, 63, 63);
 11 |   }
 12 |   .messageBox:focus-within {
 13 |     border: 1px solid rgb(110, 110, 110);
 14 |   }
 15 |   .fileUploadWrapper {
 16 |     width: fit-content;
 17 |     height: 100%;
 18 |     display: flex;
 19 |     align-items: center;
 20 |     justify-content: center;
 21 |     font-family: Arial, Helvetica, sans-serif;
 22 |   }
 23 |   
 24 |   #file {
 25 |     display: none;
 26 |   }
 27 |   .fileUploadWrapper label {
 28 |     cursor: pointer;
 29 |     width: fit-content;
 30 |     height: fit-content;
 31 |     display: flex;
 32 |     align-items: center;
 33 |     justify-content: center;
 34 |     position: relative;
 35 |   }
 36 |   .fileUploadWrapper label svg {
 37 |     height: 18px;
 38 |   }
 39 |   .fileUploadWrapper label svg path {
 40 |     transition: all 0.3s;
 41 |   }
 42 |   .fileUploadWrapper label svg circle {
 43 |     transition: all 0.3s;
 44 |   }
 45 |   .fileUploadWrapper label:hover svg path {
 46 |     stroke: #fff;
 47 |   }
 48 |   .fileUploadWrapper label:hover svg circle {
 49 |     stroke: #fff;
 50 |     fill: #3c3c3c;
 51 |   }
 52 |   .fileUploadWrapper label:hover .tooltip {
 53 |     display: block;
 54 |     opacity: 1;
 55 |   }
 56 |   .tooltip {
 57 |     position: absolute;
 58 |     top: -40px;
 59 |     display: none;
 60 |     opacity: 0;
 61 |     color: white;
 62 |     font-size: 10px;
 63 |     text-wrap: nowrap;
 64 |     background-color: #000;
 65 |     padding: 6px 10px;
 66 |     border: 1px solid #3c3c3c;
 67 |     border-radius: 5px;
 68 |     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.596);
 69 |     transition: all 0.3s;
 70 |   }
 71 |   #messageInput {
 72 |     width: 90%;
 73 |     height: 100%;
 74 |     background-color: transparent;
 75 |     outline: none;
 76 |     border: none;
 77 |     padding-left: 10px;
 78 |     color: white;
 79 |   }
 80 |   #messageInput:focus ~ #sendButton svg path,
 81 |   #messageInput:valid ~ #sendButton svg path {
 82 |     fill: #3c3c3c;
 83 |     stroke: white;
 84 |   }
 85 |   
 86 |   #sendButton {
 87 |     width: fit-content;
 88 |     height: 100%;
 89 |     background-color: transparent;
 90 |     outline: none;
 91 |     border: none;
 92 |     display: flex;
 93 |     align-items: center;
 94 |     justify-content: center;
 95 |     cursor: pointer;
 96 |     transition: all 0.3s;
 97 |   }
 98 |   #sendButton svg {
 99 |     height: 18px;
100 |     transition: all 0.3s;
101 |   }
102 |   #sendButton svg path {
103 |     transition: all 0.3s;
104 |   }
105 |   #sendButton:hover svg path {
106 |     fill: #3c3c3c;
107 |     stroke: white;
108 |   }
109 |

--------------------------------------------------------------------------------
/src/components/message/inputmessage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './input.css'
 3 | import axios from 'axios';
 4 | import { BASE_URL } from '../../constents';
 5 | 
 6 | const InputMessage = ({prop}) => {
 7 |     
 8 |     const {query,setQuery,setQuestion,setResult}=prop;
 9 | 
10 | 
11 |     async function submitMessage() {
12 |         const data = {
13 |             userPrompt: query, 
14 |         };
15 |     
16 |         await axios.post(BASE_URL+'chatbot', data)
17 |             .then((response) => {
18 |                 console.log(response.data.response);
19 |                 setResult(response.data.response);
20 |             })
21 |             .catch((error) => {
22 |                 console.log(error);
23 |                 setResult("Give a valid input");
24 |             });
25 |     }
26 |     
27 |   return (
28 |     <div className="messageBox w-full flex justify-between">
29 |       
30 |       <input className='' onChange={(e)=>setQuery(e.target.value)} value={query}  required="" placeholder="Message..." type="text" id="messageInput" />
31 |       <button onClick={()=>{setQuestion(query)
32 |             submitMessage()}} id="sendButton">
33 |         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 664 663">
34 |           <path
35 |             fill="none"
36 |             d="M646.293 331.888L17.7538 17.6187L155.245 331.888M646.293 331.888L17.753 646.157L155.245 331.888M646.293 331.888L318.735 330.228L155.245 331.888"
37 |           ></path>
38 |           <path
39 |             strokeLinejoin="round"
40 |             strokeLinecap="round"
41 |             strokeWidth="33.67"
42 |             stroke="#6c6c6c"
43 |             d="M646.293 331.888L17.7538 17.6187L155.245 331.888M646.293 331.888L17.753 646.157L155.245 331.888M646.293 331.888L318.735 330.228L155.245 331.888"
44 |           ></path>
45 |         </svg>
46 |       </button>
47 |     </div>
48 |   );
49 | };
50 | 
51 | export default InputMessage;
52 |

--------------------------------------------------------------------------------
/src/components/message/message.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { AiFillCloseSquare } from "react-icons/ai";
 3 | import InputMessage from "./inputmessage";
 4 | import { BiSolidMessageRoundedDetail } from "react-icons/bi";
 5 | 
 6 | 
 7 | const Message = ({prop}) => {
 8 |     const {openMessage,setOpenMessage}=prop
 9 |     const [query,setQuery]=useState('')
10 |     const [result,setResult]=useState('')
11 |     const [question,setQuestion]=useState('')
12 | 
13 |     return(
14 |         <>
15 |             {(!openMessage)&&<div onClick={()=>setOpenMessage(true)} className="fixed bg-black rounded-3xl z-20 h-[50px] w-[50px] sm:h-[70px] sm:w-[70px] bottom-28 sm:p-4 p-2  right-5"><BiSolidMessageRoundedDetail  color="white" size={38}/></div>}
16 |             {(openMessage)&&<div className="fixed bg-gray-800 rounded-3xl z-20 w-[250px] h-[400px] sm:h-[480px] sm:w-[400px] bottom-28 right-2">
17 |                 <div onClick={()=>setOpenMessage(false)} className=" p-3 text-white w-full flex justify-between font-black mt-2"><span className="text-xs font-bold">Enter What You Need To Know!!<br/></span><AiFillCloseSquare className="cursor-pointer" size={28} /></div>
18 |                 <div className="w-full static p-2 px-4 h-[68%] sm:h-[73%] rounded-md overflow-y-auto">
19 |                     {(question)&&<div className="bg-slate-300 break-words p-2 rounded-md h-auto overflow-wrap-normal"><span className="text-xs font-bold">Question:<br/></span>{question}</div>}
20 |                     {(result)&&<div className="bg-gray-500 mt-1 p-2 break-words rounded-md h-auto overflow-wrap-normal"><span className="text-xs font-bold">Answer:<br/></span>{result}</div>}
21 |                     
22 |                 </div>
23 |                <div className="absolute bottom-2 p-4 w-full">
24 |                     <InputMessage prop={{query,setQuery,setQuestion,setResult}}/>
25 |                </div>
26 |     
27 |             </div>}
28 |         </>
29 |     );
30 | }
31 | 
32 | export default Message

--------------------------------------------------------------------------------
/src/components/navbar/navbar.jsx:
--------------------------------------------------------------------------------
  1 | import { useContext, useEffect, useState } from "react";
  2 | import { MyContext } from "../../App";
  3 | import { Link, useNavigate } from "react-router-dom";
  4 | import { useDispatch, useSelector } from "react-redux";
  5 | import { deleteUserData } from "../../features/userSlice";
  6 | 
  7 | 
  8 | const Navbar = () => {
  9 |     const [scrolling, setScrolling] = useState(false);
 10 |     const {open,setOpen}=useContext(MyContext)
 11 |     const navigator=useNavigate()
 12 |     const dispatch = useDispatch();
 13 |     const { user } = useSelector((state) => state.user);
 14 |     console.log('user',user)
 15 |     
 16 |     useEffect(() => {
 17 |         const handleScroll = () => {
 18 |             if (window.scrollY > 0) {
 19 |                 setScrolling(true);
 20 |             } else {
 21 |                 setScrolling(false);
 22 |             }
 23 |         };
 24 | 
 25 |         window.addEventListener("scroll", handleScroll);
 26 | 
 27 |         return () => {
 28 |             window.removeEventListener("scroll", handleScroll);
 29 |         };
 30 |     }, []);
 31 | 
 32 |     return (
 33 |         <>
 34 |             <div
 35 |                 className="h-24 flex  md:px-7 px-2 w-full justify-between fixed z-10 items-center"
 36 |                 style={{
 37 |                     backgroundColor: scrolling ? "white" : "transparent",
 38 |                     transition: "background-color 0.6s ease-out",
 39 |                 }}
 40 |               >
 41 |                 <div>
 42 |                     <div className="logo flex align-middle">
 43 |                         <span onClick={()=>navigator('/')} className="">
 44 |                             <img
 45 |                                 className="h-24 p-2  max-sm:hidden  "
 46 |                                 src="/Desktop.png"
 47 |                                 alt=""
 48 |                             />
 49 |                             <img
 50 |                                 className="h-16 p-2  sm:hidden   "
 51 |                                 src="/Desktop.png"
 52 |                                 alt=""
 53 |                             />
 54 |                         </span>
 55 |                     </div>
 56 |                 </div>
 57 | 
 58 |                 <div className="center-portion flex  max-lg:hidden justify-center pe-0">
 59 |                     <span
 60 |                         onClick={()=>navigator('/')}
 61 |                         className="text-black mx-4  font-serif font-bold hover:text-gray-600 cursor-pointer"
 62 |                     >
 63 |                         Home
 64 |                     </span>
 65 |                     <span
 66 |                         onClick={()=>navigator('/abuse')}
 67 |                         className="text-black mx-4  font-serif font-bold hover:text-gray-600 cursor-pointer"
 68 |                     >
 69 |                         Identify abuse
 70 |                     </span>
 71 |                     <span
 72 |                         onClick={()=>navigator("/community")}
 73 |                         className="text-black mx-4  font-serif font-bold hover:text-gray-600 cursor-pointer"
 74 |                     >
 75 |                         Community
 76 |                     </span>
 77 |                     <span
 78 |                         onClick={()=>navigator("/stories")}
 79 |                         className="text-black mx-4  font-serif font-bold hover:text-gray-600 cursor-pointer"
 80 |                     >
 81 |                         Stories
 82 |                     </span>
 83 |                     <span
 84 |                         onClick={()=>navigator("/help")}
 85 |                         className="text-black mx-4 font-serif font-bold  hover:text-gray-600 cursor-pointer"
 86 |                     >
 87 |                         Help
 88 |                     </span>
 89 |                         {(user)&&(<span
 90 |                         onClick={()=>navigator("/consult")}
 91 |                         className="text-black mx-4 font-serif font-bold  hover:text-gray-600 cursor-pointer"
 92 |                     >
 93 |                         Consult
 94 |                     </span>)
 95 |                         }
 96 |                     
 97 | 
 98 |                 </div>
 99 | 
100 |         {(!user)?(<div className="right-portion me-6 max-lg:hidden">
101 |                 <div
102 |                     className="relative inline-block px-4 py-2 font-medium group"
103 |                 >
104 |                     <span className="absolute inset-0 w-full h-full transition duration-200 ease-out transform translate-x-1 translate-y-1 bg-transparent group-hover:-translate-x-0 group-hover:-translate-y-0"></span>
105 |                     <span className="absolute rounded-xl  inset-0 w-full h-full bg-transparent border-2 border-black group-hover:bg-black"></span>
106 |                     <Link to='/login' className="relative p-2  text-black group-hover:text-white">
107 |                         Login{" "}
108 |                     </Link>
109 |                 </div>
110 |             </div>):(<div onClick={()=>{dispatch(deleteUserData())}} className="right-portion me-6 max-lg:hidden">
111 |                 <div
112 |                     className="relative inline-block px-4 py-2 font-medium group"
113 |                 >
114 |                     <span className="absolute inset-0 w-full h-full transition duration-200 ease-out transform translate-x-1 translate-y-1 bg-transparent group-hover:-translate-x-0 group-hover:-translate-y-0"></span>
115 |                     <span className="absolute rounded-xl  inset-0 w-full h-full bg-black border-2 border-black group-hover:bg-black"></span>
116 |                     <Link to='/login' className="relative p-2  text-white group-hover:text-white">
117 |                         Logout{" "}
118 |                     </Link>
119 |                 </div>
120 |             </div>)}
121 |                 {!open && (
122 |                     <div
123 |                         onClick={() => setOpen(true)}
124 |                         className="center-portion flex lg:hidden justify-center pe-0"
125 |                     >
126 |                         <svg
127 |                             xmlns="http://www.w3.org/2000/svg"
128 |                             x="0px"
129 |                             y="0px"
130 |                             width="30"
131 |                             height="50"
132 |                             viewBox="0 0 24 24"
133 |                         >
134 |                             <path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path>
135 |                         </svg>
136 |                     </div>
137 |                 )}
138 |             </div>
139 |         </>
140 |     );
141 | };
142 | 
143 | export default Navbar;
144 |

--------------------------------------------------------------------------------
/src/constents.js:
--------------------------------------------------------------------------------
1 | export const BASE_URL = "http://127.0.0.1:8000/api/users/"
2 | export const local ='http://127.0.0.1:8000/static/'

--------------------------------------------------------------------------------
/src/features/userSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | 
 4 | 
 5 | const INITIAL_STATE = {
 6 |     user:null
 7 | }
 8 | 
 9 | const checkUserExist = () => {
10 |     const user = localStorage.getItem('user');
11 |     INITIAL_STATE.user = JSON.parse(user);
12 |     return INITIAL_STATE
13 | }
14 | 
15 | 
16 | 
17 | const userSlice = createSlice({
18 |     name:'user',
19 |     initialState:checkUserExist(),
20 |     reducers:{
21 |         deleteUserData: (state, action) => {
22 |             state.user = null;
23 |             localStorage.removeItem('user'); 
24 |         },
25 |         
26 |         updateUserDetails : (state, action) => {
27 |             console.log(action)
28 |             state.user = action.payload;
29 |             localStorage.setItem('user', JSON.stringify(action.payload))
30 |         }
31 |     }
32 | })
33 | 
34 | export const { deleteUserData,updateUserDetails } = userSlice.actions;
35 | 
36 | export default userSlice.reducer;

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;

--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import { Provider } from 'react-redux'
 4 | import App from './App.jsx'
 5 | import './index.css'
 6 | import store from './store.js'
 7 | 
 8 | ReactDOM.createRoot(document.getElementById('root')).render(
 9 |   <React.StrictMode>
10 |     <Provider store={store}>
11 |       <App />
12 |     </Provider>
13 |   </React.StrictMode>,
14 | )
15 |

--------------------------------------------------------------------------------
/src/pages/abuse/abuse.jsx:
--------------------------------------------------------------------------------
  1 | import Footer from "../../components/Footer/footer";
  2 | import AbuseBanner from "../../components/abuse/abuseBanner";
  3 | 
  4 | import Navbar from "../../components/navbar/navbar";
  5 | 
  6 | const Abuse = () => {
  7 | 
  8 |     return (
  9 |         <>
 10 |             <AbuseBanner />
 11 |             <div>
 12 |                 <div className="max-sm:flex-col-reverse flex mb-32 mt-24 md:mx-20 mx-3" data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine">
 13 |                     <div className="max-sm:p-5 max-sm:mt-2 rounded-2xl md:w-2/3 w-full me-2 flex flex-col justify-center items-center">
 14 |                         <h1 className="text-center text-4xl font-serif">Future Faking</h1>
 15 |                         <p className="font-serif text-lg text-center  pt-4 px-8">Future faking is a manipulative tactic where the abuser deceives the victim by making promises or plans for the future that they have no intention of keeping. This creates a false sense of hope and commitment, keeping the victim emotionally invested in the relationship. For women, this can lead to feelings of betrayal, disappointment, and loss of trust. It perpetuates a cycle of dependency and manipulation, making it difficult for women to break free from abusive relationships and pursue a fulfilling future.</p>
 16 |                     </div>
 17 | 
 18 |                     <div className="rounded-lg md:w-1/3 w-full" data-aos="fade-left" data-aos-offset="300" data-aos-easing="ease-in-sine">
 19 |                         <img className="rounded-2xl w-full" src="https://mindfuldrawing.files.wordpress.com/2022/10/future-faked.jpg" alt="" />
 20 | 
 21 |                     </div>
 22 |                 </div>
 23 |             </div>
 24 | 
 25 |             <div>
 26 | 
 27 |                 <div className="max-sm:flex-col-reverse flex mb-32 mt-24 md:mx-20 mx-3" data-aos="fade-left" data-aos-offset="300" data-aos-easing="ease-in-out">
 28 |                     <div className="rounded-lg md:w-1/3 w-full">
 29 |                         <img className="rounded-2xl w-full bg-cover" src="/couple.jpeg" alt="" />
 30 | 
 31 |                     </div>
 32 | 
 33 |                     <div className="max-sm:p-5 max-sm:mt-2 rounded-2xl md:w-2/3 w-full me-2 flex flex-col justify-center items-center" data-aos="fade-down"
 34 |                         data-aos-easing="linear"
 35 |                         data-aos-duration="1500">
 36 |                         <h1 className="text-center text-4xl font-serif">Love Bombing</h1>
 37 |                         <p className="font-serif text-lg text-center pt-4 px-8">In movies, we often see a romanticized version of a persistent man pursuing a woman who initially shows no interest. He goes to great lengths, often ignoring her boundaries, until she eventually falls for him. This unrealistic portrayal mirrors a phenomenon known as love bombing. Love bombing involves showering someone with excessive attention and affection to manipulate them. It's like smothering someone with love to control them emotionally. While it's commonly seen at the start of a relationship, it can happen at any stage, leaving the victim feeling overwhelmed and unsure.</p>
 38 |                     </div>
 39 |                 </div>
 40 |             </div>
 41 | 
 42 |             <div>
 43 | 
 44 |                 <div className="max-sm:flex-col-reverse flex mb-32 mt-24 md:mx-20 mx-3" data-aos="fade-left" data-aos-offset="300"
 45 |                     data-aos-easing="ease-in-sine">
 46 | 
 47 |                     <div className="max-sm:p-5 max-sm:mt-2 rounded-2xl md:w-2/3 w-full me-2 flex flex-col justify-center items-center" >
 48 |                         <h1 className="text-center text-4xl font-serif">Silence</h1>
 49 |                         <p className="font-serif text-lg text-center pt-4 px-8">Silence can be deafening, especially in intimate relationships where the silent treatment becomes a weapon of emotional manipulation. Often used as a form of control or punishment, prolonged periods of silence from a partner can inflict deep psychological wounds on women. This passive-aggressive tactic undermines their sense of worth, triggers anxiety, and fosters feelings of isolation. Recognizing and addressing this toxic behavior is essential for women to reclaim their emotional well-being and assert boundaries in their relationships.</p>
 50 |                     </div>
 51 | 
 52 |                     <div className="rounded-lg md:w-1/3 w-full" data-aos="fade-right" data-aos-offset="300"
 53 |                         data-aos-easing="ease-in-sine">
 54 | 
 55 |                         <img className="rounded-2xl w-full" src="https://images.theconversation.com/files/245311/original/file-20181113-194485-mahhiw.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=926&fit=clip" alt="" />
 56 | 
 57 |                     </div>
 58 |                 </div>
 59 |             </div>
 60 | 
 61 | 
 62 | 
 63 |             <div>
 64 |                 <div className="abuse-header bg-orange-100 text-gray-800 py-10 px-6 rounded-lg shadow-transparent">
 65 | 
 66 |                     <h1 className="sm:text-3xl text-xl font-serif text-center font-semibold">How to Identify Psychological Abuse</h1>
 67 | 
 68 |                 </div>
 69 | 
 70 |                 <div className="py-5" >
 71 |                     <p className="md:px-32 text-center text-gray-600 font-serif font-bold py-5">
 72 |                         Outlined below are several typical indicators of psychological abuse. Should you recognize any of these signs in your own experiences, we encourage you to seek support from a trusted friend, family member, or professional. Remember, you are not facing this alone
 73 |                     </p>
 74 |                 </div>
 75 |             </div>
 76 | 
 77 | 
 78 | 
 79 |             <div className="md:mx-20 mx-auto mb-12 shadow-sm bg-orange-100 rounded-3xl">
 80 | 
 81 |                 <ul className="px-24 py-10 list-disc">
 82 |                     <li className="mb-4"><b>Manipulative Behavior:</b> Your partner constantly manipulates situations or emotions to control you.</li>
 83 |                     <li className="mb-4"><b>Gaslighting:</b> They deny your reality, making you doubt your perceptions and sanity.</li>
 84 |                     <li className="mb-4"><b>Isolation Tactics:</b> They isolate you from friends, family, or support networks, making you reliant solely on them.</li>
 85 |                     <li className="mb-4"><b>Constant Criticism:</b> They belittle you, criticize your actions, and undermine your self-esteem.</li>
 86 |                     <li className="mb-4"><b>Threats and Intimidation:</b> They use threats or intimidation to instill fear and maintain control.</li>
 87 |                     <li className="mb-4"><b>Blaming and Shifting Responsibility:</b> They blame you for their actions and shift responsibility for their behavior onto you.</li>
 88 |                     <li className="mb-4"><b>Withholding Affection or Support:</b> They withhold affection, emotional support, or financial resources as a means of control.</li>
 89 |                     <li className="mb-4"><b>Humiliation and Degradation:</b> They humiliate or degrade you in private or public settings to assert dominance.</li>
 90 |                     <li className="mb-4"><b>Monitoring and Surveillance:</b> They excessively monitor your activities, invade your privacy, or track your movements without consent.</li>
 91 |                     <li><b>Financial Control:</b> They control your finances, limiting your access to money or resources to maintain power over you.</li>
 92 |                 </ul>
 93 |             </div>
 94 | 
 95 | 
 96 | 
 97 |             <Footer />
 98 | 
 99 |         </>
100 | 
101 | 
102 |     );
103 | }
104 | export default Abuse

--------------------------------------------------------------------------------
/src/pages/complaint/complaint.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import Footer from "../../components/Footer/footer";
 3 | import Navbar from "../../components/navbar/navbar";
 4 | import { BASE_URL } from "../../constents";
 5 | import axios from "axios";
 6 | import { toast } from "react-toastify";
 7 | import { useSelector } from "react-redux";
 8 | 
 9 | const Complaint = () => {
10 | 
11 |   const [text, setText] = useState('')
12 |   const { user } = useSelector((state) => state.user);
13 | console.log(user.email)
14 | 
15 |   const handleSubmit = async () => {
16 |     if(user){
17 |       try {
18 |         const data = {
19 |           complaints: text,
20 |           email:user.email
21 |         };
22 |     
23 |         const response = await axios.post(BASE_URL+'/add-complaints', data);
24 |     
25 |         console.log(response.data.response); 
26 |         setText('')
27 |         toast.success("you will get your response on your email")
28 |       } catch (error) {
29 |         console.error('Error:', error);
30 |         toast.error("Error:!!! please try again after some time")
31 |       }
32 |     }else{
33 |       toast.error('Please Login for Consult')
34 |     }
35 |     
36 |   };
37 |   return (
38 |     <>
39 |       <Navbar />
40 |       <div className="h-24 "> </div>
41 |       <div className=" mb-5">
42 |         <p className="text-center py-16 font-serif text-3xl font-bold bg-orange-100 mt-6">
43 |           File Your Concerns
44 |         </p>
45 |       </div>
46 |       <div>
47 |         <p className="px-10 text-center font-serif  text-gray-500 py-5">
48 |           Welcome to our concern filing system, where you can openly share any
49 |           challenges or issues you are currently experiencing. Once you submit
50 |           your concerns, our team will carefully analyze them, and we commit to
51 |           delivering a comprehensive response to your provided email address as
52 |           swiftly as possible. Your satisfaction and resolution are our top
53 |           priorities, and we appreciate your trust in our support system
54 |         </p>
55 |       </div>
56 | 
57 |       <div className="flex   justify-center mb-8">
58 |         <div className="box md:w-[70%] w-[90%]  outline-8 outline-black h-[28rem] border-2 border-black rounded-2xl p-4">
59 |           <div>
60 |             <textarea
61 |               onChange={(e) => setText(e.target.value)}
62 |               className="p-6 w-full h-[350px] font-mono outline-none mb-3 resize-none"
63 |               value={text}
64 |               name=""
65 |               id=""
66 |               cols="30"
67 |               rows="10"
68 |             >

69 |

70 |

71 | 78 |

79 |

80 |