Updated Rate Us Page

singodiyashubham87 · Jul 5, 2024 · b1a76c6 · b1a76c6
1 parent bc56087
commit b1a76c6
Show file tree

Hide file tree

Showing 2 changed files with 156 additions and 82 deletions.
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,95 +1,118 @@
+import React, { useState } from 'react';
 import { AiFillHome, AiOutlineInfoCircle, AiOutlineMessage, AiOutlineTeam } from 'react-icons/ai';
-import { FaNewspaper } from 'react-icons/fa';
+import { FaNewspaper, FaStar } from 'react-icons/fa';
 import { FiMail } from 'react-icons/fi';
-
 import LinkedInIcon from "../assets/images/linkedin.jpg";
 import TwitterIcon from "../assets/images/X.png";
 import GitHubIcon from "../assets/images/github.png";
-import EmailIcon from "../assets/images/GMail.webp";
+import RateUs from './RateUs'; // Adjust the import path as needed
 
 const Footer = () => {
+ const [showRateUs, setShowRateUs] = useState(false);
+
+ const toggleRateUs = () => {
+ setShowRateUs(!showRateUs);
+ };
+
  return (
- <footer className="bg-black">
- <div className="flex justify-between items-center py-4 px-8">
- <div className="footerNav">
- <ul className="flex gap-4 flex-wrap">
- <li>
- <a href="#" className="text-white flex items-center hover:text-gray-600">
- <AiFillHome className="h-6 w-6" />
- <span className="ml-2">Home</span>
- </a>
- </li>
- <li>
- <a href="#" className="text-white flex items-center hover:text-gray-600">
- <FaNewspaper className="h-6 w-6" />
- <span className="ml-2">News</span>
- </a>
- </li>
- <li>
- <a href="#" className="text-white flex items-center hover:text-gray-600">
- <AiOutlineInfoCircle className="h-6 w-6" />
- <span className="ml-2">About Us</span>
- </a>
- </li>
- <li>
- <a href="#" className="text-white flex items-center hover:text-gray-600">
- <AiOutlineMessage className="h-6 w-6" />
- <span className="ml-2">Contact Us</span>
- </a>
- </li>
- <li>
- <a href="#" className="text-white flex items-center hover:text-gray-600">
- <AiOutlineTeam className="h-6 w-6" />
- <span className="ml-2">Our Team</span>
- </a>
- </li>
- </ul>
+ <>
+ <footer className="bg-black">
+ <div className="flex justify-between items-center py-4 px-8">
+ <div className="footerNav">
+ <ul className="flex gap-4">
+ <li>
+ <a href="#" className="text-white flex items-center hover:text-gray-600">
+ <AiFillHome className="h-6 w-6" />
+ <span className="ml-2">Home</span>
+ </a>
+ </li>
+ <li>
+ <a href="#" className="text-white flex items-center hover:text-gray-600">
+ <FaNewspaper className="h-6 w-6" />
+ <span className="ml-2">News</span>
+ </a>
+ </li>
+ <li>
+ <a href="#" className="text-white flex items-center hover:text-gray-600">
+ <AiOutlineInfoCircle className="h-6 w-6" />
+ <span className="ml-2">About Us</span>
+ </a>
+ </li>
+ <li>
+ <a href="#" className="text-white flex items-center hover:text-gray-600">
+ <AiOutlineMessage className="h-6 w-6" />
+ <span className="ml-2">Contact Us</span>
+ </a>
+ </li>
+ <li>
+ <a onClick={toggleRateUs} className="text-white flex items-center hover:text-gray-600 cursor-pointer">
+ <FaStar className="h-6 w-6" />
+ <span className="ml-2">Rate Us</span>
+ </a>
+ </li>
+ <li>
+ <a href="#" className="text-white flex items-center hover:text-gray-600">
+ <AiOutlineTeam className="h-6 w-6" />
+ <span className="ml-2">Our Team</span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ <div className="socialicons flex gap-4">
+ <a
+ href="https://www.linkedin.com/in/singodiyashubham87/"
+ className="hover:bg-blue-300 p-1 rounded-full"
+ >
+ <img
+ src={LinkedInIcon}
+ alt="LinkedIn"
+ className="rounded-full w-8 h-8 hover:bg-blue-500"
+ />
+ </a>
+ <a
+ href="https://twitter.com/_master_mickey"
+ className="hover:bg-blue-300 p-1 rounded-full"
+ >
+ <img
+ src={TwitterIcon}
+ alt="Twitter"
+ className="rounded-full w-8 h-8 hover:bg-blue-500"
+ />
+ </a>
+ <a
+ href="https://github.com/singodiyashubham87"
+ className="hover:bg-blue-300 p-1 rounded-full"
+ >
+ <img
+ src={GitHubIcon}
+ alt="GitHub"
+ className="rounded-full w-8 h-8 hover:bg-blue-500"
+ />
+ </a>
+ <a
+ href="mailto:[email protected]"
+ className="hover:bg-blue-300 p-1 rounded-full"
+ >
+ <FiMail className="text-white h-6 w-6 hover:bg-blue-500" />
+ </a>
+ </div>
  </div>
- <div className="socialicons flex gap-4 flex-wrap">
- <a
- href="https://www.linkedin.com/in/singodiyashubham87/"
- className="hover:bg-blue-300 p-1 rounded-full"
- >
- <img
- src={LinkedInIcon}
- alt="LinkedIn"
- className="rounded-full w-8 h-8 hover:bg-blue-500"
- />
- </a>
- <a
- href="https://twitter.com/_master_mickey"
- className="hover:bg-blue-300 p-1 rounded-full"
- >
- <img
- src={TwitterIcon}
- alt="Twitter"
- className="rounded-full w-8 h-8 hover:bg-blue-500"
- />
- </a>
- <a
- href="https://github.com/singodiyashubham87"
- className="hover:bg-blue-300 p-1 rounded-full"
- >
- <img
- src={GitHubIcon}
- alt="GitHub"
- className="rounded-full w-8 h-8 hover:bg-blue-500"
- />
- </a>
- <a
- href="mailto:[email protected]"
- className="hover:bg-blue-300 p-1 rounded-full"
- >
- <FiMail className="text-white h-6 w-6 hover:bg-blue-500" />
- </a>
+ <div className="text-center mt-4">
+ <p className="text-white">
+ Made with 💝 by <a href="https://shubham-s-socials.vercel.app/" className="decoration-none font-semibold hover:underline">Master Mickey</a> Copyright &copy;{(new Date().getFullYear())}
+ </p>
+ </div>
+ </footer>
+
+ {showRateUs && (
+ <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+ <div className="bg-white p-8 rounded-lg shadow-lg relative max-w-md w-full">
+ <span className="absolute top-2 right-2 cursor-pointer text-2xl font-bold" onClick={toggleRateUs}>&times;</span>
+ <RateUs />
+ </div>
  </div>
- </div>
- <div className="text-center mt-4">
- <p className="text-white">
- Made with 💝 by <a href="https://shubham-s-socials.vercel.app/" class="decoration-none font-semibold hover:underline">Master Mickey</a> Copyright &copy;{(new Date().getFullYear())}
- </p>
- </div>
- </footer>
+ )}
+ </>
  );
 };
 

