Fixed Mobile view

frontend/src/Component/Footer.js

@@ -55,6 +55,7 @@ function Footer() {
                   <a href="https://www.devlabsstore.tech/">
                     <FaHome className="mr-2" /> Home
                   </a>
+
                 </li>
                 <li className="nav-item">
                   <a href="https://www.devlabsstore.tech/about">
@@ -201,10 +202,12 @@ function Footer() {
                   <a href="/" target="_blank" rel="noopener noreferrer">
                     <FaFacebookF color="white" fontSize={25} className="ico" />
                   </a>
+
                 </span>
                 <span className="icons">
                   <a href="/" target="_blank" rel="noopener noreferrer">
                     <FaGithubSquare
+
                       color="white"
                       fontSize={25}
                       className="ico"

frontend/src/Component/Rate.jsx

@@ -1,31 +1,64 @@
-import React, { useState } from 'react'
-import { FaStar } from 'react-icons/fa'
-import "./Rate.css"
+import React, { useState } from 'react';
+import { FaStar } from 'react-icons/fa';
+import "./Rate.css";
+
 const Rate = () => {
   const [rating, setRating] = useState(null);
   const [hover, setHover] = useState(null);
+  const [feedback, setFeedback] = useState("");
+  const [showDialog, setShowDialog] = useState(true);
+
+  const handleSubmit = () => {
+    if (rating && feedback) {
+      alert(`Rating: ${rating}\nFeedback: ${feedback}`);
+      setShowDialog(false); // Close the dialog
+    } else {
+      alert("Please provide a rating and feedback before submitting.");
+    }
+  };
+
   return (
-    <div className='Rate'>
-      {[...Array(5)].map((star, index) => {
-        const currentRating = index +1;
-        return(
-          <label>
-            <input type="radio" name='rating' value={currentRating} onClick={() => setRating(currentRating)}/>
-            <FaStar 
-            className='star' 
-            size={50} 
-            color={currentRating <= (hover || rating) ? "#0739ff":"#e4e5e9"} 
-            onMouseEnter={() => setHover(currentRating)}
-            onMouseLeave={() => setHover(null)}
-
-            />
-          </label>
-        );
-      })}
-      <p>Your Rating is {rating} out of 5. </p>
-
-    </div>
-  )
-}
+    showDialog && (
+      <div className='rate-us'>
+        <div className='rate-us__container rate-us__container--hover'>
+          <h2 className='rate-us__heading'>Rate Us</h2>
+          <div className='rate-us__icon-rating'>
+            {[...Array(5)].map((star, index) => {
+              const currentRating = index + 1;
+              return (
+                <label key={index}>
+                  <input
+                    type="radio"
+                    name='rating'
+                    value={currentRating}
+                    onClick={() => setRating(currentRating)}
+                    style={{ display: 'none' }}
+                  />
+                  <FaStar
+                    className={`star rate-us__icon ${currentRating <= (hover || rating) ? 'rate-us__icon--selected' : ''}`}
+                    size={50}
+                    color={currentRating <= (hover || rating) ? "#ffd700" : "#e4e5e9"}
+                    onMouseEnter={() => setHover(currentRating)}
+                    onMouseLeave={() => setHover(null)}
+                  />
+                </label>
+              );
+            })}
+          </div>
+          <p className='rate-us__text'>Your Rating is {rating} out of 5.</p>
+          <textarea
+            className='rate-us__feedback-textarea'
+            placeholder='Leave your feedback here...'
+            value={feedback}
+            onChange={(e) => setFeedback(e.target.value)}
+          />
+          <button className='rate-us__submit-button rate-us__submit-button--hover' onClick={handleSubmit}>
+            Submit
+          </button>
+        </div>
+      </div>
+    )
+  );
+};
 
-export default Rate
+export default Rate;

frontend/src/style/Footer.css

@@ -4,6 +4,7 @@
   background: #6a43c3;
   color: white;
 }
+
 /* Social Icons Hover Effects */
 .outerD .icons {
   transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
@@ -90,6 +91,41 @@
   animation: pulse 0.5s infinite;
 }
 
+/* Footer Links Lighting Effect */
+ul a {
+  text-decoration: none;
+  color: white;
+  font-size: 1.3rem;
+  display: flex;
+  align-items: center;
+  position: relative;
+  transition: color 0.3s ease, box-shadow 0.3s ease;
+}
+
+ul a::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 120%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  filter: blur(10px);
+  opacity: 0;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  transform: translate(-50%, -50%) scale(0.8);
+}
+
+ul a:hover {
+  color: #ffd700; /* Change link color on hover */
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+}
+
+ul a:hover::before {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .Footer {
@@ -175,14 +211,6 @@ ul li {
   margin-bottom: 0.5rem; /* Adjust the space between list items */
 }
 
-ul a {
-  text-decoration: none;
-  color: white;
-  font-size: 1.3rem;
-  display: flex;
-  align-items: center;
-}
-
 ul a .mr-2 {
   margin-right: 0.5rem; /* Adjust space between icon and text */
 }
@@ -344,12 +372,11 @@ ul a .mr-2 {
     transform: scale(1);
     box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
   }
-
+  
   50% {
     transform: scale(1.05);
     box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
   }
-
   100% {
     transform: scale(1);
     box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);

frontend/src/style/Rateus.css

@@ -4,6 +4,7 @@
   align-items: center;
   height: 100vh; /* Ensure the component is centered vertically */
 }
+
 .rate-us__container {
   width: 70%;
   max-width: 600px;
@@ -31,27 +32,12 @@
   justify-content: center;
 }
 
-.rate-us__submit-button {
-  width: 30%;
-  padding: 10px;
-  background-color: #7c1de2;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
 .rate-us__icon {
   font-size: 2rem; /* Increase emoji size */
   cursor: pointer;
   transition: transform 0.3s, filter 0.3s;
 }
 
-.rate-us__submit-button--hover:hover {
-  background-color: #5f129f;
-}
-
 .rate-us__icon--selected {
   transform: scale(1.0); /* Make selected emoji bigger */
   filter: brightness(1.5); /* Shine effect */
@@ -67,3 +53,18 @@
   margin-bottom: 20px;
   font-size: 1rem; /* Adjust textarea font size */
 }
+
+.rate-us__submit-button {
+  width: 30%;
+  padding: 10px;
+  background-color: #7c1de2;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.rate-us__submit-button--hover:hover {
+  background-color: #5f129f;
+}