добавлено видео превью + стили

src/pages/CourseExercises.tsx

@@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom"
 
 import HeaderNav from "../components/HeaderNav"
 import BottomNavigation from "../components/BottomNavigation"
+import video from "../assets/video.mov"
 
 const CourseExercises: React.FC = () => {
   const history = useHistory()
@@ -104,11 +105,14 @@ const course = {
         <div className="glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative">
           {/* Exercise Image */}
           <div className="relative">
-            <img
+              <video
-              src={ currentExercise.image ||  "/src/assets/exersise.png" }
+                src={video}
-              alt={currentExercise.name}
+                className="w-full h-120 object-cover"
-              className="w-auto h-56 sm:h-64 object-cover mx-auto"
+                autoPlay
-            />
+                loop
+                muted
+                playsInline
+              />
             <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/10"></div>
 
             {/* Difficulty Badge */}

src/pages/Courses.tsx

@@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom"
 
 import HeaderNav from "../components/HeaderNav"
 
+
 const Home: React.FC = () => {
   const history = useHistory()
 
@@ -30,7 +31,7 @@ const Home: React.FC = () => {
 
         <div className="text-center relative ">
 
-          <div className="w-full h-14 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
+          <div className="w-full h-10 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
             {/* Прогрессная часть */}
             <div
               className="h-full bg-orange-400 transition-all duration-500 absolute left-0 top-0 rounded-l-xl"

src/pages/Exercise.tsx

@@ -5,6 +5,7 @@ import { useHistory } from "react-router-dom"
 
 import BottomNavigation from "../components/BottomNavigation"
 import HeaderNav from "../components/HeaderNav"
+import video from "../assets/video.mov"
 
 
 const Exercise: React.FC = () => {
@@ -108,10 +109,13 @@ const Exercise: React.FC = () => {
         <div className="px-4 sm:px-6 mt-10 mb-6">
           <div className="glass-morphism rounded-3xl overflow-hidden shadow-2xl border border-white/20 backdrop-blur-2xl">
             <div className="relative">
-              <img
+              <video
-                src="/placeholder.svg?height=250&width=400"
+                src={video}
-                alt="Exercise demonstration"
+                className="w-full h-120 object-cover"
-                className="w-full h-56 sm:h-64 object-cover"
+                autoPlay
+                loop
+                muted
+                playsInline
               />
               <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-black/10"></div>
               <div className="absolute inset-0 flex items-center justify-center">
@@ -119,8 +123,8 @@ const Exercise: React.FC = () => {
                   onClick={() => setIsPlaying(!isPlaying)}
                   className={
                     isPlaying
-                      ? "w-20 h-20 bg-transparent backdrop-blur-xl rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 transform hover:scale-110 border border-cyan-50"
+                      ? "w-20 h-20 bg-transparent backdrop-blur-xl rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 transform hover:scale-110 border border-cyan-50 opacity-40"
-                      : "rounded-full bg-orange-400 w-20 h-20 flex items-center justify-center"
+                      : "rounded-full  w-20 h-20 flex items-center justify-center backdrop-blur-xl opacity-70"
                   }
                 >
                   {isPlaying ? <PauseIcon /> : <PlayIcon />}
@@ -194,7 +198,7 @@ const Exercise: React.FC = () => {
                   </>
                 ) : (
                   <>
-                    <PlayIcon /> <span>Начать</span>
+                    <PlayIcon /> <span className="backdrop-blur-xl">Начать</span>
                   </>
                 )}
               </button>

src/pages/Welcome.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { useIonRouter } from '@ionic/react';
+// import { useIonRouter } from '@ionic/react';
 
 export default function Welcome() {
   const [animationPhase, setAnimationPhase] = useState(0)
@@ -48,27 +48,22 @@ export default function Welcome() {
 
 
 
-  const router = useIonRouter()
+  // const router = useIonRouter()
 
-    useEffect(() => {
+  //   useEffect(() => {
-      const timer = setTimeout(() => {
+  //     const timer = setTimeout(() => {
-        router.push("/home", "forward")
+  //       router.push("/home", "forward")
-      }, 5000) // Задержка 3 секунды
+  //     }, 5000) // Задержка 3 секунды
 
-      return () => clearTimeout(timer)
+  //     return () => clearTimeout(timer)
-    }, [router])
+  //   }, [router])
 
 
   return (
     <div className="min-h-screen relative overflow-hidden">
       {/* Background and particles */}
       <div className="absolute inset-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C]">
-        {/* Floating particles */}
+
-        <div className="absolute inset-0">
-          <div className="absolute top-20 left-10 w-32 h-32 bg-white/5 rounded-full animate-pulse blur-xl"></div>
-          <div className="absolute top-1/2 left-1/4 w-16 h-16 bg-white/5 rounded-full animate-ping blur-md"></div>
-          <div className="absolute top-1/3 right-1/3 w-20 h-20 bg-white/5 rounded-full animate-pulse blur-lg"></div>
-        </div>
         {/* SVG with animated figure */}
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -225,7 +220,7 @@ export default function Welcome() {
               {/* Line Loader - now appears with subtitle in phase 4, and grows from left to right */}
               <div
                 className={`h-1 bg-white/70 rounded-full mx-auto my-2 transition-all duration-500 ease-out`}
-                style={{ width: `${loaderWidth}%`, maxWidth: '200px', opacity: animationPhase >= 4 ? 1 : 0 }}
+                style={{ width: `${loaderWidth}%`, maxWidth: '340px', opacity: animationPhase >= 4 ? 1 : 0 }}
               ></div>
               {/* Subtitle - appears with opacity transition in phase 4 */}
               <p className={`text-white/90 text-xl font-medium tracking-wide transition-opacity duration-1000 ${animationPhase >= 4 ? 'opacity-100' : 'opacity-0'}`}>