diff --git a/src/components/RateUs.jsx b/src/components/RateUs.jsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+const RateUs = () => {
+ const [rating, setRating] = useState(0);
+ const [feedback, setFeedback] = useState('');
+
+ const handleRating = (rate) => {
+ setRating(rate);
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ console.log('Rating:', rating);
+ console.log('Feedback:', feedback);
+ };
+
+ return (
+ <div className="p-4">
+ <div className="bg-gray-800 text-white p-8 rounded-lg shadow-lg max-w-md w-full transform transition duration-300 hover:bg-navy-blue-900 hover:scale-105">
+ <h1 className="text-4xl mb-0 uppercase tracking-wider bg-gray bg-clip-padding p-4 text-center text-white rounded-md">Rate Us</h1>
+ <div className="flex justify-center mb-6">
+ {[1, 2, 3, 4, 5].map((star) => (
+ <span
+ key={star}
+ className={`text-4xl cursor-pointer transition duration-300 transform hover:text-yellow-500 hover:scale-125 ${star <= rating ? 'text-yellow-500' : 'text-gray-500'}`}
+ onClick={() => handleRating(star)}
+ >
+ ★
+ </span>
+ ))}
+ </div>
+ <form onSubmit={handleSubmit}>
+ <textarea
+ value={feedback}
+ onChange={(e) => setFeedback(e.target.value)}
+ placeholder="Leave your feedback here"
+ className="w-full h-28 p-4 mb-6 border border-gray-600 rounded-lg resize-none text-black"
+ ></textarea>
+ <button
+ type="submit"
+ className="w-full py-3 bg-gray-600 text-white rounded-lg uppercase text-lg transition duration-300 hover:bg-gray-400 hover:shadow-lg"
+ >
+ Submit
+ </button>
+ </form>
+ </div>
+ </div>
+ );
+};
+
+export default RateUs;