Skip to content

Commit f9cfd07

Browse files
gauravsingh1281gauravsingh1281
authored
Redesigned Privacy Policy Page (#682)
2 parents d52d302 + 7445442 commit f9cfd07

File tree

5 files changed

+217
-111
lines changed

5 files changed

+217
-111
lines changed

‎package-lock.json‎

Lines changed: 31 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"react-icons": "^4.12.0",
3232
"react-responsive-carousel": "^3.2.23",
3333
"react-router-dom": "^6.15.0",
34+
"react-router-hash-link": "^2.4.3",
3435
"react-scroll-to-top": "^3.0.0",
3536
"react-simple-scroll-up": "^0.2.3",
3637
"rentalog": "file:",

‎src/components/Header-section/RentNavbar.jsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { FiUser, FiSun, FiMoon } from "react-icons/fi"; // Import the icons
22
import {} from "react-icons/fi";
33
import { Link } from "react-router-dom";
4+
import { HashLink } from "react-router-hash-link";
45
import logo from "../../assets/Images/logo.png";
56
import { useState } from "react";
67
import GoogleTranslate from "./GoogleTranslate";
@@ -162,9 +163,9 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
162163
</a>
163164
</div>
164165
<div className="flex md:order-3 items-center">
165-
<button onClick={toggleDarkMode} className="mr-4 text-2xl">
166+
{/* <button onClick={toggleDarkMode} className="mr-4 text-2xl">
166167
{darkMode ? <FiSun /> : <FiMoon />}
167-
</button>
168+
</button> */}
168169

169170
{/* Login Button */}
170171
<div>
@@ -201,52 +202,52 @@ const RentNavbar = ({ darkMode, toggleDarkMode }) => {
201202
>
202203
<ul className="flex flex-row lg:gap-10 md:gap-6 font-medium">
203204
<li className=" navbar2 hover:scale-[1.081] hover transition duration-300">
204-
<a href="#home" aria-current="page">
205+
<HashLink smooth to="/#home" aria-current="page">
205206
{activeSection === "home" ? (
206207
<h1 className="text-green">HOME</h1>
207208
) : (
208209
<h1>HOME</h1>
209210
)}
210-
</a>
211+
</HashLink>
211212
</li>
212213

213214
<li className="navbar2 hover:scale-[1.081] hover transition duration-300">
214-
<a href="#Service" aria-current="page">
215+
<HashLink smooth to="/#Service" aria-current="page">
215216
{activeSection === "Service" ? (
216217
<h1 className="text-green">RENTALS</h1>
217218
) : (
218219
<h1>RENTALS</h1>
219220
)}
220-
</a>
221+
</HashLink>
221222
</li>
222223

223224
<li className="navbar2 hover:scale-[1.081] hover transition duration-300">
224-
<a href="#AboutUs" aria-current="page">
225+
<HashLink smooth to="/#AboutUs" aria-current="page">
225226
{activeSection === "AboutUs" ? (
226227
<h1 className="text-green">ABOUT</h1>
227228
) : (
228229
<h1>ABOUT</h1>
229230
)}
230-
</a>
231+
</HashLink>
231232
</li>
232233

233234
<li className="navbar2 hover:scale-[1.081] hover transition duration-300">
234-
<a href="#ContactUs" aria-current="page">
235+
<HashLink smooth to="/#ContactUs" aria-current="page">
235236
{activeSection === "ContactUs" ? (
236237
<h1 className="text-green">CONTACT</h1>
237238
) : (
238239
<h1>CONTACT</h1>
239240
)}
240-
</a>
241+
</HashLink>
241242
</li>
242243
<li className="hover:scale-[1.081] hover transition duration-300">
243-
<a href="#FAQ" aria-current="page">
244+
<HashLink smooth to="/#FAQ" aria-current="page">
244245
{activeSection === "FAQ" ? (
245246
<h1 className="text-green">FAQ</h1>
246247
) : (
247248
<h1>FAQ</h1>
248249
)}
249-
</a>
250+
</HashLink>
250251
</li>
251252
</ul>
252253
</div>

‎src/components/Privacy-Policy/PrivacyPolicy.css‎

Lines changed: 96 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,106 @@
1+
body {
2+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3+
background-color: #f4f4f9;
4+
color: #333;
5+
line-height: 1.6;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
110
.privacy-container {
2-
padding: 20px;
3-
font-family: Arial, sans-serif;
4-
background-color: #f9f9f9;
5-
color: #333;
11+
max-width: 1200px;
12+
margin: 50px auto;
13+
padding: 20px;
14+
position: relative;
15+
top: 37px;
16+
}
17+
18+
.privacy-container h1 {
19+
font-size: 2.5rem;
20+
color: #2c3e50;
21+
text-align: center;
22+
margin-bottom: 40px;
23+
font-weight: 600;
24+
}
25+
26+
.privacy-container .card-container {
27+
display: flex;
28+
flex-wrap: wrap;
29+
gap: 25px;
30+
justify-content: space-between;
31+
}
32+
33+
.privacy-container section {
34+
background-color: #fff;
35+
border-radius: 10px;
36+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
37+
padding: 25px;
38+
transition: transform 0.3s ease, box-shadow 0.3s ease;
39+
flex: 1 1 calc(50% - 25px);
40+
box-sizing: border-box;
41+
}
42+
43+
.privacy-container section:hover {
44+
transform: translateY(-5px);
45+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
46+
}
47+
48+
.privacy-container section:nth-child(odd) {
49+
background-color: #ffffff;
50+
}
51+
52+
.privacy-container section:nth-child(even) {
53+
background-color: #f9f9f9;
54+
}
55+
56+
.privacy-container h2 {
57+
font-size: 1.8rem;
58+
color: #34495e;
59+
margin-top: 0;
60+
margin-bottom: 15px;
61+
padding-bottom: 10px;
62+
border-bottom: 2px solid #3498db;
63+
display: inline-block;
64+
}
65+
66+
.privacy-container p {
67+
font-size: 1rem;
68+
color: #555;
69+
margin-bottom: 0;
70+
}
71+
72+
.privacy-container section h2::before {
73+
content: "•";
74+
color: #3498db;
75+
margin-right: 10px;
76+
font-size: 1.5rem;
77+
vertical-align: middle;
78+
}
79+
80+
@media (max-width: 768px) {
81+
.privacy-container {
82+
margin: 20px;
83+
padding: 15px;
84+
top: 74px;
685
}
7-
86+
887
.privacy-container h1 {
9-
font-size: 2.5em;
10-
color: #1abc9c;
11-
text-align: center;
12-
margin-bottom: 20px;
88+
font-size: 2rem;
1389
}
14-
90+
1591
.privacy-container h2 {
16-
font-size: 1.8em;
17-
color: #1abc9c;
18-
margin-top: 30px;
92+
font-size: 1.5rem;
1993
}
20-
94+
2195
.privacy-container p {
22-
font-size: 1.1em;
23-
line-height: 1.6;
24-
margin: 10px 0;
96+
font-size: 0.9rem;
2597
}
26-
27-
.privacy-container section {
28-
margin-bottom: 20px;
29-
border-bottom: 1px solid #ddd;
30-
padding-bottom: 15px;
31-
}
32-
33-
.privacy-container section:last-child {
34-
border-bottom: none;
98+
99+
.privacy-container .card-container {
100+
flex-direction: column;
35101
}
36-
37-
.privacy-container a {
38-
color: #007bff;
39-
text-decoration: none;
40-
}
41-
42-
.privacy-container a:hover {
43-
text-decoration: underline;
102+
103+
.privacy-container section {
104+
flex: 1 1 100%;
44105
}
45-
106+
}

0 commit comments

Comments
 (0)