website tutorial video

website/src/components/tutorial.tsx

@@ -3,11 +3,26 @@ import { Button } from './ui/button';
 import { useNavigate } from 'react-router-dom';
 
 const steps = [
-  "Welcome to LeetStudy! This website helps you practice and improve your coding skills with curated problems.",
-  "Use the menu to navigate to different sections like Problems, Statistics, and more.",
-  "Track your progress in the Statistics section, where you can view problems solved and your success rate.",
-  "Customize your experience with settings and difficulty filters.",
-  "You're all set! Start exploring and solving problems!"
+  {
+    text: "Welcome to LeetStudy! This website helps you practice and improve your coding skills with curated problems.",
+    video: null,
+  },
+  {
+    text: "Use the menu to navigate to different sections like Problems, Statistics, and more.",
+    video: "/videos/mainvid.mp4",
+  },
+  {
+    text: "Click on 'Preferences' to customize notification settings.",
+    video: "/videos/pref.mp4",
+  },
+  {
+    text: "Customize your profile settings by clicking on your name in the bottom left corner.",
+    video: "/videos/profile.mp4",
+  },
+  {
+    text: "You're all set! Start exploring and solving problems!",
+    video: null,
+  },
 ];
 
 export default function Tutorial() {
@@ -26,8 +41,22 @@ export default function Tutorial() {
 
   return (
     <div className="flex flex-col items-center justify-center h-screen p-4 bg-background text-foreground">
-      <div className="max-w-xl text-center text-lg mb-6">{steps[step]}</div>
-      <div className="flex gap-4">
+      <div className="max-w-2xl w-full flex flex-col items-center text-center space-y-4">
+        <p className="text-lg">{steps[step].text}</p>
+        {steps[step].video && (
+          <video
+            className="mt-4"
+            controls
+            src={steps[step].video}
+            style={{
+              maxWidth: '100%',
+              maxHeight: '750px',
+              borderRadius: '8px',
+            }}
+          />
+        )}
+      </div>
+      <div className="flex gap-4 mt-8">
         <Button onClick={prev} disabled={step === 0}>Previous</Button>
         {step < steps.length - 1 ? (
           <Button onClick={next}>Next</Button>