+
+ );
+ };
+
+ return (
+ setIsOpen(!isOpen)} + > + {question} + {isOpen ? "▲" : "▼"} +
+ {isOpen &&{answer}
} +
+
+
+
+
+
+
+
+ {/* FAQ Section */}
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/components/Auth/AuthForm.jsx b/frontend/src/components/Auth/AuthForm.jsx
new file mode 100644
index 000000000..308295743
--- /dev/null
+++ b/frontend/src/components/Auth/AuthForm.jsx
@@ -0,0 +1,162 @@
+import { useState } from "react";
+import { useModal } from "./ModalContext";
+import { signup, login as authLogin } from "./AuthService";
+import signUpImage from "/images/signUp.jpg";
+
+export const AuthForm = ({ type, onSuccess }) => {
+ const { hideModal, login } = useModal();
+ const [formMode, setFormMode] = useState(type);
+ const [username, setUsername] = useState("");
+ const [password, setPassword] = useState("");
+ const [usernameError, setUsernameError] = useState("");
+ const [passwordError, setPasswordError] = useState("");
+ const [error, setError] = useState(null);
+ const [role, setRole] = useState("Listener");
+ const [loading, setLoading] = useState(false);
+
+ const handleRoleChange = (e) => {
+ setRole(e.target.value);
+ };
+
+ const handleUsernameChange = (e) => {
+ const newUsername = e.target.value;
+ setUsername(newUsername);
+ if (newUsername.length < 3) {
+ setUsernameError("Username must be at least 3 characters long.");
+ } else {
+ setUsernameError("");
+ }
+ };
+
+ const handlePasswordChange = (e) => {
+ const newPassword = e.target.value;
+ setPassword(newPassword);
+ if (newPassword.length < 6) {
+ setPasswordError("Password must be at least 6 characters long.");
+ } else {
+ setPasswordError("");
+ }
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (usernameError || passwordError) {
+ setError("Please fix the errors before submitting.");
+ return;
+ }
+
+ setLoading(true);
+ setError(null);
+
+ try {
+ let userData;
+ if (formMode === "signup") {
+ userData = await signup(username, password, role);
+ } else {
+ userData = await authLogin(username, password);
+ }
+ login(userData);
+ hideModal();
+ onSuccess();
+ } catch (error) {
+ setError(
+ error.response?.data?.error ||
+ "An error occurred during the authentication process.Try Again!"
+ );
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+ Mission
++ We aim to support and empower individuals with ADHD by providing a + safe space and understanding community +
+
+
+ Values
++ We believe in inclusivity, empathy, and the power of community. + Our value guide us in creating a welcoming environment for + everyone +
+
+
+ Team
++ Our team is dedicated to providing resources, support, and events + that cater to the unique needs of those with ADHD. +
+
+
+ Join Our Community
++ Become part of our community and connect with others who understand + your journey. Toghether, we can achieve more. +
+
+
+
+
+
+ FAQs
+
+
+
+
+ Contact Us
++ If you have any questions or need support, feel free to reach out to + us at{" "} + + support@adhdcommunity.com + + . +
+
+
+ );
+};
diff --git a/frontend/src/components/Auth/AuthService.jsx b/frontend/src/components/Auth/AuthService.jsx
new file mode 100644
index 000000000..b6aae3708
--- /dev/null
+++ b/frontend/src/components/Auth/AuthService.jsx
@@ -0,0 +1,81 @@
+import api from "../../axiosConfig";
+
+const setAuthToken = (token) => {
+ localStorage.setItem("authToken", token);
+};
+
+export const signup = async (username, password, role) => {
+ try {
+ const response = await api.post("/users", { username, password, role });
+ const { accessToken } = response.data;
+
+ setAuthToken(accessToken);
+ return response.data;
+ } catch (error) {
+ console.error(
+ "Signup failed:",
+ error.response?.data?.message || error.message
+ );
+ throw error;
+ }
+};
+
+export const login = async (username, password) => {
+ try {
+ const response = await api.post("/sessions", { username, password });
+ const { token } = response.data;
+ setAuthToken(token);
+ return response.data;
+ } catch (error) {
+ console.error(
+ "Login failed:",
+ error.response?.data?.message || error.message
+ );
+ throw error;
+ }
+};
+
+export const getProfile = async () => {
+ try {
+ const token = localStorage.getItem("authToken");
+ if (!token) {
+ throw new Error("No auth token found");
+ }
+ const response = await api.get("/profile", {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ return response.data;
+ } catch (error) {
+ console.error(
+ "Failed to fetch profile:",
+ error.response?.data?.message || error.message
+ );
+ throw error;
+ }
+};
+
+export const updateProfile = async (userData) => {
+ try {
+ const token = localStorage.getItem("authToken");
+
+ const response = await api.put("/profile", userData, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ "Content-Type": "application/json",
+ },
+ });
+ return response.data;
+ } catch (error) {
+ console.error(
+ "Failed to update profile:",
+ error.response?.data?.message || error.message
+ );
+ throw error;
+ }
+};
+
+export const logout = () => {
+ localStorage.removeItem("authToken");
+};
diff --git a/frontend/src/components/Auth/Community.jsx b/frontend/src/components/Auth/Community.jsx
new file mode 100644
index 000000000..1bbe6fd76
--- /dev/null
+++ b/frontend/src/components/Auth/Community.jsx
@@ -0,0 +1,34 @@
+import communityData from "../../data/communityData.json";
+import defaultProfilePicture from "/icons/profile.png";
+
+export const Community = () => {
+ return (
+
+
+
+
+ 
+
+
+ {error &&
+ {error}
}
+
+ + {formMode === "signup" + ? "Already have an account?" + : "Don't have an account?"}{" "} + +
+
+
+ );
+};
diff --git a/frontend/src/components/Auth/ModalContext.jsx b/frontend/src/components/Auth/ModalContext.jsx
new file mode 100644
index 000000000..85cc3fb3b
--- /dev/null
+++ b/frontend/src/components/Auth/ModalContext.jsx
@@ -0,0 +1,58 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { getProfile } from "../Auth/AuthService";
+
+const ModalContext = createContext();
+
+export const useModal = () => useContext(ModalContext);
+
+export const ModalProvider = ({ children }) => {
+ const [isVisible, setIsVisible] = useState(false);
+ const [content, setContent] = useState(null);
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
+ const [user, setUser] = useState(null);
+
+ const showModal = (component) => {
+ setContent(component);
+ setIsVisible(true);
+ };
+
+ const hideModal = () => {
+ setIsVisible(false);
+ setContent(null);
+ };
+
+ useEffect(() => {
+ const token = localStorage.getItem("authToken");
+ if (token) {
+ getProfile()
+ .then((userData) => {
+ setUser(userData);
+ setIsAuthenticated(true);
+ })
+ .catch((error) => {
+ console.error("Error fetching profile:", error);
+ localStorage.removeItem("authToken");
+ });
+ }
+ }, []);
+
+ const login = (userData) => {
+ setUser(userData);
+ setIsAuthenticated(true);
+ };
+
+ const logout = () => {
+ localStorage.removeItem("authToken");
+ setUser(null);
+ setIsAuthenticated(false);
+ };
+
+ return (
+ + Meet The Community +
+
+ {communityData.map((member) => (
+
+
+
+ ))}
+
+ 
+
+ {member.name}
+{member.bio}
+ + {member.role} + +Loading...
;
+ }
+ if (error) {
+ return {error}
; + } + if (!userData) { + returnNo user found
;
+ }
+
+ return (
+
+
+
+ );
+};
diff --git a/frontend/src/components/Auth/ProfileForm.jsx b/frontend/src/components/Auth/ProfileForm.jsx
new file mode 100644
index 000000000..5e2c8c091
--- /dev/null
+++ b/frontend/src/components/Auth/ProfileForm.jsx
@@ -0,0 +1,52 @@
+export const ProfileForm = ({ userData, setUserData, handleUpdateProfile }) => {
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setUserData((prevData) => ({
+ ...prevData,
+ [name]: value,
+ }));
+ };
+
+ return (
+
+ );
+};
diff --git a/frontend/src/components/CommunityGuidelines.jsx b/frontend/src/components/CommunityGuidelines.jsx
new file mode 100644
index 000000000..7d48b06e3
--- /dev/null
+++ b/frontend/src/components/CommunityGuidelines.jsx
@@ -0,0 +1,139 @@
+import Footer from "../common/Footer";
+import HeroSection from "../common/HeroSection";
+
+import Menu from "../common/Menu";
+
+export const CommunityGuidelines = () => {
+ return (
+
+
+
+ 
setEditMode(true)}
+ />
+ )}
+
+ {editMode && (
+
+
+
+ 
+
+ {!editMode && (
+
+
+ + Hello, {userData.name || userData.username} +
+Role: {role || "User"}
+Bio: {userData.bio || ""}
+I like: {userData.hobby || ""}
+{notification}
+ )} +
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/components/eventPage/EventCard.jsx b/frontend/src/components/eventPage/EventCard.jsx
new file mode 100644
index 000000000..7367da4dd
--- /dev/null
+++ b/frontend/src/components/eventPage/EventCard.jsx
@@ -0,0 +1,67 @@
+const EventCard = ({ event, index, flipped, handleFlip }) => {
+ const isFlipped = flipped === index;
+
+ return (
+
+
+ + Community Guidelines +
++ We strive to create a supportive and inclusive environment for all + our members. Please adhere to the following guidelines to help us + maintain a respectful and positive community. +
+ +
+
+
+
+
+ + Respect & Kindness +
++ Please treat all members with respect and kinsdness. We value + diverse perspectives and expect everyone to engage in + constructive and respectful discussions. +
+
+
+
+ + Confidentiality +
++ We may be an ADHD-focused community group, however, it is your + choice whether you talk about your ADHD. +
+
+
+
+ + Age Requirement +
++ The group is aimed at adults with suspected or diagnosed ADHD + aged 18 and over. Unfortunately, we cannot accept attendees + under the age of 18. +
+
+
+
+ + No Medical Advice +
++ Our community is here to provide support and share experiences. + However, please refrain from giving medical advice. Always + consult with a healthcare professional for medical issues. +
+
+
+
+ + Alcohol Consumption +
++ Some of our events are held in bars, and we are happy for + alcoholic beverages to be consumed. You are responsible for your + own behavior, however, if it negatively affects any other + attendees, an event host may speak to you and, if necessary, ask + you to leave. +
+
+
+
+ + Inclusivity +
++ Use inclusive language and avoid offensive or discriminatory + remarks. This includes avoiding language that may be considered + sexist, racist, homophobic, or otherwise insensitive. +
+
+
+
+ + Diversity and Respect +
++ We welcome everyone regardless of their ethnicity, religion, + age, culture, gender identity, sexual orientation, and + disability. Please remember that other attendees may have views + and beliefs that differ from your own - please try and respect + these. +
+
+
+
+ + Reporting Issues +
++ If you feel uncomfortable or upset by another attendee’s + actions, please speak to the event host during the event, or + send a message at{" "} + + support@adhdcommunity.com + {" "} + after the event has taken place. +
+
+
+ + Zero Tolerance for Discrimination +
+Any type of discrimination will not be tolerated.
+ handleFlip(index)}
+ style={{ perspective: "1000px", transformOrigin: "center center" }}
+ >
+
+ );
+};
+
+export default EventCard;
diff --git a/frontend/src/components/eventPage/EventsPage.jsx b/frontend/src/components/eventPage/EventsPage.jsx
new file mode 100644
index 000000000..9e83613ea
--- /dev/null
+++ b/frontend/src/components/eventPage/EventsPage.jsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+
+import Footer from "../../common/Footer";
+import HeroSection from "../../common/HeroSection";
+import Menu from "../../common/Menu";
+import eventsData from "../../data/events.json";
+import EventCard from "./EventCard";
+
+export const EventsPage = () => {
+ const [flipped, setFlipped] = useState(null);
+
+ const handleFlip = (index) => {
+ setFlipped(flipped === index ? null : index);
+ };
+
+ const nextEvent = eventsData[0];
+
+ return (
+
+ {/* Front Side */}
+
+
+ 
+
+ {/* Back Side */}
+
+
+ {event.title}
+{event.description}
+
+
+ {event.title}
+
+
+ + Time: {event.details.time} +
++ Place: {event.details.place} +
+{event.details.info}
+
+
+
+
+
+ {/* Upcoming Events Section */}
+
+
+
+
+ );
+};
diff --git a/frontend/src/data/communityData.json b/frontend/src/data/communityData.json
new file mode 100644
index 000000000..4ed8413d1
--- /dev/null
+++ b/frontend/src/data/communityData.json
@@ -0,0 +1,23 @@
+[
+ {
+ "id": 1,
+ "name": "John Doe",
+ "bio": "Loves helping others and playing guitar.",
+ "role": "Listener",
+ "image": "/images/john.jpg"
+ },
+ {
+ "id": 2,
+ "name": "Jake Smith",
+ "bio": "Enjoys reading and sharing experiences.",
+ "role": "Seeker",
+ "image": "/images/Villads.jpg"
+ },
+ {
+ "id": 3,
+ "name": "Alice Johnson",
+ "bio": "Passionate about mental health awareness.",
+ "role": "Listener",
+ "image": "/images/alice.jpg"
+ }
+]
\ No newline at end of file
diff --git a/frontend/src/data/events.json b/frontend/src/data/events.json
new file mode 100644
index 000000000..7398662cf
--- /dev/null
+++ b/frontend/src/data/events.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "How to Plan Your Days with ADHD",
+ "description": "Join us for an interactive session where we'll explore various strategies and tools to help you plan and organize your days more effectively with ADHD.",
+ "imageUrl": "/images/plan-event.jpg",
+ "details": {
+ "time": "2:00 PM - 4:00 PM",
+ "place": "Conference Room A",
+ "info": "This workshop is ideal for anyone struggling with time management due to ADHD. We'll cover planning methods that accommodate impulsivity and fluctuating motivation."
+ }
+ },
+ {
+ "title": "Social Activities for ADHD",
+ "description": "Engage in fun and supportive social activities specifically designed for individuals with ADHD. Meet new friends, build a community, and enjoy a relaxed, understanding environment where you can be yourself.",
+ "imageUrl": "/images/social-event.jpg",
+ "details": {
+ "time": "10:00 AM - 12:00 PM",
+ "place": "Community Center",
+ "info": "Our event features team games, creative workshops, and discussions that are tailored to encourage interaction in a pressure-free setting."
+ }
+ },
+ {
+ "title": "Mindfulness and ADHD",
+ "description": "Explore mindfulness techniques to help manage ADHD symptoms more effectively. This session will guide you through methods to improve your focus, emotional regulation, and overall mental well-being. Learn to navigate daily challenges with a mindful approach that can be integrated seamlessly into your lifestyle.",
+ "imageUrl": "/images/mindful-event.jpg",
+ "details": {
+ "time": "2:00 PM - 4:00 PM",
+ "place": "Yoga Studio",
+ "info": "Participants will learn grounding techniques, breathing exercises, and daily mindfulness practices suited for managing impulsivity and anxiety."
+ }
+ },
+ {
+ "title": "ADHD Support Group",
+ "description": "Join our support group to share experiences, tips, and support with others living with ADHD. This regular meeting offers a safe space to discuss challenges, celebrate achievements, and learn from each other in a supportive and non-judgmental environment.",
+ "imageUrl": "/images/support-event.jpg",
+ "details": {
+ "time": "5:00 PM - 7:00 PM",
+ "place": "Library Hall",
+ "info": "The group is facilitated by experienced counselors who specialize in ADHD, providing insights into coping strategies and behavioral techniques."
+ }
+ }
+]
\ No newline at end of file
diff --git a/frontend/src/data/testimonials.json b/frontend/src/data/testimonials.json
new file mode 100644
index 000000000..fc7696448
--- /dev/null
+++ b/frontend/src/data/testimonials.json
@@ -0,0 +1,42 @@
+[
+ {
+ "name": "Jane Doe",
+ "review": "This community has been a lifesaver. Connecting with others who understand ADHD has made such a difference in my life.",
+ "rating": 5
+ },
+ {
+ "name": "John Smith",
+ "review": "Finding someone to talk to when I'm having a hard day has been invaluable. Thank you for creating this space.",
+ "rating": 4
+ },
+ {
+ "name": "Emily Tran",
+ "review": "The resources and people here have helped me manage my symptoms and feel less alone in my struggles.",
+ "rating": 5
+ },
+ {
+ "name": "Mark Johnson",
+ "review": "I've learned so much about managing ADHD through the workshops and events offered here.",
+ "rating": 4
+ },
+ {
+ "name": "Sarah Lee",
+ "review": "Everyone is so supportive and understanding. It's comforting to be part of such a nurturing community.",
+ "rating": 5
+ },
+ {
+ "name": "Michael Brown",
+ "review": "The practical tips and strategies shared by the community have been extremely helpful.",
+ "rating": 4
+ },
+ {
+ "name": "Lisa Marie",
+ "review": "I appreciate the sense of belonging and acceptance I've found in this community.",
+ "rating": 5
+ },
+ {
+ "name": "David Wilson",
+ "review": "It's refreshing to meet so many people who genuinely understand what it's like to live with ADHD.",
+ "rating": 4
+ }
+]
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e69de29bb..747c55fd5 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,27 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=STIX+Two+Text:wght@400;700&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --link-color: #191818;
+ --link-hover-color: #d1510a;
+}
+
+p {
+ @apply font-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ @apply font-sans;
+}
+
+.link {
+ @apply text-link-color hover:text-link-hover-color;
+}
diff --git a/frontend/src/mainPage/FindOutMorePage.jsx b/frontend/src/mainPage/FindOutMorePage.jsx
new file mode 100644
index 000000000..8b50bafb2
--- /dev/null
+++ b/frontend/src/mainPage/FindOutMorePage.jsx
@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Button } from "../common/Button";
+import Footer from "../common/Footer";
+import Menu from "../common/Menu";
+import { AuthForm } from "../components/Auth/AuthForm";
+import { useModal } from "../components/Auth/ModalContext";
+
+export const FindOutMorePage = () => {
+ const { isAuthenticated, showModal } = useModal();
+ const navigate = useNavigate();
+ const [currentFact, setCurrentFact] = useState(0);
+
+ const facts = [
+ "Many adults with ADHD were not diagnosed as children.",
+ "ADHD in adults can affect job performance, relationships, and daily functioning.",
+ "Adults with ADHD may experience symptoms such as restlessness, difficulty in maintaining focus, and impulsiveness.",
+ "Therapy and medication can be effective in managing ADHD symptoms in adults.",
+ "Joining a support group can provide valuable connections and coping strategies.",
+ ];
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setCurrentFact((prevFact) => (prevFact + 1) % facts.length);
+ }, 8000);
+ return () => clearInterval(interval);
+ }, [facts.length]);
+
+ const handleAuthSuccess = () => {
+ navigate("/profile");
+ };
+
+ const handleRoleSelection = (type) => {
+ showModal(
+
+ Next Event
+
+
+
+
+ Upcoming Events
+
+ {eventsData.slice(1).map((event, index) => (
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/mainPage/HomePage.jsx b/frontend/src/mainPage/HomePage.jsx
new file mode 100644
index 000000000..5e50860e6
--- /dev/null
+++ b/frontend/src/mainPage/HomePage.jsx
@@ -0,0 +1,95 @@
+import heroImage from "/images/hero-image.jpg";
+import { useNavigate } from "react-router-dom";
+import { Button } from "../common/Button";
+import Footer from "../common/Footer";
+import Menu from "../common/Menu";
+import { AuthForm } from "../components/Auth/AuthForm";
+import { useModal } from "../components/Auth/ModalContext";
+import Testimonials from "./Testimonials";
+
+export const HomePage = () => {
+ const { showModal, isAuthenticated } = useModal();
+ const navigate = useNavigate();
+
+ const handleGetStartedClick = () => {
+ showModal(
+
+
+ Did You Know?
+
+
+
+
+ + {facts[currentFact]} +
+
+
+ Roles in Our Community
+ +
+
+
+ {!isAuthenticated && (
+
+
+ + Help Someone +
++ As a listener, you provide support and understanding to those in + need. You offer a compassionate ear and empathetic response to + their challenges and experiences with ADHD. +
+
+
+ + Talk with Someone +
++ As a seeker, you have the opportunity to express your thoughts + and feelings about living with ADHD. You can share your + experiences, seek advice, or simply connect with others who + understand your journey. +
+
+
+ )}
+
+
+
+ 
+
+
+ {!isAuthenticated && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/mainPage/Testimonials.jsx b/frontend/src/mainPage/Testimonials.jsx
new file mode 100644
index 000000000..0fb4a6cba
--- /dev/null
+++ b/frontend/src/mainPage/Testimonials.jsx
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import testimonialsData from "../data/testimonials.json";
+
+const Testimonials = () => {
+ const [index, setIndex] = useState(0);
+
+ const nextTestimonial = () => {
+ setIndex((prevIndex) => (prevIndex + 1) % testimonialsData.length); // Loop back to the first
+ };
+
+ const prevTestimonial = () => {
+ setIndex(
+ (prevIndex) =>
+ (prevIndex - 1 + testimonialsData.length) % testimonialsData.length
+ ); // Loop to the last
+ };
+
+ return (
+
+
+
+
+ Welcome to the ADHD Connect
++ A safe space to share, connect, and find support +
+
+
+
+
+
+ Why Join us?
++ Connect with others who understand your journey +
+
+
+
+
+
+
+
+
+
+ + Don't just take our word for it... +
+
+
+ + Join Our Upcoming Events +
++ Discover events designed to help you connect, learn, and grow with + the ADHD community. +
+
+
+
+
+
+ );
+};
+
+export default Testimonials;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 000000000..7e56e05e4
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,72 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+ theme: {
+ extend: {
+ colors: {
+ primary: "#D1510A",
+ secondary: "#923A06",
+ accent: "#D8BFAF",
+ light: "#F3E8E2",
+ lighter: "#E0D1CB",
+ dark: "#191818",
+ 'link-color': 'var(--link-color)',
+ 'link-hover-color': 'var(--link-hover-color)',
+ },
+ fontFamily: {
+ sans: ["Noto Sans", "sans-serif"],
+ serif: ["STIX Two Text", "serif"],
+ },
+ animation: {
+ 'flip-scale-down-ver': 'flip-scale-down-ver 0.5s linear both',
+ },
+ keyframes: {
+ 'flip-scale-down-ver': {
+ '0%': { transform: 'scale(1) rotateY(0)' },
+ '50%': { transform: 'scale(0.4) rotateY(-90deg)' },
+ '100%': { transform: 'scale(1) rotateY(-180deg)' },
+ },
+ },
+ },
+ },
+ plugins: [
+ function ({ addComponents }) {
+ addComponents({
+ '.quotation': {
+ position: 'relative',
+ padding: '1rem',
+ '&:before, &:after': {
+ fontSize: '4rem',
+ color: 'gray',
+ position: 'absolute',
+ zIndex: 2,
+ },
+ '&:before': {
+ top: '-10px',
+ left: '-10px',
+ content: '"“"',
+ },
+ '&:after': {
+ bottom: '-10px',
+ right: '-10px',
+ content: '"”"',
+ }
+ },
+ '.note': {
+ position: 'relative',
+ backgroundColor: '#D8BFAF',
+ padding: '1rem',
+ margin: '1rem',
+ borderRadius: '0.25rem',
+ boxShadow: '4px 4px 10px rgba(0, 0, 0, 0.5)',
+ width: '250px',
+ height: '300px',
+ '&:hover': {
+ transform: 'scale(1.07)',
+ transition: 'transform 0.3s ease-in-out',
+ },
+ },
+ });
+ },
+ ],
+};
+
+
+
+ {Array.from({ length: testimonialsData[index].rating }, (_, i) => (
+
+ ))}
+
+ + "{testimonialsData[index].review}" +
++ - {testimonialsData[index].name} +
+
+
+
+
+