Improve wording

package.json

@@ -15,19 +15,20 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
     "@web5/api": "^0.8.3",
+    "@web5/credentials": "^0.4.1",
+    "@zegocloud/zego-uikit-prebuilt": "1.3.16",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.0",
-    "@zegocloud/zego-uikit-prebuilt": "1.3.16",
     "date-fns": "^3.1.0",
     "lucide-react": "^0.305.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
     "swiper": "^11.0.5",
-    "uuid": "^9.0.1",
-    "tailwind-merge": "^2.2.0"
+    "tailwind-merge": "^2.2.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/components/AboutInfo.jsx

@@ -2,15 +2,18 @@ const AboutInfo = () => {
   const aboutCards = [
     {
       title: "Mission",
-      text: "Unite mentors and mentees for transformative connections.",
+      text:
+        "Unite individuals on a journey toward mental wellness for transformative connections.",
     },
     {
       title: "Vision",
-      text: "Foster growth through dynamic mentorship.",
+      text:
+        "Foster personal growth through empathetic therapeutic connections.",
     },
     {
       title: "Benefits",
-      text: "Elevate careers with personalized guidance and shared expertise.",
+      text:
+        "Enhance well-being through personalized support and shared therapeutic insights.",
     },
   ];
 

src/components/Experience.jsx

@@ -1,3 +1,7 @@
+import group from "/group.jpg";
+import guide from "/guide.jpg";
+import personal from "/personal.jpg";
+
 const Experience = () => {
   return (
     <div className="w-full mx-auto">
@@ -8,50 +12,50 @@ const Experience = () => {
         <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
           <div className="order-1 bg-light-gray p-8 md:p-14 lg:p-20 flex flex-col items-center justify-center space-y-5">
             <h3 className="text-[20px] md:text-[25px] lg:text-[28px]">
-              Career Guidance Excellence
+              Mental Wellness Support
             </h3>
             <p className="text-gray-400 text-[16px]">
-              Our experienced coaches provide personalized one-on-one coaching
-              to help you achieve your goals
+              Engage in one-on-one sessions with our experienced therapists who
+              offer personalized support to enhance your mental well-being.
             </p>
           </div>
           <div className="order-2 flex flex-col items-center justify-center">
             <img
               className="w-full h-full object-cover"
-              src="https://cdn.pixabay.com/photo/2018/02/12/11/45/personal-3148100_1280.jpg"
+              src={guide}
               alt="experience pic"
             />
           </div>
           <div className="order-3 md:order-4 lg:order-3 bg-light-gray p-8 md:p-14 lg:p-20 flex flex-col items-center justify-center space-y-5">
             <h3 className="text-[20px] md:text-[25px] lg:text-[28px]">
-              Career Mentorship via Video
+              Personalized Therapeutic Guidance via Video
             </h3>
             <p className="text-gray-400 text-[16px]">
-              Elevate your professional journey throughpersonalized mentorship,
-              connecting with experienced guides on video conferencing.
+              Elevate your mental health journey through personalized session,
+              connecting with experienced therapists on video conferencing.
             </p>
           </div>
           <div className="order-4 md:order-3 lg:order-4 flex flex-col items-center justify-center">
             <img
               className="w-full h-full object-cover"
-              src="https://cdn.pixabay.com/photo/2018/05/08/08/42/virtual-coworkers-3382503_1280.jpg"
+              src={personal}
               alt="experience pic"
             />
           </div>
           <div className="order-5 bg-light-gray p-8 md:p-14 lg:p-20 flex flex-col items-center justify-center space-y-5">
             <h3 className="text-[20px] md:text-[25px] lg:text-[28px]">
-              Group Mentoring Experience
+              Group Therapeutic Experience
             </h3>
             <p className="text-gray-400 text-[16px]">
-              Be part of a collaborative community of peers and engage in group
-              mentoring sessions to gain valuable insights and support for your
-              career growth
+              Join a supportive community of peers and participate in group
+              sessions focused on mental well-being, providing valuable insights
+              and mutual support on your journey to mental health.
             </p>
           </div>
           <div className="order-6 flex flex-col items-center justify-center">
             <img
               className="w-full h-full object-cover"
-              src="https://cdn.pixabay.com/photo/2020/04/05/14/05/corona-5006277_1280.jpg"
+              src={group}
               alt="experience pic"
             />
           </div>

src/components/Hero.jsx

@@ -1,4 +1,4 @@
-import hero from "../assets/hero.jpg";
+import hero from "/hero.jpg";
 import ConnectButton from "./common/ConnectButton";
 
 const Hero = () => {

src/components/HowItWorks.jsx

@@ -1,29 +1,37 @@
-import steps from '../assets/steps.svg'
+import steps from "../assets/steps.svg";
 
 const HowItWorks = () => {
   return (
-    <div className='mx-auto w-[75%] mt-[100px]'>
-        <h2 className='text-center font-semibold text-2xl md:text-3xl mb-3'>How it Works</h2>
-        <p className='text-center mb-10'>Step-by-step guide on how the platform works</p>
-        <div className='flex md:flex-col'>
-        <img className='hidden md:block md:rotate-0' src={steps} alt='Step by step bar'/>
-        <div className='flex flex-col gap-y-12 gap-x-12 mt-4 md:gap-y-0 md:flex-row'>
-            <div>
-            <h4 className='text-teal text-xl'>Connect</h4>
-            <p>Find a mentor in your desired profession</p>
-            </div>
-            <div>
-                <h4 className='text-teal text-xl'>Book a session</h4>
-                <p>Schedule a session with your chosen mentor</p>
-            </div>
-            <div>
-                <h4 className='text-teal text-xl'>Confirm and join</h4>
-                <p>Confirm the session details and join the video call</p>
-            </div>
-        </div>
+    <div className="mx-auto w-[75%] mt-[100px]">
+      <h2 className="text-center font-semibold text-2xl md:text-3xl mb-3">
+        How it Works
+      </h2>
+      <p className="text-center mb-10">
+        Step-by-step guide on how the platform works
+      </p>
+      <div className="flex md:flex-col">
+        <img
+          className="hidden md:block md:rotate-0"
+          src={steps}
+          alt="Step by step bar"
+        />
+        <div className="flex flex-col gap-y-12 gap-x-12 mt-4 md:gap-y-0 md:flex-row">
+          <div>
+            <h4 className="text-teal text-xl">Connect</h4>
+            <p>Find a therapist in your desired speciality</p>
+          </div>
+          <div>
+            <h4 className="text-teal text-xl">Book a session</h4>
+            <p>Schedule a session with your chosen therapist</p>
+          </div>
+          <div>
+            <h4 className="text-teal text-xl">Confirm and join</h4>
+            <p>Confirm the session details and join the video call</p>
+          </div>
         </div>
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default HowItWorks
+export default HowItWorks;

src/components/Navbar.jsx

@@ -6,7 +6,7 @@ import ConnectButton from "./common/ConnectButton";
 const navigation = [
   { name: "Home", href: "#", current: true },
   { name: "About Us", href: "#", current: false },
-  { name: "Mentor", href: "#", current: false },
+  { name: "Therapist", href: "#", current: false },
   { name: "Features", href: "#", current: false },
 ];
 

src/components/psychologist.jsx

@@ -3,60 +3,76 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { Autoplay, Navigation, Pagination } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/pagination";
-import { PsychologistData } from "./PsychologistData";
+import { useContext } from "react";
+import { AppContext } from "../context/ContextProvider";
 
 const Psychologist = () => {
+  const { psychologistList } = useContext(AppContext);
   return (
     <div className="mb-12">
       <h3 className="text-center font-semibold text-2xl md:text-3xl mb-12 mt-[110px]">
-        Our Psychologists
+        Our Therapist
       </h3>
-      <div>
-        <Swiper
-          slidesPerView={1}
-          spaceBetween={10}
-          autoplay={{
-            delay: 2500,
-            disableOnInteraction: false,
-          }}
-          pagination={false}
-          breakpoints={{
-            426: {
-              slidesPerView: 2,
-              spaceBetween: 20,
-            },
-            768: {
-              slidesPerView: 3,
-              spaceBetween: 40,
-            },
-            1280: {
-              slidesPerView: 4,
-              spaceBetween: 40,
-            },
-          }}
-          navigation={true}
-          modules={[Autoplay, Pagination, Navigation]}
-          className="mySwiper pb-[18px] w-full px-5 md:px-10 lg:px-20"
-        >
-          {PsychologistData.map((psy) => {
-            return (
-              <SwiperSlide
-                className="w-[219px] h-[250px] rounded-xl bg-[#F3F2FE] px-3 py-8 text-center font-light"
-                key={psy.id}
-              >
-                <div className="mb-5 w-[100px] h-[100px] mx-auto flex items-center justify-center overflow-hidden">
-                  <img className="w-full h-full object-cover" src={psy.image} alt={psy.name} />
-                </div>
-                <p className="text-teal font-semibold text-base text-center">
-                  {psy.name}
-                </p>
-                <p className="text-center text-base">{psy.profession}</p>
-                <p className="text-center text-base">{psy.company}</p>
-              </SwiperSlide>
-            );
-          })}
-        </Swiper>
-      </div>
+      {Object.keys(psychologistList).length === 0 ? (
+        <div className="text-center w-full p-10 bg-red-200 text-black">
+          Not Therapists, comme back later
+        </div>
+      ) : (
+        <div>
+          <Swiper
+            slidesPerView={1}
+            spaceBetween={10}
+            autoplay={{
+              delay: 2500,
+              disableOnInteraction: false,
+            }}
+            pagination={false}
+            breakpoints={{
+              426: {
+                slidesPerView: 2,
+                spaceBetween: 20,
+              },
+              768: {
+                slidesPerView: 3,
+                spaceBetween: 40,
+              },
+              1280: {
+                slidesPerView: 4,
+                spaceBetween: 40,
+              },
+            }}
+            navigation={true}
+            modules={[Autoplay, Pagination, Navigation]}
+            className="mySwiper pb-[18px] w-full px-5 md:px-10 lg:px-20"
+          >
+            {psychologistList.map((psy) => {
+              return (
+                <SwiperSlide
+                  className="w-[219px] h-[250px] rounded-xl bg-[#F3F2FE] px-3 py-8 text-center font-light"
+                  key={psy.id}
+                >
+                  <div className="mb-5 w-[100px] h-[100px] mx-auto flex items-center justify-center overflow-hidden rounded-full">
+                    <img
+                      className="w-full h-full object-cover"
+                      src={psy.profile}
+                      alt={psy.name}
+                    />
+                  </div>
+                  <p className="text-teal font-semibold text-base text-center">
+                    {psy.name}
+                  </p>
+                  <p className="text-center text-base text-shade">
+                    {psy.specialization} Psy
+                  </p>
+                  <p className="text-center text-base">
+                    {psy.experience} year{psy.experience > 1 && "s"} experience
+                  </p>
+                </SwiperSlide>
+              );
+            })}
+          </Swiper>
+        </div>
+      )}
     </div>
   );
 };