+
|
+
+
+
|
+
+
|
+
+
|
+
+ {children}
+
+ );
+};
+
+const GlobalSpotlight: React.FC<{
+ gridRef: React.RefObject
+ {children}
+
+);
+
+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
+ {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 = (
+ <>
+
+ {content}
+
+ );
+ }
+
+ return (
+
+ {card.icon}
+ + {card.title} +
++ {card.description} +
+ + ); + + if (enableStars) { + return ( + {
+ 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}
+
+ );
+ })}
+
+
+
+ );
+};
+
+export default Silk;
Index: frontend/src/assets/animations/SpikeAnimation.tsx
===================================================================
--- frontend/src/assets/animations/SpikeAnimation.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
+++ frontend/src/assets/animations/SpikeAnimation.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -0,0 +1,56 @@
+import React from "react";
+
+export function LightBeams(): React.ReactElement {
+ const beamCount = 120; // more beams for denser effect
+ const beams = Array.from({ length: beamCount }, (_, i) => {
+ const spacing = (window.innerWidth + 300) / beamCount; // tighter spacing
+ const x = i * spacing;
+ const width = 10 + Math.random() * 4; // thin but varied
+ const tilt = -50; // tilt to the right
+ const initialHeight = 120 + Math.random() * 80; // starting height
+
+ return (
+
+
+
+ );
+}
Index: frontend/src/assets/icons/LinkedIn.tsx
===================================================================
--- frontend/src/assets/icons/LinkedIn.tsx (revision fcb98a188079a5fc4d0f566d2251f6416711f591)
+++ frontend/src/assets/icons/LinkedIn.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -9,4 +9,5 @@
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"/>
+
)
}
Index: frontend/src/assets/icons/StarFilled.tsx
===================================================================
--- frontend/src/assets/icons/StarFilled.tsx (revision fcb98a188079a5fc4d0f566d2251f6416711f591)
+++ frontend/src/assets/icons/StarFilled.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -1,9 +1,14 @@
-export default function StarFilled({className = "w-6 h-6 text-black"}) {
+export default function StarFilled({className = "w-6 h-6 text-black", strokeWidth = 2}) {
return (
+ )
+}
Index: frontend/src/components/CollaborationSteps.tsx
===================================================================
--- frontend/src/components/CollaborationSteps.tsx (revision fcb98a188079a5fc4d0f566d2251f6416711f591)
+++ frontend/src/components/CollaborationSteps.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -29,5 +29,5 @@
return (
-
How to Start Your Journey to Success
@@ -37,6 +37,5 @@
{/* LINE AND DOTS */}
-
+
{[-0.2, 25, 50, 75, 99.8].map((percent, idx) => (
@@ -73,5 +72,5 @@
Index: frontend/src/components/CourseCard.tsx
===================================================================
--- frontend/src/components/CourseCard.tsx (revision fcb98a188079a5fc4d0f566d2251f6416711f591)
+++ frontend/src/components/CourseCard.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -9,5 +9,4 @@
import {useAuthContext} from "../context/AuthContext.tsx";
import {toggleFavoriteCourseApi} from "../api/userApi.ts";
-import {showInfoToast} from "../utils/showInfoToast.ts";
import {Sparkle} from "lucide-react";
@@ -95,13 +94,8 @@
{
- card.ratingCount > 10 ? (
- <>
-
- (false);
+
+ return (
+
+ )
+}
+
+export default CourseCardEnrolled;
Index: frontend/src/components/CoursesFilters.tsx
===================================================================
--- frontend/src/components/CoursesFilters.tsx (revision fcb98a188079a5fc4d0f566d2251f6416711f591)
+++ frontend/src/components/CoursesFilters.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -99,20 +99,27 @@
}
([]);
- const [allCourses, setAllCourses] = useState(allCoursesStorage || []);
-
- useEffect(() => {
- // Enrolled courses
- fetchEnrolledCoursesApi(accessToken || "")
- .then(data => {
- setEnrolledCourses(data);
- })
- .catch(error => {
- console.error("Failed to fetch enrolled courses:", error);
- })
-
- if (allCoursesStorage && allCoursesStorage.length > 0) {
- return;
- }
- const storedCourses = sessionStorage.getItem("allCourses");
- if (storedCourses) {
- setAllCoursesStorage(JSON.parse(storedCourses));
- setAllCourses(JSON.parse(storedCourses));
- 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]);
-
-
- function renderContent() {
- if (enrolledCourses.length === 0) {
- return (
-
- No limits, just potential — enroll in your first course!
-
- );
- }
-
- switch (selectedTab) {
- case "all":
- return (
- <>
- {
- enrolledCourses.map((course, index) => (
-
- ))
- }
-
- );
- case "active":
- return (
- <>
- {
- enrolledCourses.map((course, index) => (
-
- ))
- }
-
- );
- case "completed":
- return (
- <>
- {
- enrolledCourses.map((course, index) => (
-
- ))
- }
-
- );
- case "favorites":
- return (
- <>
- {
- allCourses.filter(course => user?.favoriteCourses.includes(course.id)).map((course, index) => (
-
- ))
- }
-
- );
- }
- }
-
- return (
-
- My Courses
-
- setSelectedTab("all")}/>
- setSelectedTab("active")}/>
- setSelectedTab("completed")}/>
- setSelectedTab("favorites")}/>
-
-
- {renderContent()}
-
-
- )
-}
-
-function CourseList({course}: { course: CoursePreview }) {
-
- return (
-
- )
-}
-
-function ListTab({name, isSelected, setSelectedTab}: {
- name: string;
- isSelected: boolean;
- setSelectedTab: () => void;
-}) {
- return (
-
-
-
- )
-}
-
-export default DashboardCourses;
Index: frontend/src/components/HeroAbout.tsx
===================================================================
--- frontend/src/components/HeroAbout.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
+++ frontend/src/components/HeroAbout.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -0,0 +1,52 @@
+import { ArrowRight } from "lucide-react";
+import { Link } from "react-router-dom";
+import CountUp from "react-countup";
+
+function HeroAbout() {
+ return (
+
+
+
+
+ About Shifter
+
+ 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.
+
+
+ Schedule a Free Consultation
+
+
+
+
+
+ Clients Empowered
+
+
+
+ Mentoring Hours
+
+
+
+ Years of Shifter
+
+
+
+
+
+
+ )
+}
+
+export default HeroAbout;
Index: frontend/src/components/HeroHome.tsx
===================================================================
--- frontend/src/components/HeroHome.tsx (revision fcb98a188079a5fc4d0f566d2251f6416711f591)
+++ frontend/src/components/HeroHome.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -1,101 +1,70 @@
-import StarFilled from "../assets/icons/StarFilled.tsx";
-import ShifterArrow from "../../public/Shifter-Arrow.png";
+
import {Link} from 'react-router-dom';
+import Silk from "../assets/animations/Silk.tsx";
+import CountUp from "react-countup";
function HeroHome() {
return (
-
-
- Business Excellence
-
- Powered by Expertise
-
+
- {/*
*/}
+
+ 
-
-
-
- We guide businesses from the basics of planning to complete transformations, offering
- expert
- mentoring, consulting, and e-learning. Whether you're starting small or aiming for major
- growth,
- we provide the support and tools to achieve lasting success!
-
-
-
- {/*CENTER IMAGE*/}
-
-
-
- {/*CTA BUTTONS*/}
-
-
- Book a Free Consultation
-
- Explore
- Our Courses
-
+
+
+
+ {/*Simply Shift*/}
+ Shift 2 Win
+
+
+ {/*Get tailored strategies that actually work*/}
+ Simplify your growth journey
+
+
+ {/*Practical tools and guidance to help your business grow with ease.*/}
+ {/*Expert mentorship, practical courses, and group academies in one place.*/}
+ Expert guidance, practical courses, and group academies designed to help family-owned businesses thrive.
+
-
-
- {/*RIGHT STATISTICS*/}
-
-
-
- 20+
- Years Experience
-
-
- 300+
- Clients Empowered
-
-
- 10+
- Courses Available
-
-
- 5000+
- Mentoring Hours
-
- {/**/}
- {/* 2
*/}
- {/* Expert Mentors*/}
- {/*
*/}
-
-
-
+ Businesses Empowered
+
+
+
+ Mentoring Hours
+
+
+
+ Years of Shifter
+
+
+
+ {/*Courses & Academies Available
*/}
+ Growth Programs Delivered
+
+
)
Index: frontend/src/components/ModalReviewCourse.tsx
===================================================================
--- frontend/src/components/ModalReviewCourse.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
+++ frontend/src/components/ModalReviewCourse.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -0,0 +1,175 @@
+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.tsx";
+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(0);
+ const [loading, setLoading] = useState(false);
+ const [fetchingReview, setFetchingReview] = useState(false);
+ const [error, setError] = useState("");
+
+ 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
+ {/* Close button */}
+
+
+
+ How Was Your Learning Experience?
+
+
+ {/* STARS */}
+
+ setHovered(0)}
+ >
+ {[1, 2, 3, 4, 5].map((star) => {
+ const filled = hovered ? star <= hovered : star <= review.rating;
+ const StarIcon = filled ? StarFilled : StarOutline;
+
+ return (
+ setHovered(star)}
+ onClick={() =>
+ setReview({...review, rating: star})
+ }
+ className={`cursor-pointer transition-colors duration-150`}
+ >
+
+
{[-0.2, 25, 50, 75, 99.8].map((percent, idx) => ( @@ -73,5 +72,5 @@ Index: frontend/src/components/CourseCard.tsx =================================================================== --- frontend/src/components/CourseCard.tsx (revision fcb98a188079a5fc4d0f566d2251f6416711f591) +++ frontend/src/components/CourseCard.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6) @@ -9,5 +9,4 @@ import {useAuthContext} from "../context/AuthContext.tsx"; import {toggleFavoriteCourseApi} from "../api/userApi.ts"; -import {showInfoToast} from "../utils/showInfoToast.ts"; import {Sparkle} from "lucide-react"; @@ -95,13 +94,8 @@
{
- card.ratingCount > 10 ? (
- <>
-
-
-
- {card.ratingCount} reviews
-
-
+ card.rating > 0 ? (
+
+
) : (
Index: frontend/src/components/CourseCardEnrolled.tsx
===================================================================
--- frontend/src/components/CourseCardEnrolled.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
+++ frontend/src/components/CourseCardEnrolled.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -0,0 +1,96 @@
+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";
+
+function CourseCardEnrolled({course, markCourseAsRated}: {
+ course: CoursePreviewEnrolled
+ markCourseAsRated: (rating: number) => void;
+}) {
+ const [showReviewModal, setShowReviewModal] = React.useState(false);
+
+ return (
+
+ )
+}
+
+export default CourseCardEnrolled;
Index: frontend/src/components/CoursesFilters.tsx
===================================================================
--- frontend/src/components/CoursesFilters.tsx (revision fcb98a188079a5fc4d0f566d2251f6416711f591)
+++ frontend/src/components/CoursesFilters.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -99,20 +99,27 @@
}
([]);
- const [allCourses, setAllCourses] = useState(allCoursesStorage || []);
-
- useEffect(() => {
- // Enrolled courses
- fetchEnrolledCoursesApi(accessToken || "")
- .then(data => {
- setEnrolledCourses(data);
- })
- .catch(error => {
- console.error("Failed to fetch enrolled courses:", error);
- })
-
- if (allCoursesStorage && allCoursesStorage.length > 0) {
- return;
- }
- const storedCourses = sessionStorage.getItem("allCourses");
- if (storedCourses) {
- setAllCoursesStorage(JSON.parse(storedCourses));
- setAllCourses(JSON.parse(storedCourses));
- 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]);
-
-
- function renderContent() {
- if (enrolledCourses.length === 0) {
- return (
-
- ))
- }
-
- );
- case "active":
- return (
- <>
- {
- enrolledCourses.map((course, index) => (
-
- ))
- }
-
- );
- case "completed":
- return (
- <>
- {
- enrolledCourses.map((course, index) => (
-
- ))
- }
-
- );
- case "favorites":
- return (
- <>
- {
- allCourses.filter(course => user?.favoriteCourses.includes(course.id)).map((course, index) => (
-
- ))
- }
-
- );
- }
- }
-
- return (
-
-
- )
-}
-
-function CourseList({course}: { course: CoursePreview }) {
-
- return (
-
- )
-}
-
-function ListTab({name, isSelected, setSelectedTab}: {
- name: string;
- isSelected: boolean;
- setSelectedTab: () => void;
-}) {
- return (
-
-
-
- )
-}
-
-export default DashboardCourses;
Index: frontend/src/components/HeroAbout.tsx
===================================================================
--- frontend/src/components/HeroAbout.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
+++ frontend/src/components/HeroAbout.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -0,0 +1,52 @@
+import { ArrowRight } from "lucide-react";
+import { Link } from "react-router-dom";
+import CountUp from "react-countup";
+
+function HeroAbout() {
+ return (
+
+
+
+ )
+}
+
+export default HeroAbout;
Index: frontend/src/components/HeroHome.tsx
===================================================================
--- frontend/src/components/HeroHome.tsx (revision fcb98a188079a5fc4d0f566d2251f6416711f591)
+++ frontend/src/components/HeroHome.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -1,101 +1,70 @@
-import StarFilled from "../assets/icons/StarFilled.tsx";
-import ShifterArrow from "../../public/Shifter-Arrow.png";
+
import {Link} from 'react-router-dom';
+import Silk from "../assets/animations/Silk.tsx";
+import CountUp from "react-countup";
function HeroHome() {
return (
-
-
- Business Excellence
-
+
- {/**/}
+
- No limits, just potential — enroll in your first course! -
- ); - } - - switch (selectedTab) { - case "all": - return ( - <> - { - enrolledCourses.map((course, index) => ( -My Courses
--
-
- {renderContent()}
-
-
+
+ +
+
+
+
+
+
+ About Shifter
++ 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. +
+ + Schedule a Free Consultation ++ +
+
+
+
+
+
+ Clients Empowered
+
+
+
+
+ Mentoring Hours
+
+
+
+
+ Years of Shifter
+
- Business Excellence
-
- Powered by Expertise
-
+
+
-
- {/*LEFT TEXT*/}
-
-
-
-
-
-
- {/*CENTER IMAGE*/}
- - We guide businesses from the basics of planning to complete transformations, offering - expert - mentoring, consulting, and e-learning. Whether you're starting small or aiming for major - growth, - we provide the support and tools to achieve lasting success! -
-
-
-
- {/*CTA BUTTONS*/}
- (0);
+ const [loading, setLoading] = useState(false);
+ const [fetchingReview, setFetchingReview] = useState(false);
+ const [error, setError] = useState("");
+
+ 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
+ {/* Close button */}
+
+
+
-
- Book a Free Consultation
-
- Explore
- Our Courses
-
+
-
+
+
-
- {/*RIGHT STATISTICS*/}
-
+
-
+ {/*Simply Shift*/}
+ Shift 2 Win
+
+ + {/*Get tailored strategies that actually work*/} + Simplify your growth journey +
++ {/*Practical tools and guidance to help your business grow with ease.*/} + {/*Expert mentorship, practical courses, and group academies in one place.*/} + Expert guidance, practical courses, and group academies designed to help family-owned businesses thrive. +
-
-
-
- 20+
- Years Experience
-
- 300+
- Clients Empowered
-
- 10+
- Courses Available
-
- 5000+
- Mentoring Hours
-
*/}
- {/* 2
*/}
- {/* Expert Mentors*/}
- {/*
-
+
+ Book a Free Consultation
+
+
)
Index: frontend/src/components/ModalReviewCourse.tsx
===================================================================
--- frontend/src/components/ModalReviewCourse.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
+++ frontend/src/components/ModalReviewCourse.tsx (revision 6758036ecbdac75c2b93a2f138427a3c46323fa6)
@@ -0,0 +1,175 @@
+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.tsx";
+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
+
+
+
+ Businesses Empowered
+
+
+
+
+ Mentoring Hours
+
+
+
+
+ Years of Shifter
+
+
+ {/*
+
+ {/*Courses & Academies Available
*/} +Growth Programs Delivered
++ How Was Your Learning Experience? +
+ + {/* STARS */} +
+
+
+ setHovered(0)}
+ >
+ {[1, 2, 3, 4, 5].map((star) => {
+ const filled = hovered ? star <= hovered : star <= review.rating;
+ const StarIcon = filled ? StarFilled : StarOutline;
+
+ return (
+
+
+
+ {hovered ? starTexts[hovered] : starTexts[review.rating]}
+
+ setHovered(star)}
+ onClick={() =>
+ setReview({...review, rating: star})
+ }
+ className={`cursor-pointer transition-colors duration-150`}
+ >
+
+ );
+ })}
+
+