\r ![](\"./src/images/mental-health.png\")
\r
\r ",
67 | "main": "tailwind.config.js",
68 | "keywords": [],
69 | "author": "",
70 | "license": "ISC"
71 | }
72 |
--------------------------------------------------------------------------------
/frontend/public/Hourglass.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/public/Hourglass.gif
--------------------------------------------------------------------------------
/frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/public/favicon.ico
--------------------------------------------------------------------------------
/frontend/public/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/public/icon-192x192.png
--------------------------------------------------------------------------------
/frontend/public/icon-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/public/icon-256x256.png
--------------------------------------------------------------------------------
/frontend/public/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/public/icon-384x384.png
--------------------------------------------------------------------------------
/frontend/public/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/public/icon-512x512.png
--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | UMatter
19 |
20 |
22 |
23 |
24 |
25 |
26 |
27 |
31 |
32 |
--------------------------------------------------------------------------------
/frontend/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "theme_color": "#f69435",
3 | "background_color": "#f69435",
4 | "display": "standalone",
5 | "scope": "/",
6 | "start_url": "/",
7 | "name": "Umatter",
8 | "short_name": "umatter",
9 | "description": "UMatter is a one and all platform to help people quit bad habits by providing them with personalized sessions and one-to-one consultations with professionals.",
10 | "icons": [
11 | {
12 | "src": "/icon-192x192.png",
13 | "sizes": "192x192",
14 | "type": "image/png"
15 | },
16 | {
17 | "src": "/icon-256x256.png",
18 | "sizes": "256x256",
19 | "type": "image/png"
20 | },
21 | {
22 | "src": "/icon-384x384.png",
23 | "sizes": "384x384",
24 | "type": "image/png"
25 | },
26 | {
27 | "src": "/icon-512x512.png",
28 | "sizes": "512x512",
29 | "type": "image/png"
30 | }
31 | ]
32 | }
--------------------------------------------------------------------------------
/frontend/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/frontend/public/sitemap.xml:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 | https://umatter-eight.vercel.app/
8 | 2023-07-03T17:58:10+01:00
9 | 0.6
10 |
11 |
12 | https://umatter-eight.vercel.app/blogs
13 | 2023-07-03T17:58:10+01:00
14 | 1.0
15 |
16 |
17 | https://umatter-eight.vercel.app/feedback
18 | 2023-07-03T17:58:10+01:00
19 | 1.0
20 |
21 |
22 | https://umatter-eight.vercel.app/contact
23 | 2023-07-03T17:58:10+01:00
24 | 1.0
25 |
26 |
27 | https://umatter-eight.vercel.app/signin
28 | 2023-07-03T17:58:10+01:00
29 | 1.0
30 |
31 |
32 | https://umatter-eight.vercel.app/signup
33 | 2023-07-03T17:58:10+01:00
34 | 1.0
35 |
36 |
37 | https://umatter-eight.vercel.app/develop
38 | 2023-07-03T17:58:10+01:00
39 | 1.0
40 |
41 |
42 | https://umatter-eight.vercel.app/consultwithdoctor
43 | 2023-07-03T17:58:10+01:00
44 | 1.0
45 |
46 |
47 | https://umatter-eight.vercel.app/consultwithdoctor/consultationform
48 | 2023-07-03T17:58:10+01:00
49 | 0.4
50 |
51 |
52 |
--------------------------------------------------------------------------------
/frontend/src/App.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
3 | @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@500&family=Orbitron:wght@500&display=swap");
4 | * {
5 | box-sizing: border-box;
6 | margin: 0;
7 | padding: 0;
8 | font-family: "Poppins", sans-serif;
9 | }
10 | /* body,html{
11 | overflow-x: hidden;
12 | } */
13 | ::-webkit-scrollbar {
14 | width: 8px;
15 | }
16 |
17 | ::-webkit-scrollbar-track {
18 | background: black;
19 | }
20 |
21 | ::-webkit-scrollbar-thumb {
22 | background: orange;
23 | border-radius: 10px;
24 | opacity: 0.5;
25 | }
26 |
27 | .dark-theme {
28 | --bg-clr: black;
29 | --text-clr: white;
30 | transition: all 0.3s ease-in-out;
31 | }
32 |
33 | .light-theme {
34 | --bg-clr: white;
35 | --text-clr: black;
36 | transition: all 0.3s ease-in-out;
37 | }
38 |
39 | .error-404-img {
40 | width: 100%;
41 | margin-top: 2rem;
42 | }
43 | @media only screen and (max-width: 560px) {
44 | .error-404-img {
45 | margin-top: 5rem;
46 | margin-bottom: 2rem;
47 | }
48 | }
49 |
50 | .Effect :hover {
51 | transform: scale(1.02);
52 | transition: all 0.2s ease-in-out;
53 | cursor: pointer;
54 | }
55 | .google-login-container{
56 | display: flex;
57 | width: 80%;
58 | margin-top: 2.5rem;
59 | position: relative;
60 | }
61 | .login-button{
62 | cursor: pointer;
63 | width: 100%;
64 | border-radius: 0.75rem;
65 | border-width: 2px;
66 | font-weight: 600;
67 | padding-bottom: 0.75rem;
68 | padding-top: 0.75rem ;
69 | --tw-border-opacity: 1;
70 | border-color: rgb(0 0 0 / var(--tw-border-opacity));
71 | --tw-text-opacity: 1;
72 | color: rgb(0 0 0 / var(--tw-text-opacity));
73 | }
--------------------------------------------------------------------------------
/frontend/src/App.js:
--------------------------------------------------------------------------------
1 | import {lazy, Suspense} from 'react';
2 | import './App.css';
3 | import { HashRouter, Routes, Route } from 'react-router-dom';
4 | import { Loader } from './Components/Loader/Loader';
5 | import HabitTracker from './pages/HabitTracker';
6 |
7 |
8 | const Home = lazy(()=>import("./pages"))
9 | const SigninPage = lazy(()=>import("./pages/signin"))
10 | const DevelopPage = lazy(()=>import("./pages/develop"))
11 | const Error404 = lazy(()=>import("./pages/Error404"))
12 | const BlogPage = lazy(()=>import("./pages/blogs"))
13 | const FeedbackPage = lazy(()=>import("./pages/feedback"))
14 | const Team = lazy(()=>import("./pages/team"))
15 | const SignupPage = lazy(()=>import("./pages/signup"))
16 | const Profile = lazy(()=>import("./pages/profile"))
17 | const Navbar = lazy(()=>import("./Components/Navbar"))
18 | const ContactPage = lazy(()=>import("./pages/contact"))
19 | const GetMail = lazy(()=>import("./Components/Forgot_password/ForgotPassword"))
20 | const Verify = lazy(()=>import("./Components/Forgot_password/OTPVerfication"))
21 | const Blog = lazy(()=>import("./Components/BlogPage/Blog"))
22 | const ConsultWithDoctor = lazy(()=>import('./pages/consult_with_doctor'))
23 | const Consultationform = lazy(()=>import('./Components/Consult_With_Doctor/ConsultationForm'))
24 | const Workshops = lazy(()=>import('./Components/Workshops/Workshops'))
25 |
26 | // import Contact from "./Components/Contactus/Contact";
27 | // window.$crisp=[];
28 | // window.CRISP_WEBSITE_ID="e79efdd2-abee-4a1e-b868-c7929585ebd9";
29 |
30 | function App() {
31 | return (
32 |
33 |
34 |
35 |
38 | }
51 | exact
52 | />
53 | }
57 | />
58 | }
62 | />
63 |
68 |
69 |
70 |
71 |
72 | );
73 | }
74 |
75 | export default App;
--------------------------------------------------------------------------------
/frontend/src/Components/BlogPage/Blog.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from "./style.module.css";
3 | import Footer from '../Footer';
4 |
5 | const blogcontent ={
6 | tags:["Health"],
7 | title:"The Truth About Smoking: It's Not Just Bad for Your Lungs",
8 | metatitle:"There is no safe level of smoking. Even secondhand smoke can be harmful.",
9 | image:"https://cdn.pixabay.com/photo/2019/06/14/13/16/cigarette-4273574_1280.webp",
10 | content:[{
11 | title:"Introduction",
12 | description:"Smoking is one of the leading causes of preventable deaths worldwide. It is a habit that affects not only the smoker but also those around them. Smoking can cause a wide range of health problems, from respiratory issues to heart disease and cancer. In this blog post, we will explore what smoking does to your body.",
13 | },{
14 | title:"Respiratory System",
15 | description:"Smoking can cause significant damage to your respiratory system. It can lead to chronic bronchitis, emphysema, and lung cancer. Smoking causes inflammation in the airways, which can make it difficult to breathe. It can also damage the cilia, which are small hair-like structures that line the airways and help to clear mucus and dirt from the lungs. This can lead to a buildup of mucus and increase the risk of infection.",
16 | },{
17 | title:"Reproductive System",
18 | description:"Smoking can also affect the reproductive system. It can reduce fertility in both men and women. In women, smoking can lead to complications during pregnancy, such as premature birth, low birth weight, and stillbirth. It can also increase the risk of ectopic pregnancy and miscarriage. In men, smoking can reduce sperm count and motility, which can make it more difficult to conceive. ",
19 | },{
20 | title:"Cancer",
21 | description:"Smoking is one of the leading causes of cancer worldwide. It can increase the risk of lung cancer, throat cancer, mouth cancer, bladder cancer, and many other types of cancer. Smoking causes mutations in the DNA, which can lead to the growth of abnormal cells and the development of cancer. ",
22 | image:"https://cdn.pixabay.com/photo/2012/04/24/13/11/asbestos-39996_640.webp"
23 | },{
24 | title:"Conclusion",
25 | description:"In conclusion, smoking can cause significant damage to your body. It can lead to respiratory issues, heart disease, reproductive problems, and cancer. Quitting smoking is one of the best things you can do for your health. It can reduce your risk of developing these health problems and improve your overall quality of life. If you are struggling to quit smoking, talk to your doctor or a smoking cessation specialist for help. "
26 | }]
27 | }
28 |
29 | function Blog() {
30 | return (
31 | <>
32 |
12 |
43 |
44 |
45 |
46 | );
47 | }
48 |
49 |
50 | export default ConsultationForm;
--------------------------------------------------------------------------------
/frontend/src/Components/Consult_With_Doctor/form.css:
--------------------------------------------------------------------------------
1 | /* ConsultationForm */
2 | .appointment-section {
3 | padding: 50px 0;
4 | /* background-color: #f9f9f9; */
5 |
6 | }
7 |
8 | .appointment-form {
9 | max-width: 500px;
10 | margin: 0 auto;
11 | background: linear-gradient(-2deg, black, rgb(1, 147, 86), rgb(10, 201, 122));
12 | padding: 30px;
13 | border-radius: 4px;
14 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
15 | }
16 |
17 | .section-heading {
18 | font-size: 32px;
19 | text-align: center;
20 | margin-bottom: 30px;
21 | font-family: "Poppins";
22 | font-style: normal;
23 | font-weight: 700;
24 | font-size: 2.3rem;
25 | line-height: 4rem;
26 | margin-bottom: 1rem;
27 | color: #01bf71;
28 | }
29 |
30 | .form-group {
31 | margin-bottom: 20px;
32 | }
33 |
34 | label {
35 | font-size: 16px;
36 | font-weight: bold;
37 | display: block;
38 | margin-bottom: 5px;
39 | color: white;
40 | }
41 |
42 | input[type="text"],
43 | input[type="email"],
44 | input[type="tel"],
45 | input[type="date"],
46 | input[type="time"],
47 | textarea {
48 | width: 100%;
49 | padding: 10px;
50 | font-size: 14px;
51 | border-radius: 4px;
52 | border: 1px solid #ccc;
53 | transition: border-color 0.3s ease;
54 |
55 | }
56 |
57 | input[type="text"]:focus,
58 | input[type="email"]:focus,
59 | input[type="tel"]:focus,
60 | input[type="date"]:focus,
61 | input[type="time"]:focus,
62 | textarea:focus {
63 | border-color: #e1f562;
64 | }
65 |
66 | textarea {
67 | resize: vertical;
68 | }
69 |
70 | button[type="submit"] {
71 | display: inline-block;
72 | background-color: #ff9f00;
73 | color: #fff;
74 | font-size: 14px;
75 | padding: 10px 20px;
76 | text-decoration: none;
77 | border-radius: 4px;
78 | transition: background-color 0.3s ease;
79 | border: none;
80 | cursor: pointer;
81 | }
82 |
83 | button[type="submit"]:hover {
84 | background-color: #e64a19;
85 | }
86 |
87 |
--------------------------------------------------------------------------------
/frontend/src/Components/Consult_With_Doctor/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | line-height: 1.5;
4 | margin: 0;
5 | }
6 |
7 | .hero {
8 | position: relative;
9 | background-image: url("https://images.unsplash.com/photo-1585842378054-ee2e52f94ba2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Q29uc3VsdCUyMERvY3RvcnN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=1000&q=60");
10 | background-size: cover;
11 | background-position: center;
12 | height: 90vh;
13 | display: flex;
14 | align-items: center;
15 | justify-content: center;
16 | color: #fff;
17 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
18 | margin-top: -80px;
19 | }
20 |
21 | .hero-content {
22 | text-align: center;
23 | }
24 |
25 | .hero-heading {
26 | font-family: "Poppins", sans-serif;
27 | font-size: 50px;
28 | font-weight: 1000;
29 | margin-bottom: 10px;
30 | letter-spacing: 2px;
31 | color: #fff;
32 | }
33 |
34 | .hero-text {
35 | font-family: "Poppins", sans-serif;
36 | font-size: 24px;
37 |
38 | margin-bottom: 30px;
39 | letter-spacing: 1px;
40 | color: #fff;
41 | }
42 |
43 | .btn-schedule {
44 | display: inline-block;
45 | background-color: #ff9800;
46 | color: #fff;
47 | font-family: "Poppins", sans-serif;
48 | font-size: 20px;
49 | padding: 14px 28px;
50 | text-decoration: none;
51 | border-radius: 4px;
52 | transition: background-color 0.3s ease;
53 | }
54 |
55 | .btn-schedule:hover {
56 | background-color: #ff5722;
57 | }
58 |
59 | section {
60 | padding: 40px 20px;
61 | }
62 |
63 | section h2 {
64 | font-size: 20px;
65 | margin-bottom: 10px;
66 | }
67 |
68 | .btn-schedule-primary {
69 | background-color: #ff5722;
70 | }
71 |
72 | .btn-schedule-primary:hover {
73 | background-color: #e64a19;
74 | }
75 |
76 | .btn-schedule-secondary {
77 | background-color: #ddd;
78 | color: #333;
79 | }
80 |
81 | .btn-schedule-secondary:hover {
82 | background-color: #ccc;
83 | cursor: pointer;
84 | }
85 |
86 | /* section 2 */
87 |
88 | .doctor-profiles {
89 | padding: 50px 0;
90 | background-color: #f2f2f2;
91 | }
92 |
93 | .heading_drProfile {
94 | text-align: center;
95 | font-size: 40px;
96 | margin-bottom: 50px;
97 | }
98 |
99 | .slider {
100 | display: flex;
101 | overflow-x: auto;
102 | scroll-behavior: smooth;
103 | }
104 |
105 | ::-webkit-scrollbar {
106 | height: 2vh;
107 | }
108 |
109 | ::-webkit-scrollbar-track {
110 | background: transparent;
111 | }
112 |
113 | ::-webkit-scrollbar-thumb {
114 | background: orange;
115 | border-radius: 10px;
116 | }
117 |
118 | .slide {
119 | flex: 0 0 300px;
120 | margin-right: 20px;
121 | margin-left: 20px;
122 | background-color: #fff;
123 | padding: 20px;
124 | border-radius: 8px;
125 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
126 | transition: transform 0.3s ease;
127 | margin-bottom: 2rem;
128 | }
129 |
130 | .profile img {
131 | width: 100%;
132 | height: auto;
133 | border-radius: 4px;
134 | margin-bottom: 10px;
135 | }
136 |
137 | .profile h3 {
138 | font-size: 20px;
139 | margin-bottom: 5px;
140 | }
141 |
142 | .profile p {
143 | font-size: 14px;
144 | color: #555;
145 | margin-bottom: 10px;
146 | }
147 |
148 | .btn {
149 | display: inline-block;
150 | background-color: #ff5722;
151 | color: #fff;
152 | font-size: 11px;
153 | padding: 6px 14px;
154 | text-decoration: none;
155 | border-radius: 4px;
156 | transition: background-color 0.3s ease;
157 | }
158 |
159 | .slide:hover .btn {
160 | background-color: #e64a19;
161 | }
162 |
163 | .btn-secondary {
164 | background-color: #ddd;
165 | color: #333;
166 | margin-left: 10px;
167 | }
168 |
169 | .btn-secondary:hover {
170 | background-color: #ccc;
171 | cursor: pointer;
172 | }
173 |
174 | /* section 3 */
175 |
176 | .consultation-process {
177 | padding: 50px 0;
178 | background-color: #fff;
179 | }
180 |
181 | .container {
182 | max-width: 800px;
183 | margin: 0 auto;
184 | text-align: center;
185 | }
186 |
187 | .section-heading {
188 | font-size: 32px;
189 | margin-bottom: 30px;
190 | }
191 |
192 | .process-steps {
193 | display: flex;
194 | flex-wrap: wrap;
195 | justify-content: center;
196 | }
197 |
198 | .step {
199 | flex: 0 0 calc(50% - 40px);
200 | max-width: 400px;
201 | margin: 20px;
202 | text-align: center;
203 | }
204 |
205 | .step-number {
206 | display: inline-block;
207 | width: 50px;
208 | height: 50px;
209 | border-radius: 50%;
210 | background-color: #ff5722;
211 | color: #fff;
212 | font-size: 24px;
213 | line-height: 50px;
214 | margin-bottom: 10px;
215 | }
216 |
217 | .step-heading {
218 | font-size: 24px;
219 | margin-bottom: 10px;
220 | }
221 |
222 | .step-description {
223 | font-size: 14px;
224 | color: #555;
225 | }
226 |
--------------------------------------------------------------------------------
/frontend/src/Components/Contactus/Contact.css:
--------------------------------------------------------------------------------
1 | .container{
2 | max-width: 100% ;
3 | height: fit-content;
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: center;
7 | align-items: center;
8 | bottom: 0;
9 | left: 0;
10 | right: 0;
11 | top: 0;
12 | z-index: 0;
13 | overflow: hidden;
14 | background: var(--bg-clr);
15 | padding: 0;
16 | }
17 |
18 |
19 | .contact-container{
20 | background-color: #fff;
21 | box-shadow: 0 0 20px #01bf71;
22 | position: relative;
23 | overflow: hidden;
24 | width: 900px;
25 | max-width: 100%;
26 | height: 100%;
27 | margin: 3rem auto;
28 | display: flex;
29 | @media only screen and (max-width:650px){
30 | flex-direction: column;
31 | margin: 0;
32 | }
33 | }
34 |
35 | .left-container{
36 | width: 45%;
37 | display: flex;
38 | flex-direction: column;
39 | justify-content: center;
40 | align-items: center;
41 | background: linear-gradient(147.84deg, #01bf71 8.1%, #00492b 95.42%);
42 | min-height: 100%;
43 |
44 |
45 | @media only screen and (max-width:650px){
46 | width: 100%;
47 | }
48 | }
49 |
50 | .left-container img{
51 | max-width: 90%;
52 | }
53 |
54 | .left-heading{
55 | font-family: "Poppins";
56 | font-style: normal;
57 | font-weight: 700;
58 | font-size: 2rem;
59 | line-height: 3rem;
60 | color: #ffffff;
61 | margin-bottom: 3rem;
62 | text-align: center;
63 | }
64 |
65 | .form-container {
66 | width: 500px;
67 | padding: 30px;
68 | border-radius: 10px;
69 | }
70 |
71 |
72 | .form-container form{
73 | min-width: 100%;
74 | height: 100%;
75 | display: flex;
76 | flex-direction: column;
77 | }
78 |
79 |
80 | .text-content{
81 | margin-bottom: 3rem;
82 | }
83 |
84 | .form-container h2 {
85 | text-align: center;
86 | font-size: 38px;
87 | font-weight: 600;
88 | margin-bottom: 3rem;
89 | color: rgb(1, 191, 113);
90 |
91 | }
92 |
93 | .form-group {
94 | margin-bottom: 20px;
95 | font-weight: 500;
96 | font-size: larger;
97 |
98 | }
99 |
100 | .form-group label {
101 | display: block;
102 | margin-bottom: 10px;
103 | color: rgb(1, 191, 113);
104 |
105 | }
106 | hr{
107 | border:2px solid white;
108 | opacity:1;
109 | }
110 |
111 |
112 | .form-group input[type="text"],
113 | .form-group input[type="email"],
114 | .form-group textarea {
115 | width: 100%;
116 | padding: 8px;
117 | border: 1px solid #ccc;
118 | border-radius: 4px;
119 | background: rgba(1, 191, 113, 0.3);
120 | }
121 |
122 | .form-group textarea {
123 | height: 80px;
124 |
125 | }
126 | .form-group input.inputError
127 | {
128 | border: 2px solid #ee334b;
129 | }
130 | .form-group input.successError
131 | {
132 | border: 2px solid rgb(37, 218, 37);
133 | }
134 | .form-group textarea.inputError
135 | {
136 | border: 2px solid #ee334b;
137 | }
138 | .form-group textarea.successError
139 | {
140 | border: 2px solid rgb(37, 218, 37);
141 | }
142 | .btn-container{
143 | text-align: center;
144 | }
145 | .form-button {
146 | background: #01bf71;
147 | padding: 8px 15px;
148 | border: none;
149 | border-radius: 15px;
150 | color: #fff;
151 | font-size: 20px;
152 | font-weight: 300;
153 | cursor: pointer;&:hover {
154 | opacity: 0.8;
155 | transition: opacity 0.25s ease;
156 | }
157 | :active {
158 | background: #fff;
159 | color: #01bf71;
160 | opacity: 1;
161 | border: 2px solid #01bf71;
162 | }
163 | }
164 |
165 |
166 | @media only screen and (max-width: 650px) {
167 | .left-heading{
168 | margin-top: 1rem;
169 | }
170 | .form-container{
171 | width: 90vw;
172 | }
173 | }
174 |
175 |
--------------------------------------------------------------------------------
/frontend/src/Components/Contactus/Contact.js:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import { React, useState } from "react";
4 | import "./Contact.css";
5 | import Contact_Image from "../../images/contact_image.webp"
6 | const Contact = () => {
7 | const [name, setName] = useState('');
8 | const [mail, setMail] = useState('');
9 | const [message, setMessage] = useState('');
10 | const [error, seterror] = useState('');
11 | const [success, setsuccess] = useState('');
12 |
13 | function validEmail(email) {
14 | let re =
15 | /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
16 | if (re.test(email)) return true;
17 | else return false;
18 | }
19 |
20 | const handleSubmit = async (e) => {
21 |
22 | e.preventDefault();
23 |
24 | console.log("called");
25 |
26 | setsuccess('');
27 |
28 | if(name === '')
29 | { seterror("nameerr");}
30 |
31 | else if(mail === '')
32 | { seterror("emailerr");}
33 |
34 | else if(!validEmail(mail))
35 | { seterror("validerr");}
36 |
37 | else if(message === '')
38 | {seterror("messageerr");}
39 |
40 | else
41 | {
42 | const mailData = {
43 | name,
44 | mail,
45 | message,
46 | };
47 |
48 | await fetch('https://umatter.onrender.com/mail', {
49 | method: "POST",
50 | headers: {
51 | "Content-Type": "application/json"
52 | },
53 | body: JSON.stringify(mailData)
54 | })
55 |
56 | setsuccess("Contact Request Sent Successfully!!");
57 | seterror('');
58 | setName('');
59 | setMail('');
60 | setMessage('');
61 | // alert("Contact Request Sent Successfully")
62 |
63 | }
64 |
65 | }
66 |
67 | return (
68 |
69 |
70 |
78 |
80 |
81 |
99 |
100 |
101 |
102 |
103 |
104 | );
105 | };
106 |
107 | export default Feedback;
108 |
109 |
110 |
--------------------------------------------------------------------------------
/frontend/src/Components/Footer/FooterElements.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import { Link } from "react-router-dom";
3 |
4 | // Footer container
5 | export const FooterContainer = styled.footer`
6 | background-color: #101522;
7 | padding-top: 3rem;
8 | padding-bottom: 3rem;
9 | z-index: 99;
10 | `;
11 |
12 | // Footer wrap
13 | export const FooterWrap = styled.div`
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 | margin: 0 auto;
18 | max-width: 1100px;
19 | flex-direction: column;
20 | `;
21 |
22 | // Footer links container
23 | export const FooterLinksContainer = styled.div`
24 | width: 100%;
25 | display: flex;
26 | flex-direction: column;
27 | align-items: center;
28 | justify-content: center;
29 | `;
30 |
31 | // Footer links wrapper
32 | export const FooterLinksWrapper = styled.div`
33 | @media (max-width: 786px) {
34 | display: grid;
35 | gap: 2rem;
36 | grid-template-columns: 1fr;
37 | }
38 | width: 100%;
39 | grid-template-columns: 1fr 1fr 1fr;
40 |
41 | @media (min-width: 786px) {
42 | &:nth-child(n) {
43 | display: grid;
44 | grid-template-columns: 1fr 1fr 1fr;
45 | justify-content: space-around;
46 | }
47 | &:nth-child(2) {
48 | width: 100%;
49 | display: grid;
50 | align-self: inherit;
51 | align-content: center;
52 | justify-content: center;
53 | }
54 | }
55 | `;
56 |
57 | // Footer link items
58 | export const FooterLinkItems = styled.div`
59 | display: flex;
60 | flex-direction: column;
61 | box-sizing: border-box;
62 | color: #fff;
63 |
64 | &.socials {
65 | display: flex;
66 | flex-direction: row;
67 | grid-template-columns: repeat(6, 1fr);
68 | align-items: center;
69 | gap: 0.5rem;
70 | margin-top: 1rem;
71 | }
72 |
73 | @media (min-width: 320px) {
74 | align-items: center;
75 | &.socials {
76 | margin: 1rem;
77 | }
78 | }
79 |
80 | @media (min-width: 786px) {
81 | align-items: flex-start;
82 | text-align: left;
83 | }
84 | `;
85 |
86 | // Footer link title
87 | export const FooterLinkTitle = styled.h1`
88 | font-size: 18px;
89 | font-weight: bold;
90 | margin-bottom: 10px;
91 | display: inline-block;
92 | cursor: pointer;
93 | transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
94 | text-decoration: none;
95 | position: relative;
96 | color: inherit;
97 |
98 | &:hover,
99 | &:focus {
100 | color: #01bf71 !important;
101 | transform: translateY(-2px);
102 | }
103 |
104 | &:after {
105 | content: "";
106 | position: absolute;
107 | bottom: -8px;
108 | left: 0;
109 | width: 100%;
110 | height: 4px;
111 | background-color: #01bf71;
112 | }
113 | `;
114 |
115 | export const FooterLinkTitleHr = styled.hr`
116 | content: "";
117 | border: 2px solid;
118 | margin-top: 5px;
119 | width: 52%;
120 | color: #101522;
121 | `;
122 |
123 | export const FooterLink = styled(Link)`
124 | /* Your styles for FooterLink */
125 | color: rgba(255, 255, 255, 0.8);
126 | text-decoration: none;
127 | margin-bottom: 0.6rem;
128 | font-size: 16px;
129 |
130 | &:hover {
131 | color: #01bf71;
132 | text-decoration: none;
133 | text-decoration-line: none;
134 | text-decoration-style: solid;
135 | }
136 |
137 | &.icons {
138 | text-align: center;
139 | border-radius: 22px;
140 | padding: 7px;
141 | transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
142 | background-color 0.3s ease-out;
143 |
144 | &:hover {
145 | transform: translate(0, -10px);
146 | background-color: white !important;
147 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
148 | }
149 | }
150 |
151 | &.icons {
152 | color: white !important;
153 | }
154 |
155 | &.insta:hover {
156 | color: #e4405f !important;
157 | }
158 |
159 | &.fb:hover {
160 | color: #1877f2 !important;
161 | }
162 |
163 | &.youtube:hover {
164 | color: #ff0000 !important;
165 | }
166 |
167 | &.twitter:hover {
168 | color: #1da1f2 !important;
169 | }
170 |
171 | &.linkdn:hover {
172 | color: #0077b5 !important;
173 | }
174 |
175 | &.github:hover {
176 | color: black !important;
177 | }
178 | `;
179 |
180 | // Social media
181 | export const SocialMedia = styled.section``;
182 |
183 | // Social media wrap
184 | export const SocialMediaWrap = styled.div`
185 | max-width: 1100px;
186 | display: flex;
187 | flex-direction: column;
188 | align-items: center;
189 | `;
190 |
191 | // Social logo
192 | export const SocialLogo = styled(Link)`
193 | /* Your styles for SocialLogo */
194 | color: rgb(255, 255, 255);
195 | cursor: pointer;
196 | text-decoration: none;
197 | font-size: 1.5rem;
198 | font-weight: bold;
199 |
200 | &:hover {
201 | mask-image: linear-gradient(
202 | -75deg,
203 | rgba(0, 0, 0, 0.6) 30%,
204 | #000 50%,
205 | rgba(0, 0, 0, 0.6) 70%
206 | );
207 | mask-size: 200%;
208 | animation: shine 2s infinite;
209 | color: lightcyan;
210 | }
211 |
212 | @keyframes shine {
213 | from {
214 | mask-position: 150%;
215 | }
216 |
217 | to {
218 | mask-position: -50%;
219 | }
220 | }
221 | `;
222 |
223 | // Website rights
224 | export const WebsiteRights = styled.small`
225 | color: #fff;
226 | `;
227 |
228 | // Social icons
229 | export const SocialIcons = styled.div``;
230 |
231 | // Social icons link
232 | export const SocialIconsLink = styled.a``;
233 |
--------------------------------------------------------------------------------
/frontend/src/Components/Footer/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | FaFacebook,
4 | FaLinkedin,
5 | FaYoutube,
6 | FaInstagram,
7 | FaTwitter,
8 | FaGithub,
9 | } from "react-icons/fa";
10 | import { Link } from "react-router-dom";
11 | import {
12 | FooterContainer,
13 | FooterWrap,
14 | FooterLinksContainer,
15 | FooterLinksWrapper,
16 | FooterLinkItems,
17 | FooterLinkTitle,
18 | FooterLinkTitleHr,
19 | FooterLink,
20 | SocialMedia,
21 | SocialMediaWrap,
22 | SocialLogo,
23 | WebsiteRights,
24 | } from "./FooterElements";
25 |
26 | const Footer = () => {
27 | const handleClick = () => {
28 | window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
29 | };
30 |
31 | return (
32 |
33 |
34 |
35 |
36 |
75 |
76 |
77 |
78 |
79 |
85 |
87 |
93 |
95 |
101 |
103 |
109 |
111 |
117 |
119 |
135 |
159 |
160 | {/* Social media icons */}
161 |
162 | UMatter
163 |
164 | UMatter © {new Date().getFullYear()} All rights reserved.
165 |
166 |
167 |
168 |
169 |
170 | );
171 | };
172 |
173 | export default Footer;
174 |
--------------------------------------------------------------------------------
/frontend/src/Components/Forgot_password/ForgotPassword.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { toast } from "react-toastify";
4 | import { sendPasswordResetEmail } from "firebase/auth";
5 | import {
6 | NewContainer,
7 | FormContainer,
8 | FPForm,
9 | FPimg,
10 | FPheading,
11 | FPpara,
12 | FPinput,
13 | ButtonContainer,
14 | CancelButton,
15 | FPButton,
16 | } from "./ForgotPasswordelements";
17 | import ForgotImg from "../../images/Forgotpassword.webp";
18 | import Footer from "../Footer";
19 | import { auth } from "../../firebase-config"; // Import your Firebase authentication instance
20 |
21 | const GetMail = () => {
22 | const navigate = useNavigate();
23 | const [email, setEmail] = useState();
24 |
25 | const handleContinue = async () => {
26 | try {
27 | if (!email) {
28 | // alert("Please enter your email.");
29 | let errorMessage = "Please enter your email";
30 | toast.error(errorMessage, {
31 | position: "top-right",
32 | autoClose: 5000,
33 | hideProgressBar: false,
34 | closeOnClick: true,
35 | pauseOnHover: true,
36 | draggable: true,
37 | });
38 | return;
39 | }
40 |
41 | // Send a password reset email
42 | await sendPasswordResetEmail(auth, email);
43 |
44 | // After sending the email, navigate to the OTP verification page
45 | navigate("/signin/otpverification");
46 | } catch (error) {
47 | let errorMessage = "Error sending password reset email. Please try again.";
48 | // console.error("Error sending password reset email", error);
49 | // alert("Error sending password reset email. Please try again.");
50 | toast.error(errorMessage, {
51 | position: "top-right",
52 | autoClose: 5000,
53 | hideProgressBar: false,
54 | closeOnClick: true,
55 | pauseOnHover: true,
56 | draggable: true,
57 | });
58 | }
59 | };
60 |
61 | return (
62 | <>
63 |
64 |
65 |
66 | Forgot Password?
68 |
69 | Don't worry, enter your email to receive the OTP for verification
70 | and regain access to your account.
71 |
72 | setEmail(e.target.value)}
74 | type="email"
75 | placeholder="you@example.com"
76 | id="email"
77 | aria-label="Email"
78 | required
79 | />
80 |
81 | navigate("/signin")}>Cancel
82 | Continue
83 |
84 |
85 |
86 |
87 |
88 |
89 | );
90 | };
91 |
92 | export default GetMail;
93 |
--------------------------------------------------------------------------------
/frontend/src/Components/Forgot_password/ForgotPasswordelements.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import { Link } from "react-router-dom";
3 |
4 | export const NewContainer = styled.div`
5 | width: 100%;
6 | height: fit-content;
7 | display: flex;
8 | flex-direction: column;
9 | justify-content: center;
10 | align-items: center;
11 | bottom: 0;
12 | left: 0;
13 | right: 0;
14 | top: 0;
15 | z-index: 0;
16 | overflow: hidden;
17 | background: var(--bg-clr);
18 | `;
19 |
20 | export const FormContainer = styled.div`
21 | background-color: #fff;
22 | box-shadow: 0 0 20px #01bf71;
23 | position: relative;
24 | overflow: hidden;
25 | width: 500px;
26 | max-width: 100%;
27 | min-height: 550px;
28 | margin: 3rem auto;
29 | display: flex;
30 | justify-content: center;
31 | align-items: center;
32 | background: linear-gradient(147.84deg, #01bf71 8.1%, #00492b 95.42%);
33 | `;
34 |
35 | export const FPForm = styled.form`
36 | min-width: 100%;
37 | height: 100%;
38 | display: flex;
39 | flex-direction: column;
40 | justify-content: center;
41 | align-items: center;
42 | `;
43 |
44 | export const FPimg = styled.img`
45 | width: 70%;
46 | `;
47 |
48 | export const FPheading = styled.h1`
49 | font-family: "Poppins";
50 | font-style: normal;
51 | font-weight: 700;
52 | font-size: 2.3rem;
53 | line-height: 4rem;
54 | color: #fff;
55 | `;
56 |
57 | export const FPpara = styled.p`
58 | font-family: "Poppins";
59 | font-style: normal;
60 | font-weight: 400;
61 | font-size: 0.8rem;
62 | line-height: 1rem;
63 | color: #ffffff;
64 | margin-top: 0.4rem;
65 | margin-bottom: 1rem;
66 | width: 70%;
67 | text-align: center;
68 | `;
69 |
70 | export const FPinput = styled.input`
71 | width: 70%;
72 | padding: 0.5rem;
73 | border-radius: 0;
74 | border: None;
75 | background: #fff;
76 | font-family: "Poppins";
77 | font-style: normal;
78 | font-weight: 400;
79 | font-size: 0.8rem;
80 | line-height: 0.8rem;
81 | color: Black;
82 | margin-bottom: 1rem;
83 | outline: none;
84 | box-sizing: border-box;
85 | border: 1px solid transparent;
86 |
87 | &::placeholder {
88 | color: rgba(0, 0, 0, 0.5);
89 | }
90 |
91 | &:hover {
92 | border: 1px solid #01bf71;
93 | }
94 |
95 | &:focus {
96 | border-radius: 0;
97 | border: 2px solid #01bf71;
98 | }
99 | `;
100 |
101 | export const ButtonContainer = styled.div`
102 | display: flex;
103 | flex-direction: row;
104 | gap: 10%;
105 | `;
106 |
107 | export const CancelButton = styled.button`
108 | width: 7rem;
109 | font-family: "Poppins";
110 | font-style: normal;
111 | font-weight: 400;
112 | font-size: 1rem;
113 | border-radius: 50px;
114 | background: #fff;
115 | white-space: nowrap;
116 | color: #01bf71;
117 | margin-top: 0.8rem;
118 | cursor: pointer;
119 | text-decoration: none;
120 | margin-bottom: 1rem;
121 |
122 | &:hover {
123 | background: #00492b;
124 | color: #ffffff;
125 | }
126 |
127 | &:active {
128 | transform: scale(0.95);
129 | }
130 | `;
131 |
132 | export const FPButton = styled.button`
133 | width: 8rem;
134 | height: 3rem;
135 | font-family: "Poppins";
136 | font-style: normal;
137 | font-weight: 400;
138 | font-size: 1rem;
139 | border-radius: 50px;
140 | background: #01bf71;
141 | white-space: nowrap;
142 | color: #fff;
143 | margin-top: 0.8rem;
144 | cursor: pointer;
145 | text-decoration: none;
146 | margin-bottom: 1rem;
147 | &:hover {
148 | background: #00492b;
149 | color: #ffffff;
150 | }
151 | &:active {
152 | transform: scale(0.95);
153 | }
154 | `;
155 |
156 | export const OtpInput = styled.input`
157 | width: 8%;
158 | aspect-ratio: 1/1;
159 |
160 | text-align: center;
161 | padding: 0.5rem;
162 | border-radius: 0;
163 | border: None;
164 | background: #fff;
165 | font-family: "Poppins";
166 | font-style: normal;
167 | font-weight: bold;
168 | font-size: 1rem;
169 | line-height: 0.8rem;
170 | color: Black;
171 | margin-bottom: 1rem;
172 | outline: none;
173 | box-sizing: border-box;
174 | border: 1px solid transparent;
175 |
176 | &::placeholder {
177 | color: rgba(0, 0, 0, 0.5);
178 | }
179 |
180 | &:hover {
181 | border: 1px solid #01bf71;
182 | }
183 |
184 | &:focus {
185 | border-radius: 0;
186 | border: 2px solid #01bf71;
187 | }
188 | `;
189 |
190 | export const OTPBoxContainer = styled.div`
191 | display: flex;
192 | align-items: center;
193 | justify-content: center;
194 | flex-direction: row;
195 | gap: 5%;
196 | `;
197 |
198 | export const OTPimg = styled.img`
199 | width: 50%;
200 | `;
201 |
202 | export const TimerContainer = styled.div`
203 | display: flex;
204 | flex-direction: row;
205 | gap: 2%;
206 | width: 45%;
207 | justift-content: center;
208 | align-items: center;
209 | text-align: center;
210 | `;
211 |
212 | export const ResendLink = styled.a`
213 | font-family: "Poppins";
214 | font-style: normal;
215 | font-weight: 400;
216 | font-size: 0.8rem;
217 | line-height: 1rem;
218 | color: #ffffff;
219 | margin-top: 0.4rem;
220 | margin-bottom: 1rem;
221 |
222 | &:hover {
223 | text-decoration: underline;
224 | cursor: pointer;
225 | color: #fff;
226 | }
227 | `;
228 |
229 | export const ResendPara = styled.p`
230 | font-family: "Poppins";
231 | font-style: normal;
232 | font-weight: 400;
233 | font-size: 0.8rem;
234 | line-height: 1rem;
235 | color: #ffffff;
236 | margin-top: 0.4rem;
237 | margin-bottom: 1rem;
238 | `;
239 |
--------------------------------------------------------------------------------
/frontend/src/Components/Forgot_password/Forgot_password.css:
--------------------------------------------------------------------------------
1 | .forgot_body {
2 | color: white;
3 | text-align: center;
4 | }
5 |
6 | .forgot_head {
7 | font-size: 30px;
8 | font-weight: bold;
9 | }
10 |
11 | .boxes_otp {
12 | display: flex;
13 | justify-content: space-between;
14 | margin: 20px 0px;
15 | }
16 |
17 | .input_otp {
18 | width: 15%;
19 | aspect-ratio: 1/1;
20 | border-radius: 10px;
21 | font-size: 30px;
22 | font-weight: bold;
23 | text-align: center;
24 | }
25 |
26 | .forgot_btn {
27 | margin: 5px;
28 | /* height: 50px; */
29 | }
30 |
31 | .timer {
32 | margin: 20px 0px -10px;
33 | }
34 |
35 | .forgot_resend {
36 | background: none;
37 | color: rgba(255, 255, 255, 0.507);
38 | text-decoration: none;
39 | }
40 |
41 | .forgot_resend:hover {
42 | color: white;
43 | }
44 |
45 | .email-form{
46 | margin-top: 10%;
47 | }
48 |
--------------------------------------------------------------------------------
/frontend/src/Components/Forgot_password/OTPVerfication.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Link } from "react-router-dom";
3 | import { toast, ToastContainer } from "react-toastify";
4 | import "react-toastify/dist/ReactToastify.css";
5 | import {
6 | NewContainer,
7 | FormContainer,
8 | FPForm,
9 | OTPimg,
10 | FPheading,
11 | FPpara,
12 | OtpInput,
13 | OTPBoxContainer,
14 | FPButton,
15 | TimerContainer,
16 | ResendLink,
17 | ResendPara,
18 | } from "./ForgotPasswordelements";
19 | import OTPImg from "../../images/EnterOTP.webp";
20 | import Footer from "../Footer";
21 |
22 | function Verify() {
23 | const [Otp, setotp] = useState(new Array(4).fill(""));
24 |
25 | const handleChange = (element, index) => {
26 | if (isNaN(element.value)) return false;
27 | setotp((prevOtp) =>
28 | prevOtp.map((d, idx) => (idx === index ? element.value : d))
29 | );
30 |
31 | if (element.nextSibling) {
32 | element.nextSibling.focus();
33 | }
34 | };
35 |
36 | const handleVerify = () => {
37 | // Perform the OTP verification logic here
38 | // ...
39 |
40 | // Show success toast
41 | toast.success("OTP verified successfully");
42 | };
43 |
44 | const handleRetry = () => {
45 | // Perform the OTP resend logic here
46 | // ...
47 |
48 | // Show success toast
49 | toast.success("OTP sent successfully");
50 | };
51 |
52 | const [counter, setCounter] = React.useState(59);
53 | React.useEffect(() => {
54 | const timer =
55 | counter > 0 && setInterval(() => setCounter((prevCounter) => prevCounter - 1), 1000);
56 | return () => clearInterval(timer);
57 | }, [counter]);
58 |
59 | return (
60 | <>
61 |
62 |
63 |
64 | Check Your Inbox
66 | We have sent you a mail for resetting your password.
67 | {/*
68 | {Otp.map((data, index) => (
69 | handleChange(e.target, index)}
75 | onFocus={(e) => e.target.select()}
76 | required
77 | />
78 | ))}
79 |
80 | Verify
81 |
82 | Resend OTP in 00 : {counter}
83 | Resend OTP?
84 | */}
85 |
86 |
87 |
88 |
89 |
45 | {isVisible && (
46 |
51 | );
52 | };
53 | const Wrapper = styled.section`
54 | display: flex;
55 | justify-content: center;
56 | align-items: center;
57 | position: relative;
58 |
59 | .top-btn {
60 | font-size: 1.8rem;
61 | width: 2rem;
62 | height: 2rem;
63 | color: #fff;
64 | background-color:rgb(62, 62, 252);
65 | box-shadow:rgba(0,0,0,0.2) 0px 0px 10px 0px;
66 | border-radius: 50%;
67 | position: fixed;
68 | bottom: 1rem;
69 | left: 2rem;
70 | z-index: 999;
71 | display: flex;
72 | justify-content: center;
73 | align-items: center;
74 | cursor: pointer;
75 | animation: ${jump} 0.5s infinite;
76 |
77 | }
78 |
79 | @media (max-width:1200px) {
80 | .top-btn {
81 | font-size: 1.5rem;
82 | width: 1.6rem;
83 | height: 1.6rem;
84 | bottom: 1rem;
85 | left: 1rem;
86 |
87 | }
88 | }
89 | `;
90 |
91 |
92 | export default GoToTop;
--------------------------------------------------------------------------------
/frontend/src/Components/Habit_Tracker/HabitsData.js:
--------------------------------------------------------------------------------
1 | import { FaRunning ,FaGlassWhiskey} from 'react-icons/fa';
2 | import { CgGym } from 'react-icons/cg';
3 | import { GiNightSleep } from 'react-icons/gi';
4 | import { FcReading } from 'react-icons/fc';
5 |
6 |
7 | export const habits = [{
8 | name:"Water",
9 | detail:"Drinking 3L of water daily",
10 | icon:
43 |
44 |
46 |
50 |
51 |
52 |
53 | Register today and seize a fresh start for your life!
54 |
55 |
66 |
67 |
68 |
69 | );
70 | };
71 |
72 | export default HeroSection;
73 |
--------------------------------------------------------------------------------
/frontend/src/Components/InfoSection/Data.js:
--------------------------------------------------------------------------------
1 | export const homeObjOne = {
2 | id: 'about',
3 | lightBg: false,
4 | lightText: true,
5 | lightTextDesc: true,
6 | topLine: "Let's come together",
7 | headline: 'One Stop Solution for a Healthy Life',
8 | description: 'UMatter is a one and all platform for you to help you out in quitting smoking and drinking by providing personalized consultations and medications making you a step closer to leading a healthy life.',
9 | buttonLabel: 'Get Started',
10 | imgStart: false ,
11 | img: require('../../images/about.webp'),
12 | alt: 'Doctor',
13 | dark: true,
14 | primary: true,
15 | darkText: false
16 |
17 | };
--------------------------------------------------------------------------------
/frontend/src/Components/InfoSection/InfoElements.js:
--------------------------------------------------------------------------------
1 | // import styled from 'styled-components';
2 | // import { motion } from 'framer-motion';
3 |
4 | // export const AboutContainer = styled.div`
5 | // color : var(--text-clr);
6 | // // background: ${({lightBg})=> (lightBg ? '#f9f9f9' : '#010606')};
7 | // background : var(--bg-clr);
8 | // @media screen and (max-width: 768px){
9 | // padding: 100px 0;
10 | // }
11 | // `;
12 |
13 | // export const AboutWrapper = styled.div`
14 | // display: grid;
15 | // z-index: 1;
16 | // height: 860px;
17 | // width: 100%;
18 | // max-width: 1100px;
19 | // margin-right: auto;
20 | // margin-left: auto;
21 | // padding: 0 24px;
22 | // justify-content: center;
23 | // `
24 | // export const AboutRow = styled.div`
25 | // display: grid;
26 | // grid-auto-columns: minmax(auto, 1fr);
27 | // align-items: center;
28 | // grid-template-areas: ${({imgStart})=> (imgStart ? `'col2 col1'` : `'col1 col2'`)};
29 |
30 | // @media screen and (max-width: 768px){
31 | // grid-template-areas: ${({imgStart})=> (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
32 |
33 | // }
34 | // `;
35 | // export const Column1 = styled.div`
36 | // margin-bottom: 15px;
37 | // padding: 0 15px;
38 | // grid-area: col1;
39 | // `;
40 | // export const Column2 = styled.div`
41 | // margin-bottom: 15px;
42 | // padding: 0 15px;
43 | // grid-area: col2;
44 | // `;
45 | // export const TextWrapper = motion(styled.div`
46 | // max-width: 540px;
47 | // padding-top: 0;
48 | // padding-bottom: 60px;
49 | // `);
50 | // export const TopLine = styled.p`
51 | // opacity: 1;
52 | // color: #01bf71;
53 | // font-size: 16px;
54 | // line-height: 16px;
55 | // font-weight: 700;
56 | // letter-spacing: 1.4px;
57 | // text-transform: uppercase;
58 | // margin-bottom: 16px;
59 | // `
60 |
61 | // export const Heading = styled.h1`
62 | // margin-bottom: 24px;
63 | // font-size: 28px;
64 | // line-height: 1.1;
65 | // font-weight: 600;
66 | // // color: ${({lightText})=> (lightText ? '#f7f8fa' : '#010606')};
67 | // color : var(--text-clr);
68 | // @media screen and (max-width: 480px){
69 | // font-size: 32px;
70 | // }
71 | // `
72 | // export const SubTitle = styled.p`
73 | // max-width: 440px;
74 | // margin-bottom: 35px;
75 | // font-size: 18px;
76 | // line-height: 24px;
77 | // // color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
78 | // color: var(--text-clr);
79 | // `
80 | // export const BtnWrap = styled.div`
81 | // display: flex;
82 | // justify-content: flex-start;
83 | // `
84 |
85 | // export const Img = styled.img`
86 | // width: 100%;
87 | // margin: 0 0 10px 0;
88 | // padding-right: 0;
89 | // `
90 |
91 | import styled from "styled-components";
92 | import { motion } from "framer-motion";
93 |
94 | export const AboutContainer = styled.div`
95 | color: var(--text-clr);
96 | // background: ${({ lightBg }) => (lightBg ? "#f9f9f9" : "#010606")};
97 | background: var(--bg-clr);
98 | @media screen and (max-width: 768px) {
99 | padding: 100px 0;
100 | text-align: center;
101 | }
102 | `;
103 |
104 | export const AboutWrapper = styled.div`
105 | display: flex;
106 | flex-direction: column;
107 | z-index: 1;
108 | padding: 0 24px;
109 | justify-content: center;
110 | `;
111 | export const AboutRow = styled.div`
112 | display: grid;
113 | grid-auto-columns: minmax(auto, 1fr);
114 | align-items: center;
115 | grid-template-areas: ${({ imgStart }) =>
116 | imgStart ? `'col2 col1'` : `'col1 col2'`};
117 | background-color: ${({ theme }) =>
118 | theme.defaultColor}; /* Set a default background color */
119 |
120 | /* Set the background color based on the body class */
121 | body.light-theme & {
122 | background-color: #ffd60a; /* Set background color to yellow if body has 'light-theme' class */
123 | }
124 |
125 | body.dark-theme & {
126 | background-color: #030640cc; /* Set background color to green if body has 'dark-theme' class */
127 | }
128 | margin-top: 2rem;
129 | border-radius: 50px;
130 | @media screen and (max-width: 768px) {
131 | grid-template-areas: ${({ imgStart }) =>
132 | imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
133 | }
134 | `;
135 | export const ImgWrap = motion(styled.div`
136 | max-width: 555px;
137 | height: 100%;
138 | `);
139 | export const Column1 = styled.div`
140 | margin-bottom: 15px;
141 | padding: 0 15px;
142 | grid-area: col1;
143 | font-size: 1.5rem;
144 | `;
145 | export const Column2 = styled.div`
146 | display: flex;
147 | flex-direction: column;
148 | align-items: center;
149 | text-align: center;
150 | justify-content: center;
151 | margin-bottom: 15px;
152 | padding: 0 15px;
153 | grid-area: col2;
154 | `;
155 | export const TextWrapper = motion(styled.div`
156 | max-width: 540px;
157 | padding-top: 0;
158 | padding-bottom: 60px;
159 | margin: 3rem;
160 | font-size: 2rem;
161 | `);
162 | export const TopLine = styled.p`
163 | opacity: 1;
164 | color: #01bf71;
165 | font-size: 1.6rem;
166 | line-height: 16px;
167 | font-weight: 700;
168 | letter-spacing: 1.4px;
169 | text-transform: uppercase;
170 | margin-bottom: 16px;
171 | `;
172 |
173 | export const Heading = styled.h1`
174 | margin-bottom: 24px;
175 | font-size: 28px;
176 | line-height: 1.1;
177 | font-weight: 600;
178 | // color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
179 | color: var(--text-clr);
180 | @media screen and (max-width: 480px) {
181 | font-size: 32px;
182 | }
183 | `;
184 | export const SubTitle = styled.p`
185 | ${"" /* max-width: 440px; */}
186 | margin-bottom: 35px;
187 | font-size: 1.6rem;
188 | line-height: 24px;
189 | // color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
190 | color: var(--text-clr);
191 | `;
192 | export const BtnWrap = styled.div`
193 | display: flex;
194 | font-size: 1.6rem;
195 | @media screen and (max-width: 768px) {
196 | flex-direction: column;
197 | justify-content: center;
198 | align-items: center;
199 | }
200 | `;
201 |
202 | export const Img = styled.img`
203 | width: 100%;
204 | margin: 0 0 10px 0;
205 | padding-right: 0;
206 | `;
207 |
--------------------------------------------------------------------------------
/frontend/src/Components/Loader/Loader.css:
--------------------------------------------------------------------------------
1 | #preloader {
2 | position: absolute;
3 | height: 15vh;
4 | width: 10vw;
5 | top: 40%;
6 | left: 45%;
7 | }
--------------------------------------------------------------------------------
/frontend/src/Components/Loader/Loader.js:
--------------------------------------------------------------------------------
1 | import Hourglass from "../../images/Hourglass.gif"
2 | import "./Loader.css"
3 |
4 | export const Loader = () =>{
5 | return (
6 | 
7 | )
8 | }
--------------------------------------------------------------------------------
/frontend/src/Components/Navbar/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { auth } from "../../firebase-config";
3 | import {
4 | FaBars,
5 | FaRegWindowClose,
6 | } from "react-icons/fa";
7 | import DarkMode from "../DarkMode/DarkMode";
8 | import { useNavigate } from "react-router-dom";
9 | import {
10 | Nav,
11 | NavbarContainer,
12 | NavLogo,
13 | MobileIcon,
14 | NavMenu,
15 | Navitem,
16 | NavLinks,
17 | NavBtn,
18 | NavBtnLink,
19 | LogoContainer,
20 | LogoinnerContainer,
21 | NavBtnMobile,
22 | } from "./NavbarElements";
23 | import manifest from "../../../src/assests/manifest.json";
24 |
25 | const faviconSrc = manifest.icons[0].src;
26 | const glassStyle = {
27 | background: "rgba(40, 30, 30, 0.3)",
28 | // borderRadius: "16px",
29 | boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
30 | backdropFilter: "blur(7.1px)",
31 | WebkitBackdropFilter: "blur(7.1px)",
32 | border: "1px solid rgba(40, 30, 30, 0.18)",
33 | };
34 | const Navbar = ({ toggle }) => {
35 | const [isOpen, setIsOpen] = useState(false);
36 | const [navbarBg, setNavbarBg] = useState(glassStyle);
37 | const [user, setUser] = useState(null);
38 |
39 | useEffect(() => {
40 | // Add an observer to check for user authentication state changes
41 | const unsubscribe = auth.onAuthStateChanged((user) => {
42 | setUser(user);
43 | });
44 |
45 | // Clean up the observer on component unmount
46 | return () => unsubscribe();
47 | }, []);
48 | useEffect(() => {
49 | const handleScroll = () => {
50 | const scrolled = window.scrollY;
51 | setNavbarBg(
52 | scrolled > 0 ? { backgroundColor: "var(--bg-clr)" } : glassStyle
53 | );
54 | };
55 |
56 | window.addEventListener("scroll", handleScroll);
57 |
58 | return () => {
59 | window.removeEventListener("scroll", handleScroll);
60 | };
61 | }, []);
62 |
63 | const navigate = useNavigate();
64 |
65 | const handleBlogsClick = () => {
66 | setIsOpen(false); // Close the navbar
67 | navigate("/blogs");
68 | };
69 | const handleFeedbackClick = () => {
70 | setIsOpen(false); // Close the navbar
71 | navigate("/feedback");
72 | };
73 |
74 | const handleHomeClick = () => {
75 | setIsOpen(false); // Close the navbar
76 | navigate("/");
77 | };
78 |
79 | const handleAboutClick = () => {
80 | setIsOpen(false); // Close the navbar
81 | navigate("/");
82 | };
83 |
84 | const handleServicesClick = () => {
85 | setIsOpen(false); // Close the navbar
86 | navigate("/");
87 | };
88 |
89 | const handleTestimonialsClick = () => {
90 | setIsOpen(false); // Close the navbar
91 | navigate("/");
92 | };
93 |
94 | const handleTeamClick = () => {
95 | setIsOpen(false); // Close the navbar
96 | navigate("/team");
97 | };
98 |
99 | // Function to handle navbar toggle
100 | const handleToggle = () => {
101 | setIsOpen(!isOpen);
102 | };
103 |
104 | return (
105 |
171 | );
172 | };
173 |
174 | export default Navbar;
175 |
--------------------------------------------------------------------------------
/frontend/src/Components/Profile/index.js:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import React from 'react';
4 | import {
5 | Container,
6 | Icons,
7 | FormButton,
8 | FormContent,
9 | OuterDiv,
10 | FormWrap,
11 | Text,
12 | } from './profileElements';
13 | import { useState } from 'react';
14 |
15 | sessionStorage.setItem("authorizationToken", undefined);
16 | sessionStorage.setItem("username", undefined);
17 |
18 | const ProfilePage = () => {
19 | const [isSignedIn, setIsSignedIn] = useState(false);
20 |
21 | const authorizationToken = sessionStorage.getItem("authorizationToken");
22 | const username = sessionStorage.getItem("username");
23 | const sendFetchRequest = async () => {
24 | try {
25 | // console.log(authorizationToken);
26 | const options = {
27 | method: 'GET',
28 | headers: {
29 | 'Content-Type': 'application/json',
30 | Authorization:authorizationToken,
31 | },
32 | };
33 | const response = await fetch(`https://umatter.onrender.com/${username}/`, options);
34 | const data = response.json();
35 | if(data.message === undefined){
36 | // setIsSignedIn(true);
37 | this.setState({
38 | isSignedIn:true
39 | });
40 | }
41 | } catch (error) {
42 | console.log(error);
43 | }
44 | };
45 |
46 | sendFetchRequest();
47 |
48 | const logoutFunction = () => {
49 | console.log("logout butten clicked");
50 | sessionStorage.clear();
51 | sessionStorage.setItem("authorizationToken", undefined);
52 | sessionStorage.setItem("username", undefined);
53 | setIsSignedIn(false);
54 | }
55 |
56 | return (
57 | <>
58 |
59 |
60 |
64 | {!isSignedIn && (
65 | you are not signed in
66 | )}
67 | {isSignedIn && (
68 | you are signed In
69 | )}
76 |
77 |
78 |
79 |
80 | );
81 |
82 | };
83 |
84 | export default ProfilePage;
--------------------------------------------------------------------------------
/frontend/src/Components/Profile/profileElements.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Link } from 'react-router-dom';
3 |
4 | export const Container = styled.div`
5 | min-height: 692px;
6 | position: fixed;
7 | bottom: 0;
8 | left: 0;
9 | right: 0;
10 | top: 0;
11 | z-index: 0;
12 | overflow: hidden;
13 | background: linear-gradient(
14 | 108deg,
15 | rgba(1, 147, 86, 1) 0%,
16 | rgba(10, 201, 122, 1) 100%
17 | );
18 | `;
19 |
20 | export const FormWrap = styled.div`
21 | height: 100%;
22 | display: flex;
23 | flex-direction: column;
24 | justify-content: center;
25 |
26 | @media screen and (max-width: 400px) {
27 | height: 80%;
28 | }
29 | `;
30 |
31 | export const Icons = styled(Link)`
32 | margin-left: 32px;
33 | margin-top: 32px;
34 | text-decoration: none;
35 | color: #fff;
36 | font-weight: 700;
37 | font-size: 32px;
38 |
39 | @media screen and (max-width: 480px) {
40 | margin-left: 16px;
41 | margin-top: 8px;
42 | }
43 | `;
44 |
45 | export const FormContent = styled.div`
46 | height: 100%;
47 | display: flex;
48 | flex-direction: column;
49 | justify-content: center;
50 | align-items: center;
51 |
52 | @media screen and (max-width: 480px) {
53 | padding: 10px;
54 | }
55 | `;
56 |
57 | export const OuterDiv = styled.div`
58 | background: #010101;
59 | max-width: 400px;
60 | height: auto;
61 | width: 100%;
62 | z-index: 1;
63 | display: grid;
64 | margin: 0 auto;
65 | padding: 40px 32px;
66 | border-radius: 4px;
67 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
68 |
69 | @media screen and (max-width: 400px) {
70 | padding: 32px 32px;
71 | }
72 | `;
73 |
74 | export const FormH1 = styled.label`
75 | margin-bottom: 40px;
76 | color: #fff;
77 | font-size: 20px;
78 | font-weight: 400;
79 | text-align: center;
80 | `;
81 |
82 | export const FormLabel = styled.label`
83 | margin-bottom: 8px;
84 | color: #fff;
85 | font-size: 14px;
86 | `;
87 |
88 | export const FormInput = styled.input`
89 | margin-bottom: 40px;
90 | padding: 10px;
91 | border: none;
92 | border-radius: 4px;
93 | font-size:18px;
94 | border:none;
95 | outline:none;
96 | `;
97 |
98 | export const FormButton = styled.button`
99 | background: #01bf71;
100 | padding: 16px 0;
101 | border: none;
102 | border-radius: 4px;
103 | color: #fff;
104 | font-size: 20px;
105 | cursor: pointer;
106 | &:hover {
107 | opacity : 0.8;
108 | transition: 0.25s ease;
109 | }
110 | `;
111 |
112 | export const Text = styled.span`
113 | text-align: center;
114 | margin-top: 24px;
115 | color: #fff;
116 | font-size: 14px;
117 | `;
--------------------------------------------------------------------------------
/frontend/src/Components/Services/CardAnimation.js:
--------------------------------------------------------------------------------
1 | export const cardOneVariants = {
2 | hidden: {
3 | opacity: 0,
4 | x: -200
5 | },
6 | visible: {
7 | opacity: 1,
8 | x: 0,
9 | transition: {delay: 0.15, duration: 1}
10 | }
11 | }
12 |
13 | export const cardTwoVariants = {
14 | hidden: {
15 | opacity: 0,
16 | y: 200
17 | },
18 | visible: {
19 | opacity: 1,
20 | y: 0,
21 | transition: {delay: 0.15, duration: 1}
22 | }
23 | }
24 |
25 | export const cardThreeVariants = {
26 | hidden: {
27 | opacity: 0,
28 | x: 200
29 | },
30 | visible: {
31 | opacity: 1,
32 | x: 0,
33 | transition: {delay: 0.15, duration: 1}
34 | }
35 | }
36 | export const cardFourVariants = {
37 | hidden: {
38 | opacity: 0,
39 | x: 200
40 | },
41 | visible: {
42 | opacity: 1,
43 | x: 0,
44 | transition: {delay: 0.15, duration: 1}
45 | }
46 | }
--------------------------------------------------------------------------------
/frontend/src/Components/Services/ServicesElements.js:
--------------------------------------------------------------------------------
1 | // import styled from "styled-components";
2 | // import { motion } from "framer-motion";
3 |
4 | // export const ServicesContainer = motion(styled.div`
5 | // height: 800px;
6 | // padding: 30px;
7 | // padding-bottom: 150px;
8 | // display: flex;
9 | // flex-direction: column;
10 | // justify-content: center;
11 | // align-items: center;
12 | // background: var(--bg-clr);
13 |
14 | // @media screen and (max-width: 768px) {
15 | // height: 1400px;
16 | // }
17 | // @media screen and (max-width: 992px) {
18 | // height: 1200px;
19 | // }
20 | // @media screen and (max-width: 480px) {
21 | // height: 1500px;
22 | // }
23 | // `);
24 |
25 | // export const ServicesWrapper = styled.div`
26 | // max-width: 1000px;
27 | // margin: 0 auto;
28 | // display: grid;
29 | // grid-template-columns: 1fr 1fr 1fr;
30 | // align-items: center;
31 | // grid-gap: 16px;
32 | // padding: 0 30px;
33 |
34 | // @media screen and (max-width: 1000px) {
35 | // grid-template-columns: 1fr 1fr;
36 | // }
37 | // @media screen and (max-width: 768px) {
38 | // grid-template-columns: 1fr;
39 | // padding: 0 20px;
40 | // }
41 | // `;
42 |
43 | // export const ServicesCard = styled.div`
44 | // align-items: center;
45 | // display: flex;
46 | // flex-direction: column;
47 | // justify-content: flex-start;
48 | // border-radius: 10px;
49 | // height: 380px;
50 | // padding: 30px;
51 | // box-shadow: 0 1px 3px gray;
52 | // color: var(--text-clr);
53 | // transition: all 0.2s ease-in-out;
54 |
55 | // &:hover {
56 | // transform: scale(1.02);
57 | // transition: all 0.2s ease-in-out;
58 | // cursor: pointer;
59 | // }
60 | // `;
61 |
62 | // export const ServicesIcon = styled.img`
63 | // height: 170px;
64 | // width: 180px;
65 | // margin-bottom: 10px;
66 | // border: 0.5px solid gray;
67 | // box-shadow: 3px 3px 3px gray;
68 | // `;
69 |
70 | // export const ServicesH1 = styled.h1`
71 | // margin-bottom: 64px;
72 | // font-size: 50px;
73 | // line-height: 1.1;
74 | // font-weight: 600;
75 | // text-transform: uppercase;
76 | // color: var(--text-clr);
77 |
78 | // @media screen and (max-width: 480px) {
79 | // font-size: 2rem;
80 | // }
81 | // `;
82 |
83 | // export const ServicesH2 = styled.h2`
84 | // font-size: 1rem;
85 | // margin-bottom: 10px;
86 | // `;
87 |
88 | // export const ServicesP = styled.p`
89 | // font-size: 1rem;
90 | // text-align: center;
91 | // `;
92 |
93 | import styled from "styled-components";
94 | import { motion } from "framer-motion";
95 |
96 | export const ServicesContainer = motion(styled.div`
97 | /* height: 1000px; */
98 | padding: 30px;
99 | padding-bottom: 150px;
100 | display: flex;
101 | flex-direction: column;
102 | justify-content: center;
103 | align-items: center;
104 | background: var(--bg-clr);
105 | // background: black;
106 | `);
107 |
108 | export const ServicesWrapper = styled.div`
109 | max-width: 1000px;
110 | margin: 0 auto;
111 | display: grid;
112 | grid-template-columns: 1fr 1fr 1fr 1fr;
113 | align-items: center;
114 | grid-gap: 50px ;
115 |
116 | // padding: 0 1px;
117 | margin : 0 140px 0 0;
118 |
119 |
120 | @media screen and (max-width: 1000px) {
121 | grid-template-columns: 1fr 1fr;
122 | }
123 | @media screen and (max-width: 768px) {
124 | grid-template-columns: 1fr;
125 | padding: 0 20px;
126 | }
127 | `;
128 |
129 | export const ServicesCard = styled.div`
130 | align-items: center;
131 | text-align: center;
132 | display: flex;
133 | flex-direction: column;
134 | justify-content: flex-start;
135 | border-radius: 10px;
136 | border-width: 3px;
137 | // boder-color:black;
138 | border-color: rgb(11, 115, 72);
139 | // max-height: 380px;
140 | padding: 30px;
141 | //height:0px;
142 | width:255px;
143 | box-shadow: 0 1px 3px gray;
144 | color: var(--text-clr);
145 | transition: all 0.8s ease-in-out;
146 | transform-origin: center center;
147 | position: relative;
148 | height: 440px;
149 |
150 | overflow: hidden;
151 |
152 | &:before {
153 | display: relative;
154 | position: absolute;
155 | // top: 50%;
156 | // left: 50%;
157 | width: 550px;
158 | height: 550px;
159 | // margin-left: -100px 0px;
160 | // margin-top: -100px;
161 | margin: -120px 0px;
162 | content: "";
163 | // background: #fff;
164 | background: var(--bg-clr);
165 |
166 | // border-style: solid;
167 | // border-width: 2px;
168 | // border-radius: 500px;
169 | // border-color:rgb(1, 191, 113);
170 | transform-origin: center center;
171 | transition: all 0.5s ease-in-out;
172 | box-sizing: border-box;
173 | overflow: hidden;
174 | }
175 |
176 | &:hover {
177 | //background: black;
178 | overflow: hidden;
179 | transform: scale(1.03);
180 | transition: all 0.5s ease-in-out;
181 | cursor: pointer;
182 |
183 | &:before {
184 | //border-width: 00px;
185 | background: rgb(1, 191, 113);
186 | }
187 | }
188 | // &:after{
189 | // transition: all 0.2s ease-out-in;
190 | // }
191 | `;
192 |
193 | export const ServicesIcon = styled.img`
194 | height: 170px;
195 | width: 180px;
196 | margin-bottom: 10px;
197 | border: 1.5px solid gray;
198 | //border: 0.5px solid rgb(11, 115, 72)
199 | box-shadow: 3px 3px 3px gray;
200 | position: relative;
201 | `;
202 |
203 | export const ServicesH1 = styled.h1`
204 | margin-bottom: 64px;
205 | font-size: 50px;
206 | line-height: 1.1;
207 | font-weight: 600;
208 | text-transform: uppercase;
209 | color: var(--text-clr);
210 | // color:#fff;
211 |
212 | @media screen and (max-width: 480px) {
213 | font-size: 2rem;
214 | }
215 | `;
216 |
217 | export const ServicesH2 = styled.h2`
218 | font-size: 1rem;
219 | margin-bottom: 10px;
220 | position: relative;
221 | // color:#fff;
222 | color: var(--text-clr);
223 | // background: var(--bg-clr);
224 | `;
225 |
226 | export const ServicesP = styled.p`
227 | font-size: 1rem;
228 | text-align: center;
229 | position: relative;
230 | color: var(--text-clr);
231 | // background: var(--bg-clr);
232 | `;
233 |
--------------------------------------------------------------------------------
/frontend/src/Components/Services/Services_Data.js:
--------------------------------------------------------------------------------
1 | import Icon1 from '../../images/image1.webp';
2 | import Icon2 from '../../images/image2.webp';
3 | import Icon3 from '../../images/image3.webp';
4 | import Icon4 from '../../images/image4.webp';
5 | export const Services_Data=[
6 | {
7 | id: 'consult',
8 | icon: Icon1,
9 | title: 'Consult With Doctor',
10 | description: 'Consult with professional doctors and therapists regarding your health.'
11 | },
12 | {
13 | id: 'workshops',
14 | icon: Icon2,
15 | title: 'Attend Workshops',
16 | description: 'Book your slot now for amazing therapies and sessions that will make your life better.'
17 | },
18 | {
19 | id: 'connect',
20 | icon: Icon3,
21 | title: 'Connect with Friends',
22 | description: 'Be a part of the amazing community and connect with them.'
23 | },
24 | {
25 | id: 'habit',
26 | icon: Icon4,
27 | title: 'Habit Tracker',
28 | description: 'Boost your potential by tracking your habits.',
29 | href:"/services/HabitTracker"
30 | }
31 | ];
--------------------------------------------------------------------------------
/frontend/src/Components/Signup/Captcha.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import captchaBg from "../../images/captcha_Bg.webp"
3 | import { FiRefreshCcw } from "react-icons/fi"
4 |
5 | const Captcha = ({ message, trackState }) => {
6 | const [user, setUser] = useState({
7 | username: ""
8 | });
9 |
10 | const characters = 'abcdefghijklmnopqrstuvwxyz1234567890';
11 | function generateString(length) {
12 | let result = '';
13 | const charactersLength = characters.length;
14 | for (let i = 0; i < length; i++) {
15 | result += characters.charAt(Math.floor(Math.random() * charactersLength));
16 | }
17 | return result;
18 | }
19 | const [captcha, setCaptcha] = useState(generateString(6))
20 | let handleCaptcha = (e) => {
21 | let name = e.target.name;
22 | let value = e.target.value;
23 | user[name] = value;
24 | setUser(user);
25 |
26 | }
27 | const onSubmit = () => {
28 | var element = document.getElementById("succesBTN");
29 | var inputData = document.getElementById("inputType");
30 | element.style.cursor = "wait";
31 | element.innerHTML = "Checking...";
32 | inputData.disabled = true;
33 | element.disabled = true;
34 | var myFunctions = function () {
35 | if (captcha === user.username) {
36 | element.innerHTML = "Captcha Verified";
37 | element.style.cursor = "not-allowed";
38 | element.style.backgroundColor = "#01bf71"
39 | message(true)
40 | }
41 | else {
42 | element.style.backgroundColor = "red";
43 | element.style.cursor = "not-allowed";
44 | element.innerHTML = "Not Matched";
45 | element.disabled = true;
46 | var myFunction = function () {
47 | element.style.cursor = "pointer";
48 | element.innerHTML = "Verify Captcha";
49 | element.style.backgroundColor = "#01bf71"
50 | element.disabled = false;
51 | inputData.disabled = false;
52 | setCaptcha(generateString(6))
53 | };
54 | setTimeout(myFunction, 2000);
55 | }
56 | }
57 | setTimeout(myFunctions, 2000);
58 | };
59 |
60 | const onRegenerate = () => {
61 | setCaptcha(generateString(6))
62 | }
63 | return (
64 | <>
65 | ![]()
` was still loading
66 | it would show a dark gray rectangle. */
67 | /* For some reason the `![]()
` is not stretched to 100% width and height
68 | and sometime there can be seen white pixels of the background at top and bottom. */
69 | background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
70 | /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
71 | /* For some reason the `![]()
` is not stretched to 100% width and height
72 | and sometime there can be seen white pixels of the background at top and bottom,
73 | so an additional "inset" border is added. */
74 | box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
75 | var(--PhoneInputCountryFlag-borderColor),
76 | inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
77 | var(--PhoneInputCountryFlag-borderColor);
78 | }
79 |
80 | .PhoneInputCountryIconImg {
81 | /* Fixes weird vertical space above the flag icon. */
82 | /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
83 | display: block;
84 | /* 3rd party flag icons won't stretch if they have `width` and `height`.
85 | Also, if an icon's aspect ratio was different, it wouldn't fit too. */
86 | width: 100%;
87 | height: 100%;
88 | }
89 |
90 | .PhoneInputInternationalIconPhone {
91 | opacity: var(--PhoneInputInternationalIconPhone-opacity);
92 | }
93 |
94 | .PhoneInputInternationalIconGlobe {
95 | opacity: var(--PhoneInputInternationalIconGlobe-opacity);
96 | }
97 |
98 | /* Styling native country ``. */
99 |
100 | .PhoneInputCountry {
101 | position: relative;
102 | align-self: stretch;
103 | display: flex;
104 | align-items: center;
105 | margin-right: var(--PhoneInputCountrySelect-marginRight);
106 | margin-bottom: 16px;
107 | }
108 |
109 | .PhoneInputCountrySelect {
110 | position: absolute;
111 | top: 0;
112 | left: 0;
113 | height: 100%;
114 | width: 100%;
115 | z-index: 1;
116 | border: 0;
117 | opacity: 0;
118 | cursor: pointer;
119 | }
120 |
121 | .PhoneInputCountrySelect[disabled],
122 | .PhoneInputCountrySelect[readonly] {
123 | cursor: default;
124 | }
125 |
126 | .PhoneInputCountrySelectArrow {
127 | display: block;
128 | content: "";
129 | width: var(--PhoneInputCountrySelectArrow-width);
130 | height: var(--PhoneInputCountrySelectArrow-width);
131 | margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
132 | border-style: solid;
133 | border-color: var(--PhoneInputCountrySelectArrow-color);
134 | border-top-width: 0;
135 | border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
136 | border-left-width: 0;
137 | border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
138 | transform: var(--PhoneInputCountrySelectArrow-transform);
139 | opacity: var(--PhoneInputCountrySelectArrow-opacity);
140 | }
141 |
142 | .PhoneInputCountrySelect:focus
143 | + .PhoneInputCountryIcon
144 | + .PhoneInputCountrySelectArrow {
145 | opacity: 1;
146 | color: var(--PhoneInputCountrySelectArrow-color--focus);
147 | }
148 |
149 | .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
150 | box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
151 | var(--PhoneInputCountryFlag-borderColor--focus),
152 | inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
153 | var(--PhoneInputCountryFlag-borderColor--focus);
154 | }
155 |
156 | .PhoneInputCountrySelect:focus
157 | + .PhoneInputCountryIcon
158 | .PhoneInputInternationalIconGlobe {
159 | opacity: 1;
160 | color: var(--PhoneInputCountrySelectArrow-color--focus);
161 | }
162 |
--------------------------------------------------------------------------------
/frontend/src/Components/Signup/SignupElements.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const FormContainer = styled.div`
4 | background-color: #fff;
5 | position: relative;
6 | overflow: hidden;
7 | width: 100%;
8 | max-width: 100%;
9 | height:88vh;
10 | display: flex;
11 | @media only screen and (max-width: 550px) {
12 | flex-direction: column;
13 | margin: 0;
14 | }
15 | `;
16 |
17 | export const SignUpContainer = styled.div`
18 | width: 55%;
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | min-height: 100%;
23 |
24 | @media only screen and (max-width: 550px) {
25 | padding: 15px 5px;
26 | width: 100%;
27 | }
28 | `;
29 |
30 | export const LeftContainer = styled.div`
31 | width: 45%;
32 | display: flex;
33 | flex-direction: column;
34 | justify-content: center;
35 | align-items: center;
36 | background: linear-gradient(147.84deg, #01bf71 8.1%, #00492b 95.42%);
37 | /* min-height: 100%; */
38 |
39 | @media only screen and (max-width: 550px) {
40 | width: 100%;
41 | }
42 | `;
43 |
44 | export const LeftHeading = styled.h1`
45 | font-family: "Poppins";
46 | font-style: normal;
47 | font-weight: 700;
48 | font-size: 2rem;
49 | line-height: 3rem;
50 | color: #ffffff;
51 | margin-top:20px;
52 | `;
53 |
54 | export const LeftPara = styled.p`
55 | font-family: "Poppins";
56 | font-style: normal;
57 | font-weight: 400;
58 | font-size: 0.8rem;
59 | line-height: 1rem;
60 | color: #ffffff;
61 | margin-top: 0.4rem;
62 | width: 70%;
63 | text-align: center;
64 | `;
65 |
66 | export const SignUpForm = styled.form`
67 | min-width: 100%;
68 | height: 100%;
69 | display: flex;
70 | flex-direction: column;
71 | justify-content: center;
72 | align-items: center;
73 | `;
74 |
75 | export const SignUph1 = styled.h1`
76 | font-family: "Poppins";
77 | font-style: normal;
78 | font-weight: 700;
79 | font-size: 2.3rem;
80 | line-height: 4rem;
81 | margin-bottom: 1rem;
82 | color: #01bf71;
83 | text-align: center;
84 | `;
85 |
86 | export const FormInput = styled.input`
87 | width: 70%;
88 | padding: 0.7rem;
89 | border-radius: 5px;
90 | border: None;
91 | background: rgba(1, 191, 113, 0.3);
92 | font-family: "Poppins";
93 | font-style: normal;
94 | font-weight: 400;
95 | font-size: 0.8rem;
96 | line-height: 0.8rem;
97 | color: Black;
98 | margin-bottom: 1rem;
99 | outline: none;
100 | box-sizing: border-box;
101 | border: 1px solid transparent;
102 |
103 | &::placeholder {
104 | color: rgba(0, 0, 0, 0.5);
105 | }
106 |
107 | &:hover {
108 | border: 1px solid #01bf71;
109 | }
110 |
111 | &:focus {
112 | border-radius: 0;
113 | border: 2px solid #01bf71;
114 | }
115 | `;
116 |
117 | export const PhoneContainer = styled.div`
118 | display: flex;
119 | width: 70%;
120 |
121 | input {
122 | &:nth-of-type(1) {
123 | width: 20%;
124 | float: left;
125 | margin-right: 0.6rem;
126 | }
127 |
128 | &:nth-of-type(2) {
129 | width: 80%;
130 | float: right;
131 | }
132 | }
133 | `;
134 |
135 | export const PasswordContainer = styled.div`
136 | position: relative;
137 | display: flex;
138 | align-items: center;
139 | justify-content: center;
140 | width: 100%;
141 | `;
142 |
143 | export const SignUpButton = styled.button`
144 | width: 9rem;
145 | font-family: "Poppins";
146 | font-style: normal;
147 | font-weight: 400;
148 | font-size: 1rem;
149 | border-radius: 50px;
150 | background: #01bf71;
151 | white-space: nowrap;
152 | color: #fff;
153 | margin-top: 0.8rem;
154 | cursor: pointer;
155 | text-decoration: none;
156 |
157 | &:hover {
158 | background: #00492b;
159 | color: #ffffff;
160 | }
161 |
162 | &:active {
163 | transform: scale(0.95);
164 | }
165 | `;
166 |
167 | export const Image = styled.img`
168 | height: auto;
169 | width: 90%;
170 | `;
171 |
--------------------------------------------------------------------------------
/frontend/src/Components/Team/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 |
3 | function Teams() {
4 | const [contributors, setContributors] = useState([]);
5 |
6 | useEffect(() => {
7 | const owner = "MonalikaPatnaik";
8 | const repo = "UMatter";
9 |
10 | fetch(`https://api.github.com/repos/${owner}/${repo}/contributors`)
11 | .then((response) => response.json())
12 | .then((data) => {
13 | setContributors(data);
14 | })
15 | .catch((error) => {
16 | console.error("Error fetching contributors:", error);
17 | });
18 | }, []);
19 |
20 | return (
21 |
22 |
53 | );
54 | }
55 |
56 | export default Teams;
57 |
--------------------------------------------------------------------------------
/frontend/src/Components/Testimonials/CardAnimation.js:
--------------------------------------------------------------------------------
1 | export const cardOneVariants = {
2 | hidden: {
3 | opacity: 0,
4 | x: -200
5 | },
6 | visible: {
7 | opacity: 1,
8 | x: 0,
9 | transition: {delay: 0.15, duration: 1}
10 | }
11 | }
12 |
13 | export const cardTwoVariants = {
14 | hidden: {
15 | opacity: 0,
16 | y: 200
17 | },
18 | visible: {
19 | opacity: 1,
20 | y: 0,
21 | transition: {delay: 0.15, duration: 1}
22 | }
23 | }
24 |
25 | export const cardThreeVariants = {
26 | hidden: {
27 | opacity: 0,
28 | x: 200
29 | },
30 | visible: {
31 | opacity: 1,
32 | x: 0,
33 | transition: {delay: 0.15, duration: 1}
34 | }
35 | }
--------------------------------------------------------------------------------
/frontend/src/Components/Testimonials/CardStyle.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/Components/Testimonials/CardStyle.js
--------------------------------------------------------------------------------
/frontend/src/Components/Testimonials/ProductForSlider.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Card } from "react-bootstrap";
3 | import './ProductSlider.css'
4 |
5 |
6 | const ProductCard = ({product}) => {
7 | return (
8 |
101 |
102 |
103 |
104 |
105 | console.log(swiper)}
131 | // onSlideChange={() => { }}
132 | >
133 | {this.state.slides.map((slide, index) => {
134 | return (
135 |
136 |
140 | );
141 | })}
142 |
143 |
144 |
145 | );
146 | }
147 | }
148 |
149 | export default Testimonial;
150 |
--------------------------------------------------------------------------------
/frontend/src/Components/Workshops/Workshops.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import WorkshopImg from "../../images/WorkshopImg.webp";
3 | import Footer from '../Footer';
4 | import './styles.css';
5 |
6 |
7 | const Workshops = () => {
8 | return (
9 | <>
10 |
13 |
14 | {/* Tawk.to Script */}
15 |
28 |
29 |
32 | );
33 |
34 | // Register the service worker
35 | serviceWorkerRegistration.register();
--------------------------------------------------------------------------------
/frontend/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/pages/Error404.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Footer from "../Components/Footer";
3 | import Navbar from "../Components/Navbar";
4 | import errorImg from "../images/ErrorPage404-03.webp"
5 |
6 | function Error404() {
7 |
8 | const [isOpen, setIsOpen] = useState(false)
9 | const toggle = () => {
10 | setIsOpen(!isOpen)
11 | };
12 | return (
13 | <>
14 | {/* 
16 |
17 |
18 | );
19 | }
20 |
21 | export default Error404;
22 |
--------------------------------------------------------------------------------
/frontend/src/pages/ForgotPassword.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Forgotpassword from '../Components/Forgot_password/OTPVerfication';
3 | import Footer from '../Components/Footer';
4 |
5 | const SigninPage = () => {
6 | return (
7 |
33 | {/* Tags */}
34 | 
55 |
56 | {/* Content --> combination of text , images(optional), title */}
57 | {
58 | blogcontent.content.map((block,index)=>{
59 | return
80 |
81 |
82 | )
83 | }
84 |
85 | export default Blog;
86 |
--------------------------------------------------------------------------------
/frontend/src/Components/BlogPage/style.module.css:
--------------------------------------------------------------------------------
1 | .title{
2 | font-family:'Trebuchet MS', sans-serif;
3 | }
4 |
5 | .contentTitle{
6 | font-family:'Trebuchet MS', sans-serif;
7 | border-left: 6px rgba(0, 9, 130, 0.777) solid;
8 |
9 | }
10 |
--------------------------------------------------------------------------------
/frontend/src/Components/Blogs/BlogsElements.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const BlogsContainer = styled.div`
4 | height: 100%;
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: center;
8 | align-items: center;
9 | background: var(--bg-clr);
10 | `;
11 |
12 | export const ReadMoreButton = styled.button`
13 | background-color: #28b86b;
14 | cursor: pointer;
15 | color: white;
16 | border: none;
17 | padding: 10px 20px;
18 | border-radius: 4px;
19 | font-size: 16px;
20 | width: 50%;
21 | outline: none;
22 | opacity: 0;
23 | transition: opacity 0.3s ease-in-out;
24 |
25 | /* Position the button relative to its parent */
26 | position: absolute;
27 | bottom: 25px;
28 | margin-left: 24%;
29 |
30 | /* Add a higher z-index to ensure it's above other elements */
31 | z-index: 2;
32 | `;
33 |
34 |
35 |
36 | export const BlogsWrapper = styled.div`
37 | max-width: 1300px;
38 | margin: 0 auto;
39 | display: grid;
40 | justify-items:center;
41 | grid-template-columns: repeat(3, 1fr);
42 | grid-gap: 30px;
43 | padding: 0 20px;
44 |
45 | @media screen and (max-width: 900px) {
46 | grid-template-columns: repeat(2, 1fr);
47 | }
48 | @media screen and (max-width: 768px) {
49 | grid-template-columns: 1fr;
50 | padding: 0 10px;
51 | }
52 |
53 | > div:last-child {
54 | margin-bottom: 30px;
55 | }
56 | `;
57 | export const BlogsP = styled.p`
58 | font-size: 14px;
59 | text-align: center;
60 | opacity: 0;
61 | color: #fff;
62 | padding: 0 15px;
63 | margin-bottom: 3rem;
64 | transform: translateY(10px);
65 | transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
66 | `;
67 | export const BlogsIcon = styled.img`
68 | height: 100%;
69 | width: 100%;
70 | object-fit: cover;
71 | z-index: 0;
72 | position: absolute;
73 | `;
74 |
75 | export const BlogsH1 = styled.h1`
76 | margin: 50px 10px 30px 10px;
77 | opacity: 0;
78 | text-align: center;
79 | transform: translateY(10px);
80 | transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
81 | font-size: 18px;
82 | font-weight: 700;
83 | z-index: 10;
84 | // color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
85 | color: white;
86 |
87 | @media screen and (max-width: 480px) {
88 | font-size: 15px;
89 | }
90 | `;
91 |
92 |
93 |
94 |
95 | export const BlogsCard = styled.div`
96 | vertical-align: middle;
97 | box-shadow: 0 0 30px -5px rgba(0, 0, 0, 0.4);
98 | overflow: hidden;
99 | position: relative;
100 | transition: all 0.35s;
101 | height: 23rem;
102 | cursor: pointer;
103 |
104 | @media screen and (max-width: 480px) {
105 | width: 90%;
106 | }
107 |
108 | &:hover {
109 | transform: scale(1.02);
110 | transition: all 0.35s;
111 | box-shadow: 0 0 60px -15px rgba(0, 0, 0, 0.6);
112 |
113 | ${ReadMoreButton} {
114 | opacity: 1;
115 |
116 | }
117 | ${BlogsIcon}{
118 | opacity: 0.5;
119 | }
120 |
121 | ${BlogsH1}, ${BlogsP} {
122 | opacity: 1;
123 | transform: translateY(0);
124 | }
125 | }
126 | `;
--------------------------------------------------------------------------------
/frontend/src/Components/Blogs/review.css:
--------------------------------------------------------------------------------
1 | .main{
2 | background:var(--bg-clr);
3 | padding: 5rem;
4 | /* display: flex;
5 | flex-direction: column;
6 | justify-content: space-between; */
7 | width: 100%;
8 |
9 | }
10 |
11 | .main h3{
12 | color:var(--text-clr);
13 | font-size: 2rem;
14 | text-align: center;
15 | font-weight: 500;
16 | font-family: sans-serif;
17 | }
18 |
19 | iframe{
20 | width: 300px;
21 | }
22 |
23 | .ele{
24 | display: flex;
25 | flex-direction: row;
26 | justify-content: space-evenly;
27 | margin: 4% 11%;
28 | flex-wrap: wrap;
29 | column-gap: 40px;
30 | row-gap: 40px;
31 | }
32 |
33 |
34 | @media only screen and (max-width: 768px) {
35 | iframe{
36 | width: 100vw;
37 | height: 200px;
38 |
39 | }
40 | .ele{
41 | margin: 0 0;
42 | }
43 | .main{
44 | padding: 10rem 5rem;
45 | }
46 | }
--------------------------------------------------------------------------------
/frontend/src/Components/Blogs/review.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./review.css";
3 | const Reviews = () => {
4 | return (
5 |
35 | {
36 | blogcontent.tags.map((tag,index)=>{
37 | return
42 |
43 | {/* TITLE */}
44 | {tag}
39 | }) 40 | } 41 |
45 | {blogcontent.title}
46 |
47 |
48 | {/* Metatitle */}
49 |
50 | {blogcontent.metatitle}
51 |
52 |
53 | {/* Cover image */}
54 |
60 | 
69 | }
70 |
71 |
76 | })
77 |
78 | }
79 |
61 | {block.title}
62 |
63 | {
64 | block.image &&
65 |
72 | {block.description}
73 |
74 |
75 |
6 |
7 |
66 | );
67 | };
68 |
69 | export default Reviews;
70 |
--------------------------------------------------------------------------------
/frontend/src/Components/ButtonElements.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 | import { Link } from 'react-scroll'
3 |
4 | export const Button = styled(Link)`
5 | border-radius: 50px;
6 | background: ${({ primary }) => (primary ? '#01BF71' : '#010606')};
7 | white-space: nowrap;
8 | color: ${({ dark }) => (dark ? '#fff' : '#fff')};
9 | padding: ${({ big }) => (big ? '14px 48px' : '12px 30px')};
10 | font-size: ${({ fontBig }) => (fontBig ? '20px' : '16px')};
11 | outline: none;
12 | border: 2px solid #01BF71;
13 | box-shadow: 0 3px 0 black, 0px 3px 6px #fff;
14 | // Issue #1: Type in cursor spelling was there earlier
15 | // Issue #1 Fixed: Corrected the spelling of cursor.
16 | cursor: pointer;
17 |
18 | display: flex;
19 | justify-content: center;
20 | align-items: center;
21 | transform: translate3d(0, 0.75em, -1em);
22 | transition: all 175ms cubic-bezier(0, 0, 1, 1);transition: 0.7s;
23 |
24 | &:hover {
25 | background: #fff;
26 | border: 2px solid #01BF71, 0px 4px 6px #fff;
27 | background: ${({ primary }) => (primary ? '#fff' : '#01BF71')};
28 | box-shadow: 0 0 #01BF71;
29 | }
30 | `
31 |
--------------------------------------------------------------------------------
/frontend/src/Components/Consult_With_Doctor/ConsultationForm.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './form.css';
3 | import Footer from '../Footer';
4 |
5 |
6 |
7 | const ConsultationForm = () =>{
8 | return(
9 | <>
10 |
11 | Watch helpful videos!
7 |
8 |
15 |
22 |
29 |
36 |
43 |
50 |
57 |
64 |
65 |
13 |
42 | Make an Appointment
14 | 41 |
71 |
72 |
139 |
140 |
141 | );
142 | };
143 |
144 | export default Contact;
145 |
--------------------------------------------------------------------------------
/frontend/src/Components/Contactus/pexels-pixabay-326333 (2).webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/Components/Contactus/pexels-pixabay-326333 (2).webp
--------------------------------------------------------------------------------
/frontend/src/Components/DarkMode/DarkMode.css:
--------------------------------------------------------------------------------
1 | .dark_mode {
2 | /* margin-top: -20px;
3 | margin-left: 10px; */
4 | display: flex;
5 | justify-content: center;
6 | }
7 |
8 | .dark_mode_label {
9 | width: 45px;
10 | height: 45px;
11 | position: relative;
12 | display: block;
13 | background: #ebebeb;
14 | border-radius: 200px;
15 | /* box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
16 | inset 0px -5px 15px rgba(255, 255, 255, 0.4); */
17 | cursor: pointer;
18 | transition: 0.3s;
19 | border: 2px solid rgba(0, 0, 0, 0.4);
20 | }
21 | .dark_mode_label:after {
22 | content: "";
23 | width: 40px;
24 | height: 40px;
25 | position: absolute;
26 | top: 50%;
27 | left: 50%;
28 | transform: translate(-50%,-50%);
29 | background: linear-gradient(180deg, #ffcc89, #d8860b);
30 | border-radius: 180px;
31 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
32 | transition: 0.3s;
33 | }
34 | .dark_mode_input {
35 | width: 0;
36 | height: 0;
37 | visibility: hidden;
38 | }
39 | .dark_mode_input:checked + .dark_mode_label {
40 | background: #0516cbb0;
41 | }
42 | .dark_mode_input:checked + .dark_mode_label:after {
43 | /* left: 62px; */
44 | transform: rotateZ(180deg) translate(50%,50%);
45 | background: linear-gradient(360deg,#222137, #3a3a3a36);
46 | }
47 | .dark_mode_label:active:after {
48 | width: 30px;
49 | }
50 |
51 | .dark_mode_label svg {
52 | position: absolute;
53 | width: 35px;
54 | top: 3px;
55 | z-index: 100;
56 | }
57 | .dark_mode_label svg.sun {
58 | left: 4px;
59 | fill: #fff;
60 | transition: 0.7s;
61 | }
62 | .dark_mode_label svg.moon {
63 | left: 5px;
64 | fill: #4c7bc300;
65 | transition: 0.7s;
66 | }
67 | .dark_mode_input:checked + .dark_mode_label svg.sun {
68 | fill: #fff9f900;
69 | }
70 | .dark_mode_input:checked + .dark_mode_label svg.moon {
71 | fill: #f0f3ff;
72 | }
73 |
74 | @media screen and (max-width: 490px) {
75 | .dark_mode{
76 | font-size: 12px;
77 | line-height: 8px;
78 | margin: 10px;
79 | }
80 |
81 | /* .gpt3__header-content p {
82 | font-size: 14px;
83 | line-height: 24px;
84 | }
85 |
86 | .gpt3__header-content__input input,
87 | .gpt3__header-content__input button {
88 | font-size: 12px;
89 | line-height: 16px;
90 | } */
91 | }
--------------------------------------------------------------------------------
/frontend/src/Components/DarkMode/DarkMode.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { ReactComponent as Sun } from "./Sun.svg";
3 | import { ReactComponent as Moon } from "./Moon.svg";
4 | import "./DarkMode.css";
5 | // import { FaSun } from "react-icons/fa";
6 | // import { FaMoon } from "react-icons/fa";
7 | const DarkMode = () => {
8 | const [theme, setTheme] = useState(getInitialTheme());
9 |
10 | const toggleTheme = () => {
11 | // e.target.checked ? setTheme('dark-theme') : setTheme('light-theme')
12 | setTheme((prevTheme) => (prevTheme === "dark-theme" ? "light-theme" : "dark-theme"));
13 |
14 | }
15 |
16 | useEffect(() => {
17 | document.body.className = theme;
18 | }, [theme])
19 |
20 | function getInitialTheme() {
21 | const userPreference = window.matchMedia("(prefers-color-scheme: dark)").matches;
22 | return userPreference ? "dark-theme" : "light-theme";
23 | }
24 | return (
25 |
73 |
74 |
138 |
75 | 
77 |
78 |
79 | Feel Free to Contact Us
76 |
80 |
82 |
83 |
135 |
136 |
137 | Contact Us
81 |82 |
{success}
26 |
35 |
42 |
43 | );
44 | };
45 |
46 | export default DarkMode;
47 |
--------------------------------------------------------------------------------
/frontend/src/Components/DarkMode/Moon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/Components/DarkMode/Sun.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/Components/Feedback/FeedbackElements.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 |
4 | export const Container = styled.div`
5 | height: auto;
6 | bottom: 0;
7 | left: 0;
8 | right: 0;
9 | top: 0;
10 | z-index: 0;
11 | background:var(--bg-clr);
12 | `;
13 |
14 |
15 | export const FormWrap = styled.div`
16 | height: 100%;
17 | display: flex;
18 | flex-direction: column;
19 | justify-content: center;
20 | `;
21 |
22 | export const FormContent = styled.div`
23 | height: 100%;
24 | display: flex;
25 | flex-direction: column;
26 | justify-content: center;
27 |
28 | @media screen and (max-width: 580px) {
29 | padding: 10px 20px;
30 | }
31 | `;
32 |
33 | export const Form = styled.form`
34 | background:#fff;
35 | max-width: 550px;
36 | height: auto;
37 | width: 100%;
38 | z-index: 1;
39 | display: grid;
40 | margin: 90px auto 40px;
41 | padding: 40px 32px;
42 | border-radius: 4px;
43 | box-shadow: 1px 2px 10px #01bf71;
44 |
45 | @media screen and (max-width: 400px) {
46 | padding: 40px 32px;
47 | }
48 | `;
49 |
50 | export const FormH1 = styled.label`
51 | margin-bottom: 40px;
52 | color: #01bf71;
53 | font-size: 30px;
54 | font-weight: 600;
55 | text-align: center;
56 | `;
57 |
58 | export const FormLabel = styled.label`
59 | margin-bottom: 8px;
60 | color: #01bf71;
61 | font-size: 1.3rem;
62 | font-weight:600;
63 | cursor:pointer;
64 | `;
65 |
66 | export const FormInput = styled.input`
67 | margin-bottom: 40px;
68 | padding: 10px;
69 | border: none;
70 | font-size:1rem;
71 | border:none;
72 | outline:none;
73 | background:#b2ecd4;
74 | :focus{
75 | border-bottom:5px solid #01bf71;
76 | transition:opacity 0.4s ease;
77 | box-shadow:1px 2px 10px #01bf71;
78 | }
79 | :invalid{
80 | border-bottom:5px solid red;
81 | }
82 | &:hover {
83 | border: 1px solid #01bf71;
84 | }
85 | &::placeholder {
86 | color: rgba(0, 0, 0, 0.5);
87 | }
88 | @media screen and (max-width:435px){
89 | font-size:14px;
90 | }
91 | `;
92 |
93 | export const FormButton = styled.button`
94 | background: #01bf71;
95 | padding: 12px 10px;
96 | border: none;
97 | border-radius: 10px;
98 | color: #fff;
99 | font-size: 20px;
100 | cursor: pointer;
101 | width:12rem;
102 | margin-inline:auto;
103 | &:hover {
104 | opacity : 0.8;
105 | transition: opacity 0.25s ease;
106 | }
107 | :active{
108 | background:#fff;
109 | color:#01bf71;
110 | opacity:1;
111 | border:2px solid #01bf71;
112 | }
113 | `;
114 |
115 |
116 |
117 |
--------------------------------------------------------------------------------
/frontend/src/Components/Feedback/Toast.css:
--------------------------------------------------------------------------------
1 | .toast-warn{
2 | color: black !important;
3 | }
4 |
5 |
--------------------------------------------------------------------------------
/frontend/src/Components/Feedback/index.js:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import React from 'react';
4 | import { useNavigate } from 'react-router-dom';
5 | import { toast } from "react-toastify"
6 | import "./Toast.css"
7 |
8 | import {
9 | FormButton,
10 | FormContent,
11 | Form,
12 | FormH1,
13 | FormInput,
14 | FormLabel,
15 | FormWrap,
16 | Container,
17 | } from "./FeedbackElements";
18 | import { useState } from "react";
19 | import { ToastContainer } from 'react-toastify';
20 | import 'react-toastify/dist/ReactToastify.css';
21 |
22 |
23 |
24 | const Feedback = () => {
25 | const navigate = useNavigate();
26 | const [data, setData] = useState({});
27 |
28 |
29 | const sendPostRequest = async (e) => {
30 | e.preventDefault();
31 |
32 | if (data.username && data.feedback != "") {
33 |
34 | const response = await fetch('https://umatter.onrender.com/feedback', { // Update the endpoint URL here
35 | method: 'POST',
36 | body: JSON.stringify(data),
37 | headers: {
38 | 'Content-Type': 'application/json'
39 | }
40 | });
41 |
42 | // Handle the response from the backend
43 | const result = await response.json();
44 |
45 | toast.success('Feedback Sent!', {
46 | position: "top-center",
47 | autoClose: 1000,
48 | hideProgressBar: false,
49 | closeButton: false,
50 | pauseOnHover: true,
51 | draggable: true,
52 | progress: undefined,
53 | theme: "colored",
54 | });
55 | }
56 |
57 | else {
58 | toast.warn('All Fields are required !', {
59 | position: "top-center",
60 | autoClose: 1000,
61 | hideProgressBar: false,
62 | closeButton: false,
63 | pauseOnHover: true,
64 | draggable: true,
65 | progress: undefined,
66 | theme: "colored",
67 | className: 'toast-warn'
68 | });
69 |
70 | }
71 |
72 |
73 | };
74 |
75 | return (
76 | <>
77 |
37 |
38 |
39 | About us
40 |
41 | How it Works
43 | Testimonials
44 | Careers
45 | Investors
46 | Terms of Services
47 |
48 |
49 |
50 |
51 |
52 | Contact Us
53 |
54 |
55 | Contact
57 | Support
58 | Destinations
59 | Sponsorships
60 |
61 |
62 |
63 |
64 |
65 | Videos
66 |
67 | Submit Video
69 | Ambassadors
70 | Agency
71 | Influencer
72 |
73 |
74 |
47 |
49 | )}
50 |
50 |
101 | )
102 | }
103 |
104 | export default Index;
--------------------------------------------------------------------------------
/frontend/src/Components/Habit_Tracker/style.module.css:
--------------------------------------------------------------------------------
1 |
2 | @media screen and (max-width:400px){
3 | .icon{
4 | display: none;
5 | }
6 | .respo{
7 | display: none;
8 | }
9 | .container{
10 | padding-inline:0rem;
11 | }
12 | }
13 | @media screen and (max-width:768px){
14 | .container{
15 | padding-inline:0.5rem;
16 | }
17 | .table{
18 | width: 100%;
19 | }
20 | .table th, .table td{
21 | padding: 2%;
22 | }
23 | .detail{
24 | font-size: smaller;
25 | }
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/frontend/src/Components/Herosection/HeroElements.js:
--------------------------------------------------------------------------------
1 | import styled,{css} from 'styled-components';
2 | import { MdArrowForward, MdKeyboardArrowRight } from 'react-icons/md';
3 | import { motion } from 'framer-motion';
4 |
5 | export const HeroContainer = styled.div`
6 | background: #0c0c0c;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | padding: 0 30px;
11 | height: 100vh;
12 | position: relative;
13 | z-index: 1;
14 |
15 | :before{
16 | content: '';
17 | position: absolute;
18 | top: 0;
19 | left: 0;
20 | right: 0;
21 | bottom: 0;
22 | background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%),
23 | linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 100%);
24 | z-index: 2;
25 | }
26 | `
27 |
28 | export const HeroBg = styled.div`
29 | position: absolute;
30 | top: 0;
31 | right: 0;
32 | bottom: 0;
33 | left: 0;
34 | width: 100%;
35 | height: 100vh;
36 | overflow: hidden;
37 |
38 | `
39 |
40 | export const VideoBg = styled.video`
41 | width: 100%;
42 | height: 100vh;
43 | -o-object-fit: cover;
44 | object-fit: cover;
45 |
46 | `
47 |
48 | export const HeroContent = motion(styled.div`
49 | z-index: 3;
50 | max-width: 1200px;
51 | position: absolute;
52 | // padding: 8px 24px;
53 | display: flex;
54 | flex-direction: column;
55 | align-items: center;
56 | `);
57 |
58 | export const HeroH1 = styled.h1`
59 | /* color: #fff;
60 | font-size: 48px;
61 | text-align: center; */
62 |
63 | margin-bottom: 24px;
64 | font-size: 48px;
65 | line-height: 1.1;
66 | font-weight: 600;
67 | color: white;
68 |
69 | @media screen and (max-width: 768px){
70 | font-size: 40px;
71 | }
72 |
73 | @media screen and (max-width: 480px){
74 | font-size: 32px;
75 | }
76 | `
77 |
78 | export const HeroP = styled.p`
79 | margin-top: -10px;
80 | color: #fff;
81 | font-size: 24px;
82 | text-align: center;
83 | max-width: 600px;
84 |
85 | @media screen and (max-width: 768px){
86 | font-size: 24px;
87 | }
88 |
89 | @media screen and (max-width: 480px){
90 | font-size: 18px;
91 | }
92 | `
93 |
94 | export const HeroBtnWrapper = styled.div`
95 | margin-top: 32px;
96 | display: flex;
97 | flex-direction: column;
98 | align-items: center;
99 | `
100 |
101 | export const Button = styled.button`
102 | text-decoration: none;
103 | `
104 |
105 | export const ArrowForward = styled(MdArrowForward)`
106 | margin-left: 8px;
107 | font-size: 20px;
108 | `
109 | export const ArrowRight = styled(MdKeyboardArrowRight)`
110 | margin-left: 8px;
111 | font-size: 20px;
112 | `
--------------------------------------------------------------------------------
/frontend/src/Components/Herosection/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from "react";
2 | import Typed from "typed.js";
3 | import Video from "../../videos/video1.mp4";
4 | import {
5 | HeroContainer,
6 | HeroBg,
7 | VideoBg,
8 | HeroContent,
9 | HeroBtnWrapper,
10 | HeroH1,
11 | HeroP,
12 | ArrowForward,
13 | ArrowRight,
14 | } from "./HeroElements";
15 | import { Button } from "../ButtonElements";
16 | import { Link } from "react-router-dom";
17 |
18 | const HeroSection = () => {
19 | const [hover, setHover] = useState(false);
20 | const el = useRef(null);
21 |
22 | useEffect(() => {
23 | const typed = new Typed(el.current, {
24 | strings: ["Make your life more blissful"],
25 | typeSpeed: 50,
26 | backSpeed: 50,
27 | loop: true,
28 | showCursor: false,
29 | });
30 |
31 | return () => {
32 | typed.destroy();
33 | };
34 | }, []);
35 |
36 | const onHover = () => {
37 | setHover(!hover);
38 | };
39 |
40 |
41 | return (
42 | 51 | Your Today's Score - {countOccurrences(activityStatus,true)}/5 52 |
53 | {/* Table */} 54 | 55 |
56 |
57 |
58 |
98 |
99 |
100 | | 62 | {elem} 63 | | 64 | }) 65 | } 66 ||||
|---|---|---|---|
| 74 | {habi.name} 75 | | 76 |77 | {habi.detail} 78 | | 79 | 80 |81 | {habi.icon} 82 | | 83 |
84 | |
90 |
61 | UMatter
62 |
63 |
70 |
72 | username is ${username}
71 |
73 | Logout
74 |
75 |
66 |
86 |
87 |
88 | )
89 | }
90 |
91 | export default Captcha
--------------------------------------------------------------------------------
/frontend/src/Components/Signup/PhoneInput.css:
--------------------------------------------------------------------------------
1 | /* CSS variables. */
2 | :root {
3 | --PhoneInput-color--focus: #03b2cb;
4 | --PhoneInputInternationalIconPhone-opacity: 0.8;
5 | --PhoneInputInternationalIconGlobe-opacity: 0.65;
6 | --PhoneInputCountrySelect-marginRight: 0.35em;
7 | --PhoneInputCountrySelectArrow-width: 0.3em;
8 | --PhoneInputCountrySelectArrow-marginLeft: var(
9 | --PhoneInputCountrySelect-marginRight
10 | );
11 | --PhoneInputCountrySelectArrow-borderWidth: 1px;
12 | --PhoneInputCountrySelectArrow-opacity: 0.45;
13 | --PhoneInputCountrySelectArrow-color: currentColor;
14 | --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
15 | --PhoneInputCountrySelectArrow-transform: rotate(45deg);
16 | --PhoneInputCountryFlag-aspectRatio: 1.5;
17 | --PhoneInputCountryFlag-height: 1em;
18 | --PhoneInputCountryFlag-borderWidth: 1px;
19 | --PhoneInputCountryFlag-borderColor: rgba(0, 0, 0, 0.5);
20 | --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
21 | --PhoneInputCountryFlag-backgroundColor--loading: rgba(0, 0, 0, 0.1);
22 | }
23 |
24 | .PhoneInput {
25 | /* This is done to stretch the contents of this component. */
26 | display: flex;
27 | align-items: center;
28 | width: 100%;
29 | }
30 |
31 | .PhoneInputInput {
32 | /* The phone number input stretches to fill all empty space */
33 | flex: 1;
34 | /* The phone number input should shrink
35 | to make room for the extension input */
36 | min-width: 0;
37 | padding: 0.7rem;
38 | border-radius: 5px;
39 | background: rgba(1, 191, 113, 0.3);
40 | font-family: Poppins;
41 | font-style: normal;
42 | font-weight: 400;
43 | font-size: 0.8rem;
44 | line-height: 0.8rem;
45 | color: black;
46 | margin-bottom: 1rem;
47 | outline: none;
48 | box-sizing: border-box;
49 | border: 1px solid transparent;
50 | }
51 |
52 | .PhoneInputCountryIcon {
53 | width: calc(
54 | var(--PhoneInputCountryFlag-height) *
55 | var(--PhoneInputCountryFlag-aspectRatio)
56 | );
57 | height: var(--PhoneInputCountryFlag-height);
58 | }
59 |
60 | .PhoneInputCountryIcon--square {
61 | width: var(--PhoneInputCountryFlag-height);
62 | }
63 |
64 | .PhoneInputCountryIcon--border {
65 | /* Removed `background-color` because when an `
67 |
74 |
75 |
76 |
85 |
23 |
52 |
24 |
30 | Meet Our Team
25 |26 | Thank you to all the amazing contributors who have contributed to this project! Your efforts are greatly 27 | appreciated. 💙 28 |
29 |
31 | {contributors.map((contributor) => (
32 |
49 | ))}
50 |
51 |
9 |
10 |
11 |
14 | {product.feedback}
15 |
16 |
17 |
18 |
19 | );
20 | };
21 |
22 | export default ProductCard;
--------------------------------------------------------------------------------
/frontend/src/Components/Testimonials/ProductSlider.css:
--------------------------------------------------------------------------------
1 | /* Card Div */
2 |
3 | .CardDiv{
4 | background-color: var(--bg-clr);
5 | color: white;
6 | width: 100%;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | margin: 0px 0px 50px 0px;
11 | }
12 |
13 | /* Card*/
14 |
15 | .Card{
16 | width: 100%;
17 | background-color: #333333;
18 | display: flex;
19 | justify-content: center;
20 | align-items: center;
21 | border-top: 5px solid #A020F0;
22 | }
23 |
24 | /* Card Body */
25 |
26 | .card-body {
27 | display: flex;
28 | flex-direction: column;
29 | align-items: center;
30 | gap: 10px;
31 | }
32 |
33 | /* CardImage */
34 |
35 | .CardImage{
36 | width: 60%;
37 | margin: 0 auto;
38 | border-radius: 50%;
39 | margin: 5px auto;
40 | }
41 |
--------------------------------------------------------------------------------
/frontend/src/Components/Testimonials/Swiper.css:
--------------------------------------------------------------------------------
1 | /* Swiper Custom CSS */
2 |
3 | .swiper {
4 | position: unset !important;
5 | margin-top:50px;
6 | }
7 |
8 | .swiper-button-next, .swiper-button-prev {
9 | color: #A020F0;
10 | z-index: 1;
11 | }
12 |
13 | .swiper-button-prev {
14 | left: 0;
15 | }
16 | .swiper-button-next {
17 | right: 0;
18 | }
19 |
20 | .swiper-pagination {
21 | position: relative;
22 | z-index: 1; /* Ensure bullets are above content */
23 | }
24 |
25 | .swiper-pagination-bullet {
26 | background-color: var(--text-clr);
27 | z-index: 1;
28 |
29 | }
30 |
31 | .swiper-pagination-bullet-active {
32 | background-color: #A020F0;
33 | }
34 |
35 | /* media query for small screens */
36 |
37 | @media screen and (max-width:767px) {
38 | .swiper-button-next, .swiper-button-prev {
39 | display: none;
40 | }
41 | }
--------------------------------------------------------------------------------
/frontend/src/Components/Testimonials/TestimonialsElements.js:
--------------------------------------------------------------------------------
1 | import styled,{css} from "styled-components";
2 | import { motion } from "framer-motion";
3 | // $bgcolor=var(--bg-clr);
4 |
5 | export const TestimonialsContainer = motion(styled.div`
6 | padding: 30px;
7 | padding-bottom: 150px;
8 | display: flex;
9 | flex-direction: column;
10 | justify-content: center;
11 | align-items: center;
12 | background: var(--bg-clr);
13 | width: 100%;
14 | overflow: hidden;
15 |
16 | @media screen and (max-width: 768px) {
17 | height: 1400px;
18 | }
19 | @media screen and (max-width: 992px) {
20 | height: 1200px;
21 | }
22 | @media screen and (max-width: 480px) {
23 | height: 1500px;
24 | }
25 | `);
26 |
27 | export const TestimonialsWrapper = styled.div`
28 | position: relative;
29 | max-width: 90%;
30 | margin: 0 auto;
31 | grid-gap: 16px;
32 | padding: 0 50px;
33 | overflow: hidden;
34 | border-radius:50px;
35 | background-color: ${({ theme }) => theme.defaultColor}; /* Set a default background color */
36 |
37 | /* Set the background color based on the body class */
38 | body.light-theme & {
39 | background-color: #ffd60a; /* Set background color to yellow if body has 'light-theme' class */
40 | }
41 |
42 | body.dark-theme & {
43 | background-color: #030640cc; /* Set background color to green if body has 'dark-theme' class */
44 | }
45 | @media screen and (max-width: 1000px) {
46 | grid-template-columns: 1fr 1fr;
47 | }
48 | @media screen and (max-width: 768px) {
49 | grid-template-columns: 1fr;
50 | }
51 | @media screen and (max-width: 767px) {
52 | grid-template-columns: 1fr;
53 | padding: 0 20px;
54 | }
55 | `;
56 |
57 | export const TestimonialsCard = styled.div`
58 | min-width: 33.3%;
59 | align-items: center;
60 | display: flex;
61 | flex-direction: column;
62 | justify-content: flex-start;
63 | border-radius: 10px;
64 | margin-right: 20px;
65 | padding: 30px;
66 | box-shadow: 0 1px 3px gray;
67 | color: var(--text-clr);
68 | transition: all 0.2s ease-in-out;
69 |
70 | &:hover {
71 | transform: scale(1.02);
72 | transition: all 0.2s ease-in-out;
73 | cursor: pointer;
74 | }
75 | `;
76 |
77 | export const TestimonialsIcon = styled.img`
78 | height: 170px;
79 | width: 180px;
80 | margin-bottom: 10px;
81 | border: 0.5px solid gray;
82 | box-shadow: 3px 3px 3px gray;
83 | `;
84 |
85 | export const TestimonialsH1 = styled.h1`
86 | margin-bottom: 64px;
87 | font-size: 50px;
88 | line-height: 1.1;
89 | font-weight: 600;
90 | text-transform: uppercase;
91 | color: var(--text-clr);
92 |
93 | @media screen and (max-width: 480px) {
94 | font-size: 2rem;
95 | }
96 | `;
97 |
98 | export const TestimonialsH2 = styled.h2`
99 | font-size: 1rem;
100 | margin-bottom: 10px;
101 | font-weight: 700;
102 | `;
103 |
104 | export const TestimonialsP = styled.p`
105 | font-size: 1rem;
106 | text-align: center;
107 | `;
108 |
--------------------------------------------------------------------------------
/frontend/src/Components/Testimonials/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import ProductCard from "./ProductForSlider";
3 | import {
4 | TestimonialsContainer,
5 | TestimonialsWrapper,
6 | TestimonialsH1,
7 | } from "./TestimonialsElements";
8 | import Typed from "typed.js";
9 | import { Navigation, Pagination, A11y, Autoplay } from "swiper";
10 | import { Swiper, SwiperSlide } from "swiper/react";
11 | import "swiper/swiper-bundle.min.css";
12 | import "./Swiper.css";
13 |
14 | class Testimonial extends Component {
15 | constructor() {
16 | super();
17 | this.el = React.createRef();
18 | this.state = {
19 | slides: [
20 | {
21 | user_index: 1,
22 | username: "Emily Smith",
23 | Icon3:
24 | "https://img.freepik.com/free-vector/man-working-laptop-cartoon-icon-illustration_138676-1953.jpg?w=740&t=st=1686378983~exp=1686379583~hmac=4d9e6abe79a2a7f5ac2691d4c9655e75e95393dd1f891ca5d3acbab8445f5e10",
25 | feedback:
26 | "I had a great experience using the website to find a doctor for my specific health concern.",
27 | },
28 | {
29 | user_index: 2,
30 | username: "David Johnson",
31 | Icon3:
32 | "https://img.freepik.com/free-vector/animation-character-portrait-woman-presenting-pose-flat-design_40876-2330.jpg?w=740&t=st=1686378696~exp=1686379296~hmac=540a1eb1c2d15dd32471d13832e1fea4b8b845c198c67e37c68614c6f908bf5d",
33 | feedback:
34 | "As a doctor, I found the website to be a valuable platform for reaching out to patients.",
35 | },
36 | {
37 | user_index: 3,
38 | username: "Sophia Anderson",
39 | Icon3:
40 | "https://img.freepik.com/free-vector/curly-hair-concept-illustration_114360-7633.jpg?w=740&t=st=1686378727~exp=1686379327~hmac=1eb65a559e497e52ff9a009e71ddddb5e57cef4d35b2eea92236dd6f072fc998",
41 | feedback:
42 | "I highly recommend this website to anyone looking for reliable healthcare services.",
43 | },
44 | {
45 | user_index: 4,
46 | username: "Emily Smith",
47 | Icon3:
48 | "https://img.freepik.com/free-vector/man-working-laptop-cartoon-icon-illustration_138676-1953.jpg?w=740&t=st=1686378983~exp=1686379583~hmac=4d9e6abe79a2a7f5ac2691d4c9655e75e95393dd1f891ca5d3acbab8445f5e10",
49 | feedback:
50 | "I had a great experience using the website to find a doctor for my specific health concern.",
51 | },
52 | {
53 | user_index: 5,
54 | username: "David Johnson",
55 | Icon3:
56 | "https://img.freepik.com/free-vector/animation-character-portrait-woman-presenting-pose-flat-design_40876-2330.jpg?w=740&t=st=1686378696~exp=1686379296~hmac=540a1eb1c2d15dd32471d13832e1fea4b8b845c198c67e37c68614c6f908bf5d",
57 | feedback:
58 | "As a doctor, I found the website to be a valuable platform for reaching out to patients.",
59 | },
60 | {
61 | user_index: 6,
62 | username: "Sophia Anderson",
63 | Icon3:
64 | "https://img.freepik.com/free-vector/curly-hair-concept-illustration_114360-7633.jpg?w=740&t=st=1686378727~exp=1686379327~hmac=1eb65a559e497e52ff9a009e71ddddb5e57cef4d35b2eea92236dd6f072fc998",
65 | feedback:
66 | "I highly recommend this website to anyone looking for reliable healthcare services.",
67 | },
68 | ],
69 | };
70 | }
71 | componentDidMount() {
72 | // Fetch testimonials data from the backend
73 | // fetch("http://localhost:8081/feedback")
74 | // .then((response) => response.json())
75 | // .then((data) => {
76 | // this.setState({ slides: data });
77 | // console.log(data);
78 | // });
79 |
80 | const typed = new Typed(this.el.current, {
81 | strings: ["Testimonials"],
82 | typeSpeed: 50,
83 | backSpeed: 50,
84 | loop: true,
85 | showCursor: false,
86 | });
87 |
88 | return () => {
89 | typed.destroy();
90 | };
91 | }
92 |
93 | render() {
94 | return (
95 | {product.username}
13 |
137 |
139 |
11 |
12 |
17 |
18 |
44 |
67 |
68 |
69 |
70 |
71 |
111 |
112 |
113 |
114 |
115 | );
116 | }
117 |
118 | export default Workshops;
119 |
120 |
--------------------------------------------------------------------------------
/frontend/src/assests/googleLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/assests/googleLogo.png
--------------------------------------------------------------------------------
/frontend/src/assests/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 |
11 | ],
12 | "start_url": ".",
13 | "display": "standalone",
14 | "theme_color": "#000000",
15 | "background_color": "#ffffff"
16 | }
17 |
--------------------------------------------------------------------------------
/frontend/src/firebase-config.js:
--------------------------------------------------------------------------------
1 | // Import the functions you need from the SDKs you need
2 | import { initializeApp } from "firebase/app";
3 | import { getAuth, GoogleAuthProvider} from "firebase/auth";
4 |
5 |
6 | const firebaseConfig = {
7 | apiKey: `${process.env.REACT_APP_apiKey}`,
8 | authDomain: `${process.env.REACT_APP_authDomain}`,
9 | projectId: `${process.env.REACT_APP_projectId}`,
10 | storageBucket: `${process.env.REACT_APP_storageBucket}`,
11 | messagingSenderId: `${process.env.REACT_APP_messagingSenderId}`,
12 | appId: `${process.env.REACT_APP_appId}`,
13 | };
14 |
15 | console.log("apiKey:", process.env.REACT_APP_apiKey);
16 | console.log("authDomain:", process.env.REACT_APP_authDomain);
17 | console.log("projectId:", process.env.REACT_APP_projectId);
18 | console.log("storageBucket:", process.env.REACT_APP_storageBucket);
19 | console.log("messagingSenderId:", process.env.REACT_APP_messagingSenderId);
20 | console.log("appId:", process.env.REACT_APP_appId);
21 |
22 | // Initialize Firebase
23 | const app = initializeApp(firebaseConfig);
24 |
25 | export const auth = getAuth(app);
26 | export const provider = new GoogleAuthProvider();
27 |
--------------------------------------------------------------------------------
/frontend/src/images/5Ds.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/5Ds.webp
--------------------------------------------------------------------------------
/frontend/src/images/Distraction tec.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/Distraction tec.webp
--------------------------------------------------------------------------------
/frontend/src/images/Embracing_the_Power_of_Menstruation.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/Embracing_the_Power_of_Menstruation.webp
--------------------------------------------------------------------------------
/frontend/src/images/EnterOTP.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/EnterOTP.webp
--------------------------------------------------------------------------------
/frontend/src/images/ErrorPage404-03.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/ErrorPage404-03.webp
--------------------------------------------------------------------------------
/frontend/src/images/Forgotpassword.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/Forgotpassword.webp
--------------------------------------------------------------------------------
/frontend/src/images/Hourglass.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/Hourglass.gif
--------------------------------------------------------------------------------
/frontend/src/images/No-yes.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/No-yes.webp
--------------------------------------------------------------------------------
/frontend/src/images/SignIn.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/SignIn.webp
--------------------------------------------------------------------------------
/frontend/src/images/SignUp.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/SignUp.webp
--------------------------------------------------------------------------------
/frontend/src/images/WorkshopImg.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/WorkshopImg.webp
--------------------------------------------------------------------------------
/frontend/src/images/about.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/about.webp
--------------------------------------------------------------------------------
/frontend/src/images/captcha_Bg.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/captcha_Bg.webp
--------------------------------------------------------------------------------
/frontend/src/images/construct.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/construct.webp
--------------------------------------------------------------------------------
/frontend/src/images/contact_image.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/contact_image.webp
--------------------------------------------------------------------------------
/frontend/src/images/group-quiting.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/group-quiting.webp
--------------------------------------------------------------------------------
/frontend/src/images/image1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/image1.webp
--------------------------------------------------------------------------------
/frontend/src/images/image2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/image2.webp
--------------------------------------------------------------------------------
/frontend/src/images/image3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/image3.webp
--------------------------------------------------------------------------------
/frontend/src/images/image4.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/image4.webp
--------------------------------------------------------------------------------
/frontend/src/images/isolation.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/isolation.webp
--------------------------------------------------------------------------------
/frontend/src/images/mental-health-advice.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/mental-health-advice.webp
--------------------------------------------------------------------------------
/frontend/src/images/mental-health.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/mental-health.webp
--------------------------------------------------------------------------------
/frontend/src/images/natural remedies.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/natural remedies.webp
--------------------------------------------------------------------------------
/frontend/src/images/no-drinking.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/no-drinking.webp
--------------------------------------------------------------------------------
/frontend/src/images/non-alco-cocktail.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/non-alco-cocktail.webp
--------------------------------------------------------------------------------
/frontend/src/images/smoking-is-Injurious-to-Health.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonalikaPatnaik/UMatter/df6f5eb9ccdae83b696891889cd1abd03c726daf/frontend/src/images/smoking-is-Injurious-to-Health.webp
--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | /* body {
6 | margin: 0;
7 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
8 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
9 | sans-serif;
10 | -webkit-font-smoothing: antialiased;
11 | -moz-osx-font-smoothing: grayscale;
12 | }
13 |
14 | code {
15 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
16 | monospace;
17 | } */
18 |
19 | /* @media only screen and (max-width: 1166px) {
20 | #root {
21 | width: 100%;
22 | overflow: hidden;
23 | }
24 | } */
25 | /* @media only screen and (max-width: 1230px){
26 |
27 | #root{
28 | width: 1212px;
29 | overflow-x: hidden;
30 | }
31 | }
32 |
33 | @media only screen and (max-width: 1012px){
34 |
35 | #root{
36 | width: 1036px;
37 | overflow-x: hidden;
38 | }
39 | }
40 | @media only screen and (max-width: 970px){
41 |
42 | #root{
43 | width: 963px;
44 | overflow-x: hidden;
45 | }
46 | }
47 | @media only screen and (max-width: 900px){
48 |
49 | #root{
50 | width: 939px;
51 | overflow-x: hidden;
52 | }
53 | }
54 | @media only screen and (max-width: 600px){
55 |
56 | #root{
57 | width: 923px;
58 | overflow-x: hidden;
59 | }
60 | }
61 | @media only screen and (max-width: 500px){
62 |
63 | #root{
64 | width: 915px;
65 | overflow-x: hidden;
66 | }
67 | }
68 | @media only screen and (max-width: 350px){
69 |
70 | #root{
71 | width: 830px;
72 | @media only screen and (max-width: 430px){
73 |
74 | #root{
75 | width: 907px;
76 | overflow-x: hidden;
77 | }
78 | }
79 | overflow-x: hidden;
80 | }
81 | } */
82 |
83 |
--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App';
4 | import './index.css';
5 | import { ToastContainer } from "react-toastify";
6 | import { Helmet } from 'react-helmet';
7 | import "react-toastify/dist/ReactToastify.css";
8 | import * as serviceWorkerRegistration from './serviceWorkerRegistration';
9 |
10 | const root = ReactDOM.createRoot(document.getElementById('root'));
11 | root.render(
12 |
13 |
16 | Welcome to UMatter Workshops
14 |Unlock your potential and transform your life with our empowering workshops.
15 |
19 |
21 |
42 |
43 | All Workshops
20 |
22 |
27 |
28 | Breaking the Habit: A Journey to Sobriety
23 |24 | Join this transformative workshop led by experts in addiction recovery. Learn effective strategies, techniques, and coping mechanisms to break free from the chains of alcohol and smoking addiction. Through engaging discussions, interactive activities, and personalized guidance, you'll gain the tools and support needed to embark on a journey towards a healthier, addiction-free life. 25 |
26 |
29 |
34 |
35 | Mindfulness and Addiction: Finding Inner Balance
30 |31 | In this workshop, explore the powerful practice of mindfulness and its role in overcoming addictive behaviors. Through guided meditation, mindful awareness exercises, and expert-led discussions, you'll develop a deeper understanding of your triggers, cravings, and thought patterns. Discover how to cultivate self-compassion, manage stress, and make conscious choices that lead to lasting change. Join us on this empowering journey towards inner balance and liberation from addiction. 32 |
33 |
36 |
41 | Building Stronger Support Networks
37 |38 | Breaking free from addiction is easier with a strong support network by your side. Join this workshop to learn how to cultivate and nurture a network of individuals who understand your struggles and can provide the support you need. Explore effective communication strategies, boundary setting, and healthy relationship dynamics. Through group activities, role-playing exercises, and practical advice, you'll gain valuable insights into building meaningful connections that contribute to your journey of overcoming drinking and smoking habits. 39 |
40 |Workshop Schedule
45 |
46 |
66 |
47 |
52 | Date
48 | Time
49 | Duration
50 | Workshop Title
51 |
53 |
58 | June 28, 2023
54 | 10:00 AM - 12:00 PM
55 | 2 hours
56 | Workshop Title 1
57 |
59 |
64 | {/* Add more schedule rows as needed */}
65 | July 5, 2023
60 | 2:00 PM - 4:00 PM
61 | 2 hours
62 | Workshop Title 2
63 |
72 |
110 | Join Workshop
73 | 74 |
75 |
109 |
76 |
77 |
78 |
79 |
107 |
108 |
8 |
11 |
12 | );
13 | };
14 |
15 | export default SigninPage;
--------------------------------------------------------------------------------
/frontend/src/pages/HabitTracker.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import HabitTrack from "../Components/Habit_Tracker";
3 | function HabitTracker() {
4 | return (
5 | <>
6 |
7 |
13 | );
14 | };
15 |
16 | export default Develop;
17 |
--------------------------------------------------------------------------------
/frontend/src/pages/feedback.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Feedback from "../Components/Feedback";
3 | import Footer from "../Components/Footer";
4 | const FeedbackPage = () => {
5 | return (
6 | <>
7 | UMatter Development
8 |This page is currently under development. Please check back later.
9 |
10 | 
11 |
12 |
7 |
9 | );
10 | };
11 |
12 | export default Profile;
--------------------------------------------------------------------------------
/frontend/src/pages/signin.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import SignIn from '../Components/Signin';
3 |
4 |
5 | const SigninPage = () => {
6 | return (
7 |
8 |
10 | );
11 | };
12 |
13 | export default SigninPage;
--------------------------------------------------------------------------------
/frontend/src/pages/signup.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import SignUp from '../Components/Signup';
3 |
4 | const SignupPage = () => {
5 | return (
6 |
7 |
9 | );
10 | };
11 |
12 | export default SignupPage;
13 |
--------------------------------------------------------------------------------
/frontend/src/pages/team.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Teams from "../Components/Team";
3 | import Footer from "../Components/Footer";
4 |
5 | const Team = () => {
6 | return(
7 | <>
8 |