Testimonials Creation

src/App.js

@@ -11,6 +11,7 @@ import Services from "./Components/footer_section/services/Services";
 import ContactUs from "./Components/footer_section/ContactUs/contact_us";
 import Readmore from "./Components/Readmore";
 import Login from "./Components/Login";
+import testimonials from "./Components/Testimonials/Testimonials";
 import Pricing from "./Components/footer_section/Pricing/pricing";
 import MyProjects from "./Components/menu_section/my_projects/MyProjects";
 import NewProject from "./Components/menu_section/new_project/NewProject";

src/Components/Footer.js

@@ -41,7 +41,7 @@ const Footer = () => {
             <p className='footer-section-title'>Product</p>
             <ul className='footer-links'>
               <li><a href='/blogs'><FontAwesomeIcon icon={faBlog} /> Blogs</a></li>
-              <li><a href='#'><FontAwesomeIcon icon={faStar} /> Testimonials</a></li>
+              <li><a href='/Testimonials'><FontAwesomeIcon icon={faStar} /> Testimonials</a></li>
               <li><a href='#'><FontAwesomeIcon icon={faClipboardList} /> Portfolio</a></li>
               <li><a href='/faq'><FontAwesomeIcon icon={faQuestionCircle} /> FAQ</a></li>
               <li><a href='/rateus'><FontAwesomeIcon icon={faStar} /> Rate-Us</a></li>

src/Components/Testimonials/Testimonials.css

@@ -0,0 +1,102 @@
+.home-icon {
+    position: absolute;
+    top: 1.5rem;
+    left: 1.5rem;
+    width: 2.5rem;
+    cursor: pointer;
+}
+
+.testimonials {
+    display: block;
+    margin: auto;
+    width: 52.5rem;
+    height: 100%;
+    background-color: white;
+}
+
+.testimonials-heading {
+    text-align: center;
+    margin-bottom: 3rem;
+    margin-top: 3rem;
+    color: #FFFFCC;
+    font-size: 50px;
+}
+
+.testimonials-block {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
+
+.testimonial-item {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 35%;
+    height: 14rem;
+    border: 1px solid rgba(206, 212, 218, 1);
+    border-radius: 8px;
+    margin-bottom: 21px;
+    color: #F5F5DC;
+    border: 2px solid #6052ff;
+    box-shadow: 7px 7px 32px 0 #6052ff;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.testimonial-item:hover {
+    background: #3228a7;
+    color: white;
+}
+
+.testimonial-name {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 30px;
+    letter-spacing: 0em;
+    text-align: left;
+    margin-top: 1rem;
+}
+
+.testimonial-feedback {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 25px;
+    letter-spacing: 0em;
+    text-align: left;
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+@media only screen and (max-width: 768px) {
+    .testimonials-block {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .testimonial-item {
+        width: 90%;
+        height: 100%;
+        padding: 0.5rem;
+    }
+}
+
+@media only screen and (max-width: 1020px) {
+    .testimonials-block {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .testimonial-item {
+        width: 90% !important;
+        height: 100%;
+        padding: 0.5rem;
+    }
+}
+
+@media only screen and (max-width: 1250px) {
+    .testimonial-item {
+        width: 45%;
+    }
+}

src/Components/Testimonials/Testimonials.jsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import "./Testimonials.css";
+import homeIcon from '../../img/homeicon.png'; // Home icon
+
+// Using existing images from About_us.jsx
+import collaborate from '../../img/collaboration.png';
+import collaboratehover from '../../img/collaborationhover.png';
+
+const testimonials = [
+    {
+        name: "JohnDoe",
+        feedback: "UniCollab has been a game-changer for my academic projects. The collaboration tools are top-notch, and I've been able to work seamlessly with students from different universities."
+    },
+    {
+        name: "JaneSmith",
+        feedback: "Thanks to UniCollab, I found the perfect study group that helped me ace my exams. The resource sharing feature is incredibly useful."
+    },
+    {
+        name: "SophiaWilson",
+        feedback: "The mentorship programs on UniCollab connected me with industry professionals who guided me through my career path. I highly recommend it!"
+    },
+    {
+        name: "EmilyDavis",
+        feedback: "Event management on UniCollab made organizing our college seminar a breeze. The platform's tools are very user-friendly and efficient."
+    },
+    {
+        name: "AliceBrown",
+        feedback: "Receiving feedback and evaluations through UniCollab has significantly improved my academic performance. The platform fosters a supportive community."
+    },
+    {
+        name: "Chris Miller",
+        feedback: "UniCollab's resources have been invaluable in my research projects. The platform has a wide range of tools that make collaboration easy and efficient."
+    }
+];
+
+const Testimonials = () => {
+    const [hover, setHover] = useState(false);
+
+    return (
+        <div id='testimonials' style={{display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '3rem'}}>
+            <Link to="/">
+                <img src={homeIcon} alt="Home" className="home-icon" />
+            </Link>
+            <h1 className='testimonials-heading'>Testimonials</h1>
+            <div className='testimonials-block'>
+                {testimonials.map((testimonial, index) => (
+                    <div 
+                        key={index} 
+                        className='testimonial-item' 
+                        onMouseOver={() => setHover(true)} 
+                        onMouseLeave={() => setHover(false)}
+                    >
+                        <div style={{display: 'flex', alignItems: 'center', gap: '1rem'}}>
+                            <img 
+                                src={hover ? collaboratehover : collaborate} 
+                                alt="User Icon" 
+                                style={{marginLeft: '1rem', marginTop: '1rem', width: '3rem'}} 
+                            />
+                            <div className='testimonial-name'>{testimonial.name}</div>
+                        </div>
+                        <p className='testimonial-feedback'>{testimonial.feedback}</p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default Testimonials;

src/configs/router.js

@@ -26,6 +26,8 @@ import ResetPassword from "../Components/auth/resetPassword/ResetPassword";
 import Freelancer from "../Components/FreeLancer/Freelancer";
 import Feedbackform from "../Components/feedback/feedbackform";
 import ShoppingCart from "../Components/cart/cart";
+import testimonials from "../Components/Testimonials/Testimonials";
+import Testimonials from "../Components/Testimonials/Testimonials";
 import Contributors from "../Components/Contributors";
 
 
@@ -56,6 +58,7 @@ const router = createBrowserRouter([
     { path: "/freelancer", element: <Freelancer /> },
     { path: "/feedback", element: <Feedbackform /> },
     { path: "/cart", element: <ShoppingCart /> },
+    { path: "/Testimonials", element: <Testimonials /> },
     { path: "/contributors", element: <Contributors /> },
 
   ]);