Feature/appointment

client/src/components/clientsDashboard/MyLessonsSection.tsx

@@ -1,6 +1,6 @@
 import LessonsTable from "../table/LessonsTable";
 import { Calendar } from "../calendar/Calendar";
-import { PageTitle } from "../page-title/PageTitle";
+import { PageTitle } from "../pageTitle/PageTitle";
 import { FindTeachersCard } from "./FindTeachersCard";
 
 export const MyLessonsSection = () => {

client/src/components/home-section/Features/FeatureCard.tsx → client/src/components/homeSection/Features/FeatureCard.tsx

@@ -1,5 +1,7 @@
+import React from "react";
+
 interface FeatureCardProps {
-  icon: string;
+  icon: React.ReactNode;
   title: string;
   description: string;
   className?: string;
@@ -14,7 +16,7 @@ export const FeatureCard = ({
   return (
     <div className={`card-glass-center group ${className || ""}`}>
       <div className="flex justify-center mb-6 text-purple-400 group-hover:text-purple-300 transition-colors">
-        <img src={icon} alt={title} className="w-auto h-auto" />
+        {icon}
       </div>
 
       <h3 className="text-2xl font-bold text-white mb-4">{title}</h3>

client/src/components/home-section/Features/Features.tsx → client/src/components/homeSection/Features/Features.tsx

@@ -1,24 +1,24 @@
 import { FeatureCard } from "./FeatureCard";
 import { Button } from "../../ui/button/Button";
-import icon1 from "../../../assets/icons/home-section1-icon.svg";
-import icon2 from "../../../assets/icons/home-section1-icon2.svg";
-import icon3 from "../../../assets/icons/home-section1-icon3.svg";
+import HomeSection1Icon from "../../icons/HomeSection1Icon";
+import HomeSection1Icon2 from "../../icons/HomeSection1Icon2";
+import HomeSection1Icon3 from "../../icons/HomeSection1Icon3";
 
 const features = [
   {
-    icon: icon1,
+    icon: <HomeSection1Icon />,
     title: "Trusted tutors",
     description:
       "All tutors are carefully selected and verified to ensure high teaching quality and a safe learning experience.",
   },
   {
-    icon: icon2,
+    icon: <HomeSection1Icon2 />,
     title: "Simple process",
     description:
       "Find a tutor, book a session, and start learning in just a few clicks – no complicated steps or confusion.",
   },
   {
-    icon: icon3,
+    icon: <HomeSection1Icon3 />,
     title: "Real results",
     description:
       "Students see progress faster thanks to focused sessions and tutors who know how to explain things clearly.",

client/src/components/home-section/Reviews/ReviewCardHome.tsx → client/src/components/homeSection/Reviews/ReviewCardHome.tsx

@@ -1,4 +1,4 @@
-import reviewsIcon from "../../../assets/icons/reviews.svg";
+import ReviewsIcon from "../../icons/Reviews";
 
 interface ReviewCardProps {
   avatar: string;
@@ -28,11 +28,7 @@ export const ReviewCardHome = ({
             <p className="text-white/60 text-sm truncate">{course}</p>
           </div>
 
-          <img
-            src={reviewsIcon}
-            alt=""
-            className="w-auto h-auto opacity-20 flex-shrink-0"
-          />
+          <ReviewsIcon className="w-auto h-auto opacity-20 flex-shrink-0" />
         </div>
 
         <p className="text-white/80 text-base leading-relaxed">{review}</p>

client/src/components/icons/Appointments.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+interface AppointmentsProps {
+  width?: number;
+  height?: number;
+  fill?: string;
+  className?: string;
+}
+
+const Appointments: React.FC<AppointmentsProps> = ({
+  width = 24,
+  height = 24,
+  fill = "#474747",
+  className = "",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_618_5306)">
+      <path
+        d="M20.1371 24C19.7672 23.999 19.4011 23.9247 19.0601 23.7814C18.719 23.638 18.4097 23.4285 18.1501 23.165L12.0001 17.051L5.85012 23.169C5.45515 23.5697 4.94861 23.8422 4.39654 23.9508C3.84447 24.0594 3.27247 23.9992 2.75512 23.778C2.23264 23.5678 1.78567 23.205 1.47258 22.7369C1.15949 22.2688 0.994841 21.7171 1.00012 21.154V5C1.00012 3.67392 1.52691 2.40215 2.46459 1.46447C3.40227 0.526784 4.67404 0.6.00012 0L18.0001 0C18.6567 0 19.3069 0.129329 19.9135 0.380602C20.5202 0.631876 21.0714 1.00017 21.5357 1.46447C22 1.92876 22.3683 2.47996 22.6195 3.08658C22.8708 3.69321 23.0001 4.34339 23.0001 5V21.154C23.0057 21.7167 22.8417 22.268 22.5293 22.7361C22.217 23.2041 21.7709 23.5672 21.2491 23.778C20.8969 23.9253 20.5189 24.0008 20.1371 24ZM6.00012 2C5.20447 2 4.44141 2.31607 3.8788 2.87868C3.31619 3.44129 3.00012 4.20435 3.00012 5V21.154C2.99976 21.3206 3.04879 21.4836 3.14102 21.6224C3.23325 21.7612 3.36455 21.8695 3.51831 21.9337C3.67208 21.9979 3.84143 22.0151 4.00496 21.9831C4.1685 21.9512 4.31888 21.8714 4.43712 21.754V21.754L11.3001 14.933C11.4875 14.7468 11.7409 14.6422 12.0051 14.6422C12.2693 14.6422 12.5228 14.7468 12.7101 14.933L19.5651 21.752C19.6834 21.8694 19.8338 21.9492 19.9973 21.9811C20.1608 22.0131 20.3302 21.9959 20.4839 21.9317C20.6377 21.8675 20.769 21.7592 20.8612 21.6204C20.9535 21.4816 21.0025 21.3186 21.0021 21.152V5C21.0021 4.20435 20.6861 3.44129 20.1234 2.87868C19.5608 2.31607 18.7978 2 18.0021 2H6.00012Z"
+        fill={fill}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_618_5306">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default Appointments;

client/src/components/icons/Cross.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+interface CrossProps {
+  width?: number;
+  height?: number;
+  fill?: string;
+  className?: string;
+}
+
+const Cross: React.FC<CrossProps> = ({
+  width = 24,
+  height = 24,
+  fill = "white",
+  className = "",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_228_2683)">
+      <path
+        d="M24 1.414L22.586 0L12 10.586L1.414 0L0 1.414L10.586 12L0 22.586L1.414 24L12 13.414L22.586 24L24 22.586L13.414 12L24 1.414Z"
+        fill={fill}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_228_2683">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default Cross;