${subject}

- Verify Your Email Address -

- Hi, -

- Thank you for signing up with Shifter — your digital hub for - business growth and professional development. - To complete your registration, please verify your email address by clicking the button below. -

- This link will expire in 60 minutes. If the button above doesn't work, copy and paste the link below into your browser: -

- If you didn’t create an account, please ignore this email. -

- {/*COURSE CONTENT*/} - { - course.courseContents.length > 0 && course.courseContents.map((content, index) => { - return ( -

- {/*CONTENT HEADER*/} -

Module {index + 1}

- - {/*Header Buttons*/} -

- {index > 0 && ( - - )} - {index < course.courseContents.length - 1 && ( - - )} - -

- - setCourse({ - ...course, - courseContents: course.courseContents.map((item, i) => i === index ? { - ...item, - title: e.target.value - } : item) - })} - type={"text"} - width={"full"} - /> - - {/*LECTURES*/} -

- { - content.courseLectures.length > 0 && content.courseLectures.map((_, lectureIndex) => ( -

- { - lectureIndex === content.courseLectures.length - 1 ? ( -

- ) : ( -

- ) - } -

- )) - } -

- { - content.courseLectures.length > 0 && content.courseLectures.map((lecture, lectureIndex) => { - return ( -

- {/*LECTURE HEADER*/} -

Lecture {lectureIndex + 1}

- - {/*Header Buttons*/} -

- {lectureIndex > 0 && ( - - )} - {lectureIndex < content.courseLectures.length - 1 && ( - - )} - -

- -

- setCourse({ - ...course, - courseContents: course.courseContents.map((item, i) => { - if (i === index) { - const updatedLectures = item.courseLectures.map((l, li) => li === lectureIndex ? { - ...l, - title: e.target.value - } : l); - return {...item, courseLectures: updatedLectures}; - } - return item; - }) - })} - type={"text"} - width={"full"} - /> - setCourse({ - ...course, - courseContents: course.courseContents.map((item, i) => { - if (i === index) { - const updatedLectures = item.courseLectures.map((l, li) => li === lectureIndex ? { - ...l, - durationMinutes: Number(e.target.value) - } : l); - return {...item, courseLectures: updatedLectures}; - } - return item; - }) - })} - type={"number"} - width={"fit"} - /> - setCourse({ - ...course, - courseContents: course.courseContents.map((item, i) => { - if (i === index) { - const updatedLectures = item.courseLectures.map((l, li) => li === lectureIndex ? { - ...l, - contentType: e.target.value as ContentType - } : l); - return {...item, courseLectures: updatedLectures}; - } - return item; - }) - })} - options={[ - {value: "TEXT", name: "Text"}, - {value: "FILE", name: "File"}, - {value: "VIDEO", name: "Video"}, - {value: "QUIZ", name: "Quiz"}, - {value: "TOOL", name: "Tool"} - ]} - /> -

- setCourse({ - ...course, - courseContents: course.courseContents.map((item, i) => { - if (i === index) { - const updatedLectures = item.courseLectures.map((l, li) => li === lectureIndex ? { - ...l, - description: e.target.value - } : l); - return {...item, courseLectures: updatedLectures}; - } - return item; - }) - })}/> - setCourse({ - ...course, - courseContents: course.courseContents.map((item, i) => { - if (i === index) { - const updatedLectures = item.courseLectures.map((l, li) => li === lectureIndex ? { - ...l, - contentText: e.target.value - } : l); - return {...item, courseLectures: updatedLectures}; - } - return item; - }) - })}/> - { - lecture.contentType !== "TEXT" && ( - { - const file = e.target.files && e.target.files[0]; - if (!file) return; - - setCourseLectureFiles([ - ...courseLectureFiles.filter(item => item.lecturePosition !== lecture.position || item.contentPosition !== content.position), - { - file, - type: lecture.contentType, - contentPosition: content.position, - lecturePosition: lecture.position - } - ]); - }} - type={"file"} - width={"full"} - /> - ) - } -

- ) - }) - } -

- - - - { - index !== course.courseContents.length - 1 && ( -

- ) - } -

- ) - }) - } - - -

- ); -} - -export default AdminAddCourseContents; Index: ontend/src/admin/components/AdminAddCourseInfo.tsx =================================================================== --- frontend/src/admin/components/AdminAddCourseInfo.tsx (revision 171bfdbb54bf6f8fcb8525406335d07912601114) +++ (revision ) @@ -1,199 +1,0 @@ -import AdminAddCourseInput from "./AdminAddCourseInput.tsx"; -import type {Difficulty} from "../../models/types/Difficulty.tsx"; -import AdminAddCourseInputWithPills from "./AdminAddCourseInputWithPills.tsx"; -import AdminAddCourseInputTextArea from "./AdminAddCourseInputTextArea.tsx"; -import type {CourseEntity} from "../types/CourseEntity.tsx"; -import AdminAddCourseInputSelect from "./AdminAddCourseInputSelect.tsx"; -import type {JSX} from "react"; - -function AdminAddCourseInfo({course, setCourse, courseCard, setCourseImage}: { - course: CourseEntity; - setCourse: (course: CourseEntity) => void; - courseCard: JSX.Element; - setCourseImage: (image: File | null) => void; -}) { - - return ( -

- {/*Course Card*/} -

- {courseCard} -

- - {/*Course Info*/} -

- - { - // const file = e.target.files?.[0]; - // if (!file) return; - const file = e.target.files ? e.target.files[0] : null; - setCourseImage(file); - }} - type={"file"} - width={"full"} - /> - - setCourse({ - ...course, - titleShort: e.target.value - })} - type={"text"} - width={"full"} - /> - - setCourse({ - ...course, - title: e.target.value - })} - type={"text"} - width={"full"} - /> - - setCourse({ - ...course, - topicsCovered: course.topicsCovered.includes(option) ? course.topicsCovered : [...course.topicsCovered, option] - })} - removePill={index => setCourse({ - ...course, - topicsCovered: course.topicsCovered.filter((_, i) => i !== index) - })} - width={"full"} - /> - -

- setCourse({ - ...course, - durationMinutes: Number(e.target.value) - })} - type={"number"} - width={"fit"} - /> - setCourse({ - ...course, - price: Number(e.target.value) - })} - type={"number"} - width={"fit"} - /> - setCourse({ - ...course, - difficulty: e.target.value as Difficulty - })} - options={[ - {value: "BEGINNER", name: "Beginner"}, - {value: "INTERMEDIATE", name: "Intermediate"}, - {value: "ADVANCED", name: "Advanced"}, - {value: "EXPERT", name: "Expert"} - ]} - /> -

- -

- setCourse({ - ...course, - color: e.target.value - })} - type={"text"} - width={"fit"} - /> -

- - setCourse({ - ...course, - skillsGained: course.skillsGained.includes(option) ? course.skillsGained : [...course.skillsGained, option] - })} - removePill={index => setCourse({ - ...course, - skillsGained: course.skillsGained.filter((_, i) => i !== index) - })} - width={"full"} - /> -

- -

- setCourse({ - ...course, - whatWillBeLearned: course.whatWillBeLearned.includes(option) ? course.whatWillBeLearned : [...course.whatWillBeLearned, option] - })} - removePill={index => setCourse({ - ...course, - whatWillBeLearned: course.whatWillBeLearned.filter((_, i) => i !== index) - })} - width={"full"} - /> - setCourse({ - ...course, - descriptionShort: e.target.value - })} - /> - setCourse({ - ...course, - description: e.target.value - })} - /> - setCourse({ - ...course, - descriptionLong: e.target.value - })} - /> -

- ) -} - -export default AdminAddCourseInfo; Index: ontend/src/admin/components/AdminAddCourseInput.tsx =================================================================== --- frontend/src/admin/components/AdminAddCourseInput.tsx (revision 171bfdbb54bf6f8fcb8525406335d07912601114) +++ (revision ) @@ -1,32 +1,0 @@ -import React from "react"; - -function Input({label, name, value, type, onChange, width}: { - label: string; - name?: string; - value?: string | number; - type: "text" | "number" | "file"; - onChange?: (e: React.ChangeEvent) => void; - width: "fit" | "full" -}) { - return ( -

- {label} - -

- ) -} - -export default Input; Index: ontend/src/admin/components/AdminAddCourseInputSelect.tsx =================================================================== --- frontend/src/admin/components/AdminAddCourseInputSelect.tsx (revision 171bfdbb54bf6f8fcb8525406335d07912601114) +++ (revision ) @@ -1,29 +1,0 @@ -import React from "react"; - -function AdminAddCourseInputSelect({label, value, options, onChange}: { - label: string; - value?: string | number; - options: {value: string, name: string}[]; - onChange?: (e: React.ChangeEvent) => void; -}) { - return ( -

- {label} - -

- ) -} - -export default AdminAddCourseInputSelect; Index: ontend/src/admin/components/AdminAddCourseInputTextArea.tsx =================================================================== --- frontend/src/admin/components/AdminAddCourseInputTextArea.tsx (revision 171bfdbb54bf6f8fcb8525406335d07912601114) +++ (revision ) @@ -1,28 +1,0 @@ -import React from "react"; - -function InputTextArea({label, name, value, placeholder, rows, onChange}: { - label: string; - name: string; - value: string; - placeholder: string; - rows: number; - onChange: (e: React.ChangeEvent) => void; -}) { - return ( -

- {label} -

-        </div>
-    )
-}
-
-export default InputTextArea;
Index: ontend/src/admin/components/AdminAddCourseInputWithPills.tsx
===================================================================
--- frontend/src/admin/components/AdminAddCourseInputWithPills.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,58 +1,0 @@
-import {X} from "lucide-react";
-import AdminAddCourseInput from "./AdminAddCourseInput.tsx";
-
-function InputWithPills({label, name, options, addPill, removePill, width}: {
-    name: string;
-    label: string;
-    options: string[];
-    addPill: (option: string) => void;
-    removePill: (index: number) => void;
-    width: "full" | "fit";
-}) {
-    return (
-        <div className="flex flex-col gap-4 ">
-            <form
-                onSubmit={e => {
-                    e.preventDefault()
-                    const form = e.target as HTMLFormElement;
-                    const input = form.elements.namedItem(name) as HTMLInputElement;
-                    const option = input.value.trim();
-                    addPill(option)
-                    form.reset()
-                }}
-                className="flex gap-8 items-end w-full">
-                <AdminAddCourseInput
-                    type={"text"}
-                    label={label}
-                    name={name}
-                    width={width}
-                />
-                <button
-                    type="submit"
-                    className="hover:shadow-lg shadow-md shadow-shifter/40 transition-all ease-out duration-300
-                                border-2 border-white/40 px-12 py-2 bg-shifter rounded-sm text-white text-lg w-fit cursor-pointer "
-                >
-                    Add
-                </button>
-            </form>
-
-            <div className="flex flex-wrap gap-2 items-center justify-start">
-                {
-                    options.length > 0 && options.map((option, index) => (
-                        <button
-                            onClick={() => removePill(index)}
-                            className="hover:opacity-60 transition-all ease-out duration-300 cursor-pointer
-                                        flex items-center gap-2 px-4 py-2 rounded-md bg-black/40 text-white shadow-sm"
-                            key={index}
-                        >
-                            <span>{option}</span>
-                            <X size={20}/>
-                        </button>
-                    ))
-                }
-            </div>
-        </div>
-    )
-}
-
-export default InputWithPills;
Index: ontend/src/admin/pages/AdminAddCourse.tsx
===================================================================
--- frontend/src/admin/pages/AdminAddCourse.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,146 +1,0 @@
-import {useState} from "react";
-import type {CourseEntity} from "../types/CourseEntity.tsx";
-import CourseCard from "../../components/CourseCard.tsx";
-import {createCourseApi, uploadCourseFilesApi} from "../api/addCourse.ts";
-import {useAuthContext} from "../../context/AuthContext.tsx";
-import type {ContentType} from "../../models/types/ContentType.tsx";
-import AdminAddCourseInfo from "../components/AdminAddCourseInfo.tsx";
-import AdminAddCourseContent from "../components/AdminAddCourseContent.tsx";
-import {useNavigate} from "react-router-dom";
-
-function AdminAddCourse() {
-    const [course, setCourse] = useState<CourseEntity>({
-        imageUrl: "",
-        color: "#000000",
-        titleShort: "",
-        title: "",
-        difficulty: "BEGINNER",
-        durationMinutes: 0,
-        price: 0,
-        descriptionShort: "",
-        description: "",
-        descriptionLong: "",
-        whatWillBeLearned: [],
-        skillsGained: [],
-        topicsCovered: [],
-        courseContents: []
-    })
-    const [courseImage, setCourseImage] = useState<File | null>(null);
-    const [courseLectureFiles, setCourseLectureFiles] = useState<{file: File, type: ContentType, contentPosition: number, lecturePosition: number}[]>([]);
-    const [error, setError] = useState<string | null>(null);
-    const [loading, setLoading] = useState<boolean>(false);
-    const {accessToken} = useAuthContext();
-    const navigate = useNavigate();
-
-    const courseCard = (
-        <CourseCard card={{
-            id: 0, // temporary since new javaObjects has no ID yet
-            imageUrl: courseImage ? URL.createObjectURL(courseImage) : "",
-            color: course.color,
-            titleShort: course.titleShort,
-            title: course.title,
-            difficulty: course.difficulty,
-            durationMinutes: course.durationMinutes,
-            price: course.price,
-            rating: 0,
-            ratingCount: 0,
-            skillsGained: course.skillsGained,
-            topicsCovered: course.topicsCovered,
-            courseContentCount: course.courseContents.length
-        }}/>
-    )
-
-    const handleAddCourse = async () => {
-        const countFileOrVideoLectures = course.courseContents
-            .flatMap(content => content.courseLectures)
-            .filter(lecture => lecture.contentType === "FILE" || lecture.contentType === "VIDEO" || lecture.contentType === "QUIZ" || lecture.contentType === "TOOL")
-            .length;
-
-        if (!courseImage) {
-            setError("Please upload a course image");
-            return;
-        }
-        if (!course.titleShort || !course.title || !course.difficulty ||
-            !course.descriptionShort || !course.description || !course.descriptionLong ||
-            course.whatWillBeLearned.length === 0 || course.skillsGained.length === 0 || course.topicsCovered.length === 0) {
-            setError("Please fill in all course details");
-            return;
-        }
-        if (
-            course.courseContents.length === 0 || course.courseContents.some(content => content.title.length === 0) ||
-            course.courseContents.some(content => content.courseLectures.length === 0) || courseLectureFiles.length < countFileOrVideoLectures
-        ) {
-            setError("Please add at least one content with lectures and upload files for all file/video/quiz/tool lectures");
-            return;
-        }
-
-        const formData = new FormData();
-        formData.append("courseImage", courseImage);
-        courseLectureFiles.forEach(courseLectureFile => {
-            formData.append("files", courseLectureFile.file);
-            formData.append("types", courseLectureFile.type);
-            formData.append("meta", JSON.stringify({
-                contentPosition: courseLectureFile.contentPosition,
-                lecturePosition: courseLectureFile.lecturePosition
-            }));
-        });
-
-        console.log(JSON.stringify(course).length);
-        setLoading(true);
-        setError(null);
-
-        try {
-            const courseId = await createCourseApi(JSON.stringify(course), accessToken || "");
-            if (!courseId) {
-                throw new Error("Failed to create javaObjects.");
-            }
-
-            try {
-                await uploadCourseFilesApi(courseId, formData, accessToken || "");
-                navigate('/')
-            } catch (err) {
-                console.error("Error uploading javaObjects image and lecture files:", err);
-                setError("An error occurred while uploading javaObjects image and lecture files. Please try again or contact support.");
-            }
-        } catch (err) {
-            console.error("Error creating javaObjects:", err);
-            setError("An error occurred while creating the javaObjects. Please try again or contact support.");
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <main className="flex flex-col gap-12 px-horizontal-md py-vertical-md">
-            <AdminAddCourseInfo
-                course={course}
-                setCourse={setCourse}
-                courseCard={courseCard}
-                setCourseImage={setCourseImage}
-            />
-            <AdminAddCourseContent
-                course={course}
-                setCourse={setCourse}
-                courseLectureFiles={courseLectureFiles}
-                setCourseLectureFiles={setCourseLectureFiles}
-            />
-            {
-                error &&
-                <p className="text-lg text-red-500 text-center">
-                    {error}
-                </p>
-            }
-            <button
-                onClick={handleAddCourse}
-                disabled={loading}
-                className={`hover:shadow-lg transition-all duration-400 ease-in-out
-                w-full py-2 border-2 border-white/40 bg-shifter rounded-sm text-white font-medium text-2xl shadow-md shadow-shifter/40 
-                disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer`}
-            >
-                {loading ? "Creating..." : "Create Course"}
-            </button>
-        </main>
-    )
-}
-
-export default AdminAddCourse;
Index: ontend/src/admin/types/CourseContentEntity.tsx
===================================================================
--- frontend/src/admin/types/CourseContentEntity.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,7 +1,0 @@
-import type {CourseLectureEntity} from "./CourseLectureEntity.tsx";
-
-export interface CourseContentEntity {
-    title: string;
-    position: number;
-    courseLectures: CourseLectureEntity[];
-}
Index: ontend/src/admin/types/CourseEntity.tsx
===================================================================
--- frontend/src/admin/types/CourseEntity.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,19 +1,0 @@
-import type {Difficulty} from "../../models/types/Difficulty.tsx";
-import type {CourseContentEntity} from "./CourseContentEntity.tsx";
-
-export interface CourseEntity {
-    imageUrl: string;
-    color: string;
-    titleShort: string;
-    title: string;
-    difficulty: Difficulty;
-    durationMinutes: number;
-    price: number;
-    descriptionShort: string;
-    description: string;
-    descriptionLong: string;
-    whatWillBeLearned: string[];
-    skillsGained: string[];
-    topicsCovered: string[];
-    courseContents: CourseContentEntity[];
-}
Index: ontend/src/admin/types/CourseLectureEntity.tsx
===================================================================
--- frontend/src/admin/types/CourseLectureEntity.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,11 +1,0 @@
-import type {ContentType} from "../../models/types/ContentType.tsx";
-
-export interface CourseLectureEntity {
-    title: string;
-    description: string;
-    durationMinutes: number;
-    position: number;
-    contentText: string;
-    contentFileName: string;
-    contentType: ContentType;
-}
Index: ontend/src/admin/types/UploadedFileResponse.ts
===================================================================
--- frontend/src/admin/types/UploadedFileResponse.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,5 +1,0 @@
-export interface UploadedFileResponse {
-    type: string;
-    url: string;
-    meta: Record<string, never>;
-}
Index: ontend/src/admin/utils/AdminNavbar.tsx
===================================================================
--- frontend/src/admin/utils/AdminNavbar.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,42 +1,0 @@
-import {Link} from "react-router-dom";
-import logo from "../../../public/Shifter-S2W-Transparent.png"
-import NavbarLink from "../../components/NavbarLink.tsx";
-import {useAuthContext} from "../../context/AuthContext.tsx";
-
-function AdminNavbar() {
-    const {logout} = useAuthContext();
-
-    return (
-        <nav className="flex items-center justify-between px-horizontal-sm py-2 z-10 shadow-md shadow-black/10">
-            <Link to="/">
-                <img
-                    src={logo} alt="Shifter Logo"
-                    className="h-16 w-auto"
-                />
-            </Link>
-
-            <div className="flex items-center gap-20">
-                <ul className="flex gap-8 items-center text-lg font-medium">
-                    <li><NavbarLink
-                        to="/add-course"
-                        label="Add Course"
-                    /></li>
-                    <li><NavbarLink
-                        to="/analytics"
-                        label="Analytics"
-                    /></li>
-                </ul>
-
-                <button
-                    onClick={logout}
-                    className="hover:bg-[#F00]/60 px-8 py-2 rounded-sm hover:text-white transition-all duration-300 ease-in-out
-                    text-[#F00] text-lg font-medium cursor-pointer"
-                >
-                    Log Out
-                </button>
-            </div>
-        </nav>
-    )
-}
-
-export default AdminNavbar;
Index: ontend/src/api/OAuth2RedirectHandler.tsx
===================================================================
--- frontend/src/api/OAuth2RedirectHandler.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,36 +1,0 @@
-import { useEffect } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
-import { useAuthContext } from "../context/AuthContext.tsx";
-import {oAuthLoginApi} from "./authApi.ts";
-
-export default function OAuth2RedirectHandler() {
-    const navigate = useNavigate();
-    const { setAccessToken, setUser, setAuthChecked } = useAuthContext();
-    const location = useLocation();
-
-    useEffect(() => {
-        const params = new URLSearchParams(location.search);
-        const token = params.get("token");
-        const login = params.get("login") === "true";
-
-        if (token) {
-            if (login) {
-                oAuthLoginApi(token)
-                    .then(data => {
-                        setAuthChecked(true);
-                        setUser(data.user);
-                        setAccessToken(data.accessToken);
-                        navigate("/", { replace: true }); // Using replace to avoid adding to history
-                    })
-                    .catch(err => console.log("Cannot fetch user: ", err));
-            } else {
-                navigate(`/welcome?token=${token}`, { replace: true });
-            }
-        } else {
-            console.error("OAuth2 login failed: No token received.");
-            navigate("/login?error", { replace: true });
-        }
-    }, [navigate, setAccessToken]);
-
-    return <div className="h-screen"></div>;
-}
Index: ontend/src/api/authApi.ts
===================================================================
--- frontend/src/api/authApi.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,79 +1,0 @@
-import axios from "axios";
-import type {UserPersonalization} from "../models/javaObjects/UserPersonalization.tsx";
-import type {User} from "../models/javaObjects/User.tsx";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-export const refreshAccessTokenApi = async (): Promise<{ user: User, accessToken: string }> => {
-    const res = await axios.post(`${backendUrl}/api/auth/refresh`,
-        {},
-        {withCredentials: true}
-    );
-
-    return res.data;
-}
-
-export const registerApi = async (email: string, password: string): Promise<void> => {
-    await axios.post(`${backendUrl}/api/auth/register`,
-        {email, password},
-        {withCredentials: true}
-    );
-}
-
-export const verifyApi = async (token: string): Promise<string> => {
-    const res = await axios.post(`${backendUrl}/api/auth/verify`,
-        {token},
-        {withCredentials: true}
-    );
-
-    return res.data;
-}
-
-export const personalizeApi = async (user: UserPersonalization): Promise<{ user: User, accessToken: string }> => {
-    const res = await axios.post(`${backendUrl}/api/auth/personalize`,
-        user,
-        {withCredentials: true}
-    );
-
-    return res.data;
-}
-
-export const oAuthLoginApi = async (accessToken: string): Promise<{ user: User, accessToken: string }> => {
-    const res = await axios.get(`${backendUrl}/api/auth/oauth/finalize`, {
-            withCredentials: true,
-            headers: {
-                Authorization: `Bearer ${accessToken}`
-            },
-        }
-    );
-
-    return res.data;
-}
-
-export const loginApi = async (email: string, password: string): Promise<{ user: User, accessToken: string }> => {
-    const res = await axios.post(`${backendUrl}/api/auth/authenticate`,
-        {email, password},
-        {withCredentials: true}
-    );
-
-    return res.data;
-}
-
-export const logoutApi = async (): Promise<void> => {
-    await axios.post(`${backendUrl}/api/auth/logout`,
-        {},
-        {withCredentials: true}
-    );
-}
-
-export const checkEmailExistsApi = async (email: string): Promise<boolean> => {
-    const res = await axios.get(`${backendUrl}/api/auth/check-email`, {
-        params: {
-            email: email,
-        },
-    });
-
-    return res.data;
-}
Index: ontend/src/api/axiosInstance.tsx
===================================================================
--- frontend/src/api/axiosInstance.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,67 +1,0 @@
-import axios, { AxiosError, type InternalAxiosRequestConfig } from "axios";
-
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-const createAxiosInstance = (getAccessToken: () => string | null) => {
-    const axiosInstance = axios.create({
-        baseURL: backendUrl,
-        withCredentials: true,
-    });
-
-    // Attach access token dynamically before each request
-    axiosInstance.interceptors.request.use(
-        (config: InternalAxiosRequestConfig) => {
-            const token = getAccessToken();
-            if (token) {
-                config.headers = config.headers || {};
-                config.headers.Authorization = `Bearer ${token}`;
-            }
-            return config;
-        },
-        (error: AxiosError) => {
-            return Promise.reject(error);
-        }
-    );
-
-    // Response interceptor: handle 401 by refreshing token
-    axiosInstance.interceptors.response.use(
-        (response) => response,
-        async (error: AxiosError) => {
-            const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
-
-            if (
-                error.response?.status === 401 &&
-                !originalRequest._retry
-            ) {
-                originalRequest._retry = true;
-
-                try {
-                    // Call refresh endpoint; no token needed in body, cookie sent automatically
-                    const res = await axiosInstance.post("/api/auth/refresh");
-
-                    // The new access token is in res.data.accessToken
-                    const newAccessToken = res.data.accessToken;
-
-                    // Optionally you can call a function here to update your React global state
-                    // But since this is outside React, you may want to pass an "onTokenRefresh" callback
-                    // For example: onTokenRefresh(newAccessToken);
-
-                    // Update header and retry original request
-                    originalRequest.headers = originalRequest.headers || {};
-                    originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
-
-                    return axiosInstance(originalRequest);
-                } catch (refreshError) {
-                    console.error("Token refresh failed:", refreshError);
-                    // Optional: trigger logout or token cleanup via a callback
-                }
-            }
-
-            return Promise.reject(error);
-        }
-    );
-
-    return axiosInstance;
-};
-
-export default createAxiosInstance;
Index: ontend/src/api/contactApi.ts
===================================================================
--- frontend/src/api/contactApi.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,17 +1,0 @@
-import axios from "axios";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-export const sendEmailApi = async (accessToken: string, subject: string, text: string) => {
-    await axios.post(
-        `${backendUrl}/api/emails/contact-us`,
-        {subject, text},
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`
-            }
-        }
-    );
-}
Index: ontend/src/api/courseApi.ts
===================================================================
--- frontend/src/api/courseApi.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,102 +1,0 @@
-import axios, {type AxiosResponse} from "axios";
-import type {CoursePreview} from "../models/javaObjects/CoursePreview.tsx";
-import type {CourseDetail} from "../models/javaObjects/CourseDetail.tsx";
-import type {CourseFull} from "../models/javaObjects/CourseFull.tsx";
-import type {CoursePreviewEnrolled} from "../models/javaObjects/CoursePreviewEnrolled.tsx";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-// export const fetchCoursesApi = async (accessToken?: string, params?: FilterParams, signal?: AbortSignal): Promise<CoursePreview[]> => {
-//     const res = await axios.get(
-//         `${backendUrl}/api/courses`,
-//         {
-//             params,
-//             paramsSerializer: params => qs.stringify(params, {arrayFormat: 'repeat'}),
-//             signal,
-//             headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined
-//
-//         }
-//     )
-//
-//     return res.data;
-// }
-export const fetchCoursesApi = async (accessToken?: string, signal?: AbortSignal): Promise<CoursePreview[]> => {
-    const res = await axios.get(
-        `${backendUrl}/api/courses`,
-        {
-            signal,
-            headers: accessToken ? {Authorization: `Bearer ${accessToken}`} : undefined
-
-        }
-    )
-
-    return res.data;
-}
-
-export const fetchRecommendedCoursesApi = async (accessToken: string): Promise<CoursePreview[]> => {
-    const res = await axios.get(`${backendUrl}/api/courses/recommended`, {
-        headers: {
-            Authorization: `Bearer ${accessToken}`
-        }
-    });
-
-    return res.data;
-}
-
-export const fetchEnrolledCoursesApi = async (accessToken: string): Promise<CoursePreviewEnrolled[]> => {
-    const res = await axios.get(`${backendUrl}/api/courses/enrolled`, {
-        headers: {
-            Authorization: `Bearer ${accessToken}`
-        }
-    });
-
-    return res.data;
-}
-
-export const fetchCourseDetailsApi = async (courseId: number, signal?: AbortSignal): Promise<CourseDetail> => {
-    const res = await axios.get(
-        `${backendUrl}/api/courses/${courseId}`,
-        {signal}
-    );
-
-    return res.data;
-}
-
-export const fetchCourseFullApi = async (courseId: number, accessToken: string): Promise<CourseFull> => {
-    const res = await axios.get(
-        `${backendUrl}/api/courses/${courseId}/enrolled`, {
-            headers: {
-                Authorization: `Bearer ${accessToken}`
-            }
-        });
-
-    return res.data;
-}
-
-export const fetchCoursesTopicsApi = async (): Promise<string[]> => {
-    const res = await axios.get(`${backendUrl}/api/courses/topics`);
-    return res.data;
-}
-
-export const fetchCoursesSkillsApi = async (): Promise<string[]> => {
-    const res = await axios.get(`${backendUrl}/api/courses/skills`);
-    return res.data;
-}
-
-type CertificateResponse = AxiosResponse<Blob>
-
-export const fetchCourseCertificateApi = async (courseId: number, accessToken: string): Promise<CertificateResponse> => {
-    const res = await axios.get(
-        `${backendUrl}/api/courses/${courseId}/certificate`, {
-            headers: {
-                Authorization: `Bearer ${accessToken}`
-            },
-            responseType: 'blob'
-        }
-    );
-    return res;
-}
-
-
Index: ontend/src/api/enrollmentApi.ts
===================================================================
--- frontend/src/api/enrollmentApi.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,33 +1,0 @@
-import axios from "axios";
-import type {Enrollment} from "../models/javaObjects/Enrollment.tsx";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-export const enrollUserApi = async (courseId: number, accessToken: string): Promise<Enrollment> => {
-    const res = await axios.post(
-        `${backendUrl}/api/enrollments/create/${courseId}`,
-        {},
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`,
-            }
-        }
-    )
-
-    return res.data;
-}
-
-export const fetchUserEnrollmentsApi = async (accessToken: string): Promise<Enrollment[]> => {
-    const res = await axios.get(
-        `${backendUrl}/api/enrollments/user`,
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`,
-            }
-        }
-    )
-
-    return res.data;
-}
Index: ontend/src/api/meetingApi.ts
===================================================================
--- frontend/src/api/meetingApi.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,33 +1,0 @@
-import axios from "axios";
-import type {UserMeetingInfoRequest} from "../models/UserMeetingInfoRequest.tsx";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-export const fetchExpertFreeTimeSlotsApi = async (accessToken: string): Promise<Record<string, string[]>> => {
-    const userTimeZone = encodeURIComponent(Intl.DateTimeFormat().resolvedOptions().timeZone);
-    const res = await axios.get(
-        `${backendUrl}/api/meetings/free-time-slots?userTimeZone=${userTimeZone}`,
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`
-            }
-        }
-    );
-
-    return res.data;
-}
-
-export const scheduleMeetingApi = async (accessToken: string, startTime: string, date: string, userMeetingInfoRequest: UserMeetingInfoRequest): Promise<void> => {
-    const userTimeZone = encodeURIComponent(Intl.DateTimeFormat().resolvedOptions().timeZone);
-    await axios.post(
-        `${backendUrl}/api/meetings/schedule-free-consultation?startTime=${startTime}&date=${date}&userTimeZone=${userTimeZone}`,
-        userMeetingInfoRequest,
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`
-            }
-        }
-    );
-}
Index: ontend/src/api/reviewApi.ts
===================================================================
--- frontend/src/api/reviewApi.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,65 +1,0 @@
-import axios from "axios";
-import type {Review} from "../models/Review.tsx";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-export const writeReviewApi = async (
-    accessToken: string,
-    courseId: number,
-    rating: number,
-    comment: string,
-): Promise<void> => {
-
-    await axios.post(
-        `${backendUrl}/api/review/${courseId}`,
-        {
-            rating,
-            comment
-        },
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`
-            }
-        }
-    );
-}
-
-export const updateReviewApi = async (
-    accessToken: string,
-    courseId: number,
-    rating: number,
-    comment: string,
-): Promise<void> => {
-
-    await axios.put(
-        `${backendUrl}/api/review/${courseId}`,
-        {
-            rating,
-            comment
-        },
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`
-            }
-        }
-    );
-}
-
-export const getReviewApi = async (
-    accessToken: string,
-    courseId: number,
-): Promise<Review> => {
-
-    const  res = await axios.get(
-        `${backendUrl}/api/review/course/${courseId}`,
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`
-            }
-        }
-    );
-
-    return res.data;
-}
Index: ontend/src/api/s3Api.ts
===================================================================
--- frontend/src/api/s3Api.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,17 +1,0 @@
-import axios from "axios";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-export const fetchPresignedUrlApi = async (accessToken: string, courseId: number, lectureId: number, fileName: string, expirySeconds: number): Promise<string> => {
-    const res = await axios.get(
-        `${backendUrl}/api/s3/presigned-url?courseId=${courseId}&lectureId=${lectureId}&fileName=${fileName}&expirySeconds=${expirySeconds}`,
-        {
-            headers: accessToken ? {Authorization: `Bearer ${accessToken}`} : undefined
-
-        }
-    )
-
-    return res.data.url;
-}
Index: ontend/src/api/userApi.ts
===================================================================
--- frontend/src/api/userApi.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,67 +1,0 @@
-import axios from "axios";
-import type {User} from "../models/javaObjects/User.tsx";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-export const toggleFavoriteCourseApi = async (courseId: number, accessToken: string): Promise<void> => {
-    await axios.put(
-        `${backendUrl}/api/users/favorite-course/${courseId}`,
-        {},
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`,
-            }
-        }
-    )
-}
-
-export const updateUserApi = async (userInfo: {name: string, workPosition: string, companyType: string}, accessToken: string): Promise<void> => {
-    await axios.put(
-        `${backendUrl}/api/users/update/info`,
-        userInfo,
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`,
-            }
-        }
-    )
-}
-
-export const updateUserInterestsApi = async (interests: string[], accessToken: string): Promise<void> => {
-    await axios.put(
-        `${backendUrl}/api/users/update/interests`,
-        interests,
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`,
-            }
-        }
-    )
-}
-
-export const updateUserDesiredSkillsApi = async (desiredSkills: string[], accessToken: string): Promise<void> => {
-    await axios.put(
-        `${backendUrl}/api/users/update/desired-skills`,
-        desiredSkills,
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`,
-            }
-        }
-    )
-}
-
-export const getUserApi = async (accessToken: string): Promise<User> => {
-    const res = await axios.get(
-        `${backendUrl}/api/users/me`,
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`,
-            }
-        }
-    )
-
-    return res.data;
-}
Index: ontend/src/api/userCourseProgressApi.ts
===================================================================
--- frontend/src/api/userCourseProgressApi.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,34 +1,0 @@
-import axios from "axios";
-import type {UserCourseProgress} from "../models/javaObjects/UserCourseProgress.tsx";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-export const completeLectureApi = async (progressId: number, accessToken: string): Promise<UserCourseProgress> => {
-    const res = await axios.put(
-        `${backendUrl}/api/progress/${progressId}/complete`,
-        null,
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`,
-            }
-        }
-    )
-
-    return res.data;
-}
-
-export const uncompleteLectureApi = async (progressId: number, accessToken: string): Promise<UserCourseProgress> => {
-    const res = await axios.put(
-        `${backendUrl}/api/progress/${progressId}/uncomplete`,
-        null,
-        {
-            headers: {
-                Authorization: `Bearer ${accessToken}`,
-            }
-        }
-    )
-
-    return res.data;
-}
Index: ontend/src/assets/CircularProgress.tsx
===================================================================
--- frontend/src/assets/CircularProgress.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,50 +1,0 @@
-import React from "react";
-
-interface CircularProgressProps {
-    percentage: number; // 0 - 100
-    size?: number;
-    strokeWidth?: number;
-}
-
-const CircularProgress: React.FC<CircularProgressProps> = ({
-                                                               percentage,
-                                                               size = 20,
-                                                               strokeWidth = 2,
-                                                           }) => {
-    const radius = (size - strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const offset = circumference - (percentage / 100) * circumference;
-
-    return (
-        <svg
-            width={size}
-            height={size}
-            className="transform -rotate-90"
-        >
-            {/* Background circle */}
-            <circle
-                cx={size / 2}
-                cy={size / 2}
-                r={radius}
-                stroke="var(--color-gray)" // Tailwind's gray-200
-                strokeWidth={strokeWidth}
-                fill="none"
-            />
-            {/* Progress circle */}
-            <circle
-                cx={size / 2}
-                cy={size / 2}
-                r={radius}
-                stroke="var(--color-shifter)" // Tailwind's blue-500
-                strokeWidth={strokeWidth}
-                fill="none"
-                strokeDasharray={circumference}
-                strokeDashoffset={offset}
-                strokeLinecap="round"
-                style={{ transition: "stroke-dashoffset 0.35s ease" }}
-            />
-        </svg>
-    );
-};
-
-export default CircularProgress;
Index: ontend/src/assets/animations/Loading.json
===================================================================
--- frontend/src/assets/animations/Loading.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,3 +1,0 @@
-{"v":"5.6.10","fr":30,"ip":30,"op":210,"w":800,"h":600,"nm":"Ã¥ÂÂÃ¦ÂÂ 1","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 18","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":340,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":30,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 17","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":320,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[0]},{"t":40,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":10,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 16","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":300,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":20,"s":[0]},{"t":50,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":20,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 15","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":280,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[0]},{"t":60,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":30,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 14","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":260,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":40,"s":[0]},{"t":70,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":40,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 13","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":240,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[0]},{"t":80,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":50,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 12","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":220,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[0]},{"t":90,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":60,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 11","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":200,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":70,"s":[0]},{"t":100,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":70,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 10","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":180,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[0]},{"t":110,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":80,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 9","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":160,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":90,"s":[0]},{"t":120,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":90,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 8","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":140,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[0]},{"t":130,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":100,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":120,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":110,"s":[0]},{"t":140,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":110,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":100,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[0]},{"t":150,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":420,"st":120,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":80,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":130,"s":[0]},{"t":160,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":430,"st":130,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":60,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[0]},{"t":170,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":440,"st":140,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":40,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":150,"s":[0]},{"t":180,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":450,"st":150,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":20,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":160,"s":[0]},{"t":190,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":460,"st":160,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":170,"s":[0]},{"t":200,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":470,"st":170,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 24","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":340,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[0]},{"t":210,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":180,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 23","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":320,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":190,"s":[0]},{"t":220,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":190,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 22","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":300,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":200,"s":[0]},{"t":230,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":200,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 21","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":280,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":210,"s":[0]},{"t":240,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":210,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 20","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":260,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":220,"s":[0]},{"t":250,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":220,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 19","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":240,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤ÂÃ¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":230,"s":[0]},{"t":260,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤ÂÃ¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":230,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Ã©Â¢ÂÃ¥ÂÂÃ¦ÂÂ 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[400,300,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"Ã§Â®ÂÃ¥ÂÂÃ©ÂÂ»Ã¥Â¡ÂÃ¥Â·Â¥Ã¥Â
-Â·","np":4,"mn":"ADBE Simple Choker","ix":1,"en":1,"ef":[{"ty":7,"nm":"Ã¨Â§ÂÃ¥ÂÂ¾","mn":"ADBE Simple Choker-0001","ix":1,"v":{"a":0,"k":1,"ix":1}},{"ty":0,"nm":"Ã©ÂÂ»Ã¥Â¡ÂÃ©ÂÂ®Ã§Â½Â©","mn":"ADBE Simple Choker-0002","ix":2,"v":{"a":0,"k":14,"ix":2}}]},{"ty":5,"nm":"Ã¦Â¢Â¯Ã¥ÂºÂ¦Ã¦Â¸ÂÃ¥ÂÂ","np":10,"mn":"ADBE Ramp","ix":2,"en":1,"ef":[{"ty":3,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¨ÂµÂ·Ã§ÂÂ¹","mn":"ADBE Ramp-0001","ix":1,"v":{"a":0,"k":[400,0],"ix":1}},{"ty":2,"nm":"Ã¨ÂµÂ·Ã¥Â§ÂÃ©Â¢ÂÃ¨ÂÂ²","mn":"ADBE Ramp-0002","ix":2,"v":{"a":0,"k":[0.26,0.7903,1,1],"ix":2}},{"ty":3,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ§Â»ÂÃ§ÂÂ¹","mn":"ADBE Ramp-0003","ix":3,"v":{"a":0,"k":[400,600],"ix":3}},{"ty":2,"nm":"Ã§Â»ÂÃ¦ÂÂÃ©Â¢ÂÃ¨ÂÂ²","mn":"ADBE Ramp-0004","ix":4,"v":{"a":0,"k":[0.36,0.8187,1,1],"ix":4}},{"ty":7,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¥Â½Â¢Ã§ÂÂ¶","mn":"ADBE Ramp-0005","ix":5,"v":{"a":0,"k":1,"ix":5}},{"ty":0,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¦ÂÂ£Ã¥Â°Â","mn":"ADBE Ramp-0006","ix":6,"v":{"a":0,"k":0,"ix":6}},{"ty":0,"nm":"Ã¤Â¸ÂÃ¥ÂÂÃ¥Â§ÂÃ¥ÂÂ¾Ã¥ÂÂÃ¦Â·Â·Ã¥ÂÂ","mn":"ADBE Ramp-0007","ix":7,"v":{"a":0,"k":0,"ix":7}},{"ty":6,"nm":"","mn":"ADBE Ramp-0008","ix":8,"v":0}]}],"w":800,"h":600,"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Ã©Â¢ÂÃ¥ÂÂÃ¦ÂÂ 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":56,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,320,0],"ix":2},"a":{"a":0,"k":[400,300,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"Ã§Â®ÂÃ¥ÂÂÃ©ÂÂ»Ã¥Â¡ÂÃ¥Â·Â¥Ã¥Â
-Â·","np":4,"mn":"ADBE Simple Choker","ix":1,"en":1,"ef":[{"ty":7,"nm":"Ã¨Â§ÂÃ¥ÂÂ¾","mn":"ADBE Simple Choker-0001","ix":1,"v":{"a":0,"k":1,"ix":1}},{"ty":0,"nm":"Ã©ÂÂ»Ã¥Â¡ÂÃ©ÂÂ®Ã§Â½Â©","mn":"ADBE Simple Choker-0002","ix":2,"v":{"a":0,"k":14,"ix":2}}]},{"ty":5,"nm":"Ã¦Â¢Â¯Ã¥ÂºÂ¦Ã¦Â¸ÂÃ¥ÂÂ","np":10,"mn":"ADBE Ramp","ix":2,"en":1,"ef":[{"ty":3,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¨ÂµÂ·Ã§ÂÂ¹","mn":"ADBE Ramp-0001","ix":1,"v":{"a":0,"k":[400,0],"ix":1}},{"ty":2,"nm":"Ã¨ÂµÂ·Ã¥Â§ÂÃ©Â¢ÂÃ¨ÂÂ²","mn":"ADBE Ramp-0002","ix":2,"v":{"a":0,"k":[0.26,0.7903,1,1],"ix":2}},{"ty":3,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ§Â»ÂÃ§ÂÂ¹","mn":"ADBE Ramp-0003","ix":3,"v":{"a":0,"k":[400,600],"ix":3}},{"ty":2,"nm":"Ã§Â»ÂÃ¦ÂÂÃ©Â¢ÂÃ¨ÂÂ²","mn":"ADBE Ramp-0004","ix":4,"v":{"a":0,"k":[0.36,0.8187,1,1],"ix":4}},{"ty":7,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¥Â½Â¢Ã§ÂÂ¶","mn":"ADBE Ramp-0005","ix":5,"v":{"a":0,"k":1,"ix":5}},{"ty":0,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¦ÂÂ£Ã¥Â°Â","mn":"ADBE Ramp-0006","ix":6,"v":{"a":0,"k":0,"ix":6}},{"ty":0,"nm":"Ã¤Â¸ÂÃ¥ÂÂÃ¥Â§ÂÃ¥ÂÂ¾Ã¥ÂÂÃ¦Â·Â·Ã¥ÂÂ","mn":"ADBE Ramp-0007","ix":7,"v":{"a":0,"k":0,"ix":7}},{"ty":6,"nm":"","mn":"ADBE Ramp-0008","ix":8,"v":0}]},{"ty":29,"nm":"Ã©Â«ÂÃ¦ÂÂ¯Ã¦Â¨Â¡Ã§Â³Â","np":5,"mn":"ADBE Gaussian Blur 2","ix":3,"en":1,"ef":[{"ty":0,"nm":"Ã¦Â¨Â¡Ã§Â³ÂÃ¥ÂºÂ¦","mn":"ADBE Gaussian Blur 2-0001","ix":1,"v":{"a":0,"k":41.3,"ix":1}},{"ty":7,"nm":"Ã¦Â¨Â¡Ã§Â³ÂÃ¦ÂÂ¹Ã¥ÂÂ","mn":"ADBE Gaussian Blur 2-0002","ix":2,"v":{"a":0,"k":1,"ix":2}},{"ty":7,"nm":"Ã©ÂÂÃ¥Â¤ÂÃ¨Â¾Â¹Ã§Â¼ÂÃ¥ÂÂÃ§Â´Â ","mn":"ADBE Gaussian Blur 2-0003","ix":3,"v":{"a":0,"k":0,"ix":3}}]}],"w":800,"h":600,"ip":0,"op":300,"st":0,"bm":0}],"markers":[]}
Index: ontend/src/assets/animations/MagicBento.tsx
===================================================================
--- frontend/src/assets/animations/MagicBento.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,810 +1,0 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { gsap } from 'gsap';
-import { IconRocket, IconTarget, IconTelescope } from "@tabler/icons-react";
-
-export interface BentoCardProps {
-    icon: React.ReactNode;
-    title: string;
-    description: string;
-    textAutoHide?: boolean;
-    disableAnimations?: boolean;
-}
-
-export interface BentoProps {
-    textAutoHide?: boolean;
-    enableStars?: boolean;
-    enableSpotlight?: boolean;
-    enableBorderGlow?: boolean;
-    disableAnimations?: boolean;
-    spotlightRadius?: number;
-    particleCount?: number;
-    enableTilt?: boolean;
-    glowColor?: string;
-    clickEffect?: boolean;
-    enableMagnetism?: boolean;
-}
-
-const DEFAULT_PARTICLE_COUNT = 12;
-const DEFAULT_SPOTLIGHT_RADIUS = 300;
-const DEFAULT_GLOW_COLOR = '0, 140, 194'; // RGB for "shifter" color
-const MOBILE_BREAKPOINT = 768;
-
-const cardData: BentoCardProps[] = [
-    {
-        icon: <IconTarget size={40} color="var(--color-white)" />,
-        title: "Purpose",
-        description: "To create positive change in the world of family entrepreneurship by empowering leaders to drive growth, inspire teams, strengthen culture, and achieve sustainable success."
-    },
-    {
-        icon: <IconRocket size={40} color="var(--color-white)" />,
-        title: "Mission",
-        description: "To empower family businesses to unlock their full potential and drive sustainable growth through mentorship, consulting, and digital learning programs, including online courses and academies."
-    },
-    {
-        icon: <IconTelescope size={40} color="var(--color-white)" />,
-        title: "Vision",
-        description: "To become the leading center for business development, transformation, and continuous learning for family businesses in Europe."
-    }
-];
-
-const createParticleElement = (x: number, y: number, color: string = DEFAULT_GLOW_COLOR): HTMLDivElement => {
-    const el = document.createElement('div');
-    el.className = 'particle';
-    el.style.cssText = `
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background: rgba(${color}, 1);
-    box-shadow: 0 0 6px rgba(${color}, 0.6);
-    pointer-events: none;
-    z-index: 100;
-    left: ${x}px;
-    top: ${y}px;
-  `;
-    return el;
-};
-
-const calculateSpotlightValues = (radius: number) => ({
-    proximity: radius * 0.5,
-    fadeDistance: radius * 0.75
-});
-
-const updateCardGlowProperties = (card: HTMLElement, mouseX: number, mouseY: number, glow: number, radius: number) => {
-    const rect = card.getBoundingClientRect();
-    const relativeX = ((mouseX - rect.left) / rect.width) * 100;
-    const relativeY = ((mouseY - rect.top) / rect.height) * 100;
-
-    card.style.setProperty('--glow-x', `${relativeX}%`);
-    card.style.setProperty('--glow-y', `${relativeY}%`);
-    card.style.setProperty('--glow-intensity', glow.toString());
-    card.style.setProperty('--glow-radius', `${radius}px`);
-};
-
-const ParticleCard: React.FC<{
-    children: React.ReactNode;
-    className?: string;
-    disableAnimations?: boolean;
-    style?: React.CSSProperties;
-    particleCount?: number;
-    glowColor?: string;
-    enableTilt?: boolean;
-    clickEffect?: boolean;
-    enableMagnetism?: boolean;
-}> = ({
-          children,
-          className = '',
-          disableAnimations = false,
-          style,
-          particleCount = DEFAULT_PARTICLE_COUNT,
-          glowColor = DEFAULT_GLOW_COLOR,
-          enableTilt = true,
-          clickEffect = false,
-          enableMagnetism = false
-      }) => {
-    const cardRef = useRef<HTMLDivElement>(null);
-    const particlesRef = useRef<HTMLDivElement[]>([]);
-    const timeoutsRef = useRef<NodeJS.Timeout[]>([]);
-    const isHoveredRef = useRef(false);
-    const memoizedParticles = useRef<HTMLDivElement[]>([]);
-    const particlesInitialized = useRef(false);
-    const magnetismAnimationRef = useRef<gsap.core.Tween | null>(null);
-
-    const initializeParticles = useCallback(() => {
-        if (particlesInitialized.current || !cardRef.current) return;
-
-        const { width, height } = cardRef.current.getBoundingClientRect();
-        memoizedParticles.current = Array.from({ length: particleCount }, () =>
-            createParticleElement(Math.random() * width, Math.random() * height, glowColor)
-        );
-        particlesInitialized.current = true;
-    }, [particleCount, glowColor]);
-
-    const clearAllParticles = useCallback(() => {
-        timeoutsRef.current.forEach(clearTimeout);
-        timeoutsRef.current = [];
-        magnetismAnimationRef.current?.kill();
-
-        particlesRef.current.forEach(particle => {
-            gsap.to(particle, {
-                scale: 0,
-                opacity: 0,
-                duration: 0.3,
-                ease: 'back.in(1.7)',
-                onComplete: () => {
-                    particle.parentNode?.removeChild(particle);
-                }
-            });
-        });
-        particlesRef.current = [];
-    }, []);
-
-    const animateParticles = useCallback(() => {
-        if (!cardRef.current || !isHoveredRef.current) return;
-
-        if (!particlesInitialized.current) {
-            initializeParticles();
-        }
-
-        memoizedParticles.current.forEach((particle, index) => {
-            const timeoutId = setTimeout(() => {
-                if (!isHoveredRef.current || !cardRef.current) return;
-
-                const clone = particle.cloneNode(true) as HTMLDivElement;
-                cardRef.current.appendChild(clone);
-                particlesRef.current.push(clone);
-
-                gsap.fromTo(clone, { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.3, ease: 'back.out(1.7)' });
-
-                gsap.to(clone, {
-                    x: (Math.random() - 0.5) * 100,
-                    y: (Math.random() - 0.5) * 100,
-                    rotation: Math.random() * 360,
-                    duration: 2 + Math.random() * 2,
-                    ease: 'none',
-                    repeat: -1,
-                    yoyo: true
-                });
-
-                gsap.to(clone, {
-                    opacity: 0.3,
-                    duration: 1.5,
-                    ease: 'power2.inOut',
-                    repeat: -1,
-                    yoyo: true
-                });
-            }, index * 100);
-
-            timeoutsRef.current.push(timeoutId);
-        });
-    }, [initializeParticles]);
-
-    useEffect(() => {
-        if (disableAnimations || !cardRef.current) return;
-
-        const element = cardRef.current;
-
-        const handleMouseEnter = () => {
-            isHoveredRef.current = true;
-            animateParticles();
-
-            if (enableTilt) {
-                gsap.to(element, {
-                    rotateX: 5,
-                    rotateY: 5,
-                    duration: 0.3,
-                    ease: 'power2.out',
-                    transformPerspective: 1000
-                });
-            }
-        };
-
-        const handleMouseLeave = () => {
-            isHoveredRef.current = false;
-            clearAllParticles();
-
-            if (enableTilt) {
-                gsap.to(element, {
-                    rotateX: 0,
-                    rotateY: 0,
-                    duration: 0.3,
-                    ease: 'power2.out'
-                });
-            }
-
-            if (enableMagnetism) {
-                gsap.to(element, {
-                    x: 0,
-                    y: 0,
-                    duration: 0.3,
-                    ease: 'power2.out'
-                });
-            }
-        };
-
-        const handleMouseMove = (e: MouseEvent) => {
-            if (!enableTilt && !enableMagnetism) return;
-
-            const rect = element.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            const centerX = rect.width / 2;
-            const centerY = rect.height / 2;
-
-            if (enableTilt) {
-                const rotateX = ((y - centerY) / centerY) * -3;
-                const rotateY = ((x - centerX) / centerX) * 3;
-
-                gsap.to(element, {
-                    rotateX,
-                    rotateY,
-                    duration: 0.1,
-                    ease: 'power2.out',
-                    transformPerspective: 1000
-                });
-            }
-
-            if (enableMagnetism) {
-                const magnetX = (x - centerX) * 0.05;
-                const magnetY = (y - centerY) * 0.05;
-
-                magnetismAnimationRef.current = gsap.to(element, {
-                    x: magnetX,
-                    y: magnetY,
-                    duration: 0.3,
-                    ease: 'power2.out'
-                });
-            }
-        };
-
-        const handleClick = (e: MouseEvent) => {
-            if (!clickEffect) return;
-
-            const rect = element.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-
-            const maxDistance = Math.max(
-                Math.hypot(x, y),
-                Math.hypot(x - rect.width, y),
-                Math.hypot(x, y - rect.height),
-                Math.hypot(x - rect.width, y - rect.height)
-            );
-
-            const ripple = document.createElement('div');
-            ripple.style.cssText = `
-        position: absolute;
-        width: ${maxDistance * 2}px;
-        height: ${maxDistance * 2}px;
-        border-radius: 50%;
-        background: radial-gradient(circle, rgba(${glowColor}, 0.4) 0%, rgba(${glowColor}, 0.2) 30%, transparent 70%);
-        left: ${x - maxDistance}px;
-        top: ${y - maxDistance}px;
-        pointer-events: none;
-        z-index: 1000;
-      `;
-
-            element.appendChild(ripple);
-
-            gsap.fromTo(
-                ripple,
-                {
-                    scale: 0,
-                    opacity: 1
-                },
-                {
-                    scale: 1,
-                    opacity: 0,
-                    duration: 0.8,
-                    ease: 'power2.out',
-                    onComplete: () => ripple.remove()
-                }
-            );
-        };
-
-        element.addEventListener('mouseenter', handleMouseEnter);
-        element.addEventListener('mouseleave', handleMouseLeave);
-        element.addEventListener('mousemove', handleMouseMove);
-        element.addEventListener('click', handleClick);
-
-        return () => {
-            isHoveredRef.current = false;
-            element.removeEventListener('mouseenter', handleMouseEnter);
-            element.removeEventListener('mouseleave', handleMouseLeave);
-            element.removeEventListener('mousemove', handleMouseMove);
-            element.removeEventListener('click', handleClick);
-            clearAllParticles();
-        };
-    }, [animateParticles, clearAllParticles, disableAnimations, enableTilt, enableMagnetism, clickEffect, glowColor]);
-
-    return (
-        <div
-            ref={cardRef}
-            className={`${className} relative overflow-hidden`}
-            style={{ ...style, position: 'relative', overflow: 'hidden' }}
-        >
-            {children}
-        </div>
-    );
-};
-
-const GlobalSpotlight: React.FC<{
-    gridRef: React.RefObject<HTMLDivElement | null>;
-    disableAnimations?: boolean;
-    enabled?: boolean;
-    spotlightRadius?: number;
-    glowColor?: string;
-}> = ({
-          gridRef,
-          disableAnimations = false,
-          enabled = true,
-          spotlightRadius = DEFAULT_SPOTLIGHT_RADIUS,
-          glowColor = DEFAULT_GLOW_COLOR
-      }) => {
-    const spotlightRef = useRef<HTMLDivElement | null>(null);
-    const isInsideSection = useRef(false);
-
-    useEffect(() => {
-        if (disableAnimations || !gridRef?.current || !enabled) return;
-
-        const spotlight = document.createElement('div');
-        spotlight.className = 'global-spotlight';
-        spotlight.style.cssText = `
-      position: fixed;
-      width: 800px;
-      height: 800px;
-      border-radius: 50%;
-      pointer-events: none;
-      background: radial-gradient(circle,
-        rgba(${glowColor}, 0.15) 0%,
-        rgba(${glowColor}, 0.08) 15%,
-        rgba(${glowColor}, 0.04) 25%,
-        rgba(${glowColor}, 0.02) 40%,
-        rgba(${glowColor}, 0.01) 65%,
-        transparent 70%
-      );
-      z-index: 200;
-      opacity: 0;
-      transform: translate(-50%, -50%);
-      mix-blend-mode: screen;
-    `;
-        document.body.appendChild(spotlight);
-        spotlightRef.current = spotlight;
-
-        const handleMouseMove = (e: MouseEvent) => {
-            if (!spotlightRef.current || !gridRef.current) return;
-
-            const section = gridRef.current.closest('.bento-section');
-            const rect = section?.getBoundingClientRect();
-            const mouseInside =
-                rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
-
-            isInsideSection.current = mouseInside || false;
-            const cards = gridRef.current.querySelectorAll('.card');
-
-            if (!mouseInside) {
-                gsap.to(spotlightRef.current, {
-                    opacity: 0,
-                    duration: 0.3,
-                    ease: 'power2.out'
-                });
-                cards.forEach(card => {
-                    (card as HTMLElement).style.setProperty('--glow-intensity', '0');
-                });
-                return;
-            }
-
-            const { proximity, fadeDistance } = calculateSpotlightValues(spotlightRadius);
-            let minDistance = Infinity;
-
-            cards.forEach(card => {
-                const cardElement = card as HTMLElement;
-                const cardRect = cardElement.getBoundingClientRect();
-                const centerX = cardRect.left + cardRect.width / 2;
-                const centerY = cardRect.top + cardRect.height / 2;
-                const distance =
-                    Math.hypot(e.clientX - centerX, e.clientY - centerY) - Math.max(cardRect.width, cardRect.height) / 2;
-                const effectiveDistance = Math.max(0, distance);
-
-                minDistance = Math.min(minDistance, effectiveDistance);
-
-                let glowIntensity = 0;
-                if (effectiveDistance <= proximity) {
-                    glowIntensity = 1;
-                } else if (effectiveDistance <= fadeDistance) {
-                    glowIntensity = (fadeDistance - effectiveDistance) / (fadeDistance - proximity);
-                }
-
-                updateCardGlowProperties(cardElement, e.clientX, e.clientY, glowIntensity, spotlightRadius);
-            });
-
-            gsap.to(spotlightRef.current, {
-                left: e.clientX,
-                top: e.clientY,
-                duration: 0.1,
-                ease: 'power2.out'
-            });
-
-            const targetOpacity =
-                minDistance <= proximity
-                    ? 0.8
-                    : minDistance <= fadeDistance
-                        ? ((fadeDistance - minDistance) / (fadeDistance - proximity)) * 0.8
-                        : 0;
-
-            gsap.to(spotlightRef.current, {
-                opacity: targetOpacity,
-                duration: targetOpacity > 0 ? 0.2 : 0.5,
-                ease: 'power2.out'
-            });
-        };
-
-        const handleMouseLeave = () => {
-            isInsideSection.current = false;
-            gridRef.current?.querySelectorAll('.card').forEach(card => {
-                (card as HTMLElement).style.setProperty('--glow-intensity', '0');
-            });
-            if (spotlightRef.current) {
-                gsap.to(spotlightRef.current, {
-                    opacity: 0,
-                    duration: 0.3,
-                    ease: 'power2.out'
-                });
-            }
-        };
-
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseleave', handleMouseLeave);
-
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseleave', handleMouseLeave);
-            spotlightRef.current?.parentNode?.removeChild(spotlightRef.current);
-        };
-    }, [gridRef, disableAnimations, enabled, spotlightRadius, glowColor]);
-
-    return null;
-};
-
-const BentoCardGrid: React.FC<{
-    children: React.ReactNode;
-    gridRef?: React.RefObject<HTMLDivElement | null>;
-}> = ({ children, gridRef }) => (
-    <div
-        className="bento-section gap-10 select-none relative"
-        style={{ fontSize: 'clamp(1rem, 0.9rem + 0.5vw, 1.5rem)' }}
-        ref={gridRef}
-    >
-        {children}
-    </div>
-);
-
-const useMobileDetection = () => {
-    const [isMobile, setIsMobile] = useState(false);
-
-    useEffect(() => {
-        const checkMobile = () => setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
-
-        checkMobile();
-        window.addEventListener('resize', checkMobile);
-
-        return () => window.removeEventListener('resize', checkMobile);
-    }, []);
-
-    return isMobile;
-};
-
-const MagicBento: React.FC<BentoProps> = ({
-                                              textAutoHide = true,
-                                              enableStars = true,
-                                              enableSpotlight = true,
-                                              enableBorderGlow = true,
-                                              disableAnimations = false,
-                                              spotlightRadius = DEFAULT_SPOTLIGHT_RADIUS,
-                                              particleCount = DEFAULT_PARTICLE_COUNT,
-                                              enableTilt = false,
-                                              glowColor = DEFAULT_GLOW_COLOR,
-                                              clickEffect = true,
-                                              enableMagnetism = true
-                                          }) => {
-    const gridRef = useRef<HTMLDivElement>(null);
-    const isMobile = useMobileDetection();
-    const shouldDisableAnimations = disableAnimations || isMobile;
-
-    const baseBackgroundColor = "var(--color-beige)"; // White color for the cards
-    const textColor = "#060010"; // Dark color for the text
-
-    return (
-        <>
-            <style>
-                {`
-          .bento-section {
-            --glow-x: 50%;
-            --glow-y: 50%;
-            --glow-intensity: 0;
-            --glow-radius: 200px;
-            --glow-color: var(--color-shifter);
-            --border-color: rgba(0, 0, 0, 0.1);
-            --white: #f8f8f8;
-            --shifter: var(--color-shifter);
-          }
-          
-          .card-responsive {
-            grid-template-columns: 1fr;
-            padding: 0.5rem;
-          }
-          
-          @media (min-width: 600px) {
-            .card-responsive {
-              grid-template-columns: repeat(2, 1fr);
-            }
-          }
-          
-          @media (min-width: 1024px) {
-            .card-responsive {
-              grid-template-columns: repeat(3, 1fr);
-            }
-          }
-          
-          .card--border-glow::after {
-            content: '';
-            position: absolute;
-            inset: 0;
-            padding: 6px;
-            background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),
-                rgba(${DEFAULT_GLOW_COLOR}, calc(var(--glow-intensity) * 0.8)) 0%,
-                rgba(${DEFAULT_GLOW_COLOR}, calc(var(--glow-intensity) * 0.4)) 30%,
-                transparent 60%);
-            border-radius: inherit;
-            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-            mask-composite: subtract;
-            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-            -webkit-mask-composite: xor;
-            pointer-events: none;
-            transition: opacity 0.3s ease;
-            z-index: 1;
-          }
-          
-          .card--border-glow:hover::after {
-            opacity: 1;
-          }
-          
-          .card--border-glow:hover {
-            box-shadow: 0 4px 20px rgba(0, 140, 194, 0.4), 0 0 30px rgba(${DEFAULT_GLOW_COLOR}, 0.2);
-          }
-          
-          .particle::before {
-            content: '';
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            background: rgba(${DEFAULT_GLOW_COLOR}, 0.2);
-            border-radius: 50%;
-            z-index: -1;
-          }
-          
-          .particle-container:hover {
-            box-shadow: 0 4px 20px rgba(46, 24, 78, 0.2), 0 0 30px rgba(${DEFAULT_GLOW_COLOR}, 0.2);
-          }
-          
-          .text-clamp-1 {
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 1;
-            line-clamp: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-          
-          .text-clamp-2 {
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            line-clamp: 2;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-          
-          @media (max-width: 599px) {
-            .card-responsive {
-              grid-template-columns: 1fr;
-              width: 90%;
-              margin: 0 auto;
-              padding: 0.5rem;
-            }
-            
-            .card-responsive .card {
-              // width: 100%;
-              // min-height: 180px;
-            }
-          }
-        `}
-            </style>
-
-            {enableSpotlight && (
-                <GlobalSpotlight
-                    gridRef={gridRef}
-                    disableAnimations={shouldDisableAnimations}
-                    enabled={enableSpotlight}
-                    spotlightRadius={spotlightRadius}
-                    glowColor={glowColor}
-                />
-            )}
-
-            <BentoCardGrid gridRef={gridRef}>
-                <div className="card-responsive grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
-                    {cardData.map((card, index) => {
-                        const baseClassName = `card flex flex-col items-start text-left gap-4 p-6 rounded-lg border border-solid font-light transition-all duration-100 ease-in-out hover:-translate-y-0.5 hover:shadow-[0_8px_25px_rgba(0,0,0,0.15)] ${
-                            enableBorderGlow ? 'card--border-glow' : ''
-                        }`;
-
-                        const cardStyle = {
-                            backgroundColor: baseBackgroundColor,
-                            borderColor: 'var(--border-color)',
-                            color: textColor,
-                            '--glow-x': '50%',
-                            '--glow-y': '50%',
-                            '--glow-intensity': '0',
-                            '--glow-radius': '200px'
-                        } as React.CSSProperties;
-
-                        const content = (
-                            <>
-                                <div className="p-4 bg-shifter rounded-md">{card.icon}</div>
-                                <h3 className={`font-normal text-3xl m-0 ${textAutoHide ? 'text-clamp-1' : ''}`}>
-                                    {card.title}
-                                </h3>
-                                <p
-                                    className={`text-base leading-5 opacity-90 `}
-                                >
-                                    {card.description}
-                                </p>
-                            </>
-                        );
-
-                        if (enableStars) {
-                            return (
-                                <ParticleCard
-                                    key={index}
-                                    className={baseClassName}
-                                    style={cardStyle}
-                                    disableAnimations={shouldDisableAnimations}
-                                    particleCount={particleCount}
-                                    glowColor={glowColor}
-                                    enableTilt={enableTilt}
-                                    clickEffect={clickEffect}
-                                    enableMagnetism={enableMagnetism}
-                                >
-                                    {content}
-                                </ParticleCard>
-                            );
-                        }
-
-                        return (
-                            <div
-                                key={index}
-                                className={baseClassName}
-                                style={cardStyle}
-                                ref={el => {
-                                    if (!el) return;
-
-                                    const handleMouseMove = (e: MouseEvent) => {
-                                        if (shouldDisableAnimations) return;
-
-                                        const rect = el.getBoundingClientRect();
-                                        const x = e.clientX - rect.left;
-                                        const y = e.clientY - rect.top;
-                                        const centerX = rect.width / 2;
-                                        const centerY = rect.height / 2;
-
-                                        if (enableTilt) {
-                                            const rotateX = ((y - centerY) / centerY) * -3;
-                                            const rotateY = ((x - centerX) / centerX) * 3;
-
-                                            gsap.to(el, {
-                                                rotateX,
-                                                rotateY,
-                                                duration: 0.1,
-                                                ease: 'power2.out',
-                                                transformPerspective: 1000
-                                            });
-                                        }
-
-                                        if (enableMagnetism) {
-                                            const magnetX = (x - centerX) * 0.05;
-                                            const magnetY = (y - centerY) * 0.05;
-
-                                            gsap.to(el, {
-                                                x: magnetX,
-                                                y: magnetY,
-                                                duration: 0.3,
-                                                ease: 'power2.out'
-                                            });
-                                        }
-                                    };
-
-                                    const handleMouseLeave = () => {
-                                        if (shouldDisableAnimations) return;
-
-                                        if (enableTilt) {
-                                            gsap.to(el, {
-                                                rotateX: 0,
-                                                rotateY: 0,
-                                                duration: 0.3,
-                                                ease: 'power2.out'
-                                            });
-                                        }
-
-                                        if (enableMagnetism) {
-                                            gsap.to(el, {
-                                                x: 0,
-                                                y: 0,
-                                                duration: 0.3,
-                                                ease: 'power2.out'
-                                            });
-                                        }
-                                    };
-
-                                    const handleClick = (e: MouseEvent) => {
-                                        if (!clickEffect || shouldDisableAnimations) return;
-
-                                        const rect = el.getBoundingClientRect();
-                                        const x = e.clientX - rect.left;
-                                        const y = e.clientY - rect.top;
-
-                                        const maxDistance = Math.max(
-                                            Math.hypot(x, y),
-                                            Math.hypot(x - rect.width, y),
-                                            Math.hypot(x, y - rect.height),
-                                            Math.hypot(x - rect.width, y - rect.height)
-                                        );
-
-                                        const ripple = document.createElement('div');
-                                        ripple.style.cssText = `
-                      position: absolute;
-                      width: ${maxDistance * 2}px;
-                      height: ${maxDistance * 2}px;
-                      border-radius: 50%;
-                      background: radial-gradient(circle, rgba(${glowColor}, 0.4) 0%, rgba(${glowColor}, 0.2) 30%, transparent 70%);
-                      left: ${x - maxDistance}px;
-                      top: ${y - maxDistance}px;
-                      pointer-events: none;
-                      z-index: 1000;
-                    `;
-
-                                        el.appendChild(ripple);
-
-                                        gsap.fromTo(
-                                            ripple,
-                                            {
-                                                scale: 0,
-                                                opacity: 1
-                                            },
-                                            {
-                                                scale: 1,
-                                                opacity: 0,
-                                                duration: 0.8,
-                                                ease: 'power2.out',
-                                                onComplete: () => ripple.remove()
-                                            }
-                                        );
-                                    };
-
-                                    el.addEventListener('mousemove', handleMouseMove);
-                                    el.addEventListener('mouseleave', handleMouseLeave);
-                                    el.addEventListener('click', handleClick);
-                                }}
-                            >
-                                {content}
-                            </div>
-                        );
-                    })}
-                </div>
-            </BentoCardGrid>
-        </>
-    );
-};
-
-export default MagicBento;
Index: ontend/src/assets/animations/Silk.tsx
===================================================================
--- frontend/src/assets/animations/Silk.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,171 +1,0 @@
-/* eslint-disable react/no-unknown-property */
-import React, {forwardRef, useMemo, useRef, useLayoutEffect} from "react";
-import {Canvas, useFrame, useThree} from "@react-three/fiber";
-import {Color, Mesh, ShaderMaterial} from "three";
-
-type NormalizedRGB = [number, number, number];
-
-const hexToNormalizedRGB = (hex: string): NormalizedRGB => {
-    const clean = hex.replace("#", "");
-    const r = parseInt(clean.slice(0, 2), 16) / 255;
-    const g = parseInt(clean.slice(2, 4), 16) / 255;
-    const b = parseInt(clean.slice(4, 6), 16) / 255;
-    return [r, g, b];
-};
-
-interface UniformValue<T = number | Color> {
-    value: T;
-}
-
-interface SilkUniforms {
-    uSpeed: UniformValue<number>;
-    uScale: UniformValue<number>;
-    uNoiseIntensity: UniformValue<number>;
-    uColor: UniformValue<Color>;
-    uRotation: UniformValue<number>;
-    uTime: UniformValue<number>;
-
-    [uniform: string]: { value: any };
-}
-
-const vertexShader = `
-varying vec2 vUv;
-varying vec3 vPosition;
-
-void main() {
-  vPosition = position;
-  vUv = uv;
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
-`;
-
-const fragmentShader = `
-varying vec2 vUv;
-varying vec3 vPosition;
-
-uniform float uTime;
-uniform vec3  uColor;
-uniform float uSpeed;
-uniform float uScale;
-uniform float uRotation;
-uniform float uNoiseIntensity;
-
-const float e = 2.71828182845904523536;
-
-float noise(vec2 texCoord) {
-  float G = e;
-  vec2  r = (G * sin(G * texCoord));
-  return fract(r.x * r.y * (1.0 + texCoord.x));
-}
-
-vec2 rotateUvs(vec2 uv, float angle) {
-  float c = cos(angle);
-  float s = sin(angle);
-  mat2  rot = mat2(c, -s, s, c);
-  return rot * uv;
-}
-
-void main() {
-  float rnd        = noise(gl_FragCoord.xy);
-  vec2  uv         = rotateUvs(vUv * uScale, uRotation);
-  vec2  tex        = uv * uScale;
-  float tOffset    = uSpeed * uTime;
-
-  tex.y += 0.03 * sin(8.0 * tex.x - tOffset);
-
-  float pattern = 0.6 +
-                  0.4 * sin(5.0 * (tex.x + tex.y +
-                                   cos(3.0 * tex.x + 5.0 * tex.y) +
-                                   0.02 * tOffset) +
-                           sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));
-
-  vec3 base = vec3(0.8); // white
-  vec3 color = mix(base, uColor, pattern); // pattern=0 -> white, pattern=1 -> uColor
-  vec4 col = vec4(color, 1.0) - rnd / 50.0 * uNoiseIntensity;
-  col.a = 1.0;
-  gl_FragColor = col;
-}
-`;
-
-interface SilkPlaneProps {
-    uniforms: SilkUniforms;
-}
-
-const SilkPlane = forwardRef<Mesh, SilkPlaneProps>(function SilkPlane(
-    {uniforms},
-    ref
-) {
-    const {viewport} = useThree();
-
-    useLayoutEffect(() => {
-        const mesh = ref as React.MutableRefObject<Mesh | null>;
-        if (mesh.current) {
-            mesh.current.scale.set(viewport.width, viewport.height, 1);
-        }
-    }, [ref, viewport]);
-
-    useFrame((_state, delta) => {
-        const mesh = ref as React.MutableRefObject<Mesh | null>;
-        if (mesh.current) {
-            const material = mesh.current.material as ShaderMaterial & {
-                uniforms: SilkUniforms;
-            };
-            material.uniforms.uTime.value += 0.1 * delta;
-        }
-    });
-
-    return (
-        <mesh ref={ref}>
-            <planeGeometry args={[1, 1, 1, 1]}/>
-            <shaderMaterial
-                uniforms={uniforms}
-                vertexShader={vertexShader}
-                fragmentShader={fragmentShader}
-            />
-        </mesh>
-    );
-});
-SilkPlane.displayName = "SilkPlane";
-
-export interface SilkProps {
-    speed?: number;
-    scale?: number;
-    color?: string;
-    noiseIntensity?: number;
-    rotation?: number;
-    className?: string;
-}
-
-const Silk: React.FC<SilkProps> = ({
-                                       speed = 5,
-                                       scale = 1,
-                                       color = "#7B7481",
-                                       noiseIntensity = 1.5,
-                                       rotation = 0,
-                                       className = "",
-                                   }) => {
-    const meshRef = useRef<Mesh>(null);
-
-    const uniforms = useMemo<SilkUniforms>(
-        () => ({
-            uSpeed: {value: speed},
-            uScale: {value: scale},
-            uNoiseIntensity: {value: noiseIntensity},
-            uColor: {value: new Color(...hexToNormalizedRGB(color))},
-            uRotation: {value: rotation},
-            uTime: {value: 0},
-        }),
-        [speed, scale, noiseIntensity, color, rotation]
-    );
-
-    return (
-        <div className={className}>
-            <Canvas dpr={[1, 2]} frameloop="always"
-            >
-                <SilkPlane ref={meshRef} uniforms={uniforms}/>
-            </Canvas>
-        </div>
-    );
-};
-
-export default Silk;
Index: ontend/src/assets/animations/SpikeAnimation.tsx
===================================================================
--- frontend/src/assets/animations/SpikeAnimation.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,58 +1,0 @@
-import React from "react";
-
-export function LightBeams({tilt, beamCount, initialHeight, spikeMoveDown}: {
-    tilt: number,
-    beamCount: number,
-    initialHeight: number,
-    spikeMoveDown: number
-}): React.ReactElement {
-    const beams = Array.from({ length: beamCount }, (_, i) => {
-        const spacing = (window.innerWidth + 320) / beamCount; // tighter spacing
-        const x = i * spacing;
-        const width = 10 + Math.random() * 4; // thin but varied
-
-        return (
-            <rect
-                key={i}
-                x={x}
-                y={320 - initialHeight}
-                width={width}
-                height={initialHeight}
-                fill="url(#grad)"
-                transform={`skewX(${tilt})`}
-            >
-                {/*<animate*/}
-                {/*    attributeName="height"*/}
-                {/*    values={`${initialHeight}; ${initialHeight + 60}; ${initialHeight}`}*/}
-                {/*    dur={`${2 + Math.random() * 2}s`}*/}
-                {/*    repeatCount="indefinite"*/}
-                {/*/>*/}
-                <animate
-                    attributeName="y"
-                    values={`${320 - initialHeight}; ${320 - (initialHeight - spikeMoveDown)}; ${320 - initialHeight}`}
-                    dur={`${1 + Math.random() * 2}s`}
-                    repeatCount="indefinite"
-                />
-
-            </rect>
-        );
-    });
-
-    return (
-        <div className="absolute bottom-0 left-0 w-full h-[80vh] overflow-hidden">
-            <svg viewBox="0 0 1440 320" preserveAspectRatio="none" className="w-full h-full">
-                <defs>
-                    <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
-                        <stop offset="0%" stopColor="var(--color-beige)" />
-                        <stop offset="100%" stopColor="var(--color-shifter)" stopOpacity="0.8" />
-                    </linearGradient>
-                    <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
-                        <feGaussianBlur stdDeviation="10" />
-                    </filter>
-                </defs>
-
-                <g filter="url(#blur)">{beams}</g>
-            </svg>
-        </div>
-    );
-}
Index: ontend/src/assets/icons/Certificate.tsx
===================================================================
--- frontend/src/assets/icons/Certificate.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,23 +1,0 @@
-
-export default function Certificate({className = "w-6 h-6 text-black", strokeWidth = 2}) {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg"
-             width="24"
-             height="24"
-             viewBox="0 0 24 24"
-             fill="none"
-             stroke="currentColor"
-             stroke-width={strokeWidth}
-             stroke-linecap="round"
-             stroke-linejoin="round"
-             className={`icon icon-tabler icons-tabler-outline icon-tabler-certificate ${className}`}>
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path d="M15 15m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/>
-            <path d="M13 17.5v4.5l2 -1.5l2 1.5v-4.5"/>
-            <path d="M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -1 1.73"/>
-            <path d="M6 9l12 0"/>
-            <path d="M6 12l3 0"/>
-            <path d="M6 15l2 0"/>
-        </svg>
-    )
-}
Index: ontend/src/assets/icons/HeartFill.tsx
===================================================================
--- frontend/src/assets/icons/HeartFill.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,13 +1,0 @@
-export default function HeartFill({className = "w-6 h-6 text-black"}) {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg"
-             viewBox="0 0 24 24"
-             fill="currentColor"
-             className={className}
-        >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path
-                d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z"/>
-        </svg>
-    )
-}
Index: ontend/src/assets/icons/HeartOutline.tsx
===================================================================
--- frontend/src/assets/icons/HeartOutline.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,15 +1,0 @@
-export default function HeartOutline({className = "w-6 h-6 text-black", strokeWidth = 2}) {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg"
-             viewBox="0 0 24 24"
-             fill="none"
-             className={className}
-             stroke="currentColor"
-             strokeWidth={strokeWidth}
-             strokeLinecap="round" strokeLinejoin="round"
-        >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"/>
-        </svg>
-)
-}
Index: ontend/src/assets/icons/Instagram.tsx
===================================================================
--- frontend/src/assets/icons/Instagram.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,12 +1,0 @@
-export default function Instagram({ className = "w-6 h-6 text-black" }) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"     // Reset full view
-            fill="currentColor"
-            className={className}
-        >
-            <path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 7a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm4.5-3.5a1.25 1.25 0 1 0 1.25 1.25A1.25 1.25 0 0 0 16.5 5.5z" />
-        </svg>
-    );
-}
Index: ontend/src/assets/icons/LinkedIn.tsx
===================================================================
--- frontend/src/assets/icons/LinkedIn.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,12 +1,0 @@
-export default function LinkedIn({className = "w-6 h-6 text-black"}) {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg"
-             viewBox="0 0 24 24"
-             fill="currentColor"
-             className={className}>
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path
-                d="M17 2a5 5 0 0 1 5 5v10a5 5 0 0 1 -5 5h-10a5 5 0 0 1 -5 -5v-10a5 5 0 0 1 5 -5zm-9 8a1 1 0 0 0 -1 1v5a1 1 0 0 0 2 0v-5a1 1 0 0 0 -1 -1m6 0a3 3 0 0 0 -1.168 .236l-.125 .057a1 1 0 0 0 -1.707 .707v5a1 1 0 0 0 2 0v-3a1 1 0 0 1 2 0v3a1 1 0 0 0 2 0v-3a3 3 0 0 0 -3 -3m-6 -3a1 1 0 0 0 -.993 .883l-.007 .127a1 1 0 0 0 1.993 .117l.007 -.127a1 1 0 0 0 -1 -1"/>
-        </svg>
-    )
-}
Index: ontend/src/assets/icons/StarFilled.tsx
===================================================================
--- frontend/src/assets/icons/StarFilled.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,18 +1,0 @@
-export default function StarFilled({className = "w-6 h-6 text-black", strokeWidth = 2}) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            className={className}
-            fill="currentColor"
-            stroke="currentColor"
-            strokeWidth={strokeWidth}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-        >
-            <path fillRule="evenodd"
-                  d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-                  clipRule="evenodd"/>
-        </svg>
-    )
-}
Index: ontend/src/assets/icons/StarOutline.tsx
===================================================================
--- frontend/src/assets/icons/StarOutline.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,17 +1,0 @@
-export default function StarFilled({className = "w-6 h-6 text-black", strokeWidth = 2}) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            className={className}
-            stroke="currentColor"
-            strokeWidth={strokeWidth}
-            strokeLinecap="round" strokeLinejoin="round"
-        >
-            <path fillRule="evenodd"
-                  d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-                  clipRule="evenodd"/>
-        </svg>
-    )
-}
Index: ontend/src/assets/icons/UserCircle.tsx
===================================================================
--- frontend/src/assets/icons/UserCircle.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,11 +1,0 @@
-export default function UserCircle({className = "s", strokeWidth = 1.5}) {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={strokeWidth}
-             stroke="currentColor"
-             className={className}>
-            <path strokeLinecap="round" strokeLinejoin="round"
-                  d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
-        </svg>
-
-    );
-}
Index: ontend/src/components/CollaborationSteps.tsx
===================================================================
--- frontend/src/components/CollaborationSteps.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,89 +1,0 @@
-import { useAuthContext } from "../context/AuthContext.tsx";
-import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-export default function CollaborationSteps() {
-    const { user } = useAuthContext();
-    const { t } = useTranslation("home");
-
-    const steps = [
-        {
-            number: '01',
-            title: user?.hasUsedFreeConsultation
-                ? t("collaborationSteps.step1.afterConsultation.title")
-                : t("collaborationSteps.step1.beforeConsultation.title"),
-            description: user?.hasUsedFreeConsultation
-                ? t("collaborationSteps.step1.afterConsultation.description")
-                : t("collaborationSteps.step1.beforeConsultation.description"),
-        },
-        {
-            number: '02',
-            title: t("collaborationSteps.step2.title"),
-            description: t("collaborationSteps.step2.description"),
-        },
-        {
-            number: '03',
-            title: t("collaborationSteps.step3.title"),
-            description: t("collaborationSteps.step3.description"),
-        },
-        {
-            number: '04',
-            title: t("collaborationSteps.step4.title"),
-            description: t("collaborationSteps.step4.description"),
-        },
-    ];
-
-    return (
-        <section className="relative bg-shifter text-white py-vertical-xl px-horizontal-md flex flex-col gap-between-md items-center">
-            {/* Gradients */}
-            <div className="absolute bottom-0 w-full h-[32%]" style={{
-                background: "linear-gradient(to bottom, rgba(248,246,245,0) 0%, rgba(248,246,245,0.1) 20%, rgba(248,246,245,0.9) 80%, rgba(248,246,245,1) 100%)",
-                pointerEvents: "none",
-            }} />
-            <div className="absolute top-0 w-full h-[32%]" style={{
-                background: "linear-gradient(to top, rgba(248,246,245,0) 0%, rgba(248,246,245,0.1) 20%, rgba(248,246,245,0.9) 80%, rgba(248,246,245,1) 100%)",
-                pointerEvents: "none",
-            }} />
-
-            <h2 className="text-5xl font-light z-1" dangerouslySetInnerHTML={{ __html: t("collaborationSteps.heading") }} />
-
-            <div className="relative flex w-full mt-4">
-                {/* LINE AND DOTS */}
-                <div className="absolute w-[104%] top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 -rotate-16">
-                    <hr className="border-t-4 border-white rounded-full w-full absolute top-2" />
-                    {[-0.2, 25, 50, 75, 99.8].map((percent, idx) => (
-                        <div
-                            key={idx}
-                            className="absolute w-5 h-5 bg-white rounded-full z-20 border-2 border-black/20 top-0"
-                            style={{ left: `${percent}%`, transform: 'translateX(-50%)' }}
-                        />
-                    ))}
-                </div>
-
-                {steps.map((step, i) => (
-                    <section
-                        key={i}
-                        className={`flex flex-col items-center gap-2 justify-between w-1/4 px-4 
-                                border-l-2 ${i === 3 ? 'border-r-2' : ''} ${i < 2 ? 'pb-60' : 'pt-60'} border-white/60`}
-                    >
-                        <strong className="text-4xl font-bold text-white/60">{step.number}</strong>
-                        <div className="flex flex-col justify-start h-full gap-2">
-                            <div className="flex justify-center items-center min-h-[3.5rem]">
-                                <h3 className="text-2xl font-semibold text-center line-clamp-2">{step.title}</h3>
-                            </div>
-                            <p className="font-light text-white/70">{step.description}</p>
-                        </div>
-                    </section>
-                ))}
-            </div>
-
-            <Link
-                to={user?.hasUsedFreeConsultation ? "/contact" : "/free-consultation"}
-                className="z-1 hover:shadow-white/60 transition-all duration-200 ease-in-out cursor-pointer
-                w-3/10 whitespace-nowrap py-2 bg-white text-xl text-black-text rounded-md font-semibold
-                shadow-md shadow-white/40 border-2 border-shifter/20">
-                {t("collaborationSteps.button")}
-            </Link>
-        </section>
-    );
-}
Index: ontend/src/components/CourseCard.tsx
===================================================================
--- frontend/src/components/CourseCard.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,163 +1,0 @@
-import React from "react";
-import StarFilled from "../assets/icons/StarFilled.tsx";
-import {hexToRgb} from "../utils/hexToRGB.ts";
-import {slugify} from "../utils/slug.ts";
-import {Link, useNavigate} from "react-router-dom";
-import type {CoursePreview} from "../models/javaObjects/CoursePreview.tsx";
-import HeartOutline from "../assets/icons/HeartOutline.tsx";
-import HeartFill from "../assets/icons/HeartFill.tsx";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import {toggleFavoriteCourseApi} from "../api/userApi.ts";
-import {Sparkle} from "lucide-react";
-
-
-
-function CourseCard({ card }: {card: CoursePreview}) {
-    const { accessToken, user, setUser } = useAuthContext()
-    const [isHoveredButton, setisHoveredButton] = React.useState<boolean>(false);
-    const [isHoveredHeart, setIsHoveredHeart] = React.useState<boolean>(false);
-    const bgColor = "bg-[var(--card-color)]";
-    const shadowColor = `rgba(${hexToRgb(card.color)}, 0.6)`;
-    const navigate = useNavigate();
-
-    const handleToggleFavoriteCourse = () => {
-        setUser(prevUser => {
-            if (!prevUser) {
-                navigate("/login");
-                // showInfoToast("Please log in to save favorite courses.");
-                return prevUser; // Exit early
-            }
-
-            return {
-                ...prevUser,
-                favoriteCourses: prevUser.favoriteCourses.includes(card.id)
-                    ? prevUser.favoriteCourses.filter((courseId) => courseId !== card.id)
-                    : [...prevUser.favoriteCourses, card.id]
-            };
-        });
-
-        // Only call API if user is logged in
-        if (user) {
-            toggleFavoriteCourseApi(card.id, accessToken || "")
-                .then(() => {
-                    console.log("Course favorite status toggled successfully");
-                })
-                .catch((error) => {
-                    // If the user is not logged in, revert the favorite status change
-                    setUser(prevUser => {
-                        if (!prevUser) return prevUser
-
-                        return {
-                            ...prevUser,
-                            favoriteCourses: prevUser.favoriteCourses.includes(card.id)
-                                ? prevUser.favoriteCourses.filter((courseId) => courseId !== card.id)
-                                : [...prevUser.favoriteCourses, card.id]
-                        };
-                    });
-
-                    console.error("Error toggling javaObjects favorite status:", error);
-                });
-        }
-    };
-
-    return (
-        <article
-            style={{"--card-color": card.color} as React.CSSProperties}
-            className="relative border-1 border-black/10 shadow-md shadow-black/10
-                flex flex-col w-full rounded-xl gap-4 py-4 px-4 bg-[#FFFFFF]">
-
-            {/*IMAGE*/}
-            <div className="overflow-clip rounded-md rounded-br-4xl rounded-tl-4xl">
-                <img src={card.imageUrl} alt={card.title}
-                     className="w-full h-[180px] object-cover"/>
-            </div>
-
-
-            {/*TITLE AND TOPICS LEARNED*/}
-            <div className="flex flex-col gap-2 items-start text-left justify-between h-full">
-                {/*Title*/}
-                <h3 className="font-semibold text-xl">{card.titleShort}</h3>
-
-                {/*Topics covered*/}
-                <p className="text-black/60">{
-                    card.topicsCovered.map(item =>
-                        item
-                            .toLowerCase()
-                            .replace(/_/g, " ")
-                            .replace(/\b\w/g, c => c.toUpperCase())
-                    )
-                        .join(" • ")
-                }</p>
-            </div>
-
-            {/*INFO*/}
-            <div className="flex flex-wrap gap-2 whitespace-nowrap">
-                {
-                    card.rating > 0 ? (
-                        <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
-                            <StarFilled className="w-4 h-4 text-gold"/> card.rating
-                        </div>
-                    ) : (
-                        <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
-                            <Sparkle className="w-4 h-4 text-gold"/> New
-                        </div>
-                    )
-                }
-                <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
-                    {(card.durationMinutes / 60).toFixed(1)} hours
-                </div>
-                <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
-                    {card.courseContentCount} modules
-                </div>
-                <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
-                    {card.difficulty.charAt(0) + card.difficulty.slice(1).toLowerCase()}
-                </div>
-            </div>
-
-            {/*BUTTON AND PRICE*/}
-            <div className="flex justify-between items-center mt-0">
-                <p className={`font-bold text-black/80 text-lg ${card.price == 0 && "font-normal"}`}>{card.price > 0 ? "$"+card.price : "Free"}</p>
-
-                <div className="flex items-center gap-2">
-                    <button
-                        className="cursor-pointer"
-                        onClick={handleToggleFavoriteCourse}
-                        onMouseEnter={() => setIsHoveredHeart(true)}
-                        onMouseLeave={() => setIsHoveredHeart(false)}
-                    >
-                        {
-                            user?.favoriteCourses.includes(card.id) ?
-                                <HeartFill
-                                    className="w-6 h-auto text-red"
-                                />
-                                :
-                                !isHoveredHeart ?
-                                    <HeartOutline
-                                        strokeWidth={2}
-                                        className="w-6 h-auto text-black/60"/> :
-                                    <HeartFill
-                                        className="w-6 h-auto text-red"
-                                    />
-                        }
-                    </button>
-                    <Link
-                        to={"/courses/" + `${card.id}/` + slugify(card.titleShort)}
-                        style={isHoveredButton ?
-                            {boxShadow: `0 4px 6px -1px ${shadowColor},  0 2px 4px -2px ${shadowColor}`} :
-                            {}
-                        }
-                        className={`transition-all duration-200 ease-in-out cursor-pointer
-                    px-8 py-1 ${bgColor} text-white rounded-md border-3 border-white/40 }`}
-                        onMouseEnter={() => setisHoveredButton(true)}
-                        onMouseLeave={() => setisHoveredButton(false)}
-                    >
-                        Explore
-                    </Link>
-                </div>
-            </div>
-
-        </article>
-    );
-}
-
-export default CourseCard;
Index: ontend/src/components/CourseCardLearnDashboard.tsx
===================================================================
--- frontend/src/components/CourseCardLearnDashboard.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,105 +1,0 @@
-import type {CoursePreviewEnrolled} from "../models/javaObjects/CoursePreviewEnrolled.tsx";
-import {Link} from "react-router-dom";
-import React from "react";
-import {toUrlFormat} from "../utils/toUrlFormat.ts";
-import StarFilled from "../assets/icons/StarFilled.tsx";
-import StarOutline from "../assets/icons/StarOutline.tsx";
-import ModalReviewCourse from "./ModalReviewCourse.tsx";
-import type {CoursePreview} from "../models/javaObjects/CoursePreview.tsx";
-
-function CourseCardLearnDashboard({course, markCourseAsRated}: {
-    course: CoursePreviewEnrolled | CoursePreview;
-    markCourseAsRated: (rating: number) => void;
-}) {
-    const [showReviewModal, setShowReviewModal] = React.useState<boolean>(false);
-
-    return (
-        <aside className="h-full">
-            <Link
-                style={{"--card-color": course.color} as React.CSSProperties}
-                className="hover:shadow-md transition-all duration-300 ease-in-out
-                flex flex-col gap-2 items-center col-span-1 p-2 rounded-md h-full"
-                to={
-                    "rating" in course ?
-                        `/learn/${course.id}/${toUrlFormat(course.titleShort)}` :
-                        `/courses/${course.id}//${toUrlFormat(course.titleShort)}`
-                }>
-
-                {/*IMAGE*/}
-                <div className="overflow-clip rounded-sm">
-                    <img src={course.imageUrl} alt={course.title}
-                         className="aspect-video object-cover"/>
-                </div>
-
-                {/*INFO*/}
-                <div className="flex flex-col gap-2 justify-between flex-1 text-left">
-                    <h3 className="text-md font-bold">{course.titleShort}</h3>
-
-                    <p className="text-black/60 text-sm">{
-                        course.topicsCovered.map(item =>
-                            item
-                                .toLowerCase()
-                                .replace(/_/g, " ")
-                                .replace(/\b\w/g, c => c.toUpperCase())
-                        )
-                            .join(" • ")
-                    }</p>
-                </div>
-
-                {/*PROGRESS BAR*/}
-                {
-                    "lecturesFinishedCount" in course && (
-                        <div className="flex flex-col gap-1 items-start w-full">
-                            <div className="w-full bg-gray-200 rounded-full h-0.5">
-                                <div
-                                    className="h-full rounded-full"
-                                    style={{
-                                        width: `${(course.lecturesFinishedCount / course.courseLectureCount) * 100}%`,
-                                        backgroundColor: course.color,
-                                    }}
-                                />
-                            </div>
-                            <div className="flex justify-between w-full">
-                                <p className="text-xs text-black/60">
-                                    {course.lecturesFinishedCount / course.courseLectureCount * 100}% completed
-                                </p>
-                                {
-                                    course.isFinished && (
-                                        <button
-                                            onClick={(e) => {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                setShowReviewModal(true)
-                                            }}
-                                            className="hover:bg-black/5 px-2 rounded-xs
-                                    flex gap-1 cursor-pointer"
-                                        >
-                                            {[1, 2, 3, 4, 5].map((star) => {
-                                                const courseRating = course.rating;
-                                                const StarIcon = courseRating > 0 && star <= courseRating ? StarFilled : StarOutline;
-                                                return <StarIcon key={star} className="w-2 text-yellow-400"/>;
-                                            })}
-                                        </button>
-                                    )
-                                }
-                            </div>
-                        </div>
-                    )
-                }
-            </Link>
-
-            {
-                "lecturesFinishedCount" in course && showReviewModal && (
-                    <ModalReviewCourse
-                        courseId={course.id}
-                        closeModal={() => setShowReviewModal(false)}
-                        markCourseAsRated={markCourseAsRated}
-                        isUpdate={true}
-                    />
-                )
-            }
-        </aside>
-    )
-}
-
-export default CourseCardLearnDashboard;
Index: ontend/src/components/CourseDetailsInfo.tsx
===================================================================
--- frontend/src/components/CourseDetailsInfo.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,162 +1,0 @@
-import {
-    Check,
-    ChevronDown,
-    ChevronUp,
-    ClipboardList,
-    File,
-    ListChecks,
-    Text,
-    TvMinimalPlay
-} from "lucide-react"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterArrow from "../../public/Shifter-Arrow.png";
-import {useState} from "react";
-import type {CourseDetail} from "../models/javaObjects/CourseDetail.tsx";
-
-function CourseDetailsInfo({ course }: { course: CourseDetail | null}) {
-    const [showMore, setShowMore] = useState(false);
-    const [openIndices, setOpenIndices] = useState<number[]>([]);
-
-    const snippetLength = 800;
-    const description = course?.descriptionLong || "";
-    const shortDescription = description.length > snippetLength
-        ? description.slice(0, snippetLength) + "..."
-        : description;
-
-    const toggleAccordion = (index: number) => {
-        if (openIndices.includes(index)) {
-            setOpenIndices(openIndices.filter(i => i !== index));
-        } else {
-            setOpenIndices([...openIndices, index]);
-        }
-    }
-
-    return (
-        <>
-            {/*WHAT WILL BE LEARNED*/}
-            <section className="relative flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md overflow-clip ">
-                <h2 className="text-5xl font-semibold">What you'll learn</h2>
-                <div className="grid grid-cols-2 gap-y-4 gap-x-20">
-                    {
-                        course?.whatWillBeLearned.map((learning, index) => (
-                            <div className="flex items-center gap-2" key={index}>
-                                <Check size={40} strokeWidth={1} color={"var(--color-shifter)"}/>
-                                <p className="text-xl font-normal">{learning}</p>
-                            </div>
-                        ))
-                    }
-                </div>
-            </section>
-
-            {/*COURSE CONTENT*/}
-            <section
-                className="relative flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md overflow-clip ">
-                <h2 className="text-5xl font-semibold">Course content</h2>
-                <div>
-                    {
-                        course?.courseContents.map((content, index) => {
-                            const isOpen = openIndices.includes(index);
-
-                            return (
-                                <div className={`border-1 border-black/20 ${index !== course?.courseContents.length - 1 ? "border-b-0" : ""}`}>
-                                    <div
-                                        key={index}
-                                        className="overflow-clip flex justify-between items-center px-4 py-4 bg-black/5 cursor-pointer"
-                                        onClick={() => toggleAccordion(index)}
-                                    >
-                                        <div className="flex gap-4 items-center">
-                                            <ChevronDown size={32} strokeWidth={1}
-                                                         className={`text-black ${isOpen ? "rotate-180" : "rotate-0"} transition-all duration-500 ease-in-out `}
-                                            />
-                                            <h3 className="text-2xl font-medium">{content.title}</h3>
-                                        </div>
-
-                                        <div className="flex gap-2 items-center text-black/80">
-                                            <span>{content.courseLectures.length} lectures</span>
-                                            <span>•</span>
-                                            <span>{Math.round(content.courseLectures.reduce((sum, lecture) => sum + lecture.durationMinutes, 0))}min</span>
-                                        </div>
-                                    </div>
-
-                                    { isOpen &&
-                                        (
-                                            <div className="border-t-1 border-black/20 py-4 text-black">
-                                                {content.courseLectures.map((lecture, lectureIndex) => {
-                                                    return (
-                                                        <div
-                                                            key={lectureIndex}
-                                                            className="flex justify-between px-6 py-2">
-                                                            <div className="flex items-start gap-2">
-                                                                {lecture.contentType === "VIDEO" && <TvMinimalPlay size={20} strokeWidth={1.5} className="shrink-0"/>}
-                                                                {lecture.contentType === "TEXT" && <Text size={20} strokeWidth={1.5} className="shrink-0"/>}
-                                                                {lecture.contentType === "FILE" && <File size={20} strokeWidth={1.5} className="shrink-0" />}
-                                                                {lecture.contentType === "QUIZ" && <ListChecks size={20} strokeWidth={1.5} className="shrink-0"/>}
-                                                                {lecture.contentType === "TOOL" && <ClipboardList size={20} strokeWidth={1.5} className="shrink-0"/>}
-
-                                                                <div className="flex flex-col gap-2">
-                                                                    <h4 className="font-medium">{lecture.title}</h4>
-                                                                    <p className="font-light opacity-80">{lecture.description}</p>
-                                                                </div>
-                                                            </div>
-                                                            <span>{lecture.durationMinutes}min</span>
-                                                        </div>
-                                                    )
-                                                })}
-                                            </div>
-                                        )
-                                    }
-                                </div>
-                            )
-                        })
-                    }
-                </div>
-            </section>
-
-            {/*DESCRIPTION*/}
-            <section className="flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md">
-                <h2 className="text-5xl font-semibold">Course description</h2>
-
-                <div>
-                    <div className="relative overflow-hidden">
-                        <p className="text-lg leading-loose whitespace-pre-line">
-                            {showMore ? description : shortDescription}
-                        </p>
-
-                        {/* Show the fade overlay only when text is truncated */}
-                        {!showMore && (
-                            <div
-                                className="pointer-events-none absolute bottom-0 left-0 w-full h-24
-                   bg-gradient-to-t from-white to-transparent"
-                            />
-                        )}
-                    </div>
-                    {description.length > snippetLength && (
-                        <button
-                            onClick={() => setShowMore(!showMore)}
-                            className="mt-4 underline decoration-current cursor-pointer font-bold text-shifter flex items-center
-                 gap-2 px-4 py-2 rounded-sm hover:bg-shifter/20 self-start"
-                            aria-label={showMore ? "Show less description" : "Show more description"}
-                        >
-                            {showMore ? (
-                                <>
-                                    Show less
-                                    <ChevronDown/>
-                                </>
-                            ) : (
-                                <>
-                                    Show more
-                                    <ChevronUp/>
-                                </>
-                            )}
-                        </button>
-                    )}
-                </div>
-
-            </section>
-
-        </>
-    )
-}
-
-export default CourseDetailsInfo;
Index: ontend/src/components/CoursesCarouselCourseDetails.tsx
===================================================================
--- frontend/src/components/CoursesCarouselCourseDetails.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,111 +1,0 @@
-import {useCourseStorage} from "../context/CourseStorage.ts";
-import Slider from "react-slick";
-import CourseCard from "./CourseCard.tsx";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import {useEffect} from "react";
-import {fetchRecommendedCoursesApi} from "../api/courseApi.ts";
-import CourseCardSkeleton from "./skeletons/CourseCardSkeleton.tsx";
-
-function CoursesCarouselCourseDetails({courseId}: {
-    courseId: number;
-}) {
-    const {recommendedCourses, setRecommendedCourses} = useCourseStorage();
-    const {accessToken} = useAuthContext();
-
-    useEffect(() => {
-        const fetchRecommendedCourses = async () => {
-            const stored = sessionStorage.getItem("recommendedCourses");
-            if (stored) {
-                setRecommendedCourses(JSON.parse(stored));
-                return;
-            }
-
-            fetchRecommendedCoursesApi(accessToken || "")
-                .then(data => {
-                    setRecommendedCourses(data);
-                    sessionStorage.setItem("recommendedCourses", JSON.stringify(data));
-                })
-                .catch(err => {
-                    console.error("Error fetching recommended courses:", err);
-                });
-        }
-
-        if (!recommendedCourses) {
-            fetchRecommendedCourses();
-        }
-    }, []);
-
-    return (
-        <section className="flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md">
-            <h2 className="text-5xl font-semibold">People also bought</h2>
-
-            <div className="relative mx-0 my-auto w-full p-0">
-                {
-                    recommendedCourses && recommendedCourses.filter(course => course.id !== courseId).length > 0 ? (
-                        recommendedCourses.filter(course => course.id !== courseId).length <= 3 ? (
-                            <div className="flex gap-4 justify-center items-center">
-                                {recommendedCourses
-                                    .filter(course => course.id !== courseId)
-                                    .map((course, index) => (
-                                    <div key={index} className="max-w-1/3">
-                                        <CourseCard card={course} key={index}/>
-                                    </div>
-                                ))}
-                            </div>
-                        ) : (
-                            <Slider {...settings}>
-                                {recommendedCourses
-                                    .filter(course => course.id !== courseId)
-                                    .map((course, index) => (
-                                    <div key={index}>
-                                        <CourseCard card={course}/>
-                                    </div>
-                                ))}
-                            </Slider>
-                        )
-                    ) : (
-                        <Slider {...settings}>
-                            {[...Array(4)].map((_, index) => (
-                                <div key={index}>
-                                    <CourseCardSkeleton/>
-                                </div>
-                            ))}
-                        </Slider>
-                    )}
-            </div>
-        </section>
-    )
-}
-
-
-const settings = {
-    dots: false,
-    infinite: true,
-    speed: 500,
-    slidesToShow: 3,
-    slidesToScroll: 1,
-    centerMode: true,
-    centerPadding: '0',
-    cssEase: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    responsive: [
-        {
-            breakpoint: 1024,
-            settings: {
-                slidesToShow: 1,
-                slidesToScroll: 1,
-                infinite: true,
-                dots: false
-            }
-        },
-        {
-            breakpoint: 600,
-            settings: {
-                slidesToShow: 1,
-                slidesToScroll: 1,
-                initialSlide: 1
-            }
-        }
-    ]
-};
-
-export default CoursesCarouselCourseDetails;
Index: ontend/src/components/CoursesCarouselHome.tsx
===================================================================
--- frontend/src/components/CoursesCarouselHome.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,96 +1,0 @@
-import Slider from 'react-slick';
-import CourseCard from "./CourseCard.tsx";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import 'slick-carousel/slick/slick.css';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import 'slick-carousel/slick/slick-theme.css';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import "../slick-custom.css";
-
-import { useCourseStorage } from "../context/CourseStorage.ts";
-import CourseCardSkeleton from "./skeletons/CourseCardSkeleton.tsx";
-import { useTranslation } from "react-i18next";
-
-function CoursesCarouselHome() {
-    const { recommendedCourses } = useCourseStorage();
-    const { t } = useTranslation("home");
-
-    return (
-        <section
-            className="relative flex flex-col items-center gap-between-md py-vertical-lg px-horizontal-lg overflow-clip">
-
-            {/* TEXT */}
-            <div className="text-center flex flex-col gap-4 text-black-text">
-                <h2 className="text-5xl font-semibold whitespace-nowrap" dangerouslySetInnerHTML={{ __html: t("coursesCarousel.heading") }} />
-                <p className="text-xl font-light opacity-80">{t("coursesCarousel.description")}</p>
-            </div>
-
-            {/* SLIDER / CARDS */}
-            <div className="relative mx-0 my-auto w-full p-0">
-                {recommendedCourses && recommendedCourses.length > 0 ? (
-                    recommendedCourses.length <= 3 ? (
-                        <div className="flex gap-12 justify-evenly items-center">
-                            {recommendedCourses.map((course, index) => (
-                                <div key={index} className="max-w-1/3">
-                                    <CourseCard card={course} />
-                                </div>
-                            ))}
-                        </div>
-                    ) : (
-                        <Slider {...settings}>
-                            {recommendedCourses.map((course, index) => (
-                                <div key={index}>
-                                    <CourseCard card={course} />
-                                </div>
-                            ))}
-                        </Slider>
-                    )
-                ) : (
-                    <Slider {...settings}>
-                        {[...Array(4)].map((_, index) => (
-                            <div key={index}>
-                                <CourseCardSkeleton />
-                            </div>
-                        ))}
-                    </Slider>
-                )}
-            </div>
-
-        </section>
-    );
-}
-
-const settings = {
-    dots: false,
-    infinite: true,
-    speed: 500,
-    slidesToShow: 3,
-    slidesToScroll: 1,
-    centerMode: true,
-    centerPadding: '0',
-    cssEase: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    responsive: [
-        {
-            breakpoint: 1024,
-            settings: {
-                slidesToShow: 1,
-                slidesToScroll: 1,
-                infinite: true,
-                dots: false
-            }
-        },
-        {
-            breakpoint: 600,
-            settings: {
-                slidesToShow: 1,
-                slidesToScroll: 1,
-                initialSlide: 1
-            }
-        }
-    ]
-};
-
-export default CoursesCarouselHome;
Index: ontend/src/components/CoursesFilters.tsx
===================================================================
--- frontend/src/components/CoursesFilters.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,216 +1,0 @@
-import React from "react";
-import Checkbox from "@mui/material/Checkbox";
-import {durationToQueryMapper, priceToQueryMapper} from "../utils/mapper.ts";
-import type {FilterParams} from "../models/FilterParams.tsx";
-import {useAuthContext} from "../context/AuthContext.tsx";
-
-function CoursesFilters({filters, setFilters, topics, skills}: {
-    filters: FilterParams,
-    setFilters: React.Dispatch<React.SetStateAction<FilterParams>>,
-    topics: string[] | null,
-    skills: string[] | null,
-}) {
-    const {user} = useAuthContext();
-    const duration = [
-        "< 3h",
-        "3h - 6h",
-        "6h - 10h",
-        "10h + "
-    ]
-    const difficulty = [
-        "BEGINNER",
-        "INTERMEDIATE",
-        "ADVANCED",
-        "EXPERT"
-    ]
-    const price = [
-        "Free",
-        "< $20",
-        "$20 - $50",
-        "$50+",
-    ]
-
-    const handleDifficultyChange = (filter: string) => {
-        setFilters(prevFilters => ({
-            ...prevFilters,
-            difficulty: prevFilters.difficulty?.includes(filter) ?
-                prevFilters.difficulty.filter((v: string) => v !== filter) :
-                [...(prevFilters.difficulty || []), filter]
-        }))
-    }
-
-    const handleTopicChange = (filter: string) => {
-        setFilters(prevFilters => ({
-            ...prevFilters,
-            topic: prevFilters.topic?.includes(filter) ?
-                prevFilters.topic.filter((v: string) => v !== filter) :
-                [...(prevFilters.topic || []), filter]
-        }))
-    }
-
-    const handleSkillChange = (filter: string) => {
-        setFilters(prevFilters => ({
-            ...prevFilters,
-            skill: prevFilters.skill?.includes(filter) ?
-                prevFilters.skill.filter((v: string) => v !== filter) :
-                [...(prevFilters.skill || []), filter]
-        }))
-    }
-
-    const handlePriceChange = (filter: string) => {
-        setFilters(prevFilters => ({
-            ...prevFilters,
-            price: prevFilters.price?.includes(filter) ?
-                prevFilters.price.filter((v: string) => v !== filter) :
-                [...(prevFilters.price || []), filter]
-        }))
-    }
-
-    const handleDurationChange = (filter: string) => {
-        setFilters(prevFilters => ({
-            ...prevFilters,
-            duration: prevFilters.duration?.includes(filter) ?
-                prevFilters.duration.filter((v: string) => v !== filter) :
-                [...(prevFilters.duration || []), filter]
-        }))
-    }
-
-    const handleShowOnlyFavoritesChange = () => {
-        setFilters(prevFilters => ({
-            ...prevFilters,
-            showOnlyFavoriteCourses: !prevFilters.showOnlyFavoriteCourses
-        }));
-    }
-
-    return (
-        <aside
-            className="flex flex-col gap-8 pl-8 pt-12 text-left sticky top-0 h-screen border-r-2 border-black/10">
-            <h2 className="text-2xl font-medium">Filter by</h2>
-            <div className="relative flex flex-col gap-12 pl-4 pr-2 pb-20 overflow-y-scroll scrollable">
-                {
-                    user && (
-                        <FilterSelect
-                            header={"Favorite Courses"}
-                            options={["My favorites"]}
-                            handleFilter={() => {handleShowOnlyFavoritesChange()}}
-                            selectedOptions={filters.showOnlyFavoriteCourses ? ["My favorites"] : []}
-                        />
-                    )
-                }
-                <FilterSelect
-                    header={"Price"}
-                    options={price}
-                    handleFilter={handlePriceChange}
-                    selectedOptions={filters.price || []}
-                    mapper={priceToQueryMapper}
-                />
-                <FilterSelect
-                    header={"Topics"}
-                    options={topics}
-                    handleFilter={handleTopicChange}
-                    selectedOptions={filters.topic || []}
-                />
-                <FilterSelect
-                    header={"Skills"}
-                    options={skills}
-                    handleFilter={handleSkillChange}
-                    selectedOptions={filters.skill || []}
-                />
-                <FilterSelect
-                    header={"Level"}
-                    options={difficulty}
-                    handleFilter={handleDifficultyChange}
-                    selectedOptions={filters.difficulty || []}
-                />
-                <FilterSelect
-                    header={"Duration"}
-                    options={duration}
-                    handleFilter={handleDurationChange}
-                    selectedOptions={filters.duration || []}
-                    mapper={durationToQueryMapper}
-                />
-
-            </div>
-            <div
-                className="pointer-events-none absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-white to-transparent"/>
-        </aside>
-    )
-}
-
-function FilterSelect({
-                          header,
-                          options,
-                          handleFilter,
-                          selectedOptions,
-                          mapper,
-                      }: {
-    header: string;
-    options: string[] | null;
-    handleFilter: (value: string) => void;
-    selectedOptions: string[];
-    mapper?: (option: string) => string;
-}) {
-    const [showAll, setShowAll] = React.useState(false);
-    const [searchTerm, setSearchTerm] = React.useState("");
-
-
-    // Filter options based on search term
-    const filteredOptions = options?.filter((option) =>
-        option.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-
-    // Show only first 4 unless showAll is true
-    const visibleOptions = showAll ? filteredOptions : filteredOptions?.slice(0, 4);
-
-    return (
-        <section className="flex flex-col gap-2 text-md">
-            <h3 className="font-medium">{header}</h3>
-            <form className="flex flex-col gap-0">
-                {options && options.length > 4 && (
-                    <input
-                        type="search"
-                        value={searchTerm}
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                        placeholder={`Search ${header
-                            .toLowerCase()
-                            .replace(/_/g, " ")
-                            .replace(/\b\w/g, (c) => c.toUpperCase())}`}
-                        className="hover:bg-shifter/5 hover:border-shifter hover:placeholder-black
-                        px-4 py-2 border-1 border-black/20 rounded-sm focus:outline-none focus:border-shifter mb-2
-                        "/>
-                )}
-                {visibleOptions?.map((option, index) => (
-                    <label key={index} className="flex items-center text-black whitespace-nowrap cursor-pointer w-fit">
-                        <Checkbox
-                            checked={selectedOptions.includes(mapper ? mapper(option) : option)}
-                            onChange={() => handleFilter(mapper ? mapper(option) : option)}
-                            sx={{
-                                color: "var(--color-black)",
-                                padding: 0,
-                                opacity: 0.6,
-                                marginRight: 1,
-                                "& .MuiSvgIcon-root": {fontSize: 28},
-                                "&.Mui-checked": {color: "var(--color-shifter)", opacity: 1},
-                            }}
-                        />
-                        {option
-                            .toLowerCase()
-                            .replace(/_/g, " ")
-                            .replace(/\b\w/g, (c) => c.toUpperCase())}
-                    </label>
-                ))}
-            </form>
-            {filteredOptions && filteredOptions.length > 4 && (
-                <button
-                    type="button"
-                    onClick={() => setShowAll(!showAll)}
-                    className="p-2 rounded-sm w-fit underline cursor-pointer hover:bg-shifter/10 hover:text-shifter"
-                >
-                    {showAll ? "Show less" : `Show ${filteredOptions.length - 4} more`}
-                </button>
-            )}
-        </section>
-    );
-}
-
-export default CoursesFilters;
Index: ontend/src/components/CoursesGrid.tsx
===================================================================
--- frontend/src/components/CoursesGrid.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,162 +1,0 @@
-import type {CoursePreview} from "../models/javaObjects/CoursePreview.tsx";
-import CourseCard from "./CourseCard.tsx";
-import {InputAdornment, TextField} from '@mui/material';
-import {Search} from 'lucide-react';
-import type {FilterParams} from "../models/FilterParams.tsx";
-import React from "react";
-import {X} from 'lucide-react';
-import {queryToDurationMapper, queryToPriceMapper} from "../utils/mapper.ts";
-
-function CoursesGrid({courses, setFilters, filters}: {
-    courses: CoursePreview[] | null,
-    setFilters: React.Dispatch<React.SetStateAction<FilterParams>>,
-    filters: FilterParams,
-}) {
-    const [searchText, setSearchText] = React.useState<string>("");
-    const filterPillClassName = "group hover:border-shifter hover:bg-shifter/10 hover:text-shifter " +
-        "flex items-center gap-1 border-1 border-black/40 rounded-full px-4 py-1 text-black/80 font-medium cursor-pointer"
-    const filterXClassName = "group-hover:text-shifter text-black/60"
-
-    const handleSearchFilter = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-
-        setFilters(prevFilters => ({
-            ...prevFilters,
-            search: prevFilters.search?.includes(searchText) ?
-                prevFilters.search.filter((v: string) => v !== searchText) :
-                [...(prevFilters.search || []), searchText]
-        }));
-
-        setSearchText("");
-    }
-
-
-    return (
-        <section className="flex flex-col gap-8 py-6 pb-12 w-full">
-
-            {/*SEARCH AND SORT BY*/}
-            <div className="flex justify-between items-center w-full px-12">
-                {/*Filters*/}
-                <div className="flex gap-2 flex-wrap items-center justify-start">
-                    {
-                        Object.entries(filters).map(([key, values]) => {
-                            // Favorite courses filter
-                            if (key === "showOnlyFavoriteCourses") {
-                                const boolValue = values as boolean;
-                                if (!boolValue) return null;
-                                return (
-                                    <button
-                                        onClick={() => setFilters(prev => ({
-                                            ...prev,
-                                            showOnlyFavoriteCourses: false
-                                        }))}
-                                        className={filterPillClassName}
-                                    >
-                                        My Favorites
-                                        <X size={20} className={filterXClassName}/>
-                                    </button>
-                                )
-                            }
-
-                            // Array-type filters (topics, skills, difficulties, etc.)
-                            return values.map((element: string, idx: number) => (
-                                <button
-                                    key={`${key}-${idx}`}
-                                    onClick={() => {
-                                        const updatedArray = values.filter((_: string, i: number) => i !== idx);
-                                        const typedKey = key as Exclude<keyof FilterParams, "search">;
-
-                                        setFilters(prev => {
-                                            const newParams = {...prev};
-                                            if (updatedArray.length === 0) {
-                                                delete newParams[typedKey]; // remove key if empty array
-                                            } else {
-                                                newParams[typedKey] = updatedArray; // otherwise set updated array
-                                            }
-                                            return newParams;
-                                        });
-                                    }}
-                                    className={filterPillClassName}
-                                >
-                                    {
-                                        key === "price" ?
-                                            queryToPriceMapper(element)
-                                                .replace(/_/g, " ")
-                                                .toLowerCase()
-                                                .replace(/\b\w/g, c => c.toUpperCase()) :
-                                            key === "duration" ?
-                                                queryToDurationMapper(element)
-                                                    .replace(/_/g, " ")
-                                                    .toLowerCase()
-                                                    .replace(/\b\w/g, c => c.toUpperCase()) :
-                                                element
-                                                    .replace(/_/g, " ")
-                                                    .toLowerCase()
-                                                    .replace(/\b\w/g, c => c.toUpperCase())
-                                    }
-                                    <X size={20} className={filterXClassName}/>
-                                </button>
-                            ));
-                        })
-                    }
-                </div>
-
-                {/*Search*/}
-                <form
-                    onSubmit={handleSearchFilter}
-                    className="flex justify-between w-fit">
-                    <TextField
-                        size="small"
-                        type="search"
-                        placeholder="Search..."
-                        variant="outlined"
-                        value={searchText}
-                        onChange={e => setSearchText(e.target.value)}
-                        fullWidth
-                        InputProps={{
-                            startAdornment: (
-                                <InputAdornment position="start">
-                                    <Search size={20}/>
-                                </InputAdornment>
-                            )
-                        }}
-                        sx={{
-                            "& .MuiOutlinedInput-root": {
-                                "& fieldset": {
-                                    borderColor: "gray",
-                                },
-                                "&:hover fieldset": {
-                                    borderColor: "black",
-                                },
-                                "&.Mui-focused fieldset": {
-                                    borderColor: "var(--color-shifter)",
-                                },
-                            },
-                        }}
-                    />
-                    <button
-                        type={"submit"}
-                        className="hover:shadow-sm hover:shadow-shifter transition-all duration-200 ease-in-out
-                        ml-4 px-8 bg-shifter text-white rounded-sm border-2 border-white/40 cursor-pointer
-                    ">Discover
-                    </button>
-                </form>
-            </div>
-
-            {/*COURSES GRID*/}
-            <div className="relative grid grid-cols-3 gap-x-4 gap-y-4 w-full h-fit px-12">
-                {
-                    courses && courses?.length > 0 ?
-                        courses.map((course, index) => {
-                            return (
-                                <CourseCard card={course} key={index}/>
-                            )
-                        }) :
-                        <span className="text-3xl font-normal text-black/60 pl-20 py-8 text-left col-span-full">No results found</span>
-                }
-            </div>
-        </section>
-    )
-}
-
-export default CoursesGrid;
Index: ontend/src/components/GoogleLoginButton.tsx
===================================================================
--- frontend/src/components/GoogleLoginButton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,22 +1,0 @@
-
-export default function GoogleLoginButton({text = "Sign in with Google"}) {
-    const handleLogin = () => {
-        // Redirect to backend OAuth2 login
-        window.location.href = "http://localhost:8080/oauth2/authorization/google";
-    };
-
-    return (
-        <button
-            onClick={handleLogin}
-            className="cursor-pointer flex items-center justify-center w-full max-w-sm px-4 py-2 border
-            border-gray-300 rounded shadow-sm bg-white hover:bg-gray-100 transition duration-200"
-        >
-            <img
-                src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
-                alt="Google logo"
-                className="w-6 h-6 mr-3"
-            />
-            <span className="text-gray-700 font-medium">{text}</span>
-        </button>
-    );
-}
Index: ontend/src/components/HeroAbout.tsx
===================================================================
--- frontend/src/components/HeroAbout.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,52 +1,0 @@
-import { ArrowRight } from "lucide-react";
-import { Link } from "react-router-dom";
-import CountUp from "react-countup";
-
-function HeroAbout() {
-    return (
-        <section className="grid grid-cols-2 gap-x-20 px-horizontal-md py-vertical-lg pt-top-nav-md rounded-3xl bg-dark-blue/5
-                shadow-md shadow-black/20">
-
-            <div className="col-start-1 col-span-1 flex flex-col text-left gap-12
-                text-black-text">
-                <div className="flex flex-col gap-4 w-full">
-                    <h1 className=" text-5xl font-medium">About <span className="text-shifter font-black">Shifter</span></h1>
-                    <p>
-                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-                        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
-                        and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
-                        leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
-                        with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-                        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    </p>
-                    <Link to={"/free-consultation"}
-                        className="flex gap-4 items-center text-white bg-shifter px-8 py-2 w-fit rounded-sm">
-                        Schedule a Free Consultation
-                        <ArrowRight size={20} strokeWidth={1.5} />
-                    </Link>
-                </div>
-
-                <hr className="border-t-2 border-black/20 w-full" />
-
-                <div className="flex justify-between w-full">
-                    <div>
-                        <h2 className="text-4xl font-bold"><CountUp start={0} end={250} duration={4} separator={"."}  />+</h2>
-                        <p className="font-light whitespace-nowrap">Clients Empowered</p>
-                    </div>
-                    <div>
-                        <h2 className="text-4xl font-bold"><CountUp start={0} end={2000} duration={4} separator={"."}  />+</h2>
-                        <p className="font-light whitespace-nowrap">Mentoring Hours</p>
-                    </div>
-                    <div>
-                        <h2 className="text-4xl font-bold"><CountUp start={0} end={4} duration={4} separator={"."}  />+</h2>
-                        <p className="font-light whitespace-nowrap">Years of Shifter</p>
-                    </div>
-                </div>
-            </div>
-
-            <div className="col-start-2 col-span-1 h-full bg-black/20 rounded-2xl"/>
-        </section>
-    )
-}
-
-export default HeroAbout;
Index: ontend/src/components/HeroCourseDetails.tsx
===================================================================
--- frontend/src/components/HeroCourseDetails.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,111 +1,0 @@
-import type {CourseDetail} from "../models/javaObjects/CourseDetail.tsx";
-import React from "react";
-import {useCourseStorage} from "../context/CourseStorage.ts";
-import { Link } from "react-router-dom";
-import {toUrlFormat} from "../utils/toUrlFormat.ts";
-
-function HeroCourseDetails({course, enrollUser}: { course: CourseDetail | null, enrollUser: () => Promise<void> }) {
-    const [isLoading, setIsLoading] = React.useState<boolean>(false);
-    const {enrollments} = useCourseStorage();
-    const tripleInfo = [
-        {
-            header: `${course?.courseContents && course.courseContents.length} Modules Total`,
-            description: course?.descriptionShort
-        },
-        {
-            header: `${course?.durationMinutes && (course.durationMinutes / 60).toFixed(1)} Hours Duration`,
-            description: 'Learn at your own pace with flexible timing, plus optional exercises and helpful templates.'
-        },
-        {
-            header: course?.ratingCount && course.ratingCount > 10
-                ? `${(course.rating || 0) / course.ratingCount} Rating`
-                : `New & Trending`,
-            description: course?.ratingCount && course.ratingCount > 10
-                ? 'Rated highly by learners for its practical insights and actionable strategies.'
-                : 'New to the platform, this javaObjects is growing quickly. Be among the first learners to benefit from its insights.'
-        }
-        ,
-    ]
-
-    const bgColor = "bg-[var(--card-color)]";
-
-    return (
-        <div
-            style={{"--card-color": course?.color} as React.CSSProperties}
-            className={`py-4 bg-shifter`}>
-            {/*HEADER AND DESCRIPTION*/}
-            <section
-                className="flex flex-col items-center gap-8 bg-white mx-6 px-horizontal-lg pb-12 pt-40 rounded-xl shadow-lg shadow-black/20 text-black-text">
-                <h1 className="text-5xl font-semibold">{course?.title}</h1>
-                <p>{course?.description}</p>
-                {
-                    enrollments && enrollments.some(enrollment => enrollment.courseId === course?.id) ?
-                        <div
-                            className="flex mt-12 gap-4 items-center bg-gray/60 backdrop-blur-lg border-3 border-black/5 px-2 py-1 w-fit rounded-full">
-
-                            {
-                                isLoading ? (
-                                    <div className="w-8 loader"></div>
-                                ) : (
-                                    <Link
-                                        to={`/learn/${course?.id}/${toUrlFormat(course?.titleShort || "")}`}
-                                        className={`
-                                            bg-shifter
-                                            hover:shadow-lg hover:shadow-deep-green/50 transition-all duration-300 ease-in-out cursor-pointer
-                                            shadow-md shadow-deep-green/30 text-white font-medium text-xl border-3 border-white/50 rounded-full px-14 py-2
-                                        `}
-                                    >Go To Course</Link>
-                                )
-                            }
-                        </div>
-                        :
-                        <div
-                            className="flex mt-12 gap-4 items-center bg-gray/60 backdrop-blur-lg border-3 border-black/5 px-2 py-1 w-fit rounded-full">
-                            <span className="font-semibold text-xl px-8">
-                                {course?.price && course.price > 0 ? `$${course?.price}` : 'Free'}
-                            </span>
-                            {
-                                isLoading ? (
-                                    <div className="w-8 loader"></div>
-                                ) : (
-                                    <button className={`
-                                                bg-shifter
-                                                hover:shadow-lg hover:shadow-deep-green/50 transition-all duration-300 ease-in-out cursor-pointer
-                                                shadow-md shadow-deep-green/30 text-white font-medium text-xl border-3 border-white/50 rounded-full px-14 py-2
-                                            `}
-                                            onClick={() => {
-                                                setIsLoading(true)
-                                                enrollUser()
-                                                    .catch((error) => {
-                                                        console.error("Error enrolling user in javaObjects:", error);
-                                                    })
-                                                    .finally(() => {
-                                                        setIsLoading(false)
-                                                    })
-                                            }}
-                                    >Enroll Now</button>
-                                )
-                            }
-                        </div>
-                }
-            </section>
-
-            {/*TRIPLE INFO*/}
-            <section className="flex text-white px-12 py-4">
-                {
-                    tripleInfo.map((info, index) => (
-                        <div
-                            key={index}
-                            className="w-1/3 flex flex-col gap-4 text-left px-20 py-8 border-r-2 border-white/40 last:border-r-0"
-                        >
-                            <h2 className="text-3xl font-bold">{info.header}</h2>
-                            <p className="text-md font-light opacity-90">{info.description}</p>
-                        </div>
-                    ))
-                }
-            </section>
-        </div>
-    )
-}
-
-export default HeroCourseDetails;
Index: ontend/src/components/HeroHome.tsx
===================================================================
--- frontend/src/components/HeroHome.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,76 +1,0 @@
-
-import {Link} from 'react-router-dom';
-import Silk from "../assets/animations/Silk.tsx";
-import CountUp from "react-countup";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import {useTranslation} from "react-i18next";
-
-function HeroHome() {
-    const {user} = useAuthContext()
-    const { t } = useTranslation("home");
-
-    return (
-        <section className="relative ">
-
-            <div className="relative flex flex-col items-center gap-0 rounded-4xl shadow-lg shadow-black/20
-             overflow-clip py-top-nav-lg">
-                <Silk
-                    className="absolute inset-0 opacity-90"
-                    speed={8}
-                    scale={1}
-                    color="#008CC2"
-                    noiseIntensity={1}
-                    rotation={0}
-                />
-
-                <div className="flex flex-col gap-12 justify-center items-center z-1">
-                    <div className="flex flex-col gap-6 items-center justify-center">
-                        <div className="border-1 border-white/40
-                        bg-black/10 rounded-full py-1 px-8 font-medium text-sm text-white shadow-sm">
-                            {t("hero.label")}
-                        </div>
-                        <h1 className="text-7xl font-semibold text-white max-w-3/4">
-                            {t("hero.title")}
-                        </h1>
-                        <p className="text-xl font-light text-white max-w-3/4">
-                            {t("hero.description")}
-                        </p>
-                    </div>
-                    <Link
-                        to={user?.hasUsedFreeConsultation ? "/contact" : "/free-consultation"}
-                        className="hover:shadow-white/60 transition-all duration-200 ease-in-out cursor-pointer
-                        rounded-full text-black/90 px-12 py-3 bg-white font-bold border-2 border-black/20
-                        w-fit shadow-md shadow-white/40">
-                        {user?.hasUsedFreeConsultation ?
-                            t("hero.cta.contact") :
-                            t("hero.cta.freeConsultation")
-                        }
-                    </Link>
-                </div>
-            </div>
-
-            <div className="absolute bottom-0 translate-y-1/2 left-1/2 translate-x-[-50%] border-2 border-black/10
-                 flex justify-between bg-black/40 backdrop-blur-md w-9/10 py-6 px-24 rounded-lg">
-                <div className="text-white">
-                    <h3 className="text-4xl font-bold"><CountUp start={0} end={Number(t("hero.stats.businessesEmpowered.value"))} duration={4} separator={"."}  />+</h3>
-                    <p className="font-light whitespace-nowrap">{t("hero.stats.businessesEmpowered.label")}</p>
-                </div>
-                <div className="text-white">
-                    <h3 className="text-4xl font-bold"><CountUp start={0} end={Number(t("hero.stats.mentoringHours.value"))} duration={4} separator={"."}  />+</h3>
-                    <p className="font-light whitespace-nowrap">{t("hero.stats.mentoringHours.label")}</p>
-                </div>
-                <div className="text-white">
-                    <h3 className="text-4xl font-bold"><CountUp start={0} end={Number(t("hero.stats.yearsOfShifter.value"))} duration={4} separator={"."}  />+</h3>
-                    <p className="font-light whitespace-nowrap">{t("hero.stats.yearsOfShifter.label")}</p>
-                </div>
-                {/*<div className="text-white">*/}
-                {/*    <h3 className="text-4xl font-bold"><CountUp start={0} end={10} duration={4} separator={"."}  />+</h3>*/}
-                {/*    /!*<p className="font-light whitespace-nowrap">Courses & Academies Available</p>*!/*/}
-                {/*    <p className="font-light whitespace-nowrap">Growth Programs Delivered</p>*/}
-                {/*</div>*/}
-            </div>
-        </section>
-    )
-}
-
-export default HeroHome
Index: ontend/src/components/ModalReviewCourse.tsx
===================================================================
--- frontend/src/components/ModalReviewCourse.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,175 +1,0 @@
-import ReactDOM from "react-dom";
-import {X} from "lucide-react";
-import {useEffect, useState} from "react";
-import StarFilled from "../assets/icons/StarFilled";
-import StarOutline from "../assets/icons/StarOutline";
-import {getReviewApi, updateReviewApi, writeReviewApi} from "../api/reviewApi.ts";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import ModalReviewCourseSkeleton from "./skeletons/ModalReviewCourseSkeleton.tsx";
-
-function ModalReviewCourse({
-                               courseId,
-                               closeModal,
-                               markCourseAsRated,
-                               isUpdate
-                           }: {
-    courseId: number;
-    closeModal: () => void;
-    markCourseAsRated: (rating: number) => void;
-    isUpdate: boolean;
-}) {
-    const {accessToken} = useAuthContext();
-    const [review, setReview] = useState({
-        rating: 0,
-        comment: "",
-    });
-    const [hovered, setHovered] = useState<number>(0);
-    const [loading, setLoading] = useState<boolean>(false);
-    const [fetchingReview, setFetchingReview] = useState<boolean>(false);
-    const [error, setError] = useState<string>("");
-
-    useEffect(() => {
-        if (!isUpdate)
-            return;
-
-        setFetchingReview(true);
-        getReviewApi(accessToken || "", courseId)
-            .then(review => {
-                setReview({rating: review.rating, comment: review.comment});
-            })
-            .catch((error) => {
-                console.error("Error fetching review:", error);
-                setError("Failed to load your review. Please try again later.");
-            })
-            .finally(() => {
-                setFetchingReview(false);
-            });
-    }, []);
-
-    const starTexts = [
-        "Select Rating",                    // default placeholder
-        "Poor – did not meet expectations", // 1 star
-        "Fair – could be better",           // 2 stars
-        "Average – okay, but room to improve", // 3 stars
-        "Good – I learned valuable things",    // 4 stars
-        "Excellent – exceeded expectations!"   // 5 stars
-    ];
-
-    const writeReview = () => {
-        if (review.rating === 0) {
-            setError("Please select a rating before submitting.");
-            return;
-        }
-
-        setLoading(true);
-        const apiCall = isUpdate ? updateReviewApi : writeReviewApi;
-        apiCall(
-            accessToken || "",
-            courseId,
-            review.rating,
-            review.comment
-        )
-            .then(() => {
-                markCourseAsRated(review.rating);
-                closeModal();
-            })
-            .catch((error) => {
-                console.error("Error writing review:", error);
-            })
-            .finally(() => {
-                setLoading(false);
-            });
-    }
-
-    if (fetchingReview)
-        return <ModalReviewCourseSkeleton closeModal={closeModal} />
-
-    return ReactDOM.createPortal(
-        <>
-            {/* Overlay */}
-            <div className="fixed inset-0 bg-gray/60 backdrop-blur-sm z-[1000]"/>
-
-            {/* Modal */}
-            <section
-                className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
-                   bg-white shadow-lg py-4 px-6 z-[1000] max-w-1/2 min-w-1/3
-                   max-h-5/6 rounded-lg flex flex-col items-center gap-6
-                   text-black-text"
-            >
-                {/* Close button */}
-                <button
-                    onClick={closeModal}
-                    className="ml-auto flex justify-end cursor-pointer p-2 hover:bg-shifter/20 rounded-sm"
-                >
-                    <X size={24} strokeWidth={1.5}/>
-                </button>
-
-                <h2 className="text-2xl font-bold ">
-                    How Was Your Learning Experience?
-                </h2>
-
-                {/* STARS */}
-                <div className="flex flex-col gap-2 items-center">
-                    <div className="flex gap-4"
-                         onMouseLeave={() => setHovered(0)}
-                    >
-                        {[1, 2, 3, 4, 5].map((star) => {
-                            const filled = hovered ? star <= hovered : star <= review.rating;
-                            const StarIcon = filled ? StarFilled : StarOutline;
-
-                            return (
-                                <div
-                                    key={star}
-                                    onMouseEnter={() => setHovered(star)}
-                                    onClick={() =>
-                                        setReview({...review, rating: star})
-                                    }
-                                    className={`cursor-pointer transition-colors duration-150`}
-                                >
-                                    <StarIcon className="w-8 text-gold"/>
-                                </div>
-                            );
-                        })}
-                    </div>
-
-                    <span className="text-md">
-                        {hovered ? starTexts[hovered] : starTexts[review.rating]}
-                    </span>
-                </div>
-
-                <div className="w-full flex flex-col gap-1">
-                    <textarea
-                        className="focus:outline-none focus:border-shifter resize-none
-                        w-full border border-black/40 rounded-sm px-4 py-2"
-                        onChange={(e) =>
-                            setReview({...review, comment: e.target.value})
-                        }
-                        value={review.comment}
-                        placeholder="Share your thoughts about this course..."
-                        rows={4}
-                    />
-                    <span className="font-normal text-black/60 text-xs"><sup>*</sup>optional</span>
-                </div>
-
-                <div className="flex gap-6 mr-auto">
-                    <button
-                        onClick={writeReview}
-                        type="button"
-                        className="hover:shadow-md hover:shadow-shifter/40 shadow-sm shadow-shifter/20 transition-all duration-300 ease-in-out
-                    border-2 border-white/40 px-12 py-2 bg-shifter text-white cursor-pointer rounded-sm w-fit"
-                    >
-                        {loading ? "Submitting..." : "Submit Review"}
-                    </button>
-                    {loading && <div className="loader h-full"/>}
-                </div>
-
-                {error && (
-                    <p className="text-md text-red">{error}</p>
-                )}
-            </section>
-        </>,
-        document.getElementById("portal")!
-    );
-}
-
-export default ModalReviewCourse;
Index: ontend/src/components/NavbarLink.tsx
===================================================================
--- frontend/src/components/NavbarLink.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,12 +1,0 @@
-import {Link} from "react-router-dom";
-
-const NavbarLink = ({to, label, className, classNameLine}: { to: string; label: string, className?: string; classNameLine?: string; }) => (
-    <div className={`flex flex-col gap-0 overflow-clip group w-fit ${className}`}>
-        <Link to={to} className="transition-all duration-300 ease-in-out z-10">
-            {label}
-        </Link>
-        <hr className={`relative -translate-x-60 group-hover:-translate-x-1/4 border-t-2 rounded-full transition-all duration-300 ease-in-out ${classNameLine}`}/>
-    </div>
-);
-
-export default NavbarLink;
Index: ontend/src/components/OurServices.tsx
===================================================================
--- frontend/src/components/OurServices.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,68 +1,0 @@
-import { ArrowBigUpDash, BookOpen, GraduationCap, Handshake } from "lucide-react";
-import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-function OurServices() {
-    const { t } = useTranslation("home"); // assuming this JSON is in home.json
-
-    const cardContent = [
-        {
-            icon: Handshake,
-            path: "ourServices.cards.0"
-        },
-        {
-            icon: BookOpen,
-            path: "ourServices.cards.1"
-        },
-        {
-            icon: ArrowBigUpDash,
-            path: "ourServices.cards.2"
-        },
-        {
-            icon: GraduationCap,
-            path: "ourServices.cards.3"
-        }
-    ];
-
-    return (
-        <section className="grid grid-cols-3 gap-20 justify-between py-vertical-sm pt-top-nav-lg px-horizontal-md">
-
-            {/* TEXT */}
-            <div className="col-span-1 col-start-1 flex flex-col gap-6 text-black-text text-left w-full">
-                <h2 className="text-5xl font-bold">{t("ourServices.heading")}</h2>
-                <p className="text-xl font-light opacity-80">{t("ourServices.description")}</p>
-            </div>
-
-            {/* CARDS */}
-            <div className="col-span-2 col-start-2 grid grid-cols-2 grid-rows-2 gap-8">
-                {cardContent.map((card, index) => {
-                    const CardIcon = card.icon;
-                    return (
-                        <div
-                            key={index}
-                            className={`shadow-md shadow-black/20
-                            ${index === 0 ? "bg-shifter/100 -rotate-3" : "bg-black/10"}
-                            ${index === 0 ? "text-white" : "text-black-text"}
-                            flex flex-col gap-8 items-start text-left border-2 border-white/40 rounded-2xl p-8`}
-                        >
-                            <CardIcon
-                                size={40}
-                                strokeWidth={1.5}
-                                color={index === 0 ? "var(--color-white)" : "var(--color-black-text)"}
-                            />
-                            <div className="flex flex-col gap-2 justify-between">
-                                <h2 className="text-2xl font-bold">{t(`${card.path}.title`)}</h2>
-                                <p className="text-lg font-light">{t(`${card.path}.description`)}</p>
-                                <Link to={t(`${card.path}.link`)} className="underline mt-4">
-                                    {t("ourServices.discoverMore")}
-                                </Link>
-                            </div>
-                        </div>
-                    );
-                })}
-            </div>
-        </section>
-    );
-}
-
-export default OurServices;
Index: ontend/src/components/ProfileInfo.tsx
===================================================================
--- frontend/src/components/ProfileInfo.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,30 +1,0 @@
-import {useAuthContext} from "../context/AuthContext.tsx";
-
-function ProfileInfo() {
-    const {user} = useAuthContext();
-
-    return (
-        <section className="shadow-md border-1 border-dark-blue/10 flex flex-col gap-6 items-center justify-center bg-white w-full rounded-xl p-8 ">
-
-            <div
-                className="border-3 border-white/40
-                rounded-full bg-black/60 w-1/2 aspect-square flex items-center justify-center text-white text-4xl font-bold"
-            >
-                {user?.name
-                    ?.split(/[\s_]+/)
-                    .map(word => word[0]?.toUpperCase())
-                    .join('')
-                }
-            </div>
-
-            <div className="flex flex-col gap-2">
-                <p className="text-3xl font-semibold">{user?.name}</p>
-                <p className="text-xl font-light">{user?.email}</p>
-            </div>
-
-
-        </section>
-    )
-}
-
-export default ProfileInfo;
Index: ontend/src/components/ProfileModalAddSkills&Interests.tsx
===================================================================
--- frontend/src/components/ProfileModalAddSkills&Interests.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,188 +1,0 @@
-import ReactDom from "react-dom";
-import {toEnumFormat} from "../utils/toEnumFormat.ts";
-import React, {useEffect} from "react";
-import {fetchCoursesSkillsApi, fetchCoursesTopicsApi, fetchRecommendedCoursesApi} from "../api/courseApi.ts";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import {X} from "lucide-react";
-import ProfileModalAddSkillsInterestsSkeleton from "./skeletons/ProfileModalAddSkills&InterestsSkeleton.tsx";
-import {updateUserDesiredSkillsApi, updateUserInterestsApi} from "../api/userApi.ts";
-import {useCourseStorage} from "../context/CourseStorage.ts";
-
-function ProfileModalAddSkillsInterests({type, label, closeModal}: {
-    type: "desiredSkills" | "interests";
-    label: string;
-    closeModal: () => void;
-}) {
-    const {user, setUser, accessToken} = useAuthContext();
-    const {setRecommendedCourses} = useCourseStorage();
-    const [allOptions, setAllOptions] = React.useState<string[]>([]);
-    const [options, setOptions] = React.useState<string[]>([]);
-    const [selected, setSelected] = React.useState<string[]>(user![type] || []);
-    const [filterText, setFilterText] = React.useState("");
-    const [loading, setLoading] = React.useState(false);
-    const [componentRenderLoading, setComponentRenderLoading] = React.useState(true);
-    const [error, setError] = React.useState<string | null>(null);
-
-    useEffect(() => {
-        if (type === "desiredSkills") {
-            fetchCoursesSkillsApi()
-                .then(skills => {
-                    setAllOptions(skills);
-                    setOptions(skills);
-                })
-                .catch(err => {
-                    console.error("Failed to fetch javaObjects skills", err);
-                })
-                .finally(() => setComponentRenderLoading(false));
-        } else if (type === "interests") {
-            fetchCoursesTopicsApi()
-                .then(topics => {
-                    setAllOptions(topics);
-                    setOptions(topics);
-                })
-                .catch(err => {
-                    console.error("Failed to fetch javaObjects topics", err);
-                })
-                .finally(() => setComponentRenderLoading(false));
-        }
-    }, []);
-
-    useEffect(() => {
-        // Disable scroll
-        document.body.classList.add("overflow-hidden");
-
-        // Cleanup: re-enable scroll when modal unmounts
-        return () => {
-            document.body.classList.remove("overflow-hidden");
-        };
-    }, []);
-
-
-    const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value;
-        setFilterText(value);
-        setOptions(allOptions.filter(option =>
-            option.toLowerCase().includes(value.toLowerCase())
-        ));
-    };
-
-    const handleOptionClick = (option: string) => {
-        setSelected((prev: string[]) => (
-            prev.includes(option)
-                ? prev.filter(item => item !== option)
-                : [...prev, option]
-        ));
-    };
-
-    const handleSubmit = () => {
-        if (selected.length === 0) {
-            setError("Help us tailor your experience — please select at least one option");
-            return;
-        }
-
-        setLoading(true)
-        const updateFn = type === "interests" ? updateUserInterestsApi : updateUserDesiredSkillsApi;
-        updateFn(selected, accessToken!)
-            .then(() => {
-                setUser(prev => ({
-                    ...prev!,
-                    [type]: selected
-                }))
-
-                fetchRecommendedCoursesApi(accessToken!)
-                    .then(courses => {
-                        setRecommendedCourses(courses);
-                    })
-                    .catch(err => {
-                        console.error("Failed to fetch recommended courses after update", err);
-                    })
-
-                closeModal();
-            })
-            .catch(err => {
-                console.error("Failed to update user interests", err);
-            })
-            .finally(() => setLoading(false));
-    }
-
-
-    if (componentRenderLoading)
-        return <ProfileModalAddSkillsInterestsSkeleton closeModal={closeModal} />;
-
-    return ReactDom.createPortal(
-        <>
-            {/*OVERFLOW*/}
-            <div className="fixed top-0 bottom-0 left-0 right-0 bg-black/70 z-1000"/>
-
-            <section className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white shadow-lg py-4 px-6 z-1000
-                     max-w-2/3 min-w-1/2 max-h-5/6 rounded-lg flex flex-col gap-8">
-                <div className="flex flex-col gap-2">
-                    <button
-                        onClick={closeModal}
-                        className="hover:bg-black/10 transition-all duration-300 ease-out ml-auto px-2 w-fit rounded-sm cursor-pointer">
-                        <X size={32} />
-                    </button>
-
-                    <div className="flex justify-between w-full flex-wrap ">
-                        <label className="text-shifter font-medium text-2xl">
-                            {label}
-                        </label>
-                        <input
-                            type={"search"}
-                            className="px-3 py-1 rounded-md border border-black/10 text-black text-md focus:outline-none focus:ring-2 focus:ring-shifter/60 transition-all"
-                            placeholder={`Search ${type === "interests" ? "interests" : "skills"}...`}
-                            value={filterText}
-                            onChange={handleFilterChange}
-                        />
-                    </div>
-                </div>
-
-                <div
-                    className="relative custom-scrollbar flex gap-2 flex-wrap w-full  items-center overflow-y-auto">
-                    {options.map((option, index) => (
-                        <button
-                            key={index}
-                            name={option}
-                            className={`${selected.includes(toEnumFormat(option)) ? "bg-shifter text-white shadow-black/20" : "bg-black/10 text-black shadow-shifter/20"} 
-                            px-4 py-1 rounded-md transition-all duration-200 ease-in-out hover:shadow-md
-                            focus:outline-none cursor-pointer whitespace-nowrap`}
-                            onClick={() => handleOptionClick(option)}
-                        >
-                            {
-                                option
-                                    .toLowerCase()
-                                    .replace(/_/g, " ")
-                                    .replace(/\b\w/g, (c) => c.toUpperCase())
-                            }
-                        </button>
-                    ))}
-                </div>
-
-                <div className="flex flex-col gap-2 items-center">
-                    {
-                        error && error.length > 0 && (
-                            <p className="text-red-500 text-center">
-                                {error}
-                            </p>
-                        )
-                    }
-                    <div className="flex items-center gap-2">
-                        <button
-                            onClick={handleSubmit}
-                            className="shadow-md shadow-shifter/30 hover:shadow-lg hover:shadow-shifter/50 transition-all duration-200 ease-in-out cursor-pointer
-                    bg-shifter px-20 py-2 w-fit text-white rounded-sm font-semibold border-2 border-white/40"
-                        >
-                            {
-                                loading ? "Submitting..." : "Submit Changes"
-                            }
-                        </button>
-                        {loading && <div className="h-full loader"></div>}
-                    </div>
-                </div>
-            </section>
-        </>,
-        document.getElementById("portal")!
-    )
-}
-
-export default ProfileModalAddSkillsInterests;
Index: ontend/src/components/ProfileMyProfile.tsx
===================================================================
--- frontend/src/components/ProfileMyProfile.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,97 +1,0 @@
-import {useAuthContext} from "../context/AuthContext.tsx";
-import React, {useState} from "react";
-import {updateUserApi} from "../api/userApi.ts";
-
-function ProfileMyProfile() {
-    const [loading, setLoading] = useState(false);
-    const {user, setUser, accessToken} = useAuthContext();
-
-    const [formData, setFormData] = useState({
-        name: user?.name || "",
-        workPosition: user?.workPosition || "",
-        companyType: user?.companyType || ""
-    });
-
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-
-        setLoading(true);
-        updateUserApi(formData, accessToken || "")
-            .then(() => {
-                console.log("User updated successfully:");
-                setUser(prev => {
-                    if (!prev) return prev;
-                    return {
-                        ...prev,
-                        name: formData.name,
-                        workPosition: formData.workPosition,
-                        companyType: formData.companyType
-                    };
-                });
-
-            })
-            .catch(error => {
-                console.error("Error updating user:", error);
-            })
-            .finally(() => {
-                setLoading(false);
-            })
-    };
-
-    return (
-        <section className="flex flex-col gap-4 items-start">
-            <h2 className="text-3xl font-semibold">My Profile</h2>
-            <form
-                onSubmit={handleSubmit}
-                className="shadow-md flex flex-col gap-6 px-24 py-6 border-1 border-dark-blue/10 bg-white rounded-lg w-full ">
-                <Input name={"name"} value={formData.name} func={setFormData} />
-                <Input name={"workPosition"} value={formData.workPosition} func={setFormData} />
-                <select
-                    className="hover:border-1 hover:border-shifter focus:outline-none focus:border-2 focus:border-shifter
-                border-1 border-black/40 rounded-sm py-2 px-4 text-lg text-black w-full cursor-pointer"
-                    name={"companyType"} value={formData.companyType}
-                    onChange={e => setFormData(prev => ({...prev, companyType: e.target.value}))}
-                >
-                    <option value="FREELANCE">Freelance</option>
-                    <option value="STARTUP">Start Up</option>
-                    <option value="SME">SME</option>
-                    <option value="MID_MARKET">Mid Market</option>
-                    <option value="ENTERPRISE">Enterprise</option>
-                    <option value="OTHER">Other</option>
-                </select>
-                <div className="flex gap-4 items-center">
-                    <button
-                        className="shadow-md shadow-shifter/30 hover:shadow-lg hover:shadow-shifter/50 transition-all duration-200 ease-in-out cursor-pointer
-                        bg-shifter px-12 py-2 w-fit text-white rounded-sm font-semibold border-2 border-white/40"
-                        type="submit">
-                        {loading ? "Saving..." : "Save Changes"}
-                    </button>
-                    {
-                        loading && (
-                            <div className="h-full loader"></div>
-                        )
-                    }
-                </div>
-            </form>
-        </section>
-    )
-}
-
-function Input({name, value, func}: {
-    name: string;
-    value: string;
-    func: React.Dispatch<React.SetStateAction<{ name: string; workPosition: string; companyType: string; }>>;
-}) {
-
-    return (
-        <input
-            className="hover:border-1 hover:border-shifter focus:outline-none focus:border-2 focus:border-shifter
-                border-1 border-black/40 rounded-sm py-2 px-4 text-lg text-black w-full"
-            value={value}
-            onChange={e => func(prev => ({...prev, [name]: e.target.value}))}
-            name={name}
-        />
-    )
-}
-
-export default ProfileMyProfile;
Index: ontend/src/components/ProfileSkills&Interests.tsx
===================================================================
--- frontend/src/components/ProfileSkills&Interests.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,58 +1,0 @@
-import React from "react";
-import {Plus} from "lucide-react";
-
-function ProfileSkillsInterests({ title, pills, openModal }: {
-    title: string;
-    pills: string[];
-    openModal?: () => void;
-}) {
-    const [showAll, setShowAll] = React.useState(false);
-
-    const visiblePills = showAll ? pills : pills.slice(0, 4); // Show 6 by default
-
-    return (
-        <section className="flex flex-col gap-2 items-start w-full rounded-xl">
-            <div className="flex justify-between items-center w-full">
-                <h2 className="text-2xl font-semibold">{title}</h2>
-                {
-                    openModal && (
-                        <button
-                            onClick={openModal}
-                            className="hover:bg-shifter/20 px-2 rounded-sm transition-all duration-300 ease-out
-                            cursor-pointer text-shifter"
-                        >
-                            <Plus size={24} />
-                        </button>
-                    )
-                }
-            </div>
-            <div className="shadow-md flex gap-2 w-full flex-wrap border-1 border-dark-blue/10 bg-white rounded-lg p-4">
-                {
-                    visiblePills.map((pill, index) => (
-                        <span
-                            key={index}
-                            className="font-medium text-white px-4 py-1 bg-shifter/60 border-2 border-white/40 rounded-md"
-                        >
-                            {pill
-                                .toLowerCase()
-                                .replace(/_/g, " ")
-                                .replace(/\b\w/g, char => char.toUpperCase())
-                            }
-                        </span>
-                    ))
-                }
-
-                {pills.length > 4 && (
-                    <button
-                        onClick={() => setShowAll(prev => !prev)}
-                        className="p-2 rounded-sm underline hover:bg-shifter/10 hover:text-shifter cursor-pointer"
-                    >
-                        {showAll ? "Show less" : `Show ${pills.length - 4} more`}
-                    </button>
-                )}
-            </div>
-        </section>
-    );
-}
-
-export default ProfileSkillsInterests;
Index: ontend/src/components/RoadmapAI.tsx
===================================================================
--- frontend/src/components/RoadmapAI.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,89 +1,0 @@
-import RoadmapInput from "./RoadmapInput.tsx";
-import ShifterArrow from "../../public/Shifter-Arrow.png";
-
-function RoadmapAI() {
-    const roadmapData = [
-        {
-            title: "Define The Challenge",
-            description: "What is your biggest business challenge? (e.g., marketing, scaling, sales, operations, leadership, etc.)",
-            textColor: "text-deep-green",
-            bgColor: "bg-deep-green/80",
-            bgColorPale: "bg-deep-green/40",
-        },
-        {
-            title: "Set Clear Goals",
-            description: "What do you want to achieve? (e.g., increase revenue, build a team, launch a product, improve strategy, etc.)",
-            textColor: "text-shifter",
-            bgColor: "bg-shifter/80",
-            bgColorPale: "bg-shifter/40",
-        },
-        {
-            title: "Assess Experience",
-            description: "Where are you in your journey? (e.g., startup, growing business, established business, corporate level, etc.)",
-            textColor: "text-teal",
-            bgColor: "bg-teal/80",
-            bgColorPale: "bg-teal/40",
-        },
-        {
-            title: "Pick a Learning Style",
-            description: "How do you prefer to learn? (e.g., one-on-one mentoring, group coaching, self-paced courses, workshops, etc.)",
-            textColor: "text-dark-blue",
-            bgColor: "bg-dark-blue/80",
-            bgColorPale: "bg-dark-blue/40",
-        },
-    ]
-
-
-    return (
-        <section className="relative overflow-clip px-horizontal-md py-vertical-md flex flex-col items-center text-black gap-12">
-            <img src={ShifterArrow} alt="Shifter Arrow"
-                 className="absolute opacity-10 h-180 w-130 rotate-45 -top-20 right-30"/>
-            <img src={ShifterArrow} alt="Shifter Arrow"
-                 className="absolute opacity-10 h-180 w-130 -rotate-135 -bottom-20 left-30"/>
-
-            {/*HEADER*/}
-            <div className="flex flex-col gap-2">
-                <h2 className="text-5xl">AI-Powered Roadmap</h2>
-                <p className="font-light text-xl">Answer 4 questions, and let AI guide you with a personalized plan to
-                    achieve your goals</p>
-            </div>
-
-            {/*INPUTS*/}
-            <div className="grid grid-cols-[1fr_60px_1fr] w-full">
-                <div
-                    className="col-start-2 col-span-1 row-start-1 row-span-4 bg-black/10 rounded-full justify-self-center w-1"
-                />
-
-                {
-                    roadmapData.map((data, idx) => {
-                        return (
-                            <>
-                                <div
-                                    className={`col-start-2 row-start-${idx + 1} w-8 aspect-square place-self-center rounded-full overflow-clip bg-white `}>
-                                    <div className={`w-full h-full ${data.bgColorPale}`}/>
-                                </div>
-
-                                <RoadmapInput
-                                    key={idx}
-                                    title={data.title}
-                                    description={data.description}
-                                    textColor={data.textColor}
-                                    bgColor={data.bgColor}
-                                    index={idx}
-                                    isLeft={idx % 2 === 0}
-                                />
-                            </>
-                        )
-                    })
-                }
-            </div>
-
-            <button className="hover:shadow-shifter/40 hover:shadow-lg transition-all duration-300 ease-in-out cursor-pointer
-                px-40 py-2 bg-shifter border-3 border-white/40 rounded-md w-fit text-white text-xl font-semibold shadow-lg shadow-shifter/20
-                ">Generate roadmap
-            </button>
-        </section>
-    );
-}
-
-export default RoadmapAI
Index: ontend/src/components/RoadmapInput.tsx
===================================================================
--- frontend/src/components/RoadmapInput.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,77 +1,0 @@
-import {useRef} from "react";
-
-interface RoadmapInputProps {
-    title: string;
-    description: string;
-    textColor: string;
-    bgColor: string;
-    isLeft: boolean;
-    index: number;
-}
-
-
-function RoadmapInput({ title, description, textColor, bgColor, isLeft, index }: RoadmapInputProps) {
-    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
-
-    const handleInput = () => {
-        const el = textareaRef.current;
-        if (el) {
-            el.style.height = 'auto';
-            el.style.height = `${el.scrollHeight}px`;
-        }
-    };
-
-    return (
-        <div
-            className={`${
-                index % 2 === 0 ? 'col-start-1 col-span-1' : 'col-start-3 col-span-1'
-            }
-            ${
-                index === 0 ? 'row-start-1' : 
-                    index === 1 ? 'row-start-2' :
-                    index === 2 ? 'row-start-3' :
-                    index === 3 ? 'row-start-4' : ''
-            }
-            ${isLeft ? 'pl-4' : 'pr-4'}
-            overflow-clip flex gap-16 bg-[#FFF] border-3 border-black/20 rounded-xl h-fit z-10`}>
-            {/*LEFT CIRCLE*/}
-            {
-                !isLeft && <Circle bgColor={bgColor} isLeft={isLeft}/>
-            }
-
-            {/*TEXT AND INPUT*/}
-            <div className="flex flex-col gap-10 py-4 max-w-xl h-fit">
-                <div className="flex flex-col gap-4 text-start">
-                    <h3 className={`${textColor} text-3xl font-semibold`}>{title}</h3>
-                    <hr className="border-t-2 border-black border-gray"/>
-                    <p>{description}</p>
-                </div>
-                <textarea
-                    ref={textareaRef}
-                    rows={1}
-                    placeholder="Type your answer here..."
-                    onInput={handleInput}
-                    className="bg-gray border-2 py-1 px-2 border-black/10 rounded-sm
-                    font-medium resize-none overflow-hidden min-h-fit max-h-[5rem]"
-                />
-            </div>
-
-            {/*RIGHT CIRCLE*/}
-            {
-                isLeft && <Circle bgColor={bgColor} isLeft={isLeft}/>
-            }
-        </div>
-    )
-
-}
-
-function Circle({bgColor, isLeft}: { bgColor: string, isLeft: boolean }) {
-
-    return (
-        <div className={`flex items-stretch w-2/6 ${isLeft ? 'justify-start' : 'justify-end'}`}>
-            <div className={`${bgColor} h-full aspect-square rounded-full `}></div>
-        </div>
-    )
-}
-
-export default RoadmapInput;
Index: ontend/src/components/ShifterValues.tsx
===================================================================
--- frontend/src/components/ShifterValues.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,51 +1,0 @@
-import { useTranslation } from "react-i18next";
-
-function ShifterValues() {
-    const { t } = useTranslation("home");
-
-    const values = t("shifterValues.valuesList", { returnObjects: true }) as string[];
-
-    return (
-        <section className="flex px-horizontal-md py-vertical-lg gap-20">
-            <div className="flex flex-col gap-12 w-1/2">
-                <div className="flex flex-col gap-8 text-left">
-                    <h2 className="text-5xl" dangerouslySetInnerHTML={{ __html: t("shifterValues.heading") }} />
-                    <p className="text-xl">{t("shifterValues.description")}</p>
-                </div>
-
-                <div className="flex gap-2">
-                    <div className="flex flex-col text-center gap-2 text-shifter text-5xl">
-                        {values.map((v, i) => (
-                            <strong key={i}>{v[0]}</strong>
-                        ))}
-                    </div>
-                    <div className="flex flex-col text-2xl items-start font-light">
-                        {values.map((v, i) => (
-                            <span key={i} className="h-1/5 flex items-end pb-1">{v.slice(1)}</span>
-                        ))}
-                    </div>
-                </div>
-
-                <button className="hover:shadow-shifter/40 hover:shadow-lg transition-all duration-300 ease-in-out cursor-pointer
-                    bg-shifter rounded-md border-3 border-white/40 py-2
-                    text-white text-xl shadow-md shadow-shifter/20 font-medium w-7/10"
-                >
-                    {t("shifterValues.button")}
-                </button>
-            </div>
-
-            <div className="relative w-1/2 flex items-center justify-start">
-                <div className="rounded-full bg-dark-gray/30 w-70 h-70"></div>
-                <div className="absolute left-70 top-1/5 rounded-full bg-dark-gray/30 w-35 h-35"></div>
-                <div className="absolute left-70 bottom-1/5 rounded-full bg-dark-gray/30 w-35 h-35"></div>
-                <div className="absolute right-20 top-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-dark-gray/30 w-20 h-20"></div>
-                <div className="absolute left-1/2 top-1/10 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-dark-gray/30 w-20 h-20"></div>
-                <div className="absolute left-2/5 -bottom-1/10 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-dark-gray/30 w-30 h-30"></div>
-                <div className="absolute left-1/5 bottom-4 transform -translate-x-1/2 rounded-full bg-dark-gray/30 w-20 h-20"></div>
-                <div className="absolute left-2/7 -top-2 transform -translate-x-1/2 rounded-full bg-dark-gray/30 w-30 h-30"></div>
-            </div>
-        </section>
-    );
-}
-
-export default ShifterValues;
Index: ontend/src/components/TextWithUnderline.tsx
===================================================================
--- frontend/src/components/TextWithUnderline.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,9 +1,0 @@
-
-const TextWithUnderline = ({label, className, fromRightToLeft}: { label: string, className?: string; fromRightToLeft?: boolean }) => (
-    <div className={`flex flex-col gap-0 overflow-clip p-1 group ${className}`}>
-        {label}
-        <hr className={`relative ${fromRightToLeft ? "-right-50 group-hover:-right-6" : "-left-50 group-hover:-left-6"} border-t-2 rounded-full transition-all duration-300 ease-in-out`}/>
-    </div>
-);
-
-export default TextWithUnderline;
Index: ontend/src/components/inputs/PersonalizationInput.tsx
===================================================================
--- frontend/src/components/inputs/PersonalizationInput.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,66 +1,0 @@
-import {Eye, EyeOff} from "lucide-react";
-import React from "react";
-import type { UserPersonalization } from "../../models/javaObjects/UserPersonalization.tsx";
-
-type UserStrFields = 'name' | 'workPosition' | 'companySize';
-interface InputProps {
-    placeholder: string;
-    label: string;
-    name: UserStrFields;
-    type: string;
-    id: string;
-    showPassword?: boolean;
-    setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
-    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>;
-    user: UserPersonalization;
-}
-
-function PersonalizationInput(inputProps: InputProps) {
-
-    return (
-        <div
-            className="w-full relative flex flex-col items- gap-1 px-6 py-1 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm">
-            <label
-                htmlFor={inputProps.id}
-                className="text-shifter font-medium"
-            >
-                {inputProps.label}
-            </label>
-            <div className="flex gap-2 w-full">
-                <div className="w-full">
-                    <input
-                        id={inputProps.id}
-                        type={!inputProps.name.includes("password") ? "text" : inputProps.showPassword ? "text" : "password"}
-                        name={inputProps.name}
-                        placeholder={inputProps.placeholder}
-                        className="w-full focus:outline-none text-lg"
-                        value={inputProps.user[inputProps.name] || ""}
-                        onChange={e =>
-                            inputProps.setUser((prev: UserPersonalization) => ({
-                                ...prev,
-                                [inputProps.name]: e.target.value
-                            }))
-                        }
-                    />
-                    <hr className="border-t-2 border-black/5 rounded-full w-full"/>
-                </div>
-                {inputProps.name.includes("password") && (
-                    <button
-                        type="button"
-                        onClick={() => inputProps.setShowPassword?.((prev: boolean) => !prev)}
-                        className="text-black cursor-pointer hover:bg-black/5 rounded-full p-1"
-                        aria-label={inputProps.showPassword ? "Hide password" : "Show password"}
-                    >
-                        {!inputProps.showPassword ? (
-                            <EyeOff size={20} opacity={0.6}/>
-                        ) : (
-                            <Eye size={20} opacity={0.6}/>
-                        )}
-                    </button>
-                )}
-            </div>
-        </div>
-    );
-}
-
-export default PersonalizationInput;
Index: ontend/src/components/inputs/PersonalizationSelect.tsx
===================================================================
--- frontend/src/components/inputs/PersonalizationSelect.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,46 +1,0 @@
-import type {UserPersonalization} from "../../models/javaObjects/UserPersonalization.tsx";
-import type {SelectProps} from "../../models/SelectProps.tsx";
-import {toEnumFormat} from "../../utils/toEnumFormat.ts";
-
-function PersonalizationSelect(selectProps: SelectProps) {
-
-    return (
-        <div
-            className="w-full relative flex flex-col gap-1 px-6 py-1 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm">
-            <label
-                htmlFor={selectProps.id}
-                className="text-shifter font-medium"
-            >
-                {selectProps.label}
-            </label>
-            <div className="w-full">
-                <select
-                    id={selectProps.id}
-                    name={selectProps.name}
-                    className="w-full focus:outline-none text-lg cursor-pointer"
-                    value={selectProps.user[selectProps.name] || ""}
-                    onChange={e =>
-                        selectProps.setUser((prev: UserPersonalization) => ({
-                            ...prev,
-                            [selectProps.name]: e.target.value
-                        }))
-                    }
-                >
-                    <option value="" className="text-black/10">
-                        Select an option
-                    </option>
-                    {
-                        selectProps.options?.map((option, index) => (
-                            <option key={index} value={toEnumFormat(option)}>
-                                {option}
-                            </option>
-                        ))
-                    }
-                </select>
-                <hr className="border-t-2 border-black/5 rounded-full w-full"/>
-            </div>
-        </div>
-    );
-}
-
-export default PersonalizationSelect;
Index: ontend/src/components/inputs/PersonalizationSlider.tsx
===================================================================
--- frontend/src/components/inputs/PersonalizationSlider.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,78 +1,0 @@
-import React from "react";
-import type {UserPersonalization} from "../../models/javaObjects/UserPersonalization.tsx";
-import type {SliderProps} from "../../models/SliderProps.tsx";
-
-function PersonalizationSlider(sliderProps: SliderProps) {
-    const [allOptions] = React.useState<string[]>(sliderProps.options || []);
-    const [options, setOptions] = React.useState<string[]>(allOptions);
-    const [filterText, setFilterText] = React.useState("");
-
-    const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value;
-        setFilterText(value);
-        setOptions(allOptions.filter(option =>
-            option.toLowerCase().includes(value.toLowerCase())
-        ));
-    };
-
-    const handleOptionClick = (option: string) => {
-        sliderProps.setUser((prev: UserPersonalization) => {
-            const arr = prev[sliderProps.name] as string[] || [];
-            const newArr = arr.includes(option)
-                ? arr.filter(item => item !== option)
-                : [...arr, option];
-
-            return {
-                ...prev,
-                [sliderProps.name]: newArr,
-            };
-        });
-    };
-
-    return (
-        <div className="w-full flex flex-col justify-center gap-4 px-6 py-1 items-start w-full">
-            <div className="flex justify-between w-full flex-wrap gap-2">
-                <label htmlFor={sliderProps.id} className="text-shifter font-medium text-xl">
-                    {sliderProps.label}
-                </label>
-                <input
-                    type={"search"}
-                    className="px-3 py-1 rounded-md border border-black/10 text-black text-sm focus:outline-none focus:ring-2 focus:ring-shifter/60 transition-all"
-                    placeholder="Search options..."
-                    value={filterText}
-                    onChange={handleFilterChange}
-                />
-            </div>
-
-            <div className="relative custom-scrollbar flex gap-2 flex-wrap w-full max-h-[30vh] items-center overflow-y-auto">
-                {options.map((option, index) => {
-                    const isSelected = sliderProps.user[sliderProps.name]?.includes(option) || false;
-
-                    return (
-                        <button
-                            key={index}
-                            name={sliderProps.name}
-                            id={`${sliderProps.id}-${index}`}
-                            className={`${isSelected ? "bg-shifter text-white shadow-black/20" : "bg-black/10 text-black shadow-shifter/20"} 
-                            px-4 py-1 rounded-md transition-all duration-200 ease-in-out hover:shadow-md
-                            focus:outline-none cursor-pointer whitespace-nowrap`}
-                            onClick={() => handleOptionClick(option)}
-                        >
-                            {
-                                option
-                                    .toLowerCase()
-                                    .replace(/_/g, " ")
-                                    .replace(/\b\w/g, (c) => c.toUpperCase())
-                            }
-                        </button>
-                    );
-                })}
-
-                <div
-                    className="pointer-events-none sticky bottom-0 left-0 w-full h-4 bg-gradient-to-t from-white to-transparent"></div>
-            </div>
-        </div>
-    );
-}
-
-export default PersonalizationSlider;
Index: ontend/src/components/learn/CourseContentSideNav.tsx
===================================================================
--- frontend/src/components/learn/CourseContentSideNav.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,118 +1,0 @@
-import type {CourseContentFull} from "../../models/javaObjects/CourseContentFull.tsx";
-import {useEffect, useState} from "react";
-import {ChevronDown, ClipboardList, File, ListChecks, Text, TvMinimalPlay} from "lucide-react";
-import type {CourseLectureFull} from "../../models/javaObjects/CourseLectureFull.tsx";
-import {X} from "lucide-react";
-import CircularProgress from "../../assets/CircularProgress.tsx";
-
-function CourseContentSideNav({ activeLecture, setActiveLecture, courseContents, updateLecture, closeModal, progressPercentage }: {
-    activeLecture: CourseLectureFull,
-    setActiveLecture: (lecture: CourseLectureFull) => void,
-    courseContents: CourseContentFull[] | undefined,
-    updateLecture: (progressId: number, isComplete: boolean) => void,
-    closeModal: () => void,
-    progressPercentage: number
-}) {
-    const [openContentIds, setOpenContentIds] = useState<number[]>([]);
-
-
-    const toggleAccordion = (contentId: number) => {
-        if (openContentIds.includes(contentId)) {
-            setOpenContentIds(openContentIds.filter(i => i !== contentId));
-        } else {
-            setOpenContentIds([...openContentIds, contentId]);
-        }
-    }
-
-    useEffect(() => {
-        if (!courseContents || !activeLecture) return;
-
-        const contentWithActiveLecture = courseContents.find(content =>
-            content.courseLectures.some(lec => lec.id === activeLecture.id)
-        );
-
-        if (contentWithActiveLecture) {
-            setOpenContentIds([...openContentIds, contentWithActiveLecture.id]);
-        }
-    }, [activeLecture, courseContents]);
-
-    return (
-        <aside className="sticky top-0 right-0 min-w-28/100 h-screen overflow-y-auto border-l-1 border-black/20">
-            <div className="py-4 px-4 flex items-center justify-between">
-                <div className="flex items-center gap-4">
-                    <CircularProgress
-                        percentage={progressPercentage}
-                        size={28}
-                        strokeWidth={2}
-                    />
-                    <h2 className="text-left font-bold">Course content</h2>
-                </div>
-                <button
-                    onClick={closeModal}
-                    className="hover:bg-black/10 rounded-sm cursor-pointer p-1.5">
-                    <X size={20} strokeWidth={1.5}/>
-                </button>
-            </div>
-            {
-                courseContents && courseContents.map((content, index) => {
-                    const isOpen = openContentIds.includes(content.id);
-
-                    {/*CONTENT*/}
-                    return (
-                    <div
-                        key={index}
-                        className="flex flex-col border-t-2 border-black/20">
-                        <button
-                            onClick={() => toggleAccordion(content.id)}
-                            className="py-4 px-4 bg-black/5 flex flex-col items-start gap-2 cursor-pointer">
-                            <div className="flex items-start gap-2 justify-between w-full">
-                                <h3 className="text-left font-bold">Module {index+1}: {content.title}</h3>
-                                <ChevronDown height={20}
-                                className={`${isOpen && "-rotate-180"} transition-all duration-500 ease-out`}/>
-                            </div>
-
-                            <span className="text-xs text-black text-light">
-                                {content.courseLectures.filter(lecture => lecture.userCourseProgress.completed).length} / {content.courseLectures.length} | {content.courseLectures.reduce((acc, lecture) => acc + lecture.durationMinutes, 0)}min
-                            </span>
-                        </button>
-
-                        {/*LECTURES*/}
-                        {isOpen && content.courseLectures.map((lecture, lectureIndex) => {
-                            const isActive = activeLecture.id === lecture.id;
-                            return (
-                                <button
-                                    key={lectureIndex}
-                                    onClick={() => setActiveLecture(lecture)}
-                                    className={`${isActive && "bg-dark-blue/20"}
-                                    ${!isActive && "hover:bg-dark-blue/10"} cursor-pointer
-                                    py-4 px-4 flex gap-2 items-start`}>
-                                    <input
-                                        onClick={e => e.stopPropagation()}
-                                        onChange={() => updateLecture(lecture.userCourseProgress.id, !lecture.userCourseProgress.completed)}
-                                        checked={lecture.userCourseProgress.completed}
-                                        type={"checkbox"}
-                                        className="w-4 aspect-square"
-                                    />
-
-                                    <div className="flex flex-col gap-2 text-left">
-                                        <h4 className="leading-tight text-sm">{lecture.title}</h4>
-                                        <span className={`flex items-center gap-2 text-xs ${isActive ? "opacity-100" : "opacity-60"}`}>
-                                            {lecture.contentType === "VIDEO" && <TvMinimalPlay  size={16} strokeWidth={1.5} />}
-                                            {lecture.contentType === "TEXT" && <Text size={16} strokeWidth={1.5} />}
-                                            {lecture.contentType === "FILE" && <File size={16} strokeWidth={1.5} />}
-                                            {lecture.contentType === "QUIZ" && <ListChecks size={16} strokeWidth={1.5} />}
-                                            {lecture.contentType === "TOOL" && <ClipboardList size={16} strokeWidth={1.5} />}
-                                            {lecture.durationMinutes}min
-                                        </span>
-                                    </div>
-                                </button>
-                            )
-                        })}
-                    </div>
-                )})
-            }
-        </aside>
-    )
-}
-
-export default CourseContentSideNav;
Index: ontend/src/components/registerSteps/CustomStepper.tsx
===================================================================
--- frontend/src/components/registerSteps/CustomStepper.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,81 +1,0 @@
-import {StepConnector, stepConnectorClasses, type StepIconProps, styled} from "@mui/material";
-import Check from "@mui/icons-material/Check";
-
-const CustomStepperConnector = styled(StepConnector)(() => ({
-    [`&.${stepConnectorClasses.alternativeLabel}`]: {
-        top: 10,
-        left: 'calc(-50% + 16px)',
-        right: 'calc(50% + 16px)',
-    },
-    [`&.${stepConnectorClasses.completed}`]: {
-        [`& .${stepConnectorClasses.line}`]: {
-            borderColor: 'var(--color-shifter)',
-            opacity: 0.2
-        },
-    },
-    [`&.${stepConnectorClasses.active}`]: {
-        [`& .${stepConnectorClasses.line}`]: {
-            borderColor: 'var(--color-shifter)',
-            opacity: 0.2
-        },
-    },
-    [`& .${stepConnectorClasses.line}`]: {
-        borderColor: '#BBB',
-        borderWidth: 2,
-        borderRadius: 2,
-        transition: 'border-color 0.4s ease-in-out, opacity 0.4s ease-in-out',
-    },
-}));
-const CustomStepperStepIconRoot = styled('div')<{ ownerState: { active?: boolean; completed?: boolean } }>(
-    ({ ownerState }) => ({
-        color: '#eaeaf0',
-        display: 'flex',
-        position: 'relative',       // <-- needed for absolute positioning inside
-        height: 22,
-        alignItems: 'center',
-        transition: 'color 0.3s ease-in-out',
-
-        // CHECKMARK
-        '& .CustomStepperStepIcon-completedIcon': {
-            color: 'var(--color-shifter)',
-            zIndex: 2,                // on top
-            fontSize: 30,
-            position: 'absolute',     // overlay on circle
-            opacity: ownerState.completed ? 1 : 0,
-            pointerEvents: ownerState.completed ? 'auto' : 'none',  // ignore clicks when hidden
-            transition: 'opacity 0.5s ease-in-out',
-            left: '50%',
-            top: '50%',
-            transform: ownerState.completed
-                ? 'translate(-50%, -50%) scale(1)'
-                : 'translate(-50%, -50%) scale(0.8)',
-            transitionProperty: 'opacity, transform',
-        },
-
-        // CIRCLE
-        '& .CustomStepperStepIcon-circle': {
-            width: 16,
-            height: 16,
-            borderRadius: '50%',
-            backgroundColor: ownerState.active ? 'var(--color-shifter)' : '#BBB',
-            transition: 'background-color 0.4s ease-in-out, transform 0.4s ease-in-out, opacity 0.5s ease-in-out',
-            transform: ownerState.active ? 'scale(1.2)' : 'scale(1)',
-            opacity: ownerState.completed ? 0 : 1,
-            pointerEvents: ownerState.completed ? 'none' : 'auto',  // ignore clicks when hidden
-        },
-    }),
-);
-
-function CustomStepperStepIcon(props: StepIconProps) {
-    const { active, completed, className } = props;
-
-    return (
-        <CustomStepperStepIconRoot ownerState={{ active, completed }} className={className}>
-            <Check className="CustomStepperStepIcon-completedIcon" />
-            <div className="CustomStepperStepIcon-circle" />
-        </CustomStepperStepIconRoot>
-    );
-}
-
-
-export { CustomStepperConnector, CustomStepperStepIcon };
Index: ontend/src/components/registerSteps/PersonalizationStepThree.tsx
===================================================================
--- frontend/src/components/registerSteps/PersonalizationStepThree.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,54 +1,0 @@
-import React, {useEffect} from "react";
-import type {UserPersonalization} from "../../models/javaObjects/UserPersonalization.tsx";
-import PersonalizationSlider from "../inputs/PersonalizationSlider.tsx";
-import {fetchCoursesSkillsApi} from "../../api/courseApi.ts";
-import {useTranslation} from "react-i18next";
-
-function PersonalizationStepThree({setUser, user, setError}: {
-    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>,
-    user: UserPersonalization,
-    setError: React.Dispatch<React.SetStateAction<string>>,
-}){
-    const [skills, setSkills] = React.useState<string[]>([]);
-    const { t } = useTranslation("personalize");
-
-    useEffect(() => {
-        const fetchSkills = async () => {
-            try {
-                const skillsData = await fetchCoursesSkillsApi();
-                setSkills(skillsData);
-            } catch (err) {
-                console.error("Failed to fetch skills", err);
-            }
-        };
-
-        fetchSkills();
-    }, []);
-
-    useEffect(() => {
-        if (user.desiredSkills.length === 0) {
-            setError(t("stepThree.errorNoSkill"));
-        } else {
-            setError("");
-        }
-    }, [user.desiredSkills]);
-
-    return (
-        <section
-            className="flex flex-col gap-4 w-full">
-            {
-                skills.length > 0 &&
-                <PersonalizationSlider
-                    label={t("stepThree.desiredSkills")}
-                    name={"desiredSkills"}
-                    id={"desired-skills"}
-                    options={skills}
-                    setUser={setUser}
-                    user={user}
-                />
-            }
-        </section>
-    )
-}
-
-export default PersonalizationStepThree;
Index: ontend/src/components/registerSteps/PersonalizationStepTwo.tsx
===================================================================
--- frontend/src/components/registerSteps/PersonalizationStepTwo.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,55 +1,0 @@
-import React, {useEffect} from "react";
-import type {UserPersonalization} from "../../models/javaObjects/UserPersonalization.tsx";
-import PersonalizationSlider from "../inputs/PersonalizationSlider.tsx";
-import {fetchCoursesTopicsApi} from "../../api/courseApi.ts";
-import {useTranslation} from "react-i18next";
-
-function PersonalizationStepTwo({setUser, user, setError}: {
-    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>,
-    user: UserPersonalization,
-    setError: React.Dispatch<React.SetStateAction<string>>,
-}) {
-    const [interests, setInterests] = React.useState<string[]>([]);
-    const { t } = useTranslation("personalize");
-
-    useEffect(() => {
-        const fetchCourseTopics = async () => {
-            try {
-                const topicsData = await fetchCoursesTopicsApi();
-                setInterests(topicsData);
-            } catch (err) {
-                console.error("Failed to fetch javaObjects topics (user interests)", err);
-            }
-        };
-
-        fetchCourseTopics();
-    }, []);
-
-    useEffect(() => {
-        if (user.interests.length === 0) {
-            setError(t("stepTwo.errorNoInterest"));
-        } else {
-            setError("");
-        }
-    }, [user.interests]);
-
-
-    return (
-        <section
-            className="flex flex-col gap-4 w-full items-center">
-            {
-                interests.length > 0 &&
-                <PersonalizationSlider
-                    label={t("stepTwo.interests")}
-                    name={"interests"}
-                    id={"interests"}
-                    options={interests}
-                    setUser={setUser}
-                    user={user}
-                />
-            }
-        </section>
-    )
-}
-
-export default PersonalizationStepTwo;
Index: ontend/src/components/registerSteps/PersonalizeStepOne.tsx
===================================================================
--- frontend/src/components/registerSteps/PersonalizeStepOne.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,55 +1,0 @@
-import React, {useEffect} from "react";
-import type {UserPersonalization} from "../../models/javaObjects/UserPersonalization.tsx";
-import PersonalizationInput from "../inputs/PersonalizationInput.tsx";
-import PersonalizationSelect from "../inputs/PersonalizationSelect.tsx";
-import {useTranslation} from "react-i18next";
-
-function PersonalizeStepOne({setUser, user, setError}: {
-    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>,
-    user: UserPersonalization,
-    setError: React.Dispatch<React.SetStateAction<string>>,
-}) {
-    const { t } = useTranslation("personalize");
-
-    useEffect(() => {
-        if (!user.name || !user.workPosition || !user.companySize) {
-            setError("Please ensure all inputs are completed.");
-        } else {
-            setError("");
-        }
-    }, [user.name, user.workPosition, user.companySize]);
-
-    return (
-        <section
-            className="flex flex-col gap-4 w-full items-center">
-            <PersonalizationInput
-                placeholder={t("stepOne.fullNamePlaceholder")}
-                label={t("stepOne.fullName")}
-                name={"name"}
-                type={"text"}
-                id={"full-name"}
-                setUser={setUser}
-                user={user}
-            />
-            <PersonalizationInput
-                placeholder={t("stepOne.workPositionPlaceholder")}
-                label={t("stepOne.workPosition")}
-                name={"workPosition"}
-                type={"text"}
-                id={"work-position"}
-                setUser={setUser}
-                user={user}
-            />
-            <PersonalizationSelect
-                label={t("stepOne.companySize")}
-                name={"companySize"}
-                id={"company-size"}
-                options={t("stepOne.companySizeOptions") as unknown as string[]}
-                setUser={setUser}
-                user={user}
-            />
-        </section>
-    );
-}
-
-export default PersonalizeStepOne;
Index: ontend/src/components/routeProtectors/AdminOnlyRoute.tsx
===================================================================
--- frontend/src/components/routeProtectors/AdminOnlyRoute.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,19 +1,0 @@
-import type {JSX} from "react";
-import {useAuthContext} from "../../context/AuthContext.tsx";
-import {Navigate} from "react-router-dom";
-
-const AdminOnlyRoute = ({children}: { children: JSX.Element }) => {
-    const {user, authChecked} = useAuthContext();
-
-    if (!authChecked) {
-        return null;
-    }
-
-    if (user?.isAdmin)
-        return children;
-
-
-    return <Navigate to="/" replace/>;
-};
-
-export default AdminOnlyRoute;
Index: ontend/src/components/routeProtectors/PublicOnlyRoute.tsx
===================================================================
--- frontend/src/components/routeProtectors/PublicOnlyRoute.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,17 +1,0 @@
-import type {JSX} from "react";
-import { useAuthContext } from "../../context/AuthContext.tsx";
-import { Navigate } from "react-router-dom";
-
-const PublicOnlyRoute = ({ children }: { children: JSX.Element }) => {
-    const { user, authChecked } = useAuthContext();
-
-    if (!authChecked) {
-        return null;
-    }
-
-    if (user) return <Navigate to="/" replace />;
-
-    return children;
-};
-
-export default PublicOnlyRoute;
Index: ontend/src/components/routeProtectors/UserOnlyRoute.tsx
===================================================================
--- frontend/src/components/routeProtectors/UserOnlyRoute.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,16 +1,0 @@
-import {Navigate} from "react-router-dom";
-import type {JSX} from "react";
-import {useAuthContext} from "../../context/AuthContext.tsx";
-
-const UserOnlyRoute = ({ children }: {
-    children: JSX.Element;
-}) => {
-    const { user } = useAuthContext();
-
-    if (!user)
-        return <Navigate to="/login" replace />;
-
-    return children;
-};
-
-export default UserOnlyRoute;
Index: ontend/src/components/skeletons/CourseCardEnrolledSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/CourseCardEnrolledSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,29 +1,0 @@
-function CourseCardEnrolledSkeleton() {
-    return (
-        <aside className="flex flex-col gap-2 items-center col-span-1 p-2 rounded-md">
-            {/* IMAGE skeleton */}
-            <div className="overflow-clip rounded-sm w-full">
-                <div className="aspect-video bg-gray-300 animate-pulse"></div>
-            </div>
-
-            {/* INFO skeleton */}
-            <div className="flex flex-col gap-2 text-left w-full">
-                {/* Title skeleton */}
-                <div className="h-5 bg-gray-300 rounded w-3/4 animate-pulse"></div>
-
-                {/* Topics skeleton */}
-                <div className="h-4 bg-gray-300 rounded w-full animate-pulse"></div>
-            </div>
-
-            {/* PROGRESS BAR skeleton */}
-            <div className="flex flex-col gap-1 items-start w-full">
-                <div className="w-full bg-gray-200 rounded-full h-0.5">
-                    <div className="h-full bg-gray-300 rounded-full w-1/3 animate-pulse"></div>
-                </div>
-                <div className="h-3 bg-gray-300 rounded w-20 animate-pulse"></div>
-            </div>
-        </aside>
-    );
-}
-
-export default CourseCardEnrolledSkeleton;
Index: ontend/src/components/skeletons/CourseCardSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/CourseCardSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,43 +1,0 @@
-
-function CourseCardSkeleton() {
-    return (
-        <article className="relative border-1 border-black/10 shadow-md shadow-black/10
-            flex flex-col w-full rounded-xl gap-4 py-4 px-4 bg-[#FFFFFF] animate-pulse">
-
-            {/*IMAGE SKELETON*/}
-            <div className="overflow-clip rounded-md rounded-br-4xl rounded-tl-4xl">
-                <div className="w-full h-[180px] bg-gray-300 rounded-md"></div>
-            </div>
-
-            {/*TITLE AND TOPICS SKELETON*/}
-            <div className="flex flex-col gap-2 items-start text-left h-full">
-                {/*Title skeleton*/}
-                <div className="h-6 bg-gray-300 rounded w-3/4"></div>
-
-                {/*Topics skeleton*/}
-                <div className="h-16 bg-gray-200 rounded w-full"></div>
-            </div>
-
-            {/*INFO SKELETON*/}
-            <div className="flex flex-wrap gap-2 whitespace-nowrap">
-                <div className="h-6 bg-gray-200 rounded w-12"></div>
-                <div className="h-6 bg-gray-200 rounded w-20"></div>
-                <div className="h-6 bg-gray-200 rounded w-20"></div>
-                <div className="h-6 bg-gray-200 rounded w-24"></div>
-                <div className="h-6 bg-gray-200 rounded w-16"></div>
-            </div>
-
-            {/*BUTTON AND PRICE SKELETON*/}
-            <div className="flex justify-between items-center mt-0">
-                <div className="h-6 bg-gray-300 rounded w-12"></div>
-
-                <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 bg-gray-200 rounded"></div>
-                    <div className="h-8 bg-gray-300 rounded w-20"></div>
-                </div>
-            </div>
-        </article>
-    );
-}
-
-export default CourseCardSkeleton;
Index: ontend/src/components/skeletons/CourseDetailsInfoSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/CourseDetailsInfoSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,67 +1,0 @@
-import ShifterArrow from "../../../public/Shifter-Arrow.png";
-
-function CourseDetailsInfoSkeleton() {
-    return (
-        <>
-            {/*WHAT WILL BE LEARNED*/}
-            <section className="relative flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md overflow-clip">
-                <img src={ShifterArrow} alt="Shifter Arrow"
-                     className="absolute opacity-10 h-150 w-120 -rotate-130 -top-40 right-0"/>
-                <img src={ShifterArrow} alt="Shifter Arrow"
-                     className="absolute opacity-10 h-150 w-120 rotate-50 -bottom-40 left-0"/>
-
-                <h2 className="text-5xl">What you'll learn</h2>
-                <div className="grid grid-cols-2 gap-y-8 gap-x-20">
-                    {[...Array(10)].map((_, index) => (
-                        <div className="flex items-center gap-4" key={index}>
-                            <div className="h-10 w-10 bg-gray-300 rounded animate-pulse"></div>
-                            <div className="h-6 bg-gray-300 rounded flex-1 animate-pulse"></div>
-                        </div>
-                    ))}
-                </div>
-            </section>
-
-            {/*COURSE CONTENT*/}
-            <section className="relative flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md overflow-clip">
-                <h2 className="text-5xl">Course content</h2>
-                <div>
-                    {[...Array(5)].map((_, index) => (
-                        <div key={index} className={`border-1 border-black/20 ${index !== 4 ? "border-b-0" : ""}`}>
-                            <div className="overflow-clip flex justify-between items-center px-4 py-4 bg-black/5">
-                                <div className="flex gap-4 items-center">
-                                    <div className="h-8 w-8 bg-gray-300 rounded animate-pulse"></div>
-                                    <div className="h-6 bg-gray-300 rounded w-48 animate-pulse"></div>
-                                </div>
-                                <div className="flex gap-2 items-center text-black/40">
-                                    <div className="h-4 bg-gray-300 rounded w-16 animate-pulse"></div>
-                                    <span >•</span>
-                                    <div className="h-4 bg-gray-300 rounded w-12 animate-pulse"></div>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </section>
-
-            {/*DESCRIPTION*/}
-            <section className="flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md">
-                <h2 className="text-5xl">Course description</h2>
-                <div>
-                    <div className="relative overflow-hidden">
-                        <div className="space-y-4">
-                            {[...Array(7)].map((_, index) => (
-                                <div key={index} className="h-4 bg-gray-300 rounded w-full animate-pulse"></div>
-                            ))}
-                            <div className="h-4 bg-gray-300 rounded w-2/3 animate-pulse"></div>
-                        </div>
-                        <div
-                            className="pointer-events-none absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-white to-transparent"/>
-                    </div>
-                    <div className="mt-4 h-10 bg-gray-300 rounded w-24 animate-pulse"></div>
-                </div>
-            </section>
-        </>
-    );
-}
-
-export default CourseDetailsInfoSkeleton;
Index: ontend/src/components/skeletons/CourseLearnSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/CourseLearnSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,55 +1,0 @@
-
-function CourseLearnSkeleton() {
-    return (
-        <main className="flex ">
-            <div className="flex flex-col w-full">
-                {/* Video player skeleton */}
-                <div className="w-full h-96 bg-gray-300 animate-pulse"></div>
-
-                <div className="flex flex-col gap-4 flex-grow py-vertical-md px-horizontal-sm text-left text-black-text">
-                    {/* Title skeleton */}
-                    <div className="h-10 bg-gray-300 rounded w-3/4 animate-pulse"></div>
-
-                    {/* Content text skeleton */}
-                    <div className="flex flex-col gap-3">
-                        <div className="h-6 bg-gray-300 rounded w-full animate-pulse"></div>
-                        <div className="h-6 bg-gray-300 rounded w-98/100 animate-pulse"></div>
-                        <div className="h-6 bg-gray-300 rounded w-full animate-pulse"></div>
-                        <div className="h-6 bg-gray-300 rounded w-95/100 animate-pulse"></div>
-                        <div className="h-6 bg-gray-300 rounded w-4/5 animate-pulse"></div>
-                    </div>
-
-                    {/* File download section skeleton */}
-                    <div className="flex justify-between w-full gap-20 items-center py-12">
-                        <div className="h-6 bg-gray-300 rounded w-120 animate-pulse"></div>
-                        <div className="h-12 bg-gray-300 rounded-md w-36 animate-pulse"></div>
-                    </div>
-                </div>
-            </div>
-
-            {/* CourseContentSideNav skeleton */}
-            <div className="w-28/100 flex flex-col gap-4 p-6 bg-gray-50">
-                {/* Side nav header skeleton */}
-                <div className="h-8 bg-gray-300 rounded w-3/4 animate-pulse"></div>
-
-                {/* Course content sections skeleton */}
-                {[...Array(4)].map((_, sectionIndex) => (
-                    <div key={sectionIndex} className="flex flex-col gap-2">
-                        {/* Section title skeleton */}
-                        <div className="h-6 bg-gray-300 rounded w-2/3 animate-pulse"></div>
-
-                        {/* Lectures skeleton */}
-                        {[...Array(4)].map((_, lectureIndex) => (
-                            <div key={lectureIndex} className="flex items-center gap-3 p-2">
-                                <div className="w-4 h-4 bg-gray-300 rounded-full animate-pulse"></div>
-                                <div className="h-5 bg-gray-300 rounded w-full animate-pulse"></div>
-                            </div>
-                        ))}
-                    </div>
-                ))}
-            </div>
-        </main>
-    );
-}
-
-export default CourseLearnSkeleton;
Index: ontend/src/components/skeletons/CoursesFiltersSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/CoursesFiltersSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,53 +1,0 @@
-
-function CoursesFiltersSkeleton() {
-    return (
-        <aside className="flex flex-col gap-8 pl-8 pt-12 text-left sticky top-0 h-screen border-r-2 border-black/10">
-            {/* Header */}
-            <div className="h-8 bg-gray-300 rounded w-32 animate-pulse shrink-0 "></div>
-
-            <div className="relative flex flex-col gap-12 pl-4 pr-2 pb-20 overflow-y-scroll scrollable">
-                {/* Filter Sections - matching the 6 sections in CoursesFilters */}
-                <FilterSelectSkeleton hasSearch={false} /> {/* Favorite Courses */}
-                <FilterSelectSkeleton hasSearch={false} /> {/* Level */}
-                <FilterSelectSkeleton hasSearch={true} />  {/* Topics */}
-                <FilterSelectSkeleton hasSearch={true} />  {/* Skills */}
-                <FilterSelectSkeleton hasSearch={false} /> {/* Duration */}
-                <FilterSelectSkeleton hasSearch={false} /> {/* Price */}
-            </div>
-
-            {/* Gradient overlay */}
-            <div className="pointer-events-none absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-white to-transparent"/>
-        </aside>
-    );
-}
-
-function FilterSelectSkeleton({hasSearch}: {hasSearch: boolean}) {
-    return (
-        <section className="flex flex-col gap-1 text-md">
-            {/* Header */}
-            <div className="h-6 bg-gray-300 rounded w-24 mb-4 animate-pulse"></div>
-
-            <form className="flex flex-col gap-2">
-                {/* Search input skeleton (only for Topics and Skills) */}
-                {hasSearch && (
-                    <div className="h-10 bg-gray-300 rounded-sm mb-2 animate-pulse"></div>
-                )}
-
-                {/* Filter options - 4 items */}
-                {[...Array(4)].map((_, index) => (
-                    <label key={index} className="flex items-center text-black whitespace-nowrap cursor-pointer w-fit">
-                        <div className="h-7 w-7 bg-gray-300 rounded mr-2 animate-pulse"></div>
-                        <div className="h-4 bg-gray-300 rounded w-40 animate-pulse"></div>
-                    </label>
-                ))}
-            </form>
-
-            {/* Show more button skeleton (only for sections with search) */}
-            {hasSearch && (
-                <div className="h-4 bg-gray-300 rounded w-16 animate-pulse"></div>
-            )}
-        </section>
-    );
-}
-
-export default CoursesFiltersSkeleton;
Index: ontend/src/components/skeletons/CoursesGridSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/CoursesGridSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,27 +1,0 @@
-import CourseCardSkeleton from "./CourseCardSkeleton.tsx";
-
-function CoursesGridSkeleton() {
-    return (
-        <main className="flex-1 p-6">
-            {/* Active Filters Pills Skeleton */}
-            <div className="flex justify-between mb-6">
-                <div className="flex flex-wrap gap-2">
-                    {[...Array(4)].map((_, index) => (
-                        <div key={index} className="h-8 bg-gray-300 rounded-full w-24 animate-pulse"></div>
-                    ))}
-                </div>
-                <div className="h-8 bg-gray-300 rounded w-60 animate-pulse"></div>
-            </div>
-
-
-            {/* Course Grid Skeleton */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {[...Array(9)].map((_, index) => (
-                    <CourseCardSkeleton key={index} />
-                ))}
-            </div>
-        </main>
-    );
-}
-
-export default CoursesGridSkeleton;
Index: ontend/src/components/skeletons/HeroCourseDetailsSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/HeroCourseDetailsSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,41 +1,0 @@
-
-function HeroCourseDetailsSkeleton() {
-    return (
-        <div className="bg-shifter py-4">
-            {/*HEADER AND DESCRIPTION*/}
-            <section className="flex flex-col items-center gap-8 bg-white mx-6 px-horizontal-lg pb-12 pt-40 rounded-xl shadow-lg shadow-black/20">
-                {/* Title */}
-                <div className="h-12 bg-gray-300 rounded w-120 animate-pulse"></div>
-
-                {/* Description */}
-                <div className="space-y-2 w-full max-w-5xl">
-                    <div className="h-4 bg-gray-300 rounded w-full animate-pulse"></div>
-                    <div className="h-4 bg-gray-300 rounded w-full animate-pulse"></div>
-                    <div className="h-4 bg-gray-300 rounded w-4/5 animate-pulse"></div>
-                </div>
-
-                {/* Button section */}
-                <div className="flex mt-12 gap-12 items-center bg-gray/60 backdrop-blur-lg border-3 border-black/5 px-2 py-1 w-fit rounded-full">
-                    <div className="h-6 bg-gray-300 rounded w-8 animate-pulse"></div>
-                    <div className="h-12 bg-gray-300 rounded-full w-60 animate-pulse"></div>
-                </div>
-            </section>
-
-            {/*TRIPLE INFO*/}
-            <section className="flex justify-center text-white px-12 py-4 ">
-                {[...Array(3)].map((_, index) => (
-                    <div key={index} className="flex flex-col gap-4 text-left px-20 py-8 border-r-2 border-white/40 last:border-r-0">
-                        <div className="h-8 bg-white/30 rounded w-80 animate-pulse"></div>
-                        <div className="space-y-2">
-                            <div className="h-4 bg-white/20 rounded w-full animate-pulse"></div>
-                            <div className="h-4 bg-white/20 rounded w-full animate-pulse"></div>
-                            <div className="h-4 bg-white/20 rounded w-2/3 animate-pulse"></div>
-                        </div>
-                    </div>
-                ))}
-            </section>
-        </div>
-    );
-}
-
-export default HeroCourseDetailsSkeleton;
Index: ontend/src/components/skeletons/ModalReviewCourseSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/ModalReviewCourseSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,61 +1,0 @@
-import ReactDOM from "react-dom";
-import {X} from "lucide-react";
-import StarOutline from "../../assets/icons/StarOutline";
-
-function ModalReviewCourseSkeleton({closeModal}: {
-    closeModal: () => void;
-}) {
-    return ReactDOM.createPortal(
-        <>
-            {/* Overlay */}
-            <div className="fixed inset-0 bg-gray/60 backdrop-blur-sm z-[1000]"/>
-
-            {/* Modal */}
-            <section
-                className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
-                   bg-white shadow-lg py-4 px-6 z-[1000] max-w-1/2 min-w-1/3
-                   max-h-5/6 rounded-lg flex flex-col items-center gap-6
-                   text-black-text"
-            >
-                {/* Close button */}
-                <button
-                    onClick={closeModal}
-                    className="ml-auto flex justify-end cursor-pointer p-2 hover:bg-shifter/20 rounded-sm"
-                >
-                    <X size={24} strokeWidth={1.5}/>
-                </button>
-
-                {/* Title skeleton */}
-                <div className="h-8 bg-gray-300 rounded w-80 animate-pulse"></div>
-
-                {/* Stars skeleton */}
-                <div className="flex flex-col gap-2 items-center">
-                    <div className="flex gap-4">
-                        {[1, 2, 3, 4, 5].map((star) => (
-                            <StarOutline
-                                key={star}
-                                className="w-8 h-8 text-gray-300 rounded animate-pulse"
-                            />
-                        ))}
-                    </div>
-                    {/* Star text skeleton */}
-                    <div className="h-6 bg-gray-300 rounded w-48 animate-pulse"></div>
-                </div>
-
-                {/* Textarea skeleton */}
-                <div className="w-full flex flex-col gap-1">
-                    <div className="w-full h-24 bg-gray-300 rounded-sm animate-pulse"></div>
-                    <div className="h-3 bg-gray-300 rounded w-16 animate-pulse"></div>
-                </div>
-
-                {/* Submit button skeleton */}
-                <div className="flex gap-6 mr-auto">
-                    <div className="h-10 bg-gray-300 rounded-sm w-32 animate-pulse"></div>
-                </div>
-            </section>
-        </>,
-        document.getElementById("portal")!
-    );
-}
-
-export default ModalReviewCourseSkeleton;
Index: ontend/src/components/skeletons/ProfileModalAddSkills&InterestsSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/ProfileModalAddSkills&InterestsSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,58 +1,0 @@
-import ReactDom from "react-dom";
-import {X} from "lucide-react";
-import {useEffect} from "react";
-
-function ProfileModalAddSkillsInterestsSkeleton({closeModal}: {
-    closeModal: () => void;
-}) {
-    useEffect(() => {
-        // Disable scroll
-        document.body.classList.add("overflow-hidden");
-
-        // Cleanup: re-enable scroll when modal unmounts
-        return () => {
-            document.body.classList.remove("overflow-hidden");
-        };
-    }, []);
-
-    return ReactDom.createPortal(
-        <>
-            {/*OVERFLOW*/}
-            <div className="fixed top-0 bottom-0 left-0 right-0 bg-black/70 z-1000"/>
-
-            <section className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white shadow-lg py-4 px-6 z-1000
-                     max-w-2/3 max-h-5/6 rounded-lg flex flex-col gap-4">
-                <button
-                    onClick={closeModal}
-                    className="hover:bg-black/10 transition-all duration-300 ease-out ml-auto px-2 w-fit rounded-sm cursor-pointer">
-                    <X size={32} />
-                </button>
-
-                <div className="flex justify-between w-full flex-wrap gap-2">
-                    {/* Label skeleton */}
-                    <div className="h-7 bg-gray-300 rounded w-32 animate-pulse"></div>
-
-                    {/* Search input skeleton */}
-                    <div className="h-8 bg-gray-300 rounded-md w-48 animate-pulse"></div>
-                </div>
-
-                <div className="relative custom-scrollbar flex gap-2 flex-wrap w-full items-center overflow-y-auto">
-                    {/* Option buttons skeleton */}
-                    {[...Array(28)].map((_, index) => (
-                        <div
-                            key={index}
-                            className="h-8 bg-gray-300 rounded-md animate-pulse"
-                            style={{
-                                width: `${Math.floor(Math.random() * 60) + 80}px`
-                            }}
-                        >
-                        </div>
-                    ))}
-                </div>
-            </section>
-        </>,
-        document.getElementById("portal")!
-    )
-}
-
-export default ProfileModalAddSkillsInterestsSkeleton;
Index: ontend/src/components/skeletons/ProfileSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/ProfileSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,52 +1,0 @@
-
-function ProfileSkeleton() {
-    return (
-        <main className="grid grid-cols-4 gap-x-12 py-vertical-lg pt-30 px-horizontal-md bg-dark-blue/5">
-            <div className="col-span-1 flex flex-col gap-6">
-                {/* ProfileInfo Skeleton */}
-                <section className="border-1 border-dark-blue/10 flex flex-col gap-6 items-center justify-center bg-white w-full rounded-xl p-8">
-                    {/* Avatar skeleton */}
-                    <div className="border-3 border-white/40 rounded-full bg-gray-300 w-1/2 aspect-square flex items-center justify-center animate-pulse"></div>
-
-                    {/* Name and email skeleton */}
-                    <div className="flex flex-col gap-2 w-full items-center">
-                        <div className="h-8 bg-gray-300 rounded w-4/5 animate-pulse"></div>
-                        <div className="h-6 bg-gray-300 rounded w-full animate-pulse"></div>
-                    </div>
-                </section>
-
-                {/* ProfileSkillsInterests Skeletons - 3 sections */}
-                {["Learned Skills", "Desired Skills", "Interests"].map((_, index) => (
-                    <section key={index} className="flex flex-col gap-2 items-start w-full rounded-xl">
-                        <div className="h-8 bg-gray-300 rounded w-32 animate-pulse"></div>
-                        <div className="flex gap-2 w-full flex-wrap border-1 border-dark-blue/10 bg-white rounded-lg p-4">
-                            {/* Skills pills skeleton */}
-                            {[...Array(4)].map((_, pillIndex) => (
-                                <div key={pillIndex} className="h-8 bg-gray-300 rounded-md w-20 animate-pulse"></div>
-                            ))}
-                            {/* Show more button skeleton */}
-                            <div className="h-8 bg-gray-300 rounded w-16 animate-pulse"></div>
-                        </div>
-                    </section>
-                ))}
-            </div>
-
-            <div className="col-span-3">
-                {/* ProfileMyProfile Skeleton */}
-                <section className="flex flex-col gap-4 items-start">
-                    <div className="h-10 bg-gray-300 rounded w-32 animate-pulse"></div>
-                    <div className="flex flex-col gap-6 px-24 py-6 border-1 border-dark-blue/10 bg-white rounded-lg w-full">
-                        {/* Form inputs skeleton */}
-                        {[...Array(3)].map((_, index) => (
-                            <div key={index} className="h-12 bg-gray-300 rounded-sm w-full animate-pulse"></div>
-                        ))}
-                        {/* Submit button skeleton */}
-                        <div className="h-10 bg-gray-300 rounded-sm w-32 animate-pulse"></div>
-                    </div>
-                </section>
-            </div>
-        </main>
-    );
-}
-
-export default ProfileSkeleton;
Index: ontend/src/context/AuthContext.tsx
===================================================================
--- frontend/src/context/AuthContext.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,170 +1,0 @@
-import React, {
-    createContext,
-    useState,
-    useEffect,
-    type ReactNode,
-    type Dispatch,
-    type SetStateAction,
-} from "react";
-import type {User} from "../models/javaObjects/User.tsx";
-import {loginApi, logoutApi, personalizeApi, refreshAccessTokenApi, registerApi, verifyApi} from "../api/authApi.ts";
-import {useNavigate} from "react-router-dom";
-import type {UserPersonalization} from "../models/javaObjects/UserPersonalization.tsx";
-
-interface AuthContextType {
-    user: User | null;
-    setUser: Dispatch<SetStateAction<User | null>>;
-    accessToken: string | null;
-    setAccessToken: Dispatch<SetStateAction<string | null>>;
-    authChecked: boolean;
-    setAuthChecked: Dispatch<SetStateAction<boolean>>;
-    register: (email: string, password: string) => Promise<void>;
-    verify: (verificationToken: string) => Promise<string>;
-    personalize: (user: UserPersonalization) => Promise<void>;
-    login: (email: string, password: string) => Promise<void>;
-    logout: () => void;
-    refreshAccessToken: () => Promise<void>;
-    loading: boolean;
-    useFreeConsultation: () => void;
-}
-
-export const AuthContext = createContext<AuthContextType | undefined>(
-    undefined
-);
-
-export const AuthProvider = ({children}: { children: ReactNode }) => {
-    const [user, setUser] = useState<User | null>(null);
-    const [accessToken, setAccessToken] = useState<string | null>(null);
-    const [authChecked, setAuthChecked] = useState<boolean>(false);
-    const [loading, setLoading] = useState(true);
-    const navigate = useNavigate();
-
-    const useFreeConsultation = () => {
-        if (user) {
-            setUser({...user, hasUsedFreeConsultation: true});
-        }
-    }
-
-    const register = async (email: string, password: string) => {
-        return registerApi(email, password)
-            .then(() => {
-                console.log("Successfully registered and sent email to user");
-            })
-            .catch(error => {
-                console.log("Registration failed:", error);
-                throw error;
-            });
-    }
-
-    const verify = async (verificationToken: string) => {
-        return verifyApi(verificationToken)
-            .then(userEmail => {
-                console.log("Successfully verified user email");
-                return userEmail;
-            })
-            .catch(error => {
-                console.log("Verification failed:", error);
-                throw error;
-            });
-    }
-
-    const personalize = async (user: UserPersonalization) => {
-        return personalizeApi(user)
-            .then(data => {
-                setAccessToken(data.accessToken);
-                setUser(data.user);
-            })
-            .catch(error => {
-                setAccessToken(null);
-                setUser(null);
-                console.log("Personalization failed:", error);
-                throw error;
-            });
-    }
-
-    const login = async (email: string, password: string) => {
-        return loginApi(email, password)
-            .then(data => {
-                setAccessToken(data.accessToken);
-                setUser(data.user);
-            })
-            .catch(error => {
-                    setAccessToken(null);
-                    setUser(null);
-                    console.log("Login failed:", error);
-                    throw error;
-            });
-    };
-
-    const logout = async () => {
-        return logoutApi()
-            .then(() => {
-                setAccessToken(null);
-                setUser(null);
-                navigate("/");
-            })
-            .catch(err => {
-                console.warn("Logout failed:", err);
-                throw err;
-            });
-    };
-
-
-    const refreshAccessToken = async () => {
-        setLoading(true);
-
-        return refreshAccessTokenApi()
-            .then(data => {
-                // console.log(data.accessToken)
-                // console.log(encodeURIComponent(Intl.DateTimeFormat().resolvedOptions().timeZone))
-                setAccessToken(data.accessToken);
-                setUser(data.user);
-            })
-            .catch(error => {
-                setAccessToken(null);
-                setUser(null);
-                console.log("Refresh token failed: ", error);
-                throw error;
-            })
-            .finally(() => {
-                setLoading(false);
-                setAuthChecked(true);
-            })
-    };
-
-    useEffect(() => {
-        refreshAccessToken();
-    }, []);
-
-    return (
-        <AuthContext.Provider
-            value={{
-                user,
-                setUser,
-                accessToken,
-                setAccessToken,
-                authChecked,
-                setAuthChecked,
-                useFreeConsultation,
-                register,
-                verify,
-                personalize,
-                login,
-                logout,
-                refreshAccessToken,
-                loading,
-            }}
-        >
-            {children}
-        </AuthContext.Provider>
-    );
-};
-
-// Custom hook for ease of use
-export const useAuthContext = () => {
-    const context = React.useContext(AuthContext);
-    if (!context) {
-        throw new Error("useGlobalContext must be used within a GlobalProvider");
-    }
-    return context;
-};
Index: ontend/src/context/CourseStorage.ts
===================================================================
--- frontend/src/context/CourseStorage.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,32 +1,0 @@
-import { create } from "zustand";
-import type {CoursePreview} from "../models/javaObjects/CoursePreview.tsx";
-import type {Enrollment} from "../models/javaObjects/Enrollment.tsx";
-
-
-interface CourseStorage {
-    enrollments: Enrollment[] | null;
-    recommendedCourses: CoursePreview[] | null;
-    allCourses: CoursePreview[] | null;
-    // topics: string[] | null;
-    // skills: string[] | null;
-
-    setEnrollments: (enrollments: Enrollment[] | null) => void;
-    setRecommendedCourses: (courses: CoursePreview[]) => void;
-    setAllCourses: (courses: CoursePreview[]) => void;
-    // setTopics: (topics: string[]) => void;
-    // setSkills: (skills: string[]) => void;
-}
-
-export const useCourseStorage = create<CourseStorage>((set) => ({
-    enrollments: null,
-    recommendedCourses: null,
-    allCourses: null,
-    // topics: null,
-    // skills: null,
-
-    setEnrollments: (enrollments) => set({ enrollments: enrollments }),
-    setRecommendedCourses: (courses) => set({ recommendedCourses: courses }),
-    setAllCourses: (courses) => set({ allCourses: courses }),
-    // setTopics: (topics) => set({ topics }),
-    // setSkills: (skills) => set({ skills })
-}));
Index: ontend/src/global.css
===================================================================
--- frontend/src/global.css	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,232 +1,0 @@
-@import "tailwindcss";
-
-@theme {
-    --spacing-horizontal-xl: 12rem;
-    --spacing-horizontal-lg: 10rem;
-    --spacing-horizontal-md: 7rem;
-    --spacing-horizontal-sm: 4rem;
-
-    --spacing-vertical-xl: 5rem;
-    --spacing-vertical-lg: 3rem;
-    --spacing-vertical-md: 2rem;
-    --spacing-vertical-sm: 1rem;
-
-    --spacing-top-nav-xl: 9rem;
-    --spacing-top-nav-lg: 8rem;
-    --spacing-top-nav-md: 7rem;
-    --spacing-top-nav-sm: 6rem;
-
-    --spacing-between-lg: 6rem;
-    --spacing-between-md: 4rem;
-    --spacing-between-sm: 2rem;
-
-
-    --color-beige: #F8F6F5;
-    --color-shifter: #008CC2;
-    --color-red: #E63946;
-    --color-dark-blue: #002E5D;
-    --color-deep-green: #2C6B3D;
-    --color-gold: #FFB300;
-    --color-teal: #009688;
-    --color-dark-gray: #666;
-    --color-bright-gray: #DDDDDD;
-    --color-gray: #E5E7EBFF;
-    --color-black-text: #333333;
-    --color-white-text: #F8F8F8;
-
-
-    --shadow-up-sm: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-up: 0 -1px 3px 0 rgba(0, 0, 0, 0.1), 0 -1px 2px 0 rgba(0, 0, 0, 0.06);
-    --shadow-up-md: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -2px rgba(0, 0, 0, 0.06);
-    --shadow-up-lg: 0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -4px rgba(0, 0, 0, 0.05);
-    --shadow-up-xl: 0 -20px 25px -5px rgba(0, 0, 0, 0.1), 0 -10px 10px -5px rgba(0, 0, 0, 0.04);
-    --shadow-up-2xl: 0 -25px 50px -12px rgba(0, 0, 0, 0.25);
-
-
-    --font-montserrat-regular: 'Montserrat', sans-serif;
-    --font-montserrat-medium: 'Montserrat', sans-serif;
-    --font-montserrat-semibold: 'Montserrat', sans-serif;
-    --font-montserrat-bold: 'Montserrat', sans-serif;
-}
-
-@font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 300;
-    src: url("assets/fonts/Montserrat-Light.ttf") format('woff2');
-}
-
-@font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 400;
-    src: url("assets/fonts/Montserrat-Regular.ttf") format('woff2');
-}
-
-@font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 500;
-    src: url("assets/fonts/Montserrat-Medium.ttf") format('woff2');
-}
-
-@font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 600;
-    src: url("assets/fonts/Montserrat-SemiBold.ttf") format('woff2');
-}
-
-@font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 700;
-    src: url("assets/fonts/Montserrat-Bold.ttf") format('woff2');
-}
-
-:root {
-    --color-white: #F8F8F8;
-    --color-black: #202024;
-
-    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
-
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-#root {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    background: var(--color-white);
-    width: 100%;
-    margin: 0 0;
-    padding: 0;
-    text-align: center;
-    font-family: 'Nunito', sans-serif;
-    /*@apply font-sans;*/
-}
-
-body {
-    background: #EEE;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    /*width: 100vw;*/
-    place-items: center;
-    /*min-width: 320px;*/
-    min-height: 100vh;
-}
-
-/* Customize scrollbar for Webkit browsers (Chrome, Safari, Edge) */
-.custom-scrollbar::-webkit-scrollbar {
-    width: .6rem;
-    height: .6rem;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: #f0f0f0;
-    border-radius: 40px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background-color: rgba(100, 100, 100, 0.5);
-    border-radius: 4px;
-    border: 2px solid transparent;
-    background-clip: content-box;
-}
-
-/* Firefox scrollbar */
-.custom-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(100, 100, 100, 0.5) #f0f0f0;
-}
-
-
-
-.scrollable-show {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(100, 100, 100, 0.5) transparent;
-    -ms-overflow-style: auto;
-}
-.scrollable-show::-webkit-scrollbar {
-    display: block;
-    width: 6px;
-}
-.scrollable-show::-webkit-scrollbar-thumb {
-    background-color: rgba(0,0,0,0.4);
-    border-radius: 4px;
-}
-.scrollable-show::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.scrollable {
-    scrollbar-width: thin;
-    scrollbar-color: transparent transparent;
-}
-.scrollable::-webkit-scrollbar {
-    background: transparent;
-}
-.scrollable::-webkit-scrollbar-thumb {
-    background-color: transparent;
-}
-.scrollable:hover {
-    scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
-}
-.scrollable:hover::-webkit-scrollbar-thumb {
-    background-color: rgba(0,0,0,0.4);
-    border-radius: 4px;
-}
-
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-textarea:-webkit-autofill,
-textarea:-webkit-autofill:hover,
-textarea:-webkit-autofill:focus,
-select:-webkit-autofill {
-    transition: background-color 9999s ease-in-out 0s;
-    -webkit-text-fill-color: #000 !important;
-}
-
-
-/* HTML: <div class="loader"></div> */
-.loader, .loader-white {
-    /*margin-left: 20px;*/
-    /*width: 40px;*/
-    aspect-ratio: 1;
-    display: grid;
-    border: 4px solid #0000;
-    border-radius: 50%;
-    animation: l15 1s infinite linear;
-}
-.loader-white {
-    border-right-color: var(--color-white);
-}
-.loader {
-    border-right-color: var(--color-shifter);
-}
-.loader::before,
-.loader::after,
-.loader-white::before,
-.loader-white::after {
-    content: "";
-    grid-area: 1/1;
-    margin: 2px;
-    border: inherit;
-    border-radius: 50%;
-    animation: l15 2s infinite;
-}
-.loader::after, .loader-white::after {
-    margin: 8px;
-    animation-duration: 3s;
-}
-@keyframes l15{
-    100%{transform: rotate(1turn)}
-}
Index: ontend/src/hooks/useCourseLearn.tsx
===================================================================
--- frontend/src/hooks/useCourseLearn.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,215 +1,0 @@
-import {useEffect, useState} from "react";
-import type {CourseFull} from "../models/javaObjects/CourseFull.tsx";
-import type {CourseLectureFull} from "../models/javaObjects/CourseLectureFull.tsx";
-import {fetchCourseCertificateApi, fetchCourseFullApi} from "../api/courseApi.ts";
-import {fetchPresignedUrlApi} from "../api/s3Api.ts";
-import {completeLectureApi, uncompleteLectureApi} from "../api/userCourseProgressApi.ts";
-
-export function useCourseLearn(courseId: number, accessToken: string) {
-    const [course, setCourse] = useState<CourseFull | null>(null);
-    const [activeLecture, setActiveLecture] = useState<CourseLectureFull | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [videoUrl, setVideoUrl] = useState<string>("");
-    const [isDownloading, setIsDownloading] = useState(false);
-    const [isLastLectureFinished, setIsLastLectureFinished] = useState(false);
-    const [progressPercentage, setProgressPercentage] = useState(0);
-
-    const courseFinishedPunchlines = [
-        "🎓 Course Completed - The Future is Yours to Shape!",
-        "🔥 Course Completed - Your Hard Work is Paying Off!",
-        "🌟 Course Completed - You’re Unlocking Your True Potential!",
-        "🚀 Course Completed - Your Journey to Success Continues!",
-        "🏆 Course Completed - You’re One Step Closer to Your Dreams!",
-        "💪 Course Completed - You’ve Proven Your Dedication!",
-        "✨ Course Completed - Your Growth is Inspiring!",
-        "🎉 Course Completed - You’re Ready for New Challenges!",
-        "💡 Course Completed - Your Knowledge is Expanding!",
-        "🎯 Course Completed - You’re Hitting Your Targets!",
-        "🌍 Course Completed - You’re Making an Impact!",
-        "💥 Course Completed - You’re Breaking Barriers!",
-        "🚀 Course Completed - Your Journey is Just Beginning!",
-        "💫 Course Completed - You’re Reaching New Heights!",
-        "🌟 Course Completed - You’re a Star in the Making!",
-        "🎓 Course Completed - Your Knowledge is Your Superpower!",
-        "🎉 Course Completed - You’re a Force to be Reckoned With!",
-        "💪 Course Completed - Your Strength is Unmatched!",
-        "💡 Course Completed - Keep Growing, Keep Shining!",
-        "🚀 Course Completed - The Sky is Not the Limit, It’s Just the Beginning!",
-        "🌟 Course Completed - Your Potential is Limitless!",
-        "🎉 Course Completed - Celebrate Your Success and Keep Moving Forward!",
-        "🏆 Course Completed - You’ve Earned Your Place Among the Best!",
-        "💪 Course Completed - Your Determination is Unstoppable!",
-    ]
-
-    useEffect(() => {
-        if (!course?.courseContents) return;
-        const completedLectures = course.courseContents.flatMap(content =>
-            content.courseLectures.filter(lecture => lecture.userCourseProgress.completed)
-        ) || [];
-
-        const totalLectures = course.courseContents.flatMap(content => content.courseLectures) || [];
-
-        setProgressPercentage(
-            Math.round((completedLectures.length / (totalLectures.length || 1)) * 100)
-        );
-    }, [course?.courseContents]);
-
-    useEffect(() => {
-        setLoading(true);
-        fetchCourseFullApi(courseId, accessToken)
-            .then(resCourse => {
-                setCourse(resCourse);
-                const firstUncompletedLecture = resCourse?.courseContents
-                    ?.flatMap(content => content.courseLectures)
-                    ?.find(lecture => !lecture.userCourseProgress.completed);
-                setActiveLecture(firstUncompletedLecture || resCourse?.courseContents[0]?.courseLectures[0] || null);
-            })
-            .catch(err => console.error("Error fetching full course api: ", err))
-            .finally(() => setLoading(false));
-    }, [courseId, accessToken]);
-
-
-    useEffect(() => {
-        if (activeLecture?.contentType === "VIDEO") {
-            getPresignedUrl(60 * 60) // 1 hour
-                .then(url => setVideoUrl(url || ""))
-                .catch(err => console.error("Error fetching video URL: ", err));
-        } else {
-            setVideoUrl("");
-        }
-    }, [activeLecture, accessToken, courseId]);
-
-    const getPresignedUrl = async (expirySeconds: number): Promise<string | undefined> => {
-        if (!activeLecture) return undefined;
-        const encodedFileName = encodeURIComponent(activeLecture.contentFileName);
-        try {
-            const url = await fetchPresignedUrlApi(accessToken, courseId, activeLecture.id, encodedFileName, expirySeconds);
-            return url;
-        } catch (err) {
-            console.error("Error fetching presigned URL: ", err);
-            return undefined;
-        }
-    };
-
-    const triggerDownload = async () => {
-        if (!activeLecture) return;
-
-        setIsDownloading(true);
-        try {
-            const url = await getPresignedUrl(60 * 5); // 5 minutes expiry
-            if (!url) {
-                console.error("No presigned URL available");
-                setIsDownloading(false);
-                return;
-            }
-
-            // Create temporary link element to download the file
-            const a = document.createElement("a");
-            a.href = url;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-
-            updateLecture(activeLecture.userCourseProgress.id, true);
-        } catch (error) {
-            console.error("Download failed:", error);
-        } finally {
-            setIsDownloading(false);
-        }
-    };
-
-    const downloadCertificate = async () => {
-        try {
-            const response = await fetchCourseCertificateApi(Number(courseId || -1), accessToken || "");
-
-            const pdfBlob = response.data;
-
-            const disposition = response.headers['content-disposition'] || response.headers['Content-Disposition'];
-            let filename = `Shifter_Certificate_${courseId}.pdf`; // Fallback filename
-
-            if (disposition) {
-                const filenameMatch = disposition.match(/filename="(.+?)"|filename\*=UTF-8''(.+)/i);
-                if (filenameMatch) {
-                    // Prioritize the filename from the second capture group (UTF-8 encoding)
-                    // otherwise use the first group.
-                    filename = filenameMatch[2] || filenameMatch[1];
-
-                    // Clean up the filename if it was URL-encoded (common for UTF-8)
-                    if (filename.includes('%')) {
-                        filename = decodeURIComponent(filename);
-                    }
-                }
-            }
-
-            const url = window.URL.createObjectURL(pdfBlob);
-
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = filename;
-            document.body.appendChild(a);
-            a.click();
-
-            window.URL.revokeObjectURL(url);
-            a.remove();
-
-        } catch (error) {
-            console.error("Error during certificate download:", error);
-            alert('Failed to download certificate. Check authentication or permissions.');
-        }
-    }
-
-    const updateLecture = (progressId: number, isComplete: boolean) => {
-        if (!course) return;
-
-        const oldCourse = structuredClone(course);
-        const updatedCourse = {
-            ...course,
-            courseContents: course.courseContents.map(content => ({
-                ...content,
-                courseLectures: content.courseLectures.map(lecture =>
-                    lecture.userCourseProgress.id === progressId
-                        ? {
-                            ...lecture,
-                            userCourseProgress: {
-                                ...lecture.userCourseProgress,
-                                completed: isComplete,
-                                completedAt: isComplete ? new Date() : null,
-                            },
-                        }
-                        : lecture
-                ),
-            })),
-        };
-
-        setCourse(updatedCourse);
-
-        const apiCall = isComplete
-            ? completeLectureApi(progressId, accessToken)
-            : uncompleteLectureApi(progressId, accessToken);
-
-        apiCall
-            .catch(err => {
-                console.error("Error updating lecture: ", err);
-                setCourse(oldCourse);
-            });
-    };
-
-    return {
-        course,
-        setCourse,
-        activeLecture,
-        setActiveLecture,
-        loading,
-        videoUrl,
-        isDownloading,
-        setIsDownloading,
-        updateLecture,
-        triggerDownload,
-        downloadCertificate,
-        getPresignedUrl,
-        isLastLectureFinished,
-        setIsLastLectureFinished,
-        courseFinishedPunchlines,
-        progressPercentage
-    };
-}
Index: ontend/src/hooks/useEnrollUserInCourse.tsx
===================================================================
--- frontend/src/hooks/useEnrollUserInCourse.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,38 +1,0 @@
-import { useNavigate } from "react-router-dom";
-import { enrollUserApi } from "../api/enrollmentApi.ts";
-import { useAuthContext } from "../context/AuthContext.tsx";
-import { useCourseStorage } from "../context/CourseStorage.ts";
-import { showInfoToast } from "../utils/showInfoToast.ts";
-import { slugify } from "../utils/slug.ts";
-import type { Enrollment } from "../models/javaObjects/Enrollment.tsx";
-import {fetchRecommendedCoursesApi} from "../api/courseApi.ts";
-
-export function useEnrollUserInCourse(courseId: number, courseTitleShort: string | undefined) {
-    const { user, accessToken } = useAuthContext();
-    const navigate = useNavigate();
-    const { enrollments, setEnrollments, allCourses, setAllCourses, setRecommendedCourses } = useCourseStorage();
-
-    async function enroll() {
-        if (!user) {
-            showInfoToast("Please log in to enroll in the javaObjects.");
-        }
-
-        try {
-            const enrollment: Enrollment = await enrollUserApi(courseId, accessToken || "");
-
-            setAllCourses(allCourses?.filter(course => course.id !== courseId) || [])
-            setEnrollments([...(enrollments ?? []), enrollment]);
-
-            const recommendedCourses = await fetchRecommendedCoursesApi(accessToken || "");
-            setRecommendedCourses(recommendedCourses);
-
-            navigate(`/learn/${courseId}/${slugify(courseTitleShort || "")}`);
-            console.log("User enrolled in javaObjects successfully");
-        } catch (error) {
-            console.error("Error enrolling user in javaObjects:", error);
-            throw error;
-        }
-    }
-
-    return { enroll };
-}
Index: ontend/src/hooks/useEnrolledCourses.tsx
===================================================================
--- frontend/src/hooks/useEnrolledCourses.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,56 +1,0 @@
-import {useEffect, useState} from "react";
-import type {CoursePreview} from "../models/javaObjects/CoursePreview.tsx";
-import {fetchCoursesApi, fetchEnrolledCoursesApi} from "../api/courseApi.ts";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import {useCourseStorage} from "../context/CourseStorage.ts";
-import type {CoursePreviewEnrolled} from "../models/javaObjects/CoursePreviewEnrolled.tsx";
-
-export function useEnrolledCourses() {
-    const {allCourses: allCoursesStorage, setAllCourses: setAllCoursesStorage} = useCourseStorage();
-    const {accessToken} = useAuthContext();
-    const [enrolledCourses, setEnrolledCourses] = useState<CoursePreviewEnrolled[]>([]);
-    const [allCourses, setAllCourses] = useState<CoursePreview[]>(allCoursesStorage || []);
-    const [loading, setLoading] = useState<boolean>(true);
-
-    useEffect(() => {
-        setLoading(true);
-        // Enrolled courses
-        fetchEnrolledCoursesApi(accessToken || "")
-            .then(data => {
-                setEnrolledCourses(data);
-            })
-            .catch(error => {
-                console.error("Failed to fetch enrolled courses:", error);
-            })
-            .finally(() => setLoading(false));
-
-        // All courses to get the users favorite courses
-        if (allCoursesStorage && allCoursesStorage.length > 0) {
-            return;
-        }
-        const storedCourses = sessionStorage.getItem("allCourses");
-        const parsedCourses = storedCourses ? JSON.parse(storedCourses) : null;
-        if (parsedCourses) {
-            setAllCoursesStorage(parsedCourses);
-            setAllCourses(parsedCourses);
-            return;
-        }
-
-        fetchCoursesApi(accessToken || "")
-            .then(courses => {
-                setAllCoursesStorage(courses);
-                setAllCourses(courses);
-                sessionStorage.setItem("allCourses", JSON.stringify(courses));
-            })
-            .catch(err => {
-                console.error("Failed to fetch courses:", err);
-            })
-    }, [accessToken]);
-
-    return {
-        enrolledCourses,
-        setEnrolledCourses,
-        allCourses,
-        loading
-    }
-}
Index: ontend/src/hooks/usePersonalizeHook.tsx
===================================================================
--- frontend/src/hooks/usePersonalizeHook.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,126 +1,0 @@
-import {useEffect, useState} from "react";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import type {UserPersonalization} from "../models/javaObjects/UserPersonalization.tsx";
-import {useNavigate} from "react-router-dom";
-import PersonalizeStepOne from "../components/registerSteps/PersonalizeStepOne.tsx";
-import PersonalizationStepTwo from "../components/registerSteps/PersonalizationStepTwo.tsx";
-import PersonalizationStepThree from "../components/registerSteps/PersonalizationStepThree.tsx";
-
-export function usePersonalizeHook() {
-    const {verify, personalize} = useAuthContext();
-    const [verificationChecked, setVerificationChecked] = useState<boolean>(false);
-    const [isVerified, setIsVerified] = useState(false);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [activeStep, setActiveStep] = useState(0);
-    const [showError, setShowError] = useState(false);
-    const [error, setError] = useState("");
-    const [direction, setDirection] = useState(0); // 1 for next, -1 for back
-    const [user, setUser] = useState<UserPersonalization>({
-        name: "",
-        email: "",
-        workPosition: "",
-        companySize: "",
-        interests: [],
-        desiredSkills: [],
-    });
-    const navigate = useNavigate();
-
-    const handleNext = async () => {
-        if (error.length > 0) {
-            setShowError(true);
-            return;
-        }
-
-        setError("");
-        setShowError(false);
-        setDirection(1);
-        setActiveStep((prev) => prev + 1);
-    };
-
-    const handleBack = () => {
-        setDirection(-1);
-        setActiveStep((prev) => prev - 1);
-    };
-
-    const variants = {
-        enter: (dir: number) => ({
-            x: dir > 0 ? 100 : -100,
-            opacity: 0,
-        }),
-        center: {
-            x: 0,
-            opacity: 1,
-        },
-        exit: (dir: number) => ({
-            x: dir > 0 ? -100 : 100,
-            opacity: 0,
-        }),
-    };
-
-    const stepsContent = [
-        <PersonalizeStepOne setUser={setUser} user={user} setError={setError}/>,
-        <PersonalizationStepTwo setUser={setUser} user={user} setError={setError}/>,
-        <PersonalizationStepThree setUser={setUser} user={user} setError={setError}/>
-    ];
-
-
-    const handleVerify = async () => {
-        const params = new URLSearchParams(window.location.search);
-        const verificationToken = params.get("token");
-
-        verify(verificationToken || "")
-            .then((userEmail) => {
-                setUser({
-                    ...user,
-                    email: userEmail,
-                })
-                setIsVerified(true);
-            })
-            .catch(err => {
-                setIsVerified(false);
-                setError("Verification failed. Please try again.");
-                setShowError(true);
-                console.error("Error verifying user " + err);
-            })
-            .finally(() => setVerificationChecked(true))
-    }
-
-    const handlePersonalize = async () => {
-        if (!isVerified) {
-            setError("Verification failed. Please try again.");
-            setShowError(true);
-            return;
-        }
-        setIsLoading(true);
-        personalize(user)
-            .then(() => {
-                navigate("/");
-            })
-            .catch(err => {
-                setError("Personalization failed. Please try again.");
-                setShowError(true);
-                console.error("Error personalizing account for user: ", err);
-            })
-            .finally(() => setIsLoading(false));
-    }
-
-
-    useEffect(() => {
-        handleVerify()
-    }, [])
-
-    return {
-        verificationChecked,
-        isVerified,
-        isLoading,
-        activeStep,
-        showError,
-        error,
-        direction,
-        variants,
-        stepsContent,
-        handleNext,
-        handleBack,
-        handlePersonalize
-    }
-}
Index: ontend/src/hooks/useRegisterHook.tsx
===================================================================
--- frontend/src/hooks/useRegisterHook.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,81 +1,0 @@
-import React, {useEffect, useState} from "react";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import {hasDigit, hasSpecialChar, hasUppercase, isValidEmail} from "../utils/validation.ts";
-import {checkEmailExistsApi} from "../api/authApi.ts";
-
-export function useRegisterHook() {
-    const {register} = useAuthContext();
-    const [email, setEmail] = React.useState("");
-    const [password, setPassword] = React.useState("");
-    const [passwordConfirmation, setPasswordConfirmation] = React.useState("");
-    const [showError, setShowError] = useState(false);
-    const [error, setError] = React.useState("");
-    const [isSuccess, setIsSuccess] = React.useState(false);
-    const [isLoading, setIsLoading] = React.useState<boolean>(false);
-    const [showPassword, setShowPassword] = React.useState(false);
-
-    useEffect(() => {
-        if (!email && !password && !passwordConfirmation)
-            return
-
-        if (!email || !password || !passwordConfirmation) {
-            setError("Please ensure all inputs are completed.");
-        } else if (email && !isValidEmail(email)) {
-            setError("Email must be valid");
-        } else if (password && passwordConfirmation && password !== passwordConfirmation) {
-            setError("Passwords do not match");
-        } else if (!hasUppercase(password)) {
-            setError("Password must contain at least one uppercase letter");
-        } else if (!hasDigit(password)) {
-            setError("Password must contain at least one digit");
-        } else if (!hasSpecialChar(password)) {
-            setError("Password must contain at least one special character");
-        } else {
-            setError("");
-        }
-
-    }, [email, password, passwordConfirmation])
-
-    const handleRegister = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-
-        if (error.length > 0) {
-            setShowError(true);
-            return;
-        }
-
-        setIsLoading(true);
-        try {
-            const exists = await checkEmailExistsApi(email);
-
-            if (exists) {
-                setError("This email is already registered. Please sign in or use a different email.");
-                return;
-            }
-
-            await register(email, password);
-            setIsSuccess(true);
-        } catch (err) {
-            console.error("Error checking email:", err);
-            setError("An unexpected error occurred. Please try again later or contact us contact us directly at support@shift-er.com");
-        } finally {
-            setIsLoading(false);
-        }
-    }
-
-    return {
-        email,
-        setEmail,
-        password,
-        setPassword,
-        passwordConfirmation,
-        setPasswordConfirmation,
-        showPassword,
-        setShowPassword,
-        showError,
-        error,
-        isSuccess,
-        isLoading,
-        handleRegister
-    }
-}
Index: ontend/src/i18n.ts
===================================================================
--- frontend/src/i18n.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,77 +1,0 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-
-// Import all namespaces
-import homeEN from "./locales/en/home.json";
-import navbarEN from "./locales/en/navbar.json";
-import footerEN from "./locales/en/footer.json";
-import contactEN from "./locales/en/contact.json";
-import freeConsultationEN from "./locales/en/freeConsultation.json";
-import mentoringEN from "./locales/en/mentoring.json";
-import consultingEN from "./locales/en/consulting.json";
-import academiesEN from "./locales/en/academies.json";
-import aboutEN from "./locales/en/about.json";
-import loginEN from "./locales/en/login.json";
-import registerEN from "./locales/en/register.json";
-import personalizeEN from "./locales/en/personalize.json";
-import coursesEN from "./locales/en/courses.json";
-
-import homeMK from "./locales/mk/home.json";
-import navbarMK from "./locales/mk/navbar.json";
-import footerMK from "./locales/mk/footer.json";
-import contactMK from "./locales/mk/contact.json";
-import freeConsultationMK from "./locales/mk/freeConsultation.json";
-import mentoringMK from "./locales/mk/mentoring.json";
-import consultingMK from "./locales/mk/consulting.json";
-import academiesMK from "./locales/mk/academies.json";
-import aboutMK from "./locales/mk/about.json";
-import loginMK from "./locales/mk/login.json";
-import registerMK from "./locales/mk/register.json";
-import personalizeMK from './locales/mk/personalize.json';
-import coursesMK from "./locales/mk/courses.json";
-
-
-i18n
-    .use(initReactI18next)
-    .init({
-        lng: "en",
-        fallbackLng: "en",
-        ns: ["home", "navbar", "footer", "contact", "freeConsultation", "mentoring", "consulting", "academies", "about",
-        "login", "register", "personalize", "courses"],
-        defaultNS: "home",
-        resources: {
-            en: {
-                home: homeEN,
-                navbar: navbarEN,
-                footer: footerEN,
-                contact: contactEN,
-                freeConsultation: freeConsultationEN,
-                mentoring: mentoringEN,
-                consulting: consultingEN,
-                academies: academiesEN,
-                about: aboutEN,
-                login: loginEN,
-                register: registerEN,
-                personalize: personalizeEN,
-                courses: coursesEN,
-            },
-            mk: {
-                home: homeMK,
-                navbar: navbarMK,
-                footer: footerMK,
-                contact: contactMK,
-                freeConsultation: freeConsultationMK,
-                mentoring: mentoringMK,
-                consulting: consultingMK,
-                academies: academiesMK,
-                about: aboutMK,
-                login: loginMK,
-                register: registerMK,
-                personalize: personalizeMK,
-                courses: coursesMK,
-            }
-        },
-        interpolation: { escapeValue: false },
-    });
-
-export default i18n;
Index: ontend/src/layout/Footer.tsx
===================================================================
--- frontend/src/layout/Footer.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,115 +1,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterLogo from "../../public/Shifter-S2W-White-Transparent.png";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import LinkedIn from "../assets/icons/LinkedIn.tsx";
-import Instagram from "../assets/icons/Instagram.tsx";
-import NavbarLink from "../components/NavbarLink.tsx";
-
-function Footer() {
-    const {user, logout} = useAuthContext();
-
-    return (
-        <footer className="bg-dark-blue border-t-4 border-white/20">
-            <div className="flex justify-between px-20 py-20">
-                <section className="flex flex-col gap-4 max-w-90">
-                    <img src={ShifterLogo} alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
-                         className="w-60 "
-                    />
-                    <p className="text-white font-light text-left">
-                        Practical strategies and hands-on guidance to help you overcome obstacles, unlock new
-                        opportunities, and build a thriving business.
-                    </p>
-                </section>
-
-                <div>
-                    <div className="flex gap-20 text-lg text-white">
-
-                        {/*SERVICES*/}
-                        <section className="flex flex-col gap-2 text-left font-light text-lg">
-                            <h3 className="text-white font-bold text-2xl mb-4">Services</h3>
-
-                            <NavbarLink to={"/mentoring"} label={"Mentoring"}/>
-                            <NavbarLink to={"/consulting"} label={"Consulting"}/>
-                            <NavbarLink to={"/courses"} label={"Courses"}/>
-                            <NavbarLink to={"/academies"} label={"Academies"}/>
-                        </section>
-
-                        {/*ABOUT SHIFTER*/}
-                        <section className="flex flex-col gap-2 text-left font-light text-lg">
-                            <h3 className="text-white font-bold text-2xl mb-4">About Us</h3>
-
-                            <NavbarLink to={"/about"} label={"About Shifter"}/>
-                        </section>
-
-                        {/*PROFILE*/}
-                        <section className="flex flex-col gap-2 text-left font-light text-lg">
-                            <h3 className="text-white font-bold text-2xl mb-4">Profile</h3>
-
-                            {user ?
-                                <>
-                                    <NavbarLink to={"/profile"} label={"Profile"}/>
-                                    <div className="flex flex-col gap-0 overflow-clip group w-fit">
-                                        <button
-                                            onClick={logout}
-                                            className="transition-all duration-300 ease-in-out z-10 cursor-pointer"
-                                        >
-                                            Log Out
-                                        </button>
-                                        <hr className="relative -left-30 group-hover:-left-4 border-t-2
-                                            rounded-full transition-all duration-300 ease-in-out"/>
-                                    </div>
-                                </> :
-                                <NavbarLink to={"/login"} label={"Log In / Sign Up"}/>
-                            }
-                        </section>
-
-                        {/*DASHBOARD*/}
-                        {
-                            user &&
-                            <section className="flex flex-col gap-2 text-left font-light text-lg">
-                                <h3 className="text-white font-bold text-2xl mb-4">Dashboard</h3>
-
-                                <NavbarLink to={"/profile"} label={"Profile"}/>
-                                <NavbarLink to={"/learn"} label={"My Learning"}/>
-                            </section>
-                        }
-
-                        {/*CONTACT*/}
-                        <section className="flex flex-col gap-2 text-left font-light text-lg">
-                            <h3 className="text-white font-bold text-2xl mb-4">Contact</h3>
-
-                            <NavbarLink to={"/contact"} label={"Contact Us"}/>
-                            <hr className="border-t-1 border-white/40 rounded-full" />
-                            <p>contact@shifter.com</p>
-                            <div className="flex gap-2 items-center">
-                                Visit us at:
-                                <a
-                                    href="http://www.google.com"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className=""
-                                >
-                                    <LinkedIn className="w-6 h-6 text-white"/>
-                                </a>
-                                <a
-                                    href="http://www.google.com"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className=""
-                                >
-                                    <Instagram className="w-7 h-7 text-white"/>
-                                </a>
-                            </div>
-                        </section>
-                    </div>
-                </div>
-            </div>
-            <div className="text-sm py-2 font-light text-white/80 border-t-2 border-white/20 w-9/10 mx-auto">
-                © {new Date().getFullYear()} Shifter. All rights reserved.
-            </div>
-        </footer>
-    )
-}
-
-export default Footer;
Index: ontend/src/layout/FooterNew.tsx
===================================================================
--- frontend/src/layout/FooterNew.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,149 +1,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import { useAuthContext } from "../context/AuthContext.tsx";
-import LinkedIn from "../assets/icons/LinkedIn.tsx";
-import Instagram from "../assets/icons/Instagram.tsx";
-import NavbarLink from "../components/NavbarLink.tsx";
-import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-function FooterNew() {
-    const { user, logout } = useAuthContext();
-    const { t } = useTranslation("footer");
-
-    return (
-        <section className="relative flex flex-col gap-24 pt-top-nav-md overflow-clip bg-beige">
-
-            {/* background circles */}
-            <div className="absolute -bottom-150 -left-80 w-320 aspect-square bg-[radial-gradient(circle_at_center,rgba(0,140,194,0.4),transparent_70%)]"></div>
-            <div className="absolute -bottom-150 -right-80 w-320 aspect-square bg-[radial-gradient(circle_at_center,rgba(0,140,194,0.4),transparent_70%)]"></div>
-
-            {/* CTA */}
-            <section className="flex flex-col gap-4 z-1 text-black-text">
-                <h2 className="text-6xl font-semibold">
-                    {t("cta.title.part1")} <br /> {t("cta.title.part2")}
-                </h2>
-                <p className="font-light">
-                    {t("cta.subtitle.line1")} <br />
-                    {t("cta.subtitle.line2")}
-                </p>
-                <div className="mt-12">
-                    <Link
-                        to={user?.hasUsedFreeConsultation ? "/contact" : "/free-consultation"}
-                        className="hover:shadow-shifter/60 transition-all duration-200 ease-in-out cursor-pointer
-                        shadow-md shadow-shifter/40 font-bold border-2 border-white/20
-                        bg-shifter py-3 px-12 rounded-full text-white "
-                    >
-                        {user?.hasUsedFreeConsultation
-                            ? t("cta.button.contact")
-                            : t("cta.button.consultation")}
-                    </Link>
-                </div>
-            </section>
-
-            {/* FOOTER */}
-            <div className="p-4">
-                <footer className="flex flex-col gap-4 rounded-xl shadow-md
-                bg-beige/80 backdrop-blur-md text-black-text pt-12 pb-4 px-horizontal-sm">
-
-                    <div className="flex justify-between">
-                        <section className="flex flex-col justify-center gap-12 max-w-1/4">
-                            <img
-                                src={ShifterLogo}
-                                alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
-                                className="w-40"
-                            />
-
-                            <div className="flex flex-col items-start text-xs">
-                                <p>contact@shift-er.com</p>
-                                <div className="flex gap-2 items-center">
-                                    {t("social.visit")}:
-                                    <a
-                                        href="http://www.google.com"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="w-6 h-6 flex items-center justify-center"
-                                    >
-                                        <LinkedIn className="w-full h-full" />
-                                    </a>
-                                    <a
-                                        href="http://www.google.com"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="w-6 h-6 flex items-center justify-center"
-                                    >
-                                        <Instagram className="w-full h-full" />
-                                    </a>
-                                </div>
-                            </div>
-                        </section>
-
-                        <div>
-                            <div className="flex gap-20 text-sm">
-                                {/* SERVICES */}
-                                <section className="flex flex-col gap-1 text-left font-light">
-                                    <h3 className="font-bold text-lg mb-4">{t("sections.services.title")}</h3>
-                                    <NavbarLink to="/mentoring" label={t("sections.services.items.mentoring")} classNameLine="border-black-text" />
-                                    <NavbarLink to="/consulting" label={t("sections.services.items.consulting")} classNameLine="border-black-text" />
-                                    <NavbarLink to="/courses" label={t("sections.services.items.courses")} classNameLine="border-black-text" />
-                                    <NavbarLink to="/academies" label={t("sections.services.items.academies")} classNameLine="border-black-text" />
-                                </section>
-
-                                {/* ABOUT */}
-                                <section className="flex flex-col gap-1 text-left font-light">
-                                    <h3 className="font-bold text-lg mb-4">{t("sections.about.title")}</h3>
-                                    <NavbarLink to="/about" label={t("sections.about.items.about")} classNameLine="border-black-text" />
-                                </section>
-
-                                {/* PROFILE */}
-                                <section className="flex flex-col gap-1 text-left font-light">
-                                    <h3 className="font-bold text-lg mb-4">{t("sections.profile.title")}</h3>
-                                    {user ? (
-                                        <>
-                                            <NavbarLink to="/profile" label={t("sections.profile.items.profile")} classNameLine="border-black-text" />
-                                            <div className="flex flex-col gap-0 overflow-clip group w-fit">
-                                                <button
-                                                    onClick={logout}
-                                                    className="transition-all duration-300 ease-in-out z-10 cursor-pointer"
-                                                >
-                                                    {t("sections.profile.items.logout")}
-                                                </button>
-                                                <hr className="relative -left-30 group-hover:-left-4 border-t-2
-                                                rounded-full transition-all duration-300 ease-in-out"/>
-                                            </div>
-                                        </>
-                                    ) : (
-                                        <NavbarLink to="/login" label={t("sections.profile.items.login")} classNameLine="border-black-text" />
-                                    )}
-                                </section>
-
-                                {/* DASHBOARD */}
-                                {user && (
-                                    <section className="flex flex-col gap-1 text-left font-light">
-                                        <h3 className="font-bold text-lg mb-4">{t("sections.dashboard.title")}</h3>
-                                        <NavbarLink to="/profile" label={t("sections.dashboard.items.profile")} classNameLine="border-black-text" />
-                                        <NavbarLink to="/learn" label={t("sections.dashboard.items.learning")} classNameLine="border-black-text" />
-                                    </section>
-                                )}
-
-                                {/* CONTACT */}
-                                <section className="flex flex-col gap-2 text-left font-light">
-                                    <h3 className="font-bold text-lg mb-4">{t("sections.contact.title")}</h3>
-                                    <NavbarLink to="/contact" label={t("sections.contact.items.contact")} classNameLine="border-black-text" />
-                                </section>
-                            </div>
-                        </div>
-                    </div>
-
-                    <hr className="mt-12 border-t-1 border-black/10 w-full" />
-                    <div className="text-xs font-light text-black/60">
-                        © {new Date().getFullYear()} Shifter. {t("rights")}
-                    </div>
-                </footer>
-            </div>
-        </section>
-    );
-}
-
-export default FooterNew;
Index: ontend/src/layout/FooterSmall.tsx
===================================================================
--- frontend/src/layout/FooterSmall.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,45 +1,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import NavbarLink from "../components/NavbarLink.tsx";
-import {Instagram, Linkedin} from "lucide-react";
-import {useTranslation} from "react-i18next";
-
-export default function FooterSmall () {
-    const { t } = useTranslation("footer");
-    
-    return (
-        <footer className="flex justify-between px-horizontal-lg py-vertical-sm bg-beige">
-            <img src={ShifterLogo} alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
-                 className="h-12"
-            />
-
-            <div className="flex gap-4 items-center">
-                <NavbarLink to={"/mentoring"} label={t("sections.services.items.mentoring")} className="text-sm"/>
-                <NavbarLink to={"/consulting"} label={t("sections.services.items.consulting")} className="text-sm"/>
-                <NavbarLink to={"/courses"} label={t("sections.services.items.courses")} className="text-sm"/>
-                <NavbarLink to={"/academies"} label={t("sections.services.items.academies")} className="text-sm"/>
-            </div>
-
-            <div className="flex gap-4 ">
-                <a
-                    href="http://www.google.com"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
-                >
-                    <Linkedin size={20} color="var(--color-shifter)"/>
-                </a>
-
-                <a
-                    href="http://www.google.com"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
-                >
-                    <Instagram size={20} color="var(--color-shifter)"/>
-                </a>
-            </div>
-        </footer>
-    )
-}
Index: ontend/src/layout/LanguageToggle.tsx
===================================================================
--- frontend/src/layout/LanguageToggle.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,55 +1,0 @@
-import ReactCountryFlag from "react-country-flag";
-import { useState } from "react";
-import i18n from "../i18n.ts";
-
-export default function LanguageToggle() {
-    const [open, setOpen] = useState(false);
-    const [lang, setLang] = useState("en");
-
-    const handleLangChange = (lang: string) => {
-        setLang(lang);
-        i18n.changeLanguage(lang);
-        setOpen(false);
-    }
-
-    return (
-        <div className="fixed bottom-4 left-4 z-50">
-            {/* Toggle Button */}
-            <button
-                onClick={() => setOpen(!open)}
-                className="flex items-center justify-center gap-2 p-3 py-2 rounded-md
-                   bg-black/40 backdrop-blur-md border border-white/20 text-white
-                   hover:bg-black/60 transition-all duration-200 ease-in-out cursor-pointer"
-            >
-                {lang === "en" ? "EN" : "MK"}
-            </button>
-
-            {/* Language List (UPWARD) */}
-            {open && (
-                <div
-                    className="
-                        absolute bottom-full mb-1 left-0
-                        flex flex-col  w-40
-                        bg-black/80 text-white-text
-                        shadow-lg rounded-md
-                    "
-                >
-                    <div
-                        onClick={() => { handleLangChange("mk") }}
-                        className="flex items-center gap-3 px-4 py-2 hover:bg-white/10 cursor-pointer"
-                    >
-                        <ReactCountryFlag countryCode="MK" svg style={{ width: "20px", height: "20px" }} />
-                        <span>Македонски</span>
-                    </div>
-                    <div
-                        onClick={() => { handleLangChange("en") }}
-                        className="flex items-center gap-3 px-4 py-2 hover:bg-white/10 cursor-pointer"
-                    >
-                        <ReactCountryFlag countryCode="GB" svg style={{ width: "20px", height: "20px" }} />
-                        <span>English</span>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
Index: ontend/src/layout/Navbar.tsx
===================================================================
--- frontend/src/layout/Navbar.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,70 +1,0 @@
-import {Link} from "react-router-dom";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import logo from "../../public/Shifter-S2W-White-Transparent.png"
-import {useAuthContext} from "../context/AuthContext.tsx";
-import NavbarLink from "../components/NavbarLink.tsx";
-import {useTranslation} from "react-i18next";
-
-function Navbar() {
-    const {user} = useAuthContext();
-    const { t } = useTranslation("navbar");
-
-    return (
-        <nav
-            className="fixed top-2 z-50 w-11/12 left-1/2 -translate-x-1/2 flex items-center justify-between py-2 rounded-full
-            border-3 border-white/30 bg-black/50 backdrop-blur-md text-white font-light overflow-clip gap-20"
-        >
-            {/* Left nav links */}
-            <div className={`flex w-40/100 justify-between text-md items-center
-                                pl-10 ${user?.hasUsedFreeConsultation && "pl-12"}`}>
-                {/* Link group */}
-                <NavbarLink to="/courses" label={t("courses")}/>
-                <NavbarLink to="/mentoring" label={t("mentoring")}/>
-                <NavbarLink to="/consulting" label={t("consulting")}/>
-                <NavbarLink to="/academies" label={t("academies")}/>
-            </div>
-
-            {/* Centered Logo (NO ABSOLUTE!) */}
-            <div className="flex justify-center items-center w-fit">
-                <Link to="/">
-                    <img src={logo} alt="Shifter Logo" className="h-12"/>
-                </Link>
-            </div>
-
-            {/* Right nav links + profile */}
-            <div className="flex w-40/100 justify-between text-md items-center gap-6">
-                <NavbarLink to="/about" label={t("about")}/>
-                {
-                    user ?
-                        <NavbarLink to="/learn" label={t("learn")}/> :
-                        <NavbarLink to="/login" label={t("login")}/>
-                }
-                <div className="flex gap-4 items-center">
-                    {
-                        user &&
-                        <Link
-                            to="/profile"
-                            className="hover:bg-shifter transition-all duration-200 ease-in-out cursor-pointer
-                                h-full aspect-square rounded-full border-2 border-white/20 p-3 bg-shifter/40 text-white font-bold flex items-center justify-center"
-                        >
-                            {user.name.split(" ")[0].charAt(0).toUpperCase()}
-                        </Link>
-                    }
-                    <Link
-                        to={`${user?.hasUsedFreeConsultation ? "/contact" : "/free-consultation"}`}
-                        className={`hover:-translate-x-2 transition-all duration-200 ease-in-out cursor-pointer
-                                relative -mr-4 py-2 bg-shifter rounded-l-lg font-medium
-                                shadow-md shadow-shifter/30 px-8 pr-10 ${user?.hasUsedFreeConsultation && "px-10 pr-12"}`}
-                    >
-                        {user?.hasUsedFreeConsultation ? t("contact") : t("freeConsultation")}
-                    </Link>
-                </div>
-            </div>
-        </nav>
-
-    )
-}
-
-
-export default Navbar
Index: ontend/src/layout/NavbarLearn.tsx
===================================================================
--- frontend/src/layout/NavbarLearn.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,69 +1,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import logo from "../../public/Shifter-S2W-White-Transparent.png";
-import {Link, useLocation} from "react-router-dom";
-import {fromUrlFormat} from "../utils/toUrlFormat.ts";
-import NavbarLink from "../components/NavbarLink.tsx";
-import StarFilled from "../assets/icons/StarFilled.tsx";
-import StarOutline from "../assets/icons/StarOutline.tsx";
-import {useState} from "react";
-import ModalReviewCourse from "../components/ModalReviewCourse.tsx";
-
-function NavbarLearn({courseRating, markCourseAsRated}: {
-    courseRating?: number;
-    markCourseAsRated: (rating: number) => void;
-}) {
-    const [showReviewModal, setShowReviewModal] = useState<boolean>(false);
-    const location = useLocation();
-    const courseId = location.pathname.split("/")[2] || "";
-    const courseTitleEncoded = location.pathname.split("/")[3] || "";
-    const courseTitle = fromUrlFormat(courseTitleEncoded)
-
-    return (
-        <nav className="flex justify-between items-center bg-black w-full py-2 px-8 border-b-2 border-white/60">
-            <div className="flex gap-4 items-center text-xl text-white ">
-                <Link to="/">
-                    <img src={logo} alt="Shifter Logo" className="h-12"/>
-                </Link>
-                <div className="w-[1px] bg-white/40 self-stretch my-2"/>
-                {
-                    courseTitle && <Link to={`/courses/${courseId}/${courseTitleEncoded}`}
-                                         className="hover:brightness-80">{courseTitle}</Link>
-                }
-                {
-                    courseRating !== null && courseRating !== undefined  && (
-                        <button
-                            onClick={() => setShowReviewModal(true)}
-                            className="flex gap-1 cursor-pointer hover:brightness-80"
-                        >
-                            {[1, 2, 3, 4, 5].map((star) => {
-                                const StarIcon = courseRating > 0 && star <= courseRating ? StarFilled : StarOutline;
-                                return <StarIcon key={star} className="w-4 text-yellow-400" />;
-                            })}
-                        </button>
-                    )
-                }
-            </div>
-
-            <div className="flex gap-4">
-                <NavbarLink className="w-fit text-white"
-                            to={"/learn"} label={"Learn"}/>
-                <NavbarLink className="w-fit text-white"
-                            to={"/"} label={"Return Home"}/>
-            </div>
-
-            {
-                showReviewModal && (
-                    <ModalReviewCourse
-                        courseId={+courseId}
-                        closeModal={() => setShowReviewModal(false)}
-                        markCourseAsRated={markCourseAsRated}
-                        isUpdate={true}
-                    />
-                )
-            }
-        </nav>
-    )
-}
-
-export default NavbarLearn;
Index: ontend/src/locales/en/about.json
===================================================================
--- frontend/src/locales/en/about.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,44 +1,0 @@
-{
-  "hero": {
-    "title": "Business Development & Transformation Center",
-    "description": "<span class='font-semibold'>Shifter</span> is a center for business development and transformation, offering mentorship, consulting, academies, and e-learning for family businesses."
-  },
-  "stats": {
-    "clients": "Clients Empowered",
-    "hours": "Mentoring Hours",
-    "years": "Years of Shifter"
-  },
-  "whyChoose": {
-    "title": "Why choose <span class='font-bold text-shifter'>Shifter?</span>"
-  },
-  "reasons": [
-    {
-      "title": "Tailored Strategies",
-      "description": "Strategies and programs designed specifically for your business goals and challenges."
-    },
-    {
-      "title": "Empowering Clients",
-      "description": "Teaching clients how to solve challenges independently, not just provide ready-made solutions."
-    },
-    {
-      "title": "Holistic Approach",
-      "description": "A comprehensive method that addresses root causes across your business, not just the symptoms."
-    },
-    {
-      "title": "Sustainable Growth",
-      "description": "Strategic solutions that strengthen processes, teams, and systems for long-term success."
-    },
-    {
-      "title": "Expert Guidance",
-      "description": "Solutions from professionals who make business challenges manageable."
-    }
-  ],
-  "about": {
-    "title": "About <span class='text-shifter font-black'>Shifter</span>",
-    "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-    "cta": "Book a Free Consultation"
-  },
-  "foundations": {
-    "title": "Our Foundations"
-  }
-}
Index: ontend/src/locales/en/academies.json
===================================================================
--- frontend/src/locales/en/academies.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,20 +1,0 @@
-{
-  "heroTitle": "Transform Your Team's Expertise with Corporate Group Academies & Training",
-  "heroDescription": "Transform your team into a synchronized unit of high-performers. Our Group Academies deliver <strong class='font-bold'>standardized, expert-led training</strong> to rapidly upskill entire departments, close knowledge gaps, and drive consistent execution across your organization. Inquire now to secure a personalized curriculum review for your business.",
-  "contactInfoTitle": "Contact Information",
-  "contactInfoDescription": "Complete the form and our team will respond shortly to help you take the next step.",
-  "contactEmail": "contact@shift-er.com",
-  "contactLocation": "Skopje, N. Macedonia",
-  "autoFilledNote": "These values are automatically populated from your profile. If any of them are incorrect, please update them in the Profile page.",
-  "name": "Name",
-  "email": "Email",
-  "subjectLabel": "Your Subject",
-  "subjectPlaceholder": "Enter the subject of your message",
-  "messageLabel": "Message",
-  "messagePlaceholder": "Write your message here...",
-  "emailError": "We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com",
-  "messageSentTitle": "Your message has been sent successfully!",
-  "messageSentDescription": "Thank you for reaching out to us. Our team will review your message and get back to you as soon as possible. Keep an eye on your <span class='font-semibold text-shifter'>inbox for our reply</span>.",
-  "sending": "Sending...",
-  "sendMessage": "Send Message"
-}
Index: ontend/src/locales/en/consulting.json
===================================================================
--- frontend/src/locales/en/consulting.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,20 +1,0 @@
-{
-  "heroTitle": "Personalized Strategic Consulting",
-  "heroDescription": "Our consulting engagement ensures maximum client results by operating with <strong class='font-bold'>limited openings</strong>. This guarantees that every client receives the <strong class='font-bold'>undivided attention</strong> and continuous strategic execution necessary to deliver <strong class='font-bold'>measurable outcomes</strong>. Submit your inquiry to begin the qualification process for exclusive strategic support.",
-  "contactInfoTitle": "Contact Information",
-  "contactInfoDescription": "Complete the form and our team will respond shortly to help you take the next step.",
-  "contactEmail": "contact@shift-er.com",
-  "contactLocation": "Skopje, N. Macedonia",
-  "autoFilledNote": "These values are automatically populated from your profile. If any of them are incorrect, please update them in the Profile page.",
-  "name": "Name",
-  "email": "Email",
-  "subjectLabel": "Your Subject",
-  "subjectPlaceholder": "Enter the subject of your message",
-  "messageLabel": "Message",
-  "messagePlaceholder": "Write your message here...",
-  "emailError": "We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com",
-  "messageSentTitle": "Your message has been sent successfully!",
-  "messageSentDescription": "Thank you for reaching out to us. Our team will review your message and get back to you as soon as possible. Keep an eye on your <span class='font-semibold text-shifter'>inbox for our reply</span>.",
-  "sending": "Sending...",
-  "sendMessage": "Send Message"
-}
Index: ontend/src/locales/en/contact.json
===================================================================
--- frontend/src/locales/en/contact.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,24 +1,0 @@
-{
-  "hero": {
-    "title": "Transform Your Vision into Results",
-    "description": "Complete the form and our team will respond shortly to help you take the next step."
-  },
-  "info": {
-    "title": "Contact Information",
-    "description": "Complete the form and our team will respond shortly to help you take the next step.",
-    "email": "contact@shift-er.com",
-    "location": "Skopje, N. Macedonia"
-  },
-  "form": {
-    "subject": "Your Subject",
-    "subjectPlaceholder": "Enter the subject of your message",
-    "message": "Message",
-    "messagePlaceholder": "Write your message here...",
-    "sendingError": "We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com",
-    "successTitle": "Your message has been sent successfully!",
-    "successDescription": "Thank you for reaching out to us. Our team will review your message and get back to you as soon as possible. Keep an eye on your inbox for our reply.",
-    "sendButton": "Send Message",
-    "sending": "Sending..."
-  },
-  "profileNotice": "These values are automatically populated from your profile. If any of them are incorrect, please update them in the Profile page."
-}
Index: ontend/src/locales/en/courses.json
===================================================================
--- frontend/src/locales/en/courses.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,7 +1,0 @@
-{
-  "title": "Ready to Take the",
-  "highlight": "Next Step?",
-  "description": "Explore courses designed not just to teach — but to shift your mindset, sharpen your skills, and accelerate your journey toward real impact. Whether you're scaling a business, leading a team, or growing as a professional, this is where transformation begins.",
-  "rocketAlt": "Shifter Rocket",
-  "difficultyOptions": ["Beginner", "Intermediate", "Advanced"]
-}
Index: ontend/src/locales/en/footer.json
===================================================================
--- frontend/src/locales/en/footer.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,49 +1,0 @@
-{
-  "cta": {
-    "title": { "part1": "Simplify Your Growth", "part2": "Journey" },
-    "subtitle": {
-      "line1": "Take the first step toward smarter business solutions.",
-      "line2": "Let us guide you every step of the way."
-    },
-    "button": {
-      "consultation": "Schedule a Free Consultation",
-      "contact": "Contact Us"
-    }
-  },
-  "social": { "visit": "Visit us at" },
-  "sections": {
-    "services": {
-      "title": "Services",
-      "items": {
-        "mentoring": "Mentoring",
-        "consulting": "Consulting",
-        "courses": "Courses",
-        "academies": "Academies"
-      }
-    },
-    "about": {
-      "title": "About Us",
-      "items": { "about": "About Shifter" }
-    },
-    "profile": {
-      "title": "Profile",
-      "items": {
-        "profile": "Profile",
-        "logout": "Log Out",
-        "login": "Log In / Sign Up"
-      }
-    },
-    "dashboard": {
-      "title": "Dashboard",
-      "items": {
-        "profile": "Profile",
-        "learning": "My Learning"
-      }
-    },
-    "contact": {
-      "title": "Contact",
-      "items": { "contact": "Contact Us" }
-    }
-  },
-  "rights": "All rights reserved."
-}
Index: ontend/src/locales/en/freeConsultation.json
===================================================================
--- frontend/src/locales/en/freeConsultation.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,39 +1,0 @@
-{
-  "hero": {
-    "title": "Book Your Free Expert Session",
-    "description": "Talk to an expert about your business goals and challenges. Get a personalized program recommendation tailored to your needs."
-  },
-  "nextSteps": {
-    "title": "Next Steps After Submission?",
-    "steps": [
-      {"title": "Your Expert is Assigned","description":"We schedule an expert for your session and send you a confirmation email with all the meeting details."},
-      {"title": "Expert Prepares for Your Session","description":"Your expert reviews the information you provided to create valuable insights and a strategy tailored to your situation."},
-      {"title": "Attend Your Personalized Session","description":"Join the session and receive actionable guidance along with a program or mentorship recommendation designed specifically for your goals."}
-    ]
-  },
-  "form": {
-    "profileHint": "These values are automatically populated from your profile. If any of them are incorrect, please update them in the Profile page.",
-    "name": "Name",
-    "email": "Email",
-    "fields": {
-      "aboutCompany": {"label":"About your business","placeholder":"What you do, industry, customers"},
-      "challenges": {"label":"Your current challenges","placeholder":"E.g. sales, growth, team issues"},
-      "expectations": {"label":"What you want from the session","placeholder":"Advice, strategy, solutions"},
-      "otherInfo": {"label":"Anything else","placeholder":"Extra context or details"}
-    },
-    "selectDate": "Select a date",
-    "selectTime": "Select a time",
-    "book": "Book Session",
-    "booking": "Booking..."
-  },
-  "confirmation": {
-    "title": "Your free consultation is scheduled! 🎉",
-    "description": "Completing the form was the <span class='font-semibold text-shifter'>first step toward progress and growth</span>. Check your <span class='font-semibold text-shifter'>email for the Zoom link.</span>"
-  },
-  "optionalHint": "<sup>*</sup> These fields are optional. Filling them out helps us better understand your challenges and objectives, so we can prepare a more personalized session.",
-  "errors": {
-    "selectDateTime": "Please select both date and time.",
-    "alreadyUsed": "We couldn’t schedule your meeting. It appears you’ve already used your free consultation. Feel free to get in touch with us through our Contact page for more options.",
-    "failedSchedule": "Failed to schedule the meeting. Please try again later or contact support."
-  }
-}
Index: ontend/src/locales/en/home.json
===================================================================
--- frontend/src/locales/en/home.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,95 +1,0 @@
-{
-  "hero": {
-    "label": "Shift 2 Win",
-    "title": "Simplify Your Growth Journey",
-    "description": "Expert guidance, practical courses, and group academies designed to help family-owned businesses thrive.",
-    "cta": {
-      "freeConsultation": "Book a Free Consultation",
-      "contact": "Get In Touch"
-    },
-    "stats": {
-      "businessesEmpowered": {
-        "value": 250,
-        "label": "Businesses Empowered"
-      },
-      "mentoringHours": {
-        "value": 2000,
-        "label": "Mentoring Hours"
-      },
-      "yearsOfShifter": {
-        "value": 4,
-        "label": "Years of Shifter"
-      }
-    }
-  },
-  "ourServices": {
-    "heading": "Solutions That Deliver Real Results",
-    "description": "Shifter focuses on clear, practical steps that drive measurable growth.",
-    "discoverMore": "Discover more",
-    "cards": [
-      {
-        "title": "Mentoring",
-        "description": "Personalized mentorship to help you overcome challenges and achieve your goals.",
-        "link": "/mentoring"
-      },
-      {
-        "title": "Courses",
-        "description": "On-demand courses to guide your journey at every stage.",
-        "link": "/courses"
-      },
-      {
-        "title": "Consulting",
-        "description": "Targeted consulting to solve specific challenges and deliver immediate results.",
-        "link": "/consulting"
-      },
-      {
-        "title": "Academies",
-        "description": "Structured group learning designed to help you grow and succeed together.",
-        "link": "/academies"
-      }
-    ]
-  },
-  "collaborationSteps": {
-    "heading": "How to Start Your Journey to <strong>Success</strong>",
-    "button": "Get Started",
-    "step1": {
-      "beforeConsultation": {
-        "title": "Schedule a Free Consultation",
-        "description": "Schedule a no-obligation consultation to discuss your challenges, goals, and expectations."
-      },
-      "afterConsultation": {
-        "title": "Request Continued Support",
-        "description": "Reach out to continue your journey with tailored guidance for your next business goals."
-      }
-    },
-    "step2": {
-      "title": "Share Your Needs & Goals",
-      "description": "Provide clear insights about your business struggles and aspirations to shape the right strategy."
-    },
-    "step3": {
-      "title": "Review Your Personalized Plan",
-      "description": "Receive a tailored roadmap with clear, actionable steps to help you achieve business success."
-    },
-    "step4": {
-      "title": "Start Implementing & Collaborating",
-      "description": "Apply expert guidance and proven strategies with continuous support throughout the process."
-    }
-  },
-  "coursesCarousel": {
-    "heading": "Unlock Your Growth With <strong class='text-shifter'>E-Learning</strong>",
-    "description": "Access expert-led courses designed to help you master business, strategy, and success - anytime, anywhere."
-  },
-  "shifterValues": {
-    "heading": "Our Core <strong class='text-shifter'>Values</strong>",
-    "description": "Our SHIFT Values define our approach to mentoring and consulting. We focus on Sustainable Results, a Holistic Approach, In-depth Analysis, Fact-based Solutions, and Tailor-made Services—ensuring impactful and lasting success.",
-    "valuesList": [
-      "Sustainable Results",
-      "Holistic Approach",
-      "In-depth Analysis",
-      "Fact Based Solutions",
-      "Tailor Made Services"
-    ],
-    "button": "Read More"
-  }
-
-}
Index: ontend/src/locales/en/login.json
===================================================================
--- frontend/src/locales/en/login.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,18 +1,0 @@
-{
-  "welcomeBack": "Welcome Back!",
-  "subtitle": "Let's unlock your next breakthrough in business!",
-  "backToMain": "Back to Main Page",
-  "emailLabel": "Email address",
-  "emailPlaceholder": "name@email.com",
-  "passwordLabel": "Password",
-  "passwordPlaceholder": "********",
-  "logIn": "Log In",
-  "register": "Register",
-  "loggingIn": "Logging in...",
-  "or": "or",
-  "googleLogin": "Log in with Google",
-  "errors": {
-    "fillAllFields": "Please fill in all fields.",
-    "somethingWentWrong": "Something went wrong. Please try again."
-  }
-}
Index: ontend/src/locales/en/mentoring.json
===================================================================
--- frontend/src/locales/en/mentoring.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,20 +1,0 @@
-{
-  "heroTitle": "Dedicated 1:1 Mentorship",
-  "heroDescription": "Our program ensures maximum client success by operating with <strong class='font-bold'>limited openings</strong>. This guarantees that every partner receives the <strong class='font-bold'>undivided attention</strong> and continuous strategic input necessary to <strong class='font-bold'>achieve their objectives</strong>. Submit your inquiry to begin the assessment for one of our dedicated slots.",
-  "contactInfoTitle": "Contact Information",
-  "contactInfoDescription": "Complete the form and our team will respond shortly to help you take the next step.",
-  "contactEmail": "contact@shift-er.com",
-  "contactLocation": "Skopje, N. Macedonia",
-  "autoFilledNote": "These values are automatically populated from your profile. If any of them are incorrect, please update them in the Profile page.",
-  "name": "Name",
-  "email": "Email",
-  "subjectLabel": "Your Subject",
-  "subjectPlaceholder": "Enter the subject of your message",
-  "messageLabel": "Message",
-  "messagePlaceholder": "Write your message here...",
-  "emailError": "We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com",
-  "messageSentTitle": "Your message has been sent successfully!",
-  "messageSentDescription": "Thank you for reaching out to us. Our team will review your message and get back to you as soon as possible. Keep an eye on your <span class='font-semibold text-shifter'>inbox for our reply</span>.",
-  "sending": "Sending...",
-  "sendMessage": "Send Message"
-}
Index: ontend/src/locales/en/navbar.json
===================================================================
--- frontend/src/locales/en/navbar.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,11 +1,0 @@
-{
-  "courses": "Courses",
-  "mentoring": "Mentoring",
-  "consulting": "Consulting",
-  "academies": "Academies",
-  "about": "About",
-  "login": "Login / Register",
-  "learn": "My Learning",
-  "freeConsultation": "Free Consultation",
-  "contact": "Contact Us"
-}
Index: ontend/src/locales/en/personalize.json
===================================================================
--- frontend/src/locales/en/personalize.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,32 +1,0 @@
-{
-  "title": "Shift into Success",
-  "subtitle": "Start your journey toward smarter, scalable business growth.",
-  "backToMain": "Back to Main Page",
-  "verificationFailedTitle": "Verification Failed",
-  "verificationFailedMessage1": "We couldn’t verify your email address. The verification link may be invalid or expired.",
-  "verificationFailedMessage2": "Please try registering again or request a new verification link.",
-  "back": "Back",
-  "next": "Next",
-  "settingUp": "Setting up...",
-  "startUsing": "Start Using Shifter",
-
-  "stepOne": {
-    "fullName": "Full Name",
-    "fullNamePlaceholder": "John Doe",
-    "workPosition": "Work Position",
-    "workPositionPlaceholder": "Your Position",
-    "companySize": "Company Size",
-    "companySizeOptions": ["Freelance", "Micro", "Small", "Medium", "Mid Market", "Enterprise", "Other"],
-    "errorIncomplete": "Please ensure all inputs are completed."
-  },
-
-  "stepTwo": {
-    "interests": "Select Topics You Like",
-    "errorNoInterest": "Help us understand you better — select at least one topic you like"
-  },
-
-  "stepThree": {
-    "desiredSkills": "Outline Your Learning Goals",
-    "errorNoSkill": "We’d love to support your growth — select at least one skill you'd like to improve"
-  }
-}
Index: ontend/src/locales/en/register.json
===================================================================
--- frontend/src/locales/en/register.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,19 +1,0 @@
-{
-  "title": "Shift into Success",
-  "subtitle": "Start your journey toward smarter, scalable business growth.",
-  "backToMain": "Back to Main Page",
-  "emailLabel": "Email address",
-  "emailPlaceholder": "name@email.com",
-  "passwordLabel": "Password",
-  "passwordPlaceholder": "********",
-  "passwordConfirmationLabel": "Confirm password",
-  "passwordConfirmationPlaceholder": "********",
-  "createAccount": "Create Account",
-  "creatingAccount": "Creating account...",
-  "logIn": "Log In",
-  "or": "or",
-  "googleLogin": "Sign in with Google",
-  "verifyEmail": "Verify your email to continue",
-  "verificationSent1": "A verification link has been sent to",
-  "verificationSent2": "Please check your inbox and click the link to activate your account."
-}
Index: ontend/src/locales/mk/about.json
===================================================================
--- frontend/src/locales/mk/about.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,44 +1,0 @@
-{
-  "hero": {
-    "title": "Центар за Развој и Трансформација на Бизнисот",
-    "description": "<span class='font-semibold'>Shifter</span> е центар за развој и трансформација на бизнисот, нудејќи менторство, консултации, академии и е-учење за семејни бизниси."
-  },
-  "stats": {
-    "clients": "Овластени клиенти",
-    "hours": "Менторски часови",
-    "years": "Години Shifter"
-  },
-  "whyChoose": {
-    "title": "Зошто да го изберете <span class='font-bold text-shifter'>Shifter?</span>"
-  },
-  "reasons": [
-    {
-      "title": "Прилагодени стратегии",
-      "description": "Стратегии и програми дизајнирани специфично за целите и предизвиците на вашиот бизнис."
-    },
-    {
-      "title": "Овластување на клиенти",
-      "description": "Учиме клиенти како да решаваат предизвици самостојно, а не само да обезбедиме готови решенија."
-    },
-    {
-      "title": "Холистички пристап",
-      "description": "Севкупен метод кој се занимава со коренските причини во вашиот бизнис, а не само со симптомите."
-    },
-    {
-      "title": "Одржлив раст",
-      "description": "Стратегиски решенија кои ја зајакнуваат работата, тимовите и системите за долгорочен успех."
-    },
-    {
-      "title": "Експертска насока",
-      "description": "Решенија од професионалци кои ги прават бизнис предизвиците управливи."
-    }
-  ],
-  "about": {
-    "title": "За <span class='text-shifter font-black'>Shifter</span>",
-    "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-    "cta": "Закажете бесплатна консултација"
-  },
-  "foundations": {
-    "title": "Нашите основи"
-  }
-}
Index: ontend/src/locales/mk/academies.json
===================================================================
--- frontend/src/locales/mk/academies.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,20 +1,0 @@
-{
-  "heroTitle": "Трансформирајте ја експертизата на вашиот тим со Корпоративни Групни Академии и Обуки",
-  "heroDescription": "Трансформирајте го вашиот тим во синхронизирана единица на високо-ефикасни професионалци. Нашите Групни Академии обезбедуваат <strong class='font-bold'>стандардизирани, водени од експерти обуки</strong> за брзо надградување на цели оддели, затворање на јазовите во знаењето и обезбедување конзистентно извршување низ вашата организација. Прашајте сега за персонализирана ревизија на наставната програма за вашиот бизнис.",
-  "contactInfoTitle": "Контакт информации",
-  "contactInfoDescription": "Пополнете го формуларот и нашиот тим ќе одговори наскоро за да ви помогне да направите следен чекор.",
-  "contactEmail": "contact@shift-er.com",
-  "contactLocation": "Скопје, С. Македонија",
-  "autoFilledNote": "Овие вредности се автоматски пополнети од вашиот профил. Ако некоја од нив е неточна, ве молиме ажурирајте ја на страницата Профил.",
-  "name": "Име",
-  "email": "Е-пошта",
-  "subjectLabel": "Ваш предмет",
-  "subjectPlaceholder": "Внесете ја темата на вашето прашање",
-  "messageLabel": "Порака",
-  "messagePlaceholder": "Напишете ја вашата порака овде...",
-  "emailError": "Имаме привремени проблеми со нашиот сервис за е-пошта. Ве молиме обидете се повторно или контактирајте директно на contact@shift-er.com",
-  "messageSentTitle": "Вашата порака е успешно испратена!",
-  "messageSentDescription": "Ви благодариме што не контактиравте. Нашиот тим ќе ја прегледа вашата порака и ќе ве контактира што е можно поскоро. Следете ја вашата <span class='font-semibold text-shifter'>е-пошта за нашиот одговор</span>.",
-  "sending": "Се испраќа...",
-  "sendMessage": "Испрати порака"
-}
Index: ontend/src/locales/mk/consulting.json
===================================================================
--- frontend/src/locales/mk/consulting.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,20 +1,0 @@
-{
-  "heroTitle": "Персонализирано Стратешко Консултирање",
-  "heroDescription": "Нашиот консултантски ангажман обезбедува максимални резултати за клиентите со работа со <strong class='font-bold'>ограничен број места</strong>. Ова гарантира дека секој клиент добива <strong class='font-bold'>неподеленo внимание</strong> и континуирано стратешко извршување потребно за да обезбеди <strong class='font-bold'>мерливи резултати</strong>. Испратете ја вашата прашање за да започне процесот на квалификација за ексклузивна стратешка поддршка.",
-  "contactInfoTitle": "Контакт информации",
-  "contactInfoDescription": "Пополнете го формуларот и нашиот тим ќе одговори наскоро за да ви помогне да направите следен чекор.",
-  "contactEmail": "contact@shift-er.com",
-  "contactLocation": "Скопје, С. Македонија",
-  "autoFilledNote": "Овие вредности се автоматски пополнети од вашиот профил. Ако некоја од нив е неточна, ве молиме ажурирајте ја на страницата Профил.",
-  "name": "Име",
-  "email": "Е-пошта",
-  "subjectLabel": "Ваш предмет",
-  "subjectPlaceholder": "Внесете ја темата на вашето прашање",
-  "messageLabel": "Порака",
-  "messagePlaceholder": "Напишете ја вашата порака овде...",
-  "emailError": "Имаме привремени проблеми со нашиот сервис за е-пошта. Ве молиме обидете се повторно или контактирајте директно на contact@shift-er.com",
-  "messageSentTitle": "Вашата порака е успешно испратена!",
-  "messageSentDescription": "Ви благодариме што не контактиравте. Нашиот тим ќе ја прегледа вашата порака и ќе ве контактира што е можно поскоро. Следете ја вашата <span class='font-semibold text-shifter'>е-пошта за нашиот одговор</span>.",
-  "sending": "Се испраќа...",
-  "sendMessage": "Испрати порака"
-}
Index: ontend/src/locales/mk/contact.json
===================================================================
--- frontend/src/locales/mk/contact.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,24 +1,0 @@
-{
-  "hero": {
-    "title": "Претворете ја вашата визија во резултати",
-    "description": "Пополнете го формуларот и нашиот тим ќе ве контактира наскоро за да ви помогне да го направите следниот чекор."
-  },
-  "info": {
-    "title": "Контакт информации",
-    "description": "Пополнете го формуларот и нашиот тим ќе ве контактира наскоро за да ви помогне да го направите следниот чекор.",
-    "email": "contact@shift-er.com",
-    "location": "Скопје, РС Македонија"
-  },
-  "form": {
-    "subject": "Ваш предмет",
-    "subjectPlaceholder": "Внесете го предметот на вашата порака",
-    "message": "Порака",
-    "messagePlaceholder": "Напишете ја вашата порака овде...",
-    "sendingError": "Има привремени проблеми со нашата пошта. Ве молиме обидете се повторно или контактирајте не директно на contact@shift-er.com",
-    "successTitle": "Вашата порака е успешно испратена!",
-    "successDescription": "Ви благодариме што не контактиравте. Нашиот тим ќе ја прегледа вашата порака и ќе ве контактира што е можно поскоро. Проверете ја вашата пошта за одговор.",
-    "sendButton": "Испрати порака",
-    "sending": "Се испраќа..."
-  },
-  "profileNotice": "Овие вредности се автоматски пополнети од вашиот профил. Ако некои се неточни, ве молиме ажурирајте ги во Профил страницата."
-}
Index: ontend/src/locales/mk/courses.json
===================================================================
--- frontend/src/locales/mk/courses.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,7 +1,0 @@
-{
-  "title": "Подготвени за следниот",
-  "highlight": "чекор?",
-  "description": "Истражете курсеви дизајнирани не само за учење, туку и за трансформација на вашето размислување, усовршување на вештините и забрзување на патот кон реален успех. Без разлика дали ја развивате компанијата, водите тим или се развивате како професионалец, тука започнува трансформацијата.",
-  "rocketAlt": "Shifter ракета",
-  "difficultyOptions": ["Почетник", "Среден", "Напреден"]
-}
Index: ontend/src/locales/mk/footer.json
===================================================================
--- frontend/src/locales/mk/footer.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,49 +1,0 @@
-{
-  "cta": {
-    "title": { "part1": "Поедностави го твојот пат кон", "part2": "успехот" },
-    "subtitle": {
-      "line1": "Направи го првиот чекор кон поумни бизнис решенија.",
-      "line2": "Ние ќе те водиме во секој чекор."
-    },
-    "button": {
-      "consultation": "Закажи бесплатна консултација",
-      "contact": "Контактирај не"
-    }
-  },
-  "social": { "visit": "Посети не на" },
-  "sections": {
-    "services": {
-      "title": "Услуги",
-      "items": {
-        "mentoring": "Менторство",
-        "consulting": "Консалтинг",
-        "courses": "Курсеви",
-        "academies": "Академии"
-      }
-    },
-    "about": {
-      "title": "За нас",
-      "items": { "about": "За Shifter" }
-    },
-    "profile": {
-      "title": "Профил",
-      "items": {
-        "profile": "Профил",
-        "logout": "Одјави се",
-        "login": "Најави се / Регистрирај се"
-      }
-    },
-    "dashboard": {
-      "title": "Табла",
-      "items": {
-        "profile": "Профил",
-        "learning": "Моето учење"
-      }
-    },
-    "contact": {
-      "title": "Контакт",
-      "items": { "contact": "Контактирај не" }
-    }
-  },
-  "rights": "Сите права се задржани."
-}
Index: ontend/src/locales/mk/freeConsultation.json
===================================================================
--- frontend/src/locales/mk/freeConsultation.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,39 +1,0 @@
-{
-  "hero": {
-    "title": "Закажете бесплатна експертска сесија",
-    "description": "Разговарајте со експерт за вашите бизнис цели и предизвици. Добијте персонализирана препорака за програм, прилагодена на вашите потреби."
-  },
-  "nextSteps": {
-    "title": "Следни чекори по пополнување на формуларот?",
-    "steps": [
-      {"title": "Вашиот експерт е доделен","description":"Ние го доделуваме експертот за вашата сесија и ви испраќаме е-пошта со сите детали за средбата."},
-      {"title": "Експертот се подготвува за вашата сесија","description":"Вашиот експерт ги прегледува информациите што ги обезбедивте за да создаде вредни увиди и стратегија прилагодена на вашата ситуација."},
-      {"title": "Присуствувајте на вашата персонализирана сесија","description":"Приклучете се на сесијата и добијте практични насоки заедно со препорака за програм или менторство дизајнирана специјално за вашите цели."}
-    ]
-  },
-  "form": {
-    "profileHint": "Овие вредности се автоматски пополнети од вашиот профил. Доколку некоја од нив е неточна, ажурирајте ја на страницата Профил.",
-    "name": "Име",
-    "email": "Е-пошта",
-    "fields": {
-      "aboutCompany": {"label":"За вашиот бизнис","placeholder":"Што правите, индустрија, клиенти"},
-      "challenges": {"label":"Вашите тековни предизвици","placeholder":"На пример, продажба, раст, тимски проблеми"},
-      "expectations": {"label":"Што сакате од сесијата","placeholder":"Совет, стратегија, решенија"},
-      "otherInfo": {"label":"Сè друго","placeholder":"Дополнителен контекст или детали"}
-    },
-    "selectDate": "Изберете датум",
-    "selectTime": "Изберете време",
-    "book": "Закажи сесија",
-    "booking": "Закажување..."
-  },
-  "confirmation": {
-    "title": "Вашата бесплатна консултација е закажана! 🎉",
-    "description": "Пополнувањето на формуларот беше <span class='font-semibold text-shifter'>првиот чекор кон напредок и раст</span>. Проверете ја вашата <span class='font-semibold text-shifter'>е-пошта за Zoom линк.</span>"
-  },
-  "optionalHint": "<sup>*</sup> Овие полиња се опционални. Пополнувањето им помага на нашите експерти подобро да ги разберат вашите предизвици и цели, за да подготват персонализирана сесија.",
-  "errors": {
-    "selectDateTime": "Ве молиме изберете и датум и време.",
-    "alreadyUsed": "Не можеме да ја закажеме вашата сесија. Се чини дека веќе ја искористивте бесплатната консултација. Контактирајте нè преку страницата Контакт за повеќе опции.",
-    "failedSchedule": "Не успеавме да ја закажеме сесијата. Обидете се повторно подоцна или контактирајте ја поддршката."
-  }
-}
Index: ontend/src/locales/mk/home.json
===================================================================
--- frontend/src/locales/mk/home.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,95 +1,0 @@
-{
-  "hero": {
-    "label": "Shift 2 Win",
-    "title": "Едноставно растете и напредувајте",
-    "description": "Експертско водство, практични курсеви и групни академии дизајнирани да им помогнат на семејните бизниси да напредуваат.",
-    "cta": {
-      "freeConsultation": "Закажи бесплатна консултација",
-      "contact": "Контактирајте не"
-    },
-    "stats": {
-      "businessesEmpowered": {
-        "value": 250,
-        "label": "Поддржани Бизниси"
-      },
-      "mentoringHours": {
-        "value": 2000,
-        "label": "Часови Менторство"
-      },
-      "yearsOfShifter": {
-        "value": 4,
-        "label": "Години Историја"
-      }
-    }
-  },
-  "ourServices": {
-    "heading": "Решенија кои даваат вистински резултати",
-    "description": "Shifter се фокусира на јасни и практични чекори кои носат мерлив раст.",
-    "discoverMore": "Дознај повеќе",
-    "cards": [
-      {
-        "title": "Менторство",
-        "description": "Персонализирано менторство за да ги надминете предизвиците и да ги постигнете вашите цели.",
-        "link": "/mentoring"
-      },
-      {
-        "title": "Курсеви",
-        "description": "Курсеви на барање кои ве водат во секоја фаза од вашиот пат.",
-        "link": "/courses"
-      },
-      {
-        "title": "Консултации",
-        "description": "Целни консултации за решавање на специфични предизвици и обезбедување моментални резултати.",
-        "link": "/consulting"
-      },
-      {
-        "title": "Академии",
-        "description": "Структурирано групно учење за да се развивате и успевате заедно.",
-        "link": "/academies"
-      }
-    ]
-  },
-  "collaborationSteps": {
-    "heading": "Како да го започнете вашиот пат кон <strong>успех</strong>",
-    "button": "Започнете",
-    "step1": {
-      "beforeConsultation": {
-        "title": "Закажете бесплатна консултација",
-        "description": "Закажете консултација без обврски за да ги разгледате вашите предизвици, цели и очекувања."
-      },
-      "afterConsultation": {
-        "title": "Побарајте продолжена поддршка",
-        "description": "Контактирајте за да продолжите со вашиот пат со прилагодено водство за следните бизнис цели."
-      }
-    },
-    "step2": {
-      "title": "Споделете ги вашите потреби и цели",
-      "description": "Обезбедете јасни информации за предизвиците и амбициите на вашиот бизнис за да се создаде вистинската стратегија."
-    },
-    "step3": {
-      "title": "Прегледајте го вашиот персонализиран план",
-      "description": "Примете прилагодена патека со јасни, применливи чекори за да го постигнете бизнис успехот."
-    },
-    "step4": {
-      "title": "Започнете со имплементација и соработка",
-      "description": "Применете стручни совети и проверени стратегии со континуирана поддршка во текот на процесот."
-    }
-  },
-  "coursesCarousel": {
-    "heading": "Отклучете го вашиот раст со <strong class='text-shifter'>Е-учење</strong>",
-    "description": "Пристапете до курсеви водени од експерти кои ќе ви помогнат да го совладате бизнисот, стратегијата и успехот - секогаш и секаде."
-  },
-  "shifterValues": {
-    "heading": "Нашите Основни <strong class='text-shifter'>Вредности</strong>",
-    "description": "Нашите SHIFT вредности го дефинираат нашиот пристап кон менторство и консултации. Се фокусираме на Одржливи Резултати, Холистички Пристап, Длабинска Анализа, Решенија Базирани на Факти и Прилагодени Услуги – обезбедувајќи влијателен и траен успех.",
-    "valuesList": [
-      "Одржливи Резултати",
-      "Холистички Пристап",
-      "Длабинска Анализа",
-      "Решенија Базирани на Факти",
-      "Прилагодени Услуги"
-    ],
-    "button": "Прочитај Повеќе"
-  }
-
-}
Index: ontend/src/locales/mk/login.json
===================================================================
--- frontend/src/locales/mk/login.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,18 +1,0 @@
-{
-  "welcomeBack": "Добредојдовте повторно!",
-  "subtitle": "Да ја отклучиме вашата следна деловна пресвртница!",
-  "backToMain": "Назад кон главната страница",
-  "emailLabel": "Емаил адреса",
-  "emailPlaceholder": "ime@domen.com",
-  "passwordLabel": "Лозинка",
-  "passwordPlaceholder": "********",
-  "logIn": "Најави се",
-  "register": "Регистрирај се",
-  "loggingIn": "Се најавуваме...",
-  "or": "или",
-  "googleLogin": "Најави се со Google",
-  "errors": {
-    "fillAllFields": "Ве молиме пополнете ги сите полиња.",
-    "somethingWentWrong": "Нешто тргна наопаку. Обидете се повторно."
-  }
-}
Index: ontend/src/locales/mk/mentoring.json
===================================================================
--- frontend/src/locales/mk/mentoring.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,20 +1,0 @@
-{
-  "heroTitle": "Посветено 1:1 Менторство",
-  "heroDescription": "Нашата програма обезбедува максимален успех на клиентите со работа со <strong class='font-bold'>ограничен број места</strong>. Ова гарантира дека секој партнер добива <strong class='font-bold'>неподеленo внимание</strong> и континуиран стратешки влез потребен за <strong class='font-bold'>да ги оствари своите цели</strong>. Испратете ја вашата прашање за да започне проценката за едно од нашите посветени места.",
-  "contactInfoTitle": "Контакт информации",
-  "contactInfoDescription": "Пополнете го формуларот и нашиот тим ќе одговори наскоро за да ви помогне да направите следен чекор.",
-  "contactEmail": "contact@shift-er.com",
-  "contactLocation": "Скопје, С. Македонија",
-  "autoFilledNote": "Овие вредности се автоматски пополнети од вашиот профил. Ако некоја од нив е неточна, ве молиме ажурирајте ја на страницата Профил.",
-  "name": "Име",
-  "email": "Е-пошта",
-  "subjectLabel": "Ваш предмет",
-  "subjectPlaceholder": "Внесете ја темата на вашето прашање",
-  "messageLabel": "Порака",
-  "messagePlaceholder": "Напишете ја вашата порака овде...",
-  "emailError": "Имаме привремени проблеми со нашиот сервис за е-пошта. Ве молиме обидете се повторно или контактирајте директно на contact@shift-er.com",
-  "messageSentTitle": "Вашата порака е успешно испратена!",
-  "messageSentDescription": "Ви благодариме што не контактиравте. Нашиот тим ќе ја прегледа вашата порака и ќе ве контактира што е можно поскоро. Проверете ја вашата <span class='font-semibold text-shifter'>влезна пошта за одговор</span>.",
-  "sending": "Се испраќа...",
-  "sendMessage": "Испрати порака"
-}
Index: ontend/src/locales/mk/navbar.json
===================================================================
--- frontend/src/locales/mk/navbar.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,11 +1,0 @@
-{
-  "courses": "Курсеви",
-  "mentoring": "Менторство",
-  "consulting": "Консалтинг",
-  "academies": "Академии",
-  "about": "За Нас",
-  "login": "Најави се / Регистрирај се",
-  "learn": "Мое Учење",
-  "freeConsultation": "Бесплатна Сесија",
-  "contact": "Контакт"
-}
Index: ontend/src/locales/mk/personalize.json
===================================================================
--- frontend/src/locales/mk/personalize.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,32 +1,0 @@
-{
-  "title": "Прескокни кон успех",
-  "subtitle": "Започнете го вашето патување кон паметен и скалабилен бизнис раст.",
-  "backToMain": "Назад кон главната страница",
-  "verificationFailedTitle": "Верификацијата не успеа",
-  "verificationFailedMessage1": "Не можевме да ја верифицираме вашата емаил адреса. Линкот за верификација може да е невалиден или истечен.",
-  "verificationFailedMessage2": "Ве молиме обидете се повторно со регистрацијата или побарајте нов линк за верификација.",
-  "back": "Назад",
-  "next": "Следно",
-  "settingUp": "Се подесува...",
-  "startUsing": "Започни да користиш Shifter",
-
-  "stepOne": {
-    "fullName": "Целосно име",
-    "fullNamePlaceholder": "Јован Јованов",
-    "workPosition": "Работно место",
-    "workPositionPlaceholder": "Вашата позиција",
-    "companySize": "Големина на компанијата",
-    "companySizeOptions": ["Фриленсер", "Микро", "Мала", "Средна", "Среден пазар", "Голема компанија", "Друго"],
-    "errorIncomplete": "Ве молиме пополнете ги сите полиња."
-  },
-
-  "stepTwo": {
-    "interests": "Изберете теми кои ви се допаѓаат",
-    "errorNoInterest": "Помогнете ни да ве разбереме подобро — изберете барем една тема која ви се допаѓа"
-  },
-
-  "stepThree": {
-    "desiredSkills": "Опишете ги вашите цели за учење",
-    "errorNoSkill": "Би сакале да го поддржиме вашиот раст — изберете барем една вештина која сакате да ја усовршите"
-  }
-}
Index: ontend/src/locales/mk/register.json
===================================================================
--- frontend/src/locales/mk/register.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,19 +1,0 @@
-{
-  "title": "Прескокни кон успех",
-  "subtitle": "Започнете го вашето патување кон паметен и скалабилен бизнис раст.",
-  "backToMain": "Назад кон главната страница",
-  "emailLabel": "Емаил адреса",
-  "emailPlaceholder": "ime@domen.com",
-  "passwordLabel": "Лозинка",
-  "passwordPlaceholder": "********",
-  "passwordConfirmationLabel": "Потврдете ја лозинката",
-  "passwordConfirmationPlaceholder": "********",
-  "createAccount": "Креирај сметка",
-  "creatingAccount": "Се креира сметка...",
-  "logIn": "Најави се",
-  "or": "или",
-  "googleLogin": "Најави се со Google",
-  "verifyEmail": "Верифицирајте ја вашата емаил адреса за продолжување",
-  "verificationSent1": "Линк за верификација е испратен на",
-  "verificationSent2": "Ве молиме проверете ја вашата е-пошта и кликнете на линкот за да ја активирате вашата сметка."
-}
Index: ontend/src/main.tsx
===================================================================
--- frontend/src/main.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,19 +1,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import './global.css';
-import App from './App.tsx'
-import {AuthProvider} from "./context/AuthContext.tsx";
-import {BrowserRouter} from "react-router-dom";
-import "./i18n.ts";
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-      <BrowserRouter>
-          <AuthProvider>
-              <App />
-          </AuthProvider>
-      </BrowserRouter>
-  </StrictMode>,
-)
Index: ontend/src/models/FilterParams.tsx
===================================================================
--- frontend/src/models/FilterParams.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,10 +1,0 @@
-
-export interface FilterParams {
-    showOnlyFavoriteCourses?: boolean;
-    search?: string[];
-    difficulty?: string[];
-    price?: string[];
-    duration?: string[];
-    skill?: string[];
-    topic?: string[];
-}
Index: ontend/src/models/FilterRange.tsx
===================================================================
--- frontend/src/models/FilterRange.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,4 +1,0 @@
-export interface FilterRange {
-    floor: number;
-    ceil: number;
-}
Index: ontend/src/models/Review.tsx
===================================================================
--- frontend/src/models/Review.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,7 +1,0 @@
-export interface Review {
-    id: number;
-    rating: number;
-    comment: string;
-    date: Date;
-    enrollmentId: number;
-}
Index: ontend/src/models/SelectProps.tsx
===================================================================
--- frontend/src/models/SelectProps.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,11 +1,0 @@
-import React from "react";
-import type {UserPersonalization} from "./javaObjects/UserPersonalization.tsx";
-
-export interface SelectProps {
-    label: string;
-    name: keyof UserPersonalization;
-    id: string;
-    options?: string[];
-    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>;
-    user: UserPersonalization;
-}
Index: ontend/src/models/SliderProps.tsx
===================================================================
--- frontend/src/models/SliderProps.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,12 +1,0 @@
-import React from "react";
-import type {UserPersonalization} from "./javaObjects/UserPersonalization.tsx";
-
-type UserArrayFields = 'interests' | 'desiredSkills';
-export interface SliderProps {
-    label: string;
-    name: UserArrayFields;
-    id: string;
-    options?: string[];
-    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>;
-    user: UserPersonalization;
-}
Index: ontend/src/models/UserMeetingInfoRequest.tsx
===================================================================
--- frontend/src/models/UserMeetingInfoRequest.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,6 +1,0 @@
-export interface UserMeetingInfoRequest {
-    aboutCompany: string;
-    challenges: string;
-    expectations: string;
-    otherInfo: string;
-}
Index: ontend/src/models/javaObjects/CourseContentFull.tsx
===================================================================
--- frontend/src/models/javaObjects/CourseContentFull.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,8 +1,0 @@
-import type {CourseLectureFull} from "./CourseLectureFull.tsx";
-
-export interface CourseContentFull {
-    id: number;
-    title: string;
-    position: number;
-    courseLectures: CourseLectureFull[];
-}
Index: ontend/src/models/javaObjects/CourseContentPreview.tsx
===================================================================
--- frontend/src/models/javaObjects/CourseContentPreview.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,7 +1,0 @@
-import type {CourseLecturePreview} from "./CourseLecturePreview.tsx";
-
-export interface CourseContentPreview {
-    title: string;
-    position: number;
-    courseLectures: CourseLecturePreview[];
-}
Index: ontend/src/models/javaObjects/CourseDetail.tsx
===================================================================
--- frontend/src/models/javaObjects/CourseDetail.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,10 +1,0 @@
-import type {CoursePreview} from "./CoursePreview.tsx";
-import type {CourseContentPreview} from "./CourseContentPreview.tsx";
-
-export interface CourseDetail extends CoursePreview {
-    descriptionShort: string;
-    description: string;
-    descriptionLong: string;
-    whatWillBeLearned: string[];
-    courseContents: CourseContentPreview[];
-}
Index: ontend/src/models/javaObjects/CourseFull.tsx
===================================================================
--- frontend/src/models/javaObjects/CourseFull.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,10 +1,0 @@
-import type {CourseContentFull} from "./CourseContentFull.tsx";
-
-export interface CourseFull {
-    id: number,
-    titleShort: string;
-    title: string;
-    rating: number;
-    isFinished: boolean;
-    courseContents: CourseContentFull[];
-}
Index: ontend/src/models/javaObjects/CourseLectureFull.tsx
===================================================================
--- frontend/src/models/javaObjects/CourseLectureFull.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,14 +1,0 @@
-import type {ContentType} from "../types/ContentType.tsx";
-import type {UserCourseProgress} from "./UserCourseProgress.tsx";
-
-export interface CourseLectureFull {
-    id: number;
-    title: string;
-    description: string;
-    durationMinutes: number;
-    position: number;
-    contentText: string;
-    contentFileName: string;
-    contentType: ContentType;
-    userCourseProgress: UserCourseProgress;
-}
Index: ontend/src/models/javaObjects/CourseLecturePreview.tsx
===================================================================
--- frontend/src/models/javaObjects/CourseLecturePreview.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,9 +1,0 @@
-import type {ContentType} from "../types/ContentType.tsx";
-
-export interface CourseLecturePreview {
-    title: string;
-    description: string;
-    durationMinutes: number;
-    position: number;
-    contentType: ContentType;
-}
Index: ontend/src/models/javaObjects/CoursePreview.tsx
===================================================================
--- frontend/src/models/javaObjects/CoursePreview.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,18 +1,0 @@
-import type {Difficulty} from "../types/Difficulty.tsx";
-
-export interface CoursePreview {
-    id: number,
-    imageUrl: string;
-    color: string;
-    titleShort: string;
-    title: string;
-    difficulty: Difficulty;
-    durationMinutes: number;
-    price: number;
-    skillsGained: string[];
-    topicsCovered: string[];
-    courseContentCount: number;
-    courseLectureCount: number;
-    averageRating: number;
-}
-
Index: ontend/src/models/javaObjects/CoursePreviewEnrolled.tsx
===================================================================
--- frontend/src/models/javaObjects/CoursePreviewEnrolled.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,8 +1,0 @@
-import type {CoursePreview} from "./CoursePreview.tsx";
-
-export interface CoursePreviewEnrolled extends CoursePreview {
-    lecturesFinishedCount: number;
-    rating: number;
-    isFinished: boolean;
-}
-
Index: ontend/src/models/javaObjects/Enrollment.tsx
===================================================================
--- frontend/src/models/javaObjects/Enrollment.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,7 +1,0 @@
-
-export interface Enrollment {
-    enrollmentStatus: "PENDING" | "ACTIVE" | "COMPLETED";
-    percentCompleted: number;
-    date: Date;
-    courseId: number;
-}
Index: ontend/src/models/javaObjects/User.tsx
===================================================================
--- frontend/src/models/javaObjects/User.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,14 +1,0 @@
-export interface User {
-    id: number,
-    email: string;
-    name: string;
-    hasUsedFreeConsultation: boolean;
-    companySize: string;
-    workPosition: string;
-    interests: string[];
-    skills: string[];
-    desiredSkills: string[];
-    points: number;
-    favoriteCourses: number[];
-    isAdmin: boolean;
-}
Index: ontend/src/models/javaObjects/UserCourseProgress.tsx
===================================================================
--- frontend/src/models/javaObjects/UserCourseProgress.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,6 +1,0 @@
-
-export interface UserCourseProgress {
-    id: number;
-    completedAt: Date | null;
-    completed: boolean;
-}
Index: ontend/src/models/javaObjects/UserPersonalization.tsx
===================================================================
--- frontend/src/models/javaObjects/UserPersonalization.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,8 +1,0 @@
-export interface UserPersonalization {
-    name: string;
-    email: string;
-    companySize: string;
-    workPosition: string;
-    interests: string[];
-    desiredSkills: string[];
-}
Index: ontend/src/models/types/ContentType.tsx
===================================================================
--- frontend/src/models/types/ContentType.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,1 +1,0 @@
-export type ContentType = "VIDEO" | "TEXT" | "FILE" | "QUIZ" | "TOOL";
Index: ontend/src/models/types/Difficulty.tsx
===================================================================
--- frontend/src/models/types/Difficulty.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,1 +1,0 @@
-export type Difficulty = "BEGINNER" | "INTERMEDIATE" | "ADVANCED" | "EXPERT";
Index: ontend/src/pages/About.tsx
===================================================================
--- frontend/src/pages/About.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,140 +1,0 @@
-import {
-    IconTrendingUp,
-    IconRotate360,
-    IconRoute, IconChessKnight, IconArrowBigUp
-} from '@tabler/icons-react';
-import {LightBeams} from "../assets/animations/SpikeAnimation.tsx"
-import CountUp from "react-countup";
-import {Link} from "react-router-dom";
-import {ArrowRight} from "lucide-react";
-import MagicBento from "../assets/animations/MagicBento.tsx";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterArrow from "../../public/Shifter-Arrow-White.png"
-import { useTranslation } from "react-i18next";
-
-const About = () => {
-    const { t } = useTranslation("about");
-
-    const reasons = [
-        {
-            icon: <IconChessKnight size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
-            title: t("reasons.0.title"),
-            description: t("reasons.0.description"),
-        },
-        {
-            icon: <IconArrowBigUp size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
-            title: t("reasons.1.title"),
-            description: t("reasons.1.description"),
-        },
-        {
-            icon: <IconRotate360 size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
-            title: t("reasons.2.title"),
-            description: t("reasons.2.description"),
-        },
-        {
-            icon: <IconTrendingUp size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
-            title: t("reasons.3.title"),
-            description: t("reasons.3.description"),
-        },
-        {
-            icon: <IconRoute size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
-            title: t("reasons.4.title"),
-            description: t("reasons.4.description"),
-        }
-    ];
-
-    return (
-        <main className="relative bg-beige text-black-text">
-            {/*Hero Section*/}
-            <section className="relative py-vertical-lg pt-top-nav-lg px-horizontal-md flex flex-col items-center justify-center">
-                <LightBeams tilt={-50} beamCount={120} initialHeight={120 + Math.random() * 80} spikeMoveDown={40} />
-
-                <div className="flex flex-col items-center gap-20 z-1">
-                    <div className="flex flex-col  gap-4 max-w-3/4">
-                        <h1 className="text-7xl font-semibold" dangerouslySetInnerHTML={{__html: t("hero.title")}}/>
-                        <p className="text-xl font-light" dangerouslySetInnerHTML={{__html: t("hero.description")}}/>
-                    </div>
-
-                    <div className="flex justify-evenly items-stretch w-full">
-                        <div>
-                            <h2 className="text-3xl font-bold"><CountUp start={0} end={250} duration={4} separator={"."}/>+</h2>
-                            <p className="font-light whitespace-nowrap">{t("stats.clients")}</p>
-                        </div>
-
-                        <div className="w-px bg-beige/80"/>
-
-                        <div>
-                            <h2 className="text-3xl font-bold"><CountUp start={0} end={2000} duration={4} separator={"."}/>+</h2>
-                            <p className="font-light whitespace-nowrap">{t("stats.hours")}</p>
-                        </div>
-
-                        <div className="w-px bg-beige/80"/>
-
-                        <div>
-                            <h2 className="text-3xl font-bold"><CountUp start={0} end={4} duration={4} separator={"."}/>+</h2>
-                            <p className="font-light whitespace-nowrap">{t("stats.years")}</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div
-                    className="absolute bottom-0 w-full h-3/10"
-                    style={{ background: "linear-gradient(to bottom, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 100%)", pointerEvents: "none" }}
-                />
-            </section>
-
-            {/*Why Choose Us*/}
-            <section className="grid grid-cols-3 grid-rows-2 px-horizontal-md py-vertical-lg gap-20">
-                <div className="col-span-1 flex flex-col">
-                    <h2 className="text-5xl font-medium text-left " dangerouslySetInnerHTML={{__html: t("whyChoose.title")}}/>
-                </div>
-
-                {reasons.map((reason, index) => (
-                    <article key={index} className="col-span-1 flex flex-col gap-6 items-center">
-                        {reason.icon}
-                        <div className="flex flex-col gap-2 items-center">
-                            <h3 className="text-3xl font-bold">{reason.title}</h3>
-                            <p className="text-black-text/60">{reason.description}</p>
-                        </div>
-                    </article>
-                ))}
-            </section>
-
-            {/*About Section*/}
-            <section className="grid grid-cols-2 gap-x-40 px-horizontal-md py-vertical-lg bg-dark-blue/5">
-                <div className="col-start-1 col-span-1 flex flex-col text-left gap-12">
-                    <div className="flex flex-col gap-20">
-                        <div className="flex flex-col gap-4">
-                            <h2 className="text-5xl font-medium" dangerouslySetInnerHTML={{__html: t("about.title")}}/>
-                            <p dangerouslySetInnerHTML={{__html: t("about.description")}}/>
-                        </div>
-
-                        <Link to={"/free-consultation"} className="hover:shadow-shifter/60 shadow-shifter/40 transition-all duration-250 ease-in-out shadow-md border-2 border-white/40 flex gap-4 items-center text-white bg-shifter px-8 py-2 w-fit rounded-md group font-medium">
-                            {t("about.cta")} <ArrowRight size={20} strokeWidth={1.5} className="group-hover:translate-x-1 transition-all duration-250 ease-in-out"/>
-                        </Link>
-                    </div>
-                </div>
-
-                <div className="col-start-2 col-span-1 h-full bg-black/20 rounded-2xl"/>
-            </section>
-
-            {/*Mission, Vision & Purpose*/}
-            <section className="flex flex-col gap-12 px-horizontal-md py-vertical-lg ">
-                <h2 className="text-5xl font-medium">{t("foundations.title")}</h2>
-                <MagicBento
-                    textAutoHide={true}
-                    enableStars={false}
-                    enableSpotlight={true}
-                    enableBorderGlow={true}
-                    enableTilt={true}
-                    enableMagnetism={true}
-                    clickEffect={false}
-                    spotlightRadius={300}
-                />
-            </section>
-        </main>
-    );
-}
-
-export default About;
Index: ontend/src/pages/Academies.tsx
===================================================================
--- frontend/src/pages/Academies.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,165 +1,0 @@
-import {Mail, MapPin} from "lucide-react"
-import React from "react";
-import {useAuthContext} from "../context/AuthContext.tsx";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import Arrow from "../../public/Shifter-Arrow-White.png"
-import {sendEmailApi} from "../api/contactApi.ts";
-import { useTranslation } from "react-i18next";
-
-function Academies() {
-    const {t} = useTranslation("academies");
-    const {user, accessToken} = useAuthContext();
-    const [subject, setSubject] = React.useState("");
-    const [message, setMessage] = React.useState("");
-    const [loading, setLoading] = React.useState(false);
-    const [error, setError] = React.useState("");
-    const [isMessageSent, setIsMessageSent] = React.useState(false);
-
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-
-        setLoading(true);
-        sendEmailApi(accessToken || "", "Academies Inquiry - " + subject, message)
-            .then(() => {
-                setIsMessageSent(true);
-                setError("")
-            })
-            .catch((err) => {
-                setError(t("emailError"));
-                console.error("Error sending email for academies inquiry:", err);
-            })
-            .finally(() => setLoading(false));
-    }
-
-    return (
-        <main className="bg-gradient-to-b from-shifter via-shifter/20 via-40% to-beige">
-            {/*Hero*/}
-            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg
-                text-white-text">
-                <h1 className="text-5xl font-bold" dangerouslySetInnerHTML={{__html: t("heroTitle")}}/>
-                <p className="text-xl font-light" dangerouslySetInnerHTML={{__html: t("heroDescription")}}/>
-            </section>
-
-            {/*Contact Form*/}
-            <section className=" flex items-center justify-center w-full px-horizontal-lg">
-                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4
-                    shadow-md shadow-black/10">
-
-                    {/*Contact Info*/}
-                    <div className="border-1 border-white/40
-                    relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
-                        <div className="flex flex-col gap-2 items-start text-left">
-                            <h2 className="text-2xl font-semibold whitespace-nowrap">{t("contactInfoTitle")}</h2>
-                            <p className="text-white/80 font-light text-sm">{t("contactInfoDescription")}</p>
-                        </div>
-                        <div className="flex gap-4 items-center">
-                            <Mail size={24} color="var(--color-white)"/>
-                            {t("contactEmail")}
-                        </div>
-                        <div className="flex gap-4 items-center">
-                            <MapPin size={24} color="var(--color-white)"/>
-                            {t("contactLocation")}
-                        </div>
-
-                        <div className="absolute -bottom-26 right-12 flex flex-col opacity-40 rotate-40">
-                            <img src={Arrow} className="w-28 h-auto" alt="Shifter Arrow"/>
-                            <img src={Arrow} className="w-28 h-auto rotate-180" alt="Shifter Arrow"/>
-                        </div>
-                    </div>
-
-                    {/*Form*/}
-                    <div className="flex flex-col gap-4 col-span-2">
-                        <div className="grid grid-cols-2 gap-4 items-center">
-                            <p className="text-black/40 text-xs col-span-2">{t("autoFilledNote")}</p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">
-                                {t("name")}: <span className="text-black-text font-normal">{user?.name}</span>
-                            </p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">
-                                {t("email")}: <span className="text-black-text font-normal">{user?.email}</span>
-                            </p>
-                        </div>
-
-                        <hr className="border-t-1 border-black/20 rounded-full"/>
-
-                        <form
-                            onSubmit={handleSubmit}
-                            className="flex flex-col gap-4 items-start">
-                            <div className="flex flex-col gap-4 items-center w-full">
-                                <TextInput
-                                    label={t("subjectLabel")}
-                                    name="subject"
-                                    placeholder={t("subjectPlaceholder")}
-                                    rows={1}
-                                    onChange={(e) => setSubject(e.target.value)}
-                                />
-                                <TextInput
-                                    label={t("messageLabel")}
-                                    name="message"
-                                    placeholder={t("messagePlaceholder")}
-                                    rows={8}
-                                    onChange={(e) => setMessage(e.target.value)}
-                                />
-                                {
-                                    error && (
-                                        <p className="text-red-500 text-md font-medium text-center">
-                                            {error}
-                                        </p>
-                                    )
-                                }
-                            </div>
-                            {
-                                isMessageSent ? (
-                                    <div className="text-center w-full">
-                                        <h2 className="text-xl font-bold text-shifter mb-2">{t("messageSentTitle")}</h2>
-                                        <p className="text-md font-medium text-black/80 max-w-xl mx-auto" dangerouslySetInnerHTML={{__html: t("messageSentDescription")}}/>
-                                    </div>
-                                ) : (
-                                    <div className="flex items-center gap-6">
-                                        <button
-                                            className="hover:shadow-shifter/60 transition-all duration-200 ease-in-out
-                                    disabled:cursor-not-allowed disabled:opacity-60
-                                    shadow-md shadow-shifter/40 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
-                                            disabled={loading}
-                                            type="submit">
-                                            {loading ? t("sending") : t("sendMessage")}
-                                        </button>
-                                        {
-                                            loading && <div className="loader"/>
-                                        }
-                                    </div>
-                                )}
-                        </form>
-                    </div>
-                </div>
-            </section>
-        </main>
-    )
-}
-
-
-function TextInput({label, name, placeholder, rows, onChange}: {
-    label: string;
-    name: string;
-    placeholder: string;
-    rows: number;
-    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}) {
-    return (
-        <label className="w-full flex flex-col items-start gap-2">
-            <span className="text-black/40 font-semibold text-md peer-focused:text-shifter">{label}</span>
-            <textarea
-                required
-                onChange={onChange}
-                rows={rows}
-                name={name}
-                className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm
-                resize-none min-h-fit custom-scrollbar
-                focus:outline-none focus:border-shifter/40 focus:border-2"
-                placeholder={placeholder}
-            />
-        </label>
-    )
-}
-
-export default Academies;
Index: ontend/src/pages/Consulting.tsx
===================================================================
--- frontend/src/pages/Consulting.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,147 +1,0 @@
-import { Mail, MapPin } from "lucide-react";
-import { useState } from "react";
-import { useAuthContext } from "../context/AuthContext.tsx";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import Arrow from "../../public/Shifter-Arrow-White.png";
-import { sendEmailApi } from "../api/contactApi.ts";
-import { useTranslation } from "react-i18next";
-
-function Consulting() {
-    const { t } = useTranslation("consulting");
-    const { user, accessToken } = useAuthContext();
-    const [subject, setSubject] = useState("");
-    const [message, setMessage] = useState("");
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState("");
-    const [isMessageSent, setIsMessageSent] = useState(false);
-
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-
-        setLoading(true);
-        sendEmailApi(accessToken || "", "Consulting Inquiry - " + subject, message)
-            .then(() => {
-                setIsMessageSent(true);
-                setError("");
-            })
-            .catch((err) => {
-                setError(t("emailError"));
-                console.error("Error sending email for consulting inquiry:", err);
-            })
-            .finally(() => setLoading(false));
-    }
-
-    return (
-        <main className="bg-gradient-to-b from-shifter via-shifter/20 via-40% to-beige">
-            {/*Hero*/}
-            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg text-white-text">
-                <h1 className="text-5xl font-bold">{t("heroTitle")}</h1>
-                <p className="text-xl font-light" dangerouslySetInnerHTML={{ __html: t("heroDescription") }} />
-            </section>
-
-            {/*Contact Form*/}
-            <section className="flex items-center justify-center w-full px-horizontal-lg">
-                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4 shadow-md shadow-black/10">
-                    {/*Contact Info*/}
-                    <div className="border-1 border-white/40 relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
-                        <div className="flex flex-col gap-2 items-start text-left">
-                            <h2 className="text-2xl font-semibold whitespace-nowrap">{t("contactInfoTitle")}</h2>
-                            <p className="text-white/80 font-light text-sm">{t("contactInfoDescription")}</p>
-                        </div>
-                        <div className="flex gap-4 items-center">
-                            <Mail size={24} color="var(--color-white)" />
-                            {t("contactEmail")}
-                        </div>
-                        <div className="flex gap-4 items-center">
-                            <MapPin size={24} color="var(--color-white)" />
-                            {t("contactLocation")}
-                        </div>
-
-                        <div className="absolute -bottom-26 right-12 flex flex-col opacity-40 rotate-40">
-                            <img src={Arrow} className="w-28 h-auto" alt="Shifter Arrow" />
-                            <img src={Arrow} className="w-28 h-auto rotate-180" alt="Shifter Arrow" />
-                        </div>
-                    </div>
-
-                    {/*Form*/}
-                    <div className="flex flex-col gap-4 col-span-2">
-                        <div className="grid grid-cols-2 gap-4 items-center">
-                            <p className="text-black/40 text-xs col-span-2">{t("autoFilledNote")}</p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
-                                {t("name")}: <span className="text-black-text font-normal">{user?.name}</span>
-                            </p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
-                                {t("email")}: <span className="text-black-text font-normal">{user?.email}</span>
-                            </p>
-                        </div>
-
-                        <hr className="border-t-1 border-black/20 rounded-full" />
-
-                        <form onSubmit={handleSubmit} className="flex flex-col gap-4 items-start">
-                            <div className="flex flex-col gap-4 items-center w-full">
-                                <TextInput
-                                    label={t("subjectLabel")}
-                                    name="subject"
-                                    placeholder={t("subjectPlaceholder")}
-                                    rows={1}
-                                    onChange={(e) => setSubject(e.target.value)}
-                                />
-                                <TextInput
-                                    label={t("messageLabel")}
-                                    name="message"
-                                    placeholder={t("messagePlaceholder")}
-                                    rows={8}
-                                    onChange={(e) => setMessage(e.target.value)}
-                                />
-                                {error && <p className="text-red-500 text-md font-medium text-center">{error}</p>}
-                            </div>
-
-                            {isMessageSent ? (
-                                <div className="text-center w-full">
-                                    <h2 className="text-xl font-bold text-shifter mb-2">{t("messageSentTitle")}</h2>
-                                    <p className="text-md font-medium text-black/80 max-w-xl mx-auto" dangerouslySetInnerHTML={{ __html: t("messageSentDescription") }} />
-                                </div>
-                            ) : (
-                                <div className="flex items-center gap-6">
-                                    <button
-                                        className="hover:shadow-shifter/60 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-60 shadow-md shadow-shifter/40 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
-                                        disabled={loading}
-                                        type="submit"
-                                    >
-                                        {loading ? t("sending") : t("sendMessage")}
-                                    </button>
-                                    {loading && <div className="loader" />}
-                                </div>
-                            )}
-                        </form>
-                    </div>
-                </div>
-            </section>
-        </main>
-    );
-}
-
-function TextInput({ label, name, placeholder, rows, onChange }: {
-    label: string;
-    name: string;
-    placeholder: string;
-    rows: number;
-    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}) {
-    return (
-        <label className="w-full flex flex-col items-start gap-2">
-            <span className="text-black/40 font-semibold text-md peer-focused:text-shifter">{label}</span>
-            <textarea
-                required
-                onChange={onChange}
-                rows={rows}
-                name={name}
-                className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm resize-none min-h-fit custom-scrollbar focus:outline-none focus:border-shifter/40 focus:border-2"
-                placeholder={placeholder}
-            />
-        </label>
-    );
-}
-
-export default Consulting;
Index: ontend/src/pages/Contact.tsx
===================================================================
--- frontend/src/pages/Contact.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,142 +1,0 @@
-import { Mail, MapPin } from "lucide-react";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { useAuthContext } from "../context/AuthContext.tsx";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import Arrow from "../../public/Shifter-Arrow-White.png";
-import { sendEmailApi } from "../api/contactApi.ts";
-
-function Contact() {
-    const { t } = useTranslation("contact");
-    const { user, accessToken } = useAuthContext();
-    const [subject, setSubject] = React.useState("");
-    const [message, setMessage] = React.useState("");
-    const [loading, setLoading] = React.useState(false);
-    const [error, setError] = React.useState("");
-    const [isMessageSent, setIsMessageSent] = React.useState(false);
-
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-
-        setLoading(true);
-        sendEmailApi(accessToken || "", subject, message)
-            .then(() => {
-                setIsMessageSent(true);
-                setError("");
-            })
-            .catch((err) => {
-                setError(t("form.sendingError"));
-                console.error("Error sending email for contact form:", err);
-            })
-            .finally(() => setLoading(false));
-    };
-
-    return (
-        <main className="bg-gradient-to-b from-shifter via-shifter/20 via-40% to-beige">
-            {/* Hero */}
-            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg text-white-text">
-                <h1 className="text-5xl font-bold">{t("hero.title")}</h1>
-                <p className="text-xl font-light">{t("hero.description")}</p>
-            </section>
-
-            {/* Contact Form */}
-            <section className="flex items-center justify-center w-full px-horizontal-lg">
-                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4 shadow-md shadow-black/10">
-                    {/* Contact Info */}
-                    <div className="border-1 border-white/40 relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
-                        <div className="flex flex-col gap-2 items-start text-left">
-                            <h2 className="text-2xl font-semibold whitespace-nowrap">{t("info.title")}</h2>
-                            <p className="text-white/80 font-light text-sm">{t("info.description")}</p>
-                        </div>
-                        <div className="flex gap-4 items-center">
-                            <Mail size={24} color="var(--color-white)" />
-                            {t("info.email")}
-                        </div>
-                        <div className="flex gap-4 items-center">
-                            <MapPin size={24} color="var(--color-white)" />
-                            {t("info.location")}
-                        </div>
-                        <div className="absolute -bottom-26 right-12 flex flex-col opacity-40 rotate-40">
-                            <img src={Arrow} className="w-28 h-auto" alt="Shifter Arrow" />
-                            <img src={Arrow} className="w-28 h-auto rotate-180" alt="Shifter Arrow" />
-                        </div>
-                    </div>
-
-                    {/* Form */}
-                    <div className="flex flex-col gap-4 col-span-2">
-                        <div className="grid grid-cols-2 gap-4 items-center">
-                            <p className="text-black/40 text-xs col-span-2">{t("profileNotice")}</p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
-                                Name: <span className="text-black-text font-normal">{user?.name}</span>
-                            </p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
-                                Email: <span className="text-black-text font-normal">{user?.email}</span>
-                            </p>
-                        </div>
-
-                        <hr className="border-t-1 border-black/20 rounded-full" />
-
-                        <form onSubmit={handleSubmit} className="flex flex-col gap-12 items-start">
-                            <div className="flex flex-col gap-4 items-center w-full">
-                                <TextInput
-                                    label={t("form.subject")}
-                                    name="subject"
-                                    placeholder={t("form.subjectPlaceholder")}
-                                    rows={1}
-                                    onChange={(e) => setSubject(e.target.value)}
-                                />
-                                <TextInput
-                                    label={t("form.message")}
-                                    name="message"
-                                    placeholder={t("form.messagePlaceholder")}
-                                    rows={8}
-                                    onChange={(e) => setMessage(e.target.value)}
-                                />
-                                {error && <p className="text-red-500 text-md font-medium text-center">{error}</p>}
-                            </div>
-
-                            {isMessageSent ? (
-                                <div className="text-center w-full">
-                                    <h2 className="text-xl font-bold text-shifter mb-2">{t("form.successTitle")}</h2>
-                                    <p className="text-md font-medium text-black/80 max-w-xl mx-auto">
-                                        {t("form.successDescription")}
-                                    </p>
-                                </div>
-                            ) : (
-                                <div className="flex items-center gap-6">
-                                    <button
-                                        className="hover:shadow-shifter/60 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-60 shadow-md shadow-shifter/40 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
-                                        disabled={loading}
-                                        type="submit"
-                                    >
-                                        {loading ? t("form.sending") : t("form.sendButton")}
-                                    </button>
-                                    {loading && <div className="loader" />}
-                                </div>
-                            )}
-                        </form>
-                    </div>
-                </div>
-            </section>
-        </main>
-    );
-}
-
-function TextInput({ label, name, placeholder, rows, onChange }: { label: string; name: string; placeholder: string; rows: number; onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void }) {
-    return (
-        <label className="w-full flex flex-col items-start gap-2">
-            <span className="text-black/40 font-semibold text-md peer-focused:text-shifter">{label}</span>
-            <textarea
-                required
-                onChange={onChange}
-                rows={rows}
-                name={name}
-                className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm resize-none min-h-fit custom-scrollbar focus:outline-none focus:border-shifter/40 focus:border-2"
-                placeholder={placeholder}
-            />
-        </label>
-    );
-}
-
-export default Contact;
Index: ontend/src/pages/CourseDetails.tsx
===================================================================
--- frontend/src/pages/CourseDetails.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,75 +1,0 @@
-import {useParams} from "react-router-dom";
-import { fetchCourseDetailsApi } from "../api/courseApi.ts";
-import {useEffect, useState} from "react";
-import HeroCourseDetails from "../components/HeroCourseDetails.tsx";
-import CourseDetailsInfo from "../components/CourseDetailsInfo.tsx";
-import CoursesCarouselCourseDetails from "../components/CoursesCarouselCourseDetails.tsx";
-import type {CourseDetail} from "../models/javaObjects/CourseDetail.tsx";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import HeroCourseDetailsSkeleton from "../components/skeletons/HeroCourseDetailsSkeleton.tsx";
-import CourseDetailsInfoSkeleton from "../components/skeletons/CourseDetailsInfoSkeleton.tsx";
-import {useEnrollUserInCourse} from "../hooks/useEnrollUserInCourse.tsx";
-
-function CourseDetails() {
-    const { loading: authLoading } = useAuthContext();
-    const [loading, setLoading] = useState<boolean>(true);
-    const { courseId } = useParams<{ courseId: string; courseTitle: string }>();
-    const [course, setCourse] = useState<CourseDetail>({
-        color: "",
-        courseContentCount: 0,
-        courseContents: [],
-        description: "",
-        descriptionLong: "",
-        descriptionShort: "",
-        difficulty: "BEGINNER",
-        durationMinutes: 0,
-        id: 0,
-        imageUrl: "",
-        price: 0,
-        rating: 0,
-        ratingCount: 0,
-        skillsGained: [],
-        title: "",
-        titleShort: "",
-        topicsCovered: [],
-        whatWillBeLearned: []
-    });
-
-    const { enroll } = useEnrollUserInCourse(Number(courseId), course?.titleShort);
-
-    useEffect(() => {
-        setLoading(true);
-
-        fetchCourseDetailsApi(Number(courseId))
-            .then(data => {
-                setCourse(data);
-            })
-            .catch(err => {
-                console.error("Error fetching javaObjects details: ", err);
-            })
-            .finally(() => {
-                setLoading(false);
-            })
-
-    }, [courseId])
-
-    return (
-        <main className="bg-beige text-black-text">
-            {
-                (authLoading || loading) ?
-                    <>
-                        <HeroCourseDetailsSkeleton />
-                        <CourseDetailsInfoSkeleton />
-                        <CoursesCarouselCourseDetails />
-                    </> :
-                    <>
-                        <HeroCourseDetails course={course} enrollUser={enroll}/>
-                        <CourseDetailsInfo course={course}/>
-                        <CoursesCarouselCourseDetails courseId={course.id}/>
-                    </>
-            }
-        </main>
-    )
-}
-
-export default CourseDetails;
Index: ontend/src/pages/CourseLearn.tsx
===================================================================
--- frontend/src/pages/CourseLearn.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,316 +1,0 @@
-import {Link, useParams} from "react-router-dom";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import CourseContentSideNav from "../components/learn/CourseContentSideNav.tsx";
-import CourseLearnSkeleton from "../components/skeletons/CourseLearnSkeleton.tsx";
-import {ArrowLeft, MoveLeft, MoveRight, CheckCheck} from "lucide-react";
-import TextWithUnderline from "../components/TextWithUnderline.tsx";
-import {useCourseLearn} from "../hooks/useCourseLearn.tsx";
-import {type JSX, useEffect, useRef, useState} from "react";
-import StarFilled from "../assets/icons/StarFilled.tsx";
-import NavbarLearn from "../layout/NavbarLearn.tsx";
-import ModalReviewCourse from "../components/ModalReviewCourse.tsx";
-import Certificate from "../assets/icons/Certificate.tsx";
-
-function CourseLearn() {
-    const {courseId} = useParams<{ courseId: string }>();
-    const {accessToken} = useAuthContext();
-    const [showSideNav, setShowSideNav] = useState(true);
-    const [showReviewModal, setShowReviewModal] = useState(false);
-    const {
-        activeLecture,
-        setActiveLecture,
-        course,
-        setCourse,
-        loading,
-        videoUrl,
-        isDownloading,
-        updateLecture,
-        triggerDownload,
-        downloadCertificate,
-        isLastLectureFinished,
-        setIsLastLectureFinished,
-        courseFinishedPunchlines,
-        progressPercentage
-    } = useCourseLearn(Number(courseId), accessToken || "");
-    const spanRef = useRef<HTMLSpanElement>(null);
-    const [spanWidth, setSpanWidth] = useState(0);
-    const [isBtnHovered, setIsBtnHovered] = useState(false);
-
-    const firstLectureId = course?.courseContents[0].courseLectures[0].id;
-    const allLectures = course?.courseContents.flatMap(content => content.courseLectures);
-    const lastLectureId = allLectures ? allLectures[allLectures.length - 1].id : undefined;
-
-
-    useEffect(() => {
-        if (spanRef.current) {
-            setSpanWidth(spanRef.current.offsetWidth);
-        }
-    }, [showSideNav]);
-
-    useEffect(() => {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth",
-        });
-    }, [activeLecture]);
-
-    const markCourseAsRated = (newRating: number) => {
-        if (!course) return;
-        setCourse({...course, rating: newRating})
-    }
-
-    if (loading) {
-        return (
-            <>
-                <NavbarLearn courseRating={0} markCourseAsRated={markCourseAsRated}/>
-                <CourseLearnSkeleton/>
-            </>
-        );
-    }
-
-    return (
-        <>
-            <NavbarLearn courseRating={course?.rating} markCourseAsRated={markCourseAsRated}/>
-            <main className="flex overflow-x-clip">
-                {
-                    isLastLectureFinished ? (
-                        <div className="flex flex-col gap-12 w-full justify-center items-center h-screen ">
-                            {
-                                progressPercentage !== 100 ? (
-                                    <LastLectureFinished
-                                        title={"🎉 You've finished the last lesson in this course!"}
-                                        onClick={() => {
-                                            const firstUncompletedLecture = course?.courseContents
-                                                ?.flatMap(content => content.courseLectures)
-                                                ?.find(lecture => !lecture.userCourseProgress.completed);
-                                            setActiveLecture(firstUncompletedLecture || course?.courseContents[0]?.courseLectures[0] || null);
-                                            setIsLastLectureFinished(false);
-                                        }}
-                                        btnText={"Finish Other Lectures"}
-                                        btnShow={true}
-                                    />
-                                ) : (
-                                    <LastLectureFinished
-                                        title={courseFinishedPunchlines[Math.floor(Math.random() * courseFinishedPunchlines.length)]}
-                                        onClick={() => {
-                                            setShowReviewModal(true);
-                                        }}
-                                        btnText={
-                                            <div className="flex items-center gap-2">
-                                                <StarFilled className="text-gold h-6 "/>
-                                                Leave a Review
-                                            </div>
-                                        }
-                                        btnShow={(course?.rating ?? 0) === 0}
-                                        downloadCertificate={downloadCertificate}
-                                    />
-                                )
-                            }
-                        </div>
-                    ) : (
-                        <div className="flex flex-col">
-                            {
-                                activeLecture?.contentType === "VIDEO" && (
-                                    <video
-                                        src={videoUrl}
-                                        controls
-                                        controlsList="nodownload"
-                                        preload="metadata"
-                                    />
-                                )
-                            }
-                            <div
-                                className="flex flex-col gap-4 flex-grow py-vertical-md px-horizontal-sm text-left text-black-text">
-                                <h1 className="text-4xl font-semibold">{activeLecture?.title}</h1>
-                                <p className="text-lg leading-loose">{activeLecture?.contentText}</p>
-                                {
-                                    (activeLecture?.contentType === "FILE" || activeLecture?.contentType === "TOOL" || activeLecture?.contentType === "QUIZ") && (
-                                        <div className="flex justify-between w-full gap-20 items-center py-12">
-                                            <p className="text-lg font-medium">
-                                                {activeLecture.contentFileName}
-                                            </p>
-                                            <button
-                                                disabled={isDownloading}
-                                                onClick={() => triggerDownload()}
-                                                className={`disabled:cursor-not-allowed disabled:opacity-40 hover:shadow-lg transition-all duration-300 ease-in-out cursor-pointer
-                                                bg-shifter text-white text-lg px-8 py-2 rounded-md shadow-md border-2 border-white/40 shadow-shifter/40`}
-                                            >
-                                                {
-                                                    isDownloading ? "Downloading..." : "Download File"
-                                                }
-                                            </button>
-                                        </div>
-                                    )
-                                }
-                            </div>
-
-                            <div className="px-horizontal-sm py-vertical-md w-full flex justify-between items-center">
-                                {
-                                    firstLectureId !== activeLecture?.id && (
-                                        <button
-                                            onClick={() => {
-                                                if (!course || !activeLecture) return;
-                                                const allLectures = course.courseContents.flatMap(content => content.courseLectures);
-                                                const currentIndex = allLectures.findIndex(lec => lec.id === activeLecture.id);
-                                                if (currentIndex > 0) {
-                                                    setActiveLecture(allLectures[currentIndex - 1]);
-                                                }
-                                            }}
-                                            className="mr-auto flex items-center gap-2 text-lg cursor-pointer py-2">
-                                            <MoveLeft size={20} strokeWidth={2}/>
-                                            <TextWithUnderline label={"Previous Lecture"} fromRightToLeft={true}/>
-                                        </button>
-                                    )
-                                }
-                                {
-                                    lastLectureId === activeLecture?.id ? (
-                                        <button
-                                            onClick={() => {
-                                                updateLecture(activeLecture?.userCourseProgress.id || -1, true);
-                                                setIsLastLectureFinished(true);
-                                            }}
-                                            className="ml-auto flex items-center gap-2 text-lg cursor-pointer py-2">
-                                            <TextWithUnderline label={"Finish Course"}/>
-                                            <CheckCheck size={20} strokeWidth={2}/>
-                                        </button>
-                                    ) : (
-                                        <button
-                                            onClick={() => {
-                                                updateLecture(activeLecture?.userCourseProgress.id || -1, true)
-                                                if (!course || !activeLecture) return;
-                                                const allLectures = course.courseContents.flatMap(content => content.courseLectures);
-                                                const currentIndex = allLectures.findIndex(lec => lec.id === activeLecture.id);
-                                                if (currentIndex < allLectures.length - 1) {
-                                                    setActiveLecture(allLectures[currentIndex + 1]);
-                                                }
-                                            }}
-                                            className="ml-auto flex items-center gap-2 text-lg cursor-pointer py-2">
-                                            <TextWithUnderline label={"Next Lecture"}/>
-                                            <MoveRight size={20} strokeWidth={2}/>
-                                        </button>
-                                    )
-                                }
-                            </div>
-                        </div>
-                    )
-                }
-                {
-                    activeLecture && course && showSideNav ? (
-                        <CourseContentSideNav
-                            activeLecture={activeLecture}
-                            setActiveLecture={setActiveLecture}
-                            courseContents={course.courseContents}
-                            updateLecture={updateLecture}
-                            closeModal={() => setShowSideNav(false)}
-                            progressPercentage={progressPercentage}
-                        />
-                    ) : (
-                        <button
-                            onMouseEnter={() => setIsBtnHovered(true)}
-                            onMouseLeave={() => setIsBtnHovered(false)}
-                            onClick={() => {
-                                setShowSideNav(true)
-                                setIsBtnHovered(false)
-                            }}
-                            className="fixed top-24 right-0 flex items-center gap-2
-                        h-fit bg-shifter px-4 py-2 border border-white/40 rounded-sm cursor-pointer group overflow-hidden hover:translate-x-0"
-                            style={{
-                                transform: !isBtnHovered ? `translateX(${spanWidth + 16}px)` : "translateX(0)",
-                                transition: "transform 0.5s ease",
-                            }}
-                        >
-                            <ArrowLeft
-                                size={22}
-                                strokeWidth={1.5}
-                                color={"var(--color-white)"}
-                            />
-                            <span
-                                ref={spanRef}
-                                className="text-white whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-700 ease-in-out"
-                            >
-                            Course Content
-                        </span>
-                        </button>
-
-                    )
-                }
-                {
-                    showReviewModal && course && (
-                        <ModalReviewCourse
-                            courseId={course.id}
-                            closeModal={() => setShowReviewModal(false)}
-                            markCourseAsRated={markCourseAsRated}
-                            isUpdate={false}
-                        />
-                    )
-                }
-            </main>
-        </>
-    )
-}
-
-function LastLectureFinished({title, onClick, btnText, btnShow, downloadCertificate}: {
-    title: string,
-    onClick: () => void,
-    btnText: string | JSX.Element,
-    btnShow: boolean
-    downloadCertificate?: () => void
-}) {
-    const [loading, setLoading] = useState<boolean>(false);
-
-    return (
-        <>
-            <h1 className="text-3xl font-semibold">{title}</h1>
-            <div className="flex flex-col gap-4">
-                {
-                    btnShow && (
-                        <button
-                            onClick={onClick}
-                            className="hover:bg-shifter/10
-                            flex gap-2 items-center justify-center text-lg   font-bold px-8 py-2 rounded-md border-1 border-shifter cursor-pointer">
-                            {btnText}
-                        </button>
-                    )
-                }
-                {
-                    downloadCertificate && (
-                        <button
-                            disabled={loading}
-                            onClick={async () => {
-                                setLoading(true);
-                                try {
-                                    await downloadCertificate()
-                                } catch (error) {
-                                    console.error("Certificate download failed:", error);
-                                } finally {
-                                    setLoading(false);
-                                }
-                            }}
-                            className="disabled:cursor-not-allowed disabled:opacity-60 hover:bg-shifter/10
-                            flex gap-2 items-center justify-center text-lg   font-bold px-8 py-2 rounded-md border-1 border-shifter cursor-pointer">
-                            {
-                                loading ? (
-                                    <>
-                                        Downloading...
-                                        <div className="loader"/>
-                                    </>
-                                ) : (
-                                    <div className="flex items-center gap-2">
-                                        <Certificate className="text-black h-6 "/>
-                                        Download Certificate
-                                    </div>
-                                )
-                            }
-                        </button>
-                    )
-                }
-                <Link to="/learn"
-                      className="text-lg font-bold text-shifter underline hover:text-shifter/60">
-                    Exit from Course
-                </Link>
-            </div>
-        </>
-    )
-}
-
-export default CourseLearn;
Index: ontend/src/pages/Courses.tsx
===================================================================
--- frontend/src/pages/Courses.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,212 +1,0 @@
-import {useEffect, useMemo, useState} from "react";
-import { useTranslation } from "react-i18next";
-import CoursesFilters from "../components/CoursesFilters.tsx";
-import CoursesGrid from "../components/CoursesGrid.tsx";
-import type {FilterParams} from "../models/FilterParams.tsx";
-import {fetchCoursesApi} from "../api/courseApi.ts";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterRocket from "../../public/Rocket-Blue-Fire.png";
-import {useCourseStorage} from "../context/CourseStorage.ts";
-import type {CoursePreview} from "../models/javaObjects/CoursePreview.tsx";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import {useLocation, useNavigate} from "react-router-dom";
-import CoursesFiltersSkeleton from "../components/skeletons/CoursesFiltersSkeleton.tsx";
-import CoursesGridSkeleton from "../components/skeletons/CoursesGridSkeleton.tsx";
-import {getFromSessionStorage, saveToSessionStorage} from "../utils/useSessionStorage.ts";
-
-function getInitialFiltersFromSearch(locationSearch: string): FilterParams {
-    const searchParams = new URLSearchParams(locationSearch);
-    const initialParams: FilterParams = {};
-
-    const search = searchParams.getAll("search");
-    if (search.length > 0) initialParams.search = search;
-
-    const skill = searchParams.getAll("skill");
-    if (skill.length > 0) initialParams.skill = skill;
-
-    const topic = searchParams.getAll("topic");
-    if (topic.length > 0) initialParams.topic = topic;
-
-    const difficulty = searchParams.getAll("difficulty");
-    if (difficulty.length > 0) initialParams.difficulty = difficulty;
-
-    const price = searchParams.getAll("price");
-    if (price.length > 0) initialParams.price = price;
-
-    const duration = searchParams.getAll("duration");
-    if (duration.length > 0) initialParams.duration = duration;
-
-    return initialParams;
-}
-
-function Courses() {
-    const { t } = useTranslation("courses");
-    const navigate = useNavigate();
-    const location = useLocation();
-    const {accessToken, user, loading: authLoading} = useAuthContext();
-    const {allCourses, setAllCourses} = useCourseStorage();
-
-    const [courses, setCourses] = useState<CoursePreview[] | null>(null);
-    const [loading, setLoading] = useState<boolean>(false);
-    const [filters, setFilters] = useState<FilterParams>(getInitialFiltersFromSearch(location.search));
-
-    const topics = useMemo(() =>
-            allCourses?.map(course => course.topicsCovered).flat() || [],
-        [allCourses]
-    );
-    const skills = useMemo(() =>
-            allCourses?.map(course => course.skillsGained).flat() || [],
-        [allCourses]
-    );
-
-    useEffect(() => {
-        const storedCourses = getFromSessionStorage<typeof allCourses>("allCourses");
-        if (storedCourses) {
-            setAllCourses(storedCourses);
-            return;
-        }
-
-        setLoading(true);
-        fetchCoursesApi(accessToken || "")
-            .then(resCourses => setAllCourses(resCourses))
-            .catch(err => console.error("Failed to fetch courses:", err))
-            .finally(() => setLoading(false));
-    }, [authLoading]);
-
-    useEffect(() => {
-        saveToSessionStorage("allCourses", allCourses);
-    }, [allCourses]);
-
-    useEffect(() => {
-        if (!allCourses) return;
-
-        let filteredCourses = [...allCourses];
-
-        if (filters.search) {
-            filteredCourses = filteredCourses.filter(course =>
-                filters.search!.some(search =>
-                    course.difficulty.toLowerCase().includes(search.toLowerCase()) ||
-                    course.title.toLowerCase().includes(search.toLowerCase()) ||
-                    course.topicsCovered.some(topic => topic.toLowerCase().includes(search.toLowerCase())) ||
-                    course.skillsGained.some(skill => skill.toLowerCase().includes(search.toLowerCase()))
-                )
-            );
-        }
-
-        if (filters.skill?.length) {
-            filteredCourses = filteredCourses.filter(course =>
-                filters.skill!.some(skill => course.skillsGained.includes(skill))
-            );
-        }
-
-        if (filters.topic?.length) {
-            filteredCourses = filteredCourses.filter(course =>
-                filters.topic!.some(topic => course.topicsCovered.includes(topic))
-            );
-        }
-
-        if (filters.difficulty?.length) {
-            filteredCourses = filteredCourses.filter(course =>
-                filters.difficulty!.includes(course.difficulty)
-            );
-        }
-
-        if (filters.price?.length) {
-            filteredCourses = filteredCourses.filter(course =>
-                filters.price!.some(priceRange => {
-                    const price = course.price;
-                    switch (priceRange) {
-                        case "free": return price === 0;
-                        case "low": return price > 0 && price < 20;
-                        case "medium": return price >= 20 && price <= 50;
-                        case "high": return price > 50;
-                        default: return false;
-                    }
-                })
-            );
-        }
-
-        if (filters.duration?.length) {
-            filteredCourses = filteredCourses.filter(course =>
-                filters.duration!.some(durationRange => {
-                    const minutes = course.durationMinutes;
-                    switch (durationRange) {
-                        case "extraShort": return minutes < 60 * 3;
-                        case "short": return minutes >= 60 * 3 && minutes < 60 * 6;
-                        case "medium": return minutes >= 60 * 6 && minutes < 60 * 10;
-                        case "long": return minutes >= 60 * 10;
-                        default: return false;
-                    }
-                })
-            );
-        }
-
-        if (filters.showOnlyFavoriteCourses) {
-            filteredCourses = filteredCourses.filter(course =>
-                user?.favoriteCourses.includes(course.id)
-            );
-        }
-
-        setCourses(filteredCourses);
-    }, [allCourses, filters, user?.favoriteCourses]);
-
-    useEffect(() => {
-        const noFiltersApplied = Object.keys(filters).length === 0;
-        if (noFiltersApplied) {
-            navigate({pathname: location.pathname, search: ""}, {replace: true});
-            return;
-        }
-
-        const paramsToUrl = new URLSearchParams();
-        Object.entries(filters).forEach(([key, value]) => {
-            if (Array.isArray(value)) {
-                value.forEach(v => paramsToUrl.append(key, v));
-            } else if (value) {
-                paramsToUrl.set(key, value.toString());
-            }
-        });
-        navigate({pathname: location.pathname, search: paramsToUrl.toString()}, {replace: true});
-    }, [filters]);
-
-    return (
-        <main className="font-montserrat bg-white">
-            <section className="relative flex flex-col items-center justify-center py-vertical-lg pt-top-nav-md gap-4 px-horizontal-lg shadow-sm">
-                <img
-                    src={ShifterRocket}
-                    alt={t("rocketAlt")}
-                    className="absolute top-top-nav-sm left-20 rotate-45 w-16 h-auto"
-                />
-                <h1 className="text-6xl">
-                    {t("title")}
-                    <br/>
-                    <strong className="text-shifter">{t("highlight")}</strong>
-                </h1>
-                <p>{t("description")}</p>
-            </section>
-
-            {(authLoading || loading) ? (
-                <section className="flex gap-0 w-full">
-                    <CoursesFiltersSkeleton />
-                    <CoursesGridSkeleton />
-                </section>
-            ) : (
-                <section className="flex gap-0 w-full">
-                    <CoursesFilters
-                        filters={filters}
-                        setFilters={setFilters}
-                        topics={topics}
-                        skills={skills}
-                    />
-                    <CoursesGrid
-                        setFilters={setFilters}
-                        filters={filters}
-                        courses={courses}
-                    />
-                </section>
-            )}
-        </main>
-    );
-}
-
-export default Courses;
Index: ontend/src/pages/FreeConsultation.tsx
===================================================================
--- frontend/src/pages/FreeConsultation.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,199 +1,0 @@
-import {useAuthContext} from "../context/AuthContext.tsx";
-import React, {useEffect, useState} from "react";
-import {fetchExpertFreeTimeSlotsApi, scheduleMeetingApi} from "../api/meetingApi.ts";
-import type {UserMeetingInfoRequest} from "../models/UserMeetingInfoRequest.tsx";
-import { useTranslation } from "react-i18next";
-
-function FreeConsultation() {
-    const { t } = useTranslation("freeConsultation");
-    const {user, setUser, accessToken, authChecked} = useAuthContext();
-    const [loadingDateTime, setLoadingDateTime] = useState(true);
-    const [loadingSubmitForm, setLoadingSubmitForm] = useState(false);
-    const [error, setError] = useState<string>("");
-    const [selectedDate, setSelectedDate] = useState<string>("");
-    const [selectedTime, setSelectedTime] = useState<string>("");
-    const [freeSlots, setFreeSlots] = useState<Record<string, string[]>>({"": [""]});
-    const [userMeetingInfo, setUserMeetingInfo] = useState<UserMeetingInfoRequest>({
-        aboutCompany: "",
-        challenges: "",
-        expectations: "",
-        otherInfo: ""
-    });
-    const [meetingScheduled, setMeetingScheduled] = useState<boolean>(false);
-
-    const handleScheduleMeeting = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (!selectedDate || !selectedTime) {
-            setError(t("errors.selectDateTime"));
-            return;
-        }
-
-        setLoadingSubmitForm(true);
-        scheduleMeetingApi(accessToken || "", selectedTime, selectedDate, userMeetingInfo)
-            .then(() => {
-                setMeetingScheduled(true);
-                setError("");
-
-                if (user)
-                    setUser({...user, hasUsedFreeConsultation: true})
-            })
-            .catch(error => {
-                console.error("Error scheduling meeting:", error);
-                if (error.response?.data?.message === "User has already used free consultation")
-                    setError(t("errors.alreadyUsed"));
-                else
-                    setError(t("errors.failedSchedule"));
-            })
-            .finally(() => setLoadingSubmitForm(false));
-    }
-
-    useEffect(() => {
-        if (!authChecked || !accessToken) return;
-
-        setLoadingDateTime(true);
-        fetchExpertFreeTimeSlotsApi(accessToken)
-            .then(data => setFreeSlots(data))
-            .catch(error => console.error("Error fetching time slots:", error))
-            .finally(() => setLoadingDateTime(false));
-    }, [authChecked, accessToken]);
-
-    // Assert type for TypeScript
-    const steps = t("nextSteps.steps", { returnObjects: true }) as { title: string; description: string }[];
-
-    return (
-        <main className="bg-gradient-to-b from-shifter via-shifter/20 via-40% to-beige">
-            {/*Hero*/}
-            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg text-white-text">
-                <h1 className="text-5xl font-bold">{t("hero.title")}</h1>
-                <p className="text-xl font-light">{t("hero.description")}</p>
-            </section>
-
-            {/*Contact Form*/}
-            <section className="flex items-center justify-center w-full px-horizontal-lg">
-                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4 shadow-md shadow-black/10">
-
-                    {/*Contact Info*/}
-                    {/*Contact Info*/}
-                    <div className="border-1 border-white/40 relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
-                        <h2 className="text-left text-2xl font-semibold">{t("nextSteps.title")}</h2>
-                        <ol className="flex flex-col">
-                            {steps.map((step, idx) => (
-                                <Step
-                                    key={idx}
-                                    title={step.title}
-                                    description={step.description}
-                                    isLast={idx === steps.length - 1}
-                                />
-                            ))}
-                        </ol>
-                    </div>
-
-
-                    {/*Form*/}
-                    <div className="flex flex-col gap-4 col-span-2">
-                        <div className="grid grid-cols-2 gap-4 items-center">
-                            <p className="text-black/40 text-xs col-span-2">{t("form.profileHint")}</p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">{t("form.name")}: <span className="text-black-text font-normal">{user?.name}</span></p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">{t("form.email")}: <span className="text-black-text font-normal">{user?.email}</span></p>
-                        </div>
-
-                        <hr className="border-t-1 border-black/20 rounded-full"/>
-
-                        <form onSubmit={handleScheduleMeeting} className="flex flex-col gap-12 items-start">
-                            <div className="flex flex-col gap-4 items-center w-full">
-                                {["aboutCompany","challenges","expectations","otherInfo"].map(field => (
-                                    <TextInput
-                                        key={field}
-                                        label={t(`form.fields.${field}.label`)}
-                                        name={field}
-                                        placeholder={t(`form.fields.${field}.placeholder`)}
-                                        onChange={(e) => setUserMeetingInfo({...userMeetingInfo, [field]: e.target.value})}
-                                    />
-                                ))}
-
-                                <hr className="border-t-1 border-black/20 rounded-full w-full"/>
-                                <div className="flex justify-between items-center w-full">
-                                    {loadingDateTime ? (
-                                        <>
-                                            <div className="bg-gray-300 animate-pulse py-2 px-8 rounded-sm h-10 w-50"></div>
-                                            <div className="bg-gray-300 animate-pulse py-2 px-8 rounded-sm h-10 w-50"></div>
-                                        </>
-                                    ) : (
-                                        <>
-                                            <SelectInput
-                                                value={selectedDate}
-                                                onChange={(e) => setSelectedDate(e.target.value)}
-                                                firstOption={t("form.selectDate")}
-                                                options={Object.keys(freeSlots)}
-                                            />
-                                            <SelectInput
-                                                value={selectedTime}
-                                                onChange={(e) => setSelectedTime(e.target.value)}
-                                                firstOption={t("form.selectTime")}
-                                                options={freeSlots[selectedDate]}
-                                                isDisabled={selectedDate.length === 0}
-                                            />
-                                        </>
-                                    )}
-                                </div>
-
-                                {error && <p className="text-red-500 text-md font-medium text-center">{error}</p>}
-                            </div>
-
-                            {meetingScheduled ? (
-                                <div className="text-center w-full">
-                                    <h2 className="text-xl font-bold text-shifter mb-2">{t("confirmation.title")}</h2>
-                                    <p className="text-md font-medium text-black/80 max-w-xl mx-auto" dangerouslySetInnerHTML={{__html: t("confirmation.description")}}/>
-                                </div>
-                            ) : (
-                                <div className="flex items-center gap-6">
-                                    <button
-                                        className="hover:shadow-shifter/40 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-60 shadow-md shadow-shifter/20 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
-                                        disabled={loadingSubmitForm}
-                                        type="submit"
-                                    >
-                                        {loadingSubmitForm ? t("form.booking") : t("form.book")}
-                                    </button>
-                                    {loadingSubmitForm && <div className="loader"/>}
-                                </div>
-                            )}
-                        </form>
-                        <p className="text-xs text-black/40">{t("form.optionalHint")}</p>
-                    </div>
-                </div>
-            </section>
-        </main>
-    )
-}
-
-function TextInput({label, name, placeholder, onChange}: {label:string,name:string,placeholder:string,onChange:(e:React.ChangeEvent<HTMLTextAreaElement>)=>void}) {
-    return (
-        <label className="w-full flex flex-col items-start gap-2 text-black-text">
-            <span className="text-black/40 font-semibold text-md peer-focused:text-shifter"><sup>*</sup> {label}</span>
-            <textarea rows={2} name={name} onChange={onChange} placeholder={placeholder} className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm resize-none min-h-fit custom-scrollbar focus:outline-none focus:border-shifter/40 focus:border-2"/>
-        </label>
-    )
-}
-
-function SelectInput({value, onChange, firstOption, options, isDisabled}: {value:string,onChange:(e:React.ChangeEvent<HTMLSelectElement>)=>void,firstOption:string,options:string[],isDisabled?:boolean}) {
-    return (
-        <select required className={`disabled:opacity-20 disabled:cursor-not-allowed bg-dark-blue/5 border-1 border-black/10 py-1 px-4 rounded-sm ${value ? "text-black-text" : "text-black/40"} resize-none overflow-hidden min-h-fit cursor-pointer`} disabled={isDisabled} value={value} onChange={onChange}>
-            <option value="" className="text-black/40">{firstOption}</option>
-            {options?.map(option => <option key={option} value={option} className="text-black-text">{option}</option>)}
-        </select>
-    )
-}
-
-function Step({title, description, isLast}: {title:string,description:string,isLast?:boolean}) {
-    return (
-        <li className={`${isLast ? 'border-transparent' : ''} relative pl-6 border-l-4 border-white/10`}>
-            <div style={{transform: 'translateX(calc(-0.5rem - 2px))'}} className="absolute left-0 top-0 h-[1rem] aspect-square bg-white rounded-full"/>
-            <div className="pb-8 text-left">
-                <h3 className="text-md font-semibold text-white">{title}</h3>
-                <p className="text-sm text-white/60 font-light">{description}</p>
-            </div>
-        </li>
-    )
-}
-
-export default FreeConsultation;
Index: ontend/src/pages/Home.tsx
===================================================================
--- frontend/src/pages/Home.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,22 +1,0 @@
-import HeroHome from "../components/HeroHome.tsx";
-import CollaborationSteps from "../components/CollaborationSteps.tsx";
-import ShifterValues from "../components/ShifterValues.tsx";
-import CoursesCarouselHome from "../components/CoursesCarouselHome.tsx";
-import OurServices from "../components/OurServices.tsx";
-
-function Home() {
-
-    return (
-        <main className="bg-beige">
-            <div className="px-4 py-vertical-sm">
-                <HeroHome/>
-            </div>
-            <OurServices />
-            <CollaborationSteps/>
-            <CoursesCarouselHome/>
-            <ShifterValues/>
-        </main>
-    )
-}
-
-export default Home
Index: ontend/src/pages/Learn.tsx
===================================================================
--- frontend/src/pages/Learn.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,170 +1,0 @@
-import {useEnrolledCourses} from "../hooks/useEnrolledCourses.tsx";
-import {useState} from "react";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import CourseCardLearnDashboard from "../components/CourseCardLearnDashboard.tsx";
-import CourseCardEnrolledSkeleton from "../components/skeletons/CourseCardEnrolledSkeleton.tsx";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterArrow from "../../public/Shifter-Arrow-White.png";
-
-function Learn() {
-    const [selectedTab, setSelectedTab] = useState("all");
-    const {user} = useAuthContext();
-    const {
-        allCourses,
-        enrolledCourses,
-        setEnrolledCourses,
-        loading
-    } = useEnrolledCourses();
-
-    function renderContent() {
-        const noCoursesMessage = {
-            all: "You haven't enrolled in any courses yet!",
-            active: "No active courses — time to start learning!",
-            completed: "Nothing completed yet — keep going!",
-            favorites: "You have no favorites — find courses you love!"
-        };
-
-        switch (selectedTab) {
-            case "all":
-                return (
-                    <>
-                        {
-                            enrolledCourses.length > 0 ?
-                                enrolledCourses.map((course, index) => (
-                                    <CourseCardLearnDashboard
-                                        course={course}
-                                        key={index}
-                                        markCourseAsRated={(rating) => setEnrolledCourses([
-                                            ...enrolledCourses.filter(c => c.id !== course.id),
-                                            {...course, rating: rating}
-                                        ])}
-                                    />
-                                )) : (
-                                    <h2 className="text-2xl font-semibold text-black/60 text-left whitespace-nowrap">{noCoursesMessage.all}</h2>
-                                )
-                        }
-                    </>
-                );
-            case "active":
-                return (
-                    <>
-                        {
-                            enrolledCourses.length > 0 ?
-                                enrolledCourses.map((course, index) => {
-                                    if (course.isFinished) return null;
-                                    return (
-                                        <CourseCardLearnDashboard
-                                            course={course}
-                                            key={index}
-                                            markCourseAsRated={(rating) => setEnrolledCourses([
-                                                ...enrolledCourses.filter(c => c.id !== course.id),
-                                                {...course, rating: rating}
-                                            ])}
-                                        />
-                                    )
-                                }) : (
-                                    <h2 className="text-2xl font-semibold text-black/60 text-left whitespace-nowrap">{noCoursesMessage.active}</h2>
-                                )
-                        }
-                    </>
-                );
-            case "completed":
-                return (
-                    <>
-                        {
-                            enrolledCourses.filter(course => course.isFinished).length > 0 ?
-                                enrolledCourses.filter(course => course.isFinished).map((course, index) => (
-                                        <CourseCardLearnDashboard
-                                            course={course}
-                                            key={index}
-                                            markCourseAsRated={(rating) => setEnrolledCourses([
-                                                ...enrolledCourses.filter(c => c.id !== course.id),
-                                                {...course, rating: rating}
-                                            ])}
-                                        />
-                                    )
-                                ) : (
-                                    <h2 className="text-2xl font-semibold text-black/60 text-left whitespace-nowrap">{noCoursesMessage.completed}</h2>
-                                )
-                        }
-                    </>
-                );
-            case "favorites":
-                return (
-                    <>
-                        {
-                            allCourses.filter(course => user?.favoriteCourses.includes(course.id)).length > 0 ?
-                                allCourses?.filter(course => user?.favoriteCourses.includes(course.id)).map((course, index) => (
-                                    <CourseCardLearnDashboard course={course} key={index}
-                                                              markCourseAsRated={(rating) => {
-                                                                  console.log(rating)
-                                                              }}/>
-                                )) : (
-                                    <h2 className="text-2xl font-semibold text-black/60 text-left whitespace-nowrap">{noCoursesMessage.favorites}</h2>
-                                )
-                        }
-                    </>
-                );
-        }
-    }
-
-
-    return (
-        <main className="flex flex-col flex-1 gap-0 ">
-            <div className="bg-black">
-                <section className="relative border-b-2 border-white/40 overflow-clip
-            bg-shifter/90 shadow-md text-white px-horizontal-md w-full flex flex-col gap-between-sm text-left pt-top-nav-lg">
-
-                    <img
-                        src={ShifterArrow}
-                        alt="Shifter Arrow"
-                        className="absolute right-0 -bottom-24 rotate-45 opacity-20
-                    pointer-events-none w-60 h-auto"
-                    />
-
-                    <h1 className="text-4xl font-semibold">My Learning</h1>
-                    <ul>
-                        <ListTab name={"All"} isSelected={selectedTab === "all"}
-                                 setSelectedTab={() => setSelectedTab("all")}/>
-                        <ListTab name={"Active"} isSelected={selectedTab === "active"}
-                                 setSelectedTab={() => setSelectedTab("active")}/>
-                        <ListTab name={"Completed"} isSelected={selectedTab === "completed"}
-                                 setSelectedTab={() => setSelectedTab("completed")}/>
-                        <ListTab name={"Favorites"} isSelected={selectedTab === "favorites"}
-                                 setSelectedTab={() => setSelectedTab("favorites")}/>
-                    </ul>
-                </section>
-            </div>
-            <div className="flex-1 bg-beige">
-                <section className="grid grid-cols-4 gap-x-4 gap-y-8 px-horizontal-md py-vertical-md items-stretch ">
-                    {
-                        loading ?
-                            new Array(8).fill(0).map((_, index) => (
-                                <CourseCardEnrolledSkeleton key={index}/>
-                            )) : renderContent()
-                    }
-                </section>
-            </div>
-        </main>
-    )
-}
-
-function ListTab({name, isSelected, setSelectedTab}: {
-    name: string;
-    isSelected: boolean;
-    setSelectedTab: () => void;
-}) {
-    return (
-        <li className="inline-block text-lg font-medium ">
-            <button
-                className={`hover:text-white px-4 py-2 cursor-pointer ${isSelected ? "border-b-2 border-white" : "text-white/40"}`}
-                onClick={setSelectedTab}
-            >
-                {name}
-            </button>
-        </li>
-    )
-}
-
-export default Learn;
Index: ontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,173 +1,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterArrow from "../../public/Shifter-Arrow-White.png";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import React from "react";
-import { Eye, EyeOff } from "lucide-react";
-import { Link, useNavigate } from "react-router-dom";
-import { useAuthContext } from "../context/AuthContext.tsx";
-import GoogleLoginButton from "../components/GoogleLoginButton.tsx";
-import { useTranslation } from "react-i18next";
-
-interface InputProps {
-    placeholder: string;
-    label: string;
-    name: string;
-    type: string;
-    id: string;
-    value: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-function Login() {
-    const { t } = useTranslation("login");
-    const { login } = useAuthContext();
-    const [email, setEmail] = React.useState<string>("");
-    const [password, setPassword] = React.useState<string>("");
-    const [error, setError] = React.useState<string>("");
-    const [isLoading, setIsLoading] = React.useState<boolean>(false);
-    const navigate = useNavigate();
-
-    const handleLogin = async (e: React.FormEvent) => {
-        e.preventDefault();
-
-        if (!email || !password) {
-            setError(t("errors.fillAllFields"));
-            return;
-        }
-
-        setIsLoading(true);
-        setError("");
-
-        login(email, password)
-            .then(() => {
-                navigate("/");
-            })
-            .catch((err) => {
-                if (err.response?.status === 401) {
-                    setError(err.response.data.message);
-                } else {
-                    setError(t("errors.somethingWentWrong"));
-                }
-            })
-            .finally(() => {
-                setIsLoading(false);
-            });
-    };
-
-    return (
-        <main className="flex font-montserrat h-screen bg-beige">
-            {/* LEFT HEADER AND BACKGROUND */}
-            <section className="relative bg-black w-[55%] overflow-hidden">
-                <div className="absolute w-full h-full bg-shifter/80 z-0 text-white px-20 flex flex-col gap-4 justify-center text-start">
-                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2" />
-                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2" />
-
-                    <h1 className="text-7xl font-semibold z-2">{t("welcomeBack")}</h1>
-                    <p className="text-2xl font-light z-2">{t("subtitle")}</p>
-                </div>
-            </section>
-
-            {/* RIGHT FORM CONTAINER */}
-            <section className="relative flex flex-col justify-center items-center flex-1 px-horizontal-md">
-                <div className="absolute top-0 px-4 py-4 flex w-full justify-between items-center">
-                    <Link to={"/"}>
-                        <img src={ShifterLogo} alt="Shifter Logo" className="w-40 h-auto object-contain" />
-                    </Link>
-                    <Link to={"/"} className="hover:bg-shifter/20 hover:text-shifter underline decoration-current font-semibold text-black/80 rounded-sm px-4 py-2">
-                        {t("backToMain")}
-                    </Link>
-                </div>
-
-                <form onSubmit={handleLogin} className="flex flex-col justify-center items-center gap-4 w-full">
-                    <Input
-                        placeholder={t("emailPlaceholder")}
-                        label={t("emailLabel")}
-                        name="email"
-                        type="email"
-                        id="login-email"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                    />
-                    <Input
-                        placeholder={t("passwordPlaceholder")}
-                        label={t("passwordLabel")}
-                        name="password"
-                        type="password"
-                        id="login-password"
-                        value={password}
-                        onChange={(e) => setPassword(e.target.value)}
-                    />
-
-                    {error && <p className="text-red-500 text-sm">{error}</p>}
-
-                    <div className="flex gap-2 justify-center text-md w-full text-lg mt-4">
-                        <button
-                            type="submit"
-                            disabled={isLoading}
-                            className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out cursor-pointer rounded-md border-3 border-white/50 text-white w-1/3 py-1 bg-shifter font-medium whitespace-nowrap ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
-                        >
-                            {isLoading ? t("loggingIn") : t("logIn")}
-                        </button>
-                        <Link
-                            to="/register"
-                            className="hover:shadow-md hover:shadow-shifter/20 transition-all duration-200 ease-in-out cursor-pointer rounded-md text-shifter/80 w-1/3 py-1 bg-white border-3 border-shifter/20 font-medium whitespace-nowrap opacity-80"
-                        >
-                            {t("register")}
-                        </Link>
-
-                        {isLoading && <div className="h-full loader"></div>}
-                    </div>
-                </form>
-
-                <div className="my-4 flex items-center gap-2 w-[90%] text-black opacity-20">
-                    <hr className="border-t-2 border-black w-full" />
-                    <p>{t("or")}</p>
-                    <hr className="border-t-2 border-black w-full" />
-                </div>
-
-                <GoogleLoginButton text={t("googleLogin")} />
-            </section>
-        </main>
-    );
-}
-
-function Input(inputProps: InputProps) {
-    const [showPassword, setShowPassword] = React.useState(false);
-
-    return (
-        <div className="relative flex flex-col gap-1 px-6 py-1.5 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm w-full">
-            <label htmlFor={inputProps.id} className="text-shifter text-light">
-                {inputProps.label}
-            </label>
-            <div className="flex gap-2 w-full">
-                <div className="w-full">
-                    <input
-                        id={inputProps.id}
-                        type={inputProps.type === "password" && !showPassword ? "password" : "text"}
-                        name={inputProps.name}
-                        placeholder={inputProps.placeholder}
-                        className="w-full focus:outline-none text-lg"
-                        value={inputProps.value}
-                        onChange={inputProps.onChange}
-                    />
-                    <hr className="border-t-2 border-black/5 rounded-full w-full" />
-                </div>
-                {inputProps.type === "password" && (
-                    <button
-                        type="button"
-                        onClick={() => setShowPassword((prev) => !prev)}
-                        className="text-black cursor-pointer hover:bg-black/5 rounded-full p-1"
-                        aria-label={showPassword ? "Hide password" : "Show password"}
-                    >
-                        {!showPassword ? <EyeOff size={20} opacity={0.6} /> : <Eye size={20} opacity={0.6} />}
-                    </button>
-                )}
-            </div>
-        </div>
-    );
-}
-
-export default Login;
Index: ontend/src/pages/Mentoring.tsx
===================================================================
--- frontend/src/pages/Mentoring.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,147 +1,0 @@
-import { Mail, MapPin } from "lucide-react";
-import React from "react";
-import { useAuthContext } from "../context/AuthContext.tsx";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import Arrow from "../../public/Shifter-Arrow-White.png";
-import { sendEmailApi } from "../api/contactApi.ts";
-import { useTranslation } from "react-i18next";
-
-function Mentoring() {
-    const { t } = useTranslation("mentoring");
-    const { user, accessToken } = useAuthContext();
-    const [subject, setSubject] = React.useState("");
-    const [message, setMessage] = React.useState("");
-    const [loading, setLoading] = React.useState(false);
-    const [error, setError] = React.useState("");
-    const [isMessageSent, setIsMessageSent] = React.useState(false);
-
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-
-        setLoading(true);
-        sendEmailApi(accessToken || "", "Mentoring Inquiry - " + subject, message)
-            .then(() => {
-                setIsMessageSent(true);
-                setError("");
-            })
-            .catch((err) => {
-                setError(t("emailError"));
-                console.error("Error sending email for mentoring inquiry:", err);
-            })
-            .finally(() => setLoading(false));
-    }
-
-    return (
-        <main className="bg-gradient-to-b from-shifter via-shifter/20 via-40% to-beige">
-            {/*Hero*/}
-            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg text-white-text">
-                <h1 className="text-5xl font-bold">{t("heroTitle")}</h1>
-                <p className="text-xl font-light" dangerouslySetInnerHTML={{ __html: t("heroDescription") }} />
-            </section>
-
-            {/*Contact Form*/}
-            <section className="flex items-center justify-center w-full px-horizontal-lg">
-                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4 shadow-md shadow-black/10">
-                    {/*Contact Info*/}
-                    <div className="border-1 border-white/40 relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
-                        <div className="flex flex-col gap-2 items-start text-left">
-                            <h2 className="text-2xl font-semibold whitespace-nowrap">{t("contactInfoTitle")}</h2>
-                            <p className="text-white/80 font-light text-sm">{t("contactInfoDescription")}</p>
-                        </div>
-                        <div className="flex gap-4 items-center">
-                            <Mail size={24} color="var(--color-white)" />
-                            {t("contactEmail")}
-                        </div>
-                        <div className="flex gap-4 items-center">
-                            <MapPin size={24} color="var(--color-white)" />
-                            {t("contactLocation")}
-                        </div>
-
-                        <div className="absolute -bottom-26 right-12 flex flex-col opacity-40 rotate-40">
-                            <img src={Arrow} className="w-28 h-auto" alt="Shifter Arrow" />
-                            <img src={Arrow} className="w-28 h-auto rotate-180" alt="Shifter Arrow" />
-                        </div>
-                    </div>
-
-                    {/*Form*/}
-                    <div className="flex flex-col gap-4 col-span-2">
-                        <div className="grid grid-cols-2 gap-4 items-center">
-                            <p className="text-black/40 text-xs col-span-2">{t("autoFilledNote")}</p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
-                                {t("name")}: <span className="text-black-text font-normal">{user?.name}</span>
-                            </p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
-                                {t("email")}: <span className="text-black-text font-normal">{user?.email}</span>
-                            </p>
-                        </div>
-
-                        <hr className="border-t-1 border-black/20 rounded-full" />
-
-                        <form onSubmit={handleSubmit} className="flex flex-col gap-4 items-start">
-                            <div className="flex flex-col gap-4 items-center w-full">
-                                <TextInput
-                                    label={t("subjectLabel")}
-                                    name="subject"
-                                    placeholder={t("subjectPlaceholder")}
-                                    rows={1}
-                                    onChange={(e) => setSubject(e.target.value)}
-                                />
-                                <TextInput
-                                    label={t("messageLabel")}
-                                    name="message"
-                                    placeholder={t("messagePlaceholder")}
-                                    rows={8}
-                                    onChange={(e) => setMessage(e.target.value)}
-                                />
-                                {error && <p className="text-red-500 text-md font-medium text-center">{error}</p>}
-                            </div>
-
-                            {isMessageSent ? (
-                                <div className="text-center w-full">
-                                    <h2 className="text-xl font-bold text-shifter mb-2">{t("messageSentTitle")}</h2>
-                                    <p className="text-md font-medium text-black/80 max-w-xl mx-auto" dangerouslySetInnerHTML={{ __html: t("messageSentDescription") }} />
-                                </div>
-                            ) : (
-                                <div className="flex items-center gap-6">
-                                    <button
-                                        className="hover:shadow-shifter/60 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-60 shadow-md shadow-shifter/40 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
-                                        disabled={loading}
-                                        type="submit"
-                                    >
-                                        {loading ? t("sending") : t("sendMessage")}
-                                    </button>
-                                    {loading && <div className="loader" />}
-                                </div>
-                            )}
-                        </form>
-                    </div>
-                </div>
-            </section>
-        </main>
-    );
-}
-
-function TextInput({ label, name, placeholder, rows, onChange }: {
-    label: string;
-    name: string;
-    placeholder: string;
-    rows: number;
-    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}) {
-    return (
-        <label className="w-full flex flex-col items-start gap-2">
-            <span className="text-black/40 font-semibold text-md peer-focused:text-shifter">{label}</span>
-            <textarea
-                required
-                onChange={onChange}
-                rows={rows}
-                name={name}
-                className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm resize-none min-h-fit custom-scrollbar focus:outline-none focus:border-shifter/40 focus:border-2"
-                placeholder={placeholder}
-            />
-        </label>
-    );
-}
-
-export default Mentoring;
Index: ontend/src/pages/Personalize.tsx
===================================================================
--- frontend/src/pages/Personalize.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,137 +1,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterArrow from "../../public/Shifter-Arrow-White.png";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import {Link, useNavigate} from "react-router-dom";
-import { usePersonalizeHook } from "../hooks/usePersonalizeHook.tsx";
-import { Box, Step, StepLabel, Stepper } from "@mui/material";
-import { CustomStepperConnector, CustomStepperStepIcon } from "../components/registerSteps/CustomStepper.tsx";
-import { AnimatePresence, motion } from "framer-motion";
-import { useTranslation } from "react-i18next";
-
-function Personalize() {
-    const { t } = useTranslation("personalize");
-    const {
-        verificationChecked,
-        isVerified,
-        isLoading,
-        activeStep,
-        showError,
-        error,
-        direction,
-        variants,
-        stepsContent,
-        handleNext,
-        handleBack,
-        handlePersonalize
-    } = usePersonalizeHook();
-    const navigate = useNavigate();
-
-    if (!verificationChecked || !isVerified) {
-        navigate("/")
-        return undefined;
-    }
-
-    return (
-        <main className="flex font-montserrat h-screen bg-beige">
-
-            {/* LEFT HEADER AND BACKGROUND */}
-            <section className="relative bg-black w-[55%] overflow-hidden">
-                <div className="absolute w-full h-full bg-shifter/80 z-0 text-white px-16 flex flex-col gap-4 justify-center text-start">
-                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2"/>
-                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2"/>
-                    <h1 className="text-7xl font-semibold z-2 whitespace-nowrap">{t("title")}</h1>
-                    <p className="text-2xl font-light z-2">{t("subtitle")}</p>
-                </div>
-            </section>
-
-            {/* RIGHT FORM CONTAINER */}
-            <section className="relative flex flex-col justify-center items-center flex-1 px-horizontal-md gap-6">
-                <div className="absolute top-0 px-4 py-4 flex w-full justify-between items-center">
-                    <Link to={"/"} >
-                        <img src={ShifterLogo} alt="Shifter Logo" className="w-40 h-auto object-contain"/>
-                    </Link>
-                    <Link to={"/"} className="hover:bg-shifter/20 hover:text-shifter underline decoration-current font-semibold text-black/80 rounded-sm px-4 py-2">
-                        {t("backToMain")}
-                    </Link>
-                </div>
-
-                {isVerified ? (
-                    <div className="flex flex-col items-center justify-center">
-                        <div className="flex flex-col gap-4 bg-white rounded-2xl shadow-lg p-8 w-fit text-center">
-                            <h2 className="text-2xl font-bold text-red">{t("verificationFailedTitle")}</h2>
-                            <p className="font-medium text-black-text/80 max-w-xl mx-auto">
-                                {t("verificationFailedMessage1")}
-                                <br/>
-                                {t("verificationFailedMessage2")}
-                            </p>
-                        </div>
-                    </div>
-                ) : (
-                    <Box className="w-full flex flex-col">
-                        <Stepper activeStep={activeStep} alternativeLabel connector={<CustomStepperConnector/>}>
-                            {stepsContent.map((_, index) => (
-                                <Step key={index}>
-                                    <StepLabel StepIconComponent={CustomStepperStepIcon} className="text-shifter font-semibold"/>
-                                </Step>
-                            ))}
-                        </Stepper>
-
-                        <Box className="flex flex-col overflow-hidden gap-2">
-                            <AnimatePresence mode="wait" initial={false} custom={direction}>
-                                <motion.div
-                                    key={activeStep}
-                                    custom={direction}
-                                    variants={variants}
-                                    initial="enter"
-                                    animate="center"
-                                    exit="exit"
-                                    transition={{ x: { type: "spring", stiffness: 500, damping: 40 }, opacity: { duration: 0.2 } }}
-                                    className="h-80 flex flex-col justify-center"
-                                >
-                                    {stepsContent[activeStep]}
-                                </motion.div>
-                            </AnimatePresence>
-
-                            {showError && <p className="text-red-500 text-sm">{error}</p>}
-
-                            <Box className="flex flex-col justify-center items-center gap-2">
-                                <div className="flex justify-center gap-4 w-full">
-                                    <button
-                                        disabled={activeStep === 0}
-                                        onClick={handleBack}
-                                        className="disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none hover:shadow-sm hover:shadow-black/20 transition-all duration-200 ease-in-out border-3 border-white/50 w-1/3 py-1 bg-black/10 text-black/60 cursor-pointer rounded-sm"
-                                    >
-                                        {t("back")}
-                                    </button>
-
-                                    {activeStep === stepsContent.length - 1 ? (
-                                        <button
-                                            onClick={handlePersonalize}
-                                            className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out px-8 border-3 border-white/50 bg-shifter text-white cursor-pointer rounded-md ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
-                                        >
-                                            {isLoading ? t("settingUp") : t("startUsing")}
-                                        </button>
-                                    ) : (
-                                        <button
-                                            onClick={handleNext}
-                                            className="disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out w-1/3 border-3 border-white/50 bg-shifter text-white cursor-pointer rounded-md"
-                                        >
-                                            {t("next")}
-                                        </button>
-                                    )}
-
-                                    {isLoading && <div className="h-full loader"></div>}
-                                </div>
-                            </Box>
-                        </Box>
-                    </Box>
-                )}
-            </section>
-        </main>
-    );
-}
-
-export default Personalize;
Index: ontend/src/pages/Profile.tsx
===================================================================
--- frontend/src/pages/Profile.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,61 +1,0 @@
-import ProfileInfo from "../components/ProfileInfo.tsx";
-import ProfileSkillsInterests from "../components/ProfileSkills&Interests.tsx";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import ProfileMyProfile from "../components/ProfileMyProfile.tsx";
-import ProfileSkeleton from "../components/skeletons/ProfileSkeleton.tsx";
-import React from "react";
-import ProfileModalAddSkillsInterests from "../components/ProfileModalAddSkills&Interests.tsx";
-
-function Profile() {
-    const {user, loading, logout} = useAuthContext();
-    const [showModalDesiredSkills, setShowModalDesiredSkills] = React.useState(false);
-    const [showModalInterests, setShowModalInterests] = React.useState(false);
-
-    if (loading) {
-        return <ProfileSkeleton/>;
-    }
-
-    return (
-        <main className="grid grid-cols-4 gap-x-12 py-vertical-lg pt-top-nav-lg px-horizontal-md  bg-beige">
-            <div className="col-span-1 flex flex-col gap-6">
-                <ProfileInfo/>
-                {user?.skills && user.skills.length > 0 && (
-                    <ProfileSkillsInterests title="Learned Skills" pills={user?.skills || []} />)}
-                <ProfileSkillsInterests title="Desired Skills" pills={user?.desiredSkills || []} openModal={() => setShowModalDesiredSkills(true)}/>
-                <ProfileSkillsInterests title="Interests" pills={user?.interests || []} openModal={() => setShowModalInterests(true)}/>
-                <button
-                    onClick={logout}
-                    className="hover:border-white/40 hover:bg-red hover:text-white hover:shadow-lg hover:shadow-red/50 transition-all duration-200 ease-in-out cursor-pointer
-                    py-2 rounded-sm border-2 border-red/40 text-red/80 font-semibold"
-                >
-                    Log Out
-                </button>
-            </div>
-
-            <div className="col-span-3">
-                <ProfileMyProfile/>
-            </div>
-
-            {
-                showModalDesiredSkills && (
-                    <ProfileModalAddSkillsInterests
-                        type={"desiredSkills"}
-                        label={"Identify Skills You’d Like to Improve"}
-                        closeModal={() => setShowModalDesiredSkills(false)}
-                    />
-                )
-            }
-            {
-                showModalInterests && (
-                    <ProfileModalAddSkillsInterests
-                        type={"interests"}
-                        label={"Choose Topics You’re Interested In"}
-                        closeModal={() => setShowModalInterests(false)}
-                    />
-                )
-            }
-        </main>
-    )
-}
-
-export default Profile;
Index: ontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,179 +1,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterArrow from "../../public/Shifter-Arrow-White.png";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import { Link } from "react-router-dom";
-import React from "react";
-import { Eye, EyeOff } from "lucide-react";
-import { useRegisterHook } from "../hooks/useRegisterHook.tsx";
-import GoogleLoginButton from "../components/GoogleLoginButton.tsx";
-import { useTranslation } from "react-i18next";
-
-function Register() {
-    const { t } = useTranslation("register");
-    const {
-        email,
-        setEmail,
-        password,
-        setPassword,
-        passwordConfirmation,
-        setPasswordConfirmation,
-        showPassword,
-        setShowPassword,
-        showError,
-        error,
-        isSuccess,
-        isLoading,
-        handleRegister
-    } = useRegisterHook();
-
-    return (
-        <main className="flex font-montserrat h-screen bg-beige">
-            {/* LEFT HEADER AND BACKGROUND */}
-            <section className="relative bg-black w-[55%] overflow-hidden">
-                <div className="absolute w-full h-full bg-shifter/80 z-0 text-white px-16 flex flex-col gap-4 justify-center text-start">
-                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2"/>
-                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2"/>
-                    <h1 className="text-7xl font-semibold z-2 whitespace-nowrap">{t("title")}</h1>
-                    <p className="text-2xl font-light z-2">{t("subtitle")}</p>
-                </div>
-            </section>
-
-            {/* RIGHT FORM CONTAINER */}
-            <section className="relative flex flex-col justify-center items-center flex-1 px-horizontal-md">
-                <div className="absolute top-0 px-4 py-4 flex w-full justify-between items-center">
-                    <Link to={"/"} >
-                        <img src={ShifterLogo} alt="Shifter Logo" className="w-40 h-auto object-contain"/>
-                    </Link>
-                    <Link to={"/"} className="hover:bg-shifter/20 hover:text-shifter underline decoration-current font-semibold text-black/80 rounded-sm px-4 py-2">
-                        {t("backToMain")}
-                    </Link>
-                </div>
-
-                {isSuccess ? (
-                    <div className="flex flex-col items-center justify-center">
-                        <div className="flex flex-col gap-4 bg-white rounded-2xl shadow-lg p-8 w-fit text-center">
-                            <h2 className="text-2xl font-bold text-shifter">{t("verifyEmail")}</h2>
-                            <p className="font-medium text-black-text/80 max-w-xl mx-auto">
-                                {t("verificationSent1")} <span className='font-semibold text-shifter'>{email}</span> {t("verificationSent2")}
-                            </p>
-                        </div>
-                    </div>
-                ) : (
-                    <>
-                        <form onSubmit={handleRegister} className="flex flex-col gap-4 w-full items-center">
-                            <Input
-                                placeholder={t("emailPlaceholder")}
-                                label={t("emailLabel")}
-                                name="email"
-                                type="email"
-                                id="email"
-                                value={email}
-                                onChange={e => setEmail(e.target.value)}
-                                showPassword={showPassword}
-                                setShowPassword={setShowPassword}
-                            />
-                            <Input
-                                placeholder={t("passwordPlaceholder")}
-                                label={t("passwordLabel")}
-                                name="password"
-                                type="password"
-                                id="password"
-                                value={password}
-                                onChange={e => setPassword(e.target.value)}
-                                showPassword={showPassword}
-                                setShowPassword={setShowPassword}
-                            />
-                            <Input
-                                placeholder={t("passwordConfirmationPlaceholder")}
-                                label={t("passwordConfirmationLabel")}
-                                name="passwordConfirmation"
-                                type="password"
-                                id="password-confirmation"
-                                value={passwordConfirmation}
-                                onChange={e => setPasswordConfirmation(e.target.value)}
-                                showPassword={showPassword}
-                                setShowPassword={setShowPassword}
-                            />
-
-                            {showError && <p className="text-red-500 text-sm">{error}</p>}
-
-                            <div className="flex gap-2 justify-center text-md w-full text-lg mt-4">
-                                <button
-                                    type="submit"
-                                    disabled={isLoading}
-                                    className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out cursor-pointer rounded-md border-3 border-white/50 text-white px-8 py-1 bg-shifter font-medium whitespace-nowrap ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
-                                >
-                                    {isLoading ? t("creatingAccount") : t("createAccount")}
-                                </button>
-                                <Link
-                                    to="/login"
-                                    className="hover:shadow-md hover:shadow-shifter/20 transition-all duration-200 ease-in-out cursor-pointer rounded-md text-shifter/80 w-1/3 py-1 bg-white border-3 border-shifter/20 font-medium whitespace-nowrap opacity-80"
-                                >
-                                    {t("logIn")}
-                                </Link>
-                                {isLoading && <div className="h-full loader"></div>}
-                            </div>
-                        </form>
-
-                        <div className="my-4 flex items-center gap-2 w-9/10 text-black opacity-20">
-                            <hr className="border-t-2 border-black w-full"/>
-                            <p>{t("or")}</p>
-                            <hr className="border-t-2 border-black w-full"/>
-                        </div>
-
-                        <GoogleLoginButton text={t("googleLogin")} />
-                    </>
-                )}
-            </section>
-        </main>
-    )
-}
-
-interface InputProps {
-    placeholder: string;
-    label: string;
-    name: string;
-    type: string;
-    id: string;
-    value: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    showPassword: boolean;
-    setShowPassword: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-function Input(inputProps: InputProps) {
-    return (
-        <div className="relative flex flex-col gap-1 px-6 py-1.5 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm w-full">
-            <label htmlFor={inputProps.id} className="text-shifter text-light">{inputProps.label}</label>
-            <div className="flex gap-2 w-full">
-                <div className="w-full">
-                    <input
-                        id={inputProps.id}
-                        type={inputProps.showPassword ? "text" : inputProps.type}
-                        name={inputProps.name}
-                        placeholder={inputProps.placeholder}
-                        className="w-full focus:outline-none text-lg"
-                        value={inputProps.value}
-                        onChange={inputProps.onChange}
-                    />
-                    <hr className="border-t-2 border-black/5 rounded-full w-full" />
-                </div>
-                {inputProps.type === "password" && (
-                    <button
-                        type="button"
-                        onClick={() => inputProps.setShowPassword(prev => !prev)}
-                        className="text-black cursor-pointer hover:bg-black/5 rounded-full p-1"
-                        aria-label={inputProps.showPassword ? "Hide password" : "Show password"}
-                    >
-                        {!inputProps.showPassword ? <EyeOff size={20} opacity={0.6} /> : <Eye size={20} opacity={0.6} />}
-                    </button>
-                )}
-            </div>
-        </div>
-    );
-}
-
-export default Register;
Index: ontend/src/slick-custom.css
===================================================================
--- frontend/src/slick-custom.css	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,85 +1,0 @@
-.slick-track {
-    display: flex;
-    align-items: stretch;
-}
-
-.slick-slide {
-    padding: 0 3rem;
-    opacity: 0.6;
-    transform: scale(0.8);
-    transition: all 0.4s ease-in-out;
-
-    > div {
-        display: flex;
-        flex-direction: column;
-        justify-content: stretch;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    button {
-        cursor: initial;
-    }
-
-    button:hover {
-        box-shadow: none !important;
-    }
-}
-
-
-.slick-center {
-    height: auto;
-    display: flex;
-    align-items: stretch;
-    opacity: 1;
-    transform: scale(1);
-    transition: all 0.4s ease-in-out;
-
-    > div {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        height: 100%;
-        border-radius: 12px;
-        overflow: hidden;
-    }
-}
-
-.slick-list {
-    margin: 0 -3rem;
-}
-
-.slick-prev, .slick-next {
-    width: 8rem;
-    height: 2rem;
-    z-index: 1;
-    &:before {
-        content: '';
-        width: 2rem;
-        height: 2rem;
-        border: solid var(--color-shifter);
-        opacity: 0.6;
-        border-width: 0 4px 4px 0;
-        border-radius: 4px;
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-    }
-}
-
-.slick-prev {
-    left: calc(33.33% - 90px);
-
-    &:before {
-        transform: translate(-25%, -50%) rotate(135deg);
-    }
-}
-
-.slick-next {
-    right: calc(33.33% - 90px);
-
-    &:before {
-        transform: translate(-75%, -50%) rotate(-45deg);
-    }
-}
Index: ontend/src/utils/hexToRGB.ts
===================================================================
--- frontend/src/utils/hexToRGB.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,11 +1,0 @@
-export function hexToRgb(hex: string) {
-    // Remove hash if present
-    hex = hex.replace(/^#/, "");
-    // Parse r,g,b
-    const bigint = parseInt(hex, 16);
-    const r = (bigint >> 16) & 255;
-    const g = (bigint >> 8) & 255;
-    const b = bigint & 255;
-    return `${r}, ${g}, ${b}`;
-}
-
Index: ontend/src/utils/mapper.ts
===================================================================
--- frontend/src/utils/mapper.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,60 +1,0 @@
-
-export function priceToQueryMapper(option: string): string {
-    switch (option) {
-        case "Free":
-            return "free";
-        case "< $20":
-            return "low";
-        case "$20 - $50":
-            return "medium";
-        case "$50+":
-            return "high";
-        default:
-            return "";
-    }
-}
-
-export function queryToPriceMapper(option: string): string {
-    switch (option) {
-        case "free":
-            return "Free";
-        case "low":
-            return "< $20";
-        case "medium":
-            return "$20 - $50";
-        case "high":
-            return "$50+";
-        default:
-            return "";
-    }
-}
-
-export function durationToQueryMapper(option: string): string {
-    switch (option) {
-        case "< 3 hours":
-            return "extraShort";
-        case "3-6 hours":
-            return "short";
-        case "6-10 hours":
-            return "medium";
-        case "10+ hours":
-            return "long";
-        default:
-            return "";
-    }
-}
-
-export function queryToDurationMapper(option: string): string {
-    switch (option) {
-        case "extraShort":
-            return "< 3 hours";
-        case "short":
-            return "3-6 hours";
-        case "medium":
-            return "6-10 hours";
-        case "long":
-            return "10+ hours";
-        default:
-            return "";
-    }
-}
Index: ontend/src/utils/showInfoToast.ts
===================================================================
--- frontend/src/utils/showInfoToast.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,14 +1,0 @@
-import { toast } from "react-toastify";
-
-export const showInfoToast = (message: string) => {
-    toast.info(message, {
-        position: "top-right",
-        autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-        theme: "light",
-    });
-};
Index: ontend/src/utils/slug.ts
===================================================================
--- frontend/src/utils/slug.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,15 +1,0 @@
-
-export function slugify(text: string): string {
-    return text
-        .toLowerCase()
-        .replace(/ /g, '-')
-        .replace("&", "and")
-        .replace(/[^\w-]+/g, "") // Remove non-word characters (not including hyphens)
-}
-
-export function unslugify(text: string): string {
-    return text
-        .replace(/-/g, ' ')
-        .replace("and", "&")
-        .trim();
-}
Index: ontend/src/utils/toEnumFormat.ts
===================================================================
--- frontend/src/utils/toEnumFormat.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,3 +1,0 @@
-export function toEnumFormat(str: string): string {
-    return str.trim().replace(/\s+/g, '_').toUpperCase();
-}
Index: ontend/src/utils/toUrlFormat.ts
===================================================================
--- frontend/src/utils/toUrlFormat.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,14 +1,0 @@
-export function toUrlFormat(title: string): string {
-    return title
-        .toLowerCase()
-        .trim() // Trim leading and trailing spaces
-        .replace(/\s+/g, "-") // Replace spaces with hyphens
-        .replace(/-+/g, "-"); // Replace multiple hyphens with a single hyphen
-}
-
-export function fromUrlFormat(url: string): string {
-    return url
-        .toLowerCase()
-        .replace(/-/g, " ") // Replace hyphens with spaces
-        .replace(/\b\w/g, c => c.toUpperCase()); // Capitalize the first letter of each word
-}
Index: ontend/src/utils/useSessionStorage.ts
===================================================================
--- frontend/src/utils/useSessionStorage.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,21 +1,0 @@
-export function getFromSessionStorage<T>(key: string): T | null {
-    try {
-        const item = sessionStorage.getItem(key);
-        if (!item) return null;
-
-        return JSON.parse(item) as T;
-    } catch (error) {
-        console.error(`Failed to load or parse sessionStorage key "${key}":`, error);
-        sessionStorage.removeItem(key); // Remove corrupted data
-        return null;
-    }
-}
-
-export function saveToSessionStorage<T>(key: string, value: T): void {
-    try {
-        sessionStorage.setItem(key, JSON.stringify(value));
-    } catch (error) {
-        console.error(`Failed to save "${key}" to sessionStorage:`, error);
-    }
-}
-
Index: ontend/src/utils/validation.ts
===================================================================
--- frontend/src/utils/validation.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,15 +1,0 @@
-export function hasDigit(str: string) {
-    return /\d/.test(str);
-}
-
-export function hasUppercase(str: string) {
-    return /[A-Z]/.test(str);
-}
-
-export function hasSpecialChar(str: string) {
-    return /[!@#$%^&*(),.?":{}|<>]/.test(str);
-}
-
-export function isValidEmail(email: string) {
-    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-}
Index: ontend/src/vite-env.d.ts
===================================================================
--- frontend/src/vite-env.d.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,1 +1,0 @@
-/// <reference models="vite/client" />
Index: ontend/tailwind.config.js
===================================================================
--- frontend/tailwind.config.js	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,59 +1,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-    content: [
-        "./index.html",
-        "./src/**/*.{js,ts,jsx,tsx}",
-    ],
-    theme: {
-        extend: {
-            spacing: {
-                // Map your spacing variables as custom spacing tokens
-                'horizontal-xl': '12rem',
-                'horizontal-lg': '10rem',
-                'horizontal-md': '7rem',
-                'horizontal-sm': '4rem',
-
-                'vertical-xl': '5rem',
-                'vertical-lg': '3rem',
-                'vertical-md': '2rem',
-                'vertical-sm': '1rem',
-
-                'top-nav-xl': '9rem',
-                'top-nav-lg': '8rem',
-                'top-nav-md': '7rem',
-                'top-nav-sm': '6rem',
-
-                'between-lg': '3rem',
-                'between-md': '2rem',
-                'between-sm': '1rem',
-            },
-            colors: {
-                beige: '#F0CFB5',
-                shifter: '#008CC2',
-                red: '#FF6F61',
-                'dark-blue': '#002E5D',
-                'deep-green': '#2C6B3D',
-                gold: '#FFB300',
-                teal: '#009688',
-                'dark-gray': '#666666',
-                'bright-gray': '#DDDDDD',
-                gray: '#E5E7EB',
-                'black-text': '#333333',
-                'white-text': '#EEEEEE',
-            },
-            boxShadow: {
-                'up-sm': '0 -1px 2px 0 rgba(0, 0, 0, 0.05)',
-                up: '0 -1px 3px 0 rgba(0, 0, 0, 0.1), 0 -1px 2px 0 rgba(0, 0, 0, 0.06)',
-                'up-md': '0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -2px rgba(0, 0, 0, 0.06)',
-                'up-lg': '0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -4px rgba(0, 0, 0, 0.05)',
-                'up-xl': '0 -20px 25px -5px rgba(0, 0, 0, 0.1), 0 -10px 10px -5px rgba(0, 0, 0, 0.04)',
-                'up-2xl': '0 -25px 50px -12px rgba(0, 0, 0, 0.25)',
-            },
-            fontFamily: {
-                sans: ['"Source Sans 3"', 'sans-serif'],
-                montserrat: ['Montserrat', 'sans-serif'],
-            },
-        },
-    },
-    plugins: [],
-}
Index: ontend/tsconfig.app.json
===================================================================
--- frontend/tsconfig.app.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,28 +1,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["src"]
-}
Index: ontend/tsconfig.json
===================================================================
--- frontend/tsconfig.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,7 +1,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}
Index: ontend/tsconfig.node.json
===================================================================
--- frontend/tsconfig.node.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,25 +1,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
Index: ontend/vite.config.ts
===================================================================
--- frontend/vite.config.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,12 +1,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [
-      react(),
-      tailwindcss(),
-  ],
-})
Index: ckage-lock.json
===================================================================
--- package-lock.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,6 +1,0 @@
-{
-  "name": "Shifter",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}
Index: 
===================================================================
--- q	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ 	(revision )
@@ -1,65 +1,0 @@
-[33mcommit 3487c01a2bdc2a11349375008d19da3c5b0c6d78[m[33m ([m[1;36mHEAD[m[33m -> [m[1;32mmain[m[33m)[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Wed Jun 25 14:29:56 2025 +0200
-
-    Added authentication. Changed the User class to Account.
-
-[33mcommit e13f128f19b817d19e3e9ba68a26b94d45cef00b[m[33m ([m[1;31morigin/main[m[33m, [m[1;31morigin/HEAD[m[33m)[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Tue Jun 24 11:08:50 2025 +0200
-
-    Added Log In and Register Pages
-
-[33mcommit d797dce91fdb18630fa8863ded6bfcbea51b4789[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Wed Jun 18 23:50:47 2025 +0200
-
-    Added almost the whole home page. Still room for design changes.
-
-[33mcommit da69b4329aeeddc8aa8dd26f1b3a7e202c8de03a[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Mon Jun 16 22:36:41 2025 +0200
-
-    Initialized frontend. Added Navbar, Hero section, CollaborationSteps section.
-
-[33mcommit 8a426f988b1fd1d0841e7a45b8db71b44ad54ce9[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Sun Jun 15 16:41:40 2025 +0200
-
-    Added some controllers. They are not finished. I have to setup admin controller, but will do that later in the project.
-
-[33mcommit d061aac450daa79ad7e43ae505b0db48a22e27a4[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Tue Jun 10 18:01:37 2025 +0200
-
-    Added implementations for services. Connected to supabase cloud database
-
-[33mcommit 28a0f1e699697bfdd6b980fc72fa073669c3527e[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Mon Jun 9 22:00:40 2025 +0200
-
-    Added dto's. Also changed the @Data annotation in entities into @Getter and @Setter because i dont need equals and hash code and because it is safer
-
-[33mcommit 70aa2480f28f83be028c176c25c56fe52bd7c80f[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Mon Jun 9 12:12:14 2025 +0200
-
-    Configured model relations
-
-[33mcommit c0d09fa9265acc8e8d81a1199d31c5fe49f38c61[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Sun Jun 8 20:19:13 2025 +0200
-
-    Added models and base project structure
-
-[33mcommit 9fa7fd9bdab23eda90c9a0b70c1aea46eaf8f05d[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Sun Jun 8 19:34:09 2025 +0200
-
-    added frontend directory
-
-[33mcommit 0672351328b09eb632b662e1c87b53be8e8e5b3f[m
-Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
-Date:   Sun Jun 8 19:26:48 2025 +0200
-
-    Initial commit

- ${reminderHeading}

- Start learning today!

- Welcome to ${courseName}!

- Tips to Maximize Your Learning Journey -

- New Consultation Booked! -

- Session Details -

- User Information -

- About the Company: -

- Current Challenges: -

- Expectations from the Session: -

- Additional Information: -

- Consultation Scheduled!

- Verify Your Email Address -

Module {index + 1}

Lecture {lectureIndex + 1}