diff --git a/index.html b/index.html index 1f3c47fe..81e1639c 100644 --- a/index.html +++ b/index.html @@ -67,7 +67,7 @@ @@ -75,7 +75,7 @@ diff --git a/package-lock.json b/package-lock.json index aad99a2a..d2d426d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "rentalog", "version": "0.0.0", "dependencies": { + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.2.2", "@radix-ui/react-accordion": "^1.2.1", "@shadcn/ui": "^0.0.4", "aos": "^2.3.4", @@ -907,6 +909,49 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz", + "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==", + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -1914,9 +1959,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001677", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz", - "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==", + "version": "1.0.30001674", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001674.tgz", + "integrity": "sha512-jOsKlZVRnzfhLojb+Ykb+gyUSp9Xb57So+fAiFlLzzTKpqg8xxSav0e40c8/4F/v9N8QSvrRRaLeVzQbLqomYw==", "dev": true, "funding": [ { diff --git a/package.json b/package.json index 99d6ae0d..b603fc66 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "preview": "vite preview" }, "dependencies": { + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.2.2", "@radix-ui/react-accordion": "^1.2.1", "@shadcn/ui": "^0.0.4", "aos": "^2.3.4", diff --git a/src/App.jsx b/src/App.jsx index 5edd714b..de1f4a09 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,6 @@ // App.js -import React, { useEffect, useState } from 'react'; -import './App.css'; +import React, { useEffect, useState } from "react"; +import "./App.css"; import { Route, Routes } from "react-router-dom"; import { Home, Login, Registration, Dashboard, ComingSoon } from "./pages"; import AddNewRental from "./components/dashboard-components/AddNewRental/AddNewRental"; @@ -16,6 +16,7 @@ import ForgotPassword from "./pages/ForgotPassword"; import AdminDashboard from "./components/Admin-Dashboard/AdminDashboard"; import PrivacyPolicy from "./components/Privacy-Policy/PrivacyPolicy"; import TermsConditions from "./components/Terms-Conditions/TermsConditions"; +import Feedback from "./components/Feedback/Feedback"; const App = () => { const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 }); @@ -30,8 +31,8 @@ const App = () => { }; useEffect(() => { - window.addEventListener('mousemove', updateCursor); - return () => window.removeEventListener('mousemove', updateCursor); + window.addEventListener("mousemove", updateCursor); + return () => window.removeEventListener("mousemove", updateCursor); }, [trail]); return ( @@ -67,18 +68,28 @@ const App = () => { } /> } /> } /> - } /> + } + /> } /> } /> } /> } /> - } /> - } /> + } + /> + } + /> } /> } /> } /> } /> } /> + } /> ); diff --git a/src/components/Contact-section/Contact-section.css b/src/components/Contact-section/Contact-section.css index 28bd9861..76463c28 100644 --- a/src/components/Contact-section/Contact-section.css +++ b/src/components/Contact-section/Contact-section.css @@ -8,8 +8,10 @@ main { padding-top: 0; /* Remove extra padding if present */ margin-bottom: 5rem; - background-color: #b4f8f8; /* Light cyan background */ - border: 2px solid #020202; /* Border color */ + + + background: linear-gradient(to right,#4bc2f5, #8c8cb2, #ee9898,#ef0381); /* Gradient from blue to red */ + border: 2px solid #000000; /* Border color */ border-radius: 8px; /* Rounded corners */ padding: 10px; /* Spacing inside the section */ padding: 10px 5px; /* Top and bottom padding: 10px, left and right padding: 5px */ diff --git a/src/components/Feedback/Feedback.css b/src/components/Feedback/Feedback.css new file mode 100644 index 00000000..ab9b0d45 --- /dev/null +++ b/src/components/Feedback/Feedback.css @@ -0,0 +1,128 @@ +/* Container for feedback form */ +.feedback-form-container { + background-color: #ccdada; + border: 3px solid rgb(164, 2, 19); + border-radius: 10px; + padding: 50px; + width: 600px; /* Slightly increased width for a spacious feel */ + margin: 50px auto; + color: rgb(10, 10, 10); + text-align: center; + box-shadow: 0 5px 15px rgba(6, 4, 4, 0.4); + margin-top: 130px; +} + +/* Form headings */ +.title { + margin-bottom: 30px; /* Increased spacing below heading */ + font-size: 48px; /* Increased font size for the heading */ + color: #d20808; +} + +/* Input fields styling */ +.name, +.email, +.message { + margin-top: 30px; /* Increased top margin for space between inputs */ + width: 100%; + padding: 10px; /* Increased padding for larger inputs */ + background-color: #faf5f5; + border: 2px solid rgb(9, 9, 8); + border-radius: 5px; + color: rgb(21, 20, 20); + font-size: 18px; /* Slightly increased font size for input text */ + box-sizing: border-box; +} + +textarea { + height: 100px; /* Increased height of the textarea */ + resize: none; +} + +/* Star rating styling */ +.stars { + margin-top: 30px; /* Ensure consistent spacing */ + display: flex; + justify-content: center; + margin: 10px 0; + gap: 20px; +} + +.star, +.star-filled { + font-size: 35px; /* Slightly larger stars for better visibility */ + cursor: pointer; + transition: color 0.3s; +} + +.star { + color: rgb(108, 106, 106); +} + +.star-filled { + color: gold; +} + +/* Submit button */ +.post-button { + margin-top: 40px; /* More space between the last input and button */ + background-color: #000504; + color: #fdfafa; + border: 2px solid rgb(205, 6, 6); + padding: 15px 30px; /* Bigger button for easier clicking */ + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +.post-button:hover { + background-color: #cbd3f5; + border: 2px solid rgb(8, 7, 7); + color: black; +} + +/* Pop-up overlay styling */ +.popup-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + display: flex; + justify-content: center; + align-items: center; +} + +.popup { + background-color: #faf9fc; + padding: 28px; + border-radius: 10px; + text-align: center; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); + color: black; + border: 1px solid rgb(4, 4, 4); +} + +.popup h3 { + margin-bottom: 10px; + color: #0d0d0d; +} + +.popup p { + margin-bottom: 20px; + color: #0f0e0e; +} + +.close-popup-button { + background-color: #0a0370; + color: #fdfbfb; + border: 2px solid rgb(245, 242, 242); + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; +} + +/* .close-popup-button:hover { + background-color: #e3e4e5; + } */ diff --git a/src/components/Feedback/Feedback.jsx b/src/components/Feedback/Feedback.jsx new file mode 100644 index 00000000..2f88c744 --- /dev/null +++ b/src/components/Feedback/Feedback.jsx @@ -0,0 +1,122 @@ +import React, { useState } from "react"; +import "./Feedback.css"; +import Footer from "../Footer-section/Footer"; +import RentNavbar from "../Header-section/RentNavbar"; + +const Feedback = () => { + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [rating, setRating] = useState(0); + const [hoverRating, setHoverRating] = useState(0); + const [feedback, setFeedback] = useState(""); + const [isSubmitted, setIsSubmitted] = useState(false); + + const handleRating = (rate) => { + setRating(rate); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + if (name && email && rating && feedback) { + setIsSubmitted(true); + // Here, handle actual submission, such as sending to a backend API + console.log({ + name, + email, + rating, + feedback, + }); + // Reset form after submission + setName(""); + setEmail(""); + setRating(0); + setFeedback(""); + setHoverRating(0); + } else { + alert("Please fill out all fields"); + } + }; + + const closePopup = () => { + setIsSubmitted(false); + }; + + return ( + <> +
+ + +
+

Feedback Form

+ + {/* Name Input */} + setName(e.target.value)} + required + /> + + {/* Email Input */} + setEmail(e.target.value)} + required + /> + + {/* Star Rating */} +
+ {[1, 2, 3, 4, 5].map((star) => ( + handleRating(star)} + onMouseEnter={() => setHoverRating(star)} + onMouseLeave={() => setHoverRating(0)} + > + ★ + + ))} +
+ + {/* Feedback Textarea */} + +
+
+ +
+ {[1, 2, 3, 4, 5].map((star) => ( + = star ? "text-yellow-400" : "text-gray-400" + }`} + onClick={() => handleRating(star)} + > + {rating >= star ? "★" : "☆"} + + ))} +
+
+
+ +
+ + + ) : ( +
+ {submitStatus === "success" ? ( +
+ +

+ Feedback Submitted +

+
+ ) : ( +
+ +

+ Failed to Submit +

+
+ )} + +
+ )} + + + )} ); };