diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..295096e
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = crlf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..bc77754
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,16 @@
+{
+    "useTabs": false,
+    "printWidth": 90,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "quoteProps": "as-needed",
+    "arrowParens": "avoid",
+    "requirePragma": false,
+    "insertPragma": false,
+    "trailingComma": "es5",
+    "semi": true,
+    "braceStyle": "1tbs",
+    "editorconfig": true
+}
diff --git a/next.config.js b/next.config.js
index 9785e4d..db64dce 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,7 +7,7 @@ const nextConfig = {
    * Added for GitHub Pages deployment.
    */
   basePath: "/react-learndash",
-  output: "export",
+  ...(!process.env.DEPLOY_TO_GITHUB_PAGES ? {output: 'export'} : {})
 }
 
 module.exports = nextConfig
diff --git a/package.json b/package.json
index e8e5a21..c4f5511 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
     "private": true,
     "scripts": {
         "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 next dev",
+        "dev2": "set NODE_TLS_REJECT_UNAUTHORIZED=0 && next dev",
         "build": "next build",
         "start": "next start",
         "export": "next build && next export",
diff --git a/public/assets/scss/components/_writing-evaluation-form.scss b/public/assets/scss/components/_writing-evaluation-form.scss
index 710e7ee..5d99545 100644
--- a/public/assets/scss/components/_writing-evaluation-form.scss
+++ b/public/assets/scss/components/_writing-evaluation-form.scss
@@ -1,121 +1,229 @@
-
 .content-box {
-  background: #eaeaea;
-  padding: 100px 100px;
-  margin: -5px 0px 25px -15px;
+    background: #eaeaea;
+    padding: 100px 100px;
+    margin: -5px 0px 25px -15px;
 }
 
+.incorrect,
+.delete {
+    text-decoration: line-through;
+    border-bottom: 1px solid #c38181;
+    color: #d5bbbb !important;
+    padding: 0 3px;
+}
 
-.incorrect, .delete {
-  text-decoration: line-through;
-  border-bottom: 2px solid #c38181;
-  color: #d5bbbb !important;
-  padding: 0 3px;
+.garbled {
+    // text-decoration: underline;
+    // text-decoration-style: wavy !important;
+    // text-decoration-thickness: 1px;
+    text-decoration-line: grammar-error;
+    color: #d5baba;
 }
 
 .corrected {
-  border-bottom: 2px solid #9ec59e;
-  padding-left: 3px;
-  font-weight: 600;
+    border-bottom: 1px solid #9ec59e;
+    padding-left: 3px;
+    font-weight: 600;
 }
 
 .space {
-  background: pink;
-  border: 1px solid pink;
-  padding-left: 3px;
+    background: pink;
+    border: 1px solid pink;
+    padding-left: 3px;
 }
 
 .addition {
-  color: #ff6700;
-  background: #ffd7b5;
-  border: 1px solid #ff6700;
-  padding: 0 3px;
+    color: #ff6700;
+    background: #ffd7b5;
+    border: 1px solid #ff6700;
+    padding: 0 3px;
 }
 
 .hovertextp {
-  position: relative;
-  display: inline-block;
-
-  .hovertext {
-    &:before {
-      content: "Feedback: " attr(data-hover);
-      visibility: hidden;
-      background-color: rgba(0, 0, 0, 0.8);
-      color: #fff;
-      text-align: center;
-      border-radius: 6px;
-      padding: 5px 0; /* Position the tooltip */
-      position: absolute;
-      display: block;
-      z-index: 9999;
-      top: auto; /* Reset the top property */
-      overflow: visible;
-      width: max-content;
-      max-width: 200px;
-    }
-
-    &:hover:before {
-      opacity: 1;
-      visibility: visible;
+    position: relative;
+    display: inline-block;
+
+    .hovertext {
+        &:before {
+            content: 'Feedback: ' attr(data-hover);
+            visibility: hidden;
+            background-color: rgba(0, 0, 0, 0.8);
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px 0; /* Position the tooltip */
+            position: absolute;
+            display: block;
+            z-index: 9999;
+            top: auto; /* Reset the top property */
+            overflow: visible;
+            width: max-content;
+            max-width: 200px;
+        }
+
+        &:hover:before {
+            opacity: 1;
+            visibility: visible;
+        }
     }
-  }
 }
 
-
 .nopaque {
-  opacity: 0.2;
+    opacity: 0.2;
 }
 
 .opaque {
-  opacity: 1.0;
-  background: #fff;
+    opacity: 1;
+    background: #fff;
 }
 
-
 .waf-menu.waf-menu {
+    li {
+        padding-top: 10px;
+
+        &:after {
+            content: '';
+        }
 
-  li {
-    padding-top: 10px;
+        &:hover {
+            background-color: #f0f0f0;
+        }
 
-    &:after {
-      content: '';
+        li {
+            padding-top: 0;
+            margin-top: 0;
+        }
     }
 
-    &:hover {
-      background-color: #f0f0f0;
+    a {
+        display: block;
+        cursor: pointer;
+        padding: 5px;
     }
 
-    li {
-      padding-top: 0;
-      margin-top: 0;
+    ul {
+        display: none;
+        list-style-type: none;
+        padding: 0 0 15px;
+        margin: 0;
+
+        ul {
+            padding: 0 0 5px;
+        }
+
+        &.active {
+            display: block;
+        }
     }
-  }
+}
 
-  a {
-    display: block;
-    cursor: pointer;
-    padding: 5px;
-  }
+.waf-textarea {
+    textarea {
+        background: #f5f4f4;
+    }
+}
 
-  ul {
-    display: none;
-    list-style-type: none;
-    padding: 0 0 15px;
-    margin: 0;
+/*----------- clear theme elements for Writing AI evaluation -------------*/
 
-    ul {
-      padding: 0 0 5px;
+.course-details-content {
+    max-width: 900px;
+    margin: 0 auto;
+    border: 1px solid #eaeaea;
+    border-radius: 5px;
+    padding: 0 50px 50px 50px;
+    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.05);
+}
+
+.waf-textarea textarea {
+    border: 1px solid #eaeaea !important;
+    border-radius: 5px;
+    height: 300px;
+    background-color: #fff;
+}
+
+.edu-btn {
+    margin-top: 30px;
+}
+
+label {
+    padding-left: 25px;
+}
+
+/* ----------------------------- */
+
+.writing-evaluation-form {
+    textarea[disabled] {
+        background-color: rgb(240, 240, 240);
+        cursor: not-allowed;
     }
 
-    &.active {
-      display: block;
+    button[disabled] {
+        filter: saturate(30%);
+        pointer-events: none;
     }
-  }
-}
 
+    .incorrect,
+    .deletion {
+        text-decoration: line-through;
+        border-bottom: 2px solid #c38181;
+        color: #d5bbbb !important;
+        padding: 0 3px 0 0;
+        display: inline;
+    }
+    .correct {
+        border-bottom: 2px solid #9ec59e;
+        padding: 0 3px 0 0;
+        font-weight: 600;
+        display: inline;
+    }
+    .addition {
+        color: #ff6700;
+        background: #ffd7b5;
+        border: 1px solid #ff6700;
+        padding: 0 3px 0 0;
+        display: inline;
+    }
+    .nochange {
+        display: inline;
+        padding: 0 3px 0 0;
+    }
 
-.waf-textarea {
-  textarea {
-    background: #f5f4f4;
-  }
+    .feedback {
+        .tab-wrapper {
+            display: flex;
+            margin: 0;
+        }
+
+        .tabs {
+            flex-grow: 0;
+            min-width: 210px;
+            width: 330px;
+            border-right: 1px solid #ddd;
+        }
+
+        .tab-link {
+            display: block;
+            padding: 10px;
+            background-color: #f0f0f0;
+            border: none;
+            text-align: left;
+            cursor: pointer;
+            width: 100%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .tab-link.active,
+        .tab-link:hover {
+            background-color: #ccc;
+        }
+
+        .tab-content {
+            flex-grow: 1;
+            padding: 20px;
+        }
+
+        .tab:not(.active) {
+            display: none;
+        }
+    }
 }
diff --git a/public/assets/scss/template/_course.scss b/public/assets/scss/template/_course.scss
index 1a09cf5..a5a46f2 100644
--- a/public/assets/scss/template/_course.scss
+++ b/public/assets/scss/template/_course.scss
@@ -1252,7 +1252,7 @@
                     height: 100%;
                     width: 100%;
                     background: rgb(255,255,255);
-                    background: linear-gradient(top, rgba(51, 51, 51, 0.01) 25%, rgba(51, 51, 51, 0.7) 100%);
+                    background: linear-gradient(to bottom, rgba(51, 51, 51, 0.01) 25%, rgba(51, 51, 51, 0.7) 100%);
                     position: absolute;
                     top: 0;
                     bottom: 0;
diff --git a/src/components/abouts/about-1/about-area.jsx b/src/components/abouts/about-1/about-area.jsx
deleted file mode 100644
index 1981909..0000000
--- a/src/components/abouts/about-1/about-area.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const lists = [
-    'Flexible Classes',
-    'Offline Classe Mode',
-    'Educator Support'
-];
-
-const AboutArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="section-gap-large edu-about-area about-style-7">
-            <div className="container">
-                <div className="row g-5 align-items-center">
-                    <div className="col-lg-5">
-                        <div className="about-content">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title">About Us</span>
-                                <h2 className="title">We Providing The <span className="color-secondary">Best Quality</span> Online Courses.</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                                <p>Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod ex tempor incididunt labore dolore magna aliquaenim ad minim.</p>
-                            </div>
-                            <ul className="features-list" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                {lists.map((l,i) => <li key={i}>{l}</li>)}
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-7">
-                        <div className="about-image-gallery">
-                            <img className="main-img-1" src="/assets/images/about/about-11.webp" alt="About Image" />
-                            <img className="main-img-2" src="/assets/images/about/about-12.webp" data-sal-delay="150" data-sal="slide-down" data-sal-duration="800" alt="About Image" />
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-38.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-37.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-04.png" alt="Shape" />
-                                </motion.li>
-                                <li className="shape-4 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                                    <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <li className="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200"></li>
-            </ul>
-        </div>
-    )
-}
-
-export default AboutArea;
\ No newline at end of file
diff --git a/src/components/abouts/about-1/about-area.tsx b/src/components/abouts/about-1/about-area.tsx
new file mode 100644
index 0000000..b5332ad
--- /dev/null
+++ b/src/components/abouts/about-1/about-area.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const lists = ['Flexible Classes', 'Offline Classe Mode', 'Educator Support'];
+
+const AboutArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='section-gap-large edu-about-area about-style-7'>
+            <div className='container'>
+                <div className='row g-5 align-items-center'>
+                    <div className='col-lg-5'>
+                        <div className='about-content'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title'>About Us</span>
+                                <h2 className='title'>
+                                    We Providing The{' '}
+                                    <span className='color-secondary'>Best Quality</span>{' '}
+                                    Online Courses.
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>
+                                    Lorem ipsum dolor sit amet consectur adipiscing elit
+                                    sed eiusmod ex tempor incididunt labore dolore magna
+                                    aliquaenim ad minim.
+                                </p>
+                            </div>
+                            <ul
+                                className='features-list'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                {lists.map((l, i) => (
+                                    <li key={i}>{l}</li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+                    <div className='col-lg-7'>
+                        <div className='about-image-gallery'>
+                            <picture>
+                                <img
+                                    className='main-img-1'
+                                    src='/assets/images/about/about-11.webp'
+                                    alt='About Image'
+                                />
+                            </picture>
+                            <picture>
+                                <img
+                                    className='main-img-2'
+                                    src='/assets/images/about/about-12.webp'
+                                    data-sal-delay='150'
+                                    data-sal='slide-down'
+                                    data-sal-duration='800'
+                                    alt='About Image'
+                                />
+                            </picture>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-38.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-37.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-04.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <li
+                                    className='shape-4 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/counterup/shape-02.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <li
+                    className='shape-1'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                ></li>
+            </ul>
+        </div>
+    );
+};
+
+export default AboutArea;
diff --git a/src/components/abouts/about-1/brand-area.jsx b/src/components/abouts/about-1/brand-area.jsx
deleted file mode 100644
index 9cd317a..0000000
--- a/src/components/abouts/about-1/brand-area.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-const brands = [
-    '/assets/images/brand/brand-01.png',
-    '/assets/images/brand/brand-02.png',
-    '/assets/images/brand/brand-03.png',
-    '/assets/images/brand/brand-04.png',
-    '/assets/images/brand/brand-05.png',
-    '/assets/images/brand/brand-06.png'
-]
-
-const BrandArea = ({about_p_2}) => {
-    return (
-        <div className={`edu-brand-area ${about_p_2?'brand-area-5':'brand-area-4 gap-lg-bottom-equal'}`}>
-            <div className="container">
-                <div className="brand-grid-wrap brand-style-2">
-                    {brands.map((img, i) => (
-                        <div key={i} className="brand-grid">
-                            <img src={img} alt="Brand Logo"/>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default BrandArea;
\ No newline at end of file
diff --git a/src/components/abouts/about-1/brand-area.tsx b/src/components/abouts/about-1/brand-area.tsx
new file mode 100644
index 0000000..029806f
--- /dev/null
+++ b/src/components/abouts/about-1/brand-area.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+const brands = [
+    '/assets/images/brand/brand-01.png',
+    '/assets/images/brand/brand-02.png',
+    '/assets/images/brand/brand-03.png',
+    '/assets/images/brand/brand-04.png',
+    '/assets/images/brand/brand-05.png',
+    '/assets/images/brand/brand-06.png',
+];
+
+type BrandAreaProps = {
+    about_p_2?: boolean;
+};
+
+const BrandArea = ({ about_p_2 }: BrandAreaProps) => {
+    return (
+        <div
+            className={`edu-brand-area ${
+                about_p_2 ? 'brand-area-5' : 'brand-area-4 gap-lg-bottom-equal'
+            }`}
+        >
+            <div className='container'>
+                <div className='brand-grid-wrap brand-style-2'>
+                    {brands.map((img, i) => (
+                        <div key={i} className='brand-grid'>
+                            <picture>
+                                <img src={img} alt='Brand Logo' />
+                            </picture>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BrandArea;
diff --git a/src/components/abouts/about-1/chose-box-item.jsx b/src/components/abouts/about-1/chose-box-item.jsx
deleted file mode 100644
index 5fbdf1d..0000000
--- a/src/components/abouts/about-1/chose-box-item.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export default function ChoseBox ({color,icon,title,subtitle}) {
-    return (
-        <div className="col-lg-4" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-            <div className={`why-choose-box features-box ${color}`}>
-                <div className="icon">
-                    <i className={`icon-${icon}`}></i>
-                </div>
-                <div className="content">
-                    <h4 className="title">{title}</h4>
-                    <p>{subtitle}</p>
-                </div>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/abouts/about-1/chose-box-item.tsx b/src/components/abouts/about-1/chose-box-item.tsx
new file mode 100644
index 0000000..bd524a3
--- /dev/null
+++ b/src/components/abouts/about-1/chose-box-item.tsx
@@ -0,0 +1,20 @@
+export default function ChoseBox({ color, icon, title, subtitle }) {
+    return (
+        <div
+            className='col-lg-4'
+            data-sal-delay='150'
+            data-sal='slide-up'
+            data-sal-duration='800'
+        >
+            <div className={`why-choose-box features-box ${color}`}>
+                <div className='icon'>
+                    <i className={`icon-${icon}`}></i>
+                </div>
+                <div className='content'>
+                    <h4 className='title'>{title}</h4>
+                    <p>{subtitle}</p>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/abouts/about-1/counter-area.jsx b/src/components/abouts/about-1/counter-area.jsx
deleted file mode 100644
index 528b068..0000000
--- a/src/components/abouts/about-1/counter-area.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import Counter from '../../common/counter';
-
-const counter_data = [
-    {
-        color: 'primary-color',
-        count: 29.3,
-        icon: '48',
-        text: 'K',
-        title: 'Student Enrolled',
-        decimal: 1
-    },
-    {
-        color: 'secondary-color',
-        count: 32.4,
-        icon: '47',
-        text: 'K',
-        title: 'Class Completed',
-        decimal: 1
-    },
-    {
-        color: 'extra08-color',
-        count: 100,
-        icon: '49',
-        text: '%',
-        title: 'Satisfaction Rate'
-    },
-    {
-        color: 'extra05-color',
-        count: 354,
-        icon: '50',
-        text: '%',
-        title: 'Top Instructors'
-    }
-]
-
-const CounterArea = ({about_p_3}) => {
-    return (
-        <div className={`${about_p_3?'counterup-area-9':'counterup-area-8 gap-lg-bottom-equal'}`}>
-            <div className={`container ${about_p_3?'edublink-animated-shape':''}`}>
-                <div className="row g-5">
-                    {counter_data.map((c, i) => {
-                        const { color, count, text, title,icon } = c;
-                        return (
-                            <div key={i} className="col-lg-3 col-sm-6" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <div className="edu-counterup counterup-style-4">
-                                    <div className={`icon ${color}`}>
-                                        <i className={`icon-${icon}`}></i>
-                                    </div>
-                                    <h2 className="counter-item count-number">
-                                        <span className="odometer">
-                                            <Counter number={parseFloat(count)} text={text} decimal={c.decimal} />
-                                        </span>
-                                    </h2>
-                                    <h6 className="title">{title}</h6>
-                                </div>
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-            <ul className="shape-group">
-                <li className={`shape-1 ${about_p_3 ? 'scene' : '' }`} data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                    <img src={`/assets/images/others/${about_p_3 ? 'shape-27.png' : 'map-shape-3.png' }`} alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    )
-}
-
-export default CounterArea;
\ No newline at end of file
diff --git a/src/components/abouts/about-1/counter-area.tsx b/src/components/abouts/about-1/counter-area.tsx
new file mode 100644
index 0000000..e3c1eae
--- /dev/null
+++ b/src/components/abouts/about-1/counter-area.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import Counter from '../../common/counter';
+
+const counter_data: {
+    color: string;
+    count: number;
+    icon: string;
+    text: string;
+    title: string;
+    decimal?: number;
+}[] = [
+    {
+        color: 'primary-color',
+        count: 29.3,
+        icon: '48',
+        text: 'K',
+        title: 'Student Enrolled',
+        decimal: 1,
+    },
+    {
+        color: 'secondary-color',
+        count: 32.4,
+        icon: '47',
+        text: 'K',
+        title: 'Class Completed',
+        decimal: 1,
+    },
+    {
+        color: 'extra08-color',
+        count: 100,
+        icon: '49',
+        text: '%',
+        title: 'Satisfaction Rate',
+    },
+    {
+        color: 'extra05-color',
+        count: 354,
+        icon: '50',
+        text: '%',
+        title: 'Top Instructors',
+    },
+];
+
+type CounterAreaProps = {
+    about_p_3?: boolean;
+};
+
+const CounterArea = ({ about_p_3 }: CounterAreaProps) => {
+    return (
+        <div
+            className={`${
+                about_p_3 ? 'counterup-area-9' : 'counterup-area-8 gap-lg-bottom-equal'
+            }`}
+        >
+            <div className={`container ${about_p_3 ? 'edublink-animated-shape' : ''}`}>
+                <div className='row g-5'>
+                    {counter_data.map((c, i) => {
+                        const { color, count, text, title, icon } = c;
+                        return (
+                            <div
+                                key={i}
+                                className='col-lg-3 col-sm-6'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='edu-counterup counterup-style-4'>
+                                    <div className={`icon ${color}`}>
+                                        <i className={`icon-${icon}`}></i>
+                                    </div>
+                                    <h2 className='counter-item count-number'>
+                                        <span className='odometer'>
+                                            <Counter
+                                                number={count}
+                                                text={text}
+                                                decimal={c.decimal}
+                                            />
+                                        </span>
+                                    </h2>
+                                    <h6 className='title'>{title}</h6>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <li
+                    className={`shape-1 ${about_p_3 ? 'scene' : ''}`}
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                >
+                    <picture>
+                        <img
+                            src={`/assets/images/others/${
+                                about_p_3 ? 'shape-27.png' : 'map-shape-3.png'
+                            }`}
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default CounterArea;
diff --git a/src/components/abouts/about-1/index.jsx b/src/components/abouts/about-1/index.tsx
similarity index 63%
rename from src/components/abouts/about-1/index.jsx
rename to src/components/abouts/about-1/index.tsx
index eb77f16..5d85685 100644
--- a/src/components/abouts/about-1/index.jsx
+++ b/src/components/abouts/about-1/index.tsx
@@ -8,23 +8,25 @@ import BrandArea from './brand-area';
 import CounterArea from './counter-area';
 import WhyChose from './why-chose';
 
-
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <Breadcrumb title={'A Large Range of Course Learning Paths'} current_page="About Us 1" />
-                <AboutArea/>
-                <BrandArea/>
-                <WhyChose/>
-                <Testimonial/>
-                <CounterArea/>
+                <Breadcrumb
+                    title={'A Large Range of Course Learning Paths'}
+                    current_page='About Us 1'
+                />
+                <AboutArea />
+                <BrandArea />
+                <WhyChose />
+                <Testimonial />
+                <CounterArea />
                 <TeamArea about_p={true} />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/abouts/about-1/why-chose.jsx b/src/components/abouts/about-1/why-chose.jsx
deleted file mode 100644
index 374ddce..0000000
--- a/src/components/abouts/about-1/why-chose.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import ChoseBox from './chose-box-item';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const WhyChose = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <section className="why-choose-area-2 section-gap-large">
-            <div className="container edublink-animated-shape">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Why choose edublink</span>
-                    <h2 className="title">The Best <span className="color-secondary">Beneficial</span> Side <br /> of EduBlink</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    <ChoseBox color="color-primary-style" icon="45" title="High Quality Courses" subtitle="Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna." />
-
-                    <ChoseBox color="color-secondary-style" icon="46" title="Life Time Access" subtitle="Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna." />
-
-                    <ChoseBox color="color-extra08-style" icon="47" title="Expert Instructors" subtitle="Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna." />
-                </div>
-                <ul className="shape-group">
-                    <li className="shape-5" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                        <span></span>
-                    </li>
-                </ul>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <span></span>
-                </motion.li>
-                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-13.png" alt="shape" />
-                </motion.li>
-                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <span></span>
-                </motion.li>
-                <motion.li className="shape-4 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-40.png" alt="shape" />
-                </motion.li>
-            </ul>
-        </section>
-    )
-}
-
-export default WhyChose;
\ No newline at end of file
diff --git a/src/components/abouts/about-1/why-chose.tsx b/src/components/abouts/about-1/why-chose.tsx
new file mode 100644
index 0000000..9afb316
--- /dev/null
+++ b/src/components/abouts/about-1/why-chose.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import ChoseBox from './chose-box-item';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const WhyChose = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <section className='why-choose-area-2 section-gap-large'>
+            <div className='container edublink-animated-shape'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Why choose edublink</span>
+                    <h2 className='title'>
+                        The Best <span className='color-secondary'>Beneficial</span> Side{' '}
+                        <br /> of EduBlink
+                    </h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    <ChoseBox
+                        color='color-primary-style'
+                        icon='45'
+                        title='High Quality Courses'
+                        subtitle='Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna.'
+                    />
+
+                    <ChoseBox
+                        color='color-secondary-style'
+                        icon='46'
+                        title='Life Time Access'
+                        subtitle='Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna.'
+                    />
+
+                    <ChoseBox
+                        color='color-extra08-style'
+                        icon='47'
+                        title='Expert Instructors'
+                        subtitle='Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna.'
+                    />
+                </div>
+                <ul className='shape-group'>
+                    <li
+                        className='shape-5'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                    >
+                        <span></span>
+                    </li>
+                </ul>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <span></span>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-13.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <span></span>
+                </motion.li>
+                <motion.li
+                    className='shape-4 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-40.png' alt='shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </section>
+    );
+};
+
+export default WhyChose;
diff --git a/src/components/abouts/about-2/counter-area.jsx b/src/components/abouts/about-2/counter-area.jsx
deleted file mode 100644
index cb28901..0000000
--- a/src/components/abouts/about-2/counter-area.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import CounterBox from '../../homes/home/counter-box';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const CounterArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="counterup-area-7 section-gap-equal">
-            <div className="container">
-                <div className="row g-5">
-                    <div className="col-lg-5">
-                        <div className="counterup-content">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title">Fun Facts</span>
-                                <h2 className="title">The Large <span className="color-secondary">Number</span> of Counting</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                                <p>Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor incididunt labore dolore magna aliquaenim ad minim.</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-7">
-                        <div className="counterup-box-wrap">
-                            <CounterBox />
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                                <li className="shape-2">
-                                    <img className="rotateit" src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                                </li>
-                                <motion.li className="shape-3 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/counterup/shape-04.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-4 scene"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/counterup/shape-05.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CounterArea;
\ No newline at end of file
diff --git a/src/components/abouts/about-2/counter-area.tsx b/src/components/abouts/about-2/counter-area.tsx
new file mode 100644
index 0000000..1303724
--- /dev/null
+++ b/src/components/abouts/about-2/counter-area.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import CounterBox from '../../homes/home/counter-box';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const CounterArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='counterup-area-7 section-gap-equal'>
+            <div className='container'>
+                <div className='row g-5'>
+                    <div className='col-lg-5'>
+                        <div className='counterup-content'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title'>Fun Facts</span>
+                                <h2 className='title'>
+                                    The Large{' '}
+                                    <span className='color-secondary'>Number</span> of
+                                    Counting
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>
+                                    Lorem ipsum dolor sit amet consectur adipiscing elit
+                                    sed eiusmod tempor incididunt labore dolore magna
+                                    aliquaenim ad minim.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-7'>
+                        <div className='counterup-box-wrap'>
+                            <CounterBox />
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <li className='shape-2'>
+                                    <picture>
+                                        <img
+                                            className='rotateit'
+                                            src='/assets/images/counterup/shape-02.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/counterup/shape-04.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-4 scene'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/counterup/shape-05.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CounterArea;
diff --git a/src/components/abouts/about-2/index.jsx b/src/components/abouts/about-2/index.tsx
similarity index 58%
rename from src/components/abouts/about-2/index.jsx
rename to src/components/abouts/about-2/index.tsx
index 43706d1..b13e9d6 100644
--- a/src/components/abouts/about-2/index.jsx
+++ b/src/components/abouts/about-2/index.tsx
@@ -9,24 +9,26 @@ import BrandArea from '../about-1/brand-area';
 import CounterArea from './counter-area';
 import WhyChose from './why-chose';
 
-
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <Breadcrumb title={'A Large Range of Course Learning Paths'} current_page="About Us 2" />
-                <WhyChose/>
-                <VideoArea about_p_2={true}/>
-                <BrandArea about_p_2={true}/>
-                <Testimonial about_p_2={true}/>
-                <CounterArea/>
-                <TeamArea about_p_2={true} />
-                <AdBanner/>
+                <Breadcrumb
+                    title={'A Large Range of Course Learning Paths'}
+                    current_page='About Us 2'
+                />
+                <WhyChose />
+                <VideoArea about_p_2={true} />
+                <BrandArea about_p_2={true} />
+                <Testimonial about_p_2={true} />
+                <CounterArea />
+                <TeamArea />
+                <AdBanner />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/abouts/about-2/team-area.jsx b/src/components/abouts/about-2/team-area.jsx
deleted file mode 100644
index 74e8e69..0000000
--- a/src/components/abouts/about-2/team-area.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { instructors_data } from '../../../data';
-import TeamFive from "../../team-member/team-five";
-
-const TeamArea = () => {
-    return (
-        <div className="edu-team-area team-area-6 edu-section-gap">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Instructors</span>
-                    <h2 className="title">Course Instructors</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    {instructors_data.slice(0,3).map((instructor) => (
-                        <div key={instructor.id} className="col-lg-4 col-md-6" data-sal-delay={instructor.delay} data-sal="slide-up" data-sal-duration="800">
-                            <TeamFive instructor={instructor} />
-                        </div>
-                    ))}
-                </div>
-            </div>
-
-            <ul className="shape-group">
-                <li className="shape-1">
-                    <img src="/assets/images/others/map-shape-3.png" alt="Shape" />
-                </li>
-                <li className="shape-2">
-                    <img src="/assets/images/others/map-shape-3.png" alt="Shape" />
-                </li>
-                <li className="shape-3">
-                    <img src="/assets/images/others/map-shape-3.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    )
-}
-
-export default TeamArea;
\ No newline at end of file
diff --git a/src/components/abouts/about-2/team-area.tsx b/src/components/abouts/about-2/team-area.tsx
new file mode 100644
index 0000000..c5024ae
--- /dev/null
+++ b/src/components/abouts/about-2/team-area.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { instructors_data } from '../../../data';
+import TeamFive from '../../team-member/team-five';
+
+const TeamArea = () => {
+    return (
+        <div className='edu-team-area team-area-6 edu-section-gap'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Instructors</span>
+                    <h2 className='title'>Course Instructors</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {instructors_data.slice(0, 3).map(instructor => (
+                        <div
+                            key={instructor.id}
+                            className='col-lg-4 col-md-6'
+                            data-sal-delay={instructor.delay}
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <TeamFive instructor={instructor} />
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            <ul className='shape-group'>
+                <li className='shape-1'>
+                    <picture>
+                        <img src='/assets/images/others/map-shape-3.png' alt='Shape' />
+                    </picture>
+                </li>
+                <li className='shape-2'>
+                    <picture>
+                        <img src='/assets/images/others/map-shape-3.png' alt='Shape' />
+                    </picture>
+                </li>
+                <li className='shape-3'>
+                    <picture>
+                        <img src='/assets/images/others/map-shape-3.png' alt='Shape' />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default TeamArea;
diff --git a/src/components/abouts/about-2/why-chose.jsx b/src/components/abouts/about-2/why-chose.jsx
deleted file mode 100644
index fb70744..0000000
--- a/src/components/abouts/about-2/why-chose.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import ChoseBox from '../about-1/chose-box-item';
-import { motion, useScroll, useTransform } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const WhyChose = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    const { scrollYProgress } = useScroll();
-    const y = useTransform(scrollYProgress, [0, 1], [0, 1000]);
-    return (
-        <section className="why-choose-area-3 edu-section-gap">
-            <div className="container">
-                <div className="row row--45">
-                    <div className="section-title-flex section-title" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                        <div className="left-content">
-                            <h2 className="title">We Providing The <br /> Best <span className="color-secondary">Quality Online </span> Courses</h2>
-                            <span className="shape-line"><i className="icon-19"></i></span>
-                        </div>
-                        <div className="right-content">
-                            <p>Lorem ipsum dolor sit amet cons etur adipisicing elit sed do eiusm aut tempor incididunt labore dolore magna aliqua quis nostrud ex ertation lamcolab oris aliquip.</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="row g-5">
-                    <ChoseBox color="color-primary-style" icon="45" title="High Quality Courses" subtitle="Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna." />
-
-                    <ChoseBox color="color-secondary-style" icon="46" title="Life Time Access" subtitle="Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna." />
-
-                    <ChoseBox color="color-extra08-style" icon="47" title="Expert Instructors" subtitle="Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna." />
-                </div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene"
-                    animate={ {
-                        x: mouseReverse(40).x,
-                        y: mouseReverse(40).y
-                    } }
-                >
-                    <span></span>
-                </motion.li>
-                <motion.li className="shape-2 scene"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-13.png" alt="shape" />
-                </motion.li>
-                <li className="shape-3">
-                    <motion.img style={{ y }} src="/assets/images/faq/shape-12.png" alt="shape" />
-                </li>
-            </ul>
-        </section>
-    )
-}
-
-export default WhyChose;
\ No newline at end of file
diff --git a/src/components/abouts/about-2/why-chose.tsx b/src/components/abouts/about-2/why-chose.tsx
new file mode 100644
index 0000000..5f33be8
--- /dev/null
+++ b/src/components/abouts/about-2/why-chose.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import ChoseBox from '../about-1/chose-box-item';
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const WhyChose = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    const { scrollYProgress } = useScroll();
+    const y = useTransform(scrollYProgress, [0, 1], [0, 1000]);
+    return (
+        <section className='why-choose-area-3 edu-section-gap'>
+            <div className='container'>
+                <div className='row row--45'>
+                    <div
+                        className='section-title-flex section-title'
+                        data-sal-delay='150'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='left-content'>
+                            <h2 className='title'>
+                                We Providing The <br /> Best{' '}
+                                <span className='color-secondary'>Quality Online </span>{' '}
+                                Courses
+                            </h2>
+                            <span className='shape-line'>
+                                <i className='icon-19'></i>
+                            </span>
+                        </div>
+                        <div className='right-content'>
+                            <p>
+                                Lorem ipsum dolor sit amet cons etur adipisicing elit sed
+                                do eiusm aut tempor incididunt labore dolore magna aliqua
+                                quis nostrud ex ertation lamcolab oris aliquip.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='row g-5'>
+                    <ChoseBox
+                        color='color-primary-style'
+                        icon='45'
+                        title='High Quality Courses'
+                        subtitle='Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna.'
+                    />
+
+                    <ChoseBox
+                        color='color-secondary-style'
+                        icon='46'
+                        title='Life Time Access'
+                        subtitle='Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna.'
+                    />
+
+                    <ChoseBox
+                        color='color-extra08-style'
+                        icon='47'
+                        title='Expert Instructors'
+                        subtitle='Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna.'
+                    />
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    animate={{
+                        x: mouseReverse(40).x,
+                        y: mouseReverse(40).y,
+                    }}
+                >
+                    <span></span>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-13.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <li className='shape-3'>
+                    <motion.img
+                        style={{ y }}
+                        src='/assets/images/faq/shape-12.png'
+                        alt='shape'
+                    />
+                </li>
+            </ul>
+        </section>
+    );
+};
+
+export default WhyChose;
diff --git a/src/components/abouts/about-3/about-us-area.jsx b/src/components/abouts/about-3/about-us-area.jsx
deleted file mode 100644
index 4b4574c..0000000
--- a/src/components/abouts/about-3/about-us-area.jsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-// MissionItem
-function MissionItem({ color, icon, title, text }) {
-    return (
-        <div className="single-item" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-            <div className={`icon color-extra${color}`}><i className={`icon-${icon}`}></i></div>
-            <div className="content">
-                <h4 className="title">{title}</h4>
-                <p>{text}</p>
-            </div>
-        </div>
-    )
-}
-
-const AboutUsArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-section-gap edu-about-area about-style-8">
-            <div className="container">
-                <div className="row g-5">
-                    <div className="col-lg-6">
-                        <div className="about-content">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title">About Us</span>
-                                <h2 className="title">We Provide Best <span className="color-secondary">Education</span> Services For You.</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                                <p>Magna aliquaenim ad minim veniam quis nostrud exercitation ullamco laborisLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius tempor incididunt labore.</p>
-                            </div>
-                            <div className="about-mission">
-                                <MissionItem color="02" icon="51" title="Our Mission" text="Magna aliquaenim minim quis nostrud exercitation ulamco labor is Lorem ipsum." />
-                                <MissionItem color="06" icon="52" title="Our Vision" text="Magna aliquaenim minim quis nostrud exercitation ulamco labor is Lorem ipsum." />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-6">
-                        <div className="about-image-gallery">
-                            <div className="row g-5" id="masonry-gallery">
-                                <div className="col-6 masonry-item">
-                                    <div className="thumbnail thumbnail-1 mb--30" data-sal-delay="50" data-sal="slide-down" data-sal-duration="1000">
-                                        <img src="/assets/images/about/about-13.webp" alt="About Images" />
-                                    </div>
-
-                                    <div className="thumbnail thumbnail-4" data-sal-delay="50" data-sal="slide-up" data-sal-duration="1000">
-                                        <img src="/assets/images/about/about-15.webp" alt="About Images" />
-                                    </div>
-                                </div>
-                                <div className="col-6 masonry-item">
-                                    <div className="thumbnail thumbnail-2 mb--30" data-sal-delay="50" data-sal="slide-down" data-sal-duration="1000">
-                                        <img src="/assets/images/about/about-14.webp" alt="About Images" />
-                                    </div>
-                                    <div className="thumbnail thumbnail-3" data-sal-delay="50" data-sal="slide-up" data-sal-duration="1000">
-                                        <img src="/assets/images/about/about-16.webp" alt="About Images" />
-                                    </div>
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-33.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-25.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-4 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(40).x,
-                                        y: mouseReverse(40).y
-                                    } }
-                                >
-                                    <span></span>
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default AboutUsArea;
\ No newline at end of file
diff --git a/src/components/abouts/about-3/about-us-area.tsx b/src/components/abouts/about-3/about-us-area.tsx
new file mode 100644
index 0000000..4983fe9
--- /dev/null
+++ b/src/components/abouts/about-3/about-us-area.tsx
@@ -0,0 +1,206 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+// MissionItem
+function MissionItem({ color, icon, title, text }) {
+    return (
+        <div
+            className='single-item'
+            data-sal-delay='150'
+            data-sal='slide-up'
+            data-sal-duration='800'
+        >
+            <div className={`icon color-extra${color}`}>
+                <i className={`icon-${icon}`}></i>
+            </div>
+            <div className='content'>
+                <h4 className='title'>{title}</h4>
+                <p>{text}</p>
+            </div>
+        </div>
+    );
+}
+
+const AboutUsArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-section-gap edu-about-area about-style-8'>
+            <div className='container'>
+                <div className='row g-5'>
+                    <div className='col-lg-6'>
+                        <div className='about-content'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title'>About Us</span>
+                                <h2 className='title'>
+                                    We Provide Best{' '}
+                                    <span className='color-secondary'>Education</span>{' '}
+                                    Services For You.
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>
+                                    Magna aliquaenim ad minim veniam quis nostrud
+                                    exercitation ullamco laborisLorem ipsum dolor sit
+                                    amet, consectetur adipisicing elit, sed do eius tempor
+                                    incididunt labore.
+                                </p>
+                            </div>
+                            <div className='about-mission'>
+                                <MissionItem
+                                    color='02'
+                                    icon='51'
+                                    title='Our Mission'
+                                    text='Magna aliquaenim minim quis nostrud exercitation ulamco labor is Lorem ipsum.'
+                                />
+                                <MissionItem
+                                    color='06'
+                                    icon='52'
+                                    title='Our Vision'
+                                    text='Magna aliquaenim minim quis nostrud exercitation ulamco labor is Lorem ipsum.'
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='col-lg-6'>
+                        <div className='about-image-gallery'>
+                            <div className='row g-5' id='masonry-gallery'>
+                                <div className='col-6 masonry-item'>
+                                    <div
+                                        className='thumbnail thumbnail-1 mb--30'
+                                        data-sal-delay='50'
+                                        data-sal='slide-down'
+                                        data-sal-duration='1000'
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/about/about-13.webp'
+                                                alt='About Images'
+                                            />
+                                        </picture>
+                                    </div>
+
+                                    <div
+                                        className='thumbnail thumbnail-4'
+                                        data-sal-delay='50'
+                                        data-sal='slide-up'
+                                        data-sal-duration='1000'
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/about/about-15.webp'
+                                                alt='About Images'
+                                            />
+                                        </picture>
+                                    </div>
+                                </div>
+                                <div className='col-6 masonry-item'>
+                                    <div
+                                        className='thumbnail thumbnail-2 mb--30'
+                                        data-sal-delay='50'
+                                        data-sal='slide-down'
+                                        data-sal-duration='1000'
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/about/about-14.webp'
+                                                alt='About Images'
+                                            />
+                                        </picture>
+                                    </div>
+                                    <div
+                                        className='thumbnail thumbnail-3'
+                                        data-sal-delay='50'
+                                        data-sal='slide-up'
+                                        data-sal-duration='1000'
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/about/about-16.webp'
+                                                alt='About Images'
+                                            />
+                                        </picture>
+                                    </div>
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-33.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-25.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-4 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(40).x,
+                                        y: mouseReverse(40).y,
+                                    }}
+                                >
+                                    <span></span>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AboutUsArea;
diff --git a/src/components/abouts/about-3/counter-area.jsx b/src/components/abouts/about-3/counter-area.jsx
deleted file mode 100644
index d766c44..0000000
--- a/src/components/abouts/about-3/counter-area.jsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import Counter from '../../common/counter';
-
-const counter_data = [
-    {
-        color: 'primary-color',
-        count: 29.3,
-        icon: '48',
-        text: 'K',
-        title: 'Student Enrolled',
-        decimal: 1
-    },
-    {
-        color: 'secondary-color',
-        count: 32.4,
-        icon: '47',
-        text: 'K',
-        title: 'Class Completed',
-        decimal: 1
-    },
-    {
-        color: 'extra08-color',
-        count: 100,
-        icon: '49',
-        text: '%',
-        title: 'Satisfaction Rate'
-    },
-    {
-        color: 'extra05-color',
-        count: 354,
-        icon: '50',
-        text: '%',
-        title: 'Top Instructors'
-    }
-]
-
-const CounterArea = ({about_p_3}) => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="counterup-area-9">
-            <div className="container edublink-animated-shape">
-                <div className="row g-5">
-                    {counter_data.map((c, i) => {
-                        const { color, count, text, title,icon } = c;
-                        return (
-                            <div key={i} className="col-lg-3 col-sm-6" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <div className="edu-counterup counterup-style-4">
-                                    <div className={`icon ${color}`}>
-                                        <i className={`icon-${icon}`}></i>
-                                    </div>
-                                    <h2 className="counter-item count-number">
-                                        <span className="odometer">
-                                            <Counter number={parseFloat(count)} text={text} decimal={c.decimal} />
-                                        </span>
-                                    </h2>
-                                    <h6 className="title">{title}</h6>
-                                </div>
-                            </div>
-                        )
-                    })}
-                </div>
-
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseDirection(40).x,
-                            y: mouseDirection(40).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-27.png" alt="Shape" />
-                    </motion.li>
-                </ul>
-            </div>
-        </div>
-    )
-}
-
-export default CounterArea;
\ No newline at end of file
diff --git a/src/components/abouts/about-3/counter-area.tsx b/src/components/abouts/about-3/counter-area.tsx
new file mode 100644
index 0000000..f897c0c
--- /dev/null
+++ b/src/components/abouts/about-3/counter-area.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import Counter from '../../common/counter';
+
+const counter_data: {
+    color: string;
+    count: number;
+    icon: string;
+    text: string;
+    title: string;
+    decimal?: number;
+}[] = [
+    {
+        color: 'primary-color',
+        count: 29.3,
+        icon: '48',
+        text: 'K',
+        title: 'Student Enrolled',
+        decimal: 1,
+    },
+    {
+        color: 'secondary-color',
+        count: 32.4,
+        icon: '47',
+        text: 'K',
+        title: 'Class Completed',
+        decimal: 1,
+    },
+    {
+        color: 'extra08-color',
+        count: 100,
+        icon: '49',
+        text: '%',
+        title: 'Satisfaction Rate',
+    },
+    {
+        color: 'extra05-color',
+        count: 354,
+        icon: '50',
+        text: '%',
+        title: 'Top Instructors',
+    },
+];
+
+const CounterArea = ({ about_p_3 }) => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='counterup-area-9'>
+            <div className='container edublink-animated-shape'>
+                <div className='row g-5'>
+                    {counter_data.map((c, i) => {
+                        const { color, count, text, title, icon } = c;
+                        return (
+                            <div
+                                key={i}
+                                className='col-lg-3 col-sm-6'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='edu-counterup counterup-style-4'>
+                                    <div className={`icon ${color}`}>
+                                        <i className={`icon-${icon}`}></i>
+                                    </div>
+                                    <h2 className='counter-item count-number'>
+                                        <span className='odometer'>
+                                            <Counter
+                                                number={count}
+                                                text={text}
+                                                decimal={c.decimal}
+                                            />
+                                        </span>
+                                    </h2>
+                                    <h6 className='title'>{title}</h6>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseDirection(40).x,
+                            y: mouseDirection(40).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-27.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default CounterArea;
diff --git a/src/components/abouts/about-3/index.jsx b/src/components/abouts/about-3/index.tsx
similarity index 69%
rename from src/components/abouts/about-3/index.jsx
rename to src/components/abouts/about-3/index.tsx
index 9413fa5..f155cb9 100644
--- a/src/components/abouts/about-3/index.jsx
+++ b/src/components/abouts/about-3/index.tsx
@@ -11,19 +11,19 @@ import WhyChose from './why-chose';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <HeaderTwo style_3={true} no_topBar={true} />
-                <BreadcrumbTwo subtitle="About Us 03" />
-                <AboutUsArea/>
+                <BreadcrumbTwo subtitle='About Us 03' />
+                <AboutUsArea />
                 <CounterArea about_p_3={true} />
-                <WhyChose/>
-                <CtaArea/>
-                <TeamArea about_p_3={true}/>
-                <TestimonialArea/>
+                <WhyChose />
+                <CtaArea />
+                <TeamArea />
+                <TestimonialArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/abouts/about-3/team-area.jsx b/src/components/abouts/about-3/team-area.jsx
deleted file mode 100644
index d71e3de..0000000
--- a/src/components/abouts/about-3/team-area.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { instructors_data } from '../../../data';
-import TeamThree from "../../team-member/team-three";
-
-const TeamArea = () => {
-    return (
-        <div className="edu-team-area team-area-3 edu-section-gap z-10">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Instructors</span>
-                    <h2 className="title">Course Instructors</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    {instructors_data.slice(0,3).map((instructor) => (
-                        <div key={instructor.id} className="col-lg-4 col-md-6" data-sal-delay={instructor.delay} data-sal="slide-up" data-sal-duration="800">
-                            <TeamThree instructor={instructor} />
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default TeamArea;
\ No newline at end of file
diff --git a/src/components/abouts/about-3/team-area.tsx b/src/components/abouts/about-3/team-area.tsx
new file mode 100644
index 0000000..f4ebacb
--- /dev/null
+++ b/src/components/abouts/about-3/team-area.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { instructors_data } from '../../../data';
+import TeamThree from '../../team-member/team-three';
+
+const TeamArea = () => {
+    return (
+        <div className='edu-team-area team-area-3 edu-section-gap z-10'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Instructors</span>
+                    <h2 className='title'>Course Instructors</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {instructors_data.slice(0, 3).map(instructor => (
+                        <div
+                            key={instructor.id}
+                            className='col-lg-4 col-md-6'
+                            data-sal-delay={instructor.delay}
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <TeamThree instructor={instructor} />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamArea;
diff --git a/src/components/abouts/about-3/testimonial-area.jsx b/src/components/abouts/about-3/testimonial-area.jsx
deleted file mode 100644
index 2a47f42..0000000
--- a/src/components/abouts/about-3/testimonial-area.jsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay, Pagination } from "swiper";
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import VideoModal from '../../common/popup-modal/video-modal';
-import useModal from '../../../hooks/use-modal';
-
-const contents = {
-    pre_title: 'Testimonials',
-    title: <>What Our Students <br /> Have To Say</>,
-    testimonials: [
-        {
-            ratings: [1, 2, 3, 4, 5],
-            desc: '“Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis sit nosrud citation laboris nisiste aliquip comodo perspiatix une omnis iste natus error sit voluptatem accusantium dolore que laudantum”.',
-            author: '/assets/images/testimonial/testimonial-01.png',
-            name: 'Haley Bennet',
-            title: 'Designer'
-        },
-        {
-            ratings: [1, 2, 3, 4, 5],
-            desc: '“Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis sit nosrud citation laboris nisiste aliquip comodo perspiatix une omnis iste natus error sit voluptatem accusantium dolore que laudantum”.',
-            author: '/assets/images/testimonial/testimonial-02.png',
-            name: 'Richard Gere',
-            title: 'Developer'
-        },
-        {
-            ratings: [1, 2, 3, 4, 5],
-            desc: '“Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis sit nosrud citation laboris nisiste aliquip comodo perspiatix une omnis iste natus error sit voluptatem accusantium dolore que laudantum”.',
-            author: '/assets/images/testimonial/testimonial-03.png',
-            name: 'Megan Foxx',
-            title: 'Designer'
-        }
-    ],
-    video_title: 'Take a Video Tour to Learn Intro of Campus',
-    video_id: 'PICj5tr9hcc'
-}
-
-const { pre_title, testimonials, title,video_id,video_title } = contents;
-
-const TestimonialArea = () => {
-    const [loop, setLoop] = useState(false);
-    useEffect(() => setLoop(true), []);
-    const { isVideoOpen, setIsVideoOpen } = useModal();
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <>
-            <section className="testimonial-area-6 gap-bottom-equal">
-                <div className="container edublink-animated-shape">
-                    <div className="row row--40">
-                        <div className="col-lg-6">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title">{pre_title}</span>
-                                <h2 className="title">{title}</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                            </div>
-
-                            <Swiper
-                                className="testimonial-activation-5 swiper "
-                                slidesPerView={1}
-                                spaceBetween={0}
-                                modules={[Pagination, Autoplay]}
-                                loop={loop}
-                                grabCursor={true}
-                                speed={1000}
-                                autoplay={{
-                                    delay: 3000
-                                }}
-                                pagination={{
-                                    el: '.swiper-pagination',
-                                    type: 'bullets',
-                                    clickable: true
-                                }}
-                            >
-                                {testimonials.map((item, i) => {
-                                    const { author, desc, name, ratings, title } = item;
-                                    return (
-                                        <SwiperSlide key={i}>
-                                            <div className="testimonial-slide testimonial-style-3">
-                                                <div className="content">
-                                                    <div className="rating-icon">
-                                                        {ratings.map(r => <i key={r} className="icon-23"></i>)}
-                                                    </div>
-                                                    <p>{desc}</p>
-                                                    <div className="author-info">
-                                                        <div className="thumb">
-                                                            <img src={author} alt="Testimonial" />
-                                                        </div>
-                                                        <div className="info">
-                                                            <h5 className="title">{name}</h5>
-                                                            <span className="subtitle">{title}</span>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </SwiperSlide>
-                                    )
-                                })}
-                                <div className="swiper-pagination"></div>
-                            </Swiper>
-                        </div>
-
-                        <div className="col-lg-6">
-                            <div className="video-gallery video-gallery-5" data-sal-delay="150" data-sal="slide-left" data-sal-duration="800">
-                                <div className="thumbnail">
-                                    <img src="/assets/images/others/video-03.webp" alt="Thumb" />
-                                    <button onClick={() => setIsVideoOpen(true)} className="video-play-btn video-popup-activation">
-                                        <i className="icon-18"></i>
-                                    </button>
-                                </div>
-                                <div className="content">
-                                    <h4 className="title">{video_title}</h4>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <ul className="shape-group">
-                        <motion.li className="shape-2 scene" data-sal-delay="200" data-sal="fade" data-sal-duration="1000"
-                            animate={ {
-                                x: mouseReverse(30).x,
-                                y: mouseReverse(30).y
-                            } }
-                        >
-                            <img src="/assets/images/about/shape-25.png" alt="Shape" />
-                        </motion.li>
-                        <motion.li className="shape-3 scene" data-sal-delay="200" data-sal="fade" data-sal-duration="1000"
-                            animate={ {
-                                x: mouseDirection(40).x,
-                                y: mouseDirection(40).y
-                            } }
-                        >
-                            <span></span>
-                        </motion.li>
-                    </ul>
-                </div>
-                <ul className="shape-group">
-                    <li className="shape-1" data-sal-delay="200" data-sal="fade" data-sal-duration="1000">
-                        <img className="rotateit" src="/assets/images/about/shape-13.png" alt="Shape" />
-                    </li>
-                </ul>
-            </section>
-
-            {/* video modal start */}
-            <VideoModal isVideoOpen={isVideoOpen} setIsVideoOpen={setIsVideoOpen} videoId={video_id} />
-            {/* video modal end */}
-        </>
-    )
-}
-
-export default TestimonialArea;
\ No newline at end of file
diff --git a/src/components/abouts/about-3/testimonial-area.tsx b/src/components/abouts/about-3/testimonial-area.tsx
new file mode 100644
index 0000000..f52b239
--- /dev/null
+++ b/src/components/abouts/about-3/testimonial-area.tsx
@@ -0,0 +1,216 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import VideoModal from '../../common/popup-modal/video-modal';
+import useModal from '../../../hooks/use-modal';
+
+const contents = {
+    pre_title: 'Testimonials',
+    title: (
+        <>
+            What Our Students <br /> Have To Say
+        </>
+    ),
+    testimonials: [
+        {
+            ratings: [1, 2, 3, 4, 5],
+            desc: '“Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis sit nosrud citation laboris nisiste aliquip comodo perspiatix une omnis iste natus error sit voluptatem accusantium dolore que laudantum”.',
+            author: '/assets/images/testimonial/testimonial-01.png',
+            name: 'Haley Bennet',
+            title: 'Designer',
+        },
+        {
+            ratings: [1, 2, 3, 4, 5],
+            desc: '“Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis sit nosrud citation laboris nisiste aliquip comodo perspiatix une omnis iste natus error sit voluptatem accusantium dolore que laudantum”.',
+            author: '/assets/images/testimonial/testimonial-02.png',
+            name: 'Richard Gere',
+            title: 'Developer',
+        },
+        {
+            ratings: [1, 2, 3, 4, 5],
+            desc: '“Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis sit nosrud citation laboris nisiste aliquip comodo perspiatix une omnis iste natus error sit voluptatem accusantium dolore que laudantum”.',
+            author: '/assets/images/testimonial/testimonial-03.png',
+            name: 'Megan Foxx',
+            title: 'Designer',
+        },
+    ],
+    video_title: 'Take a Video Tour to Learn Intro of Campus',
+    video_id: 'PICj5tr9hcc',
+};
+
+const { pre_title, testimonials, title, video_id, video_title } = contents;
+
+const TestimonialArea = () => {
+    const [loop, setLoop] = useState(false);
+    useEffect(() => setLoop(true), []);
+    const { isVideoOpen, setIsVideoOpen } = useModal();
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <>
+            <section className='testimonial-area-6 gap-bottom-equal'>
+                <div className='container edublink-animated-shape'>
+                    <div className='row row--40'>
+                        <div className='col-lg-6'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title'>{pre_title}</span>
+                                <h2 className='title'>{title}</h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                            </div>
+
+                            <Swiper
+                                className='testimonial-activation-5 swiper '
+                                slidesPerView={1}
+                                spaceBetween={0}
+                                modules={[Pagination, Autoplay]}
+                                loop={loop}
+                                grabCursor={true}
+                                speed={1000}
+                                autoplay={{
+                                    delay: 3000,
+                                }}
+                                pagination={{
+                                    el: '.swiper-pagination',
+                                    type: 'bullets',
+                                    clickable: true,
+                                }}
+                            >
+                                {testimonials.map((item, i) => {
+                                    const { author, desc, name, ratings, title } = item;
+                                    return (
+                                        <SwiperSlide key={i}>
+                                            <div className='testimonial-slide testimonial-style-3'>
+                                                <div className='content'>
+                                                    <div className='rating-icon'>
+                                                        {ratings.map(r => (
+                                                            <i
+                                                                key={r}
+                                                                className='icon-23'
+                                                            ></i>
+                                                        ))}
+                                                    </div>
+                                                    <p>{desc}</p>
+                                                    <div className='author-info'>
+                                                        <div className='thumb'>
+                                                            <picture>
+                                                                <img
+                                                                    src={author}
+                                                                    alt='Testimonial'
+                                                                />
+                                                            </picture>
+                                                        </div>
+                                                        <div className='info'>
+                                                            <h5 className='title'>
+                                                                {name}
+                                                            </h5>
+                                                            <span className='subtitle'>
+                                                                {title}
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </SwiperSlide>
+                                    );
+                                })}
+                                <div className='swiper-pagination'></div>
+                            </Swiper>
+                        </div>
+
+                        <div className='col-lg-6'>
+                            <div
+                                className='video-gallery video-gallery-5'
+                                data-sal-delay='150'
+                                data-sal='slide-left'
+                                data-sal-duration='800'
+                            >
+                                <div className='thumbnail'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/video-03.webp'
+                                            alt='Thumb'
+                                        />
+                                    </picture>
+                                    <button
+                                        onClick={() => setIsVideoOpen(true)}
+                                        className='video-play-btn video-popup-activation'
+                                    >
+                                        <i className='icon-18'></i>
+                                    </button>
+                                </div>
+                                <div className='content'>
+                                    <h4 className='title'>{video_title}</h4>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <ul className='shape-group'>
+                        <motion.li
+                            className='shape-2 scene'
+                            data-sal-delay='200'
+                            data-sal='fade'
+                            data-sal-duration='1000'
+                            animate={{
+                                x: mouseReverse(30).x,
+                                y: mouseReverse(30).y,
+                            }}
+                        >
+                            <picture>
+                                <img
+                                    src='/assets/images/about/shape-25.png'
+                                    alt='Shape'
+                                />
+                            </picture>
+                        </motion.li>
+                        <motion.li
+                            className='shape-3 scene'
+                            data-sal-delay='200'
+                            data-sal='fade'
+                            data-sal-duration='1000'
+                            animate={{
+                                x: mouseDirection(40).x,
+                                y: mouseDirection(40).y,
+                            }}
+                        >
+                            <span></span>
+                        </motion.li>
+                    </ul>
+                </div>
+                <ul className='shape-group'>
+                    <li
+                        className='shape-1'
+                        data-sal-delay='200'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                    >
+                        <picture>
+                            <img
+                                className='rotateit'
+                                src='/assets/images/about/shape-13.png'
+                                alt='Shape'
+                            />
+                        </picture>
+                    </li>
+                </ul>
+            </section>
+
+            {/* video modal start */}
+            <VideoModal
+                isVideoOpen={isVideoOpen}
+                setIsVideoOpen={setIsVideoOpen}
+                videoId={video_id}
+            />
+            {/* video modal end */}
+        </>
+    );
+};
+
+export default TestimonialArea;
diff --git a/src/components/abouts/about-3/why-chose.jsx b/src/components/abouts/about-3/why-chose.jsx
deleted file mode 100644
index 7f54f7d..0000000
--- a/src/components/abouts/about-3/why-chose.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-function FeatureBox({ img, color, title, icon, text }) {
-    return (
-        <div className="col-lg-4" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-            <div className={`why-choose-box-3 features-box ${color}`}>
-                <div className="thumbnail">
-                    <img src={`/assets/images/others/why-choose-${img}.jpg`} alt="why choose image" />
-                </div>
-                <div className="content">
-                    <div className="icon">
-                        <i className={`icon-${icon}`}></i>
-                    </div>
-                    <h4 className="title">{title}</h4>
-                    <p>{text}</p>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-const WhyChose = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <section className="why-choose-area-4 edu-section-gap">
-            <div className="container edublink-animated-shape">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Why choose edublink</span>
-                    <h2 className="title">The Best <span className="color-secondary">Beneficial</span> Side <br /> of EduBlink</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    <FeatureBox color="color-primary-style" img="03" icon="45" title="High Quality Courses"
-                    text="Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna." />
-
-                    <FeatureBox color="color-secondary-style" img="04" icon="46" title="Life Time Access"
-                    text="Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna." />
-
-                    <FeatureBox color="color-extra08-style" img="05" icon="47" title="Expert Instructors"
-                    text="Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna." />
-                </div>
-                <ul className="shape-group">
-                    <li className="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                        <img className="rotateit" src="/assets/images/about/shape-13.png" alt="shape" />
-                    </li>
-                    <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseReverse(40).x,
-                            y: mouseReverse(40).y
-                        } }
-                    >
-                        <span></span>
-                    </motion.li>
-                    <li className="shape-3 circle scene sal-animate" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                        <span className="d-block"></span>
-                    </li>
-                </ul>
-            </div>
-        </section>
-    )
-}
-
-export default WhyChose;
\ No newline at end of file
diff --git a/src/components/abouts/about-3/why-chose.tsx b/src/components/abouts/about-3/why-chose.tsx
new file mode 100644
index 0000000..c6e88fc
--- /dev/null
+++ b/src/components/abouts/about-3/why-chose.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+function FeatureBox({ img, color, title, icon, text }) {
+    return (
+        <div
+            className='col-lg-4'
+            data-sal-delay='150'
+            data-sal='slide-up'
+            data-sal-duration='800'
+        >
+            <div className={`why-choose-box-3 features-box ${color}`}>
+                <div className='thumbnail'>
+                    <picture>
+                        <img
+                            src={`/assets/images/others/why-choose-${img}.jpg`}
+                            alt='why choose image'
+                        />
+                    </picture>
+                </div>
+                <div className='content'>
+                    <div className='icon'>
+                        <i className={`icon-${icon}`}></i>
+                    </div>
+                    <h4 className='title'>{title}</h4>
+                    <p>{text}</p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+const WhyChose = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <section className='why-choose-area-4 edu-section-gap'>
+            <div className='container edublink-animated-shape'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Why choose edublink</span>
+                    <h2 className='title'>
+                        The Best <span className='color-secondary'>Beneficial</span> Side{' '}
+                        <br /> of EduBlink
+                    </h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    <FeatureBox
+                        color='color-primary-style'
+                        img='03'
+                        icon='45'
+                        title='High Quality Courses'
+                        text='Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna.'
+                    />
+
+                    <FeatureBox
+                        color='color-secondary-style'
+                        img='04'
+                        icon='46'
+                        title='Life Time Access'
+                        text='Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna.'
+                    />
+
+                    <FeatureBox
+                        color='color-extra08-style'
+                        img='05'
+                        icon='47'
+                        title='Expert Instructors'
+                        text='Lorem ipsum dolor sit amet conset ur elit sed eiusmod ex tempor inc labore dolore magna.'
+                    />
+                </div>
+                <ul className='shape-group'>
+                    <li
+                        className='shape-1'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                    >
+                        <picture>
+                            <img
+                                className='rotateit'
+                                src='/assets/images/about/shape-13.png'
+                                alt='shape'
+                            />
+                        </picture>
+                    </li>
+                    <motion.li
+                        className='shape-2 scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseReverse(40).x,
+                            y: mouseReverse(40).y,
+                        }}
+                    >
+                        <span></span>
+                    </motion.li>
+                    <li
+                        className='shape-3 circle scene sal-animate'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                    >
+                        <span className='d-block'></span>
+                    </li>
+                </ul>
+            </div>
+        </section>
+    );
+};
+
+export default WhyChose;
diff --git a/src/components/blog-details/blog-details-area.jsx b/src/components/blog-details/blog-details-area.jsx
deleted file mode 100644
index 2e59a7d..0000000
--- a/src/components/blog-details/blog-details-area.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import React from 'react';
-import BlogSidebar from '../blog/blog-sidebar';
-import BlogCommentForm from '../forms/blog-comment-form';
-import CommentArea from './comment-area';
-
-const BlogDetailsArea = ({blog}) => {
-    return (
-        <div className="blog-details-area section-gap-equal">
-            <div className="container">
-                <div className="row row--30">
-                    <div className="col-lg-8">
-                        <div className="blog-details-content">
-                            <div className="entry-content">
-                                <span className="category">Developer</span>
-                                <h3 className="title">{blog?.title}</h3>
-                                <ul className="blog-meta">
-                                    <li><i className="icon-27"></i>{blog?.date}</li>
-                                    <li><i className="icon-28"></i>Com {blog?.comment}</li>
-                                </ul>
-                                <div className="thumbnail">
-                                    <img src="/assets/images/blog/blog-large-1.jpg" alt="Blog Image" />
-                                </div>
-                            </div>
-
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores. </p>
-
-                            <p>Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.</p>
-                            <ul>
-                                <li>Aute irure dolor in reprehenderit</li>
-                                <li>Occaecat cupidatat non proident sunt in culpa</li>
-                                <li>Pariatur enim ipsam.</li>
-                            </ul>
-
-                            <blockquote>
-                                <p>Lorem ipsum dolor amet con sectur elitadicing elit sed do usmod tempor uincididunt enim minim veniam nostrud.</p>
-                                <h5 className="author">Simon Baker</h5>
-                            </blockquote>
-
-                            <h3 className="title">The Complete Camtasia</h3>
-                            <p>Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam. </p>
-
-                            <div className="features-image">
-                                <div className="row g-md-5">
-                                    <div className="col-6">
-                                        <div className="thumb">
-                                            <img src="/assets/images/blog/features-1.jpg" alt="Features Images" />
-                                        </div>
-                                    </div>
-                                    <div className="col-6">
-                                        <div className="thumb">
-                                            <img src="/assets/images/blog/features-2.jpg" alt="Features Images" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <p>Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores. </p>
-
-                            <p>Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.</p>
-
-                            <h3 className="title">Intrinsic Motivation</h3>
-                            <p>Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam. </p>
-
-                            <ul>
-                                <li>Aute irure dolor in reprehenderit</li>
-                                <li>Occaecat cupidatat non proident sunt in culpa</li>
-                                <li>Pariatur enim ipsam.</li>
-                            </ul>
-
-                            <div className="blog-share-area">
-                                <div className="row align-items-center">
-                                    <div className="col-md-7">
-                                        <div className="blog-tags">
-                                            <h6 className="title">Tags:</h6>
-                                            <div className="tag-list">
-                                                <a href="#">Language</a>
-                                                <a href="#">eLearn</a>
-                                                <a href="#">Tips</a>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div className="col-md-5">
-                                        <div className="blog-share">
-                                            <h6 className="title">Share on:</h6>
-                                            <ul className="social-share icon-transparent">
-                                                <li>
-                                                    <a href="#"><i className="icon-facebook"></i></a>
-                                                </li>
-                                                <li>
-                                                    <a href="#"><i className="icon-twitter"></i></a>
-                                                </li>
-                                                <li>
-                                                    <a href="#"><i className="icon-instagram"></i></a>
-                                                </li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="blog-author">
-                            <div className="thumbnail">
-                                <img src="/assets/images/blog/author-01.jpg" alt="Author Images" />
-                            </div>
-                            <div className="author-content">
-                                <h5 className="title">Edward Norton</h5>
-                                <p>Enim ad minim veniam quis nostrud exercitation lamco laboris nisi ex commodo consequat aute irure.</p>
-                                <ul className="social-share icon-transparent">
-                                    <li>
-                                        <a href="#"><i className="icon-facebook"></i></a>
-                                    </li>
-                                    <li>
-                                        <a href="#"><i className="icon-twitter"></i></a>
-                                    </li>
-                                    <li>
-                                        <a href="#"><i className="icon-instagram"></i></a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-
-                        <div className="blog-pagination">
-                            <div className="row g-5">
-                                <div className="col-lg-6">
-                                    <div className="blog-pagination-list prev-post">
-                                        <a href="#">
-                                            <i className="icon-west"></i>
-                                            <span>Instructional Design and Adult Learners</span>
-                                        </a>
-                                    </div>
-                                </div>
-
-                                <div className="col-lg-6">
-                                    <div className="blog-pagination-list next-post">
-                                        <a href="#">
-                                            <span>Qualification for Students Satisfaction Rate</span>
-                                            <i className="icon-east"></i>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        {/*  Start Comment Area  */}
-                        <CommentArea />
-                        {/*  End Comment Area  */}
-                        <div className="comment-form-area">
-                            <h3 className="heading-title">Leave Your Comment Here</h3>
-                            {/* form start */}
-                            <BlogCommentForm />
-                            {/* form end */}
-                        </div>
-                    </div>
-
-                    <div className="col-lg-4">
-                        {/* sidebar start */}
-                        <BlogSidebar />
-                        {/* sidebar end */}
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default BlogDetailsArea;
\ No newline at end of file
diff --git a/src/components/blog-details/blog-details-area.tsx b/src/components/blog-details/blog-details-area.tsx
new file mode 100644
index 0000000..9ad7fa1
--- /dev/null
+++ b/src/components/blog-details/blog-details-area.tsx
@@ -0,0 +1,254 @@
+import React from 'react';
+import BlogSidebar from '../blog/blog-sidebar';
+import BlogCommentForm from '../forms/blog-comment-form';
+import CommentArea from './comment-area';
+
+const BlogDetailsArea = ({ blog }) => {
+    return (
+        <div className='blog-details-area section-gap-equal'>
+            <div className='container'>
+                <div className='row row--30'>
+                    <div className='col-lg-8'>
+                        <div className='blog-details-content'>
+                            <div className='entry-content'>
+                                <span className='category'>Developer</span>
+                                <h3 className='title'>{blog?.title}</h3>
+                                <ul className='blog-meta'>
+                                    <li>
+                                        <i className='icon-27'></i>
+                                        {blog?.date}
+                                    </li>
+                                    <li>
+                                        <i className='icon-28'></i>Com {blog?.comment}
+                                    </li>
+                                </ul>
+                                <div className='thumbnail'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/blog/blog-large-1.jpg'
+                                            alt='Blog Image'
+                                        />
+                                    </picture>
+                                </div>
+                            </div>
+
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+                                sed do eiusmod tempor inc idid unt ut labore et dolore
+                                magna aliqua enim ad minim veniam, quis nostrud exerec
+                                tation ullamco laboris nis aliquip commodo consequat. Duis
+                                aute irure dolor in reprehenderit in voluptate velit esse
+                                cillum dolore eu fugiat nulla pariatur enim ipsam
+                                voluptatem quia voluptas sit aspernatur aut odit aut fugit
+                                sed quia consequuntur magni dolores.{' '}
+                            </p>
+
+                            <p>
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit anim id est laborum. Sed
+                                ut perspiciatis unde omnis iste natus error sit voluptatem
+                                accusantium doloremque laudantium totam rem aperiam.
+                            </p>
+                            <ul>
+                                <li>Aute irure dolor in reprehenderit</li>
+                                <li>Occaecat cupidatat non proident sunt in culpa</li>
+                                <li>Pariatur enim ipsam.</li>
+                            </ul>
+
+                            <blockquote>
+                                <p>
+                                    Lorem ipsum dolor amet con sectur elitadicing elit sed
+                                    do usmod tempor uincididunt enim minim veniam nostrud.
+                                </p>
+                                <h5 className='author'>Simon Baker</h5>
+                            </blockquote>
+
+                            <h3 className='title'>The Complete Camtasia</h3>
+                            <p>
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit anim id est laborum. Sed
+                                ut perspiciatis unde omnis iste natus error sit voluptatem
+                                accusantium doloremque laudantium totam rem aperiam.{' '}
+                            </p>
+
+                            <div className='features-image'>
+                                <div className='row g-md-5'>
+                                    <div className='col-6'>
+                                        <div className='thumb'>
+                                            <picture>
+                                                <img
+                                                    src='/assets/images/blog/features-1.jpg'
+                                                    alt='Features Images'
+                                                />
+                                            </picture>
+                                        </div>
+                                    </div>
+                                    <div className='col-6'>
+                                        <div className='thumb'>
+                                            <picture>
+                                                <img
+                                                    src='/assets/images/blog/features-2.jpg'
+                                                    alt='Features Images'
+                                                />
+                                            </picture>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <p>
+                                Consectetur adipisicing elit, sed do eiusmod tempor inc
+                                idid unt ut labore et dolore magna aliqua enim ad minim
+                                veniam, quis nostrud exerec tation ullamco laboris nis
+                                aliquip commodo consequat. Duis aute irure dolor in
+                                reprehenderit in voluptate velit esse cillum dolore eu
+                                fugiat nulla pariatur enim ipsam voluptatem quia voluptas
+                                sit aspernatur aut odit aut fugit sed quia consequuntur
+                                magni dolores.{' '}
+                            </p>
+
+                            <p>
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit anim id est laborum. Sed
+                                ut perspiciatis unde omnis iste natus error sit voluptatem
+                                accusantium doloremque laudantium totam rem aperiam.
+                            </p>
+
+                            <h3 className='title'>Intrinsic Motivation</h3>
+                            <p>
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit anim id est laborum. Sed
+                                ut perspiciatis unde omnis iste natus error sit voluptatem
+                                accusantium doloremque laudantium totam rem aperiam.{' '}
+                            </p>
+
+                            <ul>
+                                <li>Aute irure dolor in reprehenderit</li>
+                                <li>Occaecat cupidatat non proident sunt in culpa</li>
+                                <li>Pariatur enim ipsam.</li>
+                            </ul>
+
+                            <div className='blog-share-area'>
+                                <div className='row align-items-center'>
+                                    <div className='col-md-7'>
+                                        <div className='blog-tags'>
+                                            <h6 className='title'>Tags:</h6>
+                                            <div className='tag-list'>
+                                                <a href='#'>Language</a>
+                                                <a href='#'>eLearn</a>
+                                                <a href='#'>Tips</a>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className='col-md-5'>
+                                        <div className='blog-share'>
+                                            <h6 className='title'>Share on:</h6>
+                                            <ul className='social-share icon-transparent'>
+                                                <li>
+                                                    <a href='#'>
+                                                        <i className='icon-facebook'></i>
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a href='#'>
+                                                        <i className='icon-twitter'></i>
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a href='#'>
+                                                        <i className='icon-instagram'></i>
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='blog-author'>
+                            <div className='thumbnail'>
+                                <picture>
+                                    <img
+                                        src='/assets/images/blog/author-01.jpg'
+                                        alt='Author Images'
+                                    />
+                                </picture>
+                            </div>
+                            <div className='author-content'>
+                                <h5 className='title'>Edward Norton</h5>
+                                <p>
+                                    Enim ad minim veniam quis nostrud exercitation lamco
+                                    laboris nisi ex commodo consequat aute irure.
+                                </p>
+                                <ul className='social-share icon-transparent'>
+                                    <li>
+                                        <a href='#'>
+                                            <i className='icon-facebook'></i>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href='#'>
+                                            <i className='icon-twitter'></i>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href='#'>
+                                            <i className='icon-instagram'></i>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+
+                        <div className='blog-pagination'>
+                            <div className='row g-5'>
+                                <div className='col-lg-6'>
+                                    <div className='blog-pagination-list prev-post'>
+                                        <a href='#'>
+                                            <i className='icon-west'></i>
+                                            <span>
+                                                Instructional Design and Adult Learners
+                                            </span>
+                                        </a>
+                                    </div>
+                                </div>
+
+                                <div className='col-lg-6'>
+                                    <div className='blog-pagination-list next-post'>
+                                        <a href='#'>
+                                            <span>
+                                                Qualification for Students Satisfaction
+                                                Rate
+                                            </span>
+                                            <i className='icon-east'></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/*  Start Comment Area  */}
+                        <CommentArea />
+                        {/*  End Comment Area  */}
+                        <div className='comment-form-area'>
+                            <h3 className='heading-title'>Leave Your Comment Here</h3>
+                            {/* form start */}
+                            <BlogCommentForm />
+                            {/* form end */}
+                        </div>
+                    </div>
+
+                    <div className='col-lg-4'>
+                        {/* sidebar start */}
+                        <BlogSidebar />
+                        {/* sidebar end */}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BlogDetailsArea;
diff --git a/src/components/blog-details/comment-area.jsx b/src/components/blog-details/comment-area.jsx
deleted file mode 100644
index 3699507..0000000
--- a/src/components/blog-details/comment-area.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-
-const CommentArea = () => {
-    return (
-        <div className="comment-area">
-            <h3 className="heading-title">Comments</h3>
-            <div className="comment-list-wrapper">
-                <div className="comment">
-                    <div className="thumbnail">
-                        <img src="/assets/images/blog/comment-01.jpg" alt="Comment Images" />
-                    </div>
-                    <div className="comment-content">
-                        <h5 className="title">Haley Bennet</h5>
-                        <span className="date">Oct 10, 2021</span>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                        <div className="reply-btn-wrapper">
-                            <a className="reply-btn" href="#">Reply</a>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="comment comment-reply">
-                    <div className="thumbnail">
-                        <img src="/assets/images/blog/comment-02.jpg" alt="Comment Images" />
-                    </div>
-                    <div className="comment-content">
-                        <h5 className="title">Simon Baker</h5>
-                        <span className="date">Oct 10, 2021</span>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                        <div className="reply-btn-wrapper">
-                            <a className="reply-btn" href="#">Reply</a>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="comment">
-                    <div className="thumbnail">
-                        <img src="/assets/images/blog/comment-03.jpg" alt="Comment Images" />
-                    </div>
-                    <div className="comment-content">
-                        <h6 className="title">Richard Gere</h6>
-                        <span className="date">Oct 10, 2021</span>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                        <div className="reply-btn-wrapper">
-                            <a className="reply-btn" href="#">Reply</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CommentArea;
\ No newline at end of file
diff --git a/src/components/blog-details/comment-area.tsx b/src/components/blog-details/comment-area.tsx
new file mode 100644
index 0000000..0fbb916
--- /dev/null
+++ b/src/components/blog-details/comment-area.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+
+const CommentArea = () => {
+    return (
+        <div className='comment-area'>
+            <h3 className='heading-title'>Comments</h3>
+            <div className='comment-list-wrapper'>
+                <div className='comment'>
+                    <div className='thumbnail'>
+                        <picture>
+                            <img
+                                src='/assets/images/blog/comment-01.jpg'
+                                alt='Comment Images'
+                            />
+                        </picture>
+                    </div>
+                    <div className='comment-content'>
+                        <h5 className='title'>Haley Bennet</h5>
+                        <span className='date'>Oct 10, 2021</span>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit sed
+                            do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                        <div className='reply-btn-wrapper'>
+                            <a className='reply-btn' href='#'>
+                                Reply
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='comment comment-reply'>
+                    <div className='thumbnail'>
+                        <picture>
+                            <img
+                                src='/assets/images/blog/comment-02.jpg'
+                                alt='Comment Images'
+                            />
+                        </picture>
+                    </div>
+                    <div className='comment-content'>
+                        <h5 className='title'>Simon Baker</h5>
+                        <span className='date'>Oct 10, 2021</span>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit sed
+                            do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                        <div className='reply-btn-wrapper'>
+                            <a className='reply-btn' href='#'>
+                                Reply
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='comment'>
+                    <div className='thumbnail'>
+                        <picture>
+                            <img
+                                src='/assets/images/blog/comment-03.jpg'
+                                alt='Comment Images'
+                            />
+                        </picture>
+                    </div>
+                    <div className='comment-content'>
+                        <h6 className='title'>Richard Gere</h6>
+                        <span className='date'>Oct 10, 2021</span>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit sed
+                            do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                        <div className='reply-btn-wrapper'>
+                            <a className='reply-btn' href='#'>
+                                Reply
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CommentArea;
diff --git a/src/components/blog-details/index.jsx b/src/components/blog-details/index.tsx
similarity index 61%
rename from src/components/blog-details/index.jsx
rename to src/components/blog-details/index.tsx
index 81c21b7..f8bab6b 100644
--- a/src/components/blog-details/index.jsx
+++ b/src/components/blog-details/index.tsx
@@ -4,19 +4,18 @@ import BreadcrumbThree from '../breadcrumb/breadcrumb-3';
 import AdBanner from '../homes/home/ad-banner';
 import BlogDetailsArea from './blog-details-area';
 
-
-const index = ({blog}) => {
+const index = ({ blog }) => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Blog Details" subtitle="Blog Details" />
-                <BlogDetailsArea blog={blog}/>
-                <AdBanner/>
+                <BreadcrumbThree title='Blog Details' subtitle='Blog Details' />
+                <BlogDetailsArea blog={blog} />
+                <AdBanner />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/blog-list/index.jsx b/src/components/blog-list/index.tsx
similarity index 75%
rename from src/components/blog-list/index.jsx
rename to src/components/blog-list/index.tsx
index cb3b412..5e1ae39 100644
--- a/src/components/blog-list/index.jsx
+++ b/src/components/blog-list/index.tsx
@@ -7,15 +7,15 @@ import ListArea from './list-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Blog List" subtitle="Blog 3" />
+                <BreadcrumbThree title='Blog List' subtitle='Blog 3' />
                 <ListArea />
                 <AdBanner />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/blog-list/list-area.jsx b/src/components/blog-list/list-area.jsx
deleted file mode 100644
index 407233e..0000000
--- a/src/components/blog-list/list-area.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { blog_data } from '../../data';
-import PaginationTwo from '../../ui/paginatio-2';
-import BlogSidebar from '../blog/blog-sidebar';
-
-const blog_items = blog_data.filter(blog => blog.blog_list);
-
-const ListArea = () => {
-    return (
-        <section className="section-gap-equal">
-            <div className="container">
-                <div className="row row--30">
-                    <div className="col-lg-8">
-                        {blog_items.map((blog) => {
-                            const { id, img, title, date, desc, comment } = blog;
-                            return (
-                                <div key={id} className="edu-blog blog-style-list" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            <Link href={`/blog-details/${id}`}>
-
-                                                <img src={img} alt="Blog Images" />
-
-                                            </Link>
-                                        </div>
-                                        <div className="content">
-                                            <h5 className="title">
-                                                <Link href={`/blog-details/${id}`}>
-                                                    {title}...
-                                                </Link>
-                                            </h5>
-                                            <ul className="blog-meta">
-                                                <li><i className="icon-27"></i>{date}</li>
-                                                <li><i className="icon-28"></i>Com {comment}</li>
-                                            </ul>
-                                            <p>{desc}</p>
-                                            <div className="read-more-btn">
-                                                <Link href={`/blog-details/${id}`} className="edu-btn btn-border btn-medium">
-                                                    Learn More<i className="icon-4"></i>
-                                                </Link>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            );
-                        })}
-
-                        <ul className="edu-pagination top-space-30 justify-content-start">
-                            {/* pagination start */}
-                            <PaginationTwo />
-                            {/* pagination end */}
-                        </ul>
-                    </div>
-
-                    <div className="col-lg-4">
-                        {/* sidebar start */}
-                        <BlogSidebar />
-                        {/* sidebar end */}
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
-
-export default ListArea;
\ No newline at end of file
diff --git a/src/components/blog-list/list-area.tsx b/src/components/blog-list/list-area.tsx
new file mode 100644
index 0000000..d1c23f1
--- /dev/null
+++ b/src/components/blog-list/list-area.tsx
@@ -0,0 +1,82 @@
+import Link from 'next/link';
+import React from 'react';
+import { blog_data } from '../../data';
+import PaginationTwo from '../../ui/paginatio-2';
+import BlogSidebar from '../blog/blog-sidebar';
+
+const blog_items = blog_data.filter(blog => blog.blog_list);
+
+const ListArea = () => {
+    return (
+        <section className='section-gap-equal'>
+            <div className='container'>
+                <div className='row row--30'>
+                    <div className='col-lg-8'>
+                        {blog_items.map(blog => {
+                            const { id, img, title, date, desc, comment } = blog;
+                            return (
+                                <div
+                                    key={id}
+                                    className='edu-blog blog-style-list'
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    <div className='inner'>
+                                        <div className='thumbnail'>
+                                            <Link href={`/blog-details/${id}`}>
+                                                <picture>
+                                                    <img src={img} alt='Blog Images' />
+                                                </picture>
+                                            </Link>
+                                        </div>
+                                        <div className='content'>
+                                            <h5 className='title'>
+                                                <Link href={`/blog-details/${id}`}>
+                                                    {title}...
+                                                </Link>
+                                            </h5>
+                                            <ul className='blog-meta'>
+                                                <li>
+                                                    <i className='icon-27'></i>
+                                                    {date}
+                                                </li>
+                                                <li>
+                                                    <i className='icon-28'></i>Com{' '}
+                                                    {comment}
+                                                </li>
+                                            </ul>
+                                            <p>{desc}</p>
+                                            <div className='read-more-btn'>
+                                                <Link
+                                                    href={`/blog-details/${id}`}
+                                                    className='edu-btn btn-border btn-medium'
+                                                >
+                                                    Learn More<i className='icon-4'></i>
+                                                </Link>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            );
+                        })}
+
+                        <ul className='edu-pagination top-space-30 justify-content-start'>
+                            {/* pagination start */}
+                            <PaginationTwo />
+                            {/* pagination end */}
+                        </ul>
+                    </div>
+
+                    <div className='col-lg-4'>
+                        {/* sidebar start */}
+                        <BlogSidebar />
+                        {/* sidebar end */}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ListArea;
diff --git a/src/components/blog-masonry/blog-masonry-area.jsx b/src/components/blog-masonry/blog-masonry-area.jsx
deleted file mode 100644
index 0879ad3..0000000
--- a/src/components/blog-masonry/blog-masonry-area.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
-import { blog_data } from '../../data';
-import PaginationTwo from '../../ui/paginatio-2';
-
-const blog_items = blog_data.filter(blog => blog.blog_masonry);
-
-const BlogMasonryArea = () => {
-  return (
-      <section className="section-gap-equal">
-          <div className="container">
-              <div className="g-5" id="masonry-gallery" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                  <ResponsiveMasonry columnsCountBreakPoints={{ 0: 1, 750: 2, 992: 3 }}>
-                      <Masonry gutter="30px">
-                          {blog_items.map((blog) => {
-                              const { id, img, desc, title, date, category, comment } = blog;
-                              return (
-                                  <div key={id}>
-                                      <div className="edu-blog blog-style-5">
-                                          <div className="inner">
-                                              <div className="thumbnail">
-                                                  <Link href={`/blog-details/${id}`}>
-
-                                                      <img src={img} alt="Blog Images" />
-
-                                                  </Link>
-                                              </div>
-
-                                              <div className="content position-top">
-                                                  <div className="read-more-btn">
-                                                      <Link href={`/blog-details/${id}`} className="btn-icon-round">
-                                                          <i className="icon-4"></i>
-                                                      </Link>
-                                                  </div>
-                                                  <div className="category-wrap">
-                                                      <a href="#" className="blog-category">{category}</a>
-                                                  </div>
-                                                  <h5 className="title">
-                                                      <Link href={`/blog-details/${id}`}>
-                                                          {title}...
-                                                      </Link>
-                                                  </h5>
-                                                  <ul className="blog-meta">
-                                                      <li><i className="icon-27"></i>{date}</li>
-                                                      <li><i className="icon-28"></i>Com {comment}</li>
-                                                  </ul>
-                                                  <p>{desc}</p>
-                                              </div>
-                                          </div>
-                                      </div>
-                                  </div>
-                              );
-                          })}
-                      </Masonry>
-                  </ResponsiveMasonry>
-              </div>
-              <ul className="edu-pagination top-space-30">
-                  {/* pagination start */}
-                  <PaginationTwo />
-                  {/* pagination end */}
-              </ul>
-          </div>
-      </section>
-  );
-}
-
-export default BlogMasonryArea;
\ No newline at end of file
diff --git a/src/components/blog-masonry/blog-masonry-area.tsx b/src/components/blog-masonry/blog-masonry-area.tsx
new file mode 100644
index 0000000..c2a164e
--- /dev/null
+++ b/src/components/blog-masonry/blog-masonry-area.tsx
@@ -0,0 +1,94 @@
+import Link from 'next/link';
+import React from 'react';
+import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
+import { blog_data } from '../../data';
+import PaginationTwo from '../../ui/paginatio-2';
+
+const blog_items = blog_data.filter(blog => blog.blog_masonry);
+
+const BlogMasonryArea = () => {
+    return (
+        <section className='section-gap-equal'>
+            <div className='container'>
+                <div
+                    className='g-5'
+                    id='masonry-gallery'
+                    data-sal-delay='100'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <ResponsiveMasonry columnsCountBreakPoints={{ 0: 1, 750: 2, 992: 3 }}>
+                        <Masonry gutter='30px'>
+                            {blog_items.map(blog => {
+                                const { id, img, desc, title, date, category, comment } =
+                                    blog;
+                                return (
+                                    <div key={id}>
+                                        <div className='edu-blog blog-style-5'>
+                                            <div className='inner'>
+                                                <div className='thumbnail'>
+                                                    <Link href={`/blog-details/${id}`}>
+                                                        <picture>
+                                                            <img
+                                                                src={img}
+                                                                alt='Blog Images'
+                                                            />
+                                                        </picture>
+                                                    </Link>
+                                                </div>
+
+                                                <div className='content position-top'>
+                                                    <div className='read-more-btn'>
+                                                        <Link
+                                                            href={`/blog-details/${id}`}
+                                                            className='btn-icon-round'
+                                                        >
+                                                            <i className='icon-4'></i>
+                                                        </Link>
+                                                    </div>
+                                                    <div className='category-wrap'>
+                                                        <a
+                                                            href='#'
+                                                            className='blog-category'
+                                                        >
+                                                            {category}
+                                                        </a>
+                                                    </div>
+                                                    <h5 className='title'>
+                                                        <Link
+                                                            href={`/blog-details/${id}`}
+                                                        >
+                                                            {title}...
+                                                        </Link>
+                                                    </h5>
+                                                    <ul className='blog-meta'>
+                                                        <li>
+                                                            <i className='icon-27'></i>
+                                                            {date}
+                                                        </li>
+                                                        <li>
+                                                            <i className='icon-28'></i>Com{' '}
+                                                            {comment}
+                                                        </li>
+                                                    </ul>
+                                                    <p>{desc}</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </Masonry>
+                    </ResponsiveMasonry>
+                </div>
+                <ul className='edu-pagination top-space-30'>
+                    {/* pagination start */}
+                    <PaginationTwo />
+                    {/* pagination end */}
+                </ul>
+            </div>
+        </section>
+    );
+};
+
+export default BlogMasonryArea;
diff --git a/src/components/blog-masonry/index.jsx b/src/components/blog-masonry/index.tsx
similarity index 66%
rename from src/components/blog-masonry/index.jsx
rename to src/components/blog-masonry/index.tsx
index 7ed4ce4..e8bcea1 100644
--- a/src/components/blog-masonry/index.jsx
+++ b/src/components/blog-masonry/index.tsx
@@ -7,15 +7,15 @@ import BlogMasonryArea from './blog-masonry-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Blog Masonry" subtitle="Blog 2" />
-                <BlogMasonryArea/>
-                <AdBanner/>
+                <BreadcrumbThree title='Blog Masonry' subtitle='Blog 2' />
+                <BlogMasonryArea />
+                <AdBanner />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/blog-post/blog-post-one.jsx b/src/components/blog-post/blog-post-one.jsx
deleted file mode 100644
index cbbc167..0000000
--- a/src/components/blog-post/blog-post-one.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-const BlogPostOne = ({ param }) => {
-    return (
-        <div className="edu-blog blog-style-1">
-            <div className="inner">
-                <div className="thumbnail">
-                    <Link href={`/blog-details/${param.id}`}>
-
-                        <img src={param.img} alt="Blog Images" />
-
-                    </Link>
-                </div>
-                <div className="content position-top">
-                    <div className="read-more-btn">
-                        <Link href={`/blog-details/${param.id}`} className="btn-icon-round">
-
-                            <i className="icon-4"></i>
-
-                        </Link>
-                    </div>
-                    <div className="category-wrap">
-                        <a href="#" className="blog-category">{param.category}</a>
-                    </div>
-                    <h5 className="title">
-                        <Link href={`/blog-details/${param.id}`}>
-                            {param.title}
-                        </Link>
-                    </h5>
-                    <ul className="blog-meta">
-                        <li>
-                            <i className="icon-27"></i>{param.date}
-                        </li>
-                        <li>
-                            <i className="icon-28"></i>Com {param.comment}
-                        </li>
-                    </ul>
-                    <p>{param.sm_desc}</p>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default BlogPostOne;
\ No newline at end of file
diff --git a/src/components/blog-post/blog-post-one.tsx b/src/components/blog-post/blog-post-one.tsx
new file mode 100644
index 0000000..2137578
--- /dev/null
+++ b/src/components/blog-post/blog-post-one.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Link from 'next/link';
+
+const BlogPostOne = ({ param }) => {
+    return (
+        <div className='edu-blog blog-style-1'>
+            <div className='inner'>
+                <div className='thumbnail'>
+                    <Link href={`/blog-details/${param.id}`}>
+                        <picture>
+                            <img src={param.img} alt='Blog Images' />
+                        </picture>
+                    </Link>
+                </div>
+                <div className='content position-top'>
+                    <div className='read-more-btn'>
+                        <Link
+                            href={`/blog-details/${param.id}`}
+                            className='btn-icon-round'
+                        >
+                            <i className='icon-4'></i>
+                        </Link>
+                    </div>
+                    <div className='category-wrap'>
+                        <a href='#' className='blog-category'>
+                            {param.category}
+                        </a>
+                    </div>
+                    <h5 className='title'>
+                        <Link href={`/blog-details/${param.id}`}>{param.title}</Link>
+                    </h5>
+                    <ul className='blog-meta'>
+                        <li>
+                            <i className='icon-27'></i>
+                            {param.date}
+                        </li>
+                        <li>
+                            <i className='icon-28'></i>Com {param.comment}
+                        </li>
+                    </ul>
+                    <p>{param.sm_desc}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BlogPostOne;
diff --git a/src/components/blog/blog-area.jsx b/src/components/blog/blog-area.jsx
deleted file mode 100644
index b69710a..0000000
--- a/src/components/blog/blog-area.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import { useEffect } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Navigation } from 'swiper';
-
-import { blog_data } from '../../data';
-import BlogSidebar from './blog-sidebar';
-import VideoModal from '../common/popup-modal/video-modal';
-import useModal from '../../hooks/use-modal';
-import PaginationTwo from '../../ui/paginatio-2';
-import Link from 'next/link';
-
-const blog_items = blog_data.filter(blog => blog.blog_standard)
-
-const BlogArea = () => {
-    const [loop, setLoop] = useState(false);
-    useEffect(() => setLoop(true), []);
-    const { isVideoOpen, setIsVideoOpen } = useModal();
-    return <>
-        <section className="section-gap-equal">
-            <div className="container">
-                <div className="row row--30">
-                    <div className="col-lg-8">
-                        {blog_items.map((blog, i) => {
-                            const { category, comment, date, id, title, images, img, video, slider, desc } = blog;
-                            return (
-                                <div key={id} className={`edu-blog blog-style-4 ${video ? 'post-video' : 'post-gallery'}`} data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            {!slider && 
-                                                <Link href={`/blog-details/${id}`}>
-
-                                                    <img src={img} alt="Blog Images" />
-
-                                                </Link>
-                                            }
-
-                                            {video && <button onClick={() => setIsVideoOpen(true)} style={{ border: 'none' }} className="video-play-btn video-popup-activation">
-                                                <i className="icon-18"></i>
-                                            </button>}
-
-                                            {slider &&
-                                                <Swiper
-                                                    className='blog-gallery-activation swiper'
-                                                    slidesPerView={1}
-                                                    spaceBetween={0}
-                                                    modules={[Navigation, Autoplay]}
-                                                    loop={loop}
-                                                    grabCursor={true}
-                                                    speed={1000}
-                                                    autoplay={{
-                                                        delay: 3000
-                                                    }}
-                                                    navigation={{
-                                                        nextEl: ".swiper-btn-nxt",
-                                                        prevEl: ".swiper-btn-prv"
-                                                    }}
-                                                >
-                                                    {images.map((img, i) => (
-                                                        <SwiperSlide key={i}>
-                                                            <Link href={`/blog-details/${id}`}>
-
-                                                                <img src={img} alt="Blog Images" />
-
-                                                            </Link>
-                                                        </SwiperSlide>
-                                                    ))}
-
-                                                    <div className="swiper-navigation">
-                                                        <div className="swiper-btn-nxt" style={{ cursor: 'pointer' }}>
-                                                            <i className="icon-west"></i>
-                                                        </div>
-                                                        <div className="swiper-btn-prv" style={{ cursor: 'pointer' }}>
-                                                            <i className="icon-east"></i>
-                                                        </div>
-                                                    </div>
-                                                </Swiper>
-                                            }
-                                        </div>
-
-                                        <div className="content">
-                                            <div className="category-wrap">
-                                                <a href="#" className="blog-category">{category}</a>
-                                            </div>
-                                            <h3 className="title">
-                                                <Link href={`/blog-details/${id}`}>
-                                                    {title}
-                                                </Link>
-                                            </h3>
-                                            <ul className="blog-meta">
-                                                <li><i className="icon-27"></i>{date}</li>
-                                                <li><i className="icon-28"></i>Com {comment}</li>
-                                            </ul>
-                                            <p>{desc}</p>
-                                            <div className="read-more-btn">
-                                                <Link href={`/blog-details/${id}`} className="edu-btn btn-border btn-medium">
-                                                    Learn More<i className="icon-4"></i>
-                                                </Link>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            );
-                        })}
-
-                        <ul className="edu-pagination justify-content-start pt-0">
-                            {/* pagination start */}
-                            <PaginationTwo />
-                            {/* pagination end */}
-                        </ul>
-                    </div>
-
-                    <div className="col-lg-4">
-                        {/* sidebar start */}
-                        <BlogSidebar />
-                        {/* sidebar end */}
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        {/* video modal start */}
-        <VideoModal isVideoOpen={isVideoOpen} setIsVideoOpen={setIsVideoOpen} videoId={'PICj5tr9hcc'} />
-        {/* video modal end */}
-    </>;
-}
-
-export default BlogArea;
\ No newline at end of file
diff --git a/src/components/blog/blog-area.tsx b/src/components/blog/blog-area.tsx
new file mode 100644
index 0000000..2e581cf
--- /dev/null
+++ b/src/components/blog/blog-area.tsx
@@ -0,0 +1,192 @@
+import React from 'react';
+import { useState } from 'react';
+import { useEffect } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation } from 'swiper';
+
+import { blog_data } from '../../data';
+import BlogSidebar from './blog-sidebar';
+import VideoModal from '../common/popup-modal/video-modal';
+import useModal from '../../hooks/use-modal';
+import PaginationTwo from '../../ui/paginatio-2';
+import Link from 'next/link';
+
+const blog_items = blog_data.filter(blog => blog.blog_standard);
+
+const BlogArea = () => {
+    const [loop, setLoop] = useState(false);
+    useEffect(() => setLoop(true), []);
+    const { isVideoOpen, setIsVideoOpen } = useModal();
+    return (
+        <>
+            <section className='section-gap-equal'>
+                <div className='container'>
+                    <div className='row row--30'>
+                        <div className='col-lg-8'>
+                            {blog_items.map((blog, i) => {
+                                const {
+                                    category,
+                                    comment,
+                                    date,
+                                    id,
+                                    title,
+                                    images,
+                                    img,
+                                    video,
+                                    slider,
+                                    desc,
+                                } = blog;
+                                return (
+                                    <div
+                                        key={id}
+                                        className={`edu-blog blog-style-4 ${
+                                            video ? 'post-video' : 'post-gallery'
+                                        }`}
+                                        data-sal-delay='150'
+                                        data-sal='slide-up'
+                                        data-sal-duration='800'
+                                    >
+                                        <div className='inner'>
+                                            <div className='thumbnail'>
+                                                {!slider && (
+                                                    <Link href={`/blog-details/${id}`}>
+                                                        <picture>
+                                                            <img
+                                                                src={img}
+                                                                alt='Blog Images'
+                                                            />
+                                                        </picture>
+                                                    </Link>
+                                                )}
+
+                                                {video && (
+                                                    <button
+                                                        onClick={() =>
+                                                            setIsVideoOpen(true)
+                                                        }
+                                                        style={{ border: 'none' }}
+                                                        className='video-play-btn video-popup-activation'
+                                                    >
+                                                        <i className='icon-18'></i>
+                                                    </button>
+                                                )}
+
+                                                {slider && (
+                                                    <Swiper
+                                                        className='blog-gallery-activation swiper'
+                                                        slidesPerView={1}
+                                                        spaceBetween={0}
+                                                        modules={[Navigation, Autoplay]}
+                                                        loop={loop}
+                                                        grabCursor={true}
+                                                        speed={1000}
+                                                        autoplay={{
+                                                            delay: 3000,
+                                                        }}
+                                                        navigation={{
+                                                            nextEl: '.swiper-btn-nxt',
+                                                            prevEl: '.swiper-btn-prv',
+                                                        }}
+                                                    >
+                                                        {images.map((img, i) => (
+                                                            <SwiperSlide key={i}>
+                                                                <Link
+                                                                    href={`/blog-details/${id}`}
+                                                                >
+                                                                    <picture>
+                                                                        <img
+                                                                            src={img}
+                                                                            alt='Blog Images'
+                                                                        />
+                                                                    </picture>
+                                                                </Link>
+                                                            </SwiperSlide>
+                                                        ))}
+
+                                                        <div className='swiper-navigation'>
+                                                            <div
+                                                                className='swiper-btn-nxt'
+                                                                style={{
+                                                                    cursor: 'pointer',
+                                                                }}
+                                                            >
+                                                                <i className='icon-west'></i>
+                                                            </div>
+                                                            <div
+                                                                className='swiper-btn-prv'
+                                                                style={{
+                                                                    cursor: 'pointer',
+                                                                }}
+                                                            >
+                                                                <i className='icon-east'></i>
+                                                            </div>
+                                                        </div>
+                                                    </Swiper>
+                                                )}
+                                            </div>
+
+                                            <div className='content'>
+                                                <div className='category-wrap'>
+                                                    <a href='#' className='blog-category'>
+                                                        {category}
+                                                    </a>
+                                                </div>
+                                                <h3 className='title'>
+                                                    <Link href={`/blog-details/${id}`}>
+                                                        {title}
+                                                    </Link>
+                                                </h3>
+                                                <ul className='blog-meta'>
+                                                    <li>
+                                                        <i className='icon-27'></i>
+                                                        {date}
+                                                    </li>
+                                                    <li>
+                                                        <i className='icon-28'></i>Com{' '}
+                                                        {comment}
+                                                    </li>
+                                                </ul>
+                                                <p>{desc}</p>
+                                                <div className='read-more-btn'>
+                                                    <Link
+                                                        href={`/blog-details/${id}`}
+                                                        className='edu-btn btn-border btn-medium'
+                                                    >
+                                                        Learn More
+                                                        <i className='icon-4'></i>
+                                                    </Link>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+
+                            <ul className='edu-pagination justify-content-start pt-0'>
+                                {/* pagination start */}
+                                <PaginationTwo />
+                                {/* pagination end */}
+                            </ul>
+                        </div>
+
+                        <div className='col-lg-4'>
+                            {/* sidebar start */}
+                            <BlogSidebar />
+                            {/* sidebar end */}
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* video modal start */}
+            <VideoModal
+                isVideoOpen={isVideoOpen}
+                setIsVideoOpen={setIsVideoOpen}
+                videoId={'PICj5tr9hcc'}
+            />
+            {/* video modal end */}
+        </>
+    );
+};
+
+export default BlogArea;
diff --git a/src/components/blog/blog-sidebar.jsx b/src/components/blog/blog-sidebar.jsx
deleted file mode 100644
index 9d74558..0000000
--- a/src/components/blog/blog-sidebar.jsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { blog_data } from '../../data';
-
-const latest_blog = blog_data.slice(0, 3);
-
-const BlogSidebar = () => {
-    return (
-        <div className="edu-blog-sidebar">
-            <div className="edu-blog-widget widget-search">
-                <div className="inner">
-                    <h4 className="widget-title">Search</h4>
-                    <div className="content">
-                        <form className="blog-search" onSubmit={e => e.preventDefault()}>
-                            <button className="search-button"><i className="icon-2"></i></button>
-                            <input type="text" placeholder="Search" />
-                        </form>
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-blog-widget widget-latest-post">
-                <div className="inner">
-                    <h4 className="widget-title">Latest Post</h4>
-                    <div className="content latest-post-list">
-                        {latest_blog.map((blog) => (
-                            <div key={blog.id} className="latest-post">
-                                <div className="thumbnail">
-                                    <Link href={`/blog-details/${blog.id}`}>
-
-                                        <img src={blog.img} alt="Blog Images" />
-
-                                    </Link>
-                                </div>
-                                <div className="post-content">
-                                    <h6 className="title">
-                                        <Link href={`/blog-details/${blog.id}`}>
-                                            {blog.title.substring(0, 25)}...
-                                        </Link>
-                                    </h6>
-                                    <ul className="blog-meta">
-                                        <li><i className="icon-27"></i>{blog.date}</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-blog-widget widget-categories">
-                <div className="inner">
-                    <h4 className="widget-title">Categories</h4>
-                    <div className="content">
-                        <ul className="category-list">
-                            <li><a href="#">Business Studies <span>(3)</span></a></li>
-                            <li><a href="#">Computer Engineering <span>(7)</span></a></li>
-                            <li><a href="#">Medical &amp; Health<span>(2)</span></a></li>
-                            <li><a href="#">Software <span>(1)</span></a></li>
-                            <li><a href="#">Web Development <span>(3)</span></a></li>
-                            <li><a href="#">Uncategorized <span>(9)</span></a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-blog-widget widget-action">
-                <div className="inner">
-                    <h4 className="title">Get Online Courses From <span>EduBlink</span></h4>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                    <p>Nostrud exer ciation laboris aliqup</p>
-                    <a href="#" className="edu-btn btn-medium">Start Now <i className="icon-4"></i></a>
-                </div>
-            </div>
-
-            <div className="edu-blog-widget widget-categories">
-                <div className="inner">
-                    <h4 className="widget-title">Archives</h4>
-                    <div className="content">
-                        <ul className="category-list">
-                            <li><a href="#">2017 Nevember <span>(3)</span></a></li>
-                            <li><a href="#">2018 December <span>(7)</span></a></li>
-                            <li><a href="#">2019 January<span>(2)</span></a></li>
-                            <li><a href="#">2020 February <span>(1)</span></a></li>
-                            <li><a href="#">2021 March <span>(3)</span></a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-blog-widget widget-tags">
-                <div className="inner">
-                    <h4 className="widget-title">Tags</h4>
-                    <div className="content">
-                        <div className="tag-list">
-                            <a href="#">Language</a>
-                            <a href="#">eLearn</a>
-                            <a href="#">Tips</a>
-                            <a href="#">Course</a>
-                            <a href="#">Motivation</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default BlogSidebar;
\ No newline at end of file
diff --git a/src/components/blog/blog-sidebar.tsx b/src/components/blog/blog-sidebar.tsx
new file mode 100644
index 0000000..b4cfe6e
--- /dev/null
+++ b/src/components/blog/blog-sidebar.tsx
@@ -0,0 +1,164 @@
+import Link from 'next/link';
+import React from 'react';
+import { blog_data } from '../../data';
+
+const latest_blog = blog_data.slice(0, 3);
+
+const BlogSidebar = () => {
+    return (
+        <div className='edu-blog-sidebar'>
+            <div className='edu-blog-widget widget-search'>
+                <div className='inner'>
+                    <h4 className='widget-title'>Search</h4>
+                    <div className='content'>
+                        <form className='blog-search' onSubmit={e => e.preventDefault()}>
+                            <button className='search-button'>
+                                <i className='icon-2'></i>
+                            </button>
+                            <input type='text' placeholder='Search' />
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-blog-widget widget-latest-post'>
+                <div className='inner'>
+                    <h4 className='widget-title'>Latest Post</h4>
+                    <div className='content latest-post-list'>
+                        {latest_blog.map(blog => (
+                            <div key={blog.id} className='latest-post'>
+                                <div className='thumbnail'>
+                                    <Link href={`/blog-details/${blog.id}`}>
+                                        <picture>
+                                            <img src={blog.img} alt='Blog Images' />
+                                        </picture>
+                                    </Link>
+                                </div>
+                                <div className='post-content'>
+                                    <h6 className='title'>
+                                        <Link href={`/blog-details/${blog.id}`}>
+                                            {blog.title.substring(0, 25)}...
+                                        </Link>
+                                    </h6>
+                                    <ul className='blog-meta'>
+                                        <li>
+                                            <i className='icon-27'></i>
+                                            {blog.date}
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-blog-widget widget-categories'>
+                <div className='inner'>
+                    <h4 className='widget-title'>Categories</h4>
+                    <div className='content'>
+                        <ul className='category-list'>
+                            <li>
+                                <a href='#'>
+                                    Business Studies <span>(3)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    Computer Engineering <span>(7)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    Medical &amp; Health<span>(2)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    Software <span>(1)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    Web Development <span>(3)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    Uncategorized <span>(9)</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-blog-widget widget-action'>
+                <div className='inner'>
+                    <h4 className='title'>
+                        Get Online Courses From <span>EduBlink</span>
+                    </h4>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                    <p>Nostrud exer ciation laboris aliqup</p>
+                    <a href='#' className='edu-btn btn-medium'>
+                        Start Now <i className='icon-4'></i>
+                    </a>
+                </div>
+            </div>
+
+            <div className='edu-blog-widget widget-categories'>
+                <div className='inner'>
+                    <h4 className='widget-title'>Archives</h4>
+                    <div className='content'>
+                        <ul className='category-list'>
+                            <li>
+                                <a href='#'>
+                                    2017 Nevember <span>(3)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    2018 December <span>(7)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    2019 January<span>(2)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    2020 February <span>(1)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    2021 March <span>(3)</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-blog-widget widget-tags'>
+                <div className='inner'>
+                    <h4 className='widget-title'>Tags</h4>
+                    <div className='content'>
+                        <div className='tag-list'>
+                            <a href='#'>Language</a>
+                            <a href='#'>eLearn</a>
+                            <a href='#'>Tips</a>
+                            <a href='#'>Course</a>
+                            <a href='#'>Motivation</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BlogSidebar;
diff --git a/src/components/blog/index.jsx b/src/components/blog/index.tsx
similarity index 66%
rename from src/components/blog/index.jsx
rename to src/components/blog/index.tsx
index 7653fd9..9f658dc 100644
--- a/src/components/blog/index.jsx
+++ b/src/components/blog/index.tsx
@@ -7,15 +7,15 @@ import BlogArea from './blog-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Blog Standard" subtitle="Blog 1" />
-                <BlogArea/>
-                <AdBanner/>
+                <BreadcrumbThree title='Blog Standard' subtitle='Blog 1' />
+                <BlogArea />
+                <AdBanner />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/breadcrumb/breadcrumb-2.jsx b/src/components/breadcrumb/breadcrumb-2.jsx
deleted file mode 100644
index 8f3fa49..0000000
--- a/src/components/breadcrumb/breadcrumb-2.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const BreadcrumbTwo = ({ subtitle }) => {
-    return (
-        <div className="edu-breadcrumb-area breadcrumb-style-5">
-            <div className="container">
-                <div className="breadcrumb-inner">
-                    <ul className="edu-breadcrumb">
-                        <li className="breadcrumb-item">
-                            <Link href="/">
-                                Home
-                            </Link>
-                        </li>
-                        <li className="separator"><i className="icon-angle-right"></i></li>
-                        <li className="breadcrumb-item"><a href="#">Pages</a></li>
-                        <li className="separator"><i className="icon-angle-right"></i></li>
-                        <li className="breadcrumb-item active" aria-current="page">{subtitle}</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default BreadcrumbTwo;
\ No newline at end of file
diff --git a/src/components/breadcrumb/breadcrumb-2.tsx b/src/components/breadcrumb/breadcrumb-2.tsx
new file mode 100644
index 0000000..b4fe062
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-2.tsx
@@ -0,0 +1,32 @@
+import Link from 'next/link';
+import React from 'react';
+
+const BreadcrumbTwo = ({ subtitle }) => {
+    return (
+        <div className='edu-breadcrumb-area breadcrumb-style-5'>
+            <div className='container'>
+                <div className='breadcrumb-inner'>
+                    <ul className='edu-breadcrumb'>
+                        <li className='breadcrumb-item'>
+                            <Link href='/'>Home</Link>
+                        </li>
+                        <li className='separator'>
+                            <i className='icon-angle-right'></i>
+                        </li>
+                        <li className='breadcrumb-item'>
+                            <a href='#'>Pages</a>
+                        </li>
+                        <li className='separator'>
+                            <i className='icon-angle-right'></i>
+                        </li>
+                        <li className='breadcrumb-item active' aria-current='page'>
+                            {subtitle}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BreadcrumbTwo;
diff --git a/src/components/breadcrumb/breadcrumb-3.jsx b/src/components/breadcrumb/breadcrumb-3.jsx
deleted file mode 100644
index bb4a82d..0000000
--- a/src/components/breadcrumb/breadcrumb-3.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-
-const BreadcrumbThree = ({ title, subtitle }) => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-breadcrumb-area">
-            <div className="container">
-                <div className="breadcrumb-inner">
-                    <div className="page-title">
-                        <h1 className="title">{title}</h1>
-                    </div>
-                    <ul className="edu-breadcrumb">
-                        <li className="breadcrumb-item">
-                            <Link href="/">
-                            Home
-                            </Link>
-                        </li>
-                        <li className="separator"><i className="icon-angle-right"></i></li>
-                        <li className="breadcrumb-item"><a href="#">Pages</a></li>
-                        <li className="separator"><i className="icon-angle-right"></i></li>
-                        <li className="breadcrumb-item active" aria-current="page">{subtitle}</li>
-                    </ul>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <li className="shape-1">
-                    <span></span>
-                </li>
-                <motion.li className="shape-2 scene"
-                    animate={ {
-                        x: mouseReverse(40).x,
-                        y: mouseReverse(40).y
-                    } }    
-                >
-                    <img src="/assets/images/about/shape-13.png" alt="shape" /></motion.li>
-                <motion.li className="shape-3 scene"
-                    animate={ {
-                        x: mouseDirection(40).x,
-                        y: mouseDirection(40).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-15.png" alt="shape" /></motion.li>
-                <li className="shape-4">
-                    <span></span>
-                </li>
-                <motion.li className="shape-5 scene"
-                    animate={ {
-                        x: mouseReverse(40).x,
-                        y: mouseReverse(40).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-07.png" alt="shape" />
-                </motion.li>
-            </ul>
-        </div>
-    );
-}
-
-export default BreadcrumbThree;
\ No newline at end of file
diff --git a/src/components/breadcrumb/breadcrumb-3.tsx b/src/components/breadcrumb/breadcrumb-3.tsx
new file mode 100644
index 0000000..ec42cfd
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-3.tsx
@@ -0,0 +1,79 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+
+const BreadcrumbThree = ({ title, subtitle }) => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-breadcrumb-area'>
+            <div className='container'>
+                <div className='breadcrumb-inner'>
+                    <div className='page-title'>
+                        <h1 className='title'>{title}</h1>
+                    </div>
+                    <ul className='edu-breadcrumb'>
+                        <li className='breadcrumb-item'>
+                            <Link href='/'>Home</Link>
+                        </li>
+                        <li className='separator'>
+                            <i className='icon-angle-right'></i>
+                        </li>
+                        <li className='breadcrumb-item'>
+                            <a href='#'>Pages</a>
+                        </li>
+                        <li className='separator'>
+                            <i className='icon-angle-right'></i>
+                        </li>
+                        <li className='breadcrumb-item active' aria-current='page'>
+                            {subtitle}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <li className='shape-1'>
+                    <span></span>
+                </li>
+                <motion.li
+                    className='shape-2 scene'
+                    animate={{
+                        x: mouseReverse(40).x,
+                        y: mouseReverse(40).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-13.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    animate={{
+                        x: mouseDirection(40).x,
+                        y: mouseDirection(40).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-15.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <li className='shape-4'>
+                    <span></span>
+                </li>
+                <motion.li
+                    className='shape-5 scene'
+                    animate={{
+                        x: mouseReverse(40).x,
+                        y: mouseReverse(40).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-07.png' alt='shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default BreadcrumbThree;
diff --git a/src/components/breadcrumb/breadcrumb-4.jsx b/src/components/breadcrumb/breadcrumb-4.jsx
deleted file mode 100644
index 975f363..0000000
--- a/src/components/breadcrumb/breadcrumb-4.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-
-const BreadcrumbFour = ({title,date,time,city}) => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-breadcrumb-area breadcrumb-style-4">
-            <div className="container">
-                <div className="breadcrumb-inner">
-                    <div className="page-title">
-                        <span className="pre-title">DEVELOPER</span>
-                        <h1 className="title">{title}</h1>
-                    </div>
-                    <ul className="course-meta">
-                        <li><i className="icon-27"></i>{date}</li>
-                        <li><i className="icon-33"></i>{time}</li>
-                        <li><i className="icon-40"></i>{city}</li>
-                    </ul>
-                </div>
-            </div>
-
-            <ul className="shape-group">
-                <li className="shape-1">
-                    <span></span>
-                </li>
-                <motion.li className="shape-2 scene"
-                    animate={ {
-                        x: mouseReverse(40).x,
-                        y: mouseReverse(40).y
-                    } }    
-                >
-                    <img src="/assets/images/about/shape-13.png" alt="shape" /></motion.li>
-                <motion.li className="shape-3 scene"
-                    animate={ {
-                        x: mouseDirection(40).x,
-                        y: mouseDirection(40).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-15.png" alt="shape" /></motion.li>
-                <li className="shape-4">
-                    <span></span>
-                </li>
-                <motion.li className="shape-5 scene"
-                    animate={ {
-                        x: mouseReverse(40).x,
-                        y: mouseReverse(40).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-07.png" alt="shape" />
-                </motion.li>
-            </ul>
-        </div>
-    )
-}
-
-export default BreadcrumbFour;
\ No newline at end of file
diff --git a/src/components/breadcrumb/breadcrumb-4.tsx b/src/components/breadcrumb/breadcrumb-4.tsx
new file mode 100644
index 0000000..cc7dd54
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-4.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+
+const BreadcrumbFour = ({ title, date, time, city }) => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-breadcrumb-area breadcrumb-style-4'>
+            <div className='container'>
+                <div className='breadcrumb-inner'>
+                    <div className='page-title'>
+                        <span className='pre-title'>DEVELOPER</span>
+                        <h1 className='title'>{title}</h1>
+                    </div>
+                    <ul className='course-meta'>
+                        <li>
+                            <i className='icon-27'></i>
+                            {date}
+                        </li>
+                        <li>
+                            <i className='icon-33'></i>
+                            {time}
+                        </li>
+                        <li>
+                            <i className='icon-40'></i>
+                            {city}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <ul className='shape-group'>
+                <li className='shape-1'>
+                    <span></span>
+                </li>
+                <motion.li
+                    className='shape-2 scene'
+                    animate={{
+                        x: mouseReverse(40).x,
+                        y: mouseReverse(40).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-13.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    animate={{
+                        x: mouseDirection(40).x,
+                        y: mouseDirection(40).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-15.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <li className='shape-4'>
+                    <span></span>
+                </li>
+                <motion.li
+                    className='shape-5 scene'
+                    animate={{
+                        x: mouseReverse(40).x,
+                        y: mouseReverse(40).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-07.png' alt='shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default BreadcrumbFour;
diff --git a/src/components/breadcrumb/breadcrumb-5.jsx b/src/components/breadcrumb/breadcrumb-5.jsx
deleted file mode 100644
index a9c374d..0000000
--- a/src/components/breadcrumb/breadcrumb-5.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-
-const CourseBreadcrumb = ({ course, subtitle }) => {
-    const { title, instructor, language, rating_count } = course || {};
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-breadcrumb-area breadcrumb-style-3">
-            <div className="container">
-                <div className="breadcrumb-inner">
-                    <ul className="edu-breadcrumb">
-                        <li className="breadcrumb-item">
-                            <Link href="/">
-                                Home
-                            </Link>
-                        </li>
-                        <li className="separator"><i className="icon-angle-right"></i></li>
-                        <li className="breadcrumb-item">
-                            <Link href="/course-style-1">
-                                Courses
-                            </Link>
-                        </li>
-                        <li className="separator"><i className="icon-angle-right"></i></li>
-                        <li className="breadcrumb-item active" aria-current="page">{subtitle}</li>
-                    </ul>
-                    <div className="page-title">
-                        <h1 className="title">{title}</h1>
-                    </div>
-                    <ul className="course-meta">
-                        <li><i className="icon-58"></i>by {instructor}</li>
-                        <li><i className="icon-59"></i>{language}</li>
-                        <li className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">({rating_count} Rating)</span>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <li className="shape-1">
-                    <span></span>
-                </li>
-                <motion.li className="shape-2 scene"
-                    animate={ {
-                        x: mouseReverse(40).x,
-                        y: mouseReverse(40).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-13.png" alt="shape" />
-                </motion.li>
-                <motion.li className="shape-3 scene"
-                    animate={ {
-                        x: mouseDirection(40).x,
-                        y: mouseDirection(40).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-15.png" alt="shape" />
-                </motion.li>
-                <li className="shape-4">
-                    <span></span>
-                </li>
-                <motion.li className="shape-5 scene"
-                    animate={ {
-                        x: mouseReverse(40).x,
-                        y: mouseReverse(40).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-07.png" alt="shape" />
-                </motion.li>
-            </ul>
-        </div>
-    );
-}
-
-export default CourseBreadcrumb;
diff --git a/src/components/breadcrumb/breadcrumb-5.tsx b/src/components/breadcrumb/breadcrumb-5.tsx
new file mode 100644
index 0000000..b12d8bb
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-5.tsx
@@ -0,0 +1,99 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+
+const CourseBreadcrumb = ({ course, subtitle }) => {
+    const { title, instructor, language, rating_count } = course || {};
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-breadcrumb-area breadcrumb-style-3'>
+            <div className='container'>
+                <div className='breadcrumb-inner'>
+                    <ul className='edu-breadcrumb'>
+                        <li className='breadcrumb-item'>
+                            <Link href='/'>Home</Link>
+                        </li>
+                        <li className='separator'>
+                            <i className='icon-angle-right'></i>
+                        </li>
+                        <li className='breadcrumb-item'>
+                            <Link href='/course-style-1'>Courses</Link>
+                        </li>
+                        <li className='separator'>
+                            <i className='icon-angle-right'></i>
+                        </li>
+                        <li className='breadcrumb-item active' aria-current='page'>
+                            {subtitle}
+                        </li>
+                    </ul>
+                    <div className='page-title'>
+                        <h1 className='title'>{title}</h1>
+                    </div>
+                    <ul className='course-meta'>
+                        <li>
+                            <i className='icon-58'></i>by {instructor}
+                        </li>
+                        <li>
+                            <i className='icon-59'></i>
+                            {language}
+                        </li>
+                        <li className='course-rating'>
+                            <div className='rating'>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                            </div>
+                            <span className='rating-count'>({rating_count} Rating)</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <li className='shape-1'>
+                    <span></span>
+                </li>
+                <motion.li
+                    className='shape-2 scene'
+                    animate={{
+                        x: mouseReverse(40).x,
+                        y: mouseReverse(40).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-13.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    animate={{
+                        x: mouseDirection(40).x,
+                        y: mouseDirection(40).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-15.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <li className='shape-4'>
+                    <span></span>
+                </li>
+                <motion.li
+                    className='shape-5 scene'
+                    animate={{
+                        x: mouseReverse(40).x,
+                        y: mouseReverse(40).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-07.png' alt='shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default CourseBreadcrumb;
diff --git a/src/components/breadcrumb/breadcrumb-6.jsx b/src/components/breadcrumb/breadcrumb-6.jsx
deleted file mode 100644
index 6b1c2d4..0000000
--- a/src/components/breadcrumb/breadcrumb-6.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const BreadcrumbSix = ({ title, page }) => {
-    return (
-        <div className="edu-breadcrumb-area breadcrumb-style-2 bg-image bg-image--21">
-            <div className="container">
-                <div className="breadcrumb-inner">
-                    <div className="page-title">
-                        <h1 className="title">{title}</h1>
-                    </div>
-                    <ul className="edu-breadcrumb">
-                        <li className="breadcrumb-item">
-                            <Link href="/">
-                                Home
-                            </Link>
-                        </li>
-                        <li className="separator"><i className="icon-angle-right"></i></li>
-                        <li className="breadcrumb-item"><a href="#">Pages</a></li>
-                        <li className="separator"><i className="icon-angle-right"></i></li>
-                        <li className="breadcrumb-item active" aria-current="page">{page}</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default BreadcrumbSix;
\ No newline at end of file
diff --git a/src/components/breadcrumb/breadcrumb-6.tsx b/src/components/breadcrumb/breadcrumb-6.tsx
new file mode 100644
index 0000000..f872eed
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-6.tsx
@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import React from 'react';
+
+const BreadcrumbSix = ({ title, page }) => {
+    return (
+        <div className='edu-breadcrumb-area breadcrumb-style-2 bg-image bg-image--21'>
+            <div className='container'>
+                <div className='breadcrumb-inner'>
+                    <div className='page-title'>
+                        <h1 className='title'>{title}</h1>
+                    </div>
+                    <ul className='edu-breadcrumb'>
+                        <li className='breadcrumb-item'>
+                            <Link href='/'>Home</Link>
+                        </li>
+                        <li className='separator'>
+                            <i className='icon-angle-right'></i>
+                        </li>
+                        <li className='breadcrumb-item'>
+                            <a href='#'>Pages</a>
+                        </li>
+                        <li className='separator'>
+                            <i className='icon-angle-right'></i>
+                        </li>
+                        <li className='breadcrumb-item active' aria-current='page'>
+                            {page}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BreadcrumbSix;
diff --git a/src/components/breadcrumb/breadcrumb.jsx b/src/components/breadcrumb/breadcrumb.jsx
deleted file mode 100644
index c022320..0000000
--- a/src/components/breadcrumb/breadcrumb.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const Breadcrumb = ({ title, current_page }) => {
-    return (
-        <div className="edu-breadcrumb-area breadcrumb-style-2 bg-image bg-image--19">
-            <div className="container">
-                <div className="breadcrumb-inner">
-                    <div className="page-title">
-                        <h1 className="title">{title}</h1>
-                    </div>
-                    <ul className="edu-breadcrumb">
-                        <li className="breadcrumb-item">
-                            <Link href="/">
-                                Home
-                            </Link>
-                        </li>
-                        <li className="separator"><i className="icon-angle-right"></i></li>
-                        <li className="breadcrumb-item"><a href="#">Pages</a></li>
-                        <li className="separator"><i className="icon-angle-right"></i></li>
-                        <li className="breadcrumb-item active" aria-current="page">{current_page}</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default Breadcrumb;
\ No newline at end of file
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
new file mode 100644
index 0000000..ff7469f
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import React from 'react';
+
+const Breadcrumb = ({ title, current_page }) => {
+    return (
+        <div className='edu-breadcrumb-area breadcrumb-style-2 bg-image bg-image--19'>
+            <div className='container'>
+                <div className='breadcrumb-inner'>
+                    <div className='page-title'>
+                        <h1 className='title'>{title}</h1>
+                    </div>
+                    <ul className='edu-breadcrumb'>
+                        <li className='breadcrumb-item'>
+                            <Link href='/'>Home</Link>
+                        </li>
+                        <li className='separator'>
+                            <i className='icon-angle-right'></i>
+                        </li>
+                        <li className='breadcrumb-item'>
+                            <a href='#'>Pages</a>
+                        </li>
+                        <li className='separator'>
+                            <i className='icon-angle-right'></i>
+                        </li>
+                        <li className='breadcrumb-item active' aria-current='page'>
+                            {current_page}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Breadcrumb;
diff --git a/src/components/cart/cart-area.jsx b/src/components/cart/cart-area.jsx
deleted file mode 100644
index 0b6c16f..0000000
--- a/src/components/cart/cart-area.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { clear_cart } from '../../redux/features/cart-slice';
-import CartItem from './cart-item';
-import OrderSummery from './order-summery';
-
-const CartArea = () => {
-    const { cartCourses } = useSelector(state => state.cart);
-    const dispatch = useDispatch();
-    return (
-        <section className="cart-page-area edu-section-gap">
-            {cartCourses.length === 0 && 
-                <div className="container py-5">
-                    <h3>No Cart Items</h3>
-                    <div className="update-btn">
-                        <Link href="/course-style-1" className="edu-btn btn-border btn-medium disabled">
-                            
-                                Return to Courses
-                            
-                        </Link>
-                    </div>
-                </div>
-            }
-            {cartCourses.length > 0 && 
-                <div className="container">
-                    <div className="table-responsive">
-                        <table className="table cart-table">
-                            <thead>
-                                <tr>
-                                    <th scope="col" className="product-remove"></th>
-                                    <th scope="col" className="product-thumbnail"></th>
-                                    <th scope="col" className="product-title">Product Name</th>
-                                    <th scope="col" className="product-price">Price</th>
-                                    <th scope="col" className="product-quantity">Quantity</th>
-                                    <th scope="col" className="product-subtotal">Subtotal</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {cartCourses.map((item, i) => <CartItem key={i} item={item} />)}
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <div className="cart-update-btn-area">
-                        <div className="input-group product-cupon">
-                            <input placeholder="Coupon code..." type="text" />
-                            <button type="submit" className="submit-btn"><i className="icon-4"></i></button>
-                        </div>
-                        <div className="update-btn">
-                            <a style={{ cursor: 'pointer' }} onClick={() => dispatch(clear_cart())} className="edu-btn btn-border btn-medium disabled">Clear Cart
-                                <i className="icon-4"></i>
-                            </a>
-                        </div>
-                    </div>
-
-                    <div className="row">
-                        <div className="col-xl-5 col-lg-7 offset-xl-7 offset-lg-5">
-                            <OrderSummery/>
-                        </div>
-                    </div>
-                </div>
-            }
-        </section>
-    );
-}
-
-export default CartArea;
\ No newline at end of file
diff --git a/src/components/cart/cart-area.tsx b/src/components/cart/cart-area.tsx
new file mode 100644
index 0000000..ed3db53
--- /dev/null
+++ b/src/components/cart/cart-area.tsx
@@ -0,0 +1,87 @@
+import Link from 'next/link';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { clear_cart } from '../../redux/features/cart-slice';
+import CartItem from './cart-item';
+import OrderSummery from './order-summery';
+import { AppDispatch, AppState } from '../../redux/store';
+
+const CartArea = () => {
+    const { cartCourses } = useSelector((state: AppState) => state.cart);
+    const dispatch: AppDispatch = useDispatch();
+    return (
+        <section className='cart-page-area edu-section-gap'>
+            {cartCourses.length === 0 && (
+                <div className='container py-5'>
+                    <h3>No Cart Items</h3>
+                    <div className='update-btn'>
+                        <Link
+                            href='/course-style-1'
+                            className='edu-btn btn-border btn-medium disabled'
+                        >
+                            Return to Courses
+                        </Link>
+                    </div>
+                </div>
+            )}
+            {cartCourses.length > 0 && (
+                <div className='container'>
+                    <div className='table-responsive'>
+                        <table className='table cart-table'>
+                            <thead>
+                                <tr>
+                                    <th scope='col' className='product-remove'></th>
+                                    <th scope='col' className='product-thumbnail'></th>
+                                    <th scope='col' className='product-title'>
+                                        Product Name
+                                    </th>
+                                    <th scope='col' className='product-price'>
+                                        Price
+                                    </th>
+                                    <th scope='col' className='product-quantity'>
+                                        Quantity
+                                    </th>
+                                    <th scope='col' className='product-subtotal'>
+                                        Subtotal
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {cartCourses.map((item, i) => (
+                                    <CartItem key={i} item={item} />
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <div className='cart-update-btn-area'>
+                        <div className='input-group product-cupon'>
+                            <input placeholder='Coupon code...' type='text' />
+                            <button type='submit' className='submit-btn'>
+                                <i className='icon-4'></i>
+                            </button>
+                        </div>
+                        <div className='update-btn'>
+                            <a
+                                style={{ cursor: 'pointer' }}
+                                onClick={() => dispatch(clear_cart())}
+                                className='edu-btn btn-border btn-medium disabled'
+                            >
+                                Clear Cart
+                                <i className='icon-4'></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <div className='row'>
+                        <div className='col-xl-5 col-lg-7 offset-xl-7 offset-lg-5'>
+                            <OrderSummery />
+                        </div>
+                    </div>
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default CartArea;
diff --git a/src/components/cart/cart-item.jsx b/src/components/cart/cart-item.jsx
deleted file mode 100644
index 62b51b2..0000000
--- a/src/components/cart/cart-item.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { useDispatch } from 'react-redux';
-import { cart_course, decrease_quantity, remove_cart_course } from '../../redux/features/cart-slice';
-
-const CartItem = ({ item }) => {
-    const dispatch = useDispatch();
-    const handleChange = (e) => {}
-    return (
-        <tr>
-            <td className="product-remove" onClick={() => dispatch(remove_cart_course(item))}>
-                <a style={{ cursor: 'pointer' }} className="remove-wishlist"><i className="icon-73"></i></a>
-            </td>
-
-            <td className="product-thumbnail">
-                <Link href={`/course-details/${item.id}`}>
-
-                    <img src={item.img} alt="Books" />
-
-                </Link>
-            </td>
-
-            <td className="product-title">
-                <Link href={`/course-details/${item.id}`}>
-                    {item.title}
-                </Link>
-            </td>
-
-            <td className="product-price" data-title="Price">
-                <span className="currency-symbol">$</span>{item.price}
-            </td>
-
-            <td className="product-quantity" data-title="Qty">
-                <div className="pro-qty">
-                    <span className="dec qtybtn" onClick={() => dispatch(decrease_quantity(item))}>-</span>
-                    <input type="text" onChange={handleChange} value={item.quantity} />
-                    <span className="inc qtybtn" onClick={() => dispatch(cart_course(item))}>+</span>
-                </div>
-            </td>
-            
-            <td className="product-subtotal" data-title="Subtotal">
-                <span className="currency-symbol">$</span>{(item.quantity * item.price).toFixed(2)}
-            </td>
-        </tr>
-    );
-}
-
-export default CartItem;
\ No newline at end of file
diff --git a/src/components/cart/cart-item.tsx b/src/components/cart/cart-item.tsx
new file mode 100644
index 0000000..dff7356
--- /dev/null
+++ b/src/components/cart/cart-item.tsx
@@ -0,0 +1,67 @@
+import Link from 'next/link';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import {
+    cart_course,
+    decrease_quantity,
+    remove_cart_course,
+} from '../../redux/features/cart-slice';
+
+const CartItem = ({ item }) => {
+    const dispatch = useDispatch();
+    const handleChange = e => {};
+    return (
+        <tr>
+            <td
+                className='product-remove'
+                onClick={() => dispatch(remove_cart_course(item))}
+            >
+                <a style={{ cursor: 'pointer' }} className='remove-wishlist'>
+                    <i className='icon-73'></i>
+                </a>
+            </td>
+
+            <td className='product-thumbnail'>
+                <Link href={`/course-details/${item.id}`}>
+                    <picture>
+                        <img src={item.img} alt='Books' />
+                    </picture>
+                </Link>
+            </td>
+
+            <td className='product-title'>
+                <Link href={`/course-details/${item.id}`}>{item.title}</Link>
+            </td>
+
+            <td className='product-price' data-title='Price'>
+                <span className='currency-symbol'>$</span>
+                {item.price}
+            </td>
+
+            <td className='product-quantity' data-title='Qty'>
+                <div className='pro-qty'>
+                    <span
+                        className='dec qtybtn'
+                        onClick={() => dispatch(decrease_quantity(item))}
+                    >
+                        -
+                    </span>
+                    <input type='text' onChange={handleChange} value={item.quantity} />
+                    <span
+                        className='inc qtybtn'
+                        onClick={() => dispatch(cart_course(item))}
+                    >
+                        +
+                    </span>
+                </div>
+            </td>
+
+            <td className='product-subtotal' data-title='Subtotal'>
+                <span className='currency-symbol'>$</span>
+                {(item.quantity * item.price).toFixed(2)}
+            </td>
+        </tr>
+    );
+};
+
+export default CartItem;
diff --git a/src/components/cart/index.jsx b/src/components/cart/index.tsx
similarity index 66%
rename from src/components/cart/index.jsx
rename to src/components/cart/index.tsx
index a5a2e65..6aa6bea 100644
--- a/src/components/cart/index.jsx
+++ b/src/components/cart/index.tsx
@@ -6,14 +6,14 @@ import CartArea from './cart-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Cart Page" subtitle="Cart Page" />
-                <CartArea/>
+                <BreadcrumbThree title='Cart Page' subtitle='Cart Page' />
+                <CartArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/cart/order-summery.jsx b/src/components/cart/order-summery.jsx
deleted file mode 100644
index e621287..0000000
--- a/src/components/cart/order-summery.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import useCartInfo from '../../hooks/use-cart-info';
-
-const OrderSummery = () => {
-  	const { total } = useCartInfo();
-  	return (
-        <div className="order-summery">
-			<h4 className="title">Cart Totals</h4>
-			<table className="table summery-table">
-				<tbody>
-					<tr className="order-subtotal">
-						<td>Subtotal</td>
-						<td>${(total).toFixed(2)}</td>
-					</tr>
-					<tr className="order-total">
-						<td>Order Total</td>
-						<td>${(total).toFixed(2)}</td>
-					</tr>
-				</tbody>
-			</table>
-			<Link href="/checkout" className="edu-btn btn-medium checkout-btn">
-                Process to Checkout<i className="icon-4"></i>
-            </Link>
-		</div>
-    );
-}
-
-export default OrderSummery;
\ No newline at end of file
diff --git a/src/components/cart/order-summery.tsx b/src/components/cart/order-summery.tsx
new file mode 100644
index 0000000..79fb1bc
--- /dev/null
+++ b/src/components/cart/order-summery.tsx
@@ -0,0 +1,29 @@
+import Link from 'next/link';
+import React from 'react';
+import useCartInfo from '../../hooks/use-cart-info';
+
+const OrderSummery = () => {
+    const { total } = useCartInfo();
+    return (
+        <div className='order-summery'>
+            <h4 className='title'>Cart Totals</h4>
+            <table className='table summery-table'>
+                <tbody>
+                    <tr className='order-subtotal'>
+                        <td>Subtotal</td>
+                        <td>${total.toFixed(2)}</td>
+                    </tr>
+                    <tr className='order-total'>
+                        <td>Order Total</td>
+                        <td>${total.toFixed(2)}</td>
+                    </tr>
+                </tbody>
+            </table>
+            <Link href='/checkout' className='edu-btn btn-medium checkout-btn'>
+                Process to Checkout<i className='icon-4'></i>
+            </Link>
+        </div>
+    );
+};
+
+export default OrderSummery;
diff --git a/src/components/checkout/checkout-area.jsx b/src/components/checkout/checkout-area.jsx
deleted file mode 100644
index c502329..0000000
--- a/src/components/checkout/checkout-area.jsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import OrderPayment from './order-payment';
-import OrderSummery from './order-summery';
-
-const countries = [ 
-    'Select Option', 
-    'Australia', 
-    'England', 
-    'New Zealand', 
-    'Switzerland', 
-    'United Kindom (UK)',
-    'United States (USA)'
-];
-
-const CheckoutArea = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (
-        <section className="checkout-page-area section-gap-equal">
-            <div className="container">
-                <form>
-                    <div className="checkout-notice">
-                        <div className="coupn-box">
-                            <h6 className="toggle-bar"> Have a coupon?
-                                <a style={{cursor:'pointer'}} onClick={() => setIsOpen(!isOpen)} className="toggle-btn">
-                                    Click here to enter your code
-                                </a>
-                            </h6>
-                            {isOpen && 
-                                <div className="toggle-open">
-                                    <p>If you have a coupon code, please apply it below.</p>
-                                    <div className="input-group">
-                                        <input placeholder="Enter coupon code" type="text" />
-                                        <div className="apply-btn">
-                                            <button type="submit" className="edu-btn btn-medium">Apply</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            }
-                        </div>
-                    </div>
-
-                    <div className="row row--25">
-                        <div className="col-lg-6">
-                            <div className="checkout-billing">
-                                <h3 className="title">Billing Details</h3>
-                                <div className="row g-lg-5">
-                                    <div className="col-lg-6">
-                                        <div className="form-group">
-                                            <label>First Name*</label>
-                                            <input type="text" id="first-name" />
-                                        </div>
-                                    </div>
-
-                                    <div className="col-lg-6">
-                                        <div className="form-group">
-                                            <label>Last Name*</label>
-                                            <input type="text" id="last-name" />
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="form-group">
-                                    <label>Company Name</label>
-                                    <input type="text" id="company-name" />
-                                </div>
-
-                                <div className="form-group">
-                                    <label>Email Address*</label>
-                                    <input type="email" id="email" />
-                                </div>
-
-                                <div className="row g-lg-5">
-                                    <div className="col-lg-6">
-                                        <div className="form-group">
-                                            <label>Phone*</label>
-                                            <input type="tel" id="phone" />
-                                        </div>
-                                    </div>
-
-                                    <div className="col-lg-6">
-                                        <div className="form-group">
-                                            <label>Country*</label>
-                                            <select id="country">
-                                                {countries.map((country, i) => <option key={i}>{country}</option>)}
-                                            </select>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="form-group">
-                                    <label>Address*</label>
-                                    <input type="text" id="address1" />
-                                    <input type="text" id="address2" />
-                                </div>
-
-                                <div className="form-group">
-                                    <label>Town/ City*</label>
-                                    <input type="text" id="town" />
-                                </div>
-
-                                <div className="row g-lg-5">
-                                    <div className="col-lg-6">
-                                        <div className="form-group">
-                                            <label>State*</label>
-                                            <select id="state">
-                                                {countries.map((country, i) => <option key={i}>{country}</option>)}
-                                            </select>
-                                        </div>
-                                    </div>
-
-                                    <div className="col-lg-6">
-                                        <div className="form-group">
-                                            <label>Zip Code*</label>
-                                            <input type="tel" id="phone" />
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="form-group">
-                                    <div className="edu-form-check">
-                                        <input type="checkbox" id="crt-accnt" className="w-25" />
-                                        <label htmlFor="crt-accnt">Create an Accoutn?</label>
-                                    </div>
-                                </div>
-
-                                <div className="form-group mt--50 mb-0">
-                                    <label>Order Notes</label>
-                                    <textarea id="notes" rows="4" placeholder="Notes about your order, e.g. speacial notes for delivery."></textarea>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div className="col-lg-6">
-                            <OrderSummery/>
-                            <OrderPayment/>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </section>
-    )
-}
-
-export default CheckoutArea;
\ No newline at end of file
diff --git a/src/components/checkout/checkout-area.tsx b/src/components/checkout/checkout-area.tsx
new file mode 100644
index 0000000..5d8bd1f
--- /dev/null
+++ b/src/components/checkout/checkout-area.tsx
@@ -0,0 +1,175 @@
+import React from 'react';
+import { useState } from 'react';
+import OrderPayment from './order-payment';
+import OrderSummery from './order-summery';
+
+const countries = [
+    'Select Option',
+    'Australia',
+    'England',
+    'New Zealand',
+    'Switzerland',
+    'United Kindom (UK)',
+    'United States (USA)',
+];
+
+const CheckoutArea = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+        <section className='checkout-page-area section-gap-equal'>
+            <div className='container'>
+                <form>
+                    <div className='checkout-notice'>
+                        <div className='coupn-box'>
+                            <h6 className='toggle-bar'>
+                                {' '}
+                                Have a coupon?
+                                <a
+                                    style={{ cursor: 'pointer' }}
+                                    onClick={() => setIsOpen(!isOpen)}
+                                    className='toggle-btn'
+                                >
+                                    Click here to enter your code
+                                </a>
+                            </h6>
+                            {isOpen && (
+                                <div className='toggle-open'>
+                                    <p>
+                                        If you have a coupon code, please apply it below.
+                                    </p>
+                                    <div className='input-group'>
+                                        <input
+                                            placeholder='Enter coupon code'
+                                            type='text'
+                                        />
+                                        <div className='apply-btn'>
+                                            <button
+                                                type='submit'
+                                                className='edu-btn btn-medium'
+                                            >
+                                                Apply
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    <div className='row row--25'>
+                        <div className='col-lg-6'>
+                            <div className='checkout-billing'>
+                                <h3 className='title'>Billing Details</h3>
+                                <div className='row g-lg-5'>
+                                    <div className='col-lg-6'>
+                                        <div className='form-group'>
+                                            <label>First Name*</label>
+                                            <input type='text' id='first-name' />
+                                        </div>
+                                    </div>
+
+                                    <div className='col-lg-6'>
+                                        <div className='form-group'>
+                                            <label>Last Name*</label>
+                                            <input type='text' id='last-name' />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className='form-group'>
+                                    <label>Company Name</label>
+                                    <input type='text' id='company-name' />
+                                </div>
+
+                                <div className='form-group'>
+                                    <label>Email Address*</label>
+                                    <input type='email' id='email' />
+                                </div>
+
+                                <div className='row g-lg-5'>
+                                    <div className='col-lg-6'>
+                                        <div className='form-group'>
+                                            <label>Phone*</label>
+                                            <input type='tel' id='phone' />
+                                        </div>
+                                    </div>
+
+                                    <div className='col-lg-6'>
+                                        <div className='form-group'>
+                                            <label>Country*</label>
+                                            <select id='country'>
+                                                {countries.map((country, i) => (
+                                                    <option key={i}>{country}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className='form-group'>
+                                    <label>Address*</label>
+                                    <input type='text' id='address1' />
+                                    <input type='text' id='address2' />
+                                </div>
+
+                                <div className='form-group'>
+                                    <label>Town/ City*</label>
+                                    <input type='text' id='town' />
+                                </div>
+
+                                <div className='row g-lg-5'>
+                                    <div className='col-lg-6'>
+                                        <div className='form-group'>
+                                            <label>State*</label>
+                                            <select id='state'>
+                                                {countries.map((country, i) => (
+                                                    <option key={i}>{country}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div className='col-lg-6'>
+                                        <div className='form-group'>
+                                            <label>Zip Code*</label>
+                                            <input type='tel' id='phone' />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className='form-group'>
+                                    <div className='edu-form-check'>
+                                        <input
+                                            type='checkbox'
+                                            id='crt-accnt'
+                                            className='w-25'
+                                        />
+                                        <label htmlFor='crt-accnt'>
+                                            Create an Accoutn?
+                                        </label>
+                                    </div>
+                                </div>
+
+                                <div className='form-group mt--50 mb-0'>
+                                    <label>Order Notes</label>
+                                    <textarea
+                                        id='notes'
+                                        rows={4}
+                                        placeholder='Notes about your order, e.g. speacial notes for delivery.'
+                                    ></textarea>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='col-lg-6'>
+                            <OrderSummery />
+                            <OrderPayment />
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </section>
+    );
+};
+
+export default CheckoutArea;
diff --git a/src/components/checkout/index.jsx b/src/components/checkout/index.tsx
similarity index 66%
rename from src/components/checkout/index.jsx
rename to src/components/checkout/index.tsx
index ea0f39d..1b91b4a 100644
--- a/src/components/checkout/index.jsx
+++ b/src/components/checkout/index.tsx
@@ -6,14 +6,14 @@ import CheckoutArea from './checkout-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Checkout Page" subtitle="Checkout" />
-                <CheckoutArea/>
+                <BreadcrumbThree title='Checkout Page' subtitle='Checkout' />
+                <CheckoutArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/checkout/order-payment.jsx b/src/components/checkout/order-payment.jsx
deleted file mode 100644
index eedb5d6..0000000
--- a/src/components/checkout/order-payment.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-
-const OrderPayment = () => {
-    return (
-        <div className="order-payment">
-            <h4 className="title">Payment</h4>
-            <div className="payment-method">
-                <div className="form-group">
-                    <div className="edu-form-check">
-                        <input type="radio" id="pay-bank" name="payment" />
-                        <label htmlFor="pay-bank">Direct Bank Transfer</label>
-                    </div>
-                    <p>Please send a check to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>
-                </div>
-
-                <div className="form-group">
-                    <div className="edu-form-check">
-                        <input type="radio" id="pay-pal" name="payment" />
-                        <label htmlFor="pay-pal">PayPal</label>
-                        <a href="#">What is Paypal?</a>
-                    </div>
-                </div>
-            </div>
-            
-            <a href="#" className="edu-btn order-place">Place Your order <i className="icon-4"></i></a>
-        </div>
-    )
-}
-
-export default OrderPayment;
\ No newline at end of file
diff --git a/src/components/checkout/order-payment.tsx b/src/components/checkout/order-payment.tsx
new file mode 100644
index 0000000..da46d58
--- /dev/null
+++ b/src/components/checkout/order-payment.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const OrderPayment = () => {
+    return (
+        <div className='order-payment'>
+            <h4 className='title'>Payment</h4>
+            <div className='payment-method'>
+                <div className='form-group'>
+                    <div className='edu-form-check'>
+                        <input type='radio' id='pay-bank' name='payment' />
+                        <label htmlFor='pay-bank'>Direct Bank Transfer</label>
+                    </div>
+                    <p>
+                        Please send a check to Store Name, Store Street, Store Town, Store
+                        State / County, Store Postcode.
+                    </p>
+                </div>
+
+                <div className='form-group'>
+                    <div className='edu-form-check'>
+                        <input type='radio' id='pay-pal' name='payment' />
+                        <label htmlFor='pay-pal'>PayPal</label>
+                        <a href='#'>What is Paypal?</a>
+                    </div>
+                </div>
+            </div>
+
+            <a href='#' className='edu-btn order-place'>
+                Place Your order <i className='icon-4'></i>
+            </a>
+        </div>
+    );
+};
+
+export default OrderPayment;
diff --git a/src/components/checkout/order-summery.jsx b/src/components/checkout/order-summery.jsx
deleted file mode 100644
index 859c92f..0000000
--- a/src/components/checkout/order-summery.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import useCartInfo from '../../hooks/use-cart-info';
-
-const OrderSummery = () => {
-    const {cartCourses} = useSelector(state => state.cart);
-    const {total} = useCartInfo();
-    return (
-        <div className="order-summery checkout-summery">
-            <div className="summery-table-wrap">
-                <h4 className="title">Your Orders</h4>
-                {cartCourses.length === 0 && 
-                    <div className='mt-3'>
-                        <h4>No cart items</h4>
-                    </div>
-                }
-
-                {cartCourses.length > 0 &&
-                    <table className="table summery-table">
-                        <tbody>
-                            {cartCourses.map((item,i) => (
-                                <tr key={i}>
-                                    <td>{item.title.substring(0,20)}... <span className="quantity">x {item.quantity}</span></td>
-                                    <td>${item.price}</td>
-                                </tr>
-                            ))}
-                            <tr className="order-total">
-                                <td>Order Total</td>
-                                <td>${total}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                }
-            </div>
-        </div>
-    )
-}
-
-export default OrderSummery;
\ No newline at end of file
diff --git a/src/components/checkout/order-summery.tsx b/src/components/checkout/order-summery.tsx
new file mode 100644
index 0000000..044226a
--- /dev/null
+++ b/src/components/checkout/order-summery.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import useCartInfo from '../../hooks/use-cart-info';
+import { AppState } from '../../redux/store';
+
+const OrderSummery = () => {
+    const { cartCourses } = useSelector((state: AppState) => state.cart);
+    const { total } = useCartInfo();
+    return (
+        <div className='order-summery checkout-summery'>
+            <div className='summery-table-wrap'>
+                <h4 className='title'>Your Orders</h4>
+                {cartCourses.length === 0 && (
+                    <div className='mt-3'>
+                        <h4>No cart items</h4>
+                    </div>
+                )}
+
+                {cartCourses.length > 0 && (
+                    <table className='table summery-table'>
+                        <tbody>
+                            {cartCourses.map((item, i) => (
+                                <tr key={i}>
+                                    <td>
+                                        {item.title.substring(0, 20)}...{' '}
+                                        <span className='quantity'>
+                                            x {item.quantity}
+                                        </span>
+                                    </td>
+                                    <td>${item.price}</td>
+                                </tr>
+                            ))}
+                            <tr className='order-total'>
+                                <td>Order Total</td>
+                                <td>${total}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default OrderSummery;
diff --git a/src/components/common/counter.jsx b/src/components/common/counter.jsx
deleted file mode 100644
index a8603fa..0000000
--- a/src/components/common/counter.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useState } from 'react';
-import { InView } from 'react-intersection-observer';
-import CountUp from 'react-countup';
-
-const Counter = ( { number, text, add_style=true, decimal } ) => {
-    const [focus, setFocus] = useState( false );
-    const visibleChangeHandler = ( isVisible ) => {
-        if ( isVisible ) {
-            if ( ! focus ) {
-                setFocus( true );
-            }
-        }
-    }
-    
-    return (
-        <>
-            <CountUp 
-                start={ focus ? 0 : null } 
-                end={ number } 
-                duration={ 3 } 
-                decimals={ decimal ? decimal : null }
-            >
-                { ( { countUpRef } ) => (
-                    <div className={`d-flex ${ add_style ? 'align-items-center justify-content-center' : '' }`}>
-                        <span ref={countUpRef} />
-                        <InView
-                            as='span'
-                            onChange={ ( inView ) =>
-                                visibleChangeHandler( inView )
-                            }
-                        >
-                            { text && <span>{ text }</span>}
-                        </InView>
-                    </div>
-                ) }
-            </CountUp>
-        </>
-    )
-}
-
-export default Counter;
\ No newline at end of file
diff --git a/src/components/common/counter.tsx b/src/components/common/counter.tsx
new file mode 100644
index 0000000..b6120f6
--- /dev/null
+++ b/src/components/common/counter.tsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { InView } from 'react-intersection-observer';
+import CountUp from 'react-countup';
+
+type CounterProps = {
+    number: number;
+    text: string;
+    add_style?: boolean;
+    decimal?: number;
+};
+
+const Counter = ({ number, text, add_style = true, decimal }: CounterProps) => {
+    const [focus, setFocus] = useState(false);
+    const visibleChangeHandler = isVisible => {
+        if (isVisible) {
+            if (!focus) {
+                setFocus(true);
+            }
+        }
+    };
+
+    return (
+        <>
+            <CountUp
+                start={focus ? 0 : null}
+                end={number}
+                duration={3}
+                decimals={decimal ? decimal : null}
+            >
+                {({ countUpRef }) => (
+                    <div
+                        className={`d-flex ${
+                            add_style ? 'align-items-center justify-content-center' : ''
+                        }`}
+                    >
+                        <span ref={countUpRef} />
+                        <InView
+                            as='span'
+                            onChange={inView => visibleChangeHandler(inView)}
+                        >
+                            {text && <span>{text}</span>}
+                        </InView>
+                    </div>
+                )}
+            </CountUp>
+        </>
+    );
+};
+
+export default Counter;
diff --git a/src/components/common/popup-modal/image-lightbox.jsx b/src/components/common/popup-modal/image-lightbox.tsx
similarity index 52%
rename from src/components/common/popup-modal/image-lightbox.jsx
rename to src/components/common/popup-modal/image-lightbox.tsx
index f5ac9bc..365292e 100644
--- a/src/components/common/popup-modal/image-lightbox.jsx
+++ b/src/components/common/popup-modal/image-lightbox.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Lightbox from 'react-image-lightbox';
 
-const ImageLightBox = ({images,open,setOpen,photoIndex,setPhotoIndex}) => {
+const ImageLightBox = ({ images, open, setOpen, photoIndex, setPhotoIndex }) => {
     return (
         <>
             {open && (
@@ -10,12 +10,16 @@ const ImageLightBox = ({images,open,setOpen,photoIndex,setPhotoIndex}) => {
                     nextSrc={images[(photoIndex + 1) % images.length]}
                     prevSrc={images[(photoIndex + images.length - 1) % images.length]}
                     onCloseRequest={() => setOpen(false)}
-                    onMovePrevRequest={() => setPhotoIndex((photoIndex + images.length - 1) % images.length)}
-                    onMoveNextRequest={() => setPhotoIndex((photoIndex + 1) % images.length)}
+                    onMovePrevRequest={() =>
+                        setPhotoIndex((photoIndex + images.length - 1) % images.length)
+                    }
+                    onMoveNextRequest={() =>
+                        setPhotoIndex((photoIndex + 1) % images.length)
+                    }
                 />
             )}
         </>
-    )
-}
+    );
+};
 
-export default ImageLightBox;
\ No newline at end of file
+export default ImageLightBox;
diff --git a/src/components/common/popup-modal/search-popup.jsx b/src/components/common/popup-modal/search-popup.jsx
deleted file mode 100644
index af12691..0000000
--- a/src/components/common/popup-modal/search-popup.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-
-const SearchPopup = ({isSearchOpen,setIsSearchOpen}) => {
-    const handleSubmit = e => {
-      e.preventDefault();
-    }
-    return (
-        <div className={`edu-search-popup ${isSearchOpen ? 'open' : ''}`}>
-            <div className="content-wrap">
-                <div className="site-logo">
-                    <img className="logo-light" src='/assets/images/logo/logo-dark.png' alt="logo" />
-                    <img className="logo-dark" src='/assets/images/logo/logo-white.png' alt="logo" />
-                </div>
-                <div className="close-button" onClick={() => setIsSearchOpen(false)}>
-                    <button className="close-trigger"><i className="icon-73"></i></button>
-                </div>
-                <div className="inner">
-                    <form className="search-form" onSubmit={handleSubmit}>
-                        <input type="text" className="edublink-search-popup-field" placeholder="Search Here..." />
-                        <button className="submit-button"><i className="icon-2"></i></button>
-                    </form>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default SearchPopup;
\ No newline at end of file
diff --git a/src/components/common/popup-modal/search-popup.tsx b/src/components/common/popup-modal/search-popup.tsx
new file mode 100644
index 0000000..0e699d0
--- /dev/null
+++ b/src/components/common/popup-modal/search-popup.tsx
@@ -0,0 +1,46 @@
+const SearchPopup = ({ isSearchOpen, setIsSearchOpen }) => {
+    const handleSubmit = e => {
+        e.preventDefault();
+    };
+    return (
+        <div className={`edu-search-popup ${isSearchOpen ? 'open' : ''}`}>
+            <div className='content-wrap'>
+                <div className='site-logo'>
+                    <picture>
+                        <img
+                            className='logo-light'
+                            src='/assets/images/logo/logo-dark.png'
+                            alt='logo'
+                        />
+                    </picture>
+                    <picture>
+                        <img
+                            className='logo-dark'
+                            src='/assets/images/logo/logo-white.png'
+                            alt='logo'
+                        />
+                    </picture>
+                </div>
+                <div className='close-button' onClick={() => setIsSearchOpen(false)}>
+                    <button className='close-trigger'>
+                        <i className='icon-73'></i>
+                    </button>
+                </div>
+                <div className='inner'>
+                    <form className='search-form' onSubmit={handleSubmit}>
+                        <input
+                            type='text'
+                            className='edublink-search-popup-field'
+                            placeholder='Search Here...'
+                        />
+                        <button className='submit-button'>
+                            <i className='icon-2'></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SearchPopup;
diff --git a/src/components/common/popup-modal/video-modal.jsx b/src/components/common/popup-modal/video-modal.jsx
deleted file mode 100644
index 16bf685..0000000
--- a/src/components/common/popup-modal/video-modal.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import ModalVideo from 'react-modal-video';
-
-const VideoModal = ({isVideoOpen,setIsVideoOpen,videoId = "9Y7ma241N8k"}) => {
-    return (
-        <ModalVideo 
-            channel='youtube' 
-            autoplay isOpen={isVideoOpen} 
-            videoId={videoId} 
-            onClose={() => setIsVideoOpen(false)} 
-        />
-    )
-}
-
-export default VideoModal;
\ No newline at end of file
diff --git a/src/components/common/popup-modal/video-modal.tsx b/src/components/common/popup-modal/video-modal.tsx
new file mode 100644
index 0000000..bbfb6ca
--- /dev/null
+++ b/src/components/common/popup-modal/video-modal.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ModalVideo from 'react-modal-video';
+
+const VideoModal = ({ isVideoOpen, setIsVideoOpen, videoId = '9Y7ma241N8k' }) => {
+    return (
+        <ModalVideo
+            channel='youtube'
+            autoplay
+            isOpen={isVideoOpen}
+            videoId={videoId}
+            onClose={() => setIsVideoOpen(false)}
+        />
+    );
+};
+
+export default VideoModal;
diff --git a/src/components/common/preloader.jsx b/src/components/common/preloader.jsx
deleted file mode 100644
index ac8b570..0000000
--- a/src/components/common/preloader.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-const Preloader = () => {
-    return (
-        <div id="edublink-preloader">
-            <div className="loading-spinner">
-                <div className="preloader-spin-1"></div>
-                <div className="preloader-spin-2"></div>
-            </div>
-        </div>
-    )
-}
-
-export default Preloader;
\ No newline at end of file
diff --git a/src/components/common/preloader.tsx b/src/components/common/preloader.tsx
new file mode 100644
index 0000000..189b758
--- /dev/null
+++ b/src/components/common/preloader.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Preloader = () => {
+    return (
+        <div id='edublink-preloader'>
+            <div className='loading-spinner'>
+                <div className='preloader-spin-1'></div>
+                <div className='preloader-spin-2'></div>
+            </div>
+        </div>
+    );
+};
+
+export default Preloader;
diff --git a/src/components/common/sidebar/blog-sidebar-1.jsx b/src/components/common/sidebar/blog-sidebar-1.jsx
deleted file mode 100644
index 649577f..0000000
--- a/src/components/common/sidebar/blog-sidebar-1.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-
-const SidebarOne = () => {
-    return (
-        <div className="edu-blog-sidebar">
-            <div className="edu-blog-widget widget-search">
-                <div className="inner">
-                    <h4 className="widget-title">Search</h4>
-                    <div className="content">
-                        <form className="blog-search" action="#">
-                            <button className="search-button"><i className="icon-2"></i></button>
-                            <input type="text" placeholder="Search" />
-                        </form>
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-blog-widget widget-tags">
-                <div className="inner">
-                    <h4 className="widget-title">Tags</h4>
-                    <div className="content">
-                        <div className="tag-list">
-                            <a href="#">Language</a>
-                            <a href="#">eLearn</a>
-                            <a href="#">Tips</a>
-                            <a href="#">Course</a>
-                            <a href="#">Motivation</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-blog-widget widget-categories">
-                <div className="inner">
-                    <h4 className="widget-title">Categories</h4>
-                    <div className="content">
-                        <ul className="category-list">
-                            <li><a href="#">Business Studies <span>(3)</span></a></li>
-                            <li><a href="#">Computer Engineering <span>(7)</span></a></li>
-                            <li><a href="#">Medical &amp; Health<span>(2)</span></a></li>
-                            <li><a href="#">Software <span>(1)</span></a></li>
-                            <li><a href="#">Web Development <span>(3)</span></a></li>
-                            <li><a href="#">Uncategorized <span>(9)</span></a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-blog-widget widget-action">
-                <div className="inner">
-                    <h4 className="title">Get Online Courses From <span>EduBlink</span></h4>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                    <p>Nostrud exer ciation laboris aliqup</p>
-                    <a href="#" className="edu-btn btn-medium">Start Now <i className="icon-4"></i></a>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default SidebarOne;
\ No newline at end of file
diff --git a/src/components/common/sidebar/blog-sidebar-1.tsx b/src/components/common/sidebar/blog-sidebar-1.tsx
new file mode 100644
index 0000000..32db5e2
--- /dev/null
+++ b/src/components/common/sidebar/blog-sidebar-1.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+
+const SidebarOne = () => {
+    return (
+        <div className='edu-blog-sidebar'>
+            <div className='edu-blog-widget widget-search'>
+                <div className='inner'>
+                    <h4 className='widget-title'>Search</h4>
+                    <div className='content'>
+                        <form className='blog-search' action='#'>
+                            <button className='search-button'>
+                                <i className='icon-2'></i>
+                            </button>
+                            <input type='text' placeholder='Search' />
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-blog-widget widget-tags'>
+                <div className='inner'>
+                    <h4 className='widget-title'>Tags</h4>
+                    <div className='content'>
+                        <div className='tag-list'>
+                            <a href='#'>Language</a>
+                            <a href='#'>eLearn</a>
+                            <a href='#'>Tips</a>
+                            <a href='#'>Course</a>
+                            <a href='#'>Motivation</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-blog-widget widget-categories'>
+                <div className='inner'>
+                    <h4 className='widget-title'>Categories</h4>
+                    <div className='content'>
+                        <ul className='category-list'>
+                            <li>
+                                <a href='#'>
+                                    Business Studies <span>(3)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    Computer Engineering <span>(7)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    Medical &amp; Health<span>(2)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    Software <span>(1)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    Web Development <span>(3)</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href='#'>
+                                    Uncategorized <span>(9)</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-blog-widget widget-action'>
+                <div className='inner'>
+                    <h4 className='title'>
+                        Get Online Courses From <span>EduBlink</span>
+                    </h4>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                    <p>Nostrud exer ciation laboris aliqup</p>
+                    <a href='#' className='edu-btn btn-medium'>
+                        Start Now <i className='icon-4'></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SidebarOne;
diff --git a/src/components/common/sidebar/course-details-sidebar.jsx b/src/components/common/sidebar/course-details-sidebar.jsx
deleted file mode 100644
index 318f268..0000000
--- a/src/components/common/sidebar/course-details-sidebar.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import useModal from '../../../hooks/use-modal';
-import { Books } from '../../../svg';
-import VideoModal from '../popup-modal/video-modal';
-
-const CourseDetailsSidebar = ({ course,details_2=false }) => {
-    const { img, certificate, videoId, course_price, instructor, duration, student, language } = course || {};
-    const { isVideoOpen, setIsVideoOpen } = useModal();
-    return (
-        <>
-            <div className={`course-sidebar-3 ${details_2?'':'sidebar-top-position'}`}>
-                <div className="edu-course-widget widget-course-summery">
-                    <div className="inner">
-                        <div className="thumbnail">
-                            <img src={`/assets/images/course/course-01/${img}`} alt="Course Thumb" />
-                            <a onClick={() => setIsVideoOpen(true)} style={{ cursor: 'pointer' }} className="play-btn video-popup-activation">
-                                <i className="icon-18"></i>
-                            </a>
-                        </div>
-                        <div className="content">
-                            <h4 className="widget-title">Course Includes:</h4>
-                            <ul className="course-item">
-                                <li>
-                                    <span className="label"><i className="icon-60"></i>Price:</span>
-                                    <span className="value price">${course_price}</span>
-                                </li>
-
-                                <li>
-                                    <span className="label"><i className="icon-62"></i>Instrutor:</span>
-                                    <span className="value">{instructor}</span>
-                                </li>
-
-                                <li>
-                                    <span className="label"><i className="icon-61"></i>Duration:</span>
-                                    <span className="value">{duration}</span>
-                                </li>
-
-                                <li>
-                                    <span className="label">
-                                        <Books />
-                                        Lessons:</span>
-                                    <span className="value">8</span>
-                                </li>
-
-                                <li>
-                                    <span className="label"><i className="icon-63"></i>Enrolled:</span>
-                                    <span className="value">{student} students</span>
-                                </li>
-
-                                <li>
-                                    <span className="label"><i className="icon-59"></i>Language:</span>
-                                    <span className="value">{language}</span>
-                                </li>
-
-                                <li>
-                                    <span className="label"><i className="icon-64"></i>Certificate:</span>
-                                    <span className="value">{certificate}</span>
-                                </li>
-                            </ul>
-
-                            <div className="read-more-btn">
-                                <a href="#" className="edu-btn">Start Now <i className="icon-4"></i></a>
-                            </div>
-
-                            <div className="share-area">
-                                <h4 className="title">Share On:</h4>
-                                <ul className="social-share">
-                                    <li><a href="#"><i className="icon-facebook"></i></a></li>
-                                    <li><a href="#"><i className="icon-twitter"></i></a></li>
-                                    <li><a href="#"><i className="icon-linkedin2"></i></a></li>
-                                    <li><a href="#"><i className="icon-youtube"></i></a></li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            {/* video modal start */}
-            <VideoModal isVideoOpen={isVideoOpen} setIsVideoOpen={setIsVideoOpen} videoId={videoId} />
-            {/* video modal end */}
-        </>
-    )
-}
-
-export default CourseDetailsSidebar;
\ No newline at end of file
diff --git a/src/components/common/sidebar/course-details-sidebar.tsx b/src/components/common/sidebar/course-details-sidebar.tsx
new file mode 100644
index 0000000..37f540a
--- /dev/null
+++ b/src/components/common/sidebar/course-details-sidebar.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import useModal from '../../../hooks/use-modal';
+import { Books } from '../../../svg';
+import VideoModal from '../popup-modal/video-modal';
+
+const CourseDetailsSidebar = ({ course, details_2 = false }) => {
+    const {
+        img,
+        certificate,
+        videoId,
+        course_price,
+        instructor,
+        duration,
+        student,
+        language,
+    } = course || {};
+    const { isVideoOpen, setIsVideoOpen } = useModal();
+    return (
+        <>
+            <div
+                className={`course-sidebar-3 ${details_2 ? '' : 'sidebar-top-position'}`}
+            >
+                <div className='edu-course-widget widget-course-summery'>
+                    <div className='inner'>
+                        <div className='thumbnail'>
+                            <picture>
+                                <img
+                                    src={`/assets/images/course/course-01/${img}`}
+                                    alt='Course Thumb'
+                                />
+                            </picture>
+                            <a
+                                onClick={() => setIsVideoOpen(true)}
+                                style={{ cursor: 'pointer' }}
+                                className='play-btn video-popup-activation'
+                            >
+                                <i className='icon-18'></i>
+                            </a>
+                        </div>
+                        <div className='content'>
+                            <h4 className='widget-title'>Course Includes:</h4>
+                            <ul className='course-item'>
+                                <li>
+                                    <span className='label'>
+                                        <i className='icon-60'></i>Price:
+                                    </span>
+                                    <span className='value price'>${course_price}</span>
+                                </li>
+
+                                <li>
+                                    <span className='label'>
+                                        <i className='icon-62'></i>Instrutor:
+                                    </span>
+                                    <span className='value'>{instructor}</span>
+                                </li>
+
+                                <li>
+                                    <span className='label'>
+                                        <i className='icon-61'></i>Duration:
+                                    </span>
+                                    <span className='value'>{duration}</span>
+                                </li>
+
+                                <li>
+                                    <span className='label'>
+                                        <Books />
+                                        Lessons:
+                                    </span>
+                                    <span className='value'>8</span>
+                                </li>
+
+                                <li>
+                                    <span className='label'>
+                                        <i className='icon-63'></i>Enrolled:
+                                    </span>
+                                    <span className='value'>{student} students</span>
+                                </li>
+
+                                <li>
+                                    <span className='label'>
+                                        <i className='icon-59'></i>Language:
+                                    </span>
+                                    <span className='value'>{language}</span>
+                                </li>
+
+                                <li>
+                                    <span className='label'>
+                                        <i className='icon-64'></i>Certificate:
+                                    </span>
+                                    <span className='value'>{certificate}</span>
+                                </li>
+                            </ul>
+
+                            <div className='read-more-btn'>
+                                <a href='#' className='edu-btn'>
+                                    Start Now <i className='icon-4'></i>
+                                </a>
+                            </div>
+
+                            <div className='share-area'>
+                                <h4 className='title'>Share On:</h4>
+                                <ul className='social-share'>
+                                    <li>
+                                        <a href='#'>
+                                            <i className='icon-facebook'></i>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href='#'>
+                                            <i className='icon-twitter'></i>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href='#'>
+                                            <i className='icon-linkedin2'></i>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href='#'>
+                                            <i className='icon-youtube'></i>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* video modal start */}
+            <VideoModal
+                isVideoOpen={isVideoOpen}
+                setIsVideoOpen={setIsVideoOpen}
+                videoId={videoId}
+            />
+            {/* video modal end */}
+        </>
+    );
+};
+
+export default CourseDetailsSidebar;
diff --git a/src/components/common/sidebar/course-sidebar-2.jsx b/src/components/common/sidebar/course-sidebar-2.jsx
deleted file mode 100644
index 3257c0d..0000000
--- a/src/components/common/sidebar/course-sidebar-2.jsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Slider from 'react-rangeslider';
-import 'react-rangeslider/lib/index.css';
-import { useDispatch, useSelector } from 'react-redux';
-import { course_data } from '../../../data';
-import { add_category, add_force_page, add_instructor, add_item_offset, add_language, add_level, add_price, reset_filter }
-  from '../../../redux/features/filter-slice';
-
-const courses = course_data.filter((arr, index, self) =>
-    index === self.findIndex((i) => (i.img === arr.img && i.State === arr.State))
-);
-
-const max_prices = courses.map(item => Number(item.course_price))
-const maxPrice = Math.max(...max_prices);
-const minPrice = Math.min(...max_prices);
-
-const all_categories = [...new Set(courses.map(course => course.category))];
-const all_instructors = [...new Set(courses.map(course => course.instructor))];
-const all_levels = [...new Set(courses.map(course => course.level))];
-const all_languages = [...new Set(courses.map(course => course.language))];
-
-const CourseSidebarTwo = ({ course_items }) => {
-    const [price, setPrice] = useState(maxPrice);
-    const [showCategory,setShowCategory] = useState(true);
-    const [showLevel,setShowLevel] = useState(true);
-    const [showInstructor,setShowInstructor] = useState(true);
-    const [showLanguage,setShowLanguage] = useState(true);
-    const { categories,instructors, levels, languages } = useSelector(state => state.filter);
-    const dispatch = useDispatch();
-
-    // handleCategory
-    const handleCategory = (cate) => {
-        const index = categories.findIndex(item => item === cate);
-        if (index >= 0) {
-            dispatch(add_category({ changeType: 'remove', item: cate,maxPrice }))
-        }
-        else {
-            dispatch(add_category({ changeType: 'added', item: cate,maxPrice }))
-        }
-        dispatch(add_item_offset(0));
-        dispatch(add_force_page(0));
-    }
-
-    // handleInstructor
-    const handleInstructor = (instructor) => {
-        dispatch(add_instructor({instructor,maxPrice}))
-        dispatch(add_item_offset(0));
-        dispatch(add_force_page(0));
-    }
-
-    // handleLevel
-    const handleLevel = (level) => {
-        dispatch(add_level({level,maxPrice}))
-        dispatch(add_item_offset(0));
-        dispatch(add_force_page(0));
-    }
-
-    // handleLanguage
-    const handleLanguage = (language) => {
-        dispatch(add_language({language,maxPrice}))
-        dispatch(add_item_offset(0));
-        dispatch(add_force_page(0));
-    }
-
-    // handlePrice
-    useEffect(() => {
-        dispatch(add_price(price))
-    }, [dispatch, price])
-
-    // handlePriceChange
-    const handlePriceChange = value => {
-        setPrice(value);
-        dispatch(add_item_offset(0));
-        dispatch(add_force_page(0));
-    }
-
-    return (
-        <div className="course-sidebar-2">
-            <div className="edu-course-widget widget-category">
-                <div className="inner">
-                    <h5 className={`widget-title widget-toggle ${showCategory?'active':''}`} onClick={()=> setShowCategory(!showCategory)}>Categories</h5>
-
-                    <div className="content" style={{display:showCategory?'block':'none'}}>
-                        {all_categories.map((c, i) => (
-                            <div key={i} className="edu-form-check" >
-                                <input onClick={() => handleCategory(c)} type="checkbox" checked={categories.includes(c)} 
-                                id={`cat-check${i + 1}`} readOnly />
-                                <label htmlFor={`cat-check${i + 1}`}>{c}
-                                    <span>({course_items.filter(item => item.category === c)?.length})</span>
-                                </label>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-course-widget widget-instructor">
-                <div className="inner">
-                    <h5 className={`widget-title widget-toggle ${showInstructor?'active':''}`}  onClick={()=> setShowInstructor(!showInstructor)}>Instructor</h5>
-
-                    <div className="content" style={{display:showInstructor?'block':'none'}}>
-                        {all_instructors.map((instructor, i) => (
-                            <div key={i} className="edu-form-check" >
-                                <input onClick={() => handleInstructor(instructor)} checked={instructors.includes(instructor)} 
-                                type="checkbox" id={`cat-check-2${i + 1}`} readOnly />
-                                <label htmlFor={`cat-check-2${i + 1}`}>{instructor}
-                                    <span>({course_items.filter(item => item.instructor === instructor)?.length})</span>
-                                </label>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-course-widget widget-level">
-                <div className="inner">
-                    <h5 className={`widget-title widget-toggle ${showLevel?'active':''} `} onClick={()=> setShowLevel(!showLevel)}>Level</h5>
-
-                    <div className="content" style={{display:showLevel?'block':'none'}}>
-                        {all_levels.map((level, i) => (
-                            <div key={i} className="edu-form-check" >
-                                <input onClick={() => handleLevel(level)} checked={levels.includes(level)} 
-                                type="checkbox" id={`cat-check-3${i + 1}`} readOnly />
-                                <label htmlFor={`cat-check-3${i + 1}`}>{level}
-                                    <span>({course_items.filter(item => item.level === level)?.length})</span>
-                                </label>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-course-widget widget-language">
-                <div className="inner">
-                    <h5 className={`widget-title widget-toggle ${showLanguage?'active':''}`} onClick={()=> setShowLanguage(!showLanguage)}>Language</h5>
-
-                    <div className="content" style={{display:showLanguage?'block':'none'}}>
-                        {all_languages.map((language, i) => (
-                            <div key={i} className="edu-form-check" >
-                                <input onClick={() => handleLanguage(language)} checked={languages.includes(language)} 
-                                type="checkbox" id={`cat-check-4${i + 1}`} readOnly />
-                                <label htmlFor={`cat-check-4${i + 1}`}>{language}
-                                    <span>({course_items.filter(item => item.language === language)?.length})</span>
-                                </label>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-
-            <div className="edu-course-widget">
-                <h5 className="widget-title">Price Filter</h5>
-                <Slider
-                    value={price}
-                    min={minPrice}
-                    max={maxPrice}
-                    tooltip={false}
-                    orientation="horizontal"
-                    onChange={(val) => handlePriceChange(val)}
-                />
-                <div className='filter-price'>Price: <span>${minPrice}</span> <span>-</span> <span>${price}</span></div>
-            </div>
-            
-            <div className="edu-course-widget">
-                <h5 className="widget-title mb-4">Reset Filter</h5>
-                <button onClick={()=> dispatch(reset_filter(maxPrice))} className='edu-btn btn-small mb--30'>Reset Filter</button>
-            </div>
-        </div>
-    )
-}
-
-export default CourseSidebarTwo;
\ No newline at end of file
diff --git a/src/components/common/sidebar/course-sidebar-2.tsx b/src/components/common/sidebar/course-sidebar-2.tsx
new file mode 100644
index 0000000..ca011a8
--- /dev/null
+++ b/src/components/common/sidebar/course-sidebar-2.tsx
@@ -0,0 +1,285 @@
+import React, { useEffect, useState } from 'react';
+import Slider from 'react-rangeslider';
+import 'react-rangeslider/lib/index.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { course_data } from '../../../data';
+import {
+    add_category,
+    add_force_page,
+    add_instructor,
+    add_item_offset,
+    add_language,
+    add_level,
+    add_price,
+    reset_filter,
+} from '../../../redux/features/filter-slice';
+import { AppState } from '../../../redux/store';
+
+const courses = course_data.filter(
+    (arr, index, self) => index === self.findIndex(i => i.img === arr.img) // && i.State === arr.State)
+);
+
+const max_prices = courses.map(item => Number(item.course_price));
+const maxPrice = Math.max(...max_prices);
+const minPrice = Math.min(...max_prices);
+
+const all_categories = [...new Set(courses.map(course => course.category))];
+const all_instructors = [...new Set(courses.map(course => course.instructor))];
+const all_levels = [...new Set(courses.map(course => course.level))];
+const all_languages = [...new Set(courses.map(course => course.language))];
+
+const CourseSidebarTwo = ({ course_items }) => {
+    const [price, setPrice] = useState(maxPrice);
+    const [showCategory, setShowCategory] = useState(true);
+    const [showLevel, setShowLevel] = useState(true);
+    const [showInstructor, setShowInstructor] = useState(true);
+    const [showLanguage, setShowLanguage] = useState(true);
+    const { categories, instructors, levels, languages } = useSelector(
+        (state: AppState) => state.filter
+    );
+    const dispatch = useDispatch();
+
+    // handleCategory
+    const handleCategory = cate => {
+        const index = categories.findIndex(item => item === cate);
+        if (index >= 0) {
+            dispatch(add_category({ changeType: 'remove', item: cate, maxPrice }));
+        } else {
+            dispatch(add_category({ changeType: 'added', item: cate, maxPrice }));
+        }
+        dispatch(add_item_offset(0));
+        dispatch(add_force_page(0));
+    };
+
+    // handleInstructor
+    const handleInstructor = instructor => {
+        dispatch(add_instructor({ instructor, maxPrice }));
+        dispatch(add_item_offset(0));
+        dispatch(add_force_page(0));
+    };
+
+    // handleLevel
+    const handleLevel = level => {
+        dispatch(add_level({ level, maxPrice }));
+        dispatch(add_item_offset(0));
+        dispatch(add_force_page(0));
+    };
+
+    // handleLanguage
+    const handleLanguage = language => {
+        dispatch(add_language({ language, maxPrice }));
+        dispatch(add_item_offset(0));
+        dispatch(add_force_page(0));
+    };
+
+    // handlePrice
+    useEffect(() => {
+        dispatch(add_price(price));
+    }, [dispatch, price]);
+
+    // handlePriceChange
+    const handlePriceChange = value => {
+        setPrice(value);
+        dispatch(add_item_offset(0));
+        dispatch(add_force_page(0));
+    };
+
+    return (
+        <div className='course-sidebar-2'>
+            <div className='edu-course-widget widget-category'>
+                <div className='inner'>
+                    <h5
+                        className={`widget-title widget-toggle ${
+                            showCategory ? 'active' : ''
+                        }`}
+                        onClick={() => setShowCategory(!showCategory)}
+                    >
+                        Categories
+                    </h5>
+
+                    <div
+                        className='content'
+                        style={{ display: showCategory ? 'block' : 'none' }}
+                    >
+                        {all_categories.map((c, i) => (
+                            <div key={i} className='edu-form-check'>
+                                <input
+                                    onClick={() => handleCategory(c)}
+                                    type='checkbox'
+                                    checked={categories.includes(c)}
+                                    id={`cat-check${i + 1}`}
+                                    readOnly
+                                />
+                                <label htmlFor={`cat-check${i + 1}`}>
+                                    {c}
+                                    <span>
+                                        (
+                                        {
+                                            course_items.filter(
+                                                item => item.category === c
+                                            )?.length
+                                        }
+                                        )
+                                    </span>
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-course-widget widget-instructor'>
+                <div className='inner'>
+                    <h5
+                        className={`widget-title widget-toggle ${
+                            showInstructor ? 'active' : ''
+                        }`}
+                        onClick={() => setShowInstructor(!showInstructor)}
+                    >
+                        Instructor
+                    </h5>
+
+                    <div
+                        className='content'
+                        style={{ display: showInstructor ? 'block' : 'none' }}
+                    >
+                        {all_instructors.map((instructor, i) => (
+                            <div key={i} className='edu-form-check'>
+                                <input
+                                    onClick={() => handleInstructor(instructor)}
+                                    checked={instructors.includes(instructor)}
+                                    type='checkbox'
+                                    id={`cat-check-2${i + 1}`}
+                                    readOnly
+                                />
+                                <label htmlFor={`cat-check-2${i + 1}`}>
+                                    {instructor}
+                                    <span>
+                                        (
+                                        {
+                                            course_items.filter(
+                                                item => item.instructor === instructor
+                                            )?.length
+                                        }
+                                        )
+                                    </span>
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-course-widget widget-level'>
+                <div className='inner'>
+                    <h5
+                        className={`widget-title widget-toggle ${
+                            showLevel ? 'active' : ''
+                        } `}
+                        onClick={() => setShowLevel(!showLevel)}
+                    >
+                        Level
+                    </h5>
+
+                    <div
+                        className='content'
+                        style={{ display: showLevel ? 'block' : 'none' }}
+                    >
+                        {all_levels.map((level, i) => (
+                            <div key={i} className='edu-form-check'>
+                                <input
+                                    onClick={() => handleLevel(level)}
+                                    checked={levels.includes(level)}
+                                    type='checkbox'
+                                    id={`cat-check-3${i + 1}`}
+                                    readOnly
+                                />
+                                <label htmlFor={`cat-check-3${i + 1}`}>
+                                    {level}
+                                    <span>
+                                        (
+                                        {
+                                            course_items.filter(
+                                                item => item.level === level
+                                            )?.length
+                                        }
+                                        )
+                                    </span>
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-course-widget widget-language'>
+                <div className='inner'>
+                    <h5
+                        className={`widget-title widget-toggle ${
+                            showLanguage ? 'active' : ''
+                        }`}
+                        onClick={() => setShowLanguage(!showLanguage)}
+                    >
+                        Language
+                    </h5>
+
+                    <div
+                        className='content'
+                        style={{ display: showLanguage ? 'block' : 'none' }}
+                    >
+                        {all_languages.map((language, i) => (
+                            <div key={i} className='edu-form-check'>
+                                <input
+                                    onClick={() => handleLanguage(language)}
+                                    checked={languages.includes(language)}
+                                    type='checkbox'
+                                    id={`cat-check-4${i + 1}`}
+                                    readOnly
+                                />
+                                <label htmlFor={`cat-check-4${i + 1}`}>
+                                    {language}
+                                    <span>
+                                        (
+                                        {
+                                            course_items.filter(
+                                                item => item.language === language
+                                            )?.length
+                                        }
+                                        )
+                                    </span>
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <div className='edu-course-widget'>
+                <h5 className='widget-title'>Price Filter</h5>
+                <Slider
+                    value={price}
+                    min={minPrice}
+                    max={maxPrice}
+                    tooltip={false}
+                    orientation='horizontal'
+                    onChange={val => handlePriceChange(val)}
+                />
+                <div className='filter-price'>
+                    Price: <span>${minPrice}</span> <span>-</span> <span>${price}</span>
+                </div>
+            </div>
+
+            <div className='edu-course-widget'>
+                <h5 className='widget-title mb-4'>Reset Filter</h5>
+                <button
+                    onClick={() => dispatch(reset_filter(maxPrice))}
+                    className='edu-btn btn-small mb--30'
+                >
+                    Reset Filter
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default CourseSidebarTwo;
diff --git a/src/components/common/sidebar/course-sidebar.jsx b/src/components/common/sidebar/course-sidebar.tsx
similarity index 50%
rename from src/components/common/sidebar/course-sidebar.jsx
rename to src/components/common/sidebar/course-sidebar.tsx
index 496acd7..0d01b1a 100644
--- a/src/components/common/sidebar/course-sidebar.jsx
+++ b/src/components/common/sidebar/course-sidebar.tsx
@@ -1,61 +1,67 @@
-import React, { useEffect, useState } from "react";
-import Slider from "react-rangeslider";
-import "react-rangeslider/lib/index.css";
-import { useDispatch, useSelector } from "react-redux";
-import { course_data } from "../../../data";
-import { add_category, add_force_page, add_instructor, add_item_offset, add_language, add_level, add_price, reset_filter }
-  from '../../../redux/features/filter-slice';
-  
+import React, { useEffect, useState } from 'react';
+import Slider from 'react-rangeslider';
+import 'react-rangeslider/lib/index.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { course_data } from '../../../data';
+import {
+    add_category,
+    add_force_page,
+    add_instructor,
+    add_item_offset,
+    add_language,
+    add_level,
+    add_price,
+    reset_filter,
+} from '../../../redux/features/filter-slice';
+import { AppState } from '../../../redux/store';
 
 const courses = course_data.filter(
-    (arr, index, self) => index === self.findIndex((i) => i.img === arr.img && i.State === arr.State)
+    (arr, index, self) => index === self.findIndex(i => i.img === arr.img) // && i.State === arr.State)
 );
-const max_prices = courses.map((item) => Number(item.course_price));
+const max_prices = courses.map(item => Number(item.course_price));
 const maxPrice = Math.max(...max_prices);
 const minPrice = Math.min(...max_prices);
 
-const all_categories = [...new Set(courses.map((course) => course.category))];
-const all_instructors = [...new Set(courses.map((course) => course.instructor))];
-const all_levels = [...new Set(courses.map((course) => course.level))];
-const all_languages = [...new Set(courses.map((course) => course.language))];
+const all_categories = [...new Set(courses.map(course => course.category))];
+const all_instructors = [...new Set(courses.map(course => course.instructor))];
+const all_levels = [...new Set(courses.map(course => course.level))];
+const all_languages = [...new Set(courses.map(course => course.language))];
 
 const CourseSidebar = ({ course_items }) => {
     const [price, setPrice] = useState(maxPrice);
-    const { categories, instructors, levels, languages, forcePage } = useSelector((state) => state.filter);
+    const { categories, instructors, levels, languages, forcePage } = useSelector(
+        (state: AppState) => state.filter
+    );
     const dispatch = useDispatch();
 
     // handleCategory
-    const handleCategory = (cate) => {
-        const index = categories.findIndex((item) => item === cate);
+    const handleCategory = cate => {
+        const index = categories.findIndex(item => item === cate);
         if (index >= 0) {
-            dispatch(
-                add_category({ changeType: "remove", item: cate, maxPrice })
-            );
+            dispatch(add_category({ changeType: 'remove', item: cate, maxPrice }));
         } else {
-            dispatch(
-                add_category({ changeType: "added", item: cate, maxPrice })
-            );
+            dispatch(add_category({ changeType: 'added', item: cate, maxPrice }));
         }
         dispatch(add_item_offset(0));
         dispatch(add_force_page(0));
     };
 
     // handleInstructor
-    const handleInstructor = (instructor) => {
+    const handleInstructor = instructor => {
         dispatch(add_instructor({ instructor, maxPrice }));
         dispatch(add_item_offset(0));
         dispatch(add_force_page(0));
     };
 
     // handleLevel
-    const handleLevel = (level) => {
+    const handleLevel = level => {
         dispatch(add_level({ level, maxPrice }));
         dispatch(add_item_offset(0));
         dispatch(add_force_page(0));
     };
 
     // handleLanguage
-    const handleLanguage = (language) => {
+    const handleLanguage = language => {
         dispatch(add_language({ language, maxPrice }));
         dispatch(add_item_offset(0));
         dispatch(add_force_page(0));
@@ -67,24 +73,24 @@ const CourseSidebar = ({ course_items }) => {
     }, [dispatch, price]);
 
     // handlePriceChange
-    const handlePriceChange = (value) => {
+    const handlePriceChange = value => {
         setPrice(value);
         dispatch(add_item_offset(0));
         dispatch(add_force_page(0));
     };
 
     return (
-        <div className="edu-course-sidebar">
-            <div className="edu-course-widget widget-category">
-                <div className="inner">
-                    <h5 className="widget-title">Filter by Categories</h5>
+        <div className='edu-course-sidebar'>
+            <div className='edu-course-widget widget-category'>
+                <div className='inner'>
+                    <h5 className='widget-title'>Filter by Categories</h5>
 
-                    <div className="content">
+                    <div className='content'>
                         {all_categories.map((c, i) => (
-                            <div key={i} className="edu-form-check">
+                            <div key={i} className='edu-form-check'>
                                 <input
                                     onClick={() => handleCategory(c)}
-                                    type="checkbox"
+                                    type='checkbox'
                                     checked={categories.includes(c)}
                                     id={`cat-check${i + 1}`}
                                     readOnly
@@ -93,12 +99,11 @@ const CourseSidebar = ({ course_items }) => {
                                     {c}
                                     <span>
                                         (
-                                            {
-                                                course_items.filter(
-                                                (item) =>
-                                                    item.category === c
-                                                )?.length
-                                            }
+                                        {
+                                            course_items.filter(
+                                                item => item.category === c
+                                            )?.length
+                                        }
                                         )
                                     </span>
                                 </label>
@@ -108,19 +113,17 @@ const CourseSidebar = ({ course_items }) => {
                 </div>
             </div>
 
-            <div className="edu-course-widget widget-instructor">
-                <div className="inner">
-                    <h5 className="widget-title">Instructor</h5>
+            <div className='edu-course-widget widget-instructor'>
+                <div className='inner'>
+                    <h5 className='widget-title'>Instructor</h5>
 
-                    <div className="content">
+                    <div className='content'>
                         {all_instructors.map((instructor, i) => (
-                            <div key={i} className="edu-form-check">
+                            <div key={i} className='edu-form-check'>
                                 <input
                                     onClick={() => handleInstructor(instructor)}
-                                    checked={instructors.includes(
-                                        instructor
-                                    )}
-                                    type="checkbox"
+                                    checked={instructors.includes(instructor)}
+                                    type='checkbox'
                                     id={`cat-check-2${i + 1}`}
                                     readOnly
                                 />
@@ -128,13 +131,11 @@ const CourseSidebar = ({ course_items }) => {
                                     {instructor}
                                     <span>
                                         (
-                                            {
-                                                course_items.filter(
-                                                (item) =>
-                                                    item.instructor ===
-                                                    instructor
-                                                )?.length
-                                            }
+                                        {
+                                            course_items.filter(
+                                                item => item.instructor === instructor
+                                            )?.length
+                                        }
                                         )
                                     </span>
                                 </label>
@@ -144,17 +145,17 @@ const CourseSidebar = ({ course_items }) => {
                 </div>
             </div>
 
-            <div className="edu-course-widget widget-level">
-                <div className="inner">
-                    <h5 className="widget-title">Level</h5>
+            <div className='edu-course-widget widget-level'>
+                <div className='inner'>
+                    <h5 className='widget-title'>Level</h5>
 
-                    <div className="content">
+                    <div className='content'>
                         {all_levels.map((level, i) => (
-                            <div key={i} className="edu-form-check">
+                            <div key={i} className='edu-form-check'>
                                 <input
                                     onClick={() => handleLevel(level)}
                                     checked={levels.includes(level)}
-                                    type="checkbox"
+                                    type='checkbox'
                                     id={`cat-check-3${i + 1}`}
                                     readOnly
                                 />
@@ -162,12 +163,11 @@ const CourseSidebar = ({ course_items }) => {
                                     {level}
                                     <span>
                                         (
-                                            {
-                                                course_items.filter(
-                                                (item) =>
-                                                    item.level === level
-                                                )?.length
-                                            }
+                                        {
+                                            course_items.filter(
+                                                item => item.level === level
+                                            )?.length
+                                        }
                                         )
                                     </span>
                                 </label>
@@ -177,17 +177,17 @@ const CourseSidebar = ({ course_items }) => {
                 </div>
             </div>
 
-            <div className="edu-course-widget widget-language">
-                <div className="inner">
-                    <h5 className="widget-title">Language</h5>
+            <div className='edu-course-widget widget-language'>
+                <div className='inner'>
+                    <h5 className='widget-title'>Language</h5>
 
-                    <div className="content">
+                    <div className='content'>
                         {all_languages.map((language, i) => (
-                            <div key={i} className="edu-form-check">
+                            <div key={i} className='edu-form-check'>
                                 <input
                                     onClick={() => handleLanguage(language)}
                                     checked={languages.includes(language)}
-                                    type="checkbox"
+                                    type='checkbox'
                                     id={`cat-check-4${i + 1}`}
                                     readOnly
                                 />
@@ -195,13 +195,11 @@ const CourseSidebar = ({ course_items }) => {
                                     {language}
                                     <span>
                                         (
-                                            {
-                                                course_items.filter(
-                                                (item) =>
-                                                    item.language ===
-                                                    language
-                                                )?.length
-                                            }
+                                        {
+                                            course_items.filter(
+                                                item => item.language === language
+                                            )?.length
+                                        }
                                         )
                                     </span>
                                 </label>
@@ -211,31 +209,33 @@ const CourseSidebar = ({ course_items }) => {
                 </div>
             </div>
 
-            <div className="edu-course-widget widget-rating">
-                <h5 className="widget-title">Price Filter</h5>
-                
+            <div className='edu-course-widget widget-rating'>
+                <h5 className='widget-title'>Price Filter</h5>
+
                 <Slider
                     value={price}
                     min={minPrice}
                     max={maxPrice}
                     tooltip={false}
-                    orientation="horizontal"
-                    onChange={(val) => handlePriceChange(val)}
+                    orientation='horizontal'
+                    onChange={val => handlePriceChange(val)}
                 />
-                <div className='filter-price'>Price: <span>${minPrice}</span> <span>-</span> <span>${price}</span></div>
+                <div className='filter-price'>
+                    Price: <span>${minPrice}</span> <span>-</span> <span>${price}</span>
+                </div>
             </div>
 
-            <div className="edu-course-widget widget-rating">
-                <h5 className="widget-title mb-4">Reset Filter</h5>
+            <div className='edu-course-widget widget-rating'>
+                <h5 className='widget-title mb-4'>Reset Filter</h5>
                 <button
                     onClick={() => dispatch(reset_filter(maxPrice))}
-                    className="edu-btn btn-small mb--30"
+                    className='edu-btn btn-small mb--30'
                 >
                     Reset Filter
                 </button>
             </div>
         </div>
-    )
-}
+    );
+};
 
 export default CourseSidebar;
diff --git a/src/components/common/sidebar/off-canvas.jsx b/src/components/common/sidebar/off-canvas.jsx
deleted file mode 100644
index d39a89d..0000000
--- a/src/components/common/sidebar/off-canvas.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import Link from 'next/link';
-import React, { useState } from 'react';
-import menu_data from '../../../layout/headers/menu-data';
-
-const OffCanvas = ({ isOpen, setIsOpen }) => {
-    const [navTitle, setNavTitle] = useState('')
-
-    const openMobileMenu = (menu) => {
-        if(navTitle === menu){
-            setNavTitle('')
-        }
-        else {
-            setNavTitle(menu)
-        }
-    }
-    return <>
-        <div className={`popup-mobile-menu ${isOpen?'active':''}`}>
-            <div className="inner">
-                <div className="header-top">
-                    <div className="logo">
-                        <Link href="/">
-
-                            <img className="logo-light" src='/assets/images/logo/logo-dark.png' alt="logo" />
-                            <img className="logo-dark" src='/assets/images/logo/logo-white.png' alt="logo" />
-
-                        </Link>
-                    </div>
-
-                    <div className="close-menu" onClick={() => setIsOpen(false)}>
-                        <button className="close-button">
-                            <i className="icon-73"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <div className="mm-menu">
-                    <ul>
-                        {menu_data.map((menu, i) => (
-                            <li key={i} className={!menu.submenus ? '' : navTitle === menu?.title ? 
-                            "has-droupdown active" : "has-droupdown"}>
-                                {menu.submenus && <button  onClick={() => openMobileMenu(menu.title)}>{menu.title} </button>}
-
-                                {!menu.mobile_pages_menu &&
-                                    <ul className={navTitle === menu?.title ? "sub-menu active" : "sub-menu"}>
-                                        {menu?.submenus?.map((sub,i) => (
-                                            <li key={i}><Link href={`${sub.link}`} legacyBehavior>{sub.title}</Link></li>
-                                        ))}
-                                    </ul>
-                                }
-
-                                {menu.mobile_pages_menu &&
-                                    <ul className={navTitle === menu?.title ? "sub-menu active" : "sub-menu"}>
-                                        {menu?.mobile_pages_menu?.map((sub,i) => (
-                                            <li key={i}><Link href={`${sub.link}`} legacyBehavior>{sub.title}</Link></li>
-                                        ))}
-                                    </ul>
-                                }
-                                
-                                {!menu.submenus && <Link href={menu.link} legacyBehavior>{menu.title}</Link>}
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-            </div>
-        </div>
-
-        {/* overlay start */}
-        <div onClick={() => setIsOpen(false)} className={`body-overlay ${isOpen ? 'apply' : ''}`}></div>
-        {/* overlay end */}
-    </>;
-}
-
-export default OffCanvas;
\ No newline at end of file
diff --git a/src/components/common/sidebar/off-canvas.tsx b/src/components/common/sidebar/off-canvas.tsx
new file mode 100644
index 0000000..a1f3e10
--- /dev/null
+++ b/src/components/common/sidebar/off-canvas.tsx
@@ -0,0 +1,131 @@
+import Link from 'next/link';
+import React, { useState } from 'react';
+import menu_data from '../../../layout/headers/menu-data';
+
+const OffCanvas = ({ isOpen, setIsOpen }) => {
+    const [navTitle, setNavTitle] = useState('');
+
+    const openMobileMenu = menu => {
+        if (navTitle === menu) {
+            setNavTitle('');
+        } else {
+            setNavTitle(menu);
+        }
+    };
+    return (
+        <>
+            <div className={`popup-mobile-menu ${isOpen ? 'active' : ''}`}>
+                <div className='inner'>
+                    <div className='header-top'>
+                        <div className='logo'>
+                            <Link href='/'>
+                                <picture>
+                                    <img
+                                        className='logo-light'
+                                        src='/assets/images/logo/logo-dark.png'
+                                        alt='logo'
+                                    />
+                                </picture>
+                                <picture>
+                                    <img
+                                        className='logo-dark'
+                                        src='/assets/images/logo/logo-white.png'
+                                        alt='logo'
+                                    />
+                                </picture>
+                            </Link>
+                        </div>
+
+                        <div className='close-menu' onClick={() => setIsOpen(false)}>
+                            <button className='close-button'>
+                                <i className='icon-73'></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className='mm-menu'>
+                        <ul>
+                            {menu_data.map((menu, i) => (
+                                <li
+                                    key={i}
+                                    className={
+                                        !menu.submenus
+                                            ? ''
+                                            : navTitle === menu?.title
+                                            ? 'has-droupdown active'
+                                            : 'has-droupdown'
+                                    }
+                                >
+                                    {menu.submenus && (
+                                        <button
+                                            onClick={() => openMobileMenu(menu.title)}
+                                        >
+                                            {menu.title}{' '}
+                                        </button>
+                                    )}
+
+                                    {!menu.mobile_pages_menu && (
+                                        <ul
+                                            className={
+                                                navTitle === menu?.title
+                                                    ? 'sub-menu active'
+                                                    : 'sub-menu'
+                                            }
+                                        >
+                                            {menu?.submenus?.map((sub, i) => (
+                                                <li key={i}>
+                                                    <Link
+                                                        href={`${sub.link}`}
+                                                        legacyBehavior
+                                                    >
+                                                        {sub.title}
+                                                    </Link>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    )}
+
+                                    {menu.mobile_pages_menu && (
+                                        <ul
+                                            className={
+                                                navTitle === menu?.title
+                                                    ? 'sub-menu active'
+                                                    : 'sub-menu'
+                                            }
+                                        >
+                                            {menu?.mobile_pages_menu?.map((sub, i) => (
+                                                <li key={i}>
+                                                    <Link
+                                                        href={`${sub.link}`}
+                                                        legacyBehavior
+                                                    >
+                                                        {sub.title}
+                                                    </Link>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    )}
+
+                                    {!menu.submenus && (
+                                        <Link href={menu.link} legacyBehavior>
+                                            {menu.title}
+                                        </Link>
+                                    )}
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            {/* overlay start */}
+            <div
+                onClick={() => setIsOpen(false)}
+                className={`body-overlay ${isOpen ? 'apply' : ''}`}
+            ></div>
+            {/* overlay end */}
+        </>
+    );
+};
+
+export default OffCanvas;
diff --git a/src/components/common/single-course-2.jsx b/src/components/common/single-course-2.jsx
deleted file mode 100644
index 083acf7..0000000
--- a/src/components/common/single-course-2.jsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { cart_course } from '../../redux/features/cart-slice';
-import { add_to_wishlist, wishlistItems } from '../../redux/features/wishlist-slice';
-
-const SingleCourseTwo = ({ course }) => {
-    const { id, img, title, level, rating, rating_count, course_price, lesson, student, duration, short_desc } = course || {};
-    const {cartCourses} = useSelector(state => state.cart);
-    const dispatch = useDispatch();
-    const wishlists = useSelector(wishlistItems);
-    const isWishlistSelected = wishlists.find(w => Number(w.id) === Number(id));
-
-    const handleWishlist = (course_item) => {
-        if (wishlists.find(i => i.id === course_item.id)) {
-            dispatch(add_to_wishlist({
-                    change_type: 'remove_wishlist', item: {
-                    id: course_item.id,
-                    img: `/assets/images/course/${course_item.img}`,
-                    title: course_item.title,
-                    price: course_item.course_price
-                }
-            }))
-        } else {
-            dispatch(add_to_wishlist({
-                    change_type: 'add_wishlist', item: {
-                    id: course_item.id,
-                    img: `/assets/images/course/${course_item.img}`,
-                    title: course_item.title,
-                    price: course_item.course_price
-                }
-            }))
-        }
-    }
-
-    // handle add to cart
-    const handleAddToCart = (course) => {
-        dispatch(cart_course({
-            id:course.id,
-            img:`/assets/images/course/${course.img}`,
-            price:course.course_price,
-            title:course.title
-        }))
-    }
-
-    return (
-        <div className="col-md-6 col-xl-3" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-            <div className="edu-course course-style-1 hover-button-bg-white">
-                <div className="inner">
-                    <div className="thumbnail">
-                        <Link href={`/course-details/${id}`}>
-
-                            <img src={`/assets/images/course/${img}`} alt="Course Meta" />
-
-                        </Link>
-                        <div className="time-top">
-                            <span className="duration"><i className="icon-61"></i>{duration}</span>
-                        </div>
-                    </div>
-
-                    <div className="content">
-                        <span className="course-level">{level}</span>
-                        <h6 className="title">
-                            <a href="#">{title}</a>
-                        </h6>
-
-                        <div className="course-rating">
-                            <div className="rating">
-                                <i className="icon-23"></i>
-                                <i className="icon-23"></i>
-                                <i className="icon-23"></i>
-                                <i className="icon-23"></i>
-                                <i className="icon-23"></i>
-                            </div>
-                            <span className="rating-count">({rating} /{rating_count} Rating)</span>
-                        </div>
-
-                        <div className="course-price">${course_price}</div>
-
-                        <ul className="course-meta">
-                            <li><i className="icon-24"></i>{lesson} Lessons</li>
-                            <li><i className="icon-25"></i>{student} Students</li>
-                        </ul>
-                    </div>
-                </div>
-
-                <div className="course-hover-content-wrapper">
-                    <button onClick={() => handleWishlist(course)} className={`wishlist-btn ${isWishlistSelected ? 'active' : ''}`}><i className="icon-22"></i></button>
-                </div>
-
-                <div className="course-hover-content">
-                    <div className="content">
-                        <button onClick={() => handleWishlist(course)} className={`wishlist-btn ${isWishlistSelected ? 'active' : ''}`}>
-                            <i className="icon-22"></i>
-                        </button>
-
-                        <span className="course-level">{level}</span>
-
-                        <h6 className="title">
-                            <Link href={`/course-details/${id}`}>
-                                {title}
-                            </Link>
-                        </h6>
-
-                        <div className="course-rating">
-                            <div className="rating">
-                                <i className="icon-23"></i>
-                                <i className="icon-23"></i>
-                                <i className="icon-23"></i>
-                                <i className="icon-23"></i>
-                                <i className="icon-23"></i>
-                            </div>
-                            <span className="rating-count">({rating} /{rating_count} Rating)</span>
-                        </div>
-
-                        <div className="course-price">${course_price}</div>
-
-                        <p>{short_desc}</p>
-
-                        <ul className="course-meta">
-                            <li><i className="icon-24"></i>{lesson} Lessons</li>
-                            <li><i className="icon-25"></i>{student} Students</li>
-                        </ul>
-
-                        <a onClick={() => handleAddToCart(course)} className="edu-btn btn-secondary btn-small"
-                        style={{ cursor: 'pointer' }}> 
-                            {cartCourses.some(item => item.id === id) ? 'Added to cart' : 'Add to cart'} 
-                            <i className="icon-4"></i>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default SingleCourseTwo;
\ No newline at end of file
diff --git a/src/components/common/single-course-2.tsx b/src/components/common/single-course-2.tsx
new file mode 100644
index 0000000..5dcde2f
--- /dev/null
+++ b/src/components/common/single-course-2.tsx
@@ -0,0 +1,198 @@
+import Link from 'next/link';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { cart_course } from '../../redux/features/cart-slice';
+import { add_to_wishlist, wishlistItems } from '../../redux/features/wishlist-slice';
+import { AppState } from '../../redux/store';
+
+const SingleCourseTwo = ({ course }) => {
+    const {
+        id,
+        img,
+        title,
+        level,
+        rating,
+        rating_count,
+        course_price,
+        lesson,
+        student,
+        duration,
+        short_desc,
+    } = course || {};
+    const { cartCourses } = useSelector((state: AppState) => state.cart);
+    const dispatch = useDispatch();
+    const wishlists = useSelector(wishlistItems);
+    const isWishlistSelected = wishlists.find(w => Number(w.id) === Number(id));
+
+    const handleWishlist = course_item => {
+        if (wishlists.find(i => i.id === course_item.id)) {
+            dispatch(
+                add_to_wishlist({
+                    change_type: 'remove_wishlist',
+                    item: {
+                        id: course_item.id,
+                        img: `/assets/images/course/${course_item.img}`,
+                        title: course_item.title,
+                        price: course_item.course_price,
+                    },
+                })
+            );
+        } else {
+            dispatch(
+                add_to_wishlist({
+                    change_type: 'add_wishlist',
+                    item: {
+                        id: course_item.id,
+                        img: `/assets/images/course/${course_item.img}`,
+                        title: course_item.title,
+                        price: course_item.course_price,
+                    },
+                })
+            );
+        }
+    };
+
+    // handle add to cart
+    const handleAddToCart = course => {
+        dispatch(
+            cart_course({
+                id: course.id,
+                img: `/assets/images/course/${course.img}`,
+                price: course.course_price,
+                title: course.title,
+            })
+        );
+    };
+
+    return (
+        <div
+            className='col-md-6 col-xl-3'
+            data-sal-delay='150'
+            data-sal='slide-up'
+            data-sal-duration='800'
+        >
+            <div className='edu-course course-style-1 hover-button-bg-white'>
+                <div className='inner'>
+                    <div className='thumbnail'>
+                        <Link href={`/course-details/${id}`}>
+                            <picture>
+                                <img
+                                    src={`/assets/images/course/${img}`}
+                                    alt='Course Meta'
+                                />
+                            </picture>
+                        </Link>
+                        <div className='time-top'>
+                            <span className='duration'>
+                                <i className='icon-61'></i>
+                                {duration}
+                            </span>
+                        </div>
+                    </div>
+
+                    <div className='content'>
+                        <span className='course-level'>{level}</span>
+                        <h6 className='title'>
+                            <a href='#'>{title}</a>
+                        </h6>
+
+                        <div className='course-rating'>
+                            <div className='rating'>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                            </div>
+                            <span className='rating-count'>
+                                ({rating} /{rating_count} Rating)
+                            </span>
+                        </div>
+
+                        <div className='course-price'>${course_price}</div>
+
+                        <ul className='course-meta'>
+                            <li>
+                                <i className='icon-24'></i>
+                                {lesson} Lessons
+                            </li>
+                            <li>
+                                <i className='icon-25'></i>
+                                {student} Students
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div className='course-hover-content-wrapper'>
+                    <button
+                        onClick={() => handleWishlist(course)}
+                        className={`wishlist-btn ${isWishlistSelected ? 'active' : ''}`}
+                    >
+                        <i className='icon-22'></i>
+                    </button>
+                </div>
+
+                <div className='course-hover-content'>
+                    <div className='content'>
+                        <button
+                            onClick={() => handleWishlist(course)}
+                            className={`wishlist-btn ${
+                                isWishlistSelected ? 'active' : ''
+                            }`}
+                        >
+                            <i className='icon-22'></i>
+                        </button>
+
+                        <span className='course-level'>{level}</span>
+
+                        <h6 className='title'>
+                            <Link href={`/course-details/${id}`}>{title}</Link>
+                        </h6>
+
+                        <div className='course-rating'>
+                            <div className='rating'>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                                <i className='icon-23'></i>
+                            </div>
+                            <span className='rating-count'>
+                                ({rating} /{rating_count} Rating)
+                            </span>
+                        </div>
+
+                        <div className='course-price'>${course_price}</div>
+
+                        <p>{short_desc}</p>
+
+                        <ul className='course-meta'>
+                            <li>
+                                <i className='icon-24'></i>
+                                {lesson} Lessons
+                            </li>
+                            <li>
+                                <i className='icon-25'></i>
+                                {student} Students
+                            </li>
+                        </ul>
+
+                        <a
+                            onClick={() => handleAddToCart(course)}
+                            className='edu-btn btn-secondary btn-small'
+                            style={{ cursor: 'pointer' }}
+                        >
+                            {cartCourses.some(item => item.id === id)
+                                ? 'Added to cart'
+                                : 'Add to cart'}
+                            <i className='icon-4'></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SingleCourseTwo;
diff --git a/src/components/common/single-instagram.jsx b/src/components/common/single-instagram.jsx
deleted file mode 100644
index a5d7c24..0000000
--- a/src/components/common/single-instagram.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-function SingleInstagram({ img, name }) {
-    return (
-        <div className="col-xl-2 col-md-4 col-sm-6">
-            <div className="instagram-grid">
-                <a href="#">
-                    <img src={`/assets/images/instagram/instagram-${img}.webp`} alt="instagram" />
-                    <span className="user-info">
-                        <span className="icon"><i className="icon-instagram"></i></span>
-                        <span className="user-name">{name}</span>
-                    </span>
-                </a>
-            </div>
-        </div>
-    )
-}
-
-export default SingleInstagram;
\ No newline at end of file
diff --git a/src/components/common/single-instagram.tsx b/src/components/common/single-instagram.tsx
new file mode 100644
index 0000000..7e6ee65
--- /dev/null
+++ b/src/components/common/single-instagram.tsx
@@ -0,0 +1,24 @@
+function SingleInstagram({ img, name }) {
+    return (
+        <div className='col-xl-2 col-md-4 col-sm-6'>
+            <div className='instagram-grid'>
+                <a href='#'>
+                    <picture>
+                        <img
+                            src={`/assets/images/instagram/instagram-${img}.webp`}
+                            alt='instagram'
+                        />
+                    </picture>
+                    <span className='user-info'>
+                        <span className='icon'>
+                            <i className='icon-instagram'></i>
+                        </span>
+                        <span className='user-name'>{name}</span>
+                    </span>
+                </a>
+            </div>
+        </div>
+    );
+}
+
+export default SingleInstagram;
diff --git a/src/components/common/theme.jsx b/src/components/common/theme.jsx
deleted file mode 100644
index 7c431e6..0000000
--- a/src/components/common/theme.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useTheme } from 'next-themes';
-
-const Theme = () => {
-    const { theme, setTheme } = useTheme();
-    return (
-        <>  
-            <div className="dark-light-wrapper">
-                <label htmlFor="dark-light-checkbox" className="dark-light-label">
-                    <input type="checkbox" className="dark-light-checkbox" id="dark-light-checkbox" />
-                    <p 
-                        className="switcher swith-to-light"
-                        onClick={() => setTheme( theme === 'light' ? 'dark' : 'light' )}
-                    >Light
-                    </p>
-
-                    <p 
-                        className="switcher swith-to-dark"
-                        onClick={() => setTheme( theme === 'light' ? 'dark' : 'light' )}
-                    >Dark
-                    </p>
-                    
-                    <div className="dark-light-ball">
-                        <div className="dark-light-ball-inner" onClick={() => setTheme( theme === 'light' ? 'dark' : 'light' )}>
-                            <i 
-                                className="sun-icon ri-sun-fill"
-                                onClick={() => setTheme('dark')}
-                            ></i>
-                            <i 
-                                className="moon-icon ri-moon-fill"
-                                onClick={() => setTheme('light')}
-                            ></i>
-                        </div>
-                    </div>
-                </label>
-            </div>
-        </>
-    )
-}
-
-export default Theme;
\ No newline at end of file
diff --git a/src/components/common/theme.tsx b/src/components/common/theme.tsx
new file mode 100644
index 0000000..041ad91
--- /dev/null
+++ b/src/components/common/theme.tsx
@@ -0,0 +1,49 @@
+import { useTheme } from 'next-themes';
+
+const Theme = () => {
+    const { theme, setTheme } = useTheme();
+    return (
+        <>
+            <div className='dark-light-wrapper'>
+                <label htmlFor='dark-light-checkbox' className='dark-light-label'>
+                    <input
+                        type='checkbox'
+                        className='dark-light-checkbox'
+                        id='dark-light-checkbox'
+                    />
+                    <p
+                        className='switcher swith-to-light'
+                        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+                    >
+                        Light
+                    </p>
+
+                    <p
+                        className='switcher swith-to-dark'
+                        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+                    >
+                        Dark
+                    </p>
+
+                    <div className='dark-light-ball'>
+                        <div
+                            className='dark-light-ball-inner'
+                            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+                        >
+                            <i
+                                className='sun-icon ri-sun-fill'
+                                onClick={() => setTheme('dark')}
+                            ></i>
+                            <i
+                                className='moon-icon ri-moon-fill'
+                                onClick={() => setTheme('light')}
+                            ></i>
+                        </div>
+                    </div>
+                </label>
+            </div>
+        </>
+    );
+};
+
+export default Theme;
diff --git a/src/components/contact-me/contact-me-area.jsx b/src/components/contact-me/contact-me-area.jsx
deleted file mode 100644
index b54d377..0000000
--- a/src/components/contact-me/contact-me-area.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-import { SocialShare } from '../social-share';
-
-const ContactMeArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <section className="section-gap-equal contact-me-area">
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-xl-9">
-                        <div className="contact-me">
-                            <div className="inner">
-                                <div className="thumbnail">
-                                    <div className="thumb">
-                                        <img src="/assets/images/others/contact-me.jpg" alt="Contact Me" />
-                                    </div>
-                                    <ul className="shape-group">
-                                        <motion.li className="shape-1 scene"
-                                            animate={ {
-                                                x: mouseReverse(30).x,
-                                                y: mouseReverse(30).y
-                                            } }
-                                        >
-                                            <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                        </motion.li>
-                                        <motion.li className="shape-2 scene"
-                                            animate={ {
-                                                x: mouseDirection(30).x,
-                                                y: mouseDirection(30).y
-                                            } }
-                                        >
-                                            <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                                        </motion.li>
-                                        <li className="shape-3">
-                                            <img src="/assets/images/about/shape-07.png" alt="Shape" />
-                                        </li>
-                                    </ul>
-                                </div>
-
-                                <div className="contact-us-info">
-                                    <h3 className="heading-title">I will Answer all Your Questions</h3>
-                                    <ul className="address-list">
-                                        <li>
-                                            <h5 className="title">Address</h5>
-                                            <p>Studio 76d, Riley Ford, North Michael chester, CF99 6QQ</p>
-                                        </li>
-                                        <li>
-                                            <h5 className="title">Email</h5>
-                                            <p><a href="mailto:edublink@example.com">edublink@example.com</a></p>
-                                        </li>
-                                        <li>
-                                            <h5 className="title">Phone</h5>
-                                            <p><a href="tel:+0914135548598">(+091) 413 554 8598</a></p>
-                                        </li>
-                                    </ul>
-                                    <ul className="social-share">
-                                        <li><a href="#"><i className="icon-share-alt"></i></a></li>
-                                        <SocialShare/>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
-}
-
-export default ContactMeArea;
\ No newline at end of file
diff --git a/src/components/contact-me/contact-me-area.tsx b/src/components/contact-me/contact-me-area.tsx
new file mode 100644
index 0000000..a6dd091
--- /dev/null
+++ b/src/components/contact-me/contact-me-area.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+import { SocialShare } from '../social-share';
+
+const ContactMeArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <section className='section-gap-equal contact-me-area'>
+            <div className='container'>
+                <div className='row justify-content-center'>
+                    <div className='col-xl-9'>
+                        <div className='contact-me'>
+                            <div className='inner'>
+                                <div className='thumbnail'>
+                                    <div className='thumb'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/others/contact-me.jpg'
+                                                alt='Contact Me'
+                                            />
+                                        </picture>
+                                    </div>
+                                    <ul className='shape-group'>
+                                        <motion.li
+                                            className='shape-1 scene'
+                                            animate={{
+                                                x: mouseReverse(30).x,
+                                                y: mouseReverse(30).y,
+                                            }}
+                                        >
+                                            <picture>
+                                                <img
+                                                    src='/assets/images/about/shape-13.png'
+                                                    alt='Shape'
+                                                />
+                                            </picture>
+                                        </motion.li>
+                                        <motion.li
+                                            className='shape-2 scene'
+                                            animate={{
+                                                x: mouseDirection(30).x,
+                                                y: mouseDirection(30).y,
+                                            }}
+                                        >
+                                            <picture>
+                                                <img
+                                                    src='/assets/images/counterup/shape-02.png'
+                                                    alt='Shape'
+                                                />
+                                            </picture>
+                                        </motion.li>
+                                        <li className='shape-3'>
+                                            <picture>
+                                                <img
+                                                    src='/assets/images/about/shape-07.png'
+                                                    alt='Shape'
+                                                />
+                                            </picture>
+                                        </li>
+                                    </ul>
+                                </div>
+
+                                <div className='contact-us-info'>
+                                    <h3 className='heading-title'>
+                                        I will Answer all Your Questions
+                                    </h3>
+                                    <ul className='address-list'>
+                                        <li>
+                                            <h5 className='title'>Address</h5>
+                                            <p>
+                                                Studio 76d, Riley Ford, North Michael
+                                                chester, CF99 6QQ
+                                            </p>
+                                        </li>
+                                        <li>
+                                            <h5 className='title'>Email</h5>
+                                            <p>
+                                                <a href='mailto:edublink@example.com'>
+                                                    edublink@example.com
+                                                </a>
+                                            </p>
+                                        </li>
+                                        <li>
+                                            <h5 className='title'>Phone</h5>
+                                            <p>
+                                                <a href='tel:+0914135548598'>
+                                                    (+091) 413 554 8598
+                                                </a>
+                                            </p>
+                                        </li>
+                                    </ul>
+                                    <ul className='social-share'>
+                                        <li>
+                                            <a href='#'>
+                                                <i className='icon-share-alt'></i>
+                                            </a>
+                                        </li>
+                                        <SocialShare />
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ContactMeArea;
diff --git a/src/components/contact-me/contact-me-form-area.jsx b/src/components/contact-me/contact-me-form-area.jsx
deleted file mode 100644
index d1a7dfd..0000000
--- a/src/components/contact-me/contact-me-form-area.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-import ContactMeForm from '../forms/contact-me-form';
-
-const ContactMeFormArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <section className="edu-section-gap contact-form-area">
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-lg-8">
-                        <div className="contact-form">
-                            <div className="section-title section-center">
-                                <h3 className="title">Just Drop Me a Line</h3>
-                            </div>
-                            <ContactMeForm />
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-15.png" alt="shape" />
-                </motion.li>
-                <motion.li className="shape-2 scene"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/cta/shape-04.png" alt="shape" />
-                </motion.li>
-                <motion.li className="shape-3 scene"
-                    animate={ {
-                        x: mouseReverse(45).x,
-                        y: mouseReverse(45).y
-                    } }
-                >
-                    <span></span>
-                </motion.li>
-                <motion.li className="shape-4 scene"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-13.png" alt="shape" />
-                </motion.li>
-            </ul>
-        </section>
-    )
-}
-
-export default ContactMeFormArea;
\ No newline at end of file
diff --git a/src/components/contact-me/contact-me-form-area.tsx b/src/components/contact-me/contact-me-form-area.tsx
new file mode 100644
index 0000000..de12a78
--- /dev/null
+++ b/src/components/contact-me/contact-me-form-area.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+import ContactMeForm from '../forms/contact-me-form';
+
+const ContactMeFormArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <section className='edu-section-gap contact-form-area'>
+            <div className='container'>
+                <div className='row justify-content-center'>
+                    <div className='col-lg-8'>
+                        <div className='contact-form'>
+                            <div className='section-title section-center'>
+                                <h3 className='title'>Just Drop Me a Line</h3>
+                            </div>
+                            <ContactMeForm />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-15.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/cta/shape-04.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    animate={{
+                        x: mouseReverse(45).x,
+                        y: mouseReverse(45).y,
+                    }}
+                >
+                    <span></span>
+                </motion.li>
+                <motion.li
+                    className='shape-4 scene'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-13.png' alt='shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </section>
+    );
+};
+
+export default ContactMeFormArea;
diff --git a/src/components/contact-me/index.jsx b/src/components/contact-me/index.tsx
similarity index 65%
rename from src/components/contact-me/index.jsx
rename to src/components/contact-me/index.tsx
index c56312c..cdaf096 100644
--- a/src/components/contact-me/index.jsx
+++ b/src/components/contact-me/index.tsx
@@ -7,15 +7,15 @@ import ContactMeFormArea from './contact-me-form-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Contact Me" subtitle="Contact Me" />
-                <ContactMeArea/>
-                <ContactMeFormArea/>
+                <BreadcrumbThree title='Contact Me' subtitle='Contact Me' />
+                <ContactMeArea />
+                <ContactMeFormArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/contact-us/contact-map.jsx b/src/components/contact-us/contact-map.jsx
deleted file mode 100644
index caf8472..0000000
--- a/src/components/contact-us/contact-map.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-const ContactMap = () => {
-    return (
-        <div className="google-map-area">
-            <div className="mapouter">
-                <div className="gmap_canvas">
-                    <iframe id="gmap_canvas" src="https://maps.google.com/maps?q=melbourne,%20Australia&t=&z=15&ie=UTF8&iwloc=&output=embed" frameBorder="0" scrolling="no" marginHeight="0" marginWidth="0"></iframe>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default ContactMap;
\ No newline at end of file
diff --git a/src/components/contact-us/contact-map.tsx b/src/components/contact-us/contact-map.tsx
new file mode 100644
index 0000000..8db1289
--- /dev/null
+++ b/src/components/contact-us/contact-map.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const ContactMap = () => {
+    return (
+        <div className='google-map-area'>
+            <div className='mapouter'>
+                <div className='gmap_canvas'>
+                    <iframe
+                        id='gmap_canvas'
+                        src='https://maps.google.com/maps?q=melbourne,%20Australia&t=&z=15&ie=UTF8&iwloc=&output=embed'
+                        frameBorder='0'
+                        scrolling='no'
+                        marginHeight={0}
+                        marginWidth={0}
+                    ></iframe>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ContactMap;
diff --git a/src/components/contact-us/contact-us-area.jsx b/src/components/contact-us/contact-us-area.jsx
deleted file mode 100644
index a707e7c..0000000
--- a/src/components/contact-us/contact-us-area.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-import ContactUsForm from '../forms/contact-us-form';
-import { SocialShare } from '../social-share';
-
-const ContactUsArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <section className="contact-us-area">
-            <div className="container">
-                <div className="row g-5">
-                    <div className="col-xl-4 col-lg-6">
-                        <div className="contact-us-info">
-                            <h3 className="heading-title">{"We're"} Always Eager to Hear From You!</h3>
-                            <ul className="address-list">
-                                <li>
-                                    <h5 className="title">Address</h5>
-                                    <p>Studio 76d, Riley Ford, North Michael chester, CF99 6QQ</p>
-                                </li>
-                                <li>
-                                    <h5 className="title">Email</h5>
-                                    <p><a href="mailto:edublink@example.com">edublink@example.com</a></p>
-                                </li>
-                                <li>
-                                    <h5 className="title">Phone</h5>
-                                    <p><a href="tel:+0914135548598">(+091) 413 554 8598</a></p>
-                                </li>
-                            </ul>
-                            <ul className="social-share">
-                                <li><a href="#"><i className="icon-share-alt"></i></a></li>
-                                <SocialShare/>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div className="offset-xl-2 col-lg-6">
-                        <div className="contact-form form-style-2">
-                            <div className="section-title">
-                                <h4 className="title">Get In Touch</h4>
-                                <p>Fill out this form for booking a consultant advising session.</p>
-                            </div>
-                            {/* form start */}
-                            <ContactUsForm />
-                            {/* form end */}
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
-}
-
-export default ContactUsArea;
\ No newline at end of file
diff --git a/src/components/contact-us/contact-us-area.tsx b/src/components/contact-us/contact-us-area.tsx
new file mode 100644
index 0000000..741369a
--- /dev/null
+++ b/src/components/contact-us/contact-us-area.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+import ContactUsForm from '../forms/contact-us-form';
+import { SocialShare } from '../social-share';
+
+const ContactUsArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <section className='contact-us-area'>
+            <div className='container'>
+                <div className='row g-5'>
+                    <div className='col-xl-4 col-lg-6'>
+                        <div className='contact-us-info'>
+                            <h3 className='heading-title'>
+                                {"We're"} Always Eager to Hear From You!
+                            </h3>
+                            <ul className='address-list'>
+                                <li>
+                                    <h5 className='title'>Address</h5>
+                                    <p>
+                                        Studio 76d, Riley Ford, North Michael chester,
+                                        CF99 6QQ
+                                    </p>
+                                </li>
+                                <li>
+                                    <h5 className='title'>Email</h5>
+                                    <p>
+                                        <a href='mailto:edublink@example.com'>
+                                            edublink@example.com
+                                        </a>
+                                    </p>
+                                </li>
+                                <li>
+                                    <h5 className='title'>Phone</h5>
+                                    <p>
+                                        <a href='tel:+0914135548598'>
+                                            (+091) 413 554 8598
+                                        </a>
+                                    </p>
+                                </li>
+                            </ul>
+                            <ul className='social-share'>
+                                <li>
+                                    <a href='#'>
+                                        <i className='icon-share-alt'></i>
+                                    </a>
+                                </li>
+                                <SocialShare />
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className='offset-xl-2 col-lg-6'>
+                        <div className='contact-form form-style-2'>
+                            <div className='section-title'>
+                                <h4 className='title'>Get In Touch</h4>
+                                <p>
+                                    Fill out this form for booking a consultant advising
+                                    session.
+                                </p>
+                            </div>
+                            {/* form start */}
+                            <ContactUsForm />
+                            {/* form end */}
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/counterup/shape-02.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ContactUsArea;
diff --git a/src/components/contact-us/index.jsx b/src/components/contact-us/index.tsx
similarity index 65%
rename from src/components/contact-us/index.jsx
rename to src/components/contact-us/index.tsx
index e20bfd0..9de9ab8 100644
--- a/src/components/contact-us/index.jsx
+++ b/src/components/contact-us/index.tsx
@@ -4,19 +4,18 @@ import BreadcrumbThree from '../breadcrumb/breadcrumb-3';
 import ContactMap from './contact-map';
 import ContactUsArea from './contact-us-area';
 
-
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Contact Us" subtitle="Contact Us" />
-                <ContactUsArea/>
-                <ContactMap/>
+                <BreadcrumbThree title='Contact Us' subtitle='Contact Us' />
+                <ContactUsArea />
+                <ContactMap />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/course-details-2/course-details-two.jsx b/src/components/course-details-2/course-details-two.jsx
deleted file mode 100644
index cd3b93d..0000000
--- a/src/components/course-details-2/course-details-two.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import React from 'react';
-import CourseDetailsSidebar from '../common/sidebar/course-details-sidebar';
-import SingleComment from '../course-details/single-comment';
-import SingleProgressbar from '../course-details/single-progressbar';
-import SingleAccordion from './single-accordion';
-
-const CourseDetailsTwo = ({ course }) => {
-  const { course_desc, course_desc_2, learn_list, course_desc_3, curriculum_desc, course_lessons, instructor_img, instructor_title, instructor_desc, social_links, reviews, instructor, rating, rating_count } = course || {};
-    return (
-        <section className="edu-section-gap course-details-area">
-            <div className="container">
-                <div className="row row--30">
-                    <div className="col-lg-8">
-                        <div className="course-details-content course-details-2">
-                            <div className="course-overview">
-                                <h3 className="heading-title" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">About This Course</h3>
-                                <p data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">{course_desc}</p>
-                                <p data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">{course_desc_2}</p>
-                                <div className="border-box">
-                                    <h5 className="title" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">What You’ll Learn?</h5>
-                                    <div className="row g-5">
-                                        <div className="col-lg-6" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                            <ul>
-                                                <li>Learn to use Python professionally, learning both Python 2 & Python 3!</li>
-                                                <li>Build 6 beautiful real-world projects for your portfolio (not boring toy apps)</li>
-                                            </ul>
-                                        </div>
-
-                                        <div className="col-lg-6" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                            <ul>
-                                                <li>Understand the Theory behind Vue.js and use it in Real Projects</li>
-                                                <li>Create responsive, accessible, and beautiful layouts</li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <h3 className="heading-title" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">Requirements</h3>
-                                <ul className="mb--90" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                    <li>No prior knowledge of Wordpress is required as everything will be covered in this course.</li>
-                                    <li>Basic HTML and CSS knowledge helps, but {"isn't"} a must-have</li>
-                                    <li>You {"don't"} need any coding experience at all. That is the beauty of Wordpress.</li>
-                                    <li>Basic JavaScript knowledge is required</li>
-                                </ul>
-
-                                <h3 className="heading-title" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">Target Audience</h3>
-                                <ul className="mb--90" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                    <li>Newcomer as well as experienced frontend developers interested in learning a modern JavaScript framework</li>
-                                    <li>If you want to learn to master Wordpress without getting bogged down with technical jargon, this course is for you.</li>
-                                    <li>This course is for you if you want to build a website, whether for personal or business reasons.</li>
-                                    <li>This course is perfect for you if you are taking over an existing Wordpress website, or want to build one from</li>
-                                </ul>
-                            </div>
-
-                            <div className="course-curriculam mb--90">
-                                <h3 className="heading-title" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">Topics for This Course</h3>
-                                <p data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua.</p>
-                                <div className="accordion edu-accordion" id="accordionExample" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-
-                                    <SingleAccordion show={true} id="1" title="Course Introduction" desc={[
-                                        { title: 'Introduction', icon: 'icon-68' },
-                                        { title: 'Course Overview', icon: 'icon-68' },
-                                        { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-                                        { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-                                        { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-                                        { title: 'Embedding PHP in HTML', icon: 'icon-68' }
-                                    ]} />
-                                    <SingleAccordion id="2" title="JavaScript Language Basics" desc={[
-                                        { title: 'Introduction', icon: 'icon-68' },
-                                        { title: 'Course Overview', icon: 'icon-68' },
-                                        { title: 'Course Overview', badge_list: true, question: 2, minutes: 12 },
-                                        { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-                                        { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-                                        { title: 'Embedding PHP in HTML', icon: 'icon-68' }
-                                    ]} />
-                                    <SingleAccordion id="3" title="Components & Databinding" desc={[
-                                        { title: 'Introduction', icon: 'icon-68' },
-                                        { title: 'Course Overview', icon: 'icon-68' },
-                                        { title: 'Course Overview', badge_list: true, question: 4, minutes: 15 },
-                                        { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-                                        { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-                                        { title: 'Embedding PHP in HTML', icon: 'icon-68' }
-                                    ]} />
-                                    <SingleAccordion id="4" title="Product Management Leadership" desc={[
-                                        { title: 'Introduction', icon: 'icon-68' },
-                                        { title: 'Course Overview', icon: 'icon-68' },
-                                        { title: 'Course Overview', badge_list: true, question: 6, minutes: 18 },
-                                        { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-                                        { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-                                        { title: 'Embedding PHP in HTML', icon: 'icon-68' }
-                                    ]} />
-                                </div>
-                            </div>
-
-                            <div className="course-instructor-wrap mb--90" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <h3 className="heading-title">Your Instructors</h3>
-                                <div className="course-instructor">
-                                    <div className="thumbnail">
-                                        <img src={`/assets/images/team/team-02/${instructor_img}`} alt="team images" />
-                                    </div>
-
-                                    <div className="author-content">
-                                        <h6 className="title">{instructor}</h6>
-                                        <span className="subtitle">{instructor_title}</span>
-                                        <p>{instructor_desc}</p>
-                                        <ul className="social-share">
-                                            {social_links?.map((social, i) => (
-                                                <li key={i}>
-                                                    <a href={social.link} target={social.target ? social.target : ''}>
-                                                        <i className={social.icon}></i>
-                                                    </a>
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="course-review" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <h3 className="heading-title">Student Feedback</h3>
-                                <p>{rating} average rating based on {rating_count} rating</p>
-                                <div className="row g-0 align-items-center">
-                                    <div className="col-sm-4">
-                                        <div className="rating-box">
-                                            <div className="rating-number">{rating}</div>
-                                            <div className="rating">
-                                                <i className="icon-23"></i>
-                                                <i className="icon-23"></i>
-                                                <i className="icon-23"></i>
-                                                <i className="icon-23"></i>
-                                                <i className="icon-23"></i>
-                                            </div>
-                                            <span>({rating_count} Review)</span>
-                                        </div>
-                                    </div>
-
-                                    <div className="col-lg-8">
-                                        <div className="review-wrapper">
-                                            <SingleProgressbar value={'100'} rating_value={rating_count} />
-                                            <SingleProgressbar value={'0'} rating_value={'0'} />
-                                            <SingleProgressbar value={'0'} rating_value={'0'} />
-                                            <SingleProgressbar value={'0'} rating_value={'0'} />
-                                            <SingleProgressbar value={'0'} rating_value={'0'} />
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="comment-area">
-                                    <h3 className="heading-title">Reviews</h3>
-                                    <div className="comment-list-wrapper">
-                                        {reviews?.map((review, i) => (
-                                            <SingleComment key={i} review={review} />
-                                        ))}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4">
-                        <CourseDetailsSidebar course={course} details_2={true} />
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
-}
-
-export default CourseDetailsTwo;
\ No newline at end of file
diff --git a/src/components/course-details-2/course-details-two.tsx b/src/components/course-details-2/course-details-two.tsx
new file mode 100644
index 0000000..ff792b8
--- /dev/null
+++ b/src/components/course-details-2/course-details-two.tsx
@@ -0,0 +1,414 @@
+import React from 'react';
+import CourseDetailsSidebar from '../common/sidebar/course-details-sidebar';
+import SingleComment from '../course-details/single-comment';
+import SingleProgressbar from '../course-details/single-progressbar';
+import SingleAccordion from './single-accordion';
+
+const CourseDetailsTwo = ({ course }) => {
+    const {
+        course_desc,
+        course_desc_2,
+        learn_list,
+        course_desc_3,
+        curriculum_desc,
+        course_lessons,
+        instructor_img,
+        instructor_title,
+        instructor_desc,
+        social_links,
+        reviews,
+        instructor,
+        rating,
+        rating_count,
+    } = course || {};
+    return (
+        <section className='edu-section-gap course-details-area'>
+            <div className='container'>
+                <div className='row row--30'>
+                    <div className='col-lg-8'>
+                        <div className='course-details-content course-details-2'>
+                            <div className='course-overview'>
+                                <h3
+                                    className='heading-title'
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    About This Course
+                                </h3>
+                                <p
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    {course_desc}
+                                </p>
+                                <p
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    {course_desc_2}
+                                </p>
+                                <div className='border-box'>
+                                    <h5
+                                        className='title'
+                                        data-sal-delay='150'
+                                        data-sal='slide-up'
+                                        data-sal-duration='800'
+                                    >
+                                        What You’ll Learn?
+                                    </h5>
+                                    <div className='row g-5'>
+                                        <div
+                                            className='col-lg-6'
+                                            data-sal-delay='150'
+                                            data-sal='slide-up'
+                                            data-sal-duration='800'
+                                        >
+                                            <ul>
+                                                <li>
+                                                    Learn to use Python professionally,
+                                                    learning both Python 2 & Python 3!
+                                                </li>
+                                                <li>
+                                                    Build 6 beautiful real-world projects
+                                                    for your portfolio (not boring toy
+                                                    apps)
+                                                </li>
+                                            </ul>
+                                        </div>
+
+                                        <div
+                                            className='col-lg-6'
+                                            data-sal-delay='150'
+                                            data-sal='slide-up'
+                                            data-sal-duration='800'
+                                        >
+                                            <ul>
+                                                <li>
+                                                    Understand the Theory behind Vue.js
+                                                    and use it in Real Projects
+                                                </li>
+                                                <li>
+                                                    Create responsive, accessible, and
+                                                    beautiful layouts
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <h3
+                                    className='heading-title'
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    Requirements
+                                </h3>
+                                <ul
+                                    className='mb--90'
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    <li>
+                                        No prior knowledge of Wordpress is required as
+                                        everything will be covered in this course.
+                                    </li>
+                                    <li>
+                                        Basic HTML and CSS knowledge helps, but {"isn't"}{' '}
+                                        a must-have
+                                    </li>
+                                    <li>
+                                        You {"don't"} need any coding experience at all.
+                                        That is the beauty of Wordpress.
+                                    </li>
+                                    <li>Basic JavaScript knowledge is required</li>
+                                </ul>
+
+                                <h3
+                                    className='heading-title'
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    Target Audience
+                                </h3>
+                                <ul
+                                    className='mb--90'
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    <li>
+                                        Newcomer as well as experienced frontend
+                                        developers interested in learning a modern
+                                        JavaScript framework
+                                    </li>
+                                    <li>
+                                        If you want to learn to master Wordpress without
+                                        getting bogged down with technical jargon, this
+                                        course is for you.
+                                    </li>
+                                    <li>
+                                        This course is for you if you want to build a
+                                        website, whether for personal or business reasons.
+                                    </li>
+                                    <li>
+                                        This course is perfect for you if you are taking
+                                        over an existing Wordpress website, or want to
+                                        build one from
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div className='course-curriculam mb--90'>
+                                <h3
+                                    className='heading-title'
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    Topics for This Course
+                                </h3>
+                                <p
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor inc idid unt ut labore et
+                                    dolore magna aliqua.
+                                </p>
+                                <div
+                                    className='accordion edu-accordion'
+                                    id='accordionExample'
+                                    data-sal-delay='150'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                >
+                                    <SingleAccordion
+                                        show={true}
+                                        id='1'
+                                        title='Course Introduction'
+                                        desc={[
+                                            { title: 'Introduction', icon: 'icon-68' },
+                                            { title: 'Course Overview', icon: 'icon-68' },
+                                            {
+                                                title: 'Course Overview',
+                                                badge_list: true,
+                                                question: 0,
+                                                minutes: 10,
+                                            },
+                                            {
+                                                title: 'Course Exercise / Reference Files',
+                                                icon: 'icon-68',
+                                            },
+                                            {
+                                                title: 'Code Editor Installation (Optional if you have one)',
+                                                icon: 'icon-68',
+                                            },
+                                            {
+                                                title: 'Embedding PHP in HTML',
+                                                icon: 'icon-68',
+                                            },
+                                        ]}
+                                    />
+                                    <SingleAccordion
+                                        id='2'
+                                        title='JavaScript Language Basics'
+                                        desc={[
+                                            { title: 'Introduction', icon: 'icon-68' },
+                                            { title: 'Course Overview', icon: 'icon-68' },
+                                            {
+                                                title: 'Course Overview',
+                                                badge_list: true,
+                                                question: 2,
+                                                minutes: 12,
+                                            },
+                                            {
+                                                title: 'Course Exercise / Reference Files',
+                                                icon: 'icon-68',
+                                            },
+                                            {
+                                                title: 'Code Editor Installation (Optional if you have one)',
+                                                icon: 'icon-68',
+                                            },
+                                            {
+                                                title: 'Embedding PHP in HTML',
+                                                icon: 'icon-68',
+                                            },
+                                        ]}
+                                    />
+                                    <SingleAccordion
+                                        id='3'
+                                        title='Components & Databinding'
+                                        desc={[
+                                            { title: 'Introduction', icon: 'icon-68' },
+                                            { title: 'Course Overview', icon: 'icon-68' },
+                                            {
+                                                title: 'Course Overview',
+                                                badge_list: true,
+                                                question: 4,
+                                                minutes: 15,
+                                            },
+                                            {
+                                                title: 'Course Exercise / Reference Files',
+                                                icon: 'icon-68',
+                                            },
+                                            {
+                                                title: 'Code Editor Installation (Optional if you have one)',
+                                                icon: 'icon-68',
+                                            },
+                                            {
+                                                title: 'Embedding PHP in HTML',
+                                                icon: 'icon-68',
+                                            },
+                                        ]}
+                                    />
+                                    <SingleAccordion
+                                        id='4'
+                                        title='Product Management Leadership'
+                                        desc={[
+                                            { title: 'Introduction', icon: 'icon-68' },
+                                            { title: 'Course Overview', icon: 'icon-68' },
+                                            {
+                                                title: 'Course Overview',
+                                                badge_list: true,
+                                                question: 6,
+                                                minutes: 18,
+                                            },
+                                            {
+                                                title: 'Course Exercise / Reference Files',
+                                                icon: 'icon-68',
+                                            },
+                                            {
+                                                title: 'Code Editor Installation (Optional if you have one)',
+                                                icon: 'icon-68',
+                                            },
+                                            {
+                                                title: 'Embedding PHP in HTML',
+                                                icon: 'icon-68',
+                                            },
+                                        ]}
+                                    />
+                                </div>
+                            </div>
+
+                            <div
+                                className='course-instructor-wrap mb--90'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <h3 className='heading-title'>Your Instructors</h3>
+                                <div className='course-instructor'>
+                                    <div className='thumbnail'>
+                                        <picture>
+                                            <img
+                                                src={`/assets/images/team/team-02/${instructor_img}`}
+                                                alt='team images'
+                                            />
+                                        </picture>
+                                    </div>
+
+                                    <div className='author-content'>
+                                        <h6 className='title'>{instructor}</h6>
+                                        <span className='subtitle'>
+                                            {instructor_title}
+                                        </span>
+                                        <p>{instructor_desc}</p>
+                                        <ul className='social-share'>
+                                            {social_links?.map((social, i) => (
+                                                <li key={i}>
+                                                    <a
+                                                        href={social.link}
+                                                        target={
+                                                            social.target
+                                                                ? social.target
+                                                                : ''
+                                                        }
+                                                    >
+                                                        <i className={social.icon}></i>
+                                                    </a>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div
+                                className='course-review'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <h3 className='heading-title'>Student Feedback</h3>
+                                <p>
+                                    {rating} average rating based on {rating_count} rating
+                                </p>
+                                <div className='row g-0 align-items-center'>
+                                    <div className='col-sm-4'>
+                                        <div className='rating-box'>
+                                            <div className='rating-number'>{rating}</div>
+                                            <div className='rating'>
+                                                <i className='icon-23'></i>
+                                                <i className='icon-23'></i>
+                                                <i className='icon-23'></i>
+                                                <i className='icon-23'></i>
+                                                <i className='icon-23'></i>
+                                            </div>
+                                            <span>({rating_count} Review)</span>
+                                        </div>
+                                    </div>
+
+                                    <div className='col-lg-8'>
+                                        <div className='review-wrapper'>
+                                            <SingleProgressbar
+                                                value={'100'}
+                                                rating_value={rating_count}
+                                            />
+                                            <SingleProgressbar
+                                                value={'0'}
+                                                rating_value={'0'}
+                                            />
+                                            <SingleProgressbar
+                                                value={'0'}
+                                                rating_value={'0'}
+                                            />
+                                            <SingleProgressbar
+                                                value={'0'}
+                                                rating_value={'0'}
+                                            />
+                                            <SingleProgressbar
+                                                value={'0'}
+                                                rating_value={'0'}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className='comment-area'>
+                                    <h3 className='heading-title'>Reviews</h3>
+                                    <div className='comment-list-wrapper'>
+                                        {reviews?.map((review, i) => (
+                                            <SingleComment key={i} review={review} />
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-4'>
+                        <CourseDetailsSidebar course={course} details_2={true} />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default CourseDetailsTwo;
diff --git a/src/components/course-details-2/index.jsx b/src/components/course-details-2/index.tsx
similarity index 68%
rename from src/components/course-details-2/index.jsx
rename to src/components/course-details-2/index.tsx
index e7272d0..6f2a4fe 100644
--- a/src/components/course-details-2/index.jsx
+++ b/src/components/course-details-2/index.tsx
@@ -3,17 +3,17 @@ import { Footer, Header } from '../../layout';
 import CourseBreadcrumb from '../breadcrumb/breadcrumb-5';
 import CourseDetailsTwo from './course-details-two';
 
-const index = ({course}) => {
+const index = ({ course }) => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <CourseBreadcrumb course={course} subtitle="Course Details" />
+                <CourseBreadcrumb course={course} subtitle='Course Details' />
                 <CourseDetailsTwo course={course} />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/course-details-2/single-accordion.jsx b/src/components/course-details-2/single-accordion.jsx
deleted file mode 100644
index 07575a8..0000000
--- a/src/components/course-details-2/single-accordion.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-
-const SingleAccordion = ({ show = false, id, title, desc }) => {
-    return (
-        <div className="accordion-item">
-            <h3 className="accordion-header" id="headingOne">
-                <button className={`accordion-button ${show ? '' : 'collapsed'}`} type="button" data-bs-toggle="collapse" data-bs-target={`#question-${id}`} aria-expanded={show ? 'true' : 'false'}>
-                    {title}
-                </button>
-            </h3>
-
-            <div id={`question-${id}`} className={`accordion-collapse collapse ${show?'show':''}`} data-bs-parent="#faq-accordion">
-                <div className="accordion-body">
-                    <div className="course-lesson">
-                        <ul>
-                            {desc.map((list, i) => (
-                                <li key={i}>
-                                    {list.title && 
-                                        <div className="text">
-                                            <i className="icon-65"></i>
-                                            {list.title}
-                                        </div>
-                                    }
-                                    {!list?.badge_list && 
-                                        <div className="icon">
-                                            <i className={list?.icon}></i>
-                                        </div>
-                                    }
-                                    {list?.badge_list && 
-                                        <div className="badge-list">
-                                            <span className="badge badge-primary">{list?.question} Question</span>
-                                            <span className="badge badge-secondary">{list?.minutes} Minutes</span>
-                                        </div>
-                                    }
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default SingleAccordion;
\ No newline at end of file
diff --git a/src/components/course-details-2/single-accordion.tsx b/src/components/course-details-2/single-accordion.tsx
new file mode 100644
index 0000000..4857685
--- /dev/null
+++ b/src/components/course-details-2/single-accordion.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+const SingleAccordion = ({ show = false, id, title, desc }) => {
+    return (
+        <div className='accordion-item'>
+            <h3 className='accordion-header' id='headingOne'>
+                <button
+                    className={`accordion-button ${show ? '' : 'collapsed'}`}
+                    type='button'
+                    data-bs-toggle='collapse'
+                    data-bs-target={`#question-${id}`}
+                    aria-expanded={show ? 'true' : 'false'}
+                >
+                    {title}
+                </button>
+            </h3>
+
+            <div
+                id={`question-${id}`}
+                className={`accordion-collapse collapse ${show ? 'show' : ''}`}
+                data-bs-parent='#faq-accordion'
+            >
+                <div className='accordion-body'>
+                    <div className='course-lesson'>
+                        <ul>
+                            {desc.map((list, i) => (
+                                <li key={i}>
+                                    {list.title && (
+                                        <div className='text'>
+                                            <i className='icon-65'></i>
+                                            {list.title}
+                                        </div>
+                                    )}
+                                    {!list?.badge_list && (
+                                        <div className='icon'>
+                                            <i className={list?.icon}></i>
+                                        </div>
+                                    )}
+                                    {list?.badge_list && (
+                                        <div className='badge-list'>
+                                            <span className='badge badge-primary'>
+                                                {list?.question} Question
+                                            </span>
+                                            <span className='badge badge-secondary'>
+                                                {list?.minutes} Minutes
+                                            </span>
+                                        </div>
+                                    )}
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SingleAccordion;
diff --git a/src/components/course-details-3/course-details-three.jsx b/src/components/course-details-3/course-details-three.jsx
deleted file mode 100644
index 6cbd4a2..0000000
--- a/src/components/course-details-3/course-details-three.jsx
+++ /dev/null
@@ -1,227 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import useModal from '../../hooks/use-modal';
-import VideoModal from '../common/popup-modal/video-modal';
-import DetailsSidebar from './details-sidebar';
-
-const CourseDetailsThree = () => {
-    const { isVideoOpen, setIsVideoOpen } = useModal();
-    return <>
-        <section className="edu-section-gap course-details-area">
-            <div className="container">
-                <div className="row row--30">
-                    <div className="col-lg-8">
-                        <div className="course-details-content course-details-3">
-                            <div className="entry-content">
-                                <h2 className="title">Global Education Fall Meeting for Everyone</h2>
-                                <ul className="course-meta">
-                                    <li><i className="icon-58"></i>by Edward Norton</li>
-                                    <li><i className="icon-59"></i>English</li>
-                                    <li className="course-rating">
-                                        <div className="rating">
-                                            <i className="icon-23"></i>
-                                            <i className="icon-23"></i>
-                                            <i className="icon-23"></i>
-                                            <i className="icon-23"></i>
-                                            <i className="icon-23"></i>
-                                        </div>
-                                        <span className="rating-count">(720 Rating)</span>
-                                    </li>
-                                </ul>
-
-                                <div className="thumbnail">
-                                    <img src="/assets/images/course/course-main/course-45.jpg" alt="Course" />
-                                    <a onClick={() => setIsVideoOpen(true)} style={{ cursor: 'pointer' }}
-                                    className="video-play-btn video-popup-activation">
-                                        <i className="icon-18"></i>
-                                    </a>
-                                </div>
-                            </div>
-
-                            <div className="course-enroll-box">
-                                <div className="single-item">
-                                    <h6 className="title">Current Status</h6>
-                                    <span className="enroll-status">Not Enrolled</span>
-                                </div>
-                                <div className="single-item course-price">
-                                    <h6 className="title">Price</h6>
-                                    <span className="price">$70.00</span>
-                                </div>
-                                <div className="single-item">
-                                    <h6 className="title">Get Started</h6>
-                                    <a href="#" className="edu-btn btn-medium enroll-btn">Take This Course</a>
-                                    <div className="login-btn">
-                                        <span>or</span>
-                                        <Link href="/sign-in">
-                                            Login
-                                        </Link>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="nav-tab-wrap">
-                                <ul className="nav nav-tabs" id="myTab" role="tablist">
-                                    <li className="nav-item" role="presentation">
-                                        <button className="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">Course</button>
-                                    </li>
-
-                                    <li className="nav-item" role="presentation">
-                                        <button className="nav-link" id="carriculam-tab" data-bs-toggle="tab" data-bs-target="#carriculam" type="button" role="tab" aria-controls="carriculam" aria-selected="false">Materials</button>
-                                    </li>
-                                </ul>
-
-                                <div className="tab-content" id="myTabContent">
-                                    <div className="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
-                                        <div className="course-tab-content">
-                                            <div className="course-overview">
-                                                <h3 className="heading-title">Course Description</h3>
-                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.</p>
-
-                                                <p>Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.</p>
-
-                                                <ul className="mb--50">
-                                                    <li>No prior knowledge of Wordpress is required as everything will be covered in this course.</li>
-                                                    <li>Basic HTML and CSS knowledge helps, but {"isn't"} a must-have</li>
-                                                    <li>You {"don't"} need any coding experience at all. That is the beauty of Wordpress.</li>
-                                                    <li>Basic JavaScript knowledge is required</li>
-                                                </ul>
-
-                                                <h5 className="title">Key Features</h5>
-                                                <ul>
-                                                    <li>No prior knowledge of Wordpress is required as everything will be covered in this course.</li>
-                                                    <li>Basic HTML and CSS knowledge helps, but {"isn't"} a must-have</li>
-                                                    <li>Basic JavaScript knowledge is required</li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div className="tab-pane fade" id="carriculam" role="tabpanel" aria-labelledby="carriculam-tab">
-                                        <div className="course-tab-content">
-                                            <div className="course-curriculam">
-                                                <div className="heading-title">
-                                                    <h3 className="title">Course Content</h3>
-                                                    <div className="expand-btn">
-                                                        <button className="edu-btn btn-medium">Expand All <i className="icon-31"></i></button>
-                                                    </div>
-                                                </div>
-
-                                                <div className="accordion edu-accordion" id="accordionExample">
-                                                    <h4 className="heading-title">Introduction</h4>
-                                                    <div className="accordion-item">
-                                                        <h3 className="accordion-header" id="headingOne">
-                                                            <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                                                                Lesson 1.1
-                                                            <span className="expand">Expand</span>
-                                                            </button>
-                                                        </h3>
-
-                                                        <div id="collapseOne" className="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
-                                                            <div className="accordion-body">
-                                                                <div className="course-lesson">
-                                                                    <div className="reading-status">
-                                                                        <h5 className="title"><i className="icon-65"></i> Lesson Content</h5>
-                                                                        <span className="complete-text">
-                                                                            <span>0% COMPLETE</span>
-                                                                            <span>0/1 Steps</span>
-                                                                        </span>
-                                                                    </div>
-
-                                                                    <ul>
-                                                                        <li>Topic 1 – Grounding</li>
-                                                                        <li>Topic 2 – Igniting</li>
-                                                                        <li>Topic 3 – Awareness</li>
-                                                                    </ul>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-
-                                                    <div className="accordion-item no-collapsed">
-                                                        <h2 className="accordion-header">
-                                                            <button className="accordion-button">Lesson 1.2
-                                                            </button>
-                                                        </h2>
-                                                    </div>
-
-                                                    <div className="accordion-item no-collapsed">
-                                                        <h2 className="accordion-header">
-                                                            <button className="accordion-button">Lesson 1.3
-                                                            </button>
-                                                        </h2>
-                                                    </div>
-
-                                                    <h4 className="heading-title">Section 2</h4>
-                                                    <div className="accordion-item no-collapsed">
-                                                        <h2 className="accordion-header">
-                                                            <button className="accordion-button">Lesson 2.1
-                                                            </button>
-                                                        </h2>
-                                                    </div>
-
-                                                    <div className="accordion-item no-collapsed">
-                                                        <h2 className="accordion-header">
-                                                            <button className="accordion-button">Lesson 2.2
-                                                            </button>
-                                                        </h2>
-                                                    </div>
-
-                                                    <h4 className="heading-title">Section 3</h4>
-                                                    <div className="accordion-item">
-                                                        <h3 className="accordion-header" id="headingThree">
-                                                            <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
-                                                                Lesson 3.1
-                                                                <span className="topics">3 Topics</span>
-                                                                <span className="expand">Expand</span>
-                                                            </button>
-                                                        </h3>
-                                                        <div id="collapseThree" className="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
-                                                            <div className="accordion-body">
-                                                                <div className="course-lesson">
-                                                                    <ul>
-                                                                        <li>Topic 1 – Grounding</li>
-                                                                        <li>Topic 2 – Igniting</li>
-                                                                        <li>Topic 3 – Awareness</li>
-                                                                    </ul>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-
-                                                    <div className="accordion-item no-collapsed">
-                                                        <h2 className="accordion-header">
-                                                            <button className="accordion-button">Lesson 3.2
-                                                            </button>
-                                                        </h2>
-                                                    </div>
-
-                                                    <div className="accordion-item no-collapsed">
-                                                        <h2 className="accordion-header">
-                                                            <button className="accordion-button">Lesson 3.3
-                                                            </button>
-                                                        </h2>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4">
-                        {/* sidebar start */}
-                        <DetailsSidebar />
-                        {/* sidebar end */}
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        {/* video modal start */}
-        <VideoModal isVideoOpen={isVideoOpen} setIsVideoOpen={setIsVideoOpen} videoId={'PICj5tr9hcc'} />
-        {/* video modal end */}
-    </>;
-}
-
-export default CourseDetailsThree;
\ No newline at end of file
diff --git a/src/components/course-details-3/course-details-three.tsx b/src/components/course-details-3/course-details-three.tsx
new file mode 100644
index 0000000..7c23346
--- /dev/null
+++ b/src/components/course-details-3/course-details-three.tsx
@@ -0,0 +1,426 @@
+import Link from 'next/link';
+import React from 'react';
+import useModal from '../../hooks/use-modal';
+import VideoModal from '../common/popup-modal/video-modal';
+import DetailsSidebar from './details-sidebar';
+
+const CourseDetailsThree = () => {
+    const { isVideoOpen, setIsVideoOpen } = useModal();
+    return (
+        <>
+            <section className='edu-section-gap course-details-area'>
+                <div className='container'>
+                    <div className='row row--30'>
+                        <div className='col-lg-8'>
+                            <div className='course-details-content course-details-3'>
+                                <div className='entry-content'>
+                                    <h2 className='title'>
+                                        Global Education Fall Meeting for Everyone
+                                    </h2>
+                                    <ul className='course-meta'>
+                                        <li>
+                                            <i className='icon-58'></i>by Edward Norton
+                                        </li>
+                                        <li>
+                                            <i className='icon-59'></i>English
+                                        </li>
+                                        <li className='course-rating'>
+                                            <div className='rating'>
+                                                <i className='icon-23'></i>
+                                                <i className='icon-23'></i>
+                                                <i className='icon-23'></i>
+                                                <i className='icon-23'></i>
+                                                <i className='icon-23'></i>
+                                            </div>
+                                            <span className='rating-count'>
+                                                (720 Rating)
+                                            </span>
+                                        </li>
+                                    </ul>
+
+                                    <div className='thumbnail'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/course/course-main/course-45.jpg'
+                                                alt='Course'
+                                            />
+                                        </picture>
+                                        <a
+                                            onClick={() => setIsVideoOpen(true)}
+                                            style={{ cursor: 'pointer' }}
+                                            className='video-play-btn video-popup-activation'
+                                        >
+                                            <i className='icon-18'></i>
+                                        </a>
+                                    </div>
+                                </div>
+
+                                <div className='course-enroll-box'>
+                                    <div className='single-item'>
+                                        <h6 className='title'>Current Status</h6>
+                                        <span className='enroll-status'>
+                                            Not Enrolled
+                                        </span>
+                                    </div>
+                                    <div className='single-item course-price'>
+                                        <h6 className='title'>Price</h6>
+                                        <span className='price'>$70.00</span>
+                                    </div>
+                                    <div className='single-item'>
+                                        <h6 className='title'>Get Started</h6>
+                                        <a
+                                            href='#'
+                                            className='edu-btn btn-medium enroll-btn'
+                                        >
+                                            Take This Course
+                                        </a>
+                                        <div className='login-btn'>
+                                            <span>or</span>
+                                            <Link href='/sign-in'>Login</Link>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className='nav-tab-wrap'>
+                                    <ul
+                                        className='nav nav-tabs'
+                                        id='myTab'
+                                        role='tablist'
+                                    >
+                                        <li className='nav-item' role='presentation'>
+                                            <button
+                                                className='nav-link active'
+                                                id='overview-tab'
+                                                data-bs-toggle='tab'
+                                                data-bs-target='#overview'
+                                                type='button'
+                                                role='tab'
+                                                aria-controls='overview'
+                                                aria-selected='true'
+                                            >
+                                                Course
+                                            </button>
+                                        </li>
+
+                                        <li className='nav-item' role='presentation'>
+                                            <button
+                                                className='nav-link'
+                                                id='carriculam-tab'
+                                                data-bs-toggle='tab'
+                                                data-bs-target='#carriculam'
+                                                type='button'
+                                                role='tab'
+                                                aria-controls='carriculam'
+                                                aria-selected='false'
+                                            >
+                                                Materials
+                                            </button>
+                                        </li>
+                                    </ul>
+
+                                    <div className='tab-content' id='myTabContent'>
+                                        <div
+                                            className='tab-pane fade show active'
+                                            id='overview'
+                                            role='tabpanel'
+                                            aria-labelledby='overview-tab'
+                                        >
+                                            <div className='course-tab-content'>
+                                                <div className='course-overview'>
+                                                    <h3 className='heading-title'>
+                                                        Course Description
+                                                    </h3>
+                                                    <p>
+                                                        Lorem ipsum dolor sit amet,
+                                                        consectetur adipisicing elit, sed
+                                                        do eiusmod tempor inc idid unt ut
+                                                        labore et dolore magna aliqua enim
+                                                        ad minim veniam, quis nostrud
+                                                        exerec tation ullamco laboris nis
+                                                        aliquip commodo consequat duis
+                                                        aute irure dolor in reprehenderit
+                                                        in voluptate velit esse cillum
+                                                        dolore eu fugiat nulla pariatur
+                                                        enim ipsam.
+                                                    </p>
+
+                                                    <p>
+                                                        Excepteur sint occaecat cupidatat
+                                                        non proident sunt in culpa qui
+                                                        officia deserunt mollit anim id
+                                                        est laborum. Sed ut perspiciatis
+                                                        unde omnis iste natus error sit
+                                                        voluptatem accusantium doloremque
+                                                        laudantium totam rem aperiam.
+                                                    </p>
+
+                                                    <ul className='mb--50'>
+                                                        <li>
+                                                            No prior knowledge of
+                                                            Wordpress is required as
+                                                            everything will be covered in
+                                                            this course.
+                                                        </li>
+                                                        <li>
+                                                            Basic HTML and CSS knowledge
+                                                            helps, but {"isn't"} a
+                                                            must-have
+                                                        </li>
+                                                        <li>
+                                                            You {"don't"} need any coding
+                                                            experience at all. That is the
+                                                            beauty of Wordpress.
+                                                        </li>
+                                                        <li>
+                                                            Basic JavaScript knowledge is
+                                                            required
+                                                        </li>
+                                                    </ul>
+
+                                                    <h5 className='title'>
+                                                        Key Features
+                                                    </h5>
+                                                    <ul>
+                                                        <li>
+                                                            No prior knowledge of
+                                                            Wordpress is required as
+                                                            everything will be covered in
+                                                            this course.
+                                                        </li>
+                                                        <li>
+                                                            Basic HTML and CSS knowledge
+                                                            helps, but {"isn't"} a
+                                                            must-have
+                                                        </li>
+                                                        <li>
+                                                            Basic JavaScript knowledge is
+                                                            required
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div
+                                            className='tab-pane fade'
+                                            id='carriculam'
+                                            role='tabpanel'
+                                            aria-labelledby='carriculam-tab'
+                                        >
+                                            <div className='course-tab-content'>
+                                                <div className='course-curriculam'>
+                                                    <div className='heading-title'>
+                                                        <h3 className='title'>
+                                                            Course Content
+                                                        </h3>
+                                                        <div className='expand-btn'>
+                                                            <button className='edu-btn btn-medium'>
+                                                                Expand All{' '}
+                                                                <i className='icon-31'></i>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+
+                                                    <div
+                                                        className='accordion edu-accordion'
+                                                        id='accordionExample'
+                                                    >
+                                                        <h4 className='heading-title'>
+                                                            Introduction
+                                                        </h4>
+                                                        <div className='accordion-item'>
+                                                            <h3
+                                                                className='accordion-header'
+                                                                id='headingOne'
+                                                            >
+                                                                <button
+                                                                    className='accordion-button'
+                                                                    type='button'
+                                                                    data-bs-toggle='collapse'
+                                                                    data-bs-target='#collapseOne'
+                                                                    aria-expanded='true'
+                                                                    aria-controls='collapseOne'
+                                                                >
+                                                                    Lesson 1.1
+                                                                    <span className='expand'>
+                                                                        Expand
+                                                                    </span>
+                                                                </button>
+                                                            </h3>
+
+                                                            <div
+                                                                id='collapseOne'
+                                                                className='accordion-collapse collapse show'
+                                                                aria-labelledby='headingOne'
+                                                                data-bs-parent='#accordionExample'
+                                                            >
+                                                                <div className='accordion-body'>
+                                                                    <div className='course-lesson'>
+                                                                        <div className='reading-status'>
+                                                                            <h5 className='title'>
+                                                                                <i className='icon-65'></i>{' '}
+                                                                                Lesson
+                                                                                Content
+                                                                            </h5>
+                                                                            <span className='complete-text'>
+                                                                                <span>
+                                                                                    0%
+                                                                                    COMPLETE
+                                                                                </span>
+                                                                                <span>
+                                                                                    0/1
+                                                                                    Steps
+                                                                                </span>
+                                                                            </span>
+                                                                        </div>
+
+                                                                        <ul>
+                                                                            <li>
+                                                                                Topic 1 –
+                                                                                Grounding
+                                                                            </li>
+                                                                            <li>
+                                                                                Topic 2 –
+                                                                                Igniting
+                                                                            </li>
+                                                                            <li>
+                                                                                Topic 3 –
+                                                                                Awareness
+                                                                            </li>
+                                                                        </ul>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <div className='accordion-item no-collapsed'>
+                                                            <h2 className='accordion-header'>
+                                                                <button className='accordion-button'>
+                                                                    Lesson 1.2
+                                                                </button>
+                                                            </h2>
+                                                        </div>
+
+                                                        <div className='accordion-item no-collapsed'>
+                                                            <h2 className='accordion-header'>
+                                                                <button className='accordion-button'>
+                                                                    Lesson 1.3
+                                                                </button>
+                                                            </h2>
+                                                        </div>
+
+                                                        <h4 className='heading-title'>
+                                                            Section 2
+                                                        </h4>
+                                                        <div className='accordion-item no-collapsed'>
+                                                            <h2 className='accordion-header'>
+                                                                <button className='accordion-button'>
+                                                                    Lesson 2.1
+                                                                </button>
+                                                            </h2>
+                                                        </div>
+
+                                                        <div className='accordion-item no-collapsed'>
+                                                            <h2 className='accordion-header'>
+                                                                <button className='accordion-button'>
+                                                                    Lesson 2.2
+                                                                </button>
+                                                            </h2>
+                                                        </div>
+
+                                                        <h4 className='heading-title'>
+                                                            Section 3
+                                                        </h4>
+                                                        <div className='accordion-item'>
+                                                            <h3
+                                                                className='accordion-header'
+                                                                id='headingThree'
+                                                            >
+                                                                <button
+                                                                    className='accordion-button collapsed'
+                                                                    type='button'
+                                                                    data-bs-toggle='collapse'
+                                                                    data-bs-target='#collapseThree'
+                                                                    aria-expanded='true'
+                                                                    aria-controls='collapseThree'
+                                                                >
+                                                                    Lesson 3.1
+                                                                    <span className='topics'>
+                                                                        3 Topics
+                                                                    </span>
+                                                                    <span className='expand'>
+                                                                        Expand
+                                                                    </span>
+                                                                </button>
+                                                            </h3>
+                                                            <div
+                                                                id='collapseThree'
+                                                                className='accordion-collapse collapse'
+                                                                aria-labelledby='headingThree'
+                                                                data-bs-parent='#accordionExample'
+                                                            >
+                                                                <div className='accordion-body'>
+                                                                    <div className='course-lesson'>
+                                                                        <ul>
+                                                                            <li>
+                                                                                Topic 1 –
+                                                                                Grounding
+                                                                            </li>
+                                                                            <li>
+                                                                                Topic 2 –
+                                                                                Igniting
+                                                                            </li>
+                                                                            <li>
+                                                                                Topic 3 –
+                                                                                Awareness
+                                                                            </li>
+                                                                        </ul>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <div className='accordion-item no-collapsed'>
+                                                            <h2 className='accordion-header'>
+                                                                <button className='accordion-button'>
+                                                                    Lesson 3.2
+                                                                </button>
+                                                            </h2>
+                                                        </div>
+
+                                                        <div className='accordion-item no-collapsed'>
+                                                            <h2 className='accordion-header'>
+                                                                <button className='accordion-button'>
+                                                                    Lesson 3.3
+                                                                </button>
+                                                            </h2>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className='col-lg-4'>
+                            {/* sidebar start */}
+                            <DetailsSidebar />
+                            {/* sidebar end */}
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* video modal start */}
+            <VideoModal
+                isVideoOpen={isVideoOpen}
+                setIsVideoOpen={setIsVideoOpen}
+                videoId={'PICj5tr9hcc'}
+            />
+            {/* video modal end */}
+        </>
+    );
+};
+
+export default CourseDetailsThree;
diff --git a/src/components/course-details-3/details-sidebar.jsx b/src/components/course-details-3/details-sidebar.jsx
deleted file mode 100644
index 419f46a..0000000
--- a/src/components/course-details-3/details-sidebar.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import { Books } from '../../svg';
-
-const DetailsSidebar = () => {
-    return (
-        <div className="course-sidebar-3">
-            <div className="edu-course-widget widget-course-summery">
-                <div className="inner">
-                    <div className="content">
-                        <h4 className="widget-title">Course Includes:</h4>
-                        <ul className="course-item">
-                            <li>
-                                <span className="label"><i className="icon-60"></i>Price:</span>
-                                <span className="value price">$70.00</span>
-                            </li>
-                            <li>
-                                <span className="label"><i className="icon-62"></i>Instrutor:</span>
-                                <span className="value">Edward Norton</span>
-                            </li>
-                            <li>
-                                <span className="label"><i className="icon-61"></i>Duration:</span>
-                                <span className="value">3 weeks</span>
-                            </li>
-                            <li>
-                                <span className="label"><Books />Lessons:</span>
-                                <span className="value">8</span>
-                            </li>
-                            <li>
-                                <span className="label"><i className="icon-63"></i>Enrolled:</span>
-                                <span className="value">65 students</span>
-                            </li>
-                            <li>
-                                <span className="label"><i className="icon-59"></i>Language:</span>
-                                <span className="value">English</span>
-                            </li>
-                            <li>
-                                <span className="label"><i className="icon-64"></i>Certificate:</span>
-                                <span className="value">Yes</span>
-                            </li>
-                        </ul>
-
-                        <div className="read-more-btn">
-                            <a href="#" className="edu-btn">Start Now <i className="icon-4"></i></a>
-                        </div>
-
-                        <div className="share-area">
-                            <h4 className="title">Share On:</h4>
-                            <ul className="social-share">
-                                <li><a href="#"><i className="icon-facebook"></i></a></li>
-                                <li><a href="#"><i className="icon-twitter"></i></a></li>
-                                <li><a href="#"><i className="icon-linkedin2"></i></a></li>
-                                <li><a href="#"><i className="icon-youtube"></i></a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default DetailsSidebar;
\ No newline at end of file
diff --git a/src/components/course-details-3/details-sidebar.tsx b/src/components/course-details-3/details-sidebar.tsx
new file mode 100644
index 0000000..3c81a6f
--- /dev/null
+++ b/src/components/course-details-3/details-sidebar.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Books } from '../../svg';
+
+const DetailsSidebar = () => {
+    return (
+        <div className='course-sidebar-3'>
+            <div className='edu-course-widget widget-course-summery'>
+                <div className='inner'>
+                    <div className='content'>
+                        <h4 className='widget-title'>Course Includes:</h4>
+                        <ul className='course-item'>
+                            <li>
+                                <span className='label'>
+                                    <i className='icon-60'></i>Price:
+                                </span>
+                                <span className='value price'>$70.00</span>
+                            </li>
+                            <li>
+                                <span className='label'>
+                                    <i className='icon-62'></i>Instrutor:
+                                </span>
+                                <span className='value'>Edward Norton</span>
+                            </li>
+                            <li>
+                                <span className='label'>
+                                    <i className='icon-61'></i>Duration:
+                                </span>
+                                <span className='value'>3 weeks</span>
+                            </li>
+                            <li>
+                                <span className='label'>
+                                    <Books />
+                                    Lessons:
+                                </span>
+                                <span className='value'>8</span>
+                            </li>
+                            <li>
+                                <span className='label'>
+                                    <i className='icon-63'></i>Enrolled:
+                                </span>
+                                <span className='value'>65 students</span>
+                            </li>
+                            <li>
+                                <span className='label'>
+                                    <i className='icon-59'></i>Language:
+                                </span>
+                                <span className='value'>English</span>
+                            </li>
+                            <li>
+                                <span className='label'>
+                                    <i className='icon-64'></i>Certificate:
+                                </span>
+                                <span className='value'>Yes</span>
+                            </li>
+                        </ul>
+
+                        <div className='read-more-btn'>
+                            <a href='#' className='edu-btn'>
+                                Start Now <i className='icon-4'></i>
+                            </a>
+                        </div>
+
+                        <div className='share-area'>
+                            <h4 className='title'>Share On:</h4>
+                            <ul className='social-share'>
+                                <li>
+                                    <a href='#'>
+                                        <i className='icon-facebook'></i>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href='#'>
+                                        <i className='icon-twitter'></i>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href='#'>
+                                        <i className='icon-linkedin2'></i>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href='#'>
+                                        <i className='icon-youtube'></i>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DetailsSidebar;
diff --git a/src/components/course-details-3/index.jsx b/src/components/course-details-3/index.tsx
similarity index 66%
rename from src/components/course-details-3/index.jsx
rename to src/components/course-details-3/index.tsx
index fb4e6e8..2e95871 100644
--- a/src/components/course-details-3/index.jsx
+++ b/src/components/course-details-3/index.tsx
@@ -6,14 +6,14 @@ import CourseDetailsThree from './course-details-three';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbSix title="Course Details" page="Course Details 3" />
-                <CourseDetailsThree/>
+                <BreadcrumbSix title='Course Details' page='Course Details 3' />
+                <CourseDetailsThree />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/course-details/course-details-area.jsx b/src/components/course-details/course-details-area.jsx
deleted file mode 100644
index c333b35..0000000
--- a/src/components/course-details/course-details-area.jsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import React from 'react';
-import CourseDetailsSidebar from '../common/sidebar/course-details-sidebar';
-import CommentFormCourse from '../forms/comment-form-course';
-import SingleComment from './single-comment';
-import SingleProgressbar from './single-progressbar';
-import WritingEvaluationForm from "../forms/writing-evaluation-form";
-
-const CourseDetailsArea = ({course}) => {
-    const {
-        course_desc,
-        course_desc_2,
-        learn_list,
-        course_desc_3,
-        curriculum_desc,
-        course_lessons,
-        instructor_img,
-        instructor_title,
-        instructor_desc,
-        social_links,
-        reviews,
-        instructor,
-        rating,
-        rating_count
-    } = course || {};
-    return (
-        <section className="edu-section-gap course-details-area">
-            <div className="container">
-                <div className="row row--30">
-                    <div className="col-lg-8">
-                        <div className="course-details-content">
-                            <ul className="nav nav-tabs" id="myTab" role="tablist">
-                                <li className="nav-item" role="presentation">
-                                    <button className="nav-link active" id="overview-tab" data-bs-toggle="tab"
-                                            data-bs-target="#overview"
-                                            type="button" role="tab" aria-controls="overview"
-                                            aria-selected="true">Overview
-                                    </button>
-                                </li>
-                                <li className="nav-item" role="presentation">
-                                    <button className="nav-link" id="carriculam-tab" data-bs-toggle="tab"
-                                            data-bs-target="#carriculam"
-                                            type="button" role="tab" aria-controls="carriculam"
-                                            aria-selected="false">Carriculam
-                                    </button>
-                                </li>
-                                <li className="nav-item" role="presentation">
-                                    <button className="nav-link" id="instructor-tab" data-bs-toggle="tab"
-                                            data-bs-target="#instructor"
-                                            type="button" role="tab" aria-controls="instructor"
-                                            aria-selected="false">Instructor
-                                    </button>
-                                </li>
-                                <li className="nav-item" role="presentation">
-                                    <button className="nav-link" id="review-tab" data-bs-toggle="tab"
-                                            data-bs-target="#review" type="button"
-                                            role="tab" aria-controls="review" aria-selected="false">Reviews
-                                    </button>
-                                </li>
-                            </ul>
-
-                            <div className="tab-content" id="myTabContent">
-                                <div className="tab-pane fade show active" id="overview" role="tabpanel"
-                                     aria-labelledby="overview-tab">
-                                    <div className="course-tab-content">
-                                        <div className="course-overview">
-                                            <h3 className="heading-title">Course Description</h3>
-                                            <p>{course_desc}</p>
-                                            <p className="mb--60">{course_desc_2}</p>
-                                            <h5 className="title">What You’ll Learn?</h5>
-                                            <ul className="mb--60">
-                                                {learn_list?.map((l, i) => <li key={i}>{l}</li>)}
-                                            </ul>
-                                            <p>{course_desc_3}</p>
-
-                                            <WritingEvaluationForm/>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="tab-pane fade" id="carriculam" role="tabpanel"
-                                     aria-labelledby="carriculam-tab">
-                                    <div className="course-tab-content">
-                                        <div className="course-curriculam">
-                                            <h3 className="heading-title">Course Curriculum</h3>
-                                            <p>{curriculum_desc}</p>
-                                            {course_lessons?.map((lesson, i) => (
-                                                <div key={i} className="course-lesson">
-                                                    <h5 className="title">{lesson?.title}</h5>
-                                                    <p>{lesson?.text}</p>
-                                                    <ul>
-                                                        {lesson?.lessons?.map((list, i) => (
-                                                            <li key={i}>
-                                                                {list.title &&
-                                                                    <div className="text">
-                                                                        <i className="icon-65"></i>
-                                                                        {list.title}
-                                                                    </div>
-                                                                }
-
-                                                                {!list?.badge_list &&
-                                                                    <div className="icon">
-                                                                        <i className={list?.icon}></i>
-                                                                    </div>
-                                                                }
-
-                                                                {list?.badge_list &&
-                                                                    <div className="badge-list">
-                                                                        <span
-                                                                            className="badge badge-primary">{list?.question} Question</span>
-                                                                        <span
-                                                                            className="badge badge-secondary">{list?.minutes} Minutes</span>
-                                                                    </div>
-                                                                }
-                                                            </li>
-                                                        ))}
-                                                    </ul>
-                                                </div>
-                                            ))}
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="tab-pane fade" id="instructor" role="tabpanel"
-                                     aria-labelledby="instructor-tab">
-                                    <div className="course-tab-content">
-                                        <div className="course-instructor">
-                                            <div className="thumbnail">
-                                                <img src={`/assets/images/team/team-02/${instructor_img}`}
-                                                     alt="team images"/>
-                                            </div>
-                                            <div className="author-content">
-                                                <h6 className="title">{instructor}</h6>
-                                                <span className="subtitle">{instructor_title}</span>
-                                                <p>{instructor_desc}</p>
-                                                <ul className="social-share">
-                                                    {social_links?.map((social, i) => (
-                                                        <li key={i}>
-                                                            <a href={social.link}
-                                                               target={social.target ? social.target : ''}>
-                                                                <i className={social.icon}></i>
-                                                            </a>
-                                                        </li>
-                                                    ))}
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
-                                    <div className="course-tab-content">
-                                        <div className="course-review">
-                                            <h3 className="heading-title">Course Rating</h3>
-                                            <p>{rating} average rating based on {rating_count} rating</p>
-                                            <div className="row g-0 align-items-center">
-                                                <div className="col-sm-4">
-                                                    <div className="rating-box">
-                                                        <div className="rating-number">{rating}</div>
-                                                        <div className="rating">
-                                                            <i className="icon-23"></i>
-                                                            <i className="icon-23"></i>
-                                                            <i className="icon-23"></i>
-                                                            <i className="icon-23"></i>
-                                                            <i className="icon-23"></i>
-                                                        </div>
-                                                        <span>({rating_count} Review)</span>
-                                                    </div>
-                                                </div>
-                                                <div className="col-sm-8">
-                                                    <div className="review-wrapper">
-                                                        <SingleProgressbar value={'100'} rating_value={rating_count}/>
-                                                        <SingleProgressbar value={'0'} rating_value={'0'}/>
-                                                        <SingleProgressbar value={'0'} rating_value={'0'}/>
-                                                        <SingleProgressbar value={'0'} rating_value={'0'}/>
-                                                        <SingleProgressbar value={'0'} rating_value={'0'}/>
-                                                    </div>
-                                                </div>
-                                            </div>
-
-                                            <div className="comment-area">
-                                                <h3 className="heading-title">Reviews</h3>
-                                                <div className="comment-list-wrapper">
-                                                    {reviews?.map((review, i) => (
-                                                        <SingleComment key={i} review={review}/>
-                                                    ))}
-                                                </div>
-                                            </div>
-
-                                            <div className="comment-form-area">
-                                                <h3 className="heading-title">Write a Review</h3>
-                                                <div className="rating-icon">
-                                                    <h6 className="title">Rating Here</h6>
-                                                    <div className="rating">
-                                                        <i className="icon-23"></i>
-                                                        <i className="icon-23"></i>
-                                                        <i className="icon-23"></i>
-                                                        <i className="icon-23"></i>
-                                                        <i className="icon-23"></i>
-                                                    </div>
-                                                </div>
-                                                <CommentFormCourse/>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-4">
-                        <CourseDetailsSidebar course={course}/>
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
-}
-
-export default CourseDetailsArea;
diff --git a/src/components/course-details/course-details-area.tsx b/src/components/course-details/course-details-area.tsx
new file mode 100644
index 0000000..6814bce
--- /dev/null
+++ b/src/components/course-details/course-details-area.tsx
@@ -0,0 +1,332 @@
+import React from 'react';
+import CourseDetailsSidebar from '../common/sidebar/course-details-sidebar';
+import CommentFormCourse from '../forms/comment-form-course';
+import SingleComment from './single-comment';
+import SingleProgressbar from './single-progressbar';
+import WritingEvaluation from '../forms/writing-evaluation-form';
+
+const CourseDetailsArea = ({ course }) => {
+    const {
+        course_desc,
+        course_desc_2,
+        learn_list,
+        course_desc_3,
+        curriculum_desc,
+        course_lessons,
+        instructor_img,
+        instructor_title,
+        instructor_desc,
+        social_links,
+        reviews,
+        instructor,
+        rating,
+        rating_count,
+    } = course || {};
+    return (
+        <section className='edu-section-gap course-details-area'>
+            <div className='container'>
+                <div className='row row--30'>
+                    <div className='col-lg-8'>
+                        <div className='course-details-content'>
+                            <ul className='nav nav-tabs' id='myTab' role='tablist'>
+                                <li className='nav-item' role='presentation'>
+                                    <button
+                                        className='nav-link active'
+                                        id='overview-tab'
+                                        data-bs-toggle='tab'
+                                        data-bs-target='#overview'
+                                        type='button'
+                                        role='tab'
+                                        aria-controls='overview'
+                                        aria-selected='true'
+                                    >
+                                        Overview
+                                    </button>
+                                </li>
+                                <li className='nav-item' role='presentation'>
+                                    <button
+                                        className='nav-link'
+                                        id='carriculam-tab'
+                                        data-bs-toggle='tab'
+                                        data-bs-target='#carriculam'
+                                        type='button'
+                                        role='tab'
+                                        aria-controls='carriculam'
+                                        aria-selected='false'
+                                    >
+                                        Carriculam
+                                    </button>
+                                </li>
+                                <li className='nav-item' role='presentation'>
+                                    <button
+                                        className='nav-link'
+                                        id='instructor-tab'
+                                        data-bs-toggle='tab'
+                                        data-bs-target='#instructor'
+                                        type='button'
+                                        role='tab'
+                                        aria-controls='instructor'
+                                        aria-selected='false'
+                                    >
+                                        Instructor
+                                    </button>
+                                </li>
+                                <li className='nav-item' role='presentation'>
+                                    <button
+                                        className='nav-link'
+                                        id='review-tab'
+                                        data-bs-toggle='tab'
+                                        data-bs-target='#review'
+                                        type='button'
+                                        role='tab'
+                                        aria-controls='review'
+                                        aria-selected='false'
+                                    >
+                                        Reviews
+                                    </button>
+                                </li>
+                            </ul>
+
+                            <div className='tab-content' id='myTabContent'>
+                                <div
+                                    className='tab-pane fade show active'
+                                    id='overview'
+                                    role='tabpanel'
+                                    aria-labelledby='overview-tab'
+                                >
+                                    <div className='course-tab-content'>
+                                        <div className='course-overview'>
+                                            <h3 className='heading-title'>
+                                                Course Description
+                                            </h3>
+                                            <p>{course_desc}</p>
+                                            <p className='mb--60'>{course_desc_2}</p>
+                                            <h5 className='title'>What You’ll Learn?</h5>
+                                            <ul className='mb--60'>
+                                                {learn_list?.map((l, i) => (
+                                                    <li key={i}>{l}</li>
+                                                ))}
+                                            </ul>
+                                            <p>{course_desc_3}</p>
+
+                                            <WritingEvaluation connection_id={1} />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div
+                                    className='tab-pane fade'
+                                    id='carriculam'
+                                    role='tabpanel'
+                                    aria-labelledby='carriculam-tab'
+                                >
+                                    <div className='course-tab-content'>
+                                        <div className='course-curriculam'>
+                                            <h3 className='heading-title'>
+                                                Course Curriculum
+                                            </h3>
+                                            <p>{curriculum_desc}</p>
+                                            {course_lessons?.map((lesson, i) => (
+                                                <div key={i} className='course-lesson'>
+                                                    <h5 className='title'>
+                                                        {lesson?.title}
+                                                    </h5>
+                                                    <p>{lesson?.text}</p>
+                                                    <ul>
+                                                        {lesson?.lessons?.map(
+                                                            (list, i) => (
+                                                                <li key={i}>
+                                                                    {list.title && (
+                                                                        <div className='text'>
+                                                                            <i className='icon-65'></i>
+                                                                            {list.title}
+                                                                        </div>
+                                                                    )}
+
+                                                                    {!list?.badge_list && (
+                                                                        <div className='icon'>
+                                                                            <i
+                                                                                className={
+                                                                                    list?.icon
+                                                                                }
+                                                                            ></i>
+                                                                        </div>
+                                                                    )}
+
+                                                                    {list?.badge_list && (
+                                                                        <div className='badge-list'>
+                                                                            <span className='badge badge-primary'>
+                                                                                {
+                                                                                    list?.question
+                                                                                }{' '}
+                                                                                Question
+                                                                            </span>
+                                                                            <span className='badge badge-secondary'>
+                                                                                {
+                                                                                    list?.minutes
+                                                                                }{' '}
+                                                                                Minutes
+                                                                            </span>
+                                                                        </div>
+                                                                    )}
+                                                                </li>
+                                                            )
+                                                        )}
+                                                    </ul>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div
+                                    className='tab-pane fade'
+                                    id='instructor'
+                                    role='tabpanel'
+                                    aria-labelledby='instructor-tab'
+                                >
+                                    <div className='course-tab-content'>
+                                        <div className='course-instructor'>
+                                            <div className='thumbnail'>
+                                                <picture>
+                                                    <img
+                                                        src={`/assets/images/team/team-02/${instructor_img}`}
+                                                        alt='team images'
+                                                    />
+                                                </picture>
+                                            </div>
+                                            <div className='author-content'>
+                                                <h6 className='title'>{instructor}</h6>
+                                                <span className='subtitle'>
+                                                    {instructor_title}
+                                                </span>
+                                                <p>{instructor_desc}</p>
+                                                <ul className='social-share'>
+                                                    {social_links?.map((social, i) => (
+                                                        <li key={i}>
+                                                            <a
+                                                                href={social.link}
+                                                                target={
+                                                                    social.target
+                                                                        ? social.target
+                                                                        : ''
+                                                                }
+                                                            >
+                                                                <i
+                                                                    className={
+                                                                        social.icon
+                                                                    }
+                                                                ></i>
+                                                            </a>
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div
+                                    className='tab-pane fade'
+                                    id='review'
+                                    role='tabpanel'
+                                    aria-labelledby='review-tab'
+                                >
+                                    <div className='course-tab-content'>
+                                        <div className='course-review'>
+                                            <h3 className='heading-title'>
+                                                Course Rating
+                                            </h3>
+                                            <p>
+                                                {rating} average rating based on{' '}
+                                                {rating_count} rating
+                                            </p>
+                                            <div className='row g-0 align-items-center'>
+                                                <div className='col-sm-4'>
+                                                    <div className='rating-box'>
+                                                        <div className='rating-number'>
+                                                            {rating}
+                                                        </div>
+                                                        <div className='rating'>
+                                                            <i className='icon-23'></i>
+                                                            <i className='icon-23'></i>
+                                                            <i className='icon-23'></i>
+                                                            <i className='icon-23'></i>
+                                                            <i className='icon-23'></i>
+                                                        </div>
+                                                        <span>
+                                                            ({rating_count} Review)
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                                <div className='col-sm-8'>
+                                                    <div className='review-wrapper'>
+                                                        <SingleProgressbar
+                                                            value={'100'}
+                                                            rating_value={rating_count}
+                                                        />
+                                                        <SingleProgressbar
+                                                            value={'0'}
+                                                            rating_value={'0'}
+                                                        />
+                                                        <SingleProgressbar
+                                                            value={'0'}
+                                                            rating_value={'0'}
+                                                        />
+                                                        <SingleProgressbar
+                                                            value={'0'}
+                                                            rating_value={'0'}
+                                                        />
+                                                        <SingleProgressbar
+                                                            value={'0'}
+                                                            rating_value={'0'}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <div className='comment-area'>
+                                                <h3 className='heading-title'>Reviews</h3>
+                                                <div className='comment-list-wrapper'>
+                                                    {reviews?.map((review, i) => (
+                                                        <SingleComment
+                                                            key={i}
+                                                            review={review}
+                                                        />
+                                                    ))}
+                                                </div>
+                                            </div>
+
+                                            <div className='comment-form-area'>
+                                                <h3 className='heading-title'>
+                                                    Write a Review
+                                                </h3>
+                                                <div className='rating-icon'>
+                                                    <h6 className='title'>Rating Here</h6>
+                                                    <div className='rating'>
+                                                        <i className='icon-23'></i>
+                                                        <i className='icon-23'></i>
+                                                        <i className='icon-23'></i>
+                                                        <i className='icon-23'></i>
+                                                        <i className='icon-23'></i>
+                                                    </div>
+                                                </div>
+                                                <CommentFormCourse />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='col-lg-4'>
+                        <CourseDetailsSidebar course={course} />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default CourseDetailsArea;
diff --git a/src/components/course-details/index.jsx b/src/components/course-details/index.tsx
similarity index 72%
rename from src/components/course-details/index.jsx
rename to src/components/course-details/index.tsx
index 9105e8c..a3f0940 100644
--- a/src/components/course-details/index.jsx
+++ b/src/components/course-details/index.tsx
@@ -3,17 +3,17 @@ import { Footer, Header } from '../../layout';
 import CourseBreadcrumb from '../breadcrumb/breadcrumb-5';
 import CourseDetailsArea from './course-details-area';
 
-const index = ({course}) => {
+const index = ({ course }) => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <CourseBreadcrumb course={course} subtitle="Course Details"  />
+                <CourseBreadcrumb course={course} subtitle='Course Details' />
                 <CourseDetailsArea course={course} />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
 export default index;
diff --git a/src/components/course-details/single-comment.jsx b/src/components/course-details/single-comment.jsx
deleted file mode 100644
index f534d2d..0000000
--- a/src/components/course-details/single-comment.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-const SingleComment = ({review}) => {
-    return (
-        <div className="comment">
-            <div className="thumbnail">
-                <img src={review?.img} alt="Comment Images" />
-            </div>
-            <div className="comment-content">
-                <div className="rating">
-                    <i className="icon-23"></i>
-                    <i className="icon-23"></i>
-                    <i className="icon-23"></i>
-                    <i className="icon-23"></i>
-                    <i className="icon-23"></i>
-                </div>
-                <h5 className="title">{review?.title}</h5>
-                <span className="date">{review?.date}</span>
-                <p>{review?.desc}</p>
-            </div>
-        </div>
-    )
-}
-
-export default SingleComment;
\ No newline at end of file
diff --git a/src/components/course-details/single-comment.tsx b/src/components/course-details/single-comment.tsx
new file mode 100644
index 0000000..467bc9c
--- /dev/null
+++ b/src/components/course-details/single-comment.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const SingleComment = ({ review }) => {
+    return (
+        <div className='comment'>
+            <div className='thumbnail'>
+                <picture>
+                    <img src={review?.img} alt='Comment Images' />
+                </picture>
+            </div>
+            <div className='comment-content'>
+                <div className='rating'>
+                    <i className='icon-23'></i>
+                    <i className='icon-23'></i>
+                    <i className='icon-23'></i>
+                    <i className='icon-23'></i>
+                    <i className='icon-23'></i>
+                </div>
+                <h5 className='title'>{review?.title}</h5>
+                <span className='date'>{review?.date}</span>
+                <p>{review?.desc}</p>
+            </div>
+        </div>
+    );
+};
+
+export default SingleComment;
diff --git a/src/components/course-details/single-progressbar.jsx b/src/components/course-details/single-progressbar.jsx
deleted file mode 100644
index 33eab02..0000000
--- a/src/components/course-details/single-progressbar.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-const SingleProgressbar = ({value,rating_value}) => {
-    return (
-        <div className="single-progress-bar">
-            <div className="rating-text">
-                5 <i className="icon-23"></i>
-            </div>
-            <div className="progress">
-                <div className="progress-bar" role="progressbar" style={{width:`${value}%`}} aria-valuenow={value} 
-                aria-valuemin="0" aria-valuemax="100"></div>
-            </div>
-            <span className="rating-value">{rating_value}</span>
-        </div>
-    )
-}
-
-export default SingleProgressbar;
\ No newline at end of file
diff --git a/src/components/course-details/single-progressbar.tsx b/src/components/course-details/single-progressbar.tsx
new file mode 100644
index 0000000..6418114
--- /dev/null
+++ b/src/components/course-details/single-progressbar.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const SingleProgressbar = ({ value, rating_value }) => {
+    return (
+        <div className='single-progress-bar'>
+            <div className='rating-text'>
+                5 <i className='icon-23'></i>
+            </div>
+            <div className='progress'>
+                <div
+                    className='progress-bar'
+                    role='progressbar'
+                    style={{ width: `${value}%` }}
+                    aria-valuenow={value}
+                    aria-valuemin={0}
+                    aria-valuemax={100}
+                ></div>
+            </div>
+            <span className='rating-value'>{rating_value}</span>
+        </div>
+    );
+};
+
+export default SingleProgressbar;
diff --git a/src/components/course-filter/sorting-area.jsx b/src/components/course-filter/sorting-area.jsx
deleted file mode 100644
index a30981b..0000000
--- a/src/components/course-filter/sorting-area.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { useDispatch } from 'react-redux';
-import { add_force_page, add_item_offset } from '../../redux/features/filter-slice';
-
-const SortingArea = ({course_items, num, setCourses, courses,course_list, items }) => {
-    const dispatch = useDispatch();
-
-    const handleChange = (e) => {
-        if (e.target.value === 'Filters') {
-            setCourses(course_items);
-        } else if (e.target.value === 'Low To High') {
-            const lowToHigh = courses.slice().sort((a, b) => parseFloat(a.course_price) - parseFloat(b.course_price))
-            setCourses(lowToHigh);
-        } else if (e.target.value === 'High To Low') {
-            const highToHigh = courses.slice().sort((a, b) => parseFloat(b.course_price) - parseFloat(a.course_price))
-            setCourses(highToHigh);
-        }
-        dispatch(add_item_offset(0));
-        dispatch(add_force_page(0));
-    }
-
-    return (
-        <div className="edu-sorting-area">
-            <div className="sorting-left">
-                {
-                    items 
-                    ? ( <h6 className="showing-text">Showing <span>{num}</span> of <span>{items.length}</span> courses</h6> )
-                    : ( <h6 className="showing-text">Showing <span>{num}</span> courses</h6> )
-                }
-            </div>
-            <div className="sorting-right">
-                <div className="layout-switcher">
-                    <label>{course_list ? 'List' : 'Grid' }</label>
-                    <ul className="switcher-btn">
-                        <li>
-                            <Link href="/course-style-1" className={!course_list?"active":''}>
-                                <i className="icon-53"></i>
-                            </Link>
-                        </li>
-                        <li>
-                            <Link href="/course-style-4" className={course_list?"active":''}>
-                                <i className="icon-54"></i>
-                            </Link>
-                        </li>
-                    </ul>
-                </div>
-                <div className="edu-sorting">
-                    <div className="icon"><i className="icon-55"></i></div>
-                    <select onChange={handleChange} className="edu-select">
-                        <option>Filters</option>
-                        <option>Low To High</option>
-                        <option>High To Low</option>
-                    </select>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default SortingArea;
\ No newline at end of file
diff --git a/src/components/course-filter/sorting-area.tsx b/src/components/course-filter/sorting-area.tsx
new file mode 100644
index 0000000..0e520b2
--- /dev/null
+++ b/src/components/course-filter/sorting-area.tsx
@@ -0,0 +1,94 @@
+import Link from 'next/link';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { add_force_page, add_item_offset } from '../../redux/features/filter-slice';
+
+// TODO: change any
+type SortingAreaProps = {
+    course_items?: any;
+    num: number;
+    setCourses?: any;
+    courses?: any;
+    course_list?: boolean;
+    items?: any;
+};
+
+const SortingArea = ({
+    course_items,
+    num,
+    setCourses,
+    courses,
+    course_list,
+    items,
+}: SortingAreaProps) => {
+    const dispatch = useDispatch();
+
+    const handleChange = e => {
+        if (e.target.value === 'Filters') {
+            setCourses(course_items);
+        } else if (e.target.value === 'Low To High') {
+            const lowToHigh = courses
+                .slice()
+                .sort((a, b) => parseFloat(a.course_price) - parseFloat(b.course_price));
+            setCourses(lowToHigh);
+        } else if (e.target.value === 'High To Low') {
+            const highToHigh = courses
+                .slice()
+                .sort((a, b) => parseFloat(b.course_price) - parseFloat(a.course_price));
+            setCourses(highToHigh);
+        }
+        dispatch(add_item_offset(0));
+        dispatch(add_force_page(0));
+    };
+
+    return (
+        <div className='edu-sorting-area'>
+            <div className='sorting-left'>
+                {items ? (
+                    <h6 className='showing-text'>
+                        Showing <span>{num}</span> of <span>{items.length}</span> courses
+                    </h6>
+                ) : (
+                    <h6 className='showing-text'>
+                        Showing <span>{num}</span> courses
+                    </h6>
+                )}
+            </div>
+            <div className='sorting-right'>
+                <div className='layout-switcher'>
+                    <label>{course_list ? 'List' : 'Grid'}</label>
+                    <ul className='switcher-btn'>
+                        <li>
+                            <Link
+                                href='/course-style-1'
+                                className={!course_list ? 'active' : ''}
+                            >
+                                <i className='icon-53'></i>
+                            </Link>
+                        </li>
+                        <li>
+                            <Link
+                                href='/course-style-4'
+                                className={course_list ? 'active' : ''}
+                            >
+                                <i className='icon-54'></i>
+                            </Link>
+                        </li>
+                    </ul>
+                </div>
+                <div className='edu-sorting'>
+                    <div className='icon'>
+                        <i className='icon-55'></i>
+                    </div>
+                    <select onChange={handleChange} className='edu-select'>
+                        <option>Filters</option>
+                        <option>Low To High</option>
+                        <option>High To Low</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SortingArea;
diff --git a/src/components/course-style-1/course-1-area.jsx b/src/components/course-style-1/course-1-area.jsx
deleted file mode 100644
index 0259f62..0000000
--- a/src/components/course-style-1/course-1-area.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, {useEffect} from 'react';
-import {useState} from 'react';
-import SortingArea from '../course-filter/sorting-area';
-import CourseTypeOne from '../course/course-type-one';
-
-const CourseArea = ({initialCourses}) => {
-    const coursePerView = 8;
-    const [next, setNext] = useState(coursePerView);
-    const [courses, setCourses] = useState(initialCourses);
-
-    // handleLoadData
-    const handleLoadData = () => {
-        setNext(value => value + 4)
-    }
-
-    return (
-        <div className="edu-course-area course-area-1 gap-tb-text">
-            <div className="container">
-                <SortingArea course_items={courses} num={courses?.slice(0, next)?.length} setCourses={setCourses}
-                             courses={courses}/>
-
-                <div className="row g-5">
-                    {courses.slice(0, next)?.map((course) => {
-                        return (
-                            <div key={course.id} className="col-md-6 col-xl-3">
-                                <CourseTypeOne data={course} classes="course-box-shadow"/>
-                            </div>
-                        )
-                    })}
-                </div>
-
-                {next < courses.length &&
-                    <div onClick={handleLoadData} className="load-more-btn" data-sal-delay="100" data-sal="slide-up"
-                         data-sal-duration="1200">
-                        <a className="edu-btn" style={{cursor: 'pointer'}}>Load More <i className="icon-56"></i></a>
-                    </div>
-                }
-            </div>
-        </div>
-    )
-}
-
-export default CourseArea;
diff --git a/src/components/course-style-1/course-1-area.tsx b/src/components/course-style-1/course-1-area.tsx
new file mode 100644
index 0000000..90a5203
--- /dev/null
+++ b/src/components/course-style-1/course-1-area.tsx
@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import { useState } from 'react';
+import SortingArea from '../course-filter/sorting-area';
+import CourseTypeOne from '../course/course-type-one';
+
+const CourseArea = ({ initialCourses }) => {
+    const coursePerView = 8;
+    const [next, setNext] = useState(coursePerView);
+    const [courses, setCourses] = useState(initialCourses);
+
+    // handleLoadData
+    const handleLoadData = () => {
+        setNext(value => value + 4);
+    };
+
+    return (
+        <div className='edu-course-area course-area-1 gap-tb-text'>
+            <div className='container'>
+                <SortingArea
+                    course_items={courses}
+                    num={courses?.slice(0, next)?.length}
+                    setCourses={setCourses}
+                    courses={courses}
+                />
+
+                <div className='row g-5'>
+                    {courses.slice(0, next)?.map(course => {
+                        return (
+                            <div key={course.id} className='col-md-6 col-xl-3'>
+                                <CourseTypeOne
+                                    data={course}
+                                    classes='course-box-shadow'
+                                />
+                            </div>
+                        );
+                    })}
+                </div>
+
+                {next < courses.length && (
+                    <div
+                        onClick={handleLoadData}
+                        className='load-more-btn'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='1200'
+                    >
+                        <a className='edu-btn' style={{ cursor: 'pointer' }}>
+                            Load More <i className='icon-56'></i>
+                        </a>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default CourseArea;
diff --git a/src/components/course-style-1/index.jsx b/src/components/course-style-1/index.tsx
similarity index 62%
rename from src/components/course-style-1/index.jsx
rename to src/components/course-style-1/index.tsx
index 9f3cbf3..5205d6c 100644
--- a/src/components/course-style-1/index.jsx
+++ b/src/components/course-style-1/index.tsx
@@ -3,17 +3,17 @@ import { Footer, Header } from '../../layout';
 import BreadcrumbThree from '../breadcrumb/breadcrumb-3';
 import CourseArea from './course-1-area';
 
-const index = ({courses}) => {
+const index = ({ courses }) => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Course Style 1" subtitle="Course Style 1" />
-                <CourseArea initialCourses={courses}/>
+                <BreadcrumbThree title='Course Style 1' subtitle='Course Style 1' />
+                <CourseArea initialCourses={courses} />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
 export default index;
diff --git a/src/components/course-style-2/course-2-area.jsx b/src/components/course-style-2/course-2-area.jsx
deleted file mode 100644
index c8d1433..0000000
--- a/src/components/course-style-2/course-2-area.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import { course_data } from '../../data';
-import SortingArea from '../course-filter/sorting-area';
-import CourseTypeSix from '../course/course-type-six';
-
-const CourseTwoArea = () => {
-    const coursePerView = 6;
-    const [next, setNext] = useState(coursePerView);
-    const [courses,setCourses] = useState(course_data);
-    // handleLoadData
-    const handleLoadData = () => {
-        setNext(value => value + 3)
-    }
-    return (
-        <div className="edu-course-area course-area-1 gap-tb-text">
-            <div className="container">
-                <SortingArea course_items={course_data} num={courses?.slice(0,next)?.length} setCourses={setCourses} courses={courses} />
-
-                <div className="row g-5">
-                    {courses?.slice(0, next)?.map((course) => (
-                        <div key={course.id} className="col-md-6 col-lg-4">
-                            <CourseTypeSix data={course} classes="course-box-shadow" />
-                        </div>
-                    ))}
-                </div>
-
-                {next < courses.length && 
-                    <div onClick={handleLoadData} className="load-more-btn" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1200">
-                        <a className="edu-btn" style={{ cursor: 'pointer' }}>Load More <i className="icon-56"></i></a>
-                    </div>
-                }
-            </div>
-        </div>
-    )
-}
-
-export default CourseTwoArea;
\ No newline at end of file
diff --git a/src/components/course-style-2/course-2-area.tsx b/src/components/course-style-2/course-2-area.tsx
new file mode 100644
index 0000000..48c4acd
--- /dev/null
+++ b/src/components/course-style-2/course-2-area.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { useState } from 'react';
+import { course_data } from '../../data';
+import SortingArea from '../course-filter/sorting-area';
+import CourseTypeSix from '../course/course-type-six';
+
+const CourseTwoArea = () => {
+    const coursePerView = 6;
+    const [next, setNext] = useState(coursePerView);
+    const [courses, setCourses] = useState(course_data);
+    // handleLoadData
+    const handleLoadData = () => {
+        setNext(value => value + 3);
+    };
+    return (
+        <div className='edu-course-area course-area-1 gap-tb-text'>
+            <div className='container'>
+                <SortingArea
+                    course_items={course_data}
+                    num={courses?.slice(0, next)?.length}
+                    setCourses={setCourses}
+                    courses={courses}
+                />
+
+                <div className='row g-5'>
+                    {courses?.slice(0, next)?.map(course => (
+                        <div key={course.id} className='col-md-6 col-lg-4'>
+                            <CourseTypeSix data={course} classes='course-box-shadow' />
+                        </div>
+                    ))}
+                </div>
+
+                {next < courses.length && (
+                    <div
+                        onClick={handleLoadData}
+                        className='load-more-btn'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='1200'
+                    >
+                        <a className='edu-btn' style={{ cursor: 'pointer' }}>
+                            Load More <i className='icon-56'></i>
+                        </a>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default CourseTwoArea;
diff --git a/src/components/course-style-2/index.jsx b/src/components/course-style-2/index.tsx
similarity index 65%
rename from src/components/course-style-2/index.jsx
rename to src/components/course-style-2/index.tsx
index 631c672..4ae4d94 100644
--- a/src/components/course-style-2/index.jsx
+++ b/src/components/course-style-2/index.tsx
@@ -6,14 +6,14 @@ import CourseTwoArea from './course-2-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Course Style 2" subtitle="Course Style 2" />
-                <CourseTwoArea/>
+                <BreadcrumbThree title='Course Style 2' subtitle='Course Style 2' />
+                <CourseTwoArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/course-style-3/course-3-area.jsx b/src/components/course-style-3/course-3-area.jsx
deleted file mode 100644
index 7114681..0000000
--- a/src/components/course-style-3/course-3-area.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import { course_data } from '../../data';
-import SortingArea from '../course-filter/sorting-area';
-import CourseTypeFour from '../course/course-type-four';
-
-const CourseThreeArea = () => {
-    const coursePerView = 6;
-    const [next, setNext] = useState(coursePerView);
-    const [courses, setCourses] = useState(course_data);
-    // handleLoadData
-    const handleLoadData = () => {
-        setNext(value => value + 3)
-    }
-    return (
-        <div className="edu-course-area course-area-1 gap-tb-text">
-            <div className="container">
-                <SortingArea course_items={course_data} num={courses?.slice(0,next)?.length} setCourses={setCourses} courses={courses} />
-
-                <div className="row g-5">
-                    { courses?.slice(0, next)?.map((course, key) => (
-                        <div key={course.id} 
-                            className={ `col-12 col-xl-4 col-lg-6 col-md-6 
-                                ${ ( key+1 ) % 3 === 0 && key !== 0 ? 'course-style-3-third-item' : '' } 
-                                ${ ( key+1 ) % 2 === 0 && key !== 0 ? 'course-style-3-even' : 'course-style-3-odd' }` 
-                            }
-                        >
-                            <CourseTypeFour data={course} />
-                        </div>
-                    ) ) }
-                </div>
-
-                {next < courses.length && 
-                    <div onClick={handleLoadData} className="load-more-btn" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1200">
-                        <a className="edu-btn" style={{ cursor: 'pointer' }}>Load More <i className="icon-56"></i></a>
-                    </div>
-                }
-            </div>
-        </div>
-    )
-}
-
-export default CourseThreeArea;
\ No newline at end of file
diff --git a/src/components/course-style-3/course-3-area.tsx b/src/components/course-style-3/course-3-area.tsx
new file mode 100644
index 0000000..c3f9704
--- /dev/null
+++ b/src/components/course-style-3/course-3-area.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { useState } from 'react';
+import { course_data } from '../../data';
+import SortingArea from '../course-filter/sorting-area';
+import CourseTypeFour from '../course/course-type-four';
+
+const CourseThreeArea = () => {
+    const coursePerView = 6;
+    const [next, setNext] = useState(coursePerView);
+    const [courses, setCourses] = useState(course_data);
+    // handleLoadData
+    const handleLoadData = () => {
+        setNext(value => value + 3);
+    };
+    return (
+        <div className='edu-course-area course-area-1 gap-tb-text'>
+            <div className='container'>
+                <SortingArea
+                    course_items={course_data}
+                    num={courses?.slice(0, next)?.length}
+                    setCourses={setCourses}
+                    courses={courses}
+                />
+
+                <div className='row g-5'>
+                    {courses?.slice(0, next)?.map((course, key) => (
+                        <div
+                            key={course.id}
+                            className={`col-12 col-xl-4 col-lg-6 col-md-6 
+                                ${
+                                    (key + 1) % 3 === 0 && key !== 0
+                                        ? 'course-style-3-third-item'
+                                        : ''
+                                } 
+                                ${
+                                    (key + 1) % 2 === 0 && key !== 0
+                                        ? 'course-style-3-even'
+                                        : 'course-style-3-odd'
+                                }`}
+                        >
+                            <CourseTypeFour data={course} />
+                        </div>
+                    ))}
+                </div>
+
+                {next < courses.length && (
+                    <div
+                        onClick={handleLoadData}
+                        className='load-more-btn'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='1200'
+                    >
+                        <a className='edu-btn' style={{ cursor: 'pointer' }}>
+                            Load More <i className='icon-56'></i>
+                        </a>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default CourseThreeArea;
diff --git a/src/components/course-style-3/index.jsx b/src/components/course-style-3/index.tsx
similarity index 65%
rename from src/components/course-style-3/index.jsx
rename to src/components/course-style-3/index.tsx
index 8500160..657308a 100644
--- a/src/components/course-style-3/index.jsx
+++ b/src/components/course-style-3/index.tsx
@@ -6,14 +6,14 @@ import CourseThreeArea from './course-3-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Course Style 3" subtitle="Course Style 3" />
-                <CourseThreeArea/>
+                <BreadcrumbThree title='Course Style 3' subtitle='Course Style 3' />
+                <CourseThreeArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/course-style-4/course-4-area.jsx b/src/components/course-style-4/course-4-area.jsx
deleted file mode 100644
index 83ea4b4..0000000
--- a/src/components/course-style-4/course-4-area.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { course_data } from '../../data';
-import CourseSidebar from '../common/sidebar/course-sidebar';
-import SortingArea from '../course-filter/sorting-area';
-import CourseItems from './course-items';
-
-// course_items
-const course_items = course_data.filter((arr, index, self) =>
-    index === self.findIndex( ( i ) => ( i.img === arr.img && i.State === arr.State ) ) );
-
-const CourseFourArea = () => {
-    const [courses, setCourses] = useState(course_items);
-    const [showing,setShowing] = useState(0);
-    const { categories, instructors, levels, languages, price } = useSelector( (state) => state.filter );
-
-    let items = courses?.filter( (item1) =>
-        categories?.length !== 0
-        ? categories?.some( (item2) => item1.category == item2 )
-        : item1
-    ).filter( (item1) =>
-        instructors?.length !== 0
-        ? instructors?.some( (item2) => item1.instructor == item2 )
-        : item1
-    ).filter( (item1) =>
-        levels?.length !== 0
-        ? levels?.some( (item2) => item1.level == item2 )
-        : item1
-    ).filter((item1) =>
-        languages?.length !== 0
-        ? languages?.some( (item2) => item1.language == item2 )
-        : item1
-    ).filter(item => Number( item.course_price) <= price )
-
-    return (
-        <div className="edu-course-area course-area-1 section-gap-equal">
-            <div className="container">
-                <div className="row g-5">
-                    <div className="col-lg-3">
-                        {/* course sidebar start */}
-                        <CourseSidebar course_items={course_items} />
-                        {/* course sidebar end */}
-                    </div>
-
-                    <div className="col-lg-9 col-pl--35">
-                        {/* sorting area start */}
-                        <SortingArea course_items={course_items} course_list={true} num={showing} setCourses={setCourses} courses={courses} items={items}  />
-                        {/* sorting area end */}
-
-                        <CourseItems itemsPerPage={6} items={items} course_style="8" setShowing={setShowing} />
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CourseFourArea;
\ No newline at end of file
diff --git a/src/components/course-style-4/course-4-area.tsx b/src/components/course-style-4/course-4-area.tsx
new file mode 100644
index 0000000..963fdd8
--- /dev/null
+++ b/src/components/course-style-4/course-4-area.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { course_data } from '../../data';
+import CourseSidebar from '../common/sidebar/course-sidebar';
+import SortingArea from '../course-filter/sorting-area';
+import CourseItems from './course-items';
+import { AppState } from '../../redux/store';
+
+// course_items
+const course_items = course_data.filter(
+    (arr, index, self) => index === self.findIndex(i => i.img === arr.img) // && i.State === arr.State)
+);
+
+const CourseFourArea = () => {
+    const [courses, setCourses] = useState(course_items);
+    const [showing, setShowing] = useState(0);
+    const { categories, instructors, levels, languages, price } = useSelector(
+        (state: AppState) => state.filter
+    );
+
+    let items = courses
+        ?.filter(item1 =>
+            categories?.length !== 0
+                ? categories?.some(item2 => item1.category == item2)
+                : item1
+        )
+        .filter(item1 =>
+            instructors?.length !== 0
+                ? instructors?.some(item2 => item1.instructor == item2)
+                : item1
+        )
+        .filter(item1 =>
+            levels?.length !== 0 ? levels?.some(item2 => item1.level == item2) : item1
+        )
+        .filter(item1 =>
+            languages?.length !== 0
+                ? languages?.some(item2 => item1.language == item2)
+                : item1
+        )
+        .filter(item => Number(item.course_price) <= price);
+
+    return (
+        <div className='edu-course-area course-area-1 section-gap-equal'>
+            <div className='container'>
+                <div className='row g-5'>
+                    <div className='col-lg-3'>
+                        {/* course sidebar start */}
+                        <CourseSidebar course_items={course_items} />
+                        {/* course sidebar end */}
+                    </div>
+
+                    <div className='col-lg-9 col-pl--35'>
+                        {/* sorting area start */}
+                        <SortingArea
+                            course_items={course_items}
+                            course_list={true}
+                            num={showing}
+                            setCourses={setCourses}
+                            courses={courses}
+                            items={items}
+                        />
+                        {/* sorting area end */}
+
+                        <CourseItems
+                            itemsPerPage={6}
+                            items={items}
+                            course_style='8'
+                            setShowing={setShowing}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CourseFourArea;
diff --git a/src/components/course-style-4/course-items.jsx b/src/components/course-style-4/course-items.tsx
similarity index 75%
rename from src/components/course-style-4/course-items.jsx
rename to src/components/course-style-4/course-items.tsx
index 94cd092..1168073 100644
--- a/src/components/course-style-4/course-items.jsx
+++ b/src/components/course-style-4/course-items.tsx
@@ -1,16 +1,17 @@
-import { useState, useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
     add_count_page,
     add_force_page,
-    add_item_offset
-} from "../../redux/features/filter-slice";
-import Pagination from "../../ui/pagination";
+    add_item_offset,
+} from '../../redux/features/filter-slice';
+import Pagination from '../../ui/pagination';
 import CourseTypeFive from '../course/course-type-five';
+import { AppState } from '../../redux/store';
 
 const CourseItems = ({ itemsPerPage, items, course_style, setShowing }) => {
     const { page_count, item_offset, forcePage } = useSelector(
-        (state) => state.filter
+        (state: AppState) => state.filter
     );
     const [currentItems, setCurrentItems] = useState(null);
     const [pageCount, setPageCount] = useState(page_count);
@@ -40,7 +41,7 @@ const CourseItems = ({ itemsPerPage, items, course_style, setShowing }) => {
     }, [item_offset, page_count]);
 
     // handlePageClick
-    const handlePageClick = (event) => {
+    const handlePageClick = event => {
         const newOffset = (event.selected * itemsPerPage) % items.length;
         setItemOffset(newOffset);
         dispatch(add_force_page(event.selected));
@@ -48,11 +49,10 @@ const CourseItems = ({ itemsPerPage, items, course_style, setShowing }) => {
 
     return (
         <>
-            {currentItems && currentItems.map((course, i) => {
-                return (
-                    <CourseTypeFive key={i} data={course} />
-                )
-            })}
+            {currentItems &&
+                currentItems.map((course, i) => {
+                    return <CourseTypeFive key={i} data={course} />;
+                })}
 
             <Pagination
                 handlePageClick={handlePageClick}
@@ -60,7 +60,7 @@ const CourseItems = ({ itemsPerPage, items, course_style, setShowing }) => {
                 focusPage={forcePage}
             />
         </>
-    )
-}
+    );
+};
 
 export default CourseItems;
diff --git a/src/components/course-style-4/index.jsx b/src/components/course-style-4/index.tsx
similarity index 65%
rename from src/components/course-style-4/index.jsx
rename to src/components/course-style-4/index.tsx
index 94c1c04..91296e7 100644
--- a/src/components/course-style-4/index.jsx
+++ b/src/components/course-style-4/index.tsx
@@ -6,14 +6,14 @@ import CourseFourArea from './course-4-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Course Style 4" subtitle="Course Style 4" />
-                <CourseFourArea/>
+                <BreadcrumbThree title='Course Style 4' subtitle='Course Style 4' />
+                <CourseFourArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/course-style-5/course-5-area.jsx b/src/components/course-style-5/course-5-area.jsx
deleted file mode 100644
index ef61aaa..0000000
--- a/src/components/course-style-5/course-5-area.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { course_data } from '../../data';
-import CourseSidebarTwo from '../common/sidebar/course-sidebar-2';
-import SortingArea from '../course-filter/sorting-area';
-import CourseItems from './course-items';
-
-// course_items
-const course_items = course_data.filter((arr, index, self) =>
-index === self.findIndex((i) => (i.img === arr.img && i.State === arr.State)));
-
-const CourseFiveArea = () => {
-    const [courses, setCourses] = useState(course_items);
-    const [showing,setShowing] = useState(0);
-    const { categories, instructors, levels, languages, price } = useSelector( (state) => state.filter );
-
-    let items = courses?.filter( (item1) =>
-        categories?.length !== 0
-        ? categories?.some( (item2) => item1.category == item2 )
-        : item1
-    ).filter( (item1) =>
-        instructors?.length !== 0
-        ? instructors?.some( (item2) => item1.instructor == item2 )
-        : item1
-    ).filter( (item1) =>
-        levels?.length !== 0
-        ? levels?.some( (item2) => item1.level == item2 )
-        : item1
-    ).filter( (item1) =>
-        languages?.length !== 0
-        ? languages?.some( (item2) => item1.language == item2 )
-        : item1
-    ).filter( item => Number(item.course_price) <= price )
-
-    return (
-        <div className="edu-course-area course-area-1 section-gap-equal">
-            <div className="container">
-                <div className="row g-5">
-                    <div className="col-lg-3 order-lg-2">
-                        <CourseSidebarTwo course_items={course_items} />
-                    </div>
-
-                    <div className="col-lg-9 col-pr--35 order-lg-1">
-                        {/* sorting area start */}
-                        <SortingArea course_items={course_items} course_list={true} num={showing} setCourses={setCourses} courses={courses} items={items} />
-                        {/* sorting area end */}
-
-                        <CourseItems itemsPerPage={6} items={items} course_style="9" setShowing={setShowing} />
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CourseFiveArea;
\ No newline at end of file
diff --git a/src/components/course-style-5/course-5-area.tsx b/src/components/course-style-5/course-5-area.tsx
new file mode 100644
index 0000000..87e76b9
--- /dev/null
+++ b/src/components/course-style-5/course-5-area.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { course_data } from '../../data';
+import CourseSidebarTwo from '../common/sidebar/course-sidebar-2';
+import SortingArea from '../course-filter/sorting-area';
+import CourseItems from './course-items';
+import { AppState } from '../../redux/store';
+
+// course_items
+const course_items = course_data.filter(
+    (arr, index, self) => index === self.findIndex(i => i.img === arr.img) // && i.State === arr.State)
+);
+
+const CourseFiveArea = () => {
+    const [courses, setCourses] = useState(course_items);
+    const [showing, setShowing] = useState(0);
+    const { categories, instructors, levels, languages, price } = useSelector(
+        (state: AppState) => state.filter
+    );
+
+    let items = courses
+        ?.filter(item1 =>
+            categories?.length !== 0
+                ? categories?.some(item2 => item1.category == item2)
+                : item1
+        )
+        .filter(item1 =>
+            instructors?.length !== 0
+                ? instructors?.some(item2 => item1.instructor == item2)
+                : item1
+        )
+        .filter(item1 =>
+            levels?.length !== 0 ? levels?.some(item2 => item1.level == item2) : item1
+        )
+        .filter(item1 =>
+            languages?.length !== 0
+                ? languages?.some(item2 => item1.language == item2)
+                : item1
+        )
+        .filter(item => Number(item.course_price) <= price);
+
+    return (
+        <div className='edu-course-area course-area-1 section-gap-equal'>
+            <div className='container'>
+                <div className='row g-5'>
+                    <div className='col-lg-3 order-lg-2'>
+                        <CourseSidebarTwo course_items={course_items} />
+                    </div>
+
+                    <div className='col-lg-9 col-pr--35 order-lg-1'>
+                        {/* sorting area start */}
+                        <SortingArea
+                            course_items={course_items}
+                            course_list={true}
+                            num={showing}
+                            setCourses={setCourses}
+                            courses={courses}
+                            items={items}
+                        />
+                        {/* sorting area end */}
+
+                        <CourseItems
+                            itemsPerPage={6}
+                            items={items}
+                            course_style='9'
+                            setShowing={setShowing}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CourseFiveArea;
diff --git a/src/components/course-style-5/course-items.jsx b/src/components/course-style-5/course-items.tsx
similarity index 75%
rename from src/components/course-style-5/course-items.jsx
rename to src/components/course-style-5/course-items.tsx
index f9cb617..ebe8acb 100644
--- a/src/components/course-style-5/course-items.jsx
+++ b/src/components/course-style-5/course-items.tsx
@@ -1,16 +1,17 @@
-import { useState, useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
     add_count_page,
     add_force_page,
-    add_item_offset
-} from "../../redux/features/filter-slice";
-import Pagination from "../../ui/pagination";
+    add_item_offset,
+} from '../../redux/features/filter-slice';
+import Pagination from '../../ui/pagination';
 import CourseTypeEight from '../course/course-type-eight';
+import { AppState } from '../../redux/store';
 
 const CourseItems = ({ itemsPerPage, items, course_style, setShowing }) => {
     const { page_count, item_offset, forcePage } = useSelector(
-        (state) => state.filter
+        (state: AppState) => state.filter
     );
     const [currentItems, setCurrentItems] = useState(null);
     const [pageCount, setPageCount] = useState(page_count);
@@ -40,7 +41,7 @@ const CourseItems = ({ itemsPerPage, items, course_style, setShowing }) => {
     }, [item_offset, page_count]);
 
     // handlePageClick
-    const handlePageClick = (event) => {
+    const handlePageClick = event => {
         const newOffset = (event.selected * itemsPerPage) % items.length;
         setItemOffset(newOffset);
         dispatch(add_force_page(event.selected));
@@ -48,11 +49,10 @@ const CourseItems = ({ itemsPerPage, items, course_style, setShowing }) => {
 
     return (
         <>
-            {currentItems && currentItems.map((course, i) => {
-                return (
-                    <CourseTypeEight key={i} data={course} />
-                )
-            })}
+            {currentItems &&
+                currentItems.map((course, i) => {
+                    return <CourseTypeEight key={i} data={course} />;
+                })}
 
             <Pagination
                 handlePageClick={handlePageClick}
@@ -60,7 +60,7 @@ const CourseItems = ({ itemsPerPage, items, course_style, setShowing }) => {
                 focusPage={forcePage}
             />
         </>
-    )
-}
+    );
+};
 
 export default CourseItems;
diff --git a/src/components/course-style-5/index.jsx b/src/components/course-style-5/index.tsx
similarity index 65%
rename from src/components/course-style-5/index.jsx
rename to src/components/course-style-5/index.tsx
index bb9b99d..816f0ac 100644
--- a/src/components/course-style-5/index.jsx
+++ b/src/components/course-style-5/index.tsx
@@ -6,14 +6,14 @@ import CourseFiveArea from './course-5-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Course Style 5" subtitle="Course Style 5" />
-                <CourseFiveArea/>
+                <BreadcrumbThree title='Course Style 5' subtitle='Course Style 5' />
+                <CourseFiveArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/course/course-type-eight.jsx b/src/components/course/course-type-eight.jsx
deleted file mode 100644
index 6eb4e5a..0000000
--- a/src/components/course/course-type-eight.jsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { cart_course } from '../../redux/features/cart-slice';
-import { add_to_wishlist, wishlistItems } from '../../redux/features/wishlist-slice';
-
-const CourseTypeEight = ({ data, classes }) => {
-    const {cartCourses} = useSelector(state => state.cart);
-    const dispatch = useDispatch();
-    const wishlists = useSelector(wishlistItems);
-    const isWishlistSelected = wishlists.find(w => Number(w.id) === Number(data.id));
-
-    const handleWishlist = (course_item) => {
-        if (wishlists.find(i => i.id === course_item.id)) {
-            dispatch(
-                add_to_wishlist({
-                    change_type: 'remove_wishlist', item: {
-                    id: course_item.id,
-                    img: `/assets/images/course/course-06/${course_item.img}`,
-                    title: course_item.title,
-                    price: course_item.course_price
-                }
-            }))
-        } else {
-            dispatch(
-                add_to_wishlist({
-                    change_type: 'add_wishlist', item: {
-                    id: course_item.id,
-                    img: `/assets/images/course/course-06/${course_item.img}`,
-                    title: course_item.title,
-                    price: course_item.course_price
-                }
-            }))
-        }
-    }
-
-    // handle add to cart
-    const handleAddToCart = (course) => {
-        dispatch(cart_course({
-            id:course.id,
-            img:`/assets/images/course/course-06/${course.img}`,
-            price:course.course_price,
-            title:course.title
-        }))
-    }
-
-    return (
-        <div className={`edu-course course-style-4 course-style-9 ${ classes ? classes : '' }`}>
-            <div className="inner">
-                <div className="thumbnail">
-                    <Link href={`/course-details/${data.id}`}>
-
-                        <img
-                            src={`/assets/images/course/course-06/${data.img}`}
-                            alt="Course Thumb"
-                        />
-
-                    </Link>
-                    <div className="time-top">
-                        <span className="duration">
-                            <i className="icon-61"></i>
-                            {data.duration}
-                        </span>
-                    </div>
-                </div>
-
-                <div className="content">
-                    <div className="course-price">
-                        ${data?.course_price}
-                    </div>
-
-                    <h6 className="title">
-                        <Link href={`/course-details/${data.id}`}>
-                            {data.title}
-                        </Link>
-                    </h6>
-
-                    <div className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">
-                            ({data.rating} /{data.rating_count}{" "} Rating)
-                        </span>
-                    </div>
-
-                    <p>{data.short_desc}</p>
-
-                    <ul className="course-meta">
-                        <li>
-                            <i className="icon-24"></i>
-                            {data.lesson} Lessons
-                        </li>
-                        <li>
-                            <i className="icon-25"></i>
-                            {data.student} Students
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div className="hover-content-aside">
-                <div className="content">
-                    <span className="course-level">
-                        {data.level}
-                    </span>
-
-                    <h5 className="title">
-                        <Link href={`/course-details/${data.id}`}>
-                            {data.title}
-                        </Link>
-                    </h5>
-
-                    <div className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">
-                            ({data.rating})
-                        </span>
-                    </div>
-
-                    <ul className="course-meta">
-                        <li>{data.lesson} Lessons</li>
-                        <li>{data.duration}</li>
-                        <li>{data.level}</li>
-                    </ul>
-
-                    <div className="course-feature">
-                        <h6 className="title">What You’ll Learn?</h6>
-                        <ul>
-                            { 
-                                data.features.slice(0, 3).map( (feature, featurekey) => <li key={ featurekey }>{ feature }</li> )
-                            }
-                        </ul>
-                    </div>
-
-                    <div className="button-group">
-                        <a onClick={() => handleAddToCart(data)} style={{ cursor: "pointer" }} className="edu-btn btn-medium">
-                            {
-                                cartCourses.some(
-                                    (course) =>
-                                    course.id === data.id
-                                )
-                                ? "Added to cart"
-                                : "Add to cart"
-                            }
-                        </a>
-                        <button onClick={() => handleWishlist(data)} style={{ cursor: "pointer" }} className={`btn-outline-dark wishlist-btn ${isWishlistSelected ? 'active' : ''}`}><i className="icon-22"></i></button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default CourseTypeEight;
\ No newline at end of file
diff --git a/src/components/course/course-type-eight.tsx b/src/components/course/course-type-eight.tsx
new file mode 100644
index 0000000..8281cd8
--- /dev/null
+++ b/src/components/course/course-type-eight.tsx
@@ -0,0 +1,178 @@
+import Link from 'next/link';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { cart_course } from '../../redux/features/cart-slice';
+import { add_to_wishlist, wishlistItems } from '../../redux/features/wishlist-slice';
+import { AppState } from '../../redux/store';
+
+// TODO: change any
+type CourseTypeEightProps = {
+    data: any;
+    classes?: string;
+};
+
+const CourseTypeEight = ({ data, classes }: CourseTypeEightProps) => {
+    const { cartCourses } = useSelector((state: AppState) => state.cart);
+    const dispatch = useDispatch();
+    const wishlists = useSelector(wishlistItems);
+    const isWishlistSelected = wishlists.find(w => Number(w.id) === Number(data.id));
+
+    const handleWishlist = course_item => {
+        if (wishlists.find(i => i.id === course_item.id)) {
+            dispatch(
+                add_to_wishlist({
+                    change_type: 'remove_wishlist',
+                    item: {
+                        id: course_item.id,
+                        img: `/assets/images/course/course-06/${course_item.img}`,
+                        title: course_item.title,
+                        price: course_item.course_price,
+                    },
+                })
+            );
+        } else {
+            dispatch(
+                add_to_wishlist({
+                    change_type: 'add_wishlist',
+                    item: {
+                        id: course_item.id,
+                        img: `/assets/images/course/course-06/${course_item.img}`,
+                        title: course_item.title,
+                        price: course_item.course_price,
+                    },
+                })
+            );
+        }
+    };
+
+    // handle add to cart
+    const handleAddToCart = course => {
+        dispatch(
+            cart_course({
+                id: course.id,
+                img: `/assets/images/course/course-06/${course.img}`,
+                price: course.course_price,
+                title: course.title,
+            })
+        );
+    };
+
+    return (
+        <div
+            className={`edu-course course-style-4 course-style-9 ${
+                classes ? classes : ''
+            }`}
+        >
+            <div className='inner'>
+                <div className='thumbnail'>
+                    <Link href={`/course-details/${data.id}`}>
+                        <picture>
+                            <img
+                                src={`/assets/images/course/course-06/${data.img}`}
+                                alt='Course Thumb'
+                            />
+                        </picture>
+                    </Link>
+                    <div className='time-top'>
+                        <span className='duration'>
+                            <i className='icon-61'></i>
+                            {data.duration}
+                        </span>
+                    </div>
+                </div>
+
+                <div className='content'>
+                    <div className='course-price'>${data?.course_price}</div>
+
+                    <h6 className='title'>
+                        <Link href={`/course-details/${data.id}`}>{data.title}</Link>
+                    </h6>
+
+                    <div className='course-rating'>
+                        <div className='rating'>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                        </div>
+                        <span className='rating-count'>
+                            ({data.rating} /{data.rating_count} Rating)
+                        </span>
+                    </div>
+
+                    <p>{data.short_desc}</p>
+
+                    <ul className='course-meta'>
+                        <li>
+                            <i className='icon-24'></i>
+                            {data.lesson} Lessons
+                        </li>
+                        <li>
+                            <i className='icon-25'></i>
+                            {data.student} Students
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div className='hover-content-aside'>
+                <div className='content'>
+                    <span className='course-level'>{data.level}</span>
+
+                    <h5 className='title'>
+                        <Link href={`/course-details/${data.id}`}>{data.title}</Link>
+                    </h5>
+
+                    <div className='course-rating'>
+                        <div className='rating'>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                        </div>
+                        <span className='rating-count'>({data.rating})</span>
+                    </div>
+
+                    <ul className='course-meta'>
+                        <li>{data.lesson} Lessons</li>
+                        <li>{data.duration}</li>
+                        <li>{data.level}</li>
+                    </ul>
+
+                    <div className='course-feature'>
+                        <h6 className='title'>What You’ll Learn?</h6>
+                        <ul>
+                            {data.features.slice(0, 3).map((feature, featurekey) => (
+                                <li key={featurekey}>{feature}</li>
+                            ))}
+                        </ul>
+                    </div>
+
+                    <div className='button-group'>
+                        <a
+                            onClick={() => handleAddToCart(data)}
+                            style={{ cursor: 'pointer' }}
+                            className='edu-btn btn-medium'
+                        >
+                            {cartCourses.some(course => course.id === data.id)
+                                ? 'Added to cart'
+                                : 'Add to cart'}
+                        </a>
+                        <button
+                            onClick={() => handleWishlist(data)}
+                            style={{ cursor: 'pointer' }}
+                            className={`btn-outline-dark wishlist-btn ${
+                                isWishlistSelected ? 'active' : ''
+                            }`}
+                        >
+                            <i className='icon-22'></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CourseTypeEight;
diff --git a/src/components/course/course-type-five.jsx b/src/components/course/course-type-five.jsx
deleted file mode 100644
index 511c671..0000000
--- a/src/components/course/course-type-five.jsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { cart_course } from '../../redux/features/cart-slice';
-import { add_to_wishlist, wishlistItems } from '../../redux/features/wishlist-slice';
-
-const CourseTypeFive = ({ data, classes }) => {
-    const {cartCourses} = useSelector(state => state.cart);
-    const dispatch = useDispatch();
-    const wishlists = useSelector(wishlistItems);
-    const isWishlistSelected = wishlists.find(w => Number(w.id) === Number(data.id));
-
-    const handleWishlist = (course_item) => {
-        if (wishlists.find(i => i.id === course_item.id)) {
-            dispatch(
-                add_to_wishlist({
-                    change_type: 'remove_wishlist', item: {
-                    id: course_item.id,
-                    img: `/assets/images/course/course-06/${course_item.img}`,
-                    title: course_item.title,
-                    price: course_item.course_price
-                }
-            }))
-        } else {
-            dispatch(
-                add_to_wishlist({
-                    change_type: 'add_wishlist', item: {
-                    id: course_item.id,
-                    img: `/assets/images/course/course-06/${course_item.img}`,
-                    title: course_item.title,
-                    price: course_item.course_price
-                }
-            }))
-        }
-    }
-
-    // handle add to cart
-    const handleAddToCart = (course) => {
-        dispatch(cart_course({
-            id:course.id,
-            img:`/assets/images/course/course-06/${course.img}`,
-            price:course.course_price,
-            title:course.title
-        }))
-    }
-
-    return (
-        <div className={`edu-course course-style-4 course-style-8 ${ classes ? classes : '' }`}>
-            <div className="inner">
-                <div className="thumbnail">
-                    <Link href={`/course-details/${data.id}`}>
-
-                        <img
-                            src={`/assets/images/course/course-06/${data.img}`}
-                            alt="Course Thumb"
-                        />
-
-                    </Link>
-                    <div className="time-top">
-                        <span className="duration">
-                            <i className="icon-61"></i>
-                            {data.duration}
-                        </span>
-                    </div>
-                </div>
-
-                <div className="content">
-                    <div className="course-price">
-                        ${data?.course_price}
-                    </div>
-
-                    <h6 className="title">
-                        <Link href={`/course-details/${data.id}`}>
-                            {data.title}
-                        </Link>
-                    </h6>
-
-                    <div className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">
-                            ({data.rating} /{data.rating_count}{" "} Rating)
-                        </span>
-                    </div>
-
-                    <p>{data.short_desc}</p>
-
-                    <ul className="course-meta">
-                        <li>
-                            <i className="icon-24"></i>
-                            {data.lesson} Lessons
-                        </li>
-                        <li>
-                            <i className="icon-25"></i>
-                            {data.student} Students
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div className="hover-content-aside">
-                <div className="content">
-                    <span className="course-level">
-                        {data.level}
-                    </span>
-
-                    <h5 className="title">
-                        <Link href={`/course-details/${data.id}`}>
-                            {data.title}
-                        </Link>
-                    </h5>
-
-                    <div className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">
-                            ({data.rating})
-                        </span>
-                    </div>
-
-                    <ul className="course-meta">
-                        <li>{data.lesson} Lessons</li>
-                        <li>{data.duration}</li>
-                        <li>{data.level}</li>
-                    </ul>
-
-                    <div className="course-feature">
-                        <h6 className="title">What You’ll Learn?</h6>
-                        <ul>
-                            { 
-                                data.features.slice(0, 3).map( (feature, featurekey) => <li key={ featurekey }>{ feature }</li> )
-                            }
-                        </ul>
-                    </div>
-
-                    <div className="button-group">
-                        <a onClick={() => handleAddToCart(data)} style={{ cursor: "pointer" }} className="edu-btn btn-medium">
-                            {
-                                cartCourses.some(
-                                    (course) =>
-                                    course.id === data.id
-                                )
-                                ? "Added to cart"
-                                : "Add to cart"
-                            }
-                        </a>
-                        <button onClick={() => handleWishlist(data)} style={{ cursor: "pointer" }} className={`btn-outline-dark wishlist-btn ${isWishlistSelected ? 'active' : ''}`}><i className="icon-22"></i></button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default CourseTypeFive;
\ No newline at end of file
diff --git a/src/components/course/course-type-five.tsx b/src/components/course/course-type-five.tsx
new file mode 100644
index 0000000..0b16e24
--- /dev/null
+++ b/src/components/course/course-type-five.tsx
@@ -0,0 +1,178 @@
+import Link from 'next/link';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { cart_course } from '../../redux/features/cart-slice';
+import { add_to_wishlist, wishlistItems } from '../../redux/features/wishlist-slice';
+import { AppState } from '../../redux/store';
+
+// TODO: change any
+type CourseTypeFiveProps = {
+    data: any;
+    classes?: string;
+};
+
+const CourseTypeFive = ({ data, classes }: CourseTypeFiveProps) => {
+    const { cartCourses } = useSelector((state: AppState) => state.cart);
+    const dispatch = useDispatch();
+    const wishlists = useSelector(wishlistItems);
+    const isWishlistSelected = wishlists.find(w => Number(w.id) === Number(data.id));
+
+    const handleWishlist = course_item => {
+        if (wishlists.find(i => i.id === course_item.id)) {
+            dispatch(
+                add_to_wishlist({
+                    change_type: 'remove_wishlist',
+                    item: {
+                        id: course_item.id,
+                        img: `/assets/images/course/course-06/${course_item.img}`,
+                        title: course_item.title,
+                        price: course_item.course_price,
+                    },
+                })
+            );
+        } else {
+            dispatch(
+                add_to_wishlist({
+                    change_type: 'add_wishlist',
+                    item: {
+                        id: course_item.id,
+                        img: `/assets/images/course/course-06/${course_item.img}`,
+                        title: course_item.title,
+                        price: course_item.course_price,
+                    },
+                })
+            );
+        }
+    };
+
+    // handle add to cart
+    const handleAddToCart = course => {
+        dispatch(
+            cart_course({
+                id: course.id,
+                img: `/assets/images/course/course-06/${course.img}`,
+                price: course.course_price,
+                title: course.title,
+            })
+        );
+    };
+
+    return (
+        <div
+            className={`edu-course course-style-4 course-style-8 ${
+                classes ? classes : ''
+            }`}
+        >
+            <div className='inner'>
+                <div className='thumbnail'>
+                    <Link href={`/course-details/${data.id}`}>
+                        <picture>
+                            <img
+                                src={`/assets/images/course/course-06/${data.img}`}
+                                alt='Course Thumb'
+                            />
+                        </picture>
+                    </Link>
+                    <div className='time-top'>
+                        <span className='duration'>
+                            <i className='icon-61'></i>
+                            {data.duration}
+                        </span>
+                    </div>
+                </div>
+
+                <div className='content'>
+                    <div className='course-price'>${data?.course_price}</div>
+
+                    <h6 className='title'>
+                        <Link href={`/course-details/${data.id}`}>{data.title}</Link>
+                    </h6>
+
+                    <div className='course-rating'>
+                        <div className='rating'>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                        </div>
+                        <span className='rating-count'>
+                            ({data.rating} /{data.rating_count} Rating)
+                        </span>
+                    </div>
+
+                    <p>{data.short_desc}</p>
+
+                    <ul className='course-meta'>
+                        <li>
+                            <i className='icon-24'></i>
+                            {data.lesson} Lessons
+                        </li>
+                        <li>
+                            <i className='icon-25'></i>
+                            {data.student} Students
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div className='hover-content-aside'>
+                <div className='content'>
+                    <span className='course-level'>{data.level}</span>
+
+                    <h5 className='title'>
+                        <Link href={`/course-details/${data.id}`}>{data.title}</Link>
+                    </h5>
+
+                    <div className='course-rating'>
+                        <div className='rating'>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                        </div>
+                        <span className='rating-count'>({data.rating})</span>
+                    </div>
+
+                    <ul className='course-meta'>
+                        <li>{data.lesson} Lessons</li>
+                        <li>{data.duration}</li>
+                        <li>{data.level}</li>
+                    </ul>
+
+                    <div className='course-feature'>
+                        <h6 className='title'>What You’ll Learn?</h6>
+                        <ul>
+                            {data.features.slice(0, 3).map((feature, featurekey) => (
+                                <li key={featurekey}>{feature}</li>
+                            ))}
+                        </ul>
+                    </div>
+
+                    <div className='button-group'>
+                        <a
+                            onClick={() => handleAddToCart(data)}
+                            style={{ cursor: 'pointer' }}
+                            className='edu-btn btn-medium'
+                        >
+                            {cartCourses.some(course => course.id === data.id)
+                                ? 'Added to cart'
+                                : 'Add to cart'}
+                        </a>
+                        <button
+                            onClick={() => handleWishlist(data)}
+                            style={{ cursor: 'pointer' }}
+                            className={`btn-outline-dark wishlist-btn ${
+                                isWishlistSelected ? 'active' : ''
+                            }`}
+                        >
+                            <i className='icon-22'></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CourseTypeFive;
diff --git a/src/components/course/course-type-four.jsx b/src/components/course/course-type-four.jsx
deleted file mode 100644
index 6807bbf..0000000
--- a/src/components/course/course-type-four.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { cart_course } from '../../redux/features/cart-slice';
-import { add_to_wishlist, wishlistItems } from '../../redux/features/wishlist-slice';
-
-const CourseTypeFour = ({ data, classes }) => {
-    const {cartCourses} = useSelector(state => state.cart);
-    const dispatch = useDispatch();
-    const wishlists = useSelector(wishlistItems);
-    const isWishlistSelected = wishlists.find(w => Number(w.id) === Number(data.id));
-
-    const handleWishlist = (course_item) => {
-        if (wishlists.find(i => i.id === course_item.id)) {
-            dispatch(
-                add_to_wishlist({
-                    change_type: 'remove_wishlist', item: {
-                    id: course_item.id,
-                    img: `/assets/images/course/course-06/${course_item.img}`,
-                    title: course_item.title,
-                    price: course_item.course_price
-                }
-            }))
-        } else {
-            dispatch(
-                add_to_wishlist({
-                    change_type: 'add_wishlist', item: {
-                    id: course_item.id,
-                    img: `/assets/images/course/course-06/${course_item.img}`,
-                    title: course_item.title,
-                    price: course_item.course_price
-                }
-            }))
-        }
-    }
-
-    // handle add to cart
-    const handleAddToCart = (course) => {
-        dispatch(cart_course({
-            id:course.id,
-            img:`/assets/images/course/course-06/${course.img}`,
-            price:course.course_price,
-            title:course.title
-        }))
-    }
-
-    return (
-        <div className={`edu-course course-style-5 ${ classes ? classes : '' }`}>
-            <div className="inner">
-                <div className="thumbnail">
-                    <Link href={`/course-details/${data.id}`}>
-
-                        <img src={`/assets/images/course/course-04/${data.img}`} alt="Course Meta" />
-
-                    </Link>
-                </div>
-                <div className="content">
-                    <div className="course-price price-round">${Math.trunc(data.course_price)}</div>
-                    <span className="course-level">{data.level}</span>
-                    <h5 className="title">
-                        <Link href={`/course-details/${data.id}`}>
-                            {data.title}
-                        </Link>
-                    </h5>
-                    <div className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">({data.rating})</span>
-                    </div>
-                    <p>{data.short_desc}</p>
-                    <ul className="course-meta">
-                        <li><i className="icon-24"></i>{data.lesson} Lessons</li>
-                        <li><i className="icon-25"></i>{data.student} Students</li>
-                    </ul>
-                </div>
-            </div>
-            
-            <div className="hover-content-aside">
-                <div className="content">
-                    <span className="course-level">{ data.category }</span>
-                    <h5 className="title">
-                        <n-link to="/course/course-details">{ data.title }</n-link>
-                    </h5>
-                    <div className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">({ data.rating })</span>
-                    </div>
-                    <ul className="course-meta">
-                        <li>{ data.lesson } { data.lesson + data.lesson > 1 ? 'Lessons' : 'Lesson' }</li>
-                        <li>{ data.duration }</li>
-                        <li>{ data.level }</li>
-                    </ul>
-                    <div className="course-feature">
-                        <h6 className="title">What You’ll Learn?</h6>
-                        <ul>
-                            { 
-                                data.features.slice(0, 3).map( (feature, featurekey) => <li key={ featurekey }>{ feature }</li> )
-                            }
-                        </ul>
-                    </div>
-                    <div className="button-group">
-                        <a className="edu-btn btn-medium" onClick={()=> handleAddToCart(data)}
-                        style={{cursor:'pointer'}}>
-                            {cartCourses.some(item => item.id === data.id) ? 'Added to cart' : 'Add to cart'}
-                            <i className="icon-4"></i>
-                        </a>
-
-                        <button onClick={() => handleWishlist(data)} className={`wishlist-btn btn-outline-dark ${isWishlistSelected ? 'active' : ''}`}>
-                            <i className="icon-22"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default CourseTypeFour;
\ No newline at end of file
diff --git a/src/components/course/course-type-four.tsx b/src/components/course/course-type-four.tsx
new file mode 100644
index 0000000..2ef9f4e
--- /dev/null
+++ b/src/components/course/course-type-four.tsx
@@ -0,0 +1,165 @@
+import Link from 'next/link';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { cart_course } from '../../redux/features/cart-slice';
+import { add_to_wishlist, wishlistItems } from '../../redux/features/wishlist-slice';
+import { AppState } from '../../redux/store';
+
+// TODO: change any
+type CourseTypeFourProps = {
+    data: any;
+    classes?: string;
+};
+
+const CourseTypeFour = ({ data, classes }: CourseTypeFourProps) => {
+    const { cartCourses } = useSelector((state: AppState) => state.cart);
+    const dispatch = useDispatch();
+    const wishlists = useSelector(wishlistItems);
+    const isWishlistSelected = wishlists.find(w => Number(w.id) === Number(data.id));
+
+    const handleWishlist = course_item => {
+        if (wishlists.find(i => i.id === course_item.id)) {
+            dispatch(
+                add_to_wishlist({
+                    change_type: 'remove_wishlist',
+                    item: {
+                        id: course_item.id,
+                        img: `/assets/images/course/course-06/${course_item.img}`,
+                        title: course_item.title,
+                        price: course_item.course_price,
+                    },
+                })
+            );
+        } else {
+            dispatch(
+                add_to_wishlist({
+                    change_type: 'add_wishlist',
+                    item: {
+                        id: course_item.id,
+                        img: `/assets/images/course/course-06/${course_item.img}`,
+                        title: course_item.title,
+                        price: course_item.course_price,
+                    },
+                })
+            );
+        }
+    };
+
+    // handle add to cart
+    const handleAddToCart = course => {
+        dispatch(
+            cart_course({
+                id: course.id,
+                img: `/assets/images/course/course-06/${course.img}`,
+                price: course.course_price,
+                title: course.title,
+            })
+        );
+    };
+
+    return (
+        <div className={`edu-course course-style-5 ${classes ? classes : ''}`}>
+            <div className='inner'>
+                <div className='thumbnail'>
+                    <Link href={`/course-details/${data.id}`}>
+                        <picture>
+                            <img
+                                src={`/assets/images/course/course-04/${data.img}`}
+                                alt='Course Meta'
+                            />
+                        </picture>
+                    </Link>
+                </div>
+                <div className='content'>
+                    <div className='course-price price-round'>
+                        ${Math.trunc(data.course_price)}
+                    </div>
+                    <span className='course-level'>{data.level}</span>
+                    <h5 className='title'>
+                        <Link href={`/course-details/${data.id}`}>{data.title}</Link>
+                    </h5>
+                    <div className='course-rating'>
+                        <div className='rating'>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                        </div>
+                        <span className='rating-count'>({data.rating})</span>
+                    </div>
+                    <p>{data.short_desc}</p>
+                    <ul className='course-meta'>
+                        <li>
+                            <i className='icon-24'></i>
+                            {data.lesson} Lessons
+                        </li>
+                        <li>
+                            <i className='icon-25'></i>
+                            {data.student} Students
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div className='hover-content-aside'>
+                <div className='content'>
+                    <span className='course-level'>{data.category}</span>
+                    <h5 className='title'>
+                        {/* @ts-expect-error ts(2339) */}
+                        <n-link to='/course/course-details'>{data.title}</n-link>
+                    </h5>
+                    <div className='course-rating'>
+                        <div className='rating'>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                        </div>
+                        <span className='rating-count'>({data.rating})</span>
+                    </div>
+                    <ul className='course-meta'>
+                        <li>
+                            {data.lesson}{' '}
+                            {data.lesson + data.lesson > 1 ? 'Lessons' : 'Lesson'}
+                        </li>
+                        <li>{data.duration}</li>
+                        <li>{data.level}</li>
+                    </ul>
+                    <div className='course-feature'>
+                        <h6 className='title'>What You’ll Learn?</h6>
+                        <ul>
+                            {data.features.slice(0, 3).map((feature, featurekey) => (
+                                <li key={featurekey}>{feature}</li>
+                            ))}
+                        </ul>
+                    </div>
+                    <div className='button-group'>
+                        <a
+                            className='edu-btn btn-medium'
+                            onClick={() => handleAddToCart(data)}
+                            style={{ cursor: 'pointer' }}
+                        >
+                            {cartCourses.some(item => item.id === data.id)
+                                ? 'Added to cart'
+                                : 'Add to cart'}
+                            <i className='icon-4'></i>
+                        </a>
+
+                        <button
+                            onClick={() => handleWishlist(data)}
+                            className={`wishlist-btn btn-outline-dark ${
+                                isWishlistSelected ? 'active' : ''
+                            }`}
+                        >
+                            <i className='icon-22'></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CourseTypeFour;
diff --git a/src/components/course/course-type-one.jsx b/src/components/course/course-type-one.jsx
deleted file mode 100644
index f50b401..0000000
--- a/src/components/course/course-type-one.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { cart_course } from '../../redux/features/cart-slice';
-import { add_to_wishlist, wishlistItems } from '../../redux/features/wishlist-slice';
-
-const CourseTypeOne = ({ data, classes, image_location_path='01' }) => {
-    const {cartCourses} = useSelector(state => state.cart);
-    const dispatch = useDispatch();
-    const wishlists = useSelector(wishlistItems);
-    const isWishlistSelected = wishlists.find(w => Number(w.id) === Number(data.id));
-
-    const handleWishlist = (course_item) => {
-        if (wishlists.find(i => i.id === course_item.id)) {
-            dispatch(
-                add_to_wishlist({
-                    change_type: 'remove_wishlist', item: {
-                    id: course_item.id,
-                    img: `/assets/images/course/course-06/${course_item.img}`,
-                    title: course_item.title,
-                    price: course_item.course_price
-                }
-            }))
-        } else {
-            dispatch(
-                add_to_wishlist({
-                    change_type: 'add_wishlist', item: {
-                    id: course_item.id,
-                    img: `/assets/images/course/course-06/${course_item.img}`,
-                    title: course_item.title,
-                    price: course_item.course_price
-                }
-            }))
-        }
-    }
-
-    // handle add to cart
-    const handleAddToCart = (course) => {
-        dispatch(cart_course({
-            id:course.id,
-            img:`/assets/images/course/course-06/${course.img}`,
-            price:course.course_price,
-            title:course.title
-        }))
-    }
-
-    return (
-        <div className={`edu-course course-style-1 ${ classes ? classes : '' } hover-button-bg-white`}>
-            <div className="inner">
-                <div className="thumbnail">
-                    <Link href={`/course-details/${data.id}`}>
-
-                        <img src={`/assets/images/course/course-${image_location_path}/${data.img}`} alt="Course Meta" />
-
-                    </Link>
-                    <div className="time-top">
-                        <span className="duration"><i className="icon-61"></i>{data.duration}</span>
-                    </div>
-                </div>
-                <div className="content">
-                    <span className="course-level">{data.level}</span>
-                    <h6 className="title">
-                        <a href="#">{data.title}</a>
-                    </h6>
-                    <div className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">({data.rating} /{data.rating_count} Rating)</span>
-                    </div>
-                    <div className="course-price">${data.course_price}</div>
-                    <ul className="course-meta">
-                        <li><i className="icon-24"></i>{data.lesson} Lessons</li>
-                        <li><i className="icon-25"></i>{data.student} Students</li>
-                    </ul>
-                </div>
-            </div>
-
-            <div className="course-hover-content-wrapper">
-                <button onClick={() => handleWishlist(data)} className={`wishlist-btn ${isWishlistSelected ? 'active' : ''}`}><i className="icon-22"></i></button>
-            </div>
-
-            <div className="course-hover-content">
-                <div className="content">
-                    <button onClick={() => handleWishlist(data)} className={`wishlist-btn ${isWishlistSelected ? 'active' : ''}`}>
-                        <i className="icon-22"></i>
-                    </button>
-                    <span className="course-level">{data.level}</span>
-                        <h6 className="title">
-                            <Link href={`/course-details/${data.id}`}>
-                                {data.title}
-                            </Link>
-                        </h6>
-                    <div className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">({data.rating} /{data.rating_count} Rating)</span>
-                    </div>
-                    <div className="course-price">${data.course_price}</div>
-                    <p>{data.short_desc}</p>
-                    <ul className="course-meta">
-                        <li><i className="icon-24"></i>{data.lesson} Lessons</li>
-                        <li><i className="icon-25"></i>{data.student} Students</li>
-                    </ul>
-                    <a onClick={() => handleAddToCart(data)} className="edu-btn btn-secondary btn-small" style={{ cursor: 'pointer' }}>
-                        {cartCourses.some(item => item.id === data.id) ? 'Added to cart' : 'Add to cart'}
-                        <i className="icon-4"></i>
-                    </a>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default CourseTypeOne;
diff --git a/src/components/course/course-type-one.tsx b/src/components/course/course-type-one.tsx
new file mode 100644
index 0000000..16c3d87
--- /dev/null
+++ b/src/components/course/course-type-one.tsx
@@ -0,0 +1,180 @@
+import Link from 'next/link';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { cart_course } from '../../redux/features/cart-slice';
+import { add_to_wishlist, wishlistItems } from '../../redux/features/wishlist-slice';
+import { AppState } from '../../redux/store';
+
+// TODO: change any
+type CourseTypeOneProps = {
+    data: any;
+    classes?: string;
+    image_location_path?: string;
+};
+
+const CourseTypeOne = ({
+    data,
+    classes,
+    image_location_path = '01',
+}: CourseTypeOneProps) => {
+    const { cartCourses } = useSelector((state: AppState) => state.cart);
+    const dispatch = useDispatch();
+    const wishlists = useSelector(wishlistItems);
+    const isWishlistSelected = wishlists.find(w => Number(w.id) === Number(data.id));
+
+    const handleWishlist = course_item => {
+        if (wishlists.find(i => i.id === course_item.id)) {
+            dispatch(
+                add_to_wishlist({
+                    change_type: 'remove_wishlist',
+                    item: {
+                        id: course_item.id,
+                        img: `/assets/images/course/course-06/${course_item.img}`,
+                        title: course_item.title,
+                        price: course_item.course_price,
+                    },
+                })
+            );
+        } else {
+            dispatch(
+                add_to_wishlist({
+                    change_type: 'add_wishlist',
+                    item: {
+                        id: course_item.id,
+                        img: `/assets/images/course/course-06/${course_item.img}`,
+                        title: course_item.title,
+                        price: course_item.course_price,
+                    },
+                })
+            );
+        }
+    };
+
+    // handle add to cart
+    const handleAddToCart = course => {
+        dispatch(
+            cart_course({
+                id: course.id,
+                img: `/assets/images/course/course-06/${course.img}`,
+                price: course.course_price,
+                title: course.title,
+            })
+        );
+    };
+
+    return (
+        <div
+            className={`edu-course course-style-1 ${
+                classes ? classes : ''
+            } hover-button-bg-white`}
+        >
+            <div className='inner'>
+                <div className='thumbnail'>
+                    <Link href={`/course-details/${data.id}`}>
+                        <picture>
+                            <img
+                                src={`/assets/images/course/course-${image_location_path}/${data.img}`}
+                                alt='Course Meta'
+                            />
+                        </picture>
+                    </Link>
+                    <div className='time-top'>
+                        <span className='duration'>
+                            <i className='icon-61'></i>
+                            {data.duration}
+                        </span>
+                    </div>
+                </div>
+                <div className='content'>
+                    <span className='course-level'>{data.level}</span>
+                    <h6 className='title'>
+                        <a href='#'>{data.title}</a>
+                    </h6>
+                    <div className='course-rating'>
+                        <div className='rating'>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                        </div>
+                        <span className='rating-count'>
+                            ({data.rating} /{data.rating_count} Rating)
+                        </span>
+                    </div>
+                    <div className='course-price'>${data.course_price}</div>
+                    <ul className='course-meta'>
+                        <li>
+                            <i className='icon-24'></i>
+                            {data.lesson} Lessons
+                        </li>
+                        <li>
+                            <i className='icon-25'></i>
+                            {data.student} Students
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div className='course-hover-content-wrapper'>
+                <button
+                    onClick={() => handleWishlist(data)}
+                    className={`wishlist-btn ${isWishlistSelected ? 'active' : ''}`}
+                >
+                    <i className='icon-22'></i>
+                </button>
+            </div>
+
+            <div className='course-hover-content'>
+                <div className='content'>
+                    <button
+                        onClick={() => handleWishlist(data)}
+                        className={`wishlist-btn ${isWishlistSelected ? 'active' : ''}`}
+                    >
+                        <i className='icon-22'></i>
+                    </button>
+                    <span className='course-level'>{data.level}</span>
+                    <h6 className='title'>
+                        <Link href={`/course-details/${data.id}`}>{data.title}</Link>
+                    </h6>
+                    <div className='course-rating'>
+                        <div className='rating'>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                        </div>
+                        <span className='rating-count'>
+                            ({data.rating} /{data.rating_count} Rating)
+                        </span>
+                    </div>
+                    <div className='course-price'>${data.course_price}</div>
+                    <p>{data.short_desc}</p>
+                    <ul className='course-meta'>
+                        <li>
+                            <i className='icon-24'></i>
+                            {data.lesson} Lessons
+                        </li>
+                        <li>
+                            <i className='icon-25'></i>
+                            {data.student} Students
+                        </li>
+                    </ul>
+                    <a
+                        onClick={() => handleAddToCart(data)}
+                        className='edu-btn btn-secondary btn-small'
+                        style={{ cursor: 'pointer' }}
+                    >
+                        {cartCourses.some(item => item.id === data.id)
+                            ? 'Added to cart'
+                            : 'Add to cart'}
+                        <i className='icon-4'></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CourseTypeOne;
diff --git a/src/components/course/course-type-seven.jsx b/src/components/course/course-type-seven.jsx
deleted file mode 100644
index 58b1a03..0000000
--- a/src/components/course/course-type-seven.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-const CourseTypeSeven = ({ data, classes }) => {
-    return (
-        <div className={`edu-course course-style-5 ${ classes ? classes : '' }`}>
-            <div className="inner">
-                <div className="thumbnail">
-                    <Link href={`/course-details/${data.id}`}>
-
-                        <img src={`/assets/images/course/course-04/${data.img}`} alt="Course Meta" />
-
-                    </Link>
-                    <div className="course-price">${data.course_price}</div>
-                    <div className="read-more-btn">
-                        <Link href={`/course-details/${data.id}`} className="btn-icon-round">
-                            <i className="icon-4"></i>
-                        </Link>
-                    </div>
-                </div>
-                <div className="instructor">
-                    <img src={`/assets/images/course/instructor/${data.instructor_img}`} alt="images" />
-                    <h6 className="instructor-name">{data.instructor}</h6>
-                </div>
-                <div className="content">
-                    <h6 className="title">
-                        <Link href={`/course-details/${data.id}`}>
-
-                            {data.title}
-
-                        </Link>
-                    </h6>
-                    <p className="text">{data.short_desc}</p>
-                </div>
-            </div>
-        </div>
-    );
-}
-export default CourseTypeSeven;
\ No newline at end of file
diff --git a/src/components/course/course-type-seven.tsx b/src/components/course/course-type-seven.tsx
new file mode 100644
index 0000000..2f1b3ba
--- /dev/null
+++ b/src/components/course/course-type-seven.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import Link from 'next/link';
+
+// TODO: change any
+type CourseTypeSevenProps = {
+    data: any;
+    classes?: string;
+};
+
+const CourseTypeSeven = ({ data, classes }: CourseTypeSevenProps) => {
+    return (
+        <div className={`edu-course course-style-5 ${classes ? classes : ''}`}>
+            <div className='inner'>
+                <div className='thumbnail'>
+                    <Link href={`/course-details/${data.id}`}>
+                        <picture>
+                            <img
+                                src={`/assets/images/course/course-04/${data.img}`}
+                                alt='Course Meta'
+                            />
+                        </picture>
+                    </Link>
+                    <div className='course-price'>${data.course_price}</div>
+                    <div className='read-more-btn'>
+                        <Link
+                            href={`/course-details/${data.id}`}
+                            className='btn-icon-round'
+                        >
+                            <i className='icon-4'></i>
+                        </Link>
+                    </div>
+                </div>
+                <div className='instructor'>
+                    <picture>
+                        <img
+                            src={`/assets/images/course/instructor/${data.instructor_img}`}
+                            alt='images'
+                        />
+                    </picture>
+                    <h6 className='instructor-name'>{data.instructor}</h6>
+                </div>
+                <div className='content'>
+                    <h6 className='title'>
+                        <Link href={`/course-details/${data.id}`}>{data.title}</Link>
+                    </h6>
+                    <p className='text'>{data.short_desc}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default CourseTypeSeven;
diff --git a/src/components/course/course-type-six.jsx b/src/components/course/course-type-six.jsx
deleted file mode 100644
index 4f5f598..0000000
--- a/src/components/course/course-type-six.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { useDispatch, useSelector } from 'react-redux';
-import { cart_course } from '../../redux/features/cart-slice';
-
-const CourseTypeSix = ({ data, classes }) => {
-    const {cartCourses} = useSelector(state => state.cart);
-    const dispatch = useDispatch();
-
-    // handle add to cart
-    const handleAddToCart = (course) => {
-        dispatch(cart_course({
-            id: course.id,
-            img: `/assets/images/course/course-06/${course.img}`,
-            price: course.course_price,
-            title: course.title
-        }))
-    }
-    return (
-        <div className={`edu-course course-style-3 ${ classes ? classes : '' }`}>
-            <div className="inner">
-                <div className="thumbnail">
-                    <Link href={`/course-details/${data.id}`}>
-
-                        <img src={`/assets/images/course/course-04/${data.img}`} alt="Course Meta" />
-
-                    </Link>
-                    <div className="time-top">
-                        <span className="duration"><i className="icon-61"></i>{data.course_outline}</span>
-                    </div>
-                </div>
-
-                <div className="content">
-                    <span className="course-level">{data.level}</span>
-                    <h5 className="title">
-                        <Link href={`/course-details/${data.id}`}>
-                            {data.title}
-                        </Link>
-                    </h5>
-                    <p>{data.short_desc}</p>
-                    <div className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">({data.rating} /{data.rating_count} Rating)</span>
-                    </div>
-                    <div className="read-more-btn">
-                        <a className="edu-btn btn-small btn-secondary" onClick={() => handleAddToCart(data)} style={{ cursor: 'pointer' }}>
-                            { cartCourses.some(item => item.id === data.id) ? 'Added to cart' : 'Add to cart' }
-                            <i className="icon-4"></i>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-export default CourseTypeSix;
\ No newline at end of file
diff --git a/src/components/course/course-type-six.tsx b/src/components/course/course-type-six.tsx
new file mode 100644
index 0000000..7140e96
--- /dev/null
+++ b/src/components/course/course-type-six.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import Link from 'next/link';
+import { useDispatch, useSelector } from 'react-redux';
+import { cart_course } from '../../redux/features/cart-slice';
+import { AppState } from '../../redux/store';
+
+// TODO: change any
+type CourseTypeSixProps = {
+    data: any;
+    classes?: string;
+};
+
+const CourseTypeSix = ({ data, classes }: CourseTypeSixProps) => {
+    const { cartCourses } = useSelector((state: AppState) => state.cart);
+    const dispatch = useDispatch();
+
+    // handle add to cart
+    const handleAddToCart = course => {
+        dispatch(
+            cart_course({
+                id: course.id,
+                img: `/assets/images/course/course-06/${course.img}`,
+                price: course.course_price,
+                title: course.title,
+            })
+        );
+    };
+    return (
+        <div className={`edu-course course-style-3 ${classes ? classes : ''}`}>
+            <div className='inner'>
+                <div className='thumbnail'>
+                    <Link href={`/course-details/${data.id}`}>
+                        <picture>
+                            <img
+                                src={`/assets/images/course/course-04/${data.img}`}
+                                alt='Course Meta'
+                            />
+                        </picture>
+                    </Link>
+                    <div className='time-top'>
+                        <span className='duration'>
+                            <i className='icon-61'></i>
+                            {data.course_outline}
+                        </span>
+                    </div>
+                </div>
+
+                <div className='content'>
+                    <span className='course-level'>{data.level}</span>
+                    <h5 className='title'>
+                        <Link href={`/course-details/${data.id}`}>{data.title}</Link>
+                    </h5>
+                    <p>{data.short_desc}</p>
+                    <div className='course-rating'>
+                        <div className='rating'>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                        </div>
+                        <span className='rating-count'>
+                            ({data.rating} /{data.rating_count} Rating)
+                        </span>
+                    </div>
+                    <div className='read-more-btn'>
+                        <a
+                            className='edu-btn btn-small btn-secondary'
+                            onClick={() => handleAddToCart(data)}
+                            style={{ cursor: 'pointer' }}
+                        >
+                            {cartCourses.some(item => item.id === data.id)
+                                ? 'Added to cart'
+                                : 'Add to cart'}
+                            <i className='icon-4'></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default CourseTypeSix;
diff --git a/src/components/course/course-type-three.jsx b/src/components/course/course-type-three.jsx
deleted file mode 100644
index 9ea85a1..0000000
--- a/src/components/course/course-type-three.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-const CourseTypeSeven = ({ data, classes }) => {
-    return (
-        <div className={`edu-course course-style-4 ${ classes ? classes : '' }`}>
-            <div className="inner">
-                <div className="thumbnail">
-                    <Link href={`/course-details/${data.id}`}>
-
-                        <img src={`/assets/images/course/course-03/${data.img}`} alt="Course Meta" />
-
-                    </Link>
-                    <div className="time-top">
-                        <span className="duration"><i className="icon-61"></i>{data.duration}</span>
-                    </div>
-                </div>
-
-                <div className="content">
-                    <div className="course-price">${data.course_price}</div>
-                    <h6 className="title">
-                        <Link href={`/course-details/${data.id}`}>
-                            {data.title}
-                        </Link>
-                    </h6>
-                    <div className="course-rating">
-                        <div className="rating">
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                            <i className="icon-23"></i>
-                        </div>
-                        <span className="rating-count">({data.rating} /{data.rating_count} Rating)</span>
-                    </div>
-                    <ul className="course-meta">
-                        <li><i className="icon-24"></i>{data.lesson} Lessons</li>
-                        <li><i className="icon-25"></i>{data.student} Students</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    );
-}
-export default CourseTypeSeven;
\ No newline at end of file
diff --git a/src/components/course/course-type-three.tsx b/src/components/course/course-type-three.tsx
new file mode 100644
index 0000000..09ccfe2
--- /dev/null
+++ b/src/components/course/course-type-three.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import Link from 'next/link';
+
+// TODO: change any
+type CourseTypeSevenProps = {
+    data: any;
+    classes?: string;
+};
+
+const CourseTypeSeven = ({ data, classes }: CourseTypeSevenProps) => {
+    return (
+        <div className={`edu-course course-style-4 ${classes ? classes : ''}`}>
+            <div className='inner'>
+                <div className='thumbnail'>
+                    <Link href={`/course-details/${data.id}`}>
+                        <picture>
+                            <img
+                                src={`/assets/images/course/course-03/${data.img}`}
+                                alt='Course Meta'
+                            />
+                        </picture>
+                    </Link>
+                    <div className='time-top'>
+                        <span className='duration'>
+                            <i className='icon-61'></i>
+                            {data.duration}
+                        </span>
+                    </div>
+                </div>
+
+                <div className='content'>
+                    <div className='course-price'>${data.course_price}</div>
+                    <h6 className='title'>
+                        <Link href={`/course-details/${data.id}`}>{data.title}</Link>
+                    </h6>
+                    <div className='course-rating'>
+                        <div className='rating'>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                            <i className='icon-23'></i>
+                        </div>
+                        <span className='rating-count'>
+                            ({data.rating} /{data.rating_count} Rating)
+                        </span>
+                    </div>
+                    <ul className='course-meta'>
+                        <li>
+                            <i className='icon-24'></i>
+                            {data.lesson} Lessons
+                        </li>
+                        <li>
+                            <i className='icon-25'></i>
+                            {data.student} Students
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default CourseTypeSeven;
diff --git a/src/components/course/course-type-two.jsx b/src/components/course/course-type-two.jsx
deleted file mode 100644
index b63dd0a..0000000
--- a/src/components/course/course-type-two.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-const CourseTypeTwo = ({ data, classes }) => {
-    return (
-        <div className={`edu-course course-style-6 ${ classes ? classes : '' }`}>
-            <div className="inner">
-                <div className="thumbnail">
-                    <Link href={`/course-details/${data.id}`}>
-
-                        <img src={`/assets/images/course/course-05/${data.img}`} alt="Course Thumb" />
-
-                    </Link>
-                    <div className="course-price price-round">${Math.trunc(data.course_price)}</div>
-                </div>
-                <div className="content">
-                    <span className="course-level">{data.level}</span>
-                    <h5 className="title">
-                        <Link href={`/course-details/${data.id}`}>
-                            {data.title}
-                        </Link>
-                    </h5>
-                    <ul className="course-meta">
-                        <li><i className="icon-24"></i>{data.lesson} Lessons</li>
-                        <li><i className="icon-25"></i>{data.student} Students</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    );
-}
-export default CourseTypeTwo;
\ No newline at end of file
diff --git a/src/components/course/course-type-two.tsx b/src/components/course/course-type-two.tsx
new file mode 100644
index 0000000..cd865aa
--- /dev/null
+++ b/src/components/course/course-type-two.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Link from 'next/link';
+
+// TODO: change any
+type CourseTypeTwoProps = {
+    data: any;
+    classes?: string;
+};
+
+const CourseTypeTwo = ({ data, classes }: CourseTypeTwoProps) => {
+    return (
+        <div className={`edu-course course-style-6 ${classes ? classes : ''}`}>
+            <div className='inner'>
+                <div className='thumbnail'>
+                    <Link href={`/course-details/${data.id}`}>
+                        <picture>
+                            <img
+                                src={`/assets/images/course/course-05/${data.img}`}
+                                alt='Course Thumb'
+                            />
+                        </picture>
+                    </Link>
+                    <div className='course-price price-round'>
+                        ${Math.trunc(data.course_price)}
+                    </div>
+                </div>
+                <div className='content'>
+                    <span className='course-level'>{data.level}</span>
+                    <h5 className='title'>
+                        <Link href={`/course-details/${data.id}`}>{data.title}</Link>
+                    </h5>
+                    <ul className='course-meta'>
+                        <li>
+                            <i className='icon-24'></i>
+                            {data.lesson} Lessons
+                        </li>
+                        <li>
+                            <i className='icon-25'></i>
+                            {data.student} Students
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default CourseTypeTwo;
diff --git a/src/components/event-details/event-details-area.jsx b/src/components/event-details/event-details-area.jsx
deleted file mode 100644
index 32c45db..0000000
--- a/src/components/event-details/event-details-area.jsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from 'react';
-import { instructors_data } from '../../data';
-import Time from '../../utils/time';
-import TeamOne from "../team-member/team-one";
-
-const EventDetailsArea = ({event}) => {
-  return (
-        <section className="event-details-area edu-section-gap">
-            <div className="container">
-                <div className="event-details">
-                    <div className="main-thumbnail">
-                        <img src="/assets/images/event/event-21.jpg" alt="Event" />
-                    </div>
-                    <div className="row row--30">
-                        <div className="col-lg-8">
-                            <div className="details-content">
-                                <h3>About The Event</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores.</p>
-                                <p>Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.</p>
-                                <ul>
-                                    <li>Aute irure dolor in reprehenderit</li>
-                                    <li>Occaecat cupidatat non proident sunt in culpa</li>
-                                    <li>Pariatur enim ipsam.</li>
-                                </ul>
-                                <h3>Event Location</h3>
-                                <p>Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam. </p>
-                                <ul className="event-meta">
-                                    <li><i className="icon-40"></i>Newyork City, USA</li>
-                                    <li><i className="icon-71"></i>+012 (345) 6789</li>
-                                </ul>
-                                <div className="gmap_canvas">
-                                    <iframe id="gmap_canvas" src="https://maps.google.com/maps?q=melbourne,%20Australia&t=&z=15&ie=UTF8&iwloc=&output=embed" ></iframe>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="col-lg-4">
-                            <div className="course-sidebar-3">
-                                <div className="edu-course-widget widget-course-summery">
-                                    <div className="inner">
-                                        <div className="content">
-                                            <h4 className="widget-title">Event Info</h4>
-                                            <ul className="course-item">
-                                                <li>
-                                                    <span className="label"><i className="icon-60"></i>Cost:</span>
-                                                    <span className="value price">$70.00</span>
-                                                </li>
-                                                <li>
-                                                    <span className="label"><i className="icon-70"></i>Total Slot:</span>
-                                                    <span className="value">30</span>
-                                                </li>
-                                                <li>
-                                                    <span className="label"><i className="icon-68"></i>Booked Slot:</span>
-                                                    <span className="value">2</span>
-                                                </li>
-                                            </ul>
-                                            <div className="read-more-btn">
-                                                <a href="#" className="edu-btn">Book Now <i className="icon-4"></i></a>
-                                            </div>
-                                            <div className="countdown">
-                                                <div className="countdown-section">
-                                                    <div>
-                                                        <div className="countdown-number day">{Time('2023-12-5 00:00:00').days}</div>
-                                                        <div className="countdown-unit">Days</div>
-                                                    </div>
-                                                </div>
-                                                <div className="countdown-section">
-                                                    <div>
-                                                        <div className="countdown-number hour">{Time('2023-12-5 00:00:00').hours}</div>
-                                                        <div className="countdown-unit">Hrss</div>
-                                                    </div>
-                                                </div>
-                                                <div className="countdown-section">
-                                                    <div>
-                                                        <div className="countdown-number minute">{Time('2023-12-5 00:00:00').minutes}</div>
-                                                        <div className="countdown-unit">Mints</div>
-                                                    </div>
-                                                </div>
-                                                <div className="countdown-section">
-                                                    <div>
-                                                        <div className="countdown-number second" suppressHydrationWarning>{Time('2023-12-5 00:00:00').seconds}</div>
-                                                        <div className="countdown-unit">Sec</div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="event-speaker">
-                    <h3 className="heading-title">Event Speakers</h3>
-                    <div className="row g-5">
-                        {instructors_data.slice(0,4).map((instructor) => (
-                            <div key={instructor.id} className="col-lg-3 col-sm-6 col-12" data-sal-delay={instructor.delay} data-sal="slide-up" data-sal-duration="800">
-                                <TeamOne instructor={instructor} />
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
-}
-
-export default EventDetailsArea;
\ No newline at end of file
diff --git a/src/components/event-details/event-details-area.tsx b/src/components/event-details/event-details-area.tsx
new file mode 100644
index 0000000..b96ded1
--- /dev/null
+++ b/src/components/event-details/event-details-area.tsx
@@ -0,0 +1,189 @@
+import React from 'react';
+import { instructors_data } from '../../data';
+import Time from '../../utils/time';
+import TeamOne from '../team-member/team-one';
+
+const EventDetailsArea = ({ event }) => {
+    return (
+        <section className='event-details-area edu-section-gap'>
+            <div className='container'>
+                <div className='event-details'>
+                    <div className='main-thumbnail'>
+                        <picture>
+                            <img src='/assets/images/event/event-21.jpg' alt='Event' />
+                        </picture>
+                    </div>
+                    <div className='row row--30'>
+                        <div className='col-lg-8'>
+                            <div className='details-content'>
+                                <h3>About The Event</h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor inc idid unt ut labore et
+                                    dolore magna aliqua enim ad minim veniam, quis nostrud
+                                    exerec tation ullamco laboris nis aliquip commodo
+                                    consequat. Duis aute irure dolor in reprehenderit in
+                                    voluptate velit esse cillum dolore eu fugiat nulla
+                                    pariatur enim ipsam voluptatem quia voluptas sit
+                                    aspernatur aut odit aut fugit sed quia consequuntur
+                                    magni dolores.
+                                </p>
+                                <p>
+                                    Excepteur sint occaecat cupidatat non proident sunt in
+                                    culpa qui officia deserunt mollit anim id est laborum.
+                                    Sed ut perspiciatis unde omnis iste natus error sit
+                                    voluptatem accusantium doloremque laudantium totam rem
+                                    aperiam.
+                                </p>
+                                <ul>
+                                    <li>Aute irure dolor in reprehenderit</li>
+                                    <li>Occaecat cupidatat non proident sunt in culpa</li>
+                                    <li>Pariatur enim ipsam.</li>
+                                </ul>
+                                <h3>Event Location</h3>
+                                <p>
+                                    Excepteur sint occaecat cupidatat non proident sunt in
+                                    culpa qui officia deserunt mollit anim id est laborum.
+                                    Sed ut perspiciatis unde omnis iste natus error sit
+                                    voluptatem accusantium doloremque laudantium totam rem
+                                    aperiam.{' '}
+                                </p>
+                                <ul className='event-meta'>
+                                    <li>
+                                        <i className='icon-40'></i>Newyork City, USA
+                                    </li>
+                                    <li>
+                                        <i className='icon-71'></i>+012 (345) 6789
+                                    </li>
+                                </ul>
+                                <div className='gmap_canvas'>
+                                    <iframe
+                                        id='gmap_canvas'
+                                        src='https://maps.google.com/maps?q=melbourne,%20Australia&t=&z=15&ie=UTF8&iwloc=&output=embed'
+                                    ></iframe>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='col-lg-4'>
+                            <div className='course-sidebar-3'>
+                                <div className='edu-course-widget widget-course-summery'>
+                                    <div className='inner'>
+                                        <div className='content'>
+                                            <h4 className='widget-title'>Event Info</h4>
+                                            <ul className='course-item'>
+                                                <li>
+                                                    <span className='label'>
+                                                        <i className='icon-60'></i>Cost:
+                                                    </span>
+                                                    <span className='value price'>
+                                                        $70.00
+                                                    </span>
+                                                </li>
+                                                <li>
+                                                    <span className='label'>
+                                                        <i className='icon-70'></i>Total
+                                                        Slot:
+                                                    </span>
+                                                    <span className='value'>30</span>
+                                                </li>
+                                                <li>
+                                                    <span className='label'>
+                                                        <i className='icon-68'></i>Booked
+                                                        Slot:
+                                                    </span>
+                                                    <span className='value'>2</span>
+                                                </li>
+                                            </ul>
+                                            <div className='read-more-btn'>
+                                                <a href='#' className='edu-btn'>
+                                                    Book Now <i className='icon-4'></i>
+                                                </a>
+                                            </div>
+                                            <div className='countdown'>
+                                                <div className='countdown-section'>
+                                                    <div>
+                                                        <div className='countdown-number day'>
+                                                            {
+                                                                Time('2023-12-5 00:00:00')
+                                                                    .days
+                                                            }
+                                                        </div>
+                                                        <div className='countdown-unit'>
+                                                            Days
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className='countdown-section'>
+                                                    <div>
+                                                        <div className='countdown-number hour'>
+                                                            {
+                                                                Time('2023-12-5 00:00:00')
+                                                                    .hours
+                                                            }
+                                                        </div>
+                                                        <div className='countdown-unit'>
+                                                            Hrss
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className='countdown-section'>
+                                                    <div>
+                                                        <div className='countdown-number minute'>
+                                                            {
+                                                                Time('2023-12-5 00:00:00')
+                                                                    .minutes
+                                                            }
+                                                        </div>
+                                                        <div className='countdown-unit'>
+                                                            Mints
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className='countdown-section'>
+                                                    <div>
+                                                        <div
+                                                            className='countdown-number second'
+                                                            suppressHydrationWarning
+                                                        >
+                                                            {
+                                                                Time('2023-12-5 00:00:00')
+                                                                    .seconds
+                                                            }
+                                                        </div>
+                                                        <div className='countdown-unit'>
+                                                            Sec
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='event-speaker'>
+                    <h3 className='heading-title'>Event Speakers</h3>
+                    <div className='row g-5'>
+                        {instructors_data.slice(0, 4).map(instructor => (
+                            <div
+                                key={instructor.id}
+                                className='col-lg-3 col-sm-6 col-12'
+                                data-sal-delay={instructor.delay}
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <TeamOne instructor={instructor} />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default EventDetailsArea;
diff --git a/src/components/event-details/index.jsx b/src/components/event-details/index.tsx
similarity index 50%
rename from src/components/event-details/index.jsx
rename to src/components/event-details/index.tsx
index 5b4fdba..56f89b1 100644
--- a/src/components/event-details/index.jsx
+++ b/src/components/event-details/index.tsx
@@ -3,17 +3,22 @@ import { Footer, Header } from '../../layout';
 import BreadcrumbFour from '../breadcrumb/breadcrumb-4';
 import EventDetailsArea from './event-details-area';
 
-const index = ({event}) => {
+const index = ({ event }) => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbFour title={event?.title} date={event?.date} time={event?.time} city={event?.event_meta} />
-                <EventDetailsArea event={event}/>
+                <BreadcrumbFour
+                    title={event?.title}
+                    date={event?.date}
+                    time={event?.time}
+                    city={event?.event_meta}
+                />
+                <EventDetailsArea event={event} />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/event-grid/all-events.jsx b/src/components/event-grid/all-events.tsx
similarity index 66%
rename from src/components/event-grid/all-events.jsx
rename to src/components/event-grid/all-events.tsx
index c4887a9..16b6309 100644
--- a/src/components/event-grid/all-events.jsx
+++ b/src/components/event-grid/all-events.tsx
@@ -13,24 +13,25 @@ const AllEvents = ({ itemsPerPage, items }) => {
         setPageCount(Math.ceil(items.length / itemsPerPage));
     }, [itemOffset, itemsPerPage, items]);
     // handlePageClick
-    const handlePageClick = (event) => {
+    const handlePageClick = event => {
         const newOffset = (event.selected * itemsPerPage) % items.length;
         setItemOffset(newOffset);
     };
     return (
         <>
-            {currentItems && currentItems.map((item, i) => {
-                return (
-                    <div key={i} className="col-lg-4 col-md-6">
-                        <div className="edu-event event-style-1">
-                            <EventItem item={item} />
+            {currentItems &&
+                currentItems.map((item, i) => {
+                    return (
+                        <div key={i} className='col-lg-4 col-md-6'>
+                            <div className='edu-event event-style-1'>
+                                <EventItem item={item} />
+                            </div>
                         </div>
-                    </div>
-                )
-            })}
+                    );
+                })}
             <Pagination handlePageClick={handlePageClick} pageCount={pageCount} />
         </>
-    )
-}
+    );
+};
 
-export default AllEvents;
\ No newline at end of file
+export default AllEvents;
diff --git a/src/components/event-grid/event-area.jsx b/src/components/event-grid/event-area.tsx
similarity index 57%
rename from src/components/event-grid/event-area.jsx
rename to src/components/event-grid/event-area.tsx
index 9d7a1e2..7d10c1b 100644
--- a/src/components/event-grid/event-area.jsx
+++ b/src/components/event-grid/event-area.tsx
@@ -6,16 +6,16 @@ const event_items = event_data.filter(event => event.event_grid);
 
 const EventArea = () => {
     return (
-        <div className="edu-event-area event-area-1 section-gap-equal">
-            <div className="container">
-                <div data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <div className="row g-5">
+        <div className='edu-event-area event-area-1 section-gap-equal'>
+            <div className='container'>
+                <div data-sal-delay='150' data-sal='slide-up' data-sal-duration='800'>
+                    <div className='row g-5'>
                         <AllEvents itemsPerPage={6} items={event_items} />
                     </div>
                 </div>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default EventArea;
\ No newline at end of file
+export default EventArea;
diff --git a/src/components/event-grid/event-item.jsx b/src/components/event-grid/event-item.jsx
deleted file mode 100644
index 01fc4fb..0000000
--- a/src/components/event-grid/event-item.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const EventItem = ({ item }) => {
-    const { id, date, event_meta, img, sm_desc, time, title } = item || {};
-    return (
-        <div className="inner">
-            <div className="thumbnail">
-                <Link href={`/event-details/${id}`}>
-
-                    <img src={img} alt="Blog Images" />
-
-                </Link>
-                <div className="event-time">
-                    <span><i className="icon-33"></i>{time}</span>
-                </div>
-            </div>
-            <div className="content">
-                <div className="event-date">
-                    <span className="day">{date?.split(' ')[1]}</span>
-                    <span className="month">{date?.split(' ')[0]}</span>
-                </div>
-                <h5 className="title">
-                    <Link href={`/event-details/${id}`}>
-                        {title}
-                    </Link>
-                </h5>
-                <p>{sm_desc}</p>
-                <ul className="event-meta">
-                    <li><i className="icon-40"></i>{event_meta}</li>
-                </ul>
-                <div className="read-more-btn">
-                    <Link href={`/event-details/${id}`} className="edu-btn btn-small btn-secondary">
-                        Learn More<i className="icon-4"></i>
-
-                    </Link>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default EventItem;
\ No newline at end of file
diff --git a/src/components/event-grid/event-item.tsx b/src/components/event-grid/event-item.tsx
new file mode 100644
index 0000000..5b63363
--- /dev/null
+++ b/src/components/event-grid/event-item.tsx
@@ -0,0 +1,49 @@
+import Link from 'next/link';
+import React from 'react';
+
+const EventItem = ({ item }) => {
+    const { id, date, event_meta, img, sm_desc, time, title } = item || {};
+    return (
+        <div className='inner'>
+            <div className='thumbnail'>
+                <Link href={`/event-details/${id}`}>
+                    <picture>
+                        <img src={img} alt='Blog Images' />
+                    </picture>
+                </Link>
+                <div className='event-time'>
+                    <span>
+                        <i className='icon-33'></i>
+                        {time}
+                    </span>
+                </div>
+            </div>
+            <div className='content'>
+                <div className='event-date'>
+                    <span className='day'>{date?.split(' ')[1]}</span>
+                    <span className='month'>{date?.split(' ')[0]}</span>
+                </div>
+                <h5 className='title'>
+                    <Link href={`/event-details/${id}`}>{title}</Link>
+                </h5>
+                <p>{sm_desc}</p>
+                <ul className='event-meta'>
+                    <li>
+                        <i className='icon-40'></i>
+                        {event_meta}
+                    </li>
+                </ul>
+                <div className='read-more-btn'>
+                    <Link
+                        href={`/event-details/${id}`}
+                        className='edu-btn btn-small btn-secondary'
+                    >
+                        Learn More<i className='icon-4'></i>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EventItem;
diff --git a/src/components/event-grid/index.jsx b/src/components/event-grid/index.tsx
similarity index 66%
rename from src/components/event-grid/index.jsx
rename to src/components/event-grid/index.tsx
index fd0bba8..414afbd 100644
--- a/src/components/event-grid/index.jsx
+++ b/src/components/event-grid/index.tsx
@@ -3,18 +3,17 @@ import { Footer, Header } from '../../layout';
 import BreadcrumbThree from '../breadcrumb/breadcrumb-3';
 import EventArea from './event-area';
 
-
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Event Page" subtitle="Event Page" />
-                <EventArea/>
+                <BreadcrumbThree title='Event Page' subtitle='Event Page' />
+                <EventArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/event-list/event-list-area.jsx b/src/components/event-list/event-list-area.jsx
deleted file mode 100644
index cad9c93..0000000
--- a/src/components/event-list/event-list-area.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useSelector } from "react-redux";
-import { event_data } from "../../data";
-import EventListItem from "./event-list-item";
-import EventSidebar from "./event-sidebar";
-
-const event_lists = event_data.filter(event => event.event_list);
-
-const EventListArea = () => {
-    const { categories } = useSelector((state) => state.event);
-    const filterData = event_lists?.filter((item1) =>
-        categories?.length !== 0
-        ? categories?.some((item2) => item1.category == item2)
-        : item1
-    );
-
-    return (
-        <div className="edu-event-area event-area-1 section-gap-equal">
-            <div className="container">
-                <div className="row g-5">
-                    <div className="col-lg-3 order-lg-2">
-                        <EventSidebar />
-                    </div>
-                    <div className="col-lg-9 order-lg-1 col-pr--35">
-                        <div className="row g-5">
-                            {filterData?.length !== 0 && filterData?.map((list, i) => (
-                                <div key={list.id} className="col-12">
-                                    <div className="edu-event-list event-list-2">
-                                        <EventListItem item={list} />
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-                
-                <ul className="edu-pagination top-space-30 justify-content-start">
-                    <li>
-                        <a href="#" aria-label="Previous">
-                            <i className="icon-west"></i>
-                        </a>
-                    </li>
-                    <li className="active">
-                        <a href="#">1</a>
-                    </li>
-                    <li>
-                        <a href="#">2</a>
-                    </li>
-                    <li>
-                        <a href="#">3</a>
-                    </li>
-                    <li className="more-next">
-                        <a href="#"></a>
-                    </li>
-                    <li>
-                        <a href="#">8</a>
-                    </li>
-                    <li>
-                        <a href="#" aria-label="Next">
-                            <i className="icon-east"></i>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    )
-}
-
-export default EventListArea;
\ No newline at end of file
diff --git a/src/components/event-list/event-list-area.tsx b/src/components/event-list/event-list-area.tsx
new file mode 100644
index 0000000..d21a03d
--- /dev/null
+++ b/src/components/event-list/event-list-area.tsx
@@ -0,0 +1,70 @@
+import { useSelector } from 'react-redux';
+import { event_data } from '../../data';
+import EventListItem from './event-list-item';
+import EventSidebar from './event-sidebar';
+import { AppState } from '../../redux/store';
+
+const event_lists = event_data.filter(event => event.event_list);
+
+const EventListArea = () => {
+    const { categories } = useSelector((state: AppState) => state.event);
+    const filterData = event_lists?.filter(item1 =>
+        categories?.length !== 0
+            ? categories?.some(item2 => item1.category == item2)
+            : item1
+    );
+
+    return (
+        <div className='edu-event-area event-area-1 section-gap-equal'>
+            <div className='container'>
+                <div className='row g-5'>
+                    <div className='col-lg-3 order-lg-2'>
+                        <EventSidebar />
+                    </div>
+                    <div className='col-lg-9 order-lg-1 col-pr--35'>
+                        <div className='row g-5'>
+                            {filterData?.length !== 0 &&
+                                filterData?.map((list, i) => (
+                                    <div key={list.id} className='col-12'>
+                                        <div className='edu-event-list event-list-2'>
+                                            <EventListItem item={list} />
+                                        </div>
+                                    </div>
+                                ))}
+                        </div>
+                    </div>
+                </div>
+
+                <ul className='edu-pagination top-space-30 justify-content-start'>
+                    <li>
+                        <a href='#' aria-label='Previous'>
+                            <i className='icon-west'></i>
+                        </a>
+                    </li>
+                    <li className='active'>
+                        <a href='#'>1</a>
+                    </li>
+                    <li>
+                        <a href='#'>2</a>
+                    </li>
+                    <li>
+                        <a href='#'>3</a>
+                    </li>
+                    <li className='more-next'>
+                        <a href='#'></a>
+                    </li>
+                    <li>
+                        <a href='#'>8</a>
+                    </li>
+                    <li>
+                        <a href='#' aria-label='Next'>
+                            <i className='icon-east'></i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default EventListArea;
diff --git a/src/components/event-list/event-list-item.jsx b/src/components/event-list/event-list-item.jsx
deleted file mode 100644
index 91117ad..0000000
--- a/src/components/event-list/event-list-item.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const EventListItem = ({ item }) => {
-    const { id, img, date, time, title, sm_desc, event_meta } = item || {};
-    return (
-        <div className="inner">
-            <div className="thumbnail">
-                <Link href={`/event-details/${id}`}>
-
-                    <img src={img} alt="Event Images" />
-
-                </Link>
-            </div>
-            <div className="content">
-                <ul className="event-meta">
-                    <li><i className="icon-27"></i>{date}</li>
-                    <li><i className="icon-33"></i>{time}</li>
-                </ul>
-                <h4 className="title">
-                    <Link href={`/event-details/${id}`}>
-                        {title}
-                    </Link>
-                </h4>
-                <span className="event-location"><i className="icon-40"></i>{event_meta}</span>
-                <p>{sm_desc}</p>
-                <div className="read-more-btn">
-                    <Link href={`/event-details/${id}`} className="edu-btn btn-medium btn-border">
-                        Learn More<i className="icon-4"></i>
-
-                    </Link>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default EventListItem;
\ No newline at end of file
diff --git a/src/components/event-list/event-list-item.tsx b/src/components/event-list/event-list-item.tsx
new file mode 100644
index 0000000..e4c0c5d
--- /dev/null
+++ b/src/components/event-list/event-list-item.tsx
@@ -0,0 +1,47 @@
+import Link from 'next/link';
+import React from 'react';
+
+const EventListItem = ({ item }) => {
+    const { id, img, date, time, title, sm_desc, event_meta } = item || {};
+    return (
+        <div className='inner'>
+            <div className='thumbnail'>
+                <Link href={`/event-details/${id}`}>
+                    <picture>
+                        <img src={img} alt='Event Images' />
+                    </picture>
+                </Link>
+            </div>
+            <div className='content'>
+                <ul className='event-meta'>
+                    <li>
+                        <i className='icon-27'></i>
+                        {date}
+                    </li>
+                    <li>
+                        <i className='icon-33'></i>
+                        {time}
+                    </li>
+                </ul>
+                <h4 className='title'>
+                    <Link href={`/event-details/${id}`}>{title}</Link>
+                </h4>
+                <span className='event-location'>
+                    <i className='icon-40'></i>
+                    {event_meta}
+                </span>
+                <p>{sm_desc}</p>
+                <div className='read-more-btn'>
+                    <Link
+                        href={`/event-details/${id}`}
+                        className='edu-btn btn-medium btn-border'
+                    >
+                        Learn More<i className='icon-4'></i>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EventListItem;
diff --git a/src/components/event-list/event-sidebar.jsx b/src/components/event-list/event-sidebar.jsx
deleted file mode 100644
index 8d63a68..0000000
--- a/src/components/event-list/event-sidebar.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { add_category } from '../../redux/features/event-slice';
-
-const all_categories = ['Art & Design', 'Development', 'Business', 'Marketing']
-
-const EventSidebar = () => {
-    const { categories } = useSelector(state => state.event);
-    const dispatch = useDispatch();
-    // handleCategory
-    const handleCategory = (cate) => {
-        const index = categories.findIndex(item => item === cate);
-        if (index >= 0) {
-            dispatch(add_category({changeType: 'remove',item: cate}))
-        } else {
-            dispatch(add_category({changeType: 'added',item: cate}))
-        }
-    }
-  
-    return (
-        <div className="course-sidebar-2">
-            <div className="edu-course-widget widget-category">
-                <div className="inner">
-                    <h5 className="widget-title">Categories</h5>
-                    <div className="content">
-                        {all_categories.map((c, i) => (
-                        <div key={i} className="edu-form-check" >
-                            <input onClick={() => handleCategory(c)} type="checkbox" id={`cat-check${i + 1}`} />
-                            <label htmlFor={`cat-check${i + 1}`}>{c} </label>
-                        </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-            <div className="edu-course-widget widget-date-filter">
-                <div className="inner">
-                    <h5 className="widget-title">Date</h5>
-                    <div className="content">
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="date-check1" />
-                            <label htmlFor="date-check1">Any Day</label>
-                        </div>
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="date-check2" />
-                            <label htmlFor="date-check2">Today</label>
-                        </div>
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="date-check3" />
-                            <label htmlFor="date-check3">Tomorrow</label>
-                        </div>
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="date-check4" />
-                            <label htmlFor="date-check4">This Week</label>
-                        </div>
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="date-check5" />
-                            <label htmlFor="date-check5">This Month</label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="edu-course-widget widget-cities">
-                <div className="inner">
-                    <h5 className="widget-title">Cities</h5>
-                    <div className="content">
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="city-check1" />
-                            <label htmlFor="city-check1">All Cities</label>
-                        </div>
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="city-check2" />
-                            <label htmlFor="city-check2">Japan</label>
-                        </div>
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="city-check3" />
-                            <label htmlFor="city-check3">New York</label>
-                        </div>
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="city-check4" />
-                            <label htmlFor="city-check4">England</label>
-                        </div>
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="city-check5" />
-                            <label htmlFor="city-check5">Mascow</label>
-                        </div>
-                        <div className="edu-form-check">
-                            <input type="checkbox" id="city-check6" />
-                            <label htmlFor="city-check6">Paris</label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default EventSidebar;
\ No newline at end of file
diff --git a/src/components/event-list/event-sidebar.tsx b/src/components/event-list/event-sidebar.tsx
new file mode 100644
index 0000000..be3de24
--- /dev/null
+++ b/src/components/event-list/event-sidebar.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { add_category } from '../../redux/features/event-slice';
+import { AppState } from '../../redux/store';
+
+const all_categories = ['Art & Design', 'Development', 'Business', 'Marketing'];
+
+const EventSidebar = () => {
+    const { categories } = useSelector((state: AppState) => state.event);
+    const dispatch = useDispatch();
+    // handleCategory
+    const handleCategory = cate => {
+        const index = categories.findIndex(item => item === cate);
+        if (index >= 0) {
+            dispatch(add_category({ changeType: 'remove', item: cate }));
+        } else {
+            dispatch(add_category({ changeType: 'added', item: cate }));
+        }
+    };
+
+    return (
+        <div className='course-sidebar-2'>
+            <div className='edu-course-widget widget-category'>
+                <div className='inner'>
+                    <h5 className='widget-title'>Categories</h5>
+                    <div className='content'>
+                        {all_categories.map((c, i) => (
+                            <div key={i} className='edu-form-check'>
+                                <input
+                                    onClick={() => handleCategory(c)}
+                                    type='checkbox'
+                                    id={`cat-check${i + 1}`}
+                                />
+                                <label htmlFor={`cat-check${i + 1}`}>{c} </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+            <div className='edu-course-widget widget-date-filter'>
+                <div className='inner'>
+                    <h5 className='widget-title'>Date</h5>
+                    <div className='content'>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='date-check1' />
+                            <label htmlFor='date-check1'>Any Day</label>
+                        </div>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='date-check2' />
+                            <label htmlFor='date-check2'>Today</label>
+                        </div>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='date-check3' />
+                            <label htmlFor='date-check3'>Tomorrow</label>
+                        </div>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='date-check4' />
+                            <label htmlFor='date-check4'>This Week</label>
+                        </div>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='date-check5' />
+                            <label htmlFor='date-check5'>This Month</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className='edu-course-widget widget-cities'>
+                <div className='inner'>
+                    <h5 className='widget-title'>Cities</h5>
+                    <div className='content'>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='city-check1' />
+                            <label htmlFor='city-check1'>All Cities</label>
+                        </div>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='city-check2' />
+                            <label htmlFor='city-check2'>Japan</label>
+                        </div>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='city-check3' />
+                            <label htmlFor='city-check3'>New York</label>
+                        </div>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='city-check4' />
+                            <label htmlFor='city-check4'>England</label>
+                        </div>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='city-check5' />
+                            <label htmlFor='city-check5'>Mascow</label>
+                        </div>
+                        <div className='edu-form-check'>
+                            <input type='checkbox' id='city-check6' />
+                            <label htmlFor='city-check6'>Paris</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EventSidebar;
diff --git a/src/components/event-list/index.jsx b/src/components/event-list/index.tsx
similarity index 67%
rename from src/components/event-list/index.jsx
rename to src/components/event-list/index.tsx
index f308a8e..0a0585f 100644
--- a/src/components/event-list/index.jsx
+++ b/src/components/event-list/index.tsx
@@ -3,18 +3,17 @@ import { Footer, Header } from '../../layout';
 import BreadcrumbThree from '../breadcrumb/breadcrumb-3';
 import EventListArea from './event-list-area';
 
-
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Event Page" subtitle="Event 2" />
-                <EventListArea/>
+                <BreadcrumbThree title='Event Page' subtitle='Event 2' />
+                <EventListArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/faq/faq-area.jsx b/src/components/faq/faq-area.jsx
deleted file mode 100644
index 5005900..0000000
--- a/src/components/faq/faq-area.jsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-import SingleFaq from './single-faq';
-
-function NavTab({ active = false, id, title }) {
-    return (
-        <li className="nav-item" role="presentation">
-            <button className={`nav-link ${active ? 'active' : ''}`} data-bs-toggle="tab" data-bs-target={`#${id}`}
-            type="button" role="tab" aria-selected={active ? 'true' : 'false'}>{title}</button>
-        </li>
-    )
-}
-
-const FaqArea = () => {
-    return (
-        <section className="edu-section-gap faq-page-area">
-            <div className="container">
-                <div className="row">
-                    <div className="col-lg-4">
-                        <div className="faq-page-nav">
-                            <h3 className="title">Questions By This Category</h3>
-                            <p>Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore.</p>
-
-                            <ul className="nav nav-tabs" role="tablist">
-                                <NavTab active={true} id="gn-ques" title="General Questions" />
-                                <NavTab id="rg-ques" title="Regular Questions" />
-                                <NavTab id="ad-ques" title="Advanced Questions" />
-                                <NavTab id="com-policy" title="Company Policies" />
-                                <NavTab id="pay-option" title="Payment Options" />
-                                <NavTab id="terms-condition" title="Terms & Conditions" />
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-8">
-                        <div className="tab-content faq-page-tab-content" id="faq-accordion">
-                            <div className="tab-pane fade show active" id="gn-ques" role="tabpanel">
-                                <div className="faq-accordion">
-                                    <div className="accordion">
-                                        <SingleFaq show={true} id="1" title="How can I contact a school directly?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="2" title="How do I find a school where I want to study?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="3" title=" Where should I study abroad?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="4" title="Where can I find information on private companies?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="5" title="How do I find a study abroad program?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="6" title="Am I eligible for admission?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="7" title="What kind of support does EduBlink provide?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="tab-pane fade" id="rg-ques" role="tabpanel">
-                                <div className="faq-accordion">
-                                    <div className="accordion">
-                                        <SingleFaq show={true} id="8" title="How long is my personal free trial?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="9" title="How do I find a school where I want to study?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="10" title="Where should I study abroad?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="11" title="Where can I find information on private companies?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="12" title="How do I find a study abroad program?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="13" title="Am I eligible for admission?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="tab-pane fade" id="ad-ques" role="tabpanel">
-                                <div className="faq-accordion">
-                                    <div className="accordion">
-                                        <SingleFaq show={true} id="14" title="Where can I find information on private companies?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="15" title="How do I find a study abroad program?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="16" title="Am I eligible for admission?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="17" title="What kind of support does EduBlink provide?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="tab-pane fade" id="com-policy" role="tabpanel">
-                                <div className="faq-accordion">
-                                    <div className="accordion">
-                                        <SingleFaq show={true} id="18" title="How do I find a study abroad program?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="19" title="Where can I find information on private companies?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="20" title="What kind of support does EduBlink provide?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="21" title="Am I eligible for admission?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="tab-pane fade" id="pay-option" role="tabpanel">
-                                <div className="faq-accordion">
-                                    <div className="accordion">
-                                        <SingleFaq show={true} id="22" title="How do I find a school where I want to study?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="23" title=" Where should I study abroad?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="24" title="Where can I find information on private companies?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="25" title="How do I find a study abroad program?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="tab-pane fade" id="terms-condition" role="tabpanel">
-                                <div className="faq-accordion">
-                                    <div className="accordion">
-                                        <SingleFaq show={true} id="26" title=" Where should I study abroad?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="27" title="How do I find a school where I want to study?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-
-                                        <SingleFaq id="28" title="How do I find a study abroad program?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-                                        
-                                        <SingleFaq id="29" title="Where can I find information on private companies?" desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat." />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
-}
-
-export default FaqArea;
\ No newline at end of file
diff --git a/src/components/faq/faq-area.tsx b/src/components/faq/faq-area.tsx
new file mode 100644
index 0000000..69213f4
--- /dev/null
+++ b/src/components/faq/faq-area.tsx
@@ -0,0 +1,289 @@
+import React from 'react';
+import SingleFaq from './single-faq';
+
+function NavTab({ active = false, id, title }) {
+    return (
+        <li className='nav-item' role='presentation'>
+            <button
+                className={`nav-link ${active ? 'active' : ''}`}
+                data-bs-toggle='tab'
+                data-bs-target={`#${id}`}
+                type='button'
+                role='tab'
+                aria-selected={active ? 'true' : 'false'}
+            >
+                {title}
+            </button>
+        </li>
+    );
+}
+
+const FaqArea = () => {
+    return (
+        <section className='edu-section-gap faq-page-area'>
+            <div className='container'>
+                <div className='row'>
+                    <div className='col-lg-4'>
+                        <div className='faq-page-nav'>
+                            <h3 className='title'>Questions By This Category</h3>
+                            <p>
+                                Lorem ipsum dolor sit amet consectur adipiscing elit sed
+                                eius mod ex tempor incididunt labore.
+                            </p>
+
+                            <ul className='nav nav-tabs' role='tablist'>
+                                <NavTab
+                                    active={true}
+                                    id='gn-ques'
+                                    title='General Questions'
+                                />
+                                <NavTab id='rg-ques' title='Regular Questions' />
+                                <NavTab id='ad-ques' title='Advanced Questions' />
+                                <NavTab id='com-policy' title='Company Policies' />
+                                <NavTab id='pay-option' title='Payment Options' />
+                                <NavTab id='terms-condition' title='Terms & Conditions' />
+                            </ul>
+                        </div>
+                    </div>
+                    <div className='col-lg-8'>
+                        <div
+                            className='tab-content faq-page-tab-content'
+                            id='faq-accordion'
+                        >
+                            <div
+                                className='tab-pane fade show active'
+                                id='gn-ques'
+                                role='tabpanel'
+                            >
+                                <div className='faq-accordion'>
+                                    <div className='accordion'>
+                                        <SingleFaq
+                                            show={true}
+                                            id='1'
+                                            title='How can I contact a school directly?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='2'
+                                            title='How do I find a school where I want to study?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='3'
+                                            title=' Where should I study abroad?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='4'
+                                            title='Where can I find information on private companies?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='5'
+                                            title='How do I find a study abroad program?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='6'
+                                            title='Am I eligible for admission?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='7'
+                                            title='What kind of support does EduBlink provide?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className='tab-pane fade' id='rg-ques' role='tabpanel'>
+                                <div className='faq-accordion'>
+                                    <div className='accordion'>
+                                        <SingleFaq
+                                            show={true}
+                                            id='8'
+                                            title='How long is my personal free trial?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='9'
+                                            title='How do I find a school where I want to study?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='10'
+                                            title='Where should I study abroad?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='11'
+                                            title='Where can I find information on private companies?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='12'
+                                            title='How do I find a study abroad program?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='13'
+                                            title='Am I eligible for admission?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className='tab-pane fade' id='ad-ques' role='tabpanel'>
+                                <div className='faq-accordion'>
+                                    <div className='accordion'>
+                                        <SingleFaq
+                                            show={true}
+                                            id='14'
+                                            title='Where can I find information on private companies?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='15'
+                                            title='How do I find a study abroad program?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='16'
+                                            title='Am I eligible for admission?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='17'
+                                            title='What kind of support does EduBlink provide?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                className='tab-pane fade'
+                                id='com-policy'
+                                role='tabpanel'
+                            >
+                                <div className='faq-accordion'>
+                                    <div className='accordion'>
+                                        <SingleFaq
+                                            show={true}
+                                            id='18'
+                                            title='How do I find a study abroad program?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='19'
+                                            title='Where can I find information on private companies?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='20'
+                                            title='What kind of support does EduBlink provide?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='21'
+                                            title='Am I eligible for admission?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                className='tab-pane fade'
+                                id='pay-option'
+                                role='tabpanel'
+                            >
+                                <div className='faq-accordion'>
+                                    <div className='accordion'>
+                                        <SingleFaq
+                                            show={true}
+                                            id='22'
+                                            title='How do I find a school where I want to study?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='23'
+                                            title=' Where should I study abroad?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='24'
+                                            title='Where can I find information on private companies?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='25'
+                                            title='How do I find a study abroad program?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                className='tab-pane fade'
+                                id='terms-condition'
+                                role='tabpanel'
+                            >
+                                <div className='faq-accordion'>
+                                    <div className='accordion'>
+                                        <SingleFaq
+                                            show={true}
+                                            id='26'
+                                            title=' Where should I study abroad?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='27'
+                                            title='How do I find a school where I want to study?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='28'
+                                            title='How do I find a study abroad program?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+
+                                        <SingleFaq
+                                            id='29'
+                                            title='Where can I find information on private companies?'
+                                            desc='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco qui laboris nis aliquip commodo consequat.'
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default FaqArea;
diff --git a/src/components/faq/index.jsx b/src/components/faq/index.tsx
similarity index 54%
rename from src/components/faq/index.jsx
rename to src/components/faq/index.tsx
index 625399e..d1aceb3 100644
--- a/src/components/faq/index.jsx
+++ b/src/components/faq/index.tsx
@@ -3,18 +3,20 @@ import { Footer, Header } from '../../layout';
 import BreadcrumbThree from '../breadcrumb/breadcrumb-3';
 import FaqArea from './faq-area';
 
-
-const index = ({team}) => {
+const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Frequently Asked Questions" subtitle="Frequently Asked Questions" />
-                <FaqArea/>
+                <BreadcrumbThree
+                    title='Frequently Asked Questions'
+                    subtitle='Frequently Asked Questions'
+                />
+                <FaqArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/faq/single-faq.jsx b/src/components/faq/single-faq.jsx
deleted file mode 100644
index 5cd8a81..0000000
--- a/src/components/faq/single-faq.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-const SingleFaq = ({show=false,id,title,desc}) => {
-    return (
-        <div className="accordion-item">
-            <h5 className="accordion-header">
-                <button className={`accordion-button ${show?'':'collapsed'}`} type="button" data-bs-toggle="collapse" data-bs-target={`#question-${id}`} aria-expanded={show?'true':'false'}>
-                    {title}
-                </button>
-            </h5>
-            <div id={`question-${id}`} className={`accordion-collapse collapse ${show?'show':''}`} data-bs-parent="#faq-accordion">
-                <div className="accordion-body">
-                    <p>{desc}</p>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default SingleFaq;
\ No newline at end of file
diff --git a/src/components/faq/single-faq.tsx b/src/components/faq/single-faq.tsx
new file mode 100644
index 0000000..72b21f8
--- /dev/null
+++ b/src/components/faq/single-faq.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const SingleFaq = ({ show = false, id, title, desc }) => {
+    return (
+        <div className='accordion-item'>
+            <h5 className='accordion-header'>
+                <button
+                    className={`accordion-button ${show ? '' : 'collapsed'}`}
+                    type='button'
+                    data-bs-toggle='collapse'
+                    data-bs-target={`#question-${id}`}
+                    aria-expanded={show ? 'true' : 'false'}
+                >
+                    {title}
+                </button>
+            </h5>
+            <div
+                id={`question-${id}`}
+                className={`accordion-collapse collapse ${show ? 'show' : ''}`}
+                data-bs-parent='#faq-accordion'
+            >
+                <div className='accordion-body'>
+                    <p>{desc}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SingleFaq;
diff --git a/src/components/forms/blog-comment-form.jsx b/src/components/forms/blog-comment-form.jsx
deleted file mode 100644
index 55d0705..0000000
--- a/src/components/forms/blog-comment-form.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useFormik } from 'formik';
-import React from 'react';
-import { blogCommentSchema } from '../../utils/validation-schema';
-import ErrorMsg from './error-msg';
-
-const BlogCommentForm = () => {
-    const { handleChange, handleSubmit, handleBlur, errors, values, touched } = useFormik({
-        initialValues: { name: '', email: '', msg: '' },
-        validationSchema: blogCommentSchema,
-        onSubmit: (values, { resetForm }) => {
-            toast.success(`${values.name} your comment added successfully`, {
-                position: 'top-left'
-            })
-            resetForm()
-        }
-    })
-
-    return (
-        <form className="comment-form" onSubmit={handleSubmit}>
-            <div className="row g-5">
-                <div className="form-group col-lg-6">
-                    <input value={values.name} onChange={handleChange} onBlur={handleBlur} type="text" name="name" id="contact-name" placeholder="Your Name" />
-                    {touched.name && <ErrorMsg error={errors.name} />}
-                </div>
-
-                <div className="form-group col-lg-6">
-                    <input value={values.email} onChange={handleChange} onBlur={handleBlur} type="email" name="email" id="contact-email" placeholder="Your Email" />
-                    {touched.email && <ErrorMsg error={errors.email} />}
-                </div>
-
-                <div className="form-group col-12">
-                    <textarea value={values.msg} onChange={handleChange} onBlur={handleBlur} name="msg" id="comm-message" cols="30" rows="5" placeholder="Leave A Comment"></textarea>
-                    {touched.msg && <ErrorMsg error={errors.msg} />}
-                </div>
-
-                <div className="form-group">
-                    <div className="edu-form-check">
-                        <input type="checkbox" id="save-info" />
-                        <label htmlFor="save-info">Save my name, email, and website in this browser for the next time I comment.</label>
-                    </div>
-                </div>
-                <div className="form-group col-12">
-                    <button type="submit" className="edu-btn submit-btn">Send Message <i className="icon-4"></i></button>
-                </div>
-            </div>
-        </form>
-    )
-}
-
-export default BlogCommentForm;
\ No newline at end of file
diff --git a/src/components/forms/blog-comment-form.tsx b/src/components/forms/blog-comment-form.tsx
new file mode 100644
index 0000000..bba6e3f
--- /dev/null
+++ b/src/components/forms/blog-comment-form.tsx
@@ -0,0 +1,83 @@
+import { useFormik } from 'formik';
+import React from 'react';
+import { blogCommentSchema } from '../../utils/validation-schema';
+import ErrorMsg from './error-msg';
+import { toast } from 'react-toastify';
+
+const BlogCommentForm = () => {
+    const { handleChange, handleSubmit, handleBlur, errors, values, touched } = useFormik(
+        {
+            initialValues: { name: '', email: '', msg: '' },
+            validationSchema: blogCommentSchema,
+            onSubmit: (values, { resetForm }) => {
+                toast.success(`${values.name} your comment added successfully`, {
+                    position: 'top-left',
+                });
+                resetForm();
+            },
+        }
+    );
+
+    return (
+        <form className='comment-form' onSubmit={handleSubmit}>
+            <div className='row g-5'>
+                <div className='form-group col-lg-6'>
+                    <input
+                        value={values.name}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        type='text'
+                        name='name'
+                        id='contact-name'
+                        placeholder='Your Name'
+                    />
+                    {touched.name && <ErrorMsg error={errors.name} />}
+                </div>
+
+                <div className='form-group col-lg-6'>
+                    <input
+                        value={values.email}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        type='email'
+                        name='email'
+                        id='contact-email'
+                        placeholder='Your Email'
+                    />
+                    {touched.email && <ErrorMsg error={errors.email} />}
+                </div>
+
+                <div className='form-group col-12'>
+                    <textarea
+                        value={values.msg}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        name='msg'
+                        id='comm-message'
+                        cols={30}
+                        rows={5}
+                        placeholder='Leave A Comment'
+                    ></textarea>
+                    {touched.msg && <ErrorMsg error={errors.msg} />}
+                </div>
+
+                <div className='form-group'>
+                    <div className='edu-form-check'>
+                        <input type='checkbox' id='save-info' />
+                        <label htmlFor='save-info'>
+                            Save my name, email, and website in this browser for the next
+                            time I comment.
+                        </label>
+                    </div>
+                </div>
+                <div className='form-group col-12'>
+                    <button type='submit' className='edu-btn submit-btn'>
+                        Send Message <i className='icon-4'></i>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+export default BlogCommentForm;
diff --git a/src/components/forms/comment-form-course.jsx b/src/components/forms/comment-form-course.jsx
deleted file mode 100644
index 28a070a..0000000
--- a/src/components/forms/comment-form-course.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useFormik } from 'formik';
-import React from 'react';
-import { courseSchema } from '../../utils/validation-schema';
-import ErrorMsg from './error-msg';
-
-const CommentFormCourse = () => {
-    const { handleChange, handleSubmit, handleBlur, errors, values, touched } = useFormik({
-        initialValues: { title:'',name: '', email: '', msg: '' },
-        validationSchema: courseSchema,
-        onSubmit: (values, { resetForm }) => {
-            toast.success(`${values.name} your review added successfully`, {
-                position: 'top-left'
-            })
-            resetForm()
-        }
-    })
-
-    return (
-        <form className="comment-form" onSubmit={handleSubmit}>
-            <div className="row g-5">
-                <div className="form-group col-lg-6">
-                    <input type="text" value={values.title} onChange={handleChange} onBlur={handleBlur} name="title" id="comm-title" placeholder="Review Title" />
-                    {touched.title && <ErrorMsg error={errors.title} />}
-                </div>
-
-                <div className="form-group col-lg-6">
-                    <input value={values.name} onChange={handleChange} onBlur={handleBlur} type="text" name="name" id="contact-name" placeholder="Your Name" />
-                    {touched.name && <ErrorMsg error={errors.name} />}
-                </div>
-
-                <div className="form-group col-12">
-                    <input value={values.email} onChange={handleChange} onBlur={handleBlur} type="email" name="email" id="contact-email" placeholder="Reviewer Email" />
-                    {touched.email && <ErrorMsg error={errors.email} />}
-                </div>
-
-                <div className="form-group col-12">
-                    <textarea value={values.msg} onChange={handleChange} onBlur={handleBlur} name="msg" id="comm-message" cols="30" rows="5" placeholder="Review summary"></textarea>
-                    {touched.msg && <ErrorMsg error={errors.msg} />}
-                </div>
-
-                <div className="form-group col-12">
-                    <button type="submit" className="edu-btn submit-btn">Submit Review <i className="icon-4"></i></button>
-                </div>
-            </div>
-        </form>
-    )
-}
-
-export default CommentFormCourse;
\ No newline at end of file
diff --git a/src/components/forms/comment-form-course.tsx b/src/components/forms/comment-form-course.tsx
new file mode 100644
index 0000000..3af52ba
--- /dev/null
+++ b/src/components/forms/comment-form-course.tsx
@@ -0,0 +1,87 @@
+import { useFormik } from 'formik';
+import React from 'react';
+import { courseSchema } from '../../utils/validation-schema';
+import ErrorMsg from './error-msg';
+import { toast } from 'react-toastify';
+
+const CommentFormCourse = () => {
+    const { handleChange, handleSubmit, handleBlur, errors, values, touched } = useFormik(
+        {
+            initialValues: { title: '', name: '', email: '', msg: '' },
+            validationSchema: courseSchema,
+            onSubmit: (values, { resetForm }) => {
+                toast.success(`${values.name} your review added successfully`, {
+                    position: 'top-left',
+                });
+                resetForm();
+            },
+        }
+    );
+
+    return (
+        <form className='comment-form' onSubmit={handleSubmit}>
+            <div className='row g-5'>
+                <div className='form-group col-lg-6'>
+                    <input
+                        type='text'
+                        value={values.title}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        name='title'
+                        id='comm-title'
+                        placeholder='Review Title'
+                    />
+                    {touched.title && <ErrorMsg error={errors.title} />}
+                </div>
+
+                <div className='form-group col-lg-6'>
+                    <input
+                        value={values.name}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        type='text'
+                        name='name'
+                        id='contact-name'
+                        placeholder='Your Name'
+                    />
+                    {touched.name && <ErrorMsg error={errors.name} />}
+                </div>
+
+                <div className='form-group col-12'>
+                    <input
+                        value={values.email}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        type='email'
+                        name='email'
+                        id='contact-email'
+                        placeholder='Reviewer Email'
+                    />
+                    {touched.email && <ErrorMsg error={errors.email} />}
+                </div>
+
+                <div className='form-group col-12'>
+                    <textarea
+                        value={values.msg}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        name='msg'
+                        id='comm-message'
+                        cols={30}
+                        rows={5}
+                        placeholder='Review summary'
+                    ></textarea>
+                    {touched.msg && <ErrorMsg error={errors.msg} />}
+                </div>
+
+                <div className='form-group col-12'>
+                    <button type='submit' className='edu-btn submit-btn'>
+                        Submit Review <i className='icon-4'></i>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+export default CommentFormCourse;
diff --git a/src/components/forms/contact-me-form.jsx b/src/components/forms/contact-me-form.jsx
deleted file mode 100644
index b6a18b6..0000000
--- a/src/components/forms/contact-me-form.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React , { useState } from 'react';
-import emailjs from 'emailjs-com';
-
-const Result = () => {
-    return (
-        <p className="success-message" style={{color: '#1ab69d', marginTop: '20px', marginBottom: '0', textAlign: 'center'}}>Thanks for your query. We will contact with you soon.</p>
-    )
-}
-
-const ContactMeForm = () => {
-    const [result, setResult] = useState( false );
-
-    const sendEmail = ( e ) => {
-        e.preventDefault();
-        emailjs
-        .sendForm(
-            'service_bxh6md3', 
-            'template_1g7v07n', 
-            e.target, 
-            'user_8Lx0gfI1ktOoeEN8DTV10'
-        )
-        .then( ( result ) => {
-            console.log( result.text );
-            }, 
-            ( error ) => {
-                console.log( error.text );
-            }
-        );
-        e.target.reset();
-        setResult( true );
-    };
-
-    setTimeout(() => {
-        setResult( false );
-    }, 5000);
-
-    return (
-        <form className="rnt-contact-form rwt-dynamic-form" onSubmit={ sendEmail }>
-            <div className="row row--10">
-                <div className="form-group col-lg-6">
-                    <input type="text" name="fullname" placeholder="Your Name*" required />
-                </div>
-                <div className="form-group col-lg-6">
-                    <input type="email" name="email" placeholder="Your Email*" required />
-                </div>
-                <div className="form-group col-12">
-                    <input type="tel" name="phone" placeholder="Phone number" />
-                </div>
-                <div className="form-group col-12">
-                    <textarea name="message" cols="30" rows="6" placeholder="Type your message"></textarea>
-                </div>
-                <div className="form-group col-12 text-center">
-                    <button className="rn-btn edu-btn submit-btn" name="submit" type="submit">
-                        Submit Now <i className="icon-4"></i>
-                    </button>
-                </div>
-                { result ? <div className="form-group"><Result /></div>  : null }
-            </div>
-        </form>
-    )
-}
-
-export default ContactMeForm;
\ No newline at end of file
diff --git a/src/components/forms/contact-me-form.tsx b/src/components/forms/contact-me-form.tsx
new file mode 100644
index 0000000..75b4727
--- /dev/null
+++ b/src/components/forms/contact-me-form.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import emailjs from 'emailjs-com';
+
+const Result = () => {
+    return (
+        <p
+            className='success-message'
+            style={{
+                color: '#1ab69d',
+                marginTop: '20px',
+                marginBottom: '0',
+                textAlign: 'center',
+            }}
+        >
+            Thanks for your query. We will contact with you soon.
+        </p>
+    );
+};
+
+const ContactMeForm = () => {
+    const [result, setResult] = useState(false);
+
+    const sendEmail = e => {
+        e.preventDefault();
+        emailjs
+            .sendForm(
+                'service_bxh6md3',
+                'template_1g7v07n',
+                e.target,
+                'user_8Lx0gfI1ktOoeEN8DTV10'
+            )
+            .then(
+                result => {
+                    console.log(result.text);
+                },
+                error => {
+                    console.log(error.text);
+                }
+            );
+        e.target.reset();
+        setResult(true);
+    };
+
+    setTimeout(() => {
+        setResult(false);
+    }, 5000);
+
+    return (
+        <form className='rnt-contact-form rwt-dynamic-form' onSubmit={sendEmail}>
+            <div className='row row--10'>
+                <div className='form-group col-lg-6'>
+                    <input
+                        type='text'
+                        name='fullname'
+                        placeholder='Your Name*'
+                        required
+                    />
+                </div>
+                <div className='form-group col-lg-6'>
+                    <input type='email' name='email' placeholder='Your Email*' required />
+                </div>
+                <div className='form-group col-12'>
+                    <input type='tel' name='phone' placeholder='Phone number' />
+                </div>
+                <div className='form-group col-12'>
+                    <textarea
+                        name='message'
+                        cols={30}
+                        rows={6}
+                        placeholder='Type your message'
+                    ></textarea>
+                </div>
+                <div className='form-group col-12 text-center'>
+                    <button
+                        className='rn-btn edu-btn submit-btn'
+                        name='submit'
+                        type='submit'
+                    >
+                        Submit Now <i className='icon-4'></i>
+                    </button>
+                </div>
+                {result ? (
+                    <div className='form-group'>
+                        <Result />
+                    </div>
+                ) : null}
+            </div>
+        </form>
+    );
+};
+
+export default ContactMeForm;
diff --git a/src/components/forms/contact-us-form.jsx b/src/components/forms/contact-us-form.jsx
deleted file mode 100644
index 918e9f8..0000000
--- a/src/components/forms/contact-us-form.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React , { useState } from 'react';
-import emailjs from 'emailjs-com';
-
-const Result = () => {
-    return (
-        <p className="success-message" style={{color: '#1ab69d', marginTop: '20px', marginBottom: '0'}}>Thanks for your query. We will contact with you soon.</p>
-    )
-}
-
-const ContactUsForm = () => {
-    const [result, setResult] = useState( false );
-
-    const sendEmail = ( e ) => {
-        e.preventDefault();
-        emailjs
-        .sendForm(
-            'service_bxh6md3', 
-            'template_1g7v07n', 
-            e.target, 
-            'user_8Lx0gfI1ktOoeEN8DTV10'
-        )
-        .then( ( result ) => {
-            console.log( result.text );
-            }, 
-            ( error ) => {
-                console.log( error.text );
-            }
-        );
-        e.target.reset();
-        setResult( true );
-    };
-
-    setTimeout(() => {
-        setResult( false );
-    }, 5000);
-    
-    return (
-        <form className="rnt-contact-form rwt-dynamic-form" action="" onSubmit={ sendEmail }>
-            <div className="row row--10">
-                <div className="form-group col-12">
-                    <input type="text" name="fullname" placeholder="Your name*" required />
-                </div>
-                <div className="form-group col-12">
-                    <input type="email" name="email" placeholder="Enter your email*" required />
-                </div>
-                <div className="form-group col-12">
-                    <input type="tel" name="phone" placeholder="Phone number" />
-                </div>
-                <div className="form-group col-12">
-                    <textarea name="message" cols="30" rows="4" placeholder="Your message"></textarea>
-                </div>
-                <div className="form-group col-12">
-                    <button className="rn-btn edu-btn btn-medium submit-btn" name="submit" type="submit">Submit Message <i className="icon-4"></i></button>
-                </div>
-                { result ? <div className="form-group"><Result /></div>  : null }
-            </div>
-        </form>
-  )
-}
-
-export default ContactUsForm;
\ No newline at end of file
diff --git a/src/components/forms/contact-us-form.tsx b/src/components/forms/contact-us-form.tsx
new file mode 100644
index 0000000..dbb198a
--- /dev/null
+++ b/src/components/forms/contact-us-form.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import emailjs from 'emailjs-com';
+
+const Result = () => {
+    return (
+        <p
+            className='success-message'
+            style={{ color: '#1ab69d', marginTop: '20px', marginBottom: '0' }}
+        >
+            Thanks for your query. We will contact with you soon.
+        </p>
+    );
+};
+
+const ContactUsForm = () => {
+    const [result, setResult] = useState(false);
+
+    const sendEmail = e => {
+        e.preventDefault();
+        emailjs
+            .sendForm(
+                'service_bxh6md3',
+                'template_1g7v07n',
+                e.target,
+                'user_8Lx0gfI1ktOoeEN8DTV10'
+            )
+            .then(
+                result => {
+                    console.log(result.text);
+                },
+                error => {
+                    console.log(error.text);
+                }
+            );
+        e.target.reset();
+        setResult(true);
+    };
+
+    setTimeout(() => {
+        setResult(false);
+    }, 5000);
+
+    return (
+        <form
+            className='rnt-contact-form rwt-dynamic-form'
+            action=''
+            onSubmit={sendEmail}
+        >
+            <div className='row row--10'>
+                <div className='form-group col-12'>
+                    <input
+                        type='text'
+                        name='fullname'
+                        placeholder='Your name*'
+                        required
+                    />
+                </div>
+                <div className='form-group col-12'>
+                    <input
+                        type='email'
+                        name='email'
+                        placeholder='Enter your email*'
+                        required
+                    />
+                </div>
+                <div className='form-group col-12'>
+                    <input type='tel' name='phone' placeholder='Phone number' />
+                </div>
+                <div className='form-group col-12'>
+                    <textarea
+                        name='message'
+                        cols={30}
+                        rows={4}
+                        placeholder='Your message'
+                    ></textarea>
+                </div>
+                <div className='form-group col-12'>
+                    <button
+                        className='rn-btn edu-btn btn-medium submit-btn'
+                        name='submit'
+                        type='submit'
+                    >
+                        Submit Message <i className='icon-4'></i>
+                    </button>
+                </div>
+                {result ? (
+                    <div className='form-group'>
+                        <Result />
+                    </div>
+                ) : null}
+            </div>
+        </form>
+    );
+};
+
+export default ContactUsForm;
diff --git a/src/components/forms/error-msg.jsx b/src/components/forms/error-msg.jsx
deleted file mode 100644
index 0ed1254..0000000
--- a/src/components/forms/error-msg.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const ErrorMsg = ({error}) => {
-    return (
-        <>
-            <p style={{color:'red'}}>{error}</p> 
-        </>
-    )
-}
-
-export default ErrorMsg;
\ No newline at end of file
diff --git a/src/components/forms/error-msg.tsx b/src/components/forms/error-msg.tsx
new file mode 100644
index 0000000..299abdf
--- /dev/null
+++ b/src/components/forms/error-msg.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ErrorMsg = ({ error }) => {
+    return (
+        <>
+            <p style={{ color: 'red' }}>{error}</p>
+        </>
+    );
+};
+
+export default ErrorMsg;
diff --git a/src/components/forms/login-form.jsx b/src/components/forms/login-form.jsx
deleted file mode 100644
index 6cab3ba..0000000
--- a/src/components/forms/login-form.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { useFormik } from 'formik';
-import useFirebase from '../../hooks/use-firebase';
-import { loginSchema } from '../../utils/validation-schema';
-import ErrorMsg from './error-msg';
-import { useState } from 'react';
-
-const LoginForm = () => {
-    const [showPass,setShowPass] = useState(false);
-    // use firebase 
-    const { loginWithEmailPassword, resetPassword } = useFirebase();
-    // use formik
-    const { handleChange, handleSubmit, handleBlur, errors, values, touched } = useFormik({
-        initialValues: { email: '', password: '' },
-        validationSchema: loginSchema,
-        onSubmit: (values, { resetForm }) => {
-            loginWithEmailPassword(values.email, values.password)
-            resetForm()
-        }
-    })
-
-    // handleResetPass
-    const handleResetPass = (email) => {
-        resetPassword(email);
-    }
-    return (
-        <form onSubmit={handleSubmit}>
-            <div className="form-group">
-                <label htmlFor="current-log-email">Username or email*</label>
-                <input 
-                    value={values.email} 
-                    onChange={handleChange}
-                    onBlur={handleBlur} 
-                    type="email" 
-                    name="email"
-                    placeholder="Email or username" 
-                />
-                {touched.email && <ErrorMsg error={errors.email} />}
-            </div>
-            
-            <div className="form-group">
-                <label htmlFor="current-log-password">Password*</label>
-                <input 
-                    value={values.password} 
-                    onChange={handleChange}
-                    onBlur={handleBlur} 
-                    type={showPass?"text":"password"} 
-                    name="password"
-                    placeholder="Password" 
-                />
-                <span onClick={()=> setShowPass(!showPass)} className="password-show">
-                    <i className="icon-76"></i>
-                </span>
-            </div>
-            {touched.password && <ErrorMsg error={errors.password} />}
-
-            <div className="form-group chekbox-area">
-                <div className="edu-form-check">
-                    <input type="checkbox" id="remember-me" />
-                    <label htmlFor="remember-me">Remember Me</label>
-                </div>
-                <a href="#" onClick={()=> handleResetPass(values.email)} 
-                className="password-reset">Lost your password?</a>
-            </div>
-
-            <div className="form-group">
-                <button type="submit" className="edu-btn btn-medium">Sign in <i className="icon-4"></i></button>
-            </div>
-        </form>
-    )
-}
-
-export default LoginForm;
\ No newline at end of file
diff --git a/src/components/forms/login-form.tsx b/src/components/forms/login-form.tsx
new file mode 100644
index 0000000..1f04c33
--- /dev/null
+++ b/src/components/forms/login-form.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { useFormik } from 'formik';
+import { loginSchema } from '../../utils/validation-schema';
+import ErrorMsg from './error-msg';
+import { useState } from 'react';
+import { useLoginMutation } from '../../redux/features/api-slice';
+import { signIn } from '../../redux/features/auth-slice';
+import { useDispatch } from 'react-redux';
+
+const LoginForm = () => {
+    const [showPass, setShowPass] = useState(false);
+    const [formError, setFormError] = useState(false);
+    // use firebase
+    const [login] = useLoginMutation();
+    const dispatch = useDispatch();
+    // use formik
+    const {
+        handleChange,
+        handleSubmit,
+        handleBlur,
+        errors,
+        values,
+        touched,
+        isSubmitting,
+    } = useFormik({
+        initialValues: { email: '', password: '' },
+        validationSchema: loginSchema,
+        onSubmit: async (values, { resetForm }) => {
+            setFormError(false);
+            const res = await login({
+                username: values.email,
+                password: values.password,
+            });
+
+            if ('error' in res) {
+                setFormError(true);
+                return;
+            }
+
+            console.log(res);
+            dispatch(signIn(res.data.authToken));
+
+            resetForm();
+        },
+    });
+
+    // handleResetPass
+    const handleResetPass = (email: string) => {
+        // resetPassword(email);
+    };
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className='form-group'>
+                <label htmlFor='current-log-email'>Username or email*</label>
+                <input
+                    value={values.email}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    type='email'
+                    name='email'
+                    placeholder='Email or username'
+                />
+                {touched.email && <ErrorMsg error={errors.email} />}
+            </div>
+
+            <div className='form-group'>
+                <label htmlFor='current-log-password'>Password*</label>
+                <input
+                    value={values.password}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    type={showPass ? 'text' : 'password'}
+                    name='password'
+                    placeholder='Password'
+                />
+                <span onClick={() => setShowPass(!showPass)} className='password-show'>
+                    <i className='icon-76'></i>
+                </span>
+            </div>
+            {touched.password && <ErrorMsg error={errors.password} />}
+
+            <div className='form-group chekbox-area'>
+                <div className='edu-form-check'>
+                    <input type='checkbox' id='remember-me' />
+                    <label htmlFor='remember-me'>Remember Me</label>
+                </div>
+                <a
+                    href='#'
+                    onClick={() => handleResetPass(values.email)}
+                    className='password-reset'
+                >
+                    Lost your password?
+                </a>
+            </div>
+            {formError && <ErrorMsg error='Invalid email or password' />}
+
+            <div className='form-group'>
+                <button
+                    type='submit'
+                    className='edu-btn btn-medium'
+                    disabled={isSubmitting}
+                >
+                    Sign in <i className='icon-4'></i>
+                </button>
+            </div>
+        </form>
+    );
+};
+
+export default LoginForm;
diff --git a/src/components/forms/product-comment-form.jsx b/src/components/forms/product-comment-form.jsx
deleted file mode 100644
index 61213f7..0000000
--- a/src/components/forms/product-comment-form.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-
-const ProductCommentForm = () => {
-    return (
-        <form className="comment-form">
-            <div className="review-rating">
-                <h6 className="title">Your Rating</h6>
-                <div className="rating">
-                    <i className="icon-star-empty"></i>
-                    <i className="icon-star-empty"></i>
-                    <i className="icon-star-empty"></i>
-                    <i className="icon-star-empty"></i>
-                    <i className="icon-star-empty"></i>
-                </div>
-            </div>
-            
-            <div className="row g-5">
-                <div className="form-group col-12">
-                    <label>Your Review</label>
-                    <textarea name="comm-message" id="comm-message" cols="30" rows="5"></textarea>
-                </div>
-
-                <div className="form-group col-lg-6">
-                    <label>Your Name</label>
-                    <input type="text" name="comm-name" id="comm-name" />
-                </div>
-
-                <div className="form-group col-lg-6">
-                    <label>Your Email</label>
-                    <input type="email" name="comm-email" id="comm-email" />
-                </div>
-
-                <div className="form-group col-12">
-                    <div className="edu-form-check">
-                        <input type="checkbox" id="save-info" />
-                        <label htmlFor="save-info">Save my name, email, and website in this browser for the next time I comment.</label>
-                    </div>
-                </div>
-
-                <div className="form-group col-12">
-                    <button type="submit" className="edu-btn submit-btn">Submit Your Review <i className="icon-4"></i></button>
-                </div>
-            </div>
-        </form>
-    )
-}
-
-export default ProductCommentForm;
\ No newline at end of file
diff --git a/src/components/forms/product-comment-form.tsx b/src/components/forms/product-comment-form.tsx
new file mode 100644
index 0000000..40b184f
--- /dev/null
+++ b/src/components/forms/product-comment-form.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+const ProductCommentForm = () => {
+    return (
+        <form className='comment-form'>
+            <div className='review-rating'>
+                <h6 className='title'>Your Rating</h6>
+                <div className='rating'>
+                    <i className='icon-star-empty'></i>
+                    <i className='icon-star-empty'></i>
+                    <i className='icon-star-empty'></i>
+                    <i className='icon-star-empty'></i>
+                    <i className='icon-star-empty'></i>
+                </div>
+            </div>
+
+            <div className='row g-5'>
+                <div className='form-group col-12'>
+                    <label>Your Review</label>
+                    <textarea
+                        name='comm-message'
+                        id='comm-message'
+                        cols={30}
+                        rows={5}
+                    ></textarea>
+                </div>
+
+                <div className='form-group col-lg-6'>
+                    <label>Your Name</label>
+                    <input type='text' name='comm-name' id='comm-name' />
+                </div>
+
+                <div className='form-group col-lg-6'>
+                    <label>Your Email</label>
+                    <input type='email' name='comm-email' id='comm-email' />
+                </div>
+
+                <div className='form-group col-12'>
+                    <div className='edu-form-check'>
+                        <input type='checkbox' id='save-info' />
+                        <label htmlFor='save-info'>
+                            Save my name, email, and website in this browser for the next
+                            time I comment.
+                        </label>
+                    </div>
+                </div>
+
+                <div className='form-group col-12'>
+                    <button type='submit' className='edu-btn submit-btn'>
+                        Submit Your Review <i className='icon-4'></i>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+export default ProductCommentForm;
diff --git a/src/components/forms/register-form.jsx b/src/components/forms/register-form.jsx
deleted file mode 100644
index 81c2241..0000000
--- a/src/components/forms/register-form.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import { useFormik } from 'formik';
-import useFirebase from '../../hooks/use-firebase';
-import { registerSchema } from '../../utils/validation-schema';
-import ErrorMsg from './error-msg';
-import Link from 'next/link';
-import { useState } from 'react';
-
-const RegisterForm = () => {
-    const [showPass, setShowPass] = useState(false);
-    // register With Email Password
-    const { registerWithEmailPassword } = useFirebase();
-    // use formik
-    const { handleChange, handleSubmit, handleBlur, errors, values, touched } = useFormik({
-        initialValues: { name: '', email: '', password: '', terms: false },
-        validationSchema: registerSchema,
-        onSubmit: (values, { resetForm }) => {
-            registerWithEmailPassword(values.email, values.password, values.name)
-            resetForm()
-        }
-    })
-    return (
-        <form onSubmit={handleSubmit}>
-            <div className="form-group">
-                <label htmlFor="reg-name">Name*</label>
-                <input value={values.name} onChange={handleChange} onBlur={handleBlur} type="text" name="name" id="reg-name" placeholder="Full name" />
-                {touched.name && <ErrorMsg error={errors.name} />}
-            </div>
-
-            <div className="form-group">
-                <label htmlFor="log-email">Username or email*</label>
-                <input value={values.email} onChange={handleChange} onBlur={handleBlur} type="email" name="email" id="log-email" placeholder="Email or username" />
-                {touched.email && <ErrorMsg error={errors.email} />}
-            </div>
-
-            <div className="form-group">
-                <label htmlFor="log-password">Password*</label>
-                <input value={values.password} onChange={handleChange} onBlur={handleBlur} type={showPass ? "text" : "password"} name="password" id="log-password" placeholder="Password" />
-                <span onClick={() => setShowPass(!showPass)} className="password-show"><i className="icon-76"></i></span>
-            </div>
-            {touched.password && <ErrorMsg error={errors.password} />}
-
-            <div className="form-group chekbox-area">
-                <div className="edu-form-check">
-                    <input value={values.terms} onChange={handleChange} onBlur={handleBlur} type="checkbox" name='terms' id="terms-condition" />
-                    <label htmlFor="terms-condition">I agree the User Agreement and
-                        <Link href="/terms-condition">
-                            Terms & Condition.
-                        </Link>
-                    </label>
-                </div>
-            </div>
-            {touched.terms && <ErrorMsg error={errors.terms?.split('true,')[1]} />}
-            
-            <div className="form-group">
-                <button type="submit" className="edu-btn btn-medium">Create Account <i className="icon-4"></i></button>
-            </div>
-        </form>
-    );
-}
-
-export default RegisterForm;
\ No newline at end of file
diff --git a/src/components/forms/register-form.tsx b/src/components/forms/register-form.tsx
new file mode 100644
index 0000000..01db49a
--- /dev/null
+++ b/src/components/forms/register-form.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useFormik } from 'formik';
+import { registerSchema } from '../../utils/validation-schema';
+import ErrorMsg from './error-msg';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useRegisterMutation } from '../../redux/features/api-slice';
+
+const RegisterForm = () => {
+    const [showPass, setShowPass] = useState(false);
+    // register With Email Password
+    const [register] = useRegisterMutation();
+    // use formik
+    const { handleChange, handleSubmit, handleBlur, errors, values, touched } = useFormik(
+        {
+            initialValues: { name: '', email: '', password: '', terms: false },
+            validationSchema: registerSchema,
+            onSubmit: async (values, { resetForm }) => {
+                await register({
+                    email: values.email,
+                    username: values.name,
+                    password: values.password,
+                });
+                resetForm();
+            },
+        }
+    );
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className='form-group'>
+                <label htmlFor='reg-name'>Name*</label>
+                <input
+                    value={values.name}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    type='text'
+                    name='name'
+                    id='reg-name'
+                    placeholder='Full name'
+                />
+                {touched.name && <ErrorMsg error={errors.name} />}
+            </div>
+
+            <div className='form-group'>
+                <label htmlFor='log-email'>Username or email*</label>
+                <input
+                    value={values.email}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    type='email'
+                    name='email'
+                    id='log-email'
+                    placeholder='Email or username'
+                />
+                {touched.email && <ErrorMsg error={errors.email} />}
+            </div>
+
+            <div className='form-group'>
+                <label htmlFor='log-password'>Password*</label>
+                <input
+                    value={values.password}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    type={showPass ? 'text' : 'password'}
+                    name='password'
+                    id='log-password'
+                    placeholder='Password'
+                />
+                <span onClick={() => setShowPass(!showPass)} className='password-show'>
+                    <i className='icon-76'></i>
+                </span>
+            </div>
+            {touched.password && <ErrorMsg error={errors.password} />}
+
+            <div className='form-group chekbox-area'>
+                <div className='edu-form-check'>
+                    <input
+                        checked={values.terms}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        type='checkbox'
+                        name='terms'
+                        id='terms-condition'
+                    />
+                    <label htmlFor='terms-condition'>
+                        I agree the User Agreement and
+                        <Link href='/terms-condition'>Terms & Condition.</Link>
+                    </label>
+                </div>
+            </div>
+            {touched.terms && <ErrorMsg error={errors.terms?.split('true,')[1]} />}
+
+            <div className='form-group'>
+                <button type='submit' className='edu-btn btn-medium'>
+                    Create Account <i className='icon-4'></i>
+                </button>
+            </div>
+        </form>
+    );
+};
+
+export default RegisterForm;
diff --git a/src/components/forms/writing-evaluation-form.jsx b/src/components/forms/writing-evaluation-form.jsx
deleted file mode 100644
index 1228171..0000000
--- a/src/components/forms/writing-evaluation-form.jsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, {useState} from 'react';
-import '../../utils/jquery';
-
-const WritingEvaluationForm = () => {
-    const [essay, setEssay] = useState('');
-    const [task, setTask] = useState('');
-
-    const [loading, setLoading] = useState(false);
-    const [response, setResponse] = useState(null);
-    const [error, setError] = useState(null);
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-
-        setLoading(true);
-
-        const demo = false;
-
-        const response = await fetch('https://TSTPrep-tstprep-writing.hf.space/get_passage_html', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Authorization: 'Bearer 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'
-            },
-            body: JSON.stringify({
-                essay,
-                task,
-                demo
-            })
-        });
-        if (!response.ok) throw new Error(response.statusText);
-
-
-        const item = await response.json();
-
-        console.log(item);
-
-        setResponse(item.passage_html + item.indicator_html);
-        setLoading(false);
-
-    }
-
-    const toggleSubmenu = (e) => {
-        e.preventDefault();
-        let el = e.target;
-
-        while (el && el !== e.currentTarget && el.tagName !== "A") {
-            el = el.parentNode;
-        }
-        if (el && el.tagName === "A") {
-
-            /**
-             * Show the UL next to the A tag
-             */
-            let siblingUl = el.nextSibling;
-            if (siblingUl) {
-
-                el.nextSibling.classList.toggle('active');
-
-
-                /**
-                 * Show the sentences for the current A tag
-                 */
-                if (el.classList.contains('waf-trigger-level1')) {
-
-                    let triggers = siblingUl.querySelectorAll('a.waf-trigger-sentence'),
-                        targets = document.querySelectorAll(`.content-box.hovertextp span`);
-
-
-                    triggers.forEach((trigger) => {
-
-                        trigger.addEventListener('click', (e) => {
-                            e.preventDefault();
-
-                            targets.forEach((target) => {
-                                target.classList.remove('opaque');
-                            });
-
-                            let target = document.querySelector(`.content-box.hovertextp span.${trigger.dataset.sentence}`);
-                            target.classList.add('opaque');
-
-                            console.log(target)
-                        })
-
-                    });
-                }
-            }
-        }
-    }
-
-    return (
-
-        <>
-            {loading && <p>Loading...</p>}
-
-            {response && <div
-                dangerouslySetInnerHTML={{__html: response}}
-                onClick={(e) => toggleSubmenu(e)}
-            />}
-
-            {error && <p>{error}</p>}
-
-
-            {!error && !response &&
-                <form onSubmit={handleSubmit}>
-
-
-                    <div className="form-group waf-textarea">
-                        <label htmlFor="essay">Essay</label>
-                        <textarea
-                            name="essay"
-                            // value={essay}
-                            // value="Recently there has been a debate as to the PEDs. More specifically, in regard to the passages, the author puts forth the idea that this drug should be prohibited."
-                            placeholder="Essay"
-                            onBlur={(e) => setEssay(e.target.value)}
-                            data-gramm="false"
-                            data-gramm_editor="false"
-                            data-enable-grammarly="false"
-                            spellCheck="false"
-                            autoComplete="off"
-                            autoCorrect="off"
-                            autoCapitalize="off"
-                        />
-                    </div>
-
-                    <div className="form-group waf-textarea">
-                        <label htmlFor="task">Task</label>
-                        <textarea
-                            name="task"
-                            // value={task}
-                            // value="Everyone wants to get in better shape, but it usually takes a tremendous amount of time and effort. "
-                            placeholder="Task"
-                            onBlur={(e) => setTask(e.target.value)}
-                            data-gramm="false"
-                            data-gramm_editor="false"
-                            data-enable-grammarly="false"
-                            spellCheck="false"
-                            autoComplete="off"
-                            autoCorrect="off"
-                            autoCapitalize="off"
-                        />
-                    </div>
-
-                    <div className="form-group">
-                        <button type="submit" className="edu-btn btn-medium">Start <i className="icon-4"></i></button>
-                    </div>
-                </form>}
-        </>
-    );
-}
-
-export default WritingEvaluationForm;
diff --git a/src/components/forms/writing-evaluation-form.tsx b/src/components/forms/writing-evaluation-form.tsx
new file mode 100644
index 0000000..6f89bca
--- /dev/null
+++ b/src/components/forms/writing-evaluation-form.tsx
@@ -0,0 +1,213 @@
+import React, { FormEvent, useState } from 'react';
+import '../../utils/jquery';
+import {
+    useEvaluateMutation,
+    useEvaluationTitleQuery,
+    useFeedbackMutation,
+} from '../../redux/features/api-slice';
+import { Evaluation } from '../../redux/features/api.types';
+import Timer from '../writing-evaluation/Timer';
+import EvaluationResponse from '../writing-evaluation/EvaluationResponse';
+import FeedbackResponse from '../writing-evaluation/FeedbackResponse';
+
+function randomString(length: number): string {
+    let result = '';
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}
+
+type FormProps = {
+    loading: boolean;
+    onSubmit: (data: { essay: string; task: string }) => Promise<void>;
+};
+
+const Form = ({ loading, onSubmit }: FormProps) => {
+    const [essay, setEssay] = useState('');
+    const [task, setTask] = useState('');
+
+    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        await onSubmit({ essay, task });
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className='form-group waf-textarea'>
+                <label htmlFor='essay'>Essay</label>
+                <textarea
+                    name='essay'
+                    // value={essay}
+                    // value="Recently there has been a debate as to the PEDs. More specifically, in regard to the passages, the author puts forth the idea that this drug should be prohibited."
+                    placeholder='Paste or write your essay here'
+                    onBlur={e => setEssay(e.target.value)}
+                    data-gramm='false'
+                    data-gramm_editor='false'
+                    data-enable-grammarly='false'
+                    spellCheck='false'
+                    autoComplete='off'
+                    autoCorrect='off'
+                    autoCapitalize='off'
+                    disabled={loading}
+                />
+            </div>
+
+            <div className='form-group waf-textarea'>
+                <label htmlFor='task'>Task</label>
+                <textarea
+                    name='task'
+                    // value={task}
+                    // value="Everyone wants to get in better shape, but it usually takes a tremendous amount of time and effort. "
+                    placeholder='Paste your TOEFL integrated writing task here'
+                    onBlur={e => setTask(e.target.value)}
+                    data-gramm='false'
+                    data-gramm_editor='false'
+                    data-enable-grammarly='false'
+                    spellCheck='false'
+                    autoComplete='off'
+                    autoCorrect='off'
+                    autoCapitalize='off'
+                    disabled={loading}
+                />
+            </div>
+
+            {loading && (
+                <>
+                    <p id='elapsedTime' style={{ marginBottom: 0 }}>
+                        Elapsed time: <Timer /> seconds
+                    </p>
+                    <p id='waitingTime' style={{ marginBottom: 0 }}>
+                        Depending on the length of your essay and the amount of mistakes,{' '}
+                        <br />
+                        the waiting time can vary between 15s and 120s
+                    </p>
+                </>
+            )}
+
+            <div className='form-group'>
+                <button type='submit' className='edu-btn btn-medium' disabled={loading}>
+                    {loading ? (
+                        'Loading ...'
+                    ) : (
+                        <>
+                            Start <i className='icon-4'></i>
+                        </>
+                    )}
+                </button>
+            </div>
+        </form>
+    );
+};
+
+type WritingEvaluationProps = {
+    connection_id: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+};
+
+const WritingEvaluation = ({ connection_id }: WritingEvaluationProps) => {
+    const { data: titleData } = useEvaluationTitleQuery({ connection_id });
+    const [evaluation, setEvaluation] = useState<Evaluation.EvaluateResponse | null>(
+        null
+    );
+    const [feedback, setFeedback] = useState<Evaluation.FeedbackResponse | null>(null);
+
+    const [evaluate, { isLoading, isError, error, isUninitialized }] =
+        useEvaluateMutation();
+    const [
+        getFeedback,
+        { isLoading: isFeedbackLoading, isError: isFeedbackError, error: feedbackError },
+    ] = useFeedbackMutation();
+
+    const handleSubmit: FormProps['onSubmit'] = async ({ task, essay }) => {
+        const demo = false;
+        const response = await evaluate({
+            essay,
+            task,
+            demo,
+            connection_id,
+        });
+
+        if ('error' in response) return;
+
+        setEvaluation(response.data);
+
+        const response2 = await getFeedback({
+            task,
+            demo,
+            connection_id: connection_id,
+            result_json: response.data.result_json,
+        });
+
+        if ('error' in response2) return;
+
+        setFeedback(response2.data);
+    };
+
+    const handleDownload = () => {
+        const filename = 'eval_' + randomString(6) + '.json';
+        const json = JSON.stringify(
+            {
+                evaluation: evaluation,
+                feedback: feedback,
+                preset: titleData.preset,
+                connection_id,
+            },
+            null,
+            4
+        );
+        const blob = new Blob([json], { type: 'application/json' });
+        const href = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = href;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(href);
+    };
+
+    if (!titleData) {
+        return <>Loading</>;
+    }
+
+    return (
+        <>
+            <h5 className='title'>{titleData.title}</h5>
+            <p>{titleData.preset}</p>
+            <div className='writing-evaluation-form writing-evaluation-form-1'>
+                {isUninitialized || isLoading ? (
+                    <Form onSubmit={handleSubmit} loading={isLoading} />
+                ) : isError ? (
+                    <p>{error[0]}</p>
+                ) : (
+                    <>
+                        {evaluation && <EvaluationResponse evaluation={evaluation} />}
+                        {isFeedbackLoading ? (
+                            <>
+                                <p id='elapsedTime' style={{ marginBottom: 0 }}>
+                                    Elapsed time: <Timer /> seconds
+                                </p>
+                                <p id='waitingTime' style={{ marginBottom: 0 }}>
+                                    Waiting on feedback
+                                </p>
+                            </>
+                        ) : isFeedbackError ? (
+                            <p>{feedbackError[0]}</p>
+                        ) : (
+                            feedback && (
+                                <>
+                                    <FeedbackResponse feedback={feedback.feedback} />
+                                    <button onClick={handleDownload}>Download</button>
+                                </>
+                            )
+                        )}
+                    </>
+                )}
+            </div>
+        </>
+    );
+};
+
+export default WritingEvaluation;
diff --git a/src/components/gallery-grid/gallery-area.jsx b/src/components/gallery-grid/gallery-area.jsx
deleted file mode 100644
index 5a7c84d..0000000
--- a/src/components/gallery-grid/gallery-area.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import ImageLightBox from '../common/popup-modal/image-lightbox';
-
-const gallery_items = [
-    { img: '/assets/images/gallery/gallery-01.jpg', category: 'Education' },
-    { img: '/assets/images/gallery/gallery-03.jpg', category: 'Education' },
-    { img: '/assets/images/gallery/gallery-05.jpg', category: 'Education' },
-    { img: '/assets/images/gallery/gallery-02.jpg', category: 'Marketing' },
-    { img: '/assets/images/gallery/gallery-04.jpg', category: 'Marketing' },
-    { img: '/assets/images/gallery/gallery-07.jpg', category: 'Development' },
-    { img: '/assets/images/gallery/gallery-09.jpg', category: 'Development' },
-    { img: '/assets/images/gallery/gallery-03.jpg', category: 'Health' },
-    { img: '/assets/images/gallery/gallery-06.jpg', category: 'Health' },
-    { img: '/assets/images/gallery/gallery-08.jpg', category: 'Health' }
-]
-
-const uniqueItems = gallery_items.filter( (arr, index, self) =>
-    index === self.findIndex( ( i ) => ( i.img === arr.img && i.State === arr.State ) )
-)
-
-const uniq_categories = ['All', ...new Set( gallery_items.map( item => item.category ) ) ]
-
-const GalleryArea = () => {
-    const [items, setItems] = useState(uniqueItems);
-    // category
-    const [category, setCategory] = useState('All');
-    // photoIndex
-    const [photoIndex, setPhotoIndex] = useState(null);
-    // image open state
-    const [open, setOpen] = useState(false);
-    // images
-    const images = items.map(item => item.img)
-    // handleCategory
-    const handleCategory = (category) => {
-        setCategory(category)
-        if (category === 'All') {
-            setItems(uniqueItems)
-        } else {
-            setItems(gallery_items.filter(item => item.category === category))
-        }
-    }
-    // handleImagePopup
-    const handleImagePopup = (index) => {
-        setPhotoIndex(index)
-        setOpen(true)
-    }
-
-    return (
-        <>
-            <div className="edu-gallery-area edu-section-gap">
-                <div className="container">
-                    <div className="isotope-wrapper">
-                        <div className="isotop-button button-transparent isotop-filter">
-                            {uniq_categories.map((c, i) => (
-                                <button key={i} onClick={() => handleCategory(c)}
-                                className={`${category === c ? 'is-checked' : ''}`}>
-                                    <span className="filter-text">{c}</span>
-                                </button>
-                            ))}
-                        </div>
-                        <div className="isotope-list gallery-grid-wrap">
-                            <div id="animated-thumbnials" className="edublink-react-gallery-grid">
-                                <div className="row g-5">
-                                    {items.map((item, i) => (
-                                        <div key={i} className="col-lg-4 col-md-6" style={{ cursor: 'pointer' }}>
-                                            <div onClick={()=> handleImagePopup(i)} className="edu-popup-image edu-gallery-grid w-100">
-                                                <div className="thumbnail">
-                                                    <img className='w-100' src={item.img} alt="Gallery Image" />
-                                                </div>
-                                                <div className="zoom-icon">
-                                                    <i className="icon-69"></i>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            {/* image light box start */}
-            <ImageLightBox images={images} open={open} setOpen={setOpen}
-                photoIndex={photoIndex} setPhotoIndex={setPhotoIndex} />
-            {/* image light box end */}
-        </>
-    )
-}
-
-export default GalleryArea;
\ No newline at end of file
diff --git a/src/components/gallery-grid/gallery-area.tsx b/src/components/gallery-grid/gallery-area.tsx
new file mode 100644
index 0000000..2f006d8
--- /dev/null
+++ b/src/components/gallery-grid/gallery-area.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import { useState } from 'react';
+import ImageLightBox from '../common/popup-modal/image-lightbox';
+
+const gallery_items = [
+    { img: '/assets/images/gallery/gallery-01.jpg', category: 'Education' },
+    { img: '/assets/images/gallery/gallery-03.jpg', category: 'Education' },
+    { img: '/assets/images/gallery/gallery-05.jpg', category: 'Education' },
+    { img: '/assets/images/gallery/gallery-02.jpg', category: 'Marketing' },
+    { img: '/assets/images/gallery/gallery-04.jpg', category: 'Marketing' },
+    { img: '/assets/images/gallery/gallery-07.jpg', category: 'Development' },
+    { img: '/assets/images/gallery/gallery-09.jpg', category: 'Development' },
+    { img: '/assets/images/gallery/gallery-03.jpg', category: 'Health' },
+    { img: '/assets/images/gallery/gallery-06.jpg', category: 'Health' },
+    { img: '/assets/images/gallery/gallery-08.jpg', category: 'Health' },
+];
+
+const uniqueItems = gallery_items.filter(
+    (arr, index, self) => index === self.findIndex(i => i.img === arr.img) // && i.State === arr.State)
+);
+
+const uniq_categories = ['All', ...new Set(gallery_items.map(item => item.category))];
+
+const GalleryArea = () => {
+    const [items, setItems] = useState(uniqueItems);
+    // category
+    const [category, setCategory] = useState('All');
+    // photoIndex
+    const [photoIndex, setPhotoIndex] = useState(null);
+    // image open state
+    const [open, setOpen] = useState(false);
+    // images
+    const images = items.map(item => item.img);
+    // handleCategory
+    const handleCategory = category => {
+        setCategory(category);
+        if (category === 'All') {
+            setItems(uniqueItems);
+        } else {
+            setItems(gallery_items.filter(item => item.category === category));
+        }
+    };
+    // handleImagePopup
+    const handleImagePopup = index => {
+        setPhotoIndex(index);
+        setOpen(true);
+    };
+
+    return (
+        <>
+            <div className='edu-gallery-area edu-section-gap'>
+                <div className='container'>
+                    <div className='isotope-wrapper'>
+                        <div className='isotop-button button-transparent isotop-filter'>
+                            {uniq_categories.map((c, i) => (
+                                <button
+                                    key={i}
+                                    onClick={() => handleCategory(c)}
+                                    className={`${category === c ? 'is-checked' : ''}`}
+                                >
+                                    <span className='filter-text'>{c}</span>
+                                </button>
+                            ))}
+                        </div>
+                        <div className='isotope-list gallery-grid-wrap'>
+                            <div
+                                id='animated-thumbnials'
+                                className='edublink-react-gallery-grid'
+                            >
+                                <div className='row g-5'>
+                                    {items.map((item, i) => (
+                                        <div
+                                            key={i}
+                                            className='col-lg-4 col-md-6'
+                                            style={{ cursor: 'pointer' }}
+                                        >
+                                            <div
+                                                onClick={() => handleImagePopup(i)}
+                                                className='edu-popup-image edu-gallery-grid w-100'
+                                            >
+                                                <div className='thumbnail'>
+                                                    <picture>
+                                                        <img
+                                                            className='w-100'
+                                                            src={item.img}
+                                                            alt='Gallery Image'
+                                                        />
+                                                    </picture>
+                                                </div>
+                                                <div className='zoom-icon'>
+                                                    <i className='icon-69'></i>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* image light box start */}
+            <ImageLightBox
+                images={images}
+                open={open}
+                setOpen={setOpen}
+                photoIndex={photoIndex}
+                setPhotoIndex={setPhotoIndex}
+            />
+            {/* image light box end */}
+        </>
+    );
+};
+
+export default GalleryArea;
diff --git a/src/components/gallery-grid/index.jsx b/src/components/gallery-grid/index.tsx
similarity index 66%
rename from src/components/gallery-grid/index.jsx
rename to src/components/gallery-grid/index.tsx
index 3e4476a..6b9961d 100644
--- a/src/components/gallery-grid/index.jsx
+++ b/src/components/gallery-grid/index.tsx
@@ -7,15 +7,15 @@ import GalleryArea from './gallery-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Gallery" subtitle="Gallery" />
-                <GalleryArea/>
-                <AdBanner/>
+                <BreadcrumbThree title='Gallery' subtitle='Gallery' />
+                <GalleryArea />
+                <AdBanner />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/gallery-masonry/gallery-area.jsx b/src/components/gallery-masonry/gallery-area.jsx
deleted file mode 100644
index 1cd6b06..0000000
--- a/src/components/gallery-masonry/gallery-area.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
-import ImageLightBox from '../common/popup-modal/image-lightbox';
-
-const gallery_images = [
-    '/assets/images/gallery/gallery-10.jpg',
-    '/assets/images/gallery/gallery-01.jpg',
-    '/assets/images/gallery/gallery-06.jpg',
-    '/assets/images/gallery/gallery-05.jpg',
-    '/assets/images/gallery/gallery-08.jpg',
-    '/assets/images/gallery/gallery-04.jpg',
-    '/assets/images/gallery/gallery-09.jpg',
-    '/assets/images/gallery/gallery-11.jpg',
-    '/assets/images/gallery/gallery-07.jpg'
-]
-
-const GalleryArea = () => {
-    // photoIndex
-    const [photoIndex, setPhotoIndex] = useState(null);
-    // image open state
-    const [open, setOpen] = useState(false);
-    // handleImagePopup
-    const handleImagePopup = (index) => {
-        setPhotoIndex(index)
-        setOpen(true)
-    }
-
-    return (
-        <>
-            <div className="edu-gallery-area edu-section-gap">
-                <div className="container">
-                    <div id="masonry-gallery" className="gallery-grid-wrap">
-                        <div id="animated-thumbnials" className="edublink-react-gallery-grid">
-                            <ResponsiveMasonry columnsCountBreakPoints={{ 0: 1, 750: 2,992:3 }} >
-                                <Masonry gutter="30px">
-                                    {gallery_images.map((img, i) => (
-                                        <div key={i} onClick={() => handleImagePopup(i)} className="edu-popup-image edu-gallery-grid w-100 masonry-item" style={{ cursor: 'pointer' }}>
-                                            <div className="thumbnail">
-                                                <img className='w-100' src={img} alt="Gallery Image" />
-                                            </div>
-                                            <div className="zoom-icon">
-                                                <i className="icon-69"></i>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </Masonry>
-                            </ResponsiveMasonry>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            {/* image light box start */}
-            <ImageLightBox images={gallery_images} open={open} setOpen={setOpen}
-                photoIndex={photoIndex} setPhotoIndex={setPhotoIndex} />
-            {/* image light box end */}
-        </>
-    )
-}
-
-export default GalleryArea;
\ No newline at end of file
diff --git a/src/components/gallery-masonry/gallery-area.tsx b/src/components/gallery-masonry/gallery-area.tsx
new file mode 100644
index 0000000..7ca94b7
--- /dev/null
+++ b/src/components/gallery-masonry/gallery-area.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
+import ImageLightBox from '../common/popup-modal/image-lightbox';
+
+const gallery_images = [
+    '/assets/images/gallery/gallery-10.jpg',
+    '/assets/images/gallery/gallery-01.jpg',
+    '/assets/images/gallery/gallery-06.jpg',
+    '/assets/images/gallery/gallery-05.jpg',
+    '/assets/images/gallery/gallery-08.jpg',
+    '/assets/images/gallery/gallery-04.jpg',
+    '/assets/images/gallery/gallery-09.jpg',
+    '/assets/images/gallery/gallery-11.jpg',
+    '/assets/images/gallery/gallery-07.jpg',
+];
+
+const GalleryArea = () => {
+    // photoIndex
+    const [photoIndex, setPhotoIndex] = useState(null);
+    // image open state
+    const [open, setOpen] = useState(false);
+    // handleImagePopup
+    const handleImagePopup = index => {
+        setPhotoIndex(index);
+        setOpen(true);
+    };
+
+    return (
+        <>
+            <div className='edu-gallery-area edu-section-gap'>
+                <div className='container'>
+                    <div id='masonry-gallery' className='gallery-grid-wrap'>
+                        <div
+                            id='animated-thumbnials'
+                            className='edublink-react-gallery-grid'
+                        >
+                            <ResponsiveMasonry
+                                columnsCountBreakPoints={{ 0: 1, 750: 2, 992: 3 }}
+                            >
+                                <Masonry gutter='30px'>
+                                    {gallery_images.map((img, i) => (
+                                        <div
+                                            key={i}
+                                            onClick={() => handleImagePopup(i)}
+                                            className='edu-popup-image edu-gallery-grid w-100 masonry-item'
+                                            style={{ cursor: 'pointer' }}
+                                        >
+                                            <div className='thumbnail'>
+                                                <picture>
+                                                    <img
+                                                        className='w-100'
+                                                        src={img}
+                                                        alt='Gallery Image'
+                                                    />
+                                                </picture>
+                                            </div>
+                                            <div className='zoom-icon'>
+                                                <i className='icon-69'></i>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </Masonry>
+                            </ResponsiveMasonry>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* image light box start */}
+            <ImageLightBox
+                images={gallery_images}
+                open={open}
+                setOpen={setOpen}
+                photoIndex={photoIndex}
+                setPhotoIndex={setPhotoIndex}
+            />
+            {/* image light box end */}
+        </>
+    );
+};
+
+export default GalleryArea;
diff --git a/src/components/gallery-masonry/index.jsx b/src/components/gallery-masonry/index.tsx
similarity index 66%
rename from src/components/gallery-masonry/index.jsx
rename to src/components/gallery-masonry/index.tsx
index 3e4476a..6b9961d 100644
--- a/src/components/gallery-masonry/index.jsx
+++ b/src/components/gallery-masonry/index.tsx
@@ -7,15 +7,15 @@ import GalleryArea from './gallery-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Gallery" subtitle="Gallery" />
-                <GalleryArea/>
-                <AdBanner/>
+                <BreadcrumbThree title='Gallery' subtitle='Gallery' />
+                <GalleryArea />
+                <AdBanner />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home-distant-learning/about-area.jsx b/src/components/homes/home-distant-learning/about-area.jsx
deleted file mode 100644
index afc3476..0000000
--- a/src/components/homes/home-distant-learning/about-area.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const features_list = [
-    'Expert Trainers',
-    'Online Remote Learning',
-    'Lifetime Access'
-];
-
-const AboutArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="gap-bottom-equal edu-about-area about-style-2">
-            <div className="container edublink-animated-shape">
-                <div className="row g-5 align-items-center">
-                    <div className="col-lg-7">
-                        <div className="about-image-gallery">
-                            <img className="main-img-1" src="/assets/images/about/about-03.webp" alt="About Image" />
-                            <div className="author-box">
-                                <div className="inner">
-                                    <div className="thumb">
-                                        <img src="/assets/images/about/shape-03.png" alt="Shape Image" />
-                                    </div>
-                                    <div className="content">
-                                        <h4 className="title">Ray Sanchez</h4>
-                                        <p>Minim veniam nostrud exer citation.</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="award-status bounce-slide">
-                                <div className="inner">
-                                    <div className="icon">
-                                        <i className="icon-30"></i>
-                                    </div>
-                                    <div className="content">
-                                        <h6 className="title">20k</h6>
-                                        <span className="subtitle">Enrolled Learners</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(25).x,
-                                        y: mouseReverse(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-38.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(25).x,
-                                        y: mouseDirection(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-37.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(25).x,
-                                        y: mouseReverse(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-04.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-5">
-                        <div className="about-content">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title">About Us</span>
-                                <h2 className="title">Over 10 Years in <span className="color-secondary">Distant learning</span> for Skill Development</h2>
-                                <span className="shape-line">
-                                    <i className="icon-19"></i>
-                                </span>
-                                <p>Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod ex tempor incididunt labore dolore magna aliquaenim ad minim.</p>
-                            </div>
-                            <ul className="features-list" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800"> {features_list.map((l,i) => <li key={i}>{l}</li>)} </ul>
-                        </div>
-                    </div>
-                </div>
-                <ul className="shape-group">
-                    <motion.li className="shape-1 circle scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseDirection(25).x,
-                            y: mouseDirection(25).y
-                        } }
-                    >
-                        <span></span>
-                    </motion.li>
-                </ul>
-            </div>
-        </div>
-    )
-}
-
-export default AboutArea;
\ No newline at end of file
diff --git a/src/components/homes/home-distant-learning/about-area.tsx b/src/components/homes/home-distant-learning/about-area.tsx
new file mode 100644
index 0000000..232684c
--- /dev/null
+++ b/src/components/homes/home-distant-learning/about-area.tsx
@@ -0,0 +1,165 @@
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const features_list = ['Expert Trainers', 'Online Remote Learning', 'Lifetime Access'];
+
+const AboutArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='gap-bottom-equal edu-about-area about-style-2'>
+            <div className='container edublink-animated-shape'>
+                <div className='row g-5 align-items-center'>
+                    <div className='col-lg-7'>
+                        <div className='about-image-gallery'>
+                            <picture>
+                                <img
+                                    className='main-img-1'
+                                    src='/assets/images/about/about-03.webp'
+                                    alt='About Image'
+                                />
+                            </picture>
+                            <div className='author-box'>
+                                <div className='inner'>
+                                    <div className='thumb'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/about/shape-03.png'
+                                                alt='Shape Image'
+                                            />
+                                        </picture>
+                                    </div>
+                                    <div className='content'>
+                                        <h4 className='title'>Ray Sanchez</h4>
+                                        <p>Minim veniam nostrud exer citation.</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className='award-status bounce-slide'>
+                                <div className='inner'>
+                                    <div className='icon'>
+                                        <i className='icon-30'></i>
+                                    </div>
+                                    <div className='content'>
+                                        <h6 className='title'>20k</h6>
+                                        <span className='subtitle'>
+                                            Enrolled Learners
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(25).x,
+                                        y: mouseReverse(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-38.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(25).x,
+                                        y: mouseDirection(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-37.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-3 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(25).x,
+                                        y: mouseReverse(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-04.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div className='col-lg-5'>
+                        <div className='about-content'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title'>About Us</span>
+                                <h2 className='title'>
+                                    Over 10 Years in{' '}
+                                    <span className='color-secondary'>
+                                        Distant learning
+                                    </span>{' '}
+                                    for Skill Development
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>
+                                    Lorem ipsum dolor sit amet consectur adipiscing elit
+                                    sed eiusmod ex tempor incididunt labore dolore magna
+                                    aliquaenim ad minim.
+                                </p>
+                            </div>
+                            <ul
+                                className='features-list'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                {' '}
+                                {features_list.map((l, i) => (
+                                    <li key={i}>{l}</li>
+                                ))}{' '}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 circle scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseDirection(25).x,
+                            y: mouseDirection(25).y,
+                        }}
+                    >
+                        <span></span>
+                    </motion.li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default AboutArea;
diff --git a/src/components/homes/home-distant-learning/blog-area.jsx b/src/components/homes/home-distant-learning/blog-area.jsx
deleted file mode 100644
index 5a0ffde..0000000
--- a/src/components/homes/home-distant-learning/blog-area.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { blog_data } from '../../../data';
-import BlogPostOne from '../../blog-post/blog-post-one';
-
-const BlogArea = ({ style_2 }) => {
-    const blogItems = blog_data.filter(b => b.home_1);
-    return (
-        <div className={`edu-blog-area ${style_2 ? style_2 : "blog-area-1 edu-section-gap" }`}>
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Latest Articles</span>
-                    <h2 className="title">Get News with EduBlink</h2>
-                    <span className="shape-line">
-                        <i className="icon-19"></i>
-                    </span>
-                </div>
-                <div className="row g-5">
-                    {blogItems.map((blogItem, i) => ( 
-                        <div key={i} className="col-lg-4 col-md-6 col-12" data-sal-delay={blogItem.delay} data-sal="slide-up" data-sal-duration="800">
-                            <BlogPostOne param={blogItem} />
-                        </div> 
-                    ))}
-                </div>
-            </div>
-            <ul className="shape-group">
-                <li className="shape-1 scene">
-                    <img src="/assets/images/about/shape-25.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    )
-}
-
-export default BlogArea;
\ No newline at end of file
diff --git a/src/components/homes/home-distant-learning/blog-area.tsx b/src/components/homes/home-distant-learning/blog-area.tsx
new file mode 100644
index 0000000..6e8d9a5
--- /dev/null
+++ b/src/components/homes/home-distant-learning/blog-area.tsx
@@ -0,0 +1,50 @@
+import { blog_data } from '../../../data';
+import BlogPostOne from '../../blog-post/blog-post-one';
+
+const BlogArea = ({ style_2 }) => {
+    const blogItems = blog_data.filter(b => b.home_1);
+    return (
+        <div
+            className={`edu-blog-area ${
+                style_2 ? style_2 : 'blog-area-1 edu-section-gap'
+            }`}
+        >
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='100'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Latest Articles</span>
+                    <h2 className='title'>Get News with EduBlink</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {blogItems.map((blogItem, i) => (
+                        <div
+                            key={i}
+                            className='col-lg-4 col-md-6 col-12'
+                            data-sal-delay={blogItem.delay}
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <BlogPostOne param={blogItem} />
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <li className='shape-1 scene'>
+                    <picture>
+                        <img src='/assets/images/about/shape-25.png' alt='Shape' />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default BlogArea;
diff --git a/src/components/homes/home-distant-learning/brand-area.jsx b/src/components/homes/home-distant-learning/brand-area.jsx
deleted file mode 100644
index cd6383c..0000000
--- a/src/components/homes/home-distant-learning/brand-area.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const brand_images = [
-    '/assets/images/brand/brand-01.png',
-    '/assets/images/brand/brand-02.png',
-    '/assets/images/brand/brand-03.png',
-    '/assets/images/brand/brand-04.png',
-    '/assets/images/brand/brand-05.png',
-    '/assets/images/brand/brand-06.png'
-]
-
-const BrandArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-brand-area brand-area-2 bg-image">
-            <div className="container edublink-animated-shape">
-                <div className="brand-grid-wrap brand-style-2"> 
-                    {brand_images.map((img, i) => ( 
-                        <div key={i} className="brand-grid">
-                            <img src={img} alt="Brand Logo" />
-                        </div> 
-                    ))} 
-                </div>
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/about/shape-37.png" alt="Shape" />
-                    </motion.li>
-                </ul>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-2 scene shape-light" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-41.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-2 scene shape-dark" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/dark-shape-41.png" alt="Shape" />
-                </motion.li>
-            </ul>
-        </div>
-    )
-}
-
-export default BrandArea;
\ No newline at end of file
diff --git a/src/components/homes/home-distant-learning/brand-area.tsx b/src/components/homes/home-distant-learning/brand-area.tsx
new file mode 100644
index 0000000..81dec4b
--- /dev/null
+++ b/src/components/homes/home-distant-learning/brand-area.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const brand_images = [
+    '/assets/images/brand/brand-01.png',
+    '/assets/images/brand/brand-02.png',
+    '/assets/images/brand/brand-03.png',
+    '/assets/images/brand/brand-04.png',
+    '/assets/images/brand/brand-05.png',
+    '/assets/images/brand/brand-06.png',
+];
+
+const BrandArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-brand-area brand-area-2 bg-image'>
+            <div className='container edublink-animated-shape'>
+                <div className='brand-grid-wrap brand-style-2'>
+                    {brand_images.map((img, i) => (
+                        <div key={i} className='brand-grid'>
+                            <picture>
+                                <img src={img} alt='Brand Logo' />
+                            </picture>
+                        </div>
+                    ))}
+                </div>
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/about/shape-37.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                </ul>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-2 scene shape-light'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-41.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene shape-dark'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/dark-shape-41.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default BrandArea;
diff --git a/src/components/homes/home-distant-learning/category-area.jsx b/src/components/homes/home-distant-learning/category-area.jsx
deleted file mode 100644
index 0b1427f..0000000
--- a/src/components/homes/home-distant-learning/category-area.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import Link from "next/link";
-import { HybridDistancePrograms, NonDegreeProgram, OffCanvasPrograms, OnlineDegree } from "../../../svg";
-
-const contents = {
-    category_data: [
-        {
-            icon: <OnlineDegree />,
-            title: 'Online Degree Programs',
-            text: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor.',
-            courses: 7,
-            color: 'color-primary-style',
-            delay: '100'
-        },
-        {
-            icon: <NonDegreeProgram />,
-            title: 'Non-Degree Programs',
-            text: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor.',
-            courses: 4,
-            color: 'color-secondary-style',
-            delay: '200'
-        },
-        {
-            icon: <OffCanvasPrograms />,
-            title: 'Off-Campus Programs',
-            text: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor.',
-            courses: 8,
-            color: 'color-extra08-style',
-            delay: '300'
-        },
-        {
-            icon: <HybridDistancePrograms />,
-            title: 'Hybrid Distance Programs',
-            text: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor.',
-            courses: 5,
-            color: 'color-extra05-style',
-            delay: '400'
-        }
-    ]
-}
-
-const CategoryArea = () => {
-    return (
-        <div className="edu-categorie-area categorie-area-1 edu-section-gap">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">Categories</span>
-                    <h2 className="title">Online <span className="color-primary">Classes</span> For Remote Learning.</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                    <p>Consectetur adipiscing elit sed do eiusmod tempor.</p>
-                </div>
-
-                <div className="row g-5">
-                    {contents.category_data.map((category, i) => (
-                        <div key={i} className="col-lg-3 col-sm-6" data-sal-delay={category.delay} data-sal="slide-up" data-sal-duration="800">
-                            <div className={`categorie-grid categorie-style-1 ${category.color} edublink-svg-animate`}>
-                                <div className="icon">
-                                    {category.icon}
-                                </div>
-                                <div className="content">
-                                    <Link href="/course-style-1">
-
-                                        <h5 className="title">{category.title}</h5>
-
-                                    </Link>
-                                    <p>{category.text}</p>
-                                    <div className="course-remain">{category.courses} Courses</div>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default CategoryArea;
\ No newline at end of file
diff --git a/src/components/homes/home-distant-learning/category-area.tsx b/src/components/homes/home-distant-learning/category-area.tsx
new file mode 100644
index 0000000..3e953ef
--- /dev/null
+++ b/src/components/homes/home-distant-learning/category-area.tsx
@@ -0,0 +1,98 @@
+import Link from 'next/link';
+import {
+    HybridDistancePrograms,
+    NonDegreeProgram,
+    OffCanvasPrograms,
+    OnlineDegree,
+} from '../../../svg';
+
+const contents = {
+    category_data: [
+        {
+            icon: <OnlineDegree />,
+            title: 'Online Degree Programs',
+            text: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor.',
+            courses: 7,
+            color: 'color-primary-style',
+            delay: '100',
+        },
+        {
+            icon: <NonDegreeProgram />,
+            title: 'Non-Degree Programs',
+            text: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor.',
+            courses: 4,
+            color: 'color-secondary-style',
+            delay: '200',
+        },
+        {
+            icon: <OffCanvasPrograms />,
+            title: 'Off-Campus Programs',
+            text: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor.',
+            courses: 8,
+            color: 'color-extra08-style',
+            delay: '300',
+        },
+        {
+            icon: <HybridDistancePrograms />,
+            title: 'Hybrid Distance Programs',
+            text: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor.',
+            courses: 5,
+            color: 'color-extra05-style',
+            delay: '400',
+        },
+    ],
+};
+
+const CategoryArea = () => {
+    return (
+        <div className='edu-categorie-area categorie-area-1 edu-section-gap'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>Categories</span>
+                    <h2 className='title'>
+                        Online <span className='color-primary'>Classes</span> For Remote
+                        Learning.
+                    </h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                    <p>Consectetur adipiscing elit sed do eiusmod tempor.</p>
+                </div>
+
+                <div className='row g-5'>
+                    {contents.category_data.map((category, i) => (
+                        <div
+                            key={i}
+                            className='col-lg-3 col-sm-6'
+                            data-sal-delay={category.delay}
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <div
+                                className={`categorie-grid categorie-style-1 ${category.color} edublink-svg-animate`}
+                            >
+                                <div className='icon'>{category.icon}</div>
+                                <div className='content'>
+                                    <Link href='/course-style-1'>
+                                        <h5 className='title'>{category.title}</h5>
+                                    </Link>
+                                    <p>{category.text}</p>
+                                    <div className='course-remain'>
+                                        {category.courses} Courses
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CategoryArea;
diff --git a/src/components/homes/home-distant-learning/counter-area.jsx b/src/components/homes/home-distant-learning/counter-area.jsx
deleted file mode 100644
index 4fe674d..0000000
--- a/src/components/homes/home-distant-learning/counter-area.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import Counter from '../../common/counter';
-
-const counter_data = [
-    {
-        color: 'primary-color',
-        delay: '50',
-        count: 29.3,
-        text: 'K',
-        title: 'Student Enrolled',
-        decimal: 1
-    },
-    {
-        color: 'secondary-color',
-        delay: '100',
-        count: 32.4,
-        text: 'K',
-        title: 'Class Completed',
-        decimal: 1
-    },
-    {
-        color: 'extra02-color',
-        delay: '150',
-        count: 100,
-        text: '%',
-        title: 'Satisfaction Rate'
-    },
-    {
-        color: 'extra05-color',
-        delay: '200',
-        count: 354,
-        text: '%',
-        title: 'Top Instructors'
-    }
-]
-
-const CounterArea = ({home_3 = false,home_8=false}) => {
-    return (
-        <div className={`${home_3?'counterup-area-1 gap-lg-bottom-equal' : home_8 ? 'counterup-area-3 gap-bottom-equal':'counterup-area-5 edu-section-gap'}`}>
-            <div className="container">
-                <div className="row g-5">
-                    {counter_data.map((c, i) => (
-                        <div key={i} className="col-lg-3 col-sm-6" data-sal-delay={c.delay} data-sal="slide-up" data-sal-duration="800">
-                            <div className={`edu-counterup counterup-style-${home_3?'1':'5'} ${!home_3&&c.color}`}>
-                                <h2 className={`counter-item count-number ${home_3&&c.color}`}>
-                                    <span className="odometer">
-                                        <Counter number={parseFloat(c.count)} text={c.text} decimal={c.decimal} />
-                                    </span>
-                                </h2>
-                                <h6 className="title">{c.title}</h6>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CounterArea;
\ No newline at end of file
diff --git a/src/components/homes/home-distant-learning/counter-area.tsx b/src/components/homes/home-distant-learning/counter-area.tsx
new file mode 100644
index 0000000..17be236
--- /dev/null
+++ b/src/components/homes/home-distant-learning/counter-area.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import Counter from '../../common/counter';
+
+const counter_data = [
+    {
+        color: 'primary-color',
+        delay: '50',
+        count: 29.3,
+        text: 'K',
+        title: 'Student Enrolled',
+        decimal: 1,
+    },
+    {
+        color: 'secondary-color',
+        delay: '100',
+        count: 32.4,
+        text: 'K',
+        title: 'Class Completed',
+        decimal: 1,
+    },
+    {
+        color: 'extra02-color',
+        delay: '150',
+        count: 100,
+        text: '%',
+        title: 'Satisfaction Rate',
+    },
+    {
+        color: 'extra05-color',
+        delay: '200',
+        count: 354,
+        text: '%',
+        title: 'Top Instructors',
+    },
+];
+
+const CounterArea = ({ home_3 = false, home_8 = false }) => {
+    return (
+        <div
+            className={`${
+                home_3
+                    ? 'counterup-area-1 gap-lg-bottom-equal'
+                    : home_8
+                    ? 'counterup-area-3 gap-bottom-equal'
+                    : 'counterup-area-5 edu-section-gap'
+            }`}
+        >
+            <div className='container'>
+                <div className='row g-5'>
+                    {counter_data.map((c, i) => (
+                        <div
+                            key={i}
+                            className='col-lg-3 col-sm-6'
+                            data-sal-delay={c.delay}
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <div
+                                className={`edu-counterup counterup-style-${
+                                    home_3 ? '1' : '5'
+                                } ${!home_3 && c.color}`}
+                            >
+                                <h2
+                                    className={`counter-item count-number ${
+                                        home_3 && c.color
+                                    }`}
+                                >
+                                    <span className='odometer'>
+                                        <Counter
+                                            number={c.count}
+                                            text={c.text}
+                                            decimal={c.decimal}
+                                        />
+                                    </span>
+                                </h2>
+                                <h6 className='title'>{c.title}</h6>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CounterArea;
diff --git a/src/components/homes/home-distant-learning/courses-area.jsx b/src/components/homes/home-distant-learning/courses-area.jsx
deleted file mode 100644
index fe63d4a..0000000
--- a/src/components/homes/home-distant-learning/courses-area.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import Link from 'next/link';
-import { course_data } from "../../../data";
-import CourseTypeOne from '../../course/course-type-one';
-
-const CoursesArea = () => {
-  return (
-      <div className="edu-course-area course-area-2 gap-tb-text bg-lighten03">
-          <div className="container">
-              <div className="section-title section-center" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                  <span className="pre-title">Popular Courses</span>
-                  <h2 className="title">Pick A Course To Get Started</h2>
-                  <span className="shape-line"><i className="icon-19"></i></span>
-              </div>
-              <div className="row g-5">
-                  {course_data.slice(0,3).map((course) => {
-                      return (
-                          <div className="col-md-6 col-lg-4" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800" key={course.id}>
-                              <CourseTypeOne data={course} image_location_path='02' />
-                          </div>
-                      )
-                  })}
-              </div>
-              <div className="course-view-all" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1200">
-                  <Link href="/course-style-1" className="edu-btn">
-                      Browse more courses<i className="icon-4"></i>
-                  </Link>
-              </div>
-          </div>
-      </div>
-  );
-}
-
-export default CoursesArea;
\ No newline at end of file
diff --git a/src/components/homes/home-distant-learning/courses-area.tsx b/src/components/homes/home-distant-learning/courses-area.tsx
new file mode 100644
index 0000000..db5d8b9
--- /dev/null
+++ b/src/components/homes/home-distant-learning/courses-area.tsx
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+import { course_data } from '../../../data';
+import CourseTypeOne from '../../course/course-type-one';
+
+const CoursesArea = () => {
+    return (
+        <div className='edu-course-area course-area-2 gap-tb-text bg-lighten03'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='100'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Popular Courses</span>
+                    <h2 className='title'>Pick A Course To Get Started</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {course_data.slice(0, 3).map(course => {
+                        return (
+                            <div
+                                className='col-md-6 col-lg-4'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                                key={course.id}
+                            >
+                                <CourseTypeOne data={course} image_location_path='02' />
+                            </div>
+                        );
+                    })}
+                </div>
+                <div
+                    className='course-view-all'
+                    data-sal-delay='100'
+                    data-sal='slide-up'
+                    data-sal-duration='1200'
+                >
+                    <Link href='/course-style-1' className='edu-btn'>
+                        Browse more courses<i className='icon-4'></i>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CoursesArea;
diff --git a/src/components/homes/home-distant-learning/faq-area.jsx b/src/components/homes/home-distant-learning/faq-area.jsx
deleted file mode 100644
index 1d3df55..0000000
--- a/src/components/homes/home-distant-learning/faq-area.jsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const accordion_items = [
-    {
-        id:'collapseOne',
-        show:true,
-        title:'How can I contact a school directly?',
-        desc:'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    },
-    {
-        id:'collapseTwo',
-        show:false,
-        title:'How do I find a school where I want to study?',
-        desc:'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    },
-    {
-        id:'collapseThree',
-        show:false,
-        title:'Where should I study abroad?',
-        desc:'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    }
-];
-
-const FaqArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-faq-area faq-style-1">
-            <div className="container">
-                <div className="row g-5 row--45">
-                    <div className="col-lg-6">
-                        <div className="edu-faq-gallery">
-                            <div className="row g-5"> 
-                                <div className="col-6" data-sal-delay="50" data-sal="slide-right" data-sal-duration="800">
-                                    <div className="faq-thumbnail thumbnail-1">
-                                        <img src="/assets/images/faq/faq-01.jpg" alt="Faq Images" />
-                                    </div>
-                                </div>
-                                <div className="col-6" data-sal-delay="100" data-sal="slide-left" data-sal-duration="800">
-                                    <div className="faq-thumbnail thumbnail-2">
-                                        <img src="/assets/images/faq/faq-02.jpg" alt="Faq Images" />
-                                    </div>
-                                </div>
-                                <div className="col-6" data-sal-delay="50" data-sal="slide-right" data-sal-duration="800">
-                                    <div className="faq-thumbnail thumbnail-3">
-                                        <img src="/assets/images/faq/faq-03.jpg" alt="Faq Images" />
-                                    </div>
-                                </div>
-                                <div className="col-6" data-sal-delay="100" data-sal="slide-left" data-sal-duration="800">
-                                    <div className="faq-thumbnail thumbnail-4">
-                                        <img src="/assets/images/faq/faq-04.webp" alt="Faq Images" />
-                                    </div>
-                                </div>
-                            </div>
-
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene shape-light" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-02.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-1 scene shape-dark" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/dark-shape-02.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-03.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-04.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-4 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-05.png" alt="Shape Images" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                        <div className="edu-faq-content">
-                            <div className="section-title section-left">
-                                <span className="pre-title">FAQ’s</span>
-                                <h2 className="title">Over 10 Years in <span className="color-secondary">Distant <br /> Skill</span> Development</h2>
-                                <span className="shape-line">
-                                    <i className="icon-19"></i>
-                                </span>
-                            </div>
-                            <div className="faq-accordion" id="faq-accordion">
-                                <div className="accordion"> 
-                                    {accordion_items.map((item,i) => { const {desc,id,show,title} = item; 
-                                        return (
-                                            <div key={i} className="accordion-item">
-                                                <h5 className="accordion-header">
-                                                    <button className={`accordion-button ${show?'':'collapsed'}`} type="button" data-bs-toggle="collapse" data-bs-target={`#${id}`} aria-expanded={show ? 'true' : 'false' }> {title} </button>
-                                                </h5>
-                                                <div id={id} className={`accordion-collapse collapse ${show ? 'show' : '' }`} data-bs-parent="#faq-accordion">
-                                                    <div className="accordion-body">
-                                                        <p>{desc}</p>
-                                                    </div>
-                                                </div>
-                                            </div> 
-                                        )
-                                    })} 
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-02.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <span></span>
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default FaqArea;
\ No newline at end of file
diff --git a/src/components/homes/home-distant-learning/faq-area.tsx b/src/components/homes/home-distant-learning/faq-area.tsx
new file mode 100644
index 0000000..97b4e22
--- /dev/null
+++ b/src/components/homes/home-distant-learning/faq-area.tsx
@@ -0,0 +1,283 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const accordion_items = [
+    {
+        id: 'collapseOne',
+        show: true,
+        title: 'How can I contact a school directly?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+    {
+        id: 'collapseTwo',
+        show: false,
+        title: 'How do I find a school where I want to study?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+    {
+        id: 'collapseThree',
+        show: false,
+        title: 'Where should I study abroad?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+];
+
+const FaqArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-faq-area faq-style-1'>
+            <div className='container'>
+                <div className='row g-5 row--45'>
+                    <div className='col-lg-6'>
+                        <div className='edu-faq-gallery'>
+                            <div className='row g-5'>
+                                <div
+                                    className='col-6'
+                                    data-sal-delay='50'
+                                    data-sal='slide-right'
+                                    data-sal-duration='800'
+                                >
+                                    <div className='faq-thumbnail thumbnail-1'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/faq/faq-01.jpg'
+                                                alt='Faq Images'
+                                            />
+                                        </picture>
+                                    </div>
+                                </div>
+                                <div
+                                    className='col-6'
+                                    data-sal-delay='100'
+                                    data-sal='slide-left'
+                                    data-sal-duration='800'
+                                >
+                                    <div className='faq-thumbnail thumbnail-2'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/faq/faq-02.jpg'
+                                                alt='Faq Images'
+                                            />
+                                        </picture>
+                                    </div>
+                                </div>
+                                <div
+                                    className='col-6'
+                                    data-sal-delay='50'
+                                    data-sal='slide-right'
+                                    data-sal-duration='800'
+                                >
+                                    <div className='faq-thumbnail thumbnail-3'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/faq/faq-03.jpg'
+                                                alt='Faq Images'
+                                            />
+                                        </picture>
+                                    </div>
+                                </div>
+                                <div
+                                    className='col-6'
+                                    data-sal-delay='100'
+                                    data-sal='slide-left'
+                                    data-sal-duration='800'
+                                >
+                                    <div className='faq-thumbnail thumbnail-4'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/faq/faq-04.webp'
+                                                alt='Faq Images'
+                                            />
+                                        </picture>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene shape-light'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-02.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-1 scene shape-dark'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/dark-shape-02.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-03.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-04.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-4 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-05.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div
+                        className='col-lg-6'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='edu-faq-content'>
+                            <div className='section-title section-left'>
+                                <span className='pre-title'>FAQ’s</span>
+                                <h2 className='title'>
+                                    Over 10 Years in{' '}
+                                    <span className='color-secondary'>
+                                        Distant <br /> Skill
+                                    </span>{' '}
+                                    Development
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                            </div>
+                            <div className='faq-accordion' id='faq-accordion'>
+                                <div className='accordion'>
+                                    {accordion_items.map((item, i) => {
+                                        const { desc, id, show, title } = item;
+                                        return (
+                                            <div key={i} className='accordion-item'>
+                                                <h5 className='accordion-header'>
+                                                    <button
+                                                        className={`accordion-button ${
+                                                            show ? '' : 'collapsed'
+                                                        }`}
+                                                        type='button'
+                                                        data-bs-toggle='collapse'
+                                                        data-bs-target={`#${id}`}
+                                                        aria-expanded={
+                                                            show ? 'true' : 'false'
+                                                        }
+                                                    >
+                                                        {' '}
+                                                        {title}{' '}
+                                                    </button>
+                                                </h5>
+                                                <div
+                                                    id={id}
+                                                    className={`accordion-collapse collapse ${
+                                                        show ? 'show' : ''
+                                                    }`}
+                                                    data-bs-parent='#faq-accordion'
+                                                >
+                                                    <div className='accordion-body'>
+                                                        <p>{desc}</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-02.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <span></span>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FaqArea;
diff --git a/src/components/homes/home-distant-learning/hero-area.jsx b/src/components/homes/home-distant-learning/hero-area.jsx
deleted file mode 100644
index 53d8e76..0000000
--- a/src/components/homes/home-distant-learning/hero-area.jsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import Link from "next/link";
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const HeroArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="hero-banner hero-style-2 bg-image">
-            <div className="container">
-                <div className="row row--45 align-items-center">
-                    <div className="col-lg-6">
-                        <div className="banner-content">
-                            <h1 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">
-                                The Best <br /> Program to <span className="color-secondary">Enroll</span> for Exchange
-                            </h1>
-                            <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">
-                                Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.
-                            </p>
-                            <div className="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <Link href="/course-style-1" className="edu-btn">
-                                    Find courses<i className="icon-4"></i>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="banner-gallery">
-                            <div className="thumbnail thumbnail-1" data-sal-delay="500" data-sal="slide-up" data-sal-duration="1000">
-                                <img src="/assets/images/banner/girl-2.webp" alt="Girl Image" />
-                            </div>
-                            <div className="thumbnail thumbnail-2" data-sal-delay="500" data-sal="slide-down" data-sal-duration="1000">
-                                <img src="/assets/images/banner/man-1.webp" alt="Man Image" />
-                            </div>
-                            <div className="online-support" data-sal-delay="600" data-sal="slide-right" data-sal-duration="1000">
-                                <div className="inner">
-                                    <div className="icon">
-                                        <i className="icon-29"></i>
-                                    </div>
-                                    <div className="content">
-                                        <span className="subtitle">Online Support</span>
-                                        <h4 className="title">
-                                            <a href="tel:+0123456789">+012 (345) 6789</a>
-                                        </h4>
-                                    </div>
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene shape-light" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-13.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-1 scene shape-dark" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/dark-shape-13.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseDirection(50).x,
-                                        y: mouseDirection(50).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-12.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-3 scene shape-light" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-09.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-3 scene shape-dark" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/dark-shape-09.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-4 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/cta/shape-04.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default HeroArea;
\ No newline at end of file
diff --git a/src/components/homes/home-distant-learning/hero-area.tsx b/src/components/homes/home-distant-learning/hero-area.tsx
new file mode 100644
index 0000000..ce5a7f4
--- /dev/null
+++ b/src/components/homes/home-distant-learning/hero-area.tsx
@@ -0,0 +1,206 @@
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const HeroArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='hero-banner hero-style-2 bg-image'>
+            <div className='container'>
+                <div className='row row--45 align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='banner-content'>
+                            <h1
+                                className='title'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                The Best <br /> Program to{' '}
+                                <span className='color-secondary'>Enroll</span> for
+                                Exchange
+                            </h1>
+                            <p
+                                data-sal-delay='200'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit.
+                            </p>
+                            <div
+                                className='banner-btn'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <Link href='/course-style-1' className='edu-btn'>
+                                    Find courses<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='banner-gallery'>
+                            <div
+                                className='thumbnail thumbnail-1'
+                                data-sal-delay='500'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/banner/girl-2.webp'
+                                        alt='Girl Image'
+                                    />
+                                </picture>
+                            </div>
+                            <div
+                                className='thumbnail thumbnail-2'
+                                data-sal-delay='500'
+                                data-sal='slide-down'
+                                data-sal-duration='1000'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/banner/man-1.webp'
+                                        alt='Man Image'
+                                    />
+                                </picture>
+                            </div>
+                            <div
+                                className='online-support'
+                                data-sal-delay='600'
+                                data-sal='slide-right'
+                                data-sal-duration='1000'
+                            >
+                                <div className='inner'>
+                                    <div className='icon'>
+                                        <i className='icon-29'></i>
+                                    </div>
+                                    <div className='content'>
+                                        <span className='subtitle'>Online Support</span>
+                                        <h4 className='title'>
+                                            <a href='tel:+0123456789'>+012 (345) 6789</a>
+                                        </h4>
+                                    </div>
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene shape-light'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-1 scene shape-dark'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/dark-shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseDirection(50).x,
+                                        y: mouseDirection(50).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-12.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-3 scene shape-light'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-09.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-3 scene shape-dark'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/dark-shape-09.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-4 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-04.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default HeroArea;
diff --git a/src/components/homes/home-distant-learning/index.jsx b/src/components/homes/home-distant-learning/index.tsx
similarity index 54%
rename from src/components/homes/home-distant-learning/index.jsx
rename to src/components/homes/home-distant-learning/index.tsx
index eebffd6..2d542e2 100644
--- a/src/components/homes/home-distant-learning/index.jsx
+++ b/src/components/homes/home-distant-learning/index.tsx
@@ -14,22 +14,24 @@ import VideoArea from './video-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
-                <Header no_top_bar={true}/>
-                <HeroArea/>
-                <CategoryArea/>
-                <AboutArea/>
-                <CoursesArea/>
-                <VideoArea/>
-                <CounterArea/>
-                <Testimonial/>
-                <BrandArea/>
-                <FaqArea/>
-                <BlogArea style_2={'blog-area-2 svg-image--2 bg-image gap-bottom-equal'} />
+            <div id='main-wrapper' className='main-wrapper'>
+                <Header no_top_bar={true} />
+                <HeroArea />
+                <CategoryArea />
+                <AboutArea />
+                <CoursesArea />
+                <VideoArea />
+                <CounterArea />
+                <Testimonial />
+                <BrandArea />
+                <FaqArea />
+                <BlogArea
+                    style_2={'blog-area-2 svg-image--2 bg-image gap-bottom-equal'}
+                />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home-distant-learning/testimonial.jsx b/src/components/homes/home-distant-learning/testimonial.tsx
similarity index 54%
rename from src/components/homes/home-distant-learning/testimonial.jsx
rename to src/components/homes/home-distant-learning/testimonial.tsx
index 07df4cf..1126806 100644
--- a/src/components/homes/home-distant-learning/testimonial.jsx
+++ b/src/components/homes/home-distant-learning/testimonial.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay, Pagination, EffectCoverflow } from "swiper";
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination, EffectCoverflow } from 'swiper';
 import Link from 'next/link';
 
 const testimonial_contents = {
@@ -13,109 +13,122 @@ const testimonial_contents = {
             desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
             ratings: [1, 2, 3, 4, 5],
             name: 'Ray Sanchez',
-            title: 'Student'
+            title: 'Student',
         },
         {
             img: '/assets/images/testimonial/testimonial-02.png',
             desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
             ratings: [1, 2, 3, 4, 5],
             name: 'Thomas Lopez',
-            title: 'Designer'
+            title: 'Designer',
         },
         {
             img: '/assets/images/testimonial/testimonial-03.png',
             desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
             ratings: [1, 2, 3, 4, 5],
             name: 'Amber Page',
-            title: 'Developer'
+            title: 'Developer',
         },
         {
             img: '/assets/images/testimonial/testimonial-04.png',
             desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
             ratings: [1, 2, 3, 4, 5],
             name: 'Robert Tapp',
-            title: 'Content Creator'
-        }
-    ]
-}
+            title: 'Content Creator',
+        },
+    ],
+};
 
 const { pre_title, testimonial_data, text, title } = testimonial_contents;
 
 const Testimonial = () => {
     const [loop, setLoop] = useState(false);
-    useEffect(() => setLoop(true), [])
+    useEffect(() => setLoop(true), []);
     return (
-        <div className="testimonial-area-5 gap-lg-bottom-equal">
-            <div className="container">
-                <div className="row g-lg-5">
-                    <div className="col-lg-5">
-                        <div className="testimonial-heading-area">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title">{pre_title}</span>
-                                <h2 className="title">{title}</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
+        <div className='testimonial-area-5 gap-lg-bottom-equal'>
+            <div className='container'>
+                <div className='row g-lg-5'>
+                    <div className='col-lg-5'>
+                        <div className='testimonial-heading-area'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title'>{pre_title}</span>
+                                <h2 className='title'>{title}</h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
                                 <p>{text}</p>
-                                <Link href="/about-1" className="edu-btn btn-large">
-                                    View All<i className="icon-4"></i>
+                                <Link href='/about-1' className='edu-btn btn-large'>
+                                    View All<i className='icon-4'></i>
                                 </Link>
                             </div>
                         </div>
                     </div>
-                    <div className="col-lg-7">
+                    <div className='col-lg-7'>
                         <Swiper
                             loop={loop}
                             speed={500}
                             slidesPerView={1}
                             centeredSlides={true}
-                            effect="coverflow"
+                            effect='coverflow'
                             grabCursor={true}
                             modules={[Autoplay, EffectCoverflow, Pagination]}
-                            className="swiper-testimonial-slider-wrapper swiper testimonial-coverflow"
+                            className='swiper-testimonial-slider-wrapper swiper testimonial-coverflow'
                             autoplay={{
-                                delay: 2500
+                                delay: 2500,
                             }}
                             breakpoints={{
                                 575: {
-                                    slidesPerView: 2
-                                }
+                                    slidesPerView: 2,
+                                },
                             }}
                             coverflowEffect={{
                                 rotate: 0,
                                 slideShadows: false,
                                 depth: 180,
-                                stretch: 80
+                                stretch: 80,
                             }}
                             pagination={{
                                 el: '.swiper-pagination',
                                 type: 'bullets',
-                                clickable: true
+                                clickable: true,
                             }}
                         >
                             {testimonial_data.map((item, i) => (
                                 <SwiperSlide key={i}>
-                                    <div className="testimonial-grid">
-                                        <div className="thumbnail">
-                                            <img src={item.img} alt="Testimonial" />
-                                            <span className="qoute-icon"><i className="icon-26"></i></span>
+                                    <div className='testimonial-grid'>
+                                        <div className='thumbnail'>
+                                            <picture>
+                                                <img src={item.img} alt='Testimonial' />
+                                            </picture>
+                                            <span className='qoute-icon'>
+                                                <i className='icon-26'></i>
+                                            </span>
                                         </div>
-                                        <div className="content">
+                                        <div className='content'>
                                             <p>{item.desc}</p>
-                                            <div className="rating-icon">
-                                                {item.ratings.map((r, i) => <i key={i} className="icon-23"></i>)}
+                                            <div className='rating-icon'>
+                                                {item.ratings.map((r, i) => (
+                                                    <i key={i} className='icon-23'></i>
+                                                ))}
                                             </div>
-                                            <h5 className="title">{item.name}</h5>
-                                            <span className="subtitle">{item.title}</span>
+                                            <h5 className='title'>{item.name}</h5>
+                                            <span className='subtitle'>{item.title}</span>
                                         </div>
                                     </div>
                                 </SwiperSlide>
                             ))}
-                            <div className="swiper-pagination"></div>
+                            <div className='swiper-pagination'></div>
                         </Swiper>
                     </div>
                 </div>
             </div>
         </div>
     );
-}
+};
 
-export default Testimonial;
\ No newline at end of file
+export default Testimonial;
diff --git a/src/components/homes/home-distant-learning/video-area.jsx b/src/components/homes/home-distant-learning/video-area.jsx
deleted file mode 100644
index 76fcaee..0000000
--- a/src/components/homes/home-distant-learning/video-area.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import useModal from '../../../hooks/use-modal';
-import VideoModal from '../../common/popup-modal/video-modal';
-
-const VideoArea = ({about_p_2}) => {
-    const { isVideoOpen, setIsVideoOpen } = useModal();
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <>
-            <div className={`video-area-${about_p_2?'4':'1'}`}>
-                <div className="container">
-                    <div className="row justify-content-center">
-                        <div className="col-lg-9">
-                            <div className="video-gallery">
-                                <div className="thumbnail">
-                                    <img src="/assets/images/others/video-01.jpg" alt="Thumb" />
-                                    <button onClick={ ()=> setIsVideoOpen(true) } className="video-play-btn video-popup-activation"> 
-                                        <i className="icon-18"></i>
-                                    </button>
-                                </div>
-                                <ul className="shape-group">
-                                    <li className="shape-1 scene">
-                                        <img className="rotateit" src="/assets/images/about/shape-37.png" alt="Shape" />
-                                    </li>
-                                    <li className="shape-2 scene">
-                                        <img src="/assets/images/faq/shape-04.png" alt="Shape" />
-                                    </li>
-                                    <motion.li className="shape-3 scene shape-light"
-                                        animate={ {
-                                            x: mouseReverse(25).x,
-                                            y: mouseReverse(25).y
-                                        } }
-                                    >
-                                        <img src="/assets/images/faq/shape-14.png" alt="Shape" />
-                                    </motion.li>
-                                    <motion.li className="shape-3 scene shape-dark"
-                                        animate={ {
-                                            x: mouseReverse(25).x,
-                                            y: mouseReverse(25).y
-                                        } }
-                                    >
-                                        <img src="/assets/images/faq/dark-shape-14.png" alt="Shape" />
-                                    </motion.li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {/* video modal start */}
-            <VideoModal isVideoOpen={isVideoOpen} setIsVideoOpen={setIsVideoOpen} videoId={'PICj5tr9hcc'} />
-            {/* video modal end */}
-        </>
-    )
-}
-
-export default VideoArea;
\ No newline at end of file
diff --git a/src/components/homes/home-distant-learning/video-area.tsx b/src/components/homes/home-distant-learning/video-area.tsx
new file mode 100644
index 0000000..873363b
--- /dev/null
+++ b/src/components/homes/home-distant-learning/video-area.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import useModal from '../../../hooks/use-modal';
+import VideoModal from '../../common/popup-modal/video-modal';
+
+type VideoAreaProps = {
+    about_p_2?: boolean;
+};
+
+const VideoArea = ({ about_p_2 }: VideoAreaProps) => {
+    const { isVideoOpen, setIsVideoOpen } = useModal();
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <>
+            <div className={`video-area-${about_p_2 ? '4' : '1'}`}>
+                <div className='container'>
+                    <div className='row justify-content-center'>
+                        <div className='col-lg-9'>
+                            <div className='video-gallery'>
+                                <div className='thumbnail'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/video-01.jpg'
+                                            alt='Thumb'
+                                        />
+                                    </picture>
+                                    <button
+                                        onClick={() => setIsVideoOpen(true)}
+                                        className='video-play-btn video-popup-activation'
+                                    >
+                                        <i className='icon-18'></i>
+                                    </button>
+                                </div>
+                                <ul className='shape-group'>
+                                    <li className='shape-1 scene'>
+                                        <picture>
+                                            <img
+                                                className='rotateit'
+                                                src='/assets/images/about/shape-37.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </li>
+                                    <li className='shape-2 scene'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/faq/shape-04.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </li>
+                                    <motion.li
+                                        className='shape-3 scene shape-light'
+                                        animate={{
+                                            x: mouseReverse(25).x,
+                                            y: mouseReverse(25).y,
+                                        }}
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/faq/shape-14.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </motion.li>
+                                    <motion.li
+                                        className='shape-3 scene shape-dark'
+                                        animate={{
+                                            x: mouseReverse(25).x,
+                                            y: mouseReverse(25).y,
+                                        }}
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/faq/dark-shape-14.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </motion.li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* video modal start */}
+            <VideoModal
+                isVideoOpen={isVideoOpen}
+                setIsVideoOpen={setIsVideoOpen}
+                videoId={'PICj5tr9hcc'}
+            />
+            {/* video modal end */}
+        </>
+    );
+};
+
+export default VideoArea;
diff --git a/src/components/homes/home-health-coach/about.jsx b/src/components/homes/home-health-coach/about.jsx
deleted file mode 100644
index dcb7ac7..0000000
--- a/src/components/homes/home-health-coach/about.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const About = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="gap-bottom-equal edu-about-area about-style-9">
-            <div className="container edublink-animated-shape">
-                <div className="row g-5 align-items-center">
-                    <div className="col-lg-6">
-                        <div className="about-image-gallery">
-                            <img className="main-img-1" src="/assets/images/about/about-17.webp" alt="About Image" />
-                            <div className="author-box">
-                                <img src="/assets/images/about/about-18.webp" alt="About Images" />
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(25).x,
-                                        y: mouseReverse(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-36.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(25).x,
-                                        y: mouseDirection(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/others/shape-34.png" alt="Shape" />
-                                </motion.li>
-                                <li className="shape-3 circle" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                                    <span></span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="about-content">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title">About Us</span>
-                                <h2 className="title">Individual <span className="color-secondary">Nutrition</span> Counseling & Coaching</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                                <p>Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod ex tempor incididunt labore dolore magna aliquaenim ad minim.</p>
-                            </div>
-                            <ul className="features-list" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <li>Expert Trainers</li>
-                                <li>Online Remote Learning</li>
-                                <li>Lifetime Access</li>
-                            </ul>
-                            <a href="#" className="edu-btn">Get Start Today <i className="icon-4"></i></a>
-                        </div>
-                    </div>
-                </div>
-                <ul className="shape-group">
-                    <motion.li className="shape-4 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-33.png" alt="Shape" />
-                    </motion.li>
-                </ul>
-            </div>
-        </div>
-    )
-}
-
-export default About;
\ No newline at end of file
diff --git a/src/components/homes/home-health-coach/about.tsx b/src/components/homes/home-health-coach/about.tsx
new file mode 100644
index 0000000..2505007
--- /dev/null
+++ b/src/components/homes/home-health-coach/about.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const About = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='gap-bottom-equal edu-about-area about-style-9'>
+            <div className='container edublink-animated-shape'>
+                <div className='row g-5 align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='about-image-gallery'>
+                            <picture>
+                                <img
+                                    className='main-img-1'
+                                    src='/assets/images/about/about-17.webp'
+                                    alt='About Image'
+                                />
+                            </picture>
+                            <div className='author-box'>
+                                <picture>
+                                    <img
+                                        src='/assets/images/about/about-18.webp'
+                                        alt='About Images'
+                                    />
+                                </picture>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(25).x,
+                                        y: mouseReverse(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-36.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(25).x,
+                                        y: mouseDirection(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/shape-34.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <li
+                                    className='shape-3 circle'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                >
+                                    <span></span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='about-content'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title'>About Us</span>
+                                <h2 className='title'>
+                                    Individual{' '}
+                                    <span className='color-secondary'>Nutrition</span>{' '}
+                                    Counseling & Coaching
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>
+                                    Lorem ipsum dolor sit amet consectur adipiscing elit
+                                    sed eiusmod ex tempor incididunt labore dolore magna
+                                    aliquaenim ad minim.
+                                </p>
+                            </div>
+                            <ul
+                                className='features-list'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <li>Expert Trainers</li>
+                                <li>Online Remote Learning</li>
+                                <li>Lifetime Access</li>
+                            </ul>
+                            <a href='#' className='edu-btn'>
+                                Get Start Today <i className='icon-4'></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-4 scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-33.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default About;
diff --git a/src/components/homes/home-health-coach/counter-area.jsx b/src/components/homes/home-health-coach/counter-area.jsx
deleted file mode 100644
index 5b249cd..0000000
--- a/src/components/homes/home-health-coach/counter-area.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import Counter from '../../common/counter';
-
-const data = [
-    {
-        icon: 'icon-77',
-        count: 29.3,
-        text: 'K',
-        title: 'Student Enrolled',
-        decimal: 1
-    },
-    {
-        icon: 'icon-78',
-        count: 32.4,
-        text: 'K',
-        title: 'Class Completed',
-        decimal: 1,
-        extraClass: 'icon-flower'
-    },
-    {
-        icon: 'icon-79',
-        count: 100,
-        text: '%',
-        title: 'Satisfaction Rate'
-    },
-    {
-        icon: 'icon-80',
-        count: 354,
-        text: '%',
-        title: 'Top Instructors'
-    }
-]
-
-const CounterArea = () => {
-    return (
-        <div className="counterup-area-11">
-            <div className="container">
-                <div className="row g-5">
-                    {data.map((c, i) => (
-                        <div key={i} className="col-12 col-lg-3 col-md-6 col-sm-6">
-                            <div className="edu-counterup counterup-style-6">
-                                <div className={`icon ${ c.extraClass ? c.extraClass : '' }`}>
-                                    <i className={c.icon}></i>
-                                </div>
-                                <div className="counterup-wrapper">
-                                    <h2 className="counter-item count-number">
-                                        <span className="odometer">
-                                            <Counter number={parseFloat(c.count)} text={c.text} decimal={c.decimal} />
-                                        </span>
-                                    </h2>
-                                <h6 className="title">{c.title}</h6>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CounterArea;
\ No newline at end of file
diff --git a/src/components/homes/home-health-coach/counter-area.tsx b/src/components/homes/home-health-coach/counter-area.tsx
new file mode 100644
index 0000000..e08816b
--- /dev/null
+++ b/src/components/homes/home-health-coach/counter-area.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import Counter from '../../common/counter';
+
+const data = [
+    {
+        icon: 'icon-77',
+        count: 29.3,
+        text: 'K',
+        title: 'Student Enrolled',
+        decimal: 1,
+    },
+    {
+        icon: 'icon-78',
+        count: 32.4,
+        text: 'K',
+        title: 'Class Completed',
+        decimal: 1,
+        extraClass: 'icon-flower',
+    },
+    {
+        icon: 'icon-79',
+        count: 100,
+        text: '%',
+        title: 'Satisfaction Rate',
+    },
+    {
+        icon: 'icon-80',
+        count: 354,
+        text: '%',
+        title: 'Top Instructors',
+    },
+];
+
+const CounterArea = () => {
+    return (
+        <div className='counterup-area-11'>
+            <div className='container'>
+                <div className='row g-5'>
+                    {data.map((c, i) => (
+                        <div key={i} className='col-12 col-lg-3 col-md-6 col-sm-6'>
+                            <div className='edu-counterup counterup-style-6'>
+                                <div
+                                    className={`icon ${c.extraClass ? c.extraClass : ''}`}
+                                >
+                                    <i className={c.icon}></i>
+                                </div>
+                                <div className='counterup-wrapper'>
+                                    <h2 className='counter-item count-number'>
+                                        <span className='odometer'>
+                                            <Counter
+                                                number={c.count}
+                                                text={c.text}
+                                                decimal={c.decimal}
+                                            />
+                                        </span>
+                                    </h2>
+                                    <h6 className='title'>{c.title}</h6>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CounterArea;
diff --git a/src/components/homes/home-health-coach/course.jsx b/src/components/homes/home-health-coach/course.jsx
deleted file mode 100644
index 36268ff..0000000
--- a/src/components/homes/home-health-coach/course.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import CourseTypeSeven from '../../course/course-type-seven';
-import { course_data } from "../../../data";
-
-const Course = () => {
-    return (
-        <div className="home-eight-course edu-course-area course-area-9 section-gap-equal">
-            <div className="container edublink-animated-shape">
-                <ul>
-                    <li>
-                        <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                            <span className="pre-title">Popular Courses</span>
-                            <h2 className="title">Find The Course That’s Right for You.</h2>
-                            <span className="shape-line"><i className="icon-19"></i></span>
-                        </div>
-                    </li>
-                    <li>
-                        <div className="course-view-all" data-sal-delay="150" data-sal="slide-up" data-sal-duration="1200">
-                            <Link href="/course-style-1" className="edu-btn">
-                                View All courses<i className="icon-4"></i>
-                            </Link>
-                        </div>
-                    </li>
-                </ul>
-                <div className="row g-5">
-                    {course_data.slice(0,6).map( ( course ) => {
-                        return (
-                            <div className="col-xl-4 col-md-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800" key={course.id}>
-                                <CourseTypeSeven data={course} />
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default Course;
\ No newline at end of file
diff --git a/src/components/homes/home-health-coach/course.tsx b/src/components/homes/home-health-coach/course.tsx
new file mode 100644
index 0000000..454d4b5
--- /dev/null
+++ b/src/components/homes/home-health-coach/course.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Link from 'next/link';
+import CourseTypeSeven from '../../course/course-type-seven';
+import { course_data } from '../../../data';
+
+const Course = () => {
+    return (
+        <div className='home-eight-course edu-course-area course-area-9 section-gap-equal'>
+            <div className='container edublink-animated-shape'>
+                <ul>
+                    <li>
+                        <div
+                            className='section-title section-left'
+                            data-sal-delay='150'
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <span className='pre-title'>Popular Courses</span>
+                            <h2 className='title'>
+                                Find The Course That’s Right for You.
+                            </h2>
+                            <span className='shape-line'>
+                                <i className='icon-19'></i>
+                            </span>
+                        </div>
+                    </li>
+                    <li>
+                        <div
+                            className='course-view-all'
+                            data-sal-delay='150'
+                            data-sal='slide-up'
+                            data-sal-duration='1200'
+                        >
+                            <Link href='/course-style-1' className='edu-btn'>
+                                View All courses<i className='icon-4'></i>
+                            </Link>
+                        </div>
+                    </li>
+                </ul>
+                <div className='row g-5'>
+                    {course_data.slice(0, 6).map(course => {
+                        return (
+                            <div
+                                className='col-xl-4 col-md-6'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                                key={course.id}
+                            >
+                                <CourseTypeSeven data={course} />
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Course;
diff --git a/src/components/homes/home-health-coach/cta.jsx b/src/components/homes/home-health-coach/cta.jsx
deleted file mode 100644
index a421ece..0000000
--- a/src/components/homes/home-health-coach/cta.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-
-const CTA = () => {
-    return (
-        <div className="health-coach-wrapper edu-cta-banner-area cta-banner-7">
-            <div className="container">
-                <div className="edu-cta-banner">
-                    <div className="row justify-content-center">
-                        <div className="col-lg-9">
-                            <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <h2 className="title">Register To Get Quality Kitchen <span className="color-primary">Courses</span> Through EduBlink</h2>
-                            </div>
-                            <div className="input-group footer-subscription-form">
-                                <input type="email" className="form-control" placeholder="Your email" />
-                                <button className="edu-btn btn-medium" type="button">Subscribe <i className="icon-4"></i></button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CTA;
\ No newline at end of file
diff --git a/src/components/homes/home-health-coach/cta.tsx b/src/components/homes/home-health-coach/cta.tsx
new file mode 100644
index 0000000..b05b1fb
--- /dev/null
+++ b/src/components/homes/home-health-coach/cta.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+const CTA = () => {
+    return (
+        <div className='health-coach-wrapper edu-cta-banner-area cta-banner-7'>
+            <div className='container'>
+                <div className='edu-cta-banner'>
+                    <div className='row justify-content-center'>
+                        <div className='col-lg-9'>
+                            <div
+                                className='section-title section-center'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <h2 className='title'>
+                                    Register To Get Quality Kitchen{' '}
+                                    <span className='color-primary'>Courses</span> Through
+                                    EduBlink
+                                </h2>
+                            </div>
+                            <div className='input-group footer-subscription-form'>
+                                <input
+                                    type='email'
+                                    className='form-control'
+                                    placeholder='Your email'
+                                />
+                                <button className='edu-btn btn-medium' type='button'>
+                                    Subscribe <i className='icon-4'></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CTA;
diff --git a/src/components/homes/home-health-coach/event-area.jsx b/src/components/homes/home-health-coach/event-area.jsx
deleted file mode 100644
index 238358f..0000000
--- a/src/components/homes/home-health-coach/event-area.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import { event_data } from '../../../data';
-import EventItem from '../../event-grid/event-item';
-
-const events = event_data.filter(event => event.health_coach_event);
-
-const EventArea = ({ event_2 }) => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-event-area event-area-4 section-gap-equal">
-            <div className="container edublink-animated-shape">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Events & News</span>
-                    <h2 className="title">Popular Events & News</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    {events.slice(0,3).map((event) => {
-                        const { delay, id } = event;
-                        return (
-                            <div key={id} className="col-lg-4 col-md-6" data-sal-delay={delay} data-sal="slide-up" data-sal-duration="800">
-                                <div className="edu-event event-style-1">
-                                    <EventItem item={event} />
-                                </div>
-                            </div>
-                        )
-                    })}
-                </div>
-
-                <div className="event-view-all-btn" data-sal-delay="150" data-sal="slide-up" data-sal-duration="1200">
-                    <h6 className="view-text">The Latest Events from EduBlink. <Link href="/event-grid" className="btn-transparent">
-                        View All<i className="icon-4"></i>
-                    </Link>
-                    </h6>
-                </div>
-
-                <ul className="shape-group">
-                    <li className="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                        <img className="rotateit" src="/assets/images/about/shape-13.png" alt="Shape" />
-                    </li>
-                    <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseReverse(30).x,
-                            y: mouseReverse(30).y
-                        } }
-                    >
-                        <span></span>
-                    </motion.li>
-                </ul>
-            </div>
-        </div>
-    );
-}
-
-export default EventArea;
\ No newline at end of file
diff --git a/src/components/homes/home-health-coach/event-area.tsx b/src/components/homes/home-health-coach/event-area.tsx
new file mode 100644
index 0000000..4223ca4
--- /dev/null
+++ b/src/components/homes/home-health-coach/event-area.tsx
@@ -0,0 +1,94 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import { event_data } from '../../../data';
+import EventItem from '../../event-grid/event-item';
+
+const events = event_data.filter(event => event.health_coach_event);
+
+const EventArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-event-area event-area-4 section-gap-equal'>
+            <div className='container edublink-animated-shape'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Events & News</span>
+                    <h2 className='title'>Popular Events & News</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {events.slice(0, 3).map(event => {
+                        const { delay, id } = event;
+                        return (
+                            <div
+                                key={id}
+                                className='col-lg-4 col-md-6'
+                                data-sal-delay={delay}
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='edu-event event-style-1'>
+                                    <EventItem item={event} />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <div
+                    className='event-view-all-btn'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='1200'
+                >
+                    <h6 className='view-text'>
+                        The Latest Events from EduBlink.{' '}
+                        <Link href='/event-grid' className='btn-transparent'>
+                            View All<i className='icon-4'></i>
+                        </Link>
+                    </h6>
+                </div>
+
+                <ul className='shape-group'>
+                    <li
+                        className='shape-1'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                    >
+                        <picture>
+                            <img
+                                className='rotateit'
+                                src='/assets/images/about/shape-13.png'
+                                alt='Shape'
+                            />
+                        </picture>
+                    </li>
+                    <motion.li
+                        className='shape-2 scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseReverse(30).x,
+                            y: mouseReverse(30).y,
+                        }}
+                    >
+                        <span></span>
+                    </motion.li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default EventArea;
diff --git a/src/components/homes/home-health-coach/features.jsx b/src/components/homes/home-health-coach/features.jsx
deleted file mode 100644
index 803e0fc..0000000
--- a/src/components/homes/home-health-coach/features.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react'
-
-const features = () => {
-    return (
-        <div className="edu-categorie-area categorie-area-5 edu-section-gap">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Health Guide</span>
-                    <h2 className="title">The Ultimate Guide to Upgrading <br /> Your Coaching </h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    <div className="col-lg-4 col-md-6" data-sal-delay="50" data-sal="slide-up" data-sal-duration="800">
-                        <div className="categorie-grid categorie-style-5 color-primary edublink-svg-animate">
-                            <div className="icon">
-                                <i className="icon-83"></i>
-                            </div>
-                            <div className="content">
-                                <h5 className="title">Daily Excersize</h5>
-                                <p>Lorem ipsum dolor amet ex consecturs adipiscing elit sed eiusmod.</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 col-md-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                        <div className="categorie-grid categorie-style-5 color-secondary">
-                            <div className="icon">
-                                <i className="icon-81"></i>
-                            </div>
-                            <div className="content">
-                                <h5 className="title">Personal Program</h5>
-                                <p>Lorem ipsum dolor amet ex consecturs adipiscing elit sed eiusmod.</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 col-md-6" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                        <div className="categorie-grid categorie-style-5 color-extra08">
-                            <div className="icon">
-                                <i className="icon-78"></i>
-                            </div>
-                            <div className="content">
-                                <h5 className="title">Natural Process</h5>
-                                <p>Lorem ipsum dolor amet ex consecturs adipiscing elit sed eiusmod.</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 col-md-6" data-sal-delay="50" data-sal="slide-up" data-sal-duration="800">
-                        <div className="categorie-grid categorie-style-5 color-tertiary">
-                            <div className="icon">
-                                <img src="/assets/images/svg-icons/icon-04.svg" alt="Image Svg" />
-                            </div>
-                            <div className="content">
-                                <h5 className="title">Improving Health</h5>
-                                <p>Lorem ipsum dolor amet ex consecturs adipiscing elit sed eiusmod.</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 col-md-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                        <div className="categorie-grid categorie-style-5 color-extra02">
-                            <div className="icon">
-                                <img src="/assets/images/svg-icons/icon-05.svg" alt="Image Svg" />
-                            </div>
-                            <div className="content">
-                                <h5 className="title">Immune System</h5>
-                                <p>Lorem ipsum dolor amet ex consecturs adipiscing elit sed eiusmod.</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 col-md-6" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                        <div className="categorie-grid categorie-style-5 color-extra07">
-                            <div className="icon Physical-activity">
-                                <i className="icon-39"></i>
-                            </div>
-                            <div className="content">
-                                <h5 className="title">Physical Activity</h5>
-                                <p>Lorem ipsum dolor amet ex consecturs adipiscing elit sed eiusmod.</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default features;
\ No newline at end of file
diff --git a/src/components/homes/home-health-coach/features.tsx b/src/components/homes/home-health-coach/features.tsx
new file mode 100644
index 0000000..cd2e790
--- /dev/null
+++ b/src/components/homes/home-health-coach/features.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+
+const features = () => {
+    return (
+        <div className='edu-categorie-area categorie-area-5 edu-section-gap'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Health Guide</span>
+                    <h2 className='title'>
+                        The Ultimate Guide to Upgrading <br /> Your Coaching{' '}
+                    </h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    <div
+                        className='col-lg-4 col-md-6'
+                        data-sal-delay='50'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='categorie-grid categorie-style-5 color-primary edublink-svg-animate'>
+                            <div className='icon'>
+                                <i className='icon-83'></i>
+                            </div>
+                            <div className='content'>
+                                <h5 className='title'>Daily Excersize</h5>
+                                <p>
+                                    Lorem ipsum dolor amet ex consecturs adipiscing elit
+                                    sed eiusmod.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div
+                        className='col-lg-4 col-md-6'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='categorie-grid categorie-style-5 color-secondary'>
+                            <div className='icon'>
+                                <i className='icon-81'></i>
+                            </div>
+                            <div className='content'>
+                                <h5 className='title'>Personal Program</h5>
+                                <p>
+                                    Lorem ipsum dolor amet ex consecturs adipiscing elit
+                                    sed eiusmod.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div
+                        className='col-lg-4 col-md-6'
+                        data-sal-delay='150'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='categorie-grid categorie-style-5 color-extra08'>
+                            <div className='icon'>
+                                <i className='icon-78'></i>
+                            </div>
+                            <div className='content'>
+                                <h5 className='title'>Natural Process</h5>
+                                <p>
+                                    Lorem ipsum dolor amet ex consecturs adipiscing elit
+                                    sed eiusmod.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div
+                        className='col-lg-4 col-md-6'
+                        data-sal-delay='50'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='categorie-grid categorie-style-5 color-tertiary'>
+                            <div className='icon'>
+                                <picture>
+                                    <img
+                                        src='/assets/images/svg-icons/icon-04.svg'
+                                        alt='Image Svg'
+                                    />
+                                </picture>
+                            </div>
+                            <div className='content'>
+                                <h5 className='title'>Improving Health</h5>
+                                <p>
+                                    Lorem ipsum dolor amet ex consecturs adipiscing elit
+                                    sed eiusmod.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div
+                        className='col-lg-4 col-md-6'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='categorie-grid categorie-style-5 color-extra02'>
+                            <div className='icon'>
+                                <picture>
+                                    <img
+                                        src='/assets/images/svg-icons/icon-05.svg'
+                                        alt='Image Svg'
+                                    />
+                                </picture>
+                            </div>
+                            <div className='content'>
+                                <h5 className='title'>Immune System</h5>
+                                <p>
+                                    Lorem ipsum dolor amet ex consecturs adipiscing elit
+                                    sed eiusmod.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div
+                        className='col-lg-4 col-md-6'
+                        data-sal-delay='150'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='categorie-grid categorie-style-5 color-extra07'>
+                            <div className='icon Physical-activity'>
+                                <i className='icon-39'></i>
+                            </div>
+                            <div className='content'>
+                                <h5 className='title'>Physical Activity</h5>
+                                <p>
+                                    Lorem ipsum dolor amet ex consecturs adipiscing elit
+                                    sed eiusmod.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default features;
diff --git a/src/components/homes/home-health-coach/index.jsx b/src/components/homes/home-health-coach/index.tsx
similarity index 84%
rename from src/components/homes/home-health-coach/index.jsx
rename to src/components/homes/home-health-coach/index.tsx
index 466f692..4059189 100644
--- a/src/components/homes/home-health-coach/index.jsx
+++ b/src/components/homes/home-health-coach/index.tsx
@@ -13,8 +13,8 @@ import CTA from './cta';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
-                <Header no_top_bar={true}/>
+            <div id='main-wrapper' className='main-wrapper'>
+                <Header no_top_bar={true} />
                 {/* <Slider /> */}
                 <Service />
                 <About />
@@ -27,7 +27,7 @@ const index = () => {
                 <Footer />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home-health-coach/service.jsx b/src/components/homes/home-health-coach/service.jsx
deleted file mode 100644
index 098e0a7..0000000
--- a/src/components/homes/home-health-coach/service.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-
-const contents = [
-    {
-        title: 'Nutrition Strategies',
-        desc: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor enim minim veniam quis.',
-        imgSrc: '/assets/images/svg-icons/h-8-shape-34.svg',
-        color: 'color-primary-style'
-    },
-    {
-        title: 'Workout Routines',
-        desc: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor enim minim veniam quis.',
-        imgSrc: '/assets/images/svg-icons/h-8-shape-35.svg',
-        color: 'color-secondary-style'
-    },
-    {
-        title: 'Individual Support',
-        desc: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor enim minim veniam quis.',
-        imgSrc: '/assets/images/svg-icons/h-8-shape-36.svg',
-        color: 'color-extra06-style'
-    }
-]
-
-const Service = () => {
-    return (
-        <div className="features-area-5 gap-bottom-equal">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Why Healthcoach</span>
-                    <h2 className="title">Why People Need Healthier Lifestyle?</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    {contents.map((item, i) => {
-                        const { title, desc, imgSrc, color } = item;
-                        return (
-                            <div className="col-lg-4" data-sal-delay="50" data-sal="slide-up" data-sal-duration="800" key={i}>
-                                <div className={`features-box ${color}`}>
-                                    <div className="icon">
-                                        <img src={imgSrc} alt="images svg" />
-                                    </div>
-                                    <div className="content">
-                                        <h5 className="title">{title}</h5>
-                                        <p>{desc}</p>
-                                    </div>
-                                </div>
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Service;
\ No newline at end of file
diff --git a/src/components/homes/home-health-coach/service.tsx b/src/components/homes/home-health-coach/service.tsx
new file mode 100644
index 0000000..13e309d
--- /dev/null
+++ b/src/components/homes/home-health-coach/service.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+const contents = [
+    {
+        title: 'Nutrition Strategies',
+        desc: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor enim minim veniam quis.',
+        imgSrc: '/assets/images/svg-icons/h-8-shape-34.svg',
+        color: 'color-primary-style',
+    },
+    {
+        title: 'Workout Routines',
+        desc: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor enim minim veniam quis.',
+        imgSrc: '/assets/images/svg-icons/h-8-shape-35.svg',
+        color: 'color-secondary-style',
+    },
+    {
+        title: 'Individual Support',
+        desc: 'Lorem ipsum dolor consec tur elit adicing sed umod tempor enim minim veniam quis.',
+        imgSrc: '/assets/images/svg-icons/h-8-shape-36.svg',
+        color: 'color-extra06-style',
+    },
+];
+
+const Service = () => {
+    return (
+        <div className='features-area-5 gap-bottom-equal'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Why Healthcoach</span>
+                    <h2 className='title'>Why People Need Healthier Lifestyle?</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {contents.map((item, i) => {
+                        const { title, desc, imgSrc, color } = item;
+                        return (
+                            <div
+                                className='col-lg-4'
+                                data-sal-delay='50'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                                key={i}
+                            >
+                                <div className={`features-box ${color}`}>
+                                    <div className='icon'>
+                                        <picture>
+                                            <img src={imgSrc} alt='images svg' />
+                                        </picture>
+                                    </div>
+                                    <div className='content'>
+                                        <h5 className='title'>{title}</h5>
+                                        <p>{desc}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Service;
diff --git a/src/components/homes/home-health-coach/slider.jsx b/src/components/homes/home-health-coach/slider.tsx
similarity index 51%
rename from src/components/homes/home-health-coach/slider.jsx
rename to src/components/homes/home-health-coach/slider.tsx
index 371db35..6a8871f 100644
--- a/src/components/homes/home-health-coach/slider.jsx
+++ b/src/components/homes/home-health-coach/slider.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation, EffectFade, Autoplay } from "swiper";
-import { useEffect, useState } from "react";
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, EffectFade, Autoplay } from 'swiper';
+import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
 
@@ -11,35 +11,38 @@ const slider_data = [
         src: '/assets/images/bg/bg-image-17.jpg',
         subtitle: 'Welcome to EduBlink',
         title: 'Reclaim Your Body, Your Confidence & Your Life.',
-        sm_text: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
-        btn_text: 'Find courses'
+        sm_text:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
+        btn_text: 'Find courses',
     },
     {
         id: 2,
         src: '/assets/images/bg/bg-image-28.jpg',
         subtitle: 'Welcome to edublink',
         title: 'Expart & chaged Your Life',
-        sm_text: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
-        btn_text: 'Find courses'
+        sm_text:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
+        btn_text: 'Find courses',
     },
     {
         id: 3,
         src: '/assets/images/bg/bg-image-26.jpg',
         subtitle: 'Welcome to edublink',
         title: 'We Can Help Your Reignite That Speak',
-        sm_text: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
-        btn_text: 'Find courses'
-    }
+        sm_text:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
+        btn_text: 'Find courses',
+    },
 ];
 
 const Slider = () => {
     const [loop, setLoop] = useState(false);
-    useEffect(() => setLoop(true), [])
+    useEffect(() => setLoop(true), []);
     const { mouseDirection, mouseReverse } = useMouseMoveUI();
     return (
-        <div className="hero-banner hero-style-9">
-            <div className="slider">
-                <div className="container">
+        <div className='hero-banner hero-style-9'>
+            <div className='slider'>
+                <div className='container'>
                     <Swiper
                         slidesPerView={1}
                         spaceBetween={0}
@@ -48,34 +51,37 @@ const Slider = () => {
                         grabCursor={true}
                         draggable={true}
                         modules={[Autoplay, EffectFade, Navigation]}
-                        effect="fade"
-                        className="swiper health-slider-content"
+                        effect='fade'
+                        className='swiper health-slider-content'
                         speed={1000}
                         autoplay={{
-                            delay: 5500
+                            delay: 5500,
                         }}
                         navigation={{
-                            nextEl: ".slide-next",
-                            prevEl: ".slide-prev"
+                            nextEl: '.slide-next',
+                            prevEl: '.slide-prev',
                         }}
                         lazy={{
                             loadPrevNext: false,
-                            loadPrevNextAmount: 1
+                            loadPrevNextAmount: 1,
                         }}
                     >
-                        {slider_data.map((item) => {
+                        {slider_data.map(item => {
                             const { btn_text, id, sm_text, src, subtitle, title } = item;
                             return (
                                 <SwiperSlide key={id}>
-                                    <div className="inner">
-                                        <span className="pre-title color-primary">{subtitle}</span>
-                                        <h1 className="title">
-                                            {title}
-                                        </h1>
-                                        <p data-sal-delay="200">{sm_text}</p>
-                                        <div className="banner-btn" data-sal-delay="400">
-                                            <Link href="/course-style-1" className="edu-btn btn-secondary">
-                                                {btn_text} <i className="icon-4"></i>
+                                    <div className='inner'>
+                                        <span className='pre-title color-primary'>
+                                            {subtitle}
+                                        </span>
+                                        <h1 className='title'>{title}</h1>
+                                        <p data-sal-delay='200'>{sm_text}</p>
+                                        <div className='banner-btn' data-sal-delay='400'>
+                                            <Link
+                                                href='/course-style-1'
+                                                className='edu-btn btn-secondary'
+                                            >
+                                                {btn_text} <i className='icon-4'></i>
                                             </Link>
                                         </div>
                                     </div>
@@ -87,6 +93,6 @@ const Slider = () => {
             </div>
         </div>
     );
-}
+};
 
-export default Slider;
\ No newline at end of file
+export default Slider;
diff --git a/src/components/homes/home-health-coach/testimonial.jsx b/src/components/homes/home-health-coach/testimonial.jsx
deleted file mode 100644
index b129c41..0000000
--- a/src/components/homes/home-health-coach/testimonial.jsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay, Navigation } from 'swiper';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const contents = [
-    {
-        name: 'Ray Sanchez',
-        title: 'Student',
-        ratings: [1, 2, 3, 4, 5],
-        imgSrc: '/assets/images/testimonial/testimonial-09.png',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.'
-    },
-    {
-        name: 'Sara Lopez',
-        title: 'Designer',
-        ratings: [1, 2, 3, 4, 5],
-        imgSrc: '/assets/images/testimonial/testimonial-10.png',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.'
-    },
-    {
-        name: 'Amber Page',
-        title: 'Developer',
-        ratings: [1, 2, 3, 4, 5],
-        imgSrc: '/assets/images/testimonial/testimonial-11.jpg',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.'
-    }
-]
-
-const Testimonial = () => {
-    const [loop, setLoop] = useState(false);
-    useEffect(() => setLoop(true), [])
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="testimonial-area-9 section-gap-equal">
-            <div className="container edublink-animated-shape">
-                <div className="row g-5">
-                    <div className="col-lg-3">
-                        <div className="testimonial-heading-area">
-                            <div className="section-title section-left" data-sal-delay="50" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title pre-textsecondary">Testimonials</span>
-                                <h2 className="title">What Our Students Have To Say</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-5 bg-thumbnail edublink-animated-shape">
-                        <img className="health-bg-thumbnail" src="/assets/images/bg/bg-image-34.webp" alt="images" />
-                        <ul className="shape-group">
-                            <motion.li className="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                animate={ {
-                                    x: mouseReverse(30).x,
-                                    y: mouseReverse(30).y
-                                } }
-                            >
-                                <img src="/assets/images/others/shape-38.png" alt="Shape" />
-                            </motion.li>
-                            <motion.li className="shape-4 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                animate={ {
-                                    x: mouseDirection(30).x,
-                                    y: mouseDirection(30).y
-                                } }
-                            >
-                                <img src="/assets/images/others/shape-37.png" alt="Shape" />
-                            </motion.li>
-                            <li className="shape-5" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                            </li>
-                        </ul>
-                    </div>
-                    <div className="col-lg-4">
-                        <Swiper
-                            slidesPerView={1}
-                            spaceBetween={0}
-                            loop={loop}
-                            pagination={false}
-                            grabCursor={true}
-                            speed={1000}
-                            modules={[Autoplay, Navigation]}
-                            className="home-health-testimonial-activator swiper"
-                            autoplay={{
-                                delay: 3000
-                            }}
-                            navigation={{
-                                nextEl: ".swiper-btn-nxt",
-                                prevEl: ".swiper-btn-prv"
-                            }}
-                        >
-
-                            {contents.map((item, i) => (
-                                <SwiperSlide key={i}>
-                                    <div className="testimonial-grid">
-                                        <div className="thumbnail">
-                                            <img src={item.imgSrc} alt="Testimonial" />
-                                        </div>
-                                        <div className="content">
-                                            <p>{item.desc}</p>
-                                            <div className="rating-icon">
-                                                {item.ratings.map((r, i) => <i key={i} className="icon-23"></i>)}
-                                            </div>
-                                            <h5 className="title">{item.name}</h5>
-                                            <span className="subtitle">{item.title}</span>
-                                        </div>
-                                    </div>
-                                </SwiperSlide>
-                            ))}
-                            <div className="swiper-navigation">
-                                <div className="swiper-slide-controls swiper-btn-prv" role="button">
-                                    <img src="/assets/images/svg-icons/icon-left.svg" alt="images left" />
-                                </div>
-                                <div className="swiper-slide-controls swiper-btn-nxt" role="button">
-                                    <img src="/assets/images/svg-icons/icon-right.svg" alt="images right" />
-                                </div>
-                            </div>
-                        </Swiper>
-                    </div>
-                </div>
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-35.png" alt="Shape" />
-                    </motion.li>
-                    <li className="shape-2" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                        <img src="/assets/images/others/shape-36.png" alt="Shape" />
-                    </li>
-                </ul>
-            </div>
-        </div>
-    )
-}
-
-export default Testimonial;
\ No newline at end of file
diff --git a/src/components/homes/home-health-coach/testimonial.tsx b/src/components/homes/home-health-coach/testimonial.tsx
new file mode 100644
index 0000000..3148ec5
--- /dev/null
+++ b/src/components/homes/home-health-coach/testimonial.tsx
@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation } from 'swiper';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const contents = [
+    {
+        name: 'Ray Sanchez',
+        title: 'Student',
+        ratings: [1, 2, 3, 4, 5],
+        imgSrc: '/assets/images/testimonial/testimonial-09.png',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+    },
+    {
+        name: 'Sara Lopez',
+        title: 'Designer',
+        ratings: [1, 2, 3, 4, 5],
+        imgSrc: '/assets/images/testimonial/testimonial-10.png',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+    },
+    {
+        name: 'Amber Page',
+        title: 'Developer',
+        ratings: [1, 2, 3, 4, 5],
+        imgSrc: '/assets/images/testimonial/testimonial-11.jpg',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+    },
+];
+
+const Testimonial = () => {
+    const [loop, setLoop] = useState(false);
+    useEffect(() => setLoop(true), []);
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='testimonial-area-9 section-gap-equal'>
+            <div className='container edublink-animated-shape'>
+                <div className='row g-5'>
+                    <div className='col-lg-3'>
+                        <div className='testimonial-heading-area'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='50'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title pre-textsecondary'>
+                                    Testimonials
+                                </span>
+                                <h2 className='title'>What Our Students Have To Say</h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-5 bg-thumbnail edublink-animated-shape'>
+                        <picture>
+                            <img
+                                className='health-bg-thumbnail'
+                                src='/assets/images/bg/bg-image-34.webp'
+                                alt='images'
+                            />
+                        </picture>
+                        <ul className='shape-group'>
+                            <motion.li
+                                className='shape-3 scene'
+                                data-sal-delay='1000'
+                                data-sal='fade'
+                                data-sal-duration='1000'
+                                animate={{
+                                    x: mouseReverse(30).x,
+                                    y: mouseReverse(30).y,
+                                }}
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/others/shape-38.png'
+                                        alt='Shape'
+                                    />
+                                </picture>
+                            </motion.li>
+                            <motion.li
+                                className='shape-4 scene'
+                                data-sal-delay='1000'
+                                data-sal='fade'
+                                data-sal-duration='1000'
+                                animate={{
+                                    x: mouseDirection(30).x,
+                                    y: mouseDirection(30).y,
+                                }}
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/others/shape-37.png'
+                                        alt='Shape'
+                                    />
+                                </picture>
+                            </motion.li>
+                            <li
+                                className='shape-5'
+                                data-sal-delay='1000'
+                                data-sal='fade'
+                                data-sal-duration='1000'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/counterup/shape-02.png'
+                                        alt='Shape'
+                                    />
+                                </picture>
+                            </li>
+                        </ul>
+                    </div>
+                    <div className='col-lg-4'>
+                        <Swiper
+                            slidesPerView={1}
+                            spaceBetween={0}
+                            loop={loop}
+                            pagination={false}
+                            grabCursor={true}
+                            speed={1000}
+                            modules={[Autoplay, Navigation]}
+                            className='home-health-testimonial-activator swiper'
+                            autoplay={{
+                                delay: 3000,
+                            }}
+                            navigation={{
+                                nextEl: '.swiper-btn-nxt',
+                                prevEl: '.swiper-btn-prv',
+                            }}
+                        >
+                            {contents.map((item, i) => (
+                                <SwiperSlide key={i}>
+                                    <div className='testimonial-grid'>
+                                        <div className='thumbnail'>
+                                            <picture>
+                                                <img
+                                                    src={item.imgSrc}
+                                                    alt='Testimonial'
+                                                />
+                                            </picture>
+                                        </div>
+                                        <div className='content'>
+                                            <p>{item.desc}</p>
+                                            <div className='rating-icon'>
+                                                {item.ratings.map((r, i) => (
+                                                    <i key={i} className='icon-23'></i>
+                                                ))}
+                                            </div>
+                                            <h5 className='title'>{item.name}</h5>
+                                            <span className='subtitle'>{item.title}</span>
+                                        </div>
+                                    </div>
+                                </SwiperSlide>
+                            ))}
+                            <div className='swiper-navigation'>
+                                <div
+                                    className='swiper-slide-controls swiper-btn-prv'
+                                    role='button'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/svg-icons/icon-left.svg'
+                                            alt='images left'
+                                        />
+                                    </picture>
+                                </div>
+                                <div
+                                    className='swiper-slide-controls swiper-btn-nxt'
+                                    role='button'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/svg-icons/icon-right.svg'
+                                            alt='images right'
+                                        />
+                                    </picture>
+                                </div>
+                            </div>
+                        </Swiper>
+                    </div>
+                </div>
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        data-sal-delay='1000'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-35.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                    <li
+                        className='shape-2'
+                        data-sal-delay='1000'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-36.png' alt='Shape' />
+                        </picture>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default Testimonial;
diff --git a/src/components/homes/home-kindergarten/about-area.jsx b/src/components/homes/home-kindergarten/about-area.jsx
deleted file mode 100644
index ec90a6f..0000000
--- a/src/components/homes/home-kindergarten/about-area.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const AboutArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-about-area about-style-6">
-            <div className="container">
-                <div className="row g-5 align-items-center">
-                    <div className="col-lg-6">
-                        <div className="about-image-gallery">
-                            <div className="main-img-1">
-                                <img src="/assets/images/about/about-09.png" alt="About Image" />
-                            </div>
-                            <div className="main-img-2 bounce-slide">
-                                <img src="/assets/images/about/about-10.png" alt="About Image" />
-                            </div>
-                            <ul className="shape-group">
-                                <li className="shape-1">
-                                    <img src="/assets/images/about/shape-11.png" alt="Shape" />
-                                </li>
-                                <li className="shape-2">
-                                    <img src="/assets/images/about/shape-12.png" alt="Shape" />
-                                </li>
-                                <motion.li className="shape-3 scene"
-                                    animate={ {
-                                        x: mouseReverse(40).x,
-                                        y: mouseReverse(40).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="about-content">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title pre-textsecondary">Welcome to the EduBlink</span>
-                                <h2 className="title">Welcome To Best Preschool Class Center</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                                <p>Magna aliquaenim minim veniam quis nostrud exercitation ullamco laborisLorem ipsum dolor sit amet consectetur adipisicing elit sed do eius tempor incididunt labore.</p>
-                            </div>
-                            <div className="about-mission" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <div className="row g-5 row--20">
-                                    <div className="col-lg-6">
-                                        <h5 className="title">Our Vision</h5>
-                                        <p>Magna aliquaenim minim veniamquis nostrud exercitation ulamco laboris Lorem ipsum dolor sit amet.</p>
-                                        <ul className="features-list">
-                                            <li>Transportation</li>
-                                            <li>Outdoor Games</li>
-                                        </ul>
-                                    </div>
-                                    <div className="col-lg-6">
-                                        <h5 className="title">Our Mission</h5>
-                                        <p>Consectetur do eius adipisicing elit sed do eius tempor incididunt labore.</p>
-                                        <p>dolore magna aliqua. Ut enim ad minim veniam quis nosud exercitation ulamco.</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <Link
-                                href="/contact-us"
-                                className="edu-btn btn-curved"
-                                data-sal-delay="150"
-                                data-sal="slide-up"
-                                data-sal-duration="800">
-                                Get Start Today<i className="icon-4"></i>
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default AboutArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kindergarten/about-area.tsx b/src/components/homes/home-kindergarten/about-area.tsx
new file mode 100644
index 0000000..5d47da7
--- /dev/null
+++ b/src/components/homes/home-kindergarten/about-area.tsx
@@ -0,0 +1,137 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const AboutArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-about-area about-style-6'>
+            <div className='container'>
+                <div className='row g-5 align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='about-image-gallery'>
+                            <div className='main-img-1'>
+                                <picture>
+                                    <img
+                                        src='/assets/images/about/about-09.png'
+                                        alt='About Image'
+                                    />
+                                </picture>
+                            </div>
+                            <div className='main-img-2 bounce-slide'>
+                                <picture>
+                                    <img
+                                        src='/assets/images/about/about-10.png'
+                                        alt='About Image'
+                                    />
+                                </picture>
+                            </div>
+                            <ul className='shape-group'>
+                                <li className='shape-1'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-11.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <li className='shape-2'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-12.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    animate={{
+                                        x: mouseReverse(40).x,
+                                        y: mouseReverse(40).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='about-content'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title pre-textsecondary'>
+                                    Welcome to the EduBlink
+                                </span>
+                                <h2 className='title'>
+                                    Welcome To Best Preschool Class Center
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>
+                                    Magna aliquaenim minim veniam quis nostrud
+                                    exercitation ullamco laborisLorem ipsum dolor sit amet
+                                    consectetur adipisicing elit sed do eius tempor
+                                    incididunt labore.
+                                </p>
+                            </div>
+                            <div
+                                className='about-mission'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='row g-5 row--20'>
+                                    <div className='col-lg-6'>
+                                        <h5 className='title'>Our Vision</h5>
+                                        <p>
+                                            Magna aliquaenim minim veniamquis nostrud
+                                            exercitation ulamco laboris Lorem ipsum dolor
+                                            sit amet.
+                                        </p>
+                                        <ul className='features-list'>
+                                            <li>Transportation</li>
+                                            <li>Outdoor Games</li>
+                                        </ul>
+                                    </div>
+                                    <div className='col-lg-6'>
+                                        <h5 className='title'>Our Mission</h5>
+                                        <p>
+                                            Consectetur do eius adipisicing elit sed do
+                                            eius tempor incididunt labore.
+                                        </p>
+                                        <p>
+                                            dolore magna aliqua. Ut enim ad minim veniam
+                                            quis nosud exercitation ulamco.
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <Link
+                                href='/contact-us'
+                                className='edu-btn btn-curved'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                Get Start Today<i className='icon-4'></i>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AboutArea;
diff --git a/src/components/homes/home-kindergarten/ad-banner.jsx b/src/components/homes/home-kindergarten/ad-banner.jsx
deleted file mode 100644
index 53113b0..0000000
--- a/src/components/homes/home-kindergarten/ad-banner.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const AdBanner = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-cta-banner-area cta-banner-3 bg-image">
-            <div className="container edublink-animated-shape">
-                <div className="edu-cta-banner">
-                    <div className="row justify-content-center">
-                        <div className="col-lg-8">
-                            <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <h2 className="title">Quickly Get Updates About Your Class Event and News!</h2>
-                                <div className="newsletter-form">
-                                    <div className="input-group">
-                                        <input type="email" className="form-control" placeholder="Get started now"/>
-                                        <button className="edu-btn btn-curved" type="button">Subscribe <i className="icon-4"></i></button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/banner/kid-1.webp" alt="shape"/>
-                    </motion.li>
-
-                    <motion.li className="shape-2 scene"
-                        animate={ {
-                            x: mouseReverse(30).x,
-                            y: mouseReverse(30).y
-                        } }
-                    >
-                        <img src="/assets/images/banner/kid-2.webp" alt="shape"/>
-                    </motion.li>
-                    
-                    <li className="shape-3">
-                        <img src="/assets/images/banner/icon-1.png" alt="shape"/>
-                    </li>
-                    <li className="shape-4">
-                        <img src="/assets/images/banner/icon-2.png" alt="shape"/>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    )
-}
-
-export default AdBanner;
\ No newline at end of file
diff --git a/src/components/homes/home-kindergarten/ad-banner.tsx b/src/components/homes/home-kindergarten/ad-banner.tsx
new file mode 100644
index 0000000..f0057c4
--- /dev/null
+++ b/src/components/homes/home-kindergarten/ad-banner.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const AdBanner = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-cta-banner-area cta-banner-3 bg-image'>
+            <div className='container edublink-animated-shape'>
+                <div className='edu-cta-banner'>
+                    <div className='row justify-content-center'>
+                        <div className='col-lg-8'>
+                            <div
+                                className='section-title section-center'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <h2 className='title'>
+                                    Quickly Get Updates About Your Class Event and News!
+                                </h2>
+                                <div className='newsletter-form'>
+                                    <div className='input-group'>
+                                        <input
+                                            type='email'
+                                            className='form-control'
+                                            placeholder='Get started now'
+                                        />
+                                        <button
+                                            className='edu-btn btn-curved'
+                                            type='button'
+                                        >
+                                            Subscribe <i className='icon-4'></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/banner/kid-1.webp' alt='shape' />
+                        </picture>
+                    </motion.li>
+
+                    <motion.li
+                        className='shape-2 scene'
+                        animate={{
+                            x: mouseReverse(30).x,
+                            y: mouseReverse(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/banner/kid-2.webp' alt='shape' />
+                        </picture>
+                    </motion.li>
+
+                    <li className='shape-3'>
+                        <picture>
+                            <img src='/assets/images/banner/icon-1.png' alt='shape' />
+                        </picture>
+                    </li>
+                    <li className='shape-4'>
+                        <picture>
+                            <img src='/assets/images/banner/icon-2.png' alt='shape' />
+                        </picture>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default AdBanner;
diff --git a/src/components/homes/home-kindergarten/blog-area.jsx b/src/components/homes/home-kindergarten/blog-area.jsx
deleted file mode 100644
index 839f3ef..0000000
--- a/src/components/homes/home-kindergarten/blog-area.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { blog_data } from '../../../data';
-
-const blog_items = blog_data.filter(blog => blog.kindergarten_blog);
-
-const BlogArea = () => {
-    return (
-        <div className="edu-blog-area blog-area-4 edu-section-gap">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">Our Articles</span>
-                    <h2 className="title">Check Out Our Latest Blog</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    {blog_items.map((blog) => {
-                        const { id, img, title, category, comment, date, sm_desc } = blog;
-                        return (
-                            <div key={id} className="col-lg-4 col-md-6 col-12" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <div className="edu-blog blog-style-3">
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            <Link href={`/blog-details/${id}`}>
-
-                                                <img src={img} alt="Blog Images" />
-
-                                            </Link>
-                                            <div className="read-more-btn">
-                                                <Link href={`/blog-details/${id}`} className="btn-icon-round">
-                                                    <i className="icon-4"></i>
-                                                </Link>
-                                            </div>
-                                        </div>
-
-                                        <div className="content">
-                                            <div className="category-wrap">
-                                                <Link href={`/blog-details/${id}`} className="blog-category">
-                                                    {category}
-                                                </Link>
-                                            </div>
-                                            <h5 className="title">
-                                                <Link href={`/blog-details/${id}`}>
-                                                    {title}
-                                                </Link>
-                                            </h5>
-                                            <ul className="blog-meta">
-                                                <li><i className="icon-27"></i>{date}</li>
-                                                <li><i className="icon-28"></i>Com {comment}</li>
-                                            </ul>
-                                            <p>{sm_desc}</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default BlogArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kindergarten/blog-area.tsx b/src/components/homes/home-kindergarten/blog-area.tsx
new file mode 100644
index 0000000..52902e7
--- /dev/null
+++ b/src/components/homes/home-kindergarten/blog-area.tsx
@@ -0,0 +1,90 @@
+import Link from 'next/link';
+import React from 'react';
+import { blog_data } from '../../../data';
+
+const blog_items = blog_data.filter(blog => blog.kindergarten_blog);
+
+const BlogArea = () => {
+    return (
+        <div className='edu-blog-area blog-area-4 edu-section-gap'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>Our Articles</span>
+                    <h2 className='title'>Check Out Our Latest Blog</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {blog_items.map(blog => {
+                        const { id, img, title, category, comment, date, sm_desc } = blog;
+                        return (
+                            <div
+                                key={id}
+                                className='col-lg-4 col-md-6 col-12'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='edu-blog blog-style-3'>
+                                    <div className='inner'>
+                                        <div className='thumbnail'>
+                                            <Link href={`/blog-details/${id}`}>
+                                                <picture>
+                                                    <img src={img} alt='Blog Images' />
+                                                </picture>
+                                            </Link>
+                                            <div className='read-more-btn'>
+                                                <Link
+                                                    href={`/blog-details/${id}`}
+                                                    className='btn-icon-round'
+                                                >
+                                                    <i className='icon-4'></i>
+                                                </Link>
+                                            </div>
+                                        </div>
+
+                                        <div className='content'>
+                                            <div className='category-wrap'>
+                                                <Link
+                                                    href={`/blog-details/${id}`}
+                                                    className='blog-category'
+                                                >
+                                                    {category}
+                                                </Link>
+                                            </div>
+                                            <h5 className='title'>
+                                                <Link href={`/blog-details/${id}`}>
+                                                    {title}
+                                                </Link>
+                                            </h5>
+                                            <ul className='blog-meta'>
+                                                <li>
+                                                    <i className='icon-27'></i>
+                                                    {date}
+                                                </li>
+                                                <li>
+                                                    <i className='icon-28'></i>Com{' '}
+                                                    {comment}
+                                                </li>
+                                            </ul>
+                                            <p>{sm_desc}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BlogArea;
diff --git a/src/components/homes/home-kindergarten/category-area.jsx b/src/components/homes/home-kindergarten/category-area.jsx
deleted file mode 100644
index 027be89..0000000
--- a/src/components/homes/home-kindergarten/category-area.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-
-function FeatureBox ({delay,icon,color,title,text}) {
-    return (
-        <div className="col-lg-4 col-md-6" data-sal-delay={delay} data-sal="slide-up" data-sal-duration="800">
-            <div className={`features-box features-style-4 ${color}`}>
-                <div className="icon">
-                    <i className={`icon-${icon}`}></i>
-                </div>
-                <div className="content">
-                    <h5 className="title">{title}</h5>
-                    <p>{text}</p>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-const CategoryArea = () => {
-    return (
-        <div className="features-area-4">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">Our Activities</span>
-                    <h2 className="title">Will Be Happy With Our Activities</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row">
-                    <FeatureBox delay="50" color="color-primary-style" icon="84" title="Summer Camp" 
-                    text="Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris." />
-                    <FeatureBox delay="100" color="color-secondary-style" icon="85" title="Museum Visit" 
-                    text="Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris." />
-                    <FeatureBox delay="150" color="color-extra02-style" icon="86" title="Sports Training" 
-                    text="Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris." />
-                    <FeatureBox delay="50" color="color-extra03-style" icon="87" title="Music Club" 
-                    text="Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris." />
-                    <FeatureBox delay="100" color="color-extra04-style" icon="88" title="Math Club" 
-                    text="Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris." />
-                    <FeatureBox delay="150" color="color-extra05-style" icon="89" title="Clear & Cleaning" 
-                    text="Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris." />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CategoryArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kindergarten/category-area.tsx b/src/components/homes/home-kindergarten/category-area.tsx
new file mode 100644
index 0000000..e98e149
--- /dev/null
+++ b/src/components/homes/home-kindergarten/category-area.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+
+function FeatureBox({ delay, icon, color, title, text }) {
+    return (
+        <div
+            className='col-lg-4 col-md-6'
+            data-sal-delay={delay}
+            data-sal='slide-up'
+            data-sal-duration='800'
+        >
+            <div className={`features-box features-style-4 ${color}`}>
+                <div className='icon'>
+                    <i className={`icon-${icon}`}></i>
+                </div>
+                <div className='content'>
+                    <h5 className='title'>{title}</h5>
+                    <p>{text}</p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+const CategoryArea = () => {
+    return (
+        <div className='features-area-4'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>Our Activities</span>
+                    <h2 className='title'>Will Be Happy With Our Activities</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row'>
+                    <FeatureBox
+                        delay='50'
+                        color='color-primary-style'
+                        icon='84'
+                        title='Summer Camp'
+                        text='Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris.'
+                    />
+                    <FeatureBox
+                        delay='100'
+                        color='color-secondary-style'
+                        icon='85'
+                        title='Museum Visit'
+                        text='Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris.'
+                    />
+                    <FeatureBox
+                        delay='150'
+                        color='color-extra02-style'
+                        icon='86'
+                        title='Sports Training'
+                        text='Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris.'
+                    />
+                    <FeatureBox
+                        delay='50'
+                        color='color-extra03-style'
+                        icon='87'
+                        title='Music Club'
+                        text='Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris.'
+                    />
+                    <FeatureBox
+                        delay='100'
+                        color='color-extra04-style'
+                        icon='88'
+                        title='Math Club'
+                        text='Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris.'
+                    />
+                    <FeatureBox
+                        delay='150'
+                        color='color-extra05-style'
+                        icon='89'
+                        title='Clear & Cleaning'
+                        text='Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris.'
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CategoryArea;
diff --git a/src/components/homes/home-kindergarten/courses-area.jsx b/src/components/homes/home-kindergarten/courses-area.jsx
deleted file mode 100644
index aaeb6a5..0000000
--- a/src/components/homes/home-kindergarten/courses-area.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import { course_data } from '../../../data';
-
-const courses = course_data.filter(course => course.kindergarten_course)
-
-const CoursesArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-course-area course-area-7">
-            <div className="container edublink-animated-shape">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">Popular Courses</span>
-                    <h2 className="title">Pick A Course To Get Started</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    {courses.slice(0,3).map((course) => {
-                        const { id, bg_color, img, course_price, level, title, short_desc, lesson, student } = course;
-                        return (
-                            <div key={id} className="col-12 col-lg-4 col-md-6" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <div className={`edu-course course-style-7 ${bg_color}`}>
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            <Link href={`/course-details/${id}`}>
-
-                                                <img src={`/assets/images/course/course-04/${img}`} alt="Course Meta" />
-
-                                            </Link>
-                                            <div className="course-price price-round">${Math.trunc(course_price)}</div>
-                                        </div>
-                                        <div className="content">
-                                            <span className="course-level">{level}</span>
-                                            <h5 className="title">
-                                                <Link href={`/course-details/${id}`}>
-                                                    {title}
-                                                </Link>
-                                            </h5>
-                                            <ul className="course-meta">
-                                                <li><i className="icon-24"></i>{lesson} Lessons</li>
-                                                <li><i className="icon-25"></i>{student} Students</li>
-                                            </ul>
-                                            <p>{short_desc}</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene"
-                        animate={ {
-                            x: mouseReverse(30).x,
-                            y: mouseReverse(30).y
-                        } }
-                    >
-                        <img src="/assets/images/banner/icon-3.png" alt="Shape" />
-                    </motion.li>
-                    <motion.li className="shape-2 scene"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/banner/icon-2.png" alt="Shape" />
-                    </motion.li>
-                </ul>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-3 scene"
-                    animate={ {
-                        x: mouseReverse(40).x,
-                        y: mouseReverse(40).y
-                    } }
-                >
-                    <img src="/assets/images/banner/icon-4.png" alt="Shape" />
-                </motion.li>
-            </ul>
-        </div>
-    );
-}
-
-export default CoursesArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kindergarten/courses-area.tsx b/src/components/homes/home-kindergarten/courses-area.tsx
new file mode 100644
index 0000000..4f887ae
--- /dev/null
+++ b/src/components/homes/home-kindergarten/courses-area.tsx
@@ -0,0 +1,130 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import { course_data } from '../../../data';
+
+const courses = course_data.filter(course => course.kindergarten_course);
+
+const CoursesArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-course-area course-area-7'>
+            <div className='container edublink-animated-shape'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>Popular Courses</span>
+                    <h2 className='title'>Pick A Course To Get Started</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {courses.slice(0, 3).map(course => {
+                        const {
+                            id,
+                            bg_color,
+                            img,
+                            course_price,
+                            level,
+                            title,
+                            short_desc,
+                            lesson,
+                            student,
+                        } = course;
+                        return (
+                            <div
+                                key={id}
+                                className='col-12 col-lg-4 col-md-6'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className={`edu-course course-style-7 ${bg_color}`}>
+                                    <div className='inner'>
+                                        <div className='thumbnail'>
+                                            <Link href={`/course-details/${id}`}>
+                                                <picture>
+                                                    <img
+                                                        src={`/assets/images/course/course-04/${img}`}
+                                                        alt='Course Meta'
+                                                    />
+                                                </picture>
+                                            </Link>
+                                            <div className='course-price price-round'>
+                                                ${Math.trunc(parseFloat(course_price))}
+                                            </div>
+                                        </div>
+                                        <div className='content'>
+                                            <span className='course-level'>{level}</span>
+                                            <h5 className='title'>
+                                                <Link href={`/course-details/${id}`}>
+                                                    {title}
+                                                </Link>
+                                            </h5>
+                                            <ul className='course-meta'>
+                                                <li>
+                                                    <i className='icon-24'></i>
+                                                    {lesson} Lessons
+                                                </li>
+                                                <li>
+                                                    <i className='icon-25'></i>
+                                                    {student} Students
+                                                </li>
+                                            </ul>
+                                            <p>{short_desc}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        animate={{
+                            x: mouseReverse(30).x,
+                            y: mouseReverse(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/banner/icon-3.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                    <motion.li
+                        className='shape-2 scene'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/banner/icon-2.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                </ul>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-3 scene'
+                    animate={{
+                        x: mouseReverse(40).x,
+                        y: mouseReverse(40).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/banner/icon-4.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default CoursesArea;
diff --git a/src/components/homes/home-kindergarten/event-area.jsx b/src/components/homes/home-kindergarten/event-area.jsx
deleted file mode 100644
index 139adb3..0000000
--- a/src/components/homes/home-kindergarten/event-area.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import { event_data } from '../../../data';
-
-const events = event_data.filter(item => item.home_7)
-
-const EventArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-event-area event-area-3 bg-image">
-            <div className="container edublink-animated-shape">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">Discover Event</span>
-                    <h2 className="title">Join Our Upcoming Event</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    {events.map((event) => {
-                        const { id, date, event_meta, img, sm_desc, bg_style, title } = event;
-                        return (
-                            <div key={id} className="col-lg-6 col-12" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <div className={`edu-event-list event-list-3 ${bg_style}`}>
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            <Link href={`/event-details/${id}`}>
-
-                                                <img src={img} alt="Event Images" />
-
-                                            </Link>
-                                        </div>
-                                        <div className="content">
-                                            <ul className="event-meta">
-                                                <li><i className="icon-27"></i>{date}</li>
-                                            </ul>
-                                            <h4 className="title">
-                                                <Link href={`/event-details/${id}`}>
-                                                    {title}
-                                                </Link>
-                                            </h4>
-                                            <span className="event-location"><i className="icon-40"></i>{event_meta}</span>
-                                            <p>{sm_desc}</p>
-                                            <div className="read-more-btn">
-                                                <Link
-                                                    href={`/event-details/${id}`}
-                                                    className="edu-btn btn-medium curved-medium">
-                                                    Attend<i className="icon-4"></i>
-                                                </Link>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene"
-                        animate={ {
-                            x: mouseReverse(30).x,
-                            y: mouseReverse(30).y
-                        } }
-                    >
-                        <img src="/assets/images/banner/icon-2.png" alt="Shape" />
-                    </motion.li>
-                    <motion.li className="shape-2 scene"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/banner/icon-1.png" alt="Shape" />
-                    </motion.li>
-                </ul>
-            </div>
-        </div>
-    );
-}
-
-export default EventArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kindergarten/event-area.tsx b/src/components/homes/home-kindergarten/event-area.tsx
new file mode 100644
index 0000000..e7aca01
--- /dev/null
+++ b/src/components/homes/home-kindergarten/event-area.tsx
@@ -0,0 +1,112 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import { event_data } from '../../../data';
+
+const events = event_data.filter(item => item.home_7);
+
+const EventArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-event-area event-area-3 bg-image'>
+            <div className='container edublink-animated-shape'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>Discover Event</span>
+                    <h2 className='title'>Join Our Upcoming Event</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {events.map(event => {
+                        const { id, date, event_meta, img, sm_desc, bg_style, title } =
+                            event;
+                        return (
+                            <div
+                                key={id}
+                                className='col-lg-6 col-12'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div
+                                    className={`edu-event-list event-list-3 ${bg_style}`}
+                                >
+                                    <div className='inner'>
+                                        <div className='thumbnail'>
+                                            <Link href={`/event-details/${id}`}>
+                                                <picture>
+                                                    <img src={img} alt='Event Images' />
+                                                </picture>
+                                            </Link>
+                                        </div>
+                                        <div className='content'>
+                                            <ul className='event-meta'>
+                                                <li>
+                                                    <i className='icon-27'></i>
+                                                    {date}
+                                                </li>
+                                            </ul>
+                                            <h4 className='title'>
+                                                <Link href={`/event-details/${id}`}>
+                                                    {title}
+                                                </Link>
+                                            </h4>
+                                            <span className='event-location'>
+                                                <i className='icon-40'></i>
+                                                {event_meta}
+                                            </span>
+                                            <p>{sm_desc}</p>
+                                            <div className='read-more-btn'>
+                                                <Link
+                                                    href={`/event-details/${id}`}
+                                                    className='edu-btn btn-medium curved-medium'
+                                                >
+                                                    Attend<i className='icon-4'></i>
+                                                </Link>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        animate={{
+                            x: mouseReverse(30).x,
+                            y: mouseReverse(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/banner/icon-2.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                    <motion.li
+                        className='shape-2 scene'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/banner/icon-1.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default EventArea;
diff --git a/src/components/homes/home-kindergarten/faq-area.jsx b/src/components/homes/home-kindergarten/faq-area.jsx
deleted file mode 100644
index a9ddd23..0000000
--- a/src/components/homes/home-kindergarten/faq-area.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const accordion_items = [
-    {
-        id: 'collapseOne', 
-        show: true, 
-        title: 'How can I contact a school directly?',
-        style:'style-extra02',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    },
-    {
-        id: 'collapseTwo', 
-        show: false,
-        title: 'How do I find a school where I want to study?',
-        style:'style-extra05',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    },
-    {
-        id: 'collapseThree', 
-        show: false, 
-        title: 'Where should I study abroad?',
-        style:'style-primary',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    }
-];
-
-const FaqArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-faq-area faq-style-4">
-            <div className="container">
-                <div className="row g-5 row--45 align-items-end">
-                    <div className="col-lg-6">
-                        <div className="edu-faq-content">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title pre-textsecondary">Education For Everyone</span>
-                                <h2 className="title">Ages We Meet Kids Where They Are</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                            </div>
-                            <div className="faq-accordion" id="faq-accordion" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <div className="accordion">
-                                    {accordion_items.map((item, i) => {
-                                        const { desc, id, show, title,style } = item;
-                                        return (
-                                            <div key={i} className="accordion-item">
-                                                <h5 className="accordion-header">
-                                                    <button className={`accordion-button ${show ? '' : 'collapsed'} ${style}`} type="button" data-bs-toggle="collapse" data-bs-target={`#${id}`} aria-expanded={show ? 'true' : 'false'}>
-                                                        {title}
-                                                    </button>
-                                                </h5>
-                                                <div id={id} className={`accordion-collapse collapse ${show ? 'show' : ''}`} data-bs-parent="#faq-accordion">
-                                                    <div className="accordion-body">
-                                                        <p>{desc}</p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        )
-                                    })}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-6">
-                        <div className="faq-thumbnail">
-                            <div className="thumbnail">
-                                <img src="/assets/images/faq/faq-08.webp" alt="Faq Images"/>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene"
-                                    animate={ {
-                                        x: mouseReverse(35).x,
-                                        y: mouseReverse(35).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-12.png" alt="Shape Images"/>
-                                </motion.li>
-                                <motion.li className="shape-2 scene"
-                                    animate={ {
-                                        x: mouseDirection(40).x,
-                                        y: mouseDirection(40).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape Images"/>
-                                </motion.li>
-                                <motion.li className="shape-3 scene"
-                                    animate={ {
-                                        x: mouseReverse(35).x,
-                                        y: mouseReverse(35).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-15.png" alt="Shape Images"/>
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default FaqArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kindergarten/faq-area.tsx b/src/components/homes/home-kindergarten/faq-area.tsx
new file mode 100644
index 0000000..65e6625
--- /dev/null
+++ b/src/components/homes/home-kindergarten/faq-area.tsx
@@ -0,0 +1,161 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const accordion_items = [
+    {
+        id: 'collapseOne',
+        show: true,
+        title: 'How can I contact a school directly?',
+        style: 'style-extra02',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+    {
+        id: 'collapseTwo',
+        show: false,
+        title: 'How do I find a school where I want to study?',
+        style: 'style-extra05',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+    {
+        id: 'collapseThree',
+        show: false,
+        title: 'Where should I study abroad?',
+        style: 'style-primary',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+];
+
+const FaqArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-faq-area faq-style-4'>
+            <div className='container'>
+                <div className='row g-5 row--45 align-items-end'>
+                    <div className='col-lg-6'>
+                        <div className='edu-faq-content'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title pre-textsecondary'>
+                                    Education For Everyone
+                                </span>
+                                <h2 className='title'>
+                                    Ages We Meet Kids Where They Are
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                            </div>
+                            <div
+                                className='faq-accordion'
+                                id='faq-accordion'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='accordion'>
+                                    {accordion_items.map((item, i) => {
+                                        const { desc, id, show, title, style } = item;
+                                        return (
+                                            <div key={i} className='accordion-item'>
+                                                <h5 className='accordion-header'>
+                                                    <button
+                                                        className={`accordion-button ${
+                                                            show ? '' : 'collapsed'
+                                                        } ${style}`}
+                                                        type='button'
+                                                        data-bs-toggle='collapse'
+                                                        data-bs-target={`#${id}`}
+                                                        aria-expanded={
+                                                            show ? 'true' : 'false'
+                                                        }
+                                                    >
+                                                        {title}
+                                                    </button>
+                                                </h5>
+                                                <div
+                                                    id={id}
+                                                    className={`accordion-collapse collapse ${
+                                                        show ? 'show' : ''
+                                                    }`}
+                                                    data-bs-parent='#faq-accordion'
+                                                >
+                                                    <div className='accordion-body'>
+                                                        <p>{desc}</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='col-lg-6'>
+                        <div className='faq-thumbnail'>
+                            <div className='thumbnail'>
+                                <picture>
+                                    <img
+                                        src='/assets/images/faq/faq-08.webp'
+                                        alt='Faq Images'
+                                    />
+                                </picture>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    animate={{
+                                        x: mouseReverse(35).x,
+                                        y: mouseReverse(35).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-12.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    animate={{
+                                        x: mouseDirection(40).x,
+                                        y: mouseDirection(40).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    animate={{
+                                        x: mouseReverse(35).x,
+                                        y: mouseReverse(35).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-15.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FaqArea;
diff --git a/src/components/homes/home-kindergarten/hero-area.jsx b/src/components/homes/home-kindergarten/hero-area.jsx
deleted file mode 100644
index d615a5a..0000000
--- a/src/components/homes/home-kindergarten/hero-area.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import { Certificate, Instructor, OnlineClass } from '../../../svg';
-
-function FeatureBox({ color, icon, content }) {
-    return (
-        <div className={`features-box ${color} edublink-svg-animate`}>
-            <div className="icon">
-                {icon}
-            </div>
-            <div className="content">
-                <h5 className="title">{content}</h5>
-            </div>
-        </div>
-    )
-}
-
-const HeroArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="hero-banner hero-style-7">
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-lg-8">
-                        <div className="banner-content">
-                            <h1 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">A Brighter Future For Kids</h1>
-                            <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.</p>
-                            <div className="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <Link href="/course-style-1" className="edu-btn btn-curved">
-                                    Find courses<i className="icon-4"></i>
-                                </Link>
-                            </div>
-                            <div className="features-list" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <FeatureBox color={'color-extra02-style'} icon={<OnlineClass />} content={<>3,020 <br />Online Courses</>} />
-                                <FeatureBox color={'color-secondary-style'} icon={<Instructor />} content={<>Top <br />Instructors</>} />
-                                <FeatureBox color={'color-primary-style'} icon={<Certificate />} content={<>Online <br /> Certificates</>} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div className="banner-gallery">
-                <div className="thumbnail thumbnail-1" data-sal-delay="500" data-sal="slide-up" data-sal-duration="1000">
-                    <img src="/assets/images/banner/kid-3.webp" alt="Girl Image" />
-                </div>
-                <div className="thumbnail thumbnail-2" data-sal-delay="500" data-sal="slide-down" data-sal-duration="1000">
-                    <img src="/assets/images/banner/kid-4.webp" alt="Girl Image" />
-                </div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/banner/icon-3.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/banner/icon-1.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/banner/icon-5.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-4 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/banner/icon-2.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-5 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/banner/icon-4.png" alt="Shape" />
-                </motion.li>
-                <li className="shape-6" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                    <img className="rotateit" src="/assets/images/about/shape-25.png" alt="Shape" />
-                </li>
-                <li className="shape-7" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                    <img className="rotateit" src="/assets/images/about/shape-13.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    );
-}
-
-export default HeroArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kindergarten/hero-area.tsx b/src/components/homes/home-kindergarten/hero-area.tsx
new file mode 100644
index 0000000..f22004e
--- /dev/null
+++ b/src/components/homes/home-kindergarten/hero-area.tsx
@@ -0,0 +1,222 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import { Certificate, Instructor, OnlineClass } from '../../../svg';
+
+function FeatureBox({ color, icon, content }) {
+    return (
+        <div className={`features-box ${color} edublink-svg-animate`}>
+            <div className='icon'>{icon}</div>
+            <div className='content'>
+                <h5 className='title'>{content}</h5>
+            </div>
+        </div>
+    );
+}
+
+const HeroArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='hero-banner hero-style-7'>
+            <div className='container'>
+                <div className='row justify-content-center'>
+                    <div className='col-lg-8'>
+                        <div className='banner-content'>
+                            <h1
+                                className='title'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                A Brighter Future For Kids
+                            </h1>
+                            <p
+                                data-sal-delay='200'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit.
+                            </p>
+                            <div
+                                className='banner-btn'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <Link
+                                    href='/course-style-1'
+                                    className='edu-btn btn-curved'
+                                >
+                                    Find courses<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                            <div
+                                className='features-list'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <FeatureBox
+                                    color={'color-extra02-style'}
+                                    icon={<OnlineClass />}
+                                    content={
+                                        <>
+                                            3,020 <br />
+                                            Online Courses
+                                        </>
+                                    }
+                                />
+                                <FeatureBox
+                                    color={'color-secondary-style'}
+                                    icon={<Instructor />}
+                                    content={
+                                        <>
+                                            Top <br />
+                                            Instructors
+                                        </>
+                                    }
+                                />
+                                <FeatureBox
+                                    color={'color-primary-style'}
+                                    icon={<Certificate />}
+                                    content={
+                                        <>
+                                            Online <br /> Certificates
+                                        </>
+                                    }
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className='banner-gallery'>
+                <div
+                    className='thumbnail thumbnail-1'
+                    data-sal-delay='500'
+                    data-sal='slide-up'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img src='/assets/images/banner/kid-3.webp' alt='Girl Image' />
+                    </picture>
+                </div>
+                <div
+                    className='thumbnail thumbnail-2'
+                    data-sal-delay='500'
+                    data-sal='slide-down'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img src='/assets/images/banner/kid-4.webp' alt='Girl Image' />
+                    </picture>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/banner/icon-3.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/banner/icon-1.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/banner/icon-5.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-4 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/banner/icon-2.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-5 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/banner/icon-4.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <li
+                    className='shape-6'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img
+                            className='rotateit'
+                            src='/assets/images/about/shape-25.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+                <li
+                    className='shape-7'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img
+                            className='rotateit'
+                            src='/assets/images/about/shape-13.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default HeroArea;
diff --git a/src/components/homes/home-kindergarten/index.jsx b/src/components/homes/home-kindergarten/index.tsx
similarity index 55%
rename from src/components/homes/home-kindergarten/index.jsx
rename to src/components/homes/home-kindergarten/index.tsx
index 1983c10..1ed7354 100644
--- a/src/components/homes/home-kindergarten/index.jsx
+++ b/src/components/homes/home-kindergarten/index.tsx
@@ -12,20 +12,20 @@ import HeroArea from './hero-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
-                <HeaderThree/>
-                <HeroArea/>
-                <AboutArea/>
-                <CoursesArea/>
-                <CategoryArea/>
-                <FaqArea/>
-                <EventArea/>
-                <BlogArea/>
-                <AdBanner/>
-                <FooterThree/>
+            <div id='main-wrapper' className='main-wrapper'>
+                <HeaderThree />
+                <HeroArea />
+                <AboutArea />
+                <CoursesArea />
+                <CategoryArea />
+                <FaqArea />
+                <EventArea />
+                <BlogArea />
+                <AdBanner />
+                <FooterThree />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home-kitchen/about-area.jsx b/src/components/homes/home-kitchen/about-area.jsx
deleted file mode 100644
index 63b60b9..0000000
--- a/src/components/homes/home-kitchen/about-area.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const lists = [
-    'Cooking award achived', 
-    'Available online courses', 
-    'Online Certification'
-];
-
-const AboutArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-section-gap edu-about-area about-style-4">
-            <div className="container">
-                <div className="row g-5 align-items-center">
-                    <div className="col-lg-6">
-                        <div className="about-image-gallery">
-                            <div className="main-img-1" data-sal-delay="50" data-sal="slide-right" data-sal-duration="800">
-                                <img src="/assets/images/about/about-06.webp" alt="About Image" />
-                            </div>
-                            <img className="main-img-2" src="/assets/images/about/about-07.webp" alt="About Image" data-sal-delay="60" data-sal="slide-up" data-sal-duration="900" />
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-39.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-07.png" alt="Shape" />
-                                </motion.li>
-                                <li className="shape-4" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                                    <span></span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-6" data-sal-delay="50" data-sal="slide-up" data-sal-duration="800">
-                        <div className="about-content">
-                            <div className="section-title section-left">
-                                <span className="pre-title">About Us</span>
-                                <h2 className="title">Welcome To Professional Kitchen Coach Courses</h2>
-                                <span className="shape-line">
-                                    <i className="icon-19"></i>
-                                </span>
-                                <p>Magna aliquaenim minim veniam quis nostrud exercitation ullamco laborisLorem ipsum dolor sit amet consectetur adipisicing elit sed do eius tempor incididunt labore.</p>
-                            </div>
-                            <ul className="features-list"> {lists.map((l, i) => <li key={i}>{l}</li>)} </ul>
-                            <Link href="/about-1" className="edu-btn">
-                                Get Start Today<i className="icon-4"></i>
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default AboutArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kitchen/about-area.tsx b/src/components/homes/home-kitchen/about-area.tsx
new file mode 100644
index 0000000..389a61c
--- /dev/null
+++ b/src/components/homes/home-kitchen/about-area.tsx
@@ -0,0 +1,145 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const lists = [
+    'Cooking award achived',
+    'Available online courses',
+    'Online Certification',
+];
+
+const AboutArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-section-gap edu-about-area about-style-4'>
+            <div className='container'>
+                <div className='row g-5 align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='about-image-gallery'>
+                            <div
+                                className='main-img-1'
+                                data-sal-delay='50'
+                                data-sal='slide-right'
+                                data-sal-duration='800'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/about/about-06.webp'
+                                        alt='About Image'
+                                    />
+                                </picture>
+                            </div>
+                            <picture>
+                                <img
+                                    className='main-img-2'
+                                    src='/assets/images/about/about-07.webp'
+                                    alt='About Image'
+                                    data-sal-delay='60'
+                                    data-sal='slide-up'
+                                    data-sal-duration='900'
+                                />
+                            </picture>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-39.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-07.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <li
+                                    className='shape-4'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                >
+                                    <span></span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div
+                        className='col-lg-6'
+                        data-sal-delay='50'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='about-content'>
+                            <div className='section-title section-left'>
+                                <span className='pre-title'>About Us</span>
+                                <h2 className='title'>
+                                    Welcome To Professional Kitchen Coach Courses
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>
+                                    Magna aliquaenim minim veniam quis nostrud
+                                    exercitation ullamco laborisLorem ipsum dolor sit amet
+                                    consectetur adipisicing elit sed do eius tempor
+                                    incididunt labore.
+                                </p>
+                            </div>
+                            <ul className='features-list'>
+                                {' '}
+                                {lists.map((l, i) => (
+                                    <li key={i}>{l}</li>
+                                ))}{' '}
+                            </ul>
+                            <Link href='/about-1' className='edu-btn'>
+                                Get Start Today<i className='icon-4'></i>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AboutArea;
diff --git a/src/components/homes/home-kitchen/ad-banner.jsx b/src/components/homes/home-kitchen/ad-banner.jsx
deleted file mode 100644
index dd63eaa..0000000
--- a/src/components/homes/home-kitchen/ad-banner.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const AdBanner = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-cta-banner-area cta-banner-2">
-            <div className="container">
-                <div className="edu-cta-banner">
-                    <div className="row justify-content-center">
-                        <div className="col-lg-9">
-                            <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <h2 className="title">Register To Get Quality Kitchen <span className="color-primary">Courses</span> Through EduBlink</h2>
-                                <Link href="/contact-us" className="edu-btn">
-                                    Get started now<i className="icon-4"></i>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-05.png" alt="shape" />
-                </motion.li>
-                <motion.li className="shape-2 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-04.png" alt="shape" />
-                </motion.li>
-                <motion.li className="shape-3 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-02.png" alt="shape" />
-                </motion.li>
-                <motion.li className="shape-4 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-01.png" alt="shape" />
-                </motion.li>
-                <li className="shape-5 shape-light" data-sal-delay="100" data-sal="fade" data-sal-duration="1000">
-                    <img src="/assets/images/others/map-shape-3.png" alt="shape" />
-                </li>
-                <li className="shape-5 shape-dark" data-sal-delay="100" data-sal="fade" data-sal-duration="1000">
-                    <img src="/assets/images/others/dark-map-shape.png" alt="shape" />
-                </li>
-            </ul>
-        </div>
-    );
-}
-
-export default AdBanner;
\ No newline at end of file
diff --git a/src/components/homes/home-kitchen/ad-banner.tsx b/src/components/homes/home-kitchen/ad-banner.tsx
new file mode 100644
index 0000000..5bfa4e4
--- /dev/null
+++ b/src/components/homes/home-kitchen/ad-banner.tsx
@@ -0,0 +1,115 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const AdBanner = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-cta-banner-area cta-banner-2'>
+            <div className='container'>
+                <div className='edu-cta-banner'>
+                    <div className='row justify-content-center'>
+                        <div className='col-lg-9'>
+                            <div
+                                className='section-title section-center'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <h2 className='title'>
+                                    Register To Get Quality Kitchen{' '}
+                                    <span className='color-primary'>Courses</span> Through
+                                    EduBlink
+                                </h2>
+                                <Link href='/contact-us' className='edu-btn'>
+                                    Get started now<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-05.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-04.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-02.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-4 scene'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-01.png' alt='shape' />
+                    </picture>
+                </motion.li>
+                <li
+                    className='shape-5 shape-light'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img src='/assets/images/others/map-shape-3.png' alt='shape' />
+                    </picture>
+                </li>
+                <li
+                    className='shape-5 shape-dark'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img src='/assets/images/others/dark-map-shape.png' alt='shape' />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default AdBanner;
diff --git a/src/components/homes/home-kitchen/blog-area.jsx b/src/components/homes/home-kitchen/blog-area.jsx
deleted file mode 100644
index 196ee90..0000000
--- a/src/components/homes/home-kitchen/blog-area.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import Link from 'next/link';
-import { blog_data } from '../../../data';
-
-const BlogArea = () => {
-    const blog_items = blog_data.filter(blog => blog.kitchen);
-    return (
-        <div className="edu-blog-area blog-area-1 edu-section-gap 3333">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Latest Articles</span>
-                    <h2 className="title">Get News with EduBlink</h2>
-                    <span className="shape-line">
-                        <i className="icon-19"></i>
-                    </span>
-                </div>
-
-                <div className="row g-5"> 
-                    {blog_items.map((blog, i) => { 
-                        const { id, img, comment, category, date, sm_desc, title } = blog; 
-                        return (
-                            <div key={id} className="col-lg-4 col-md-6 col-12" data-sal-delay={`${i + 1}00`} data-sal="slide-up" data-sal-duration="800">
-                                <div className="edu-blog blog-style-1">
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            <Link href={`/blog-details/${id}`}>
-
-                                                <img src={img} alt="Blog Images" />
-
-                                            </Link>
-                                        </div>
-                                        <div className="content position-top">
-                                            <div className="read-more-btn">
-                                                <Link href={`/blog-details/${id}`} className="btn-icon-round">
-
-                                                    <i className="icon-4"></i>
-
-                                                </Link>
-                                            </div>
-                                            <div className="category-wrap">
-                                                <Link href={`/blog-details/${id}`} className="blog-category">
-                                                {category}
-                                                </Link>
-                                            </div>
-                                            <h5 className="title">
-                                                <Link href={`/blog-details/${id}`}>
-                                                    {title}...
-                                                </Link>
-                                            </h5>
-                                            <ul className="blog-meta">
-                                                <li>
-                                                    <i className="icon-27"></i>{date}
-                                                </li>
-                                                <li>
-                                                    <i className="icon-28"></i>Com {comment}
-                                                </li>
-                                            </ul>
-                                            <p>{sm_desc}</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })} 
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default BlogArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kitchen/blog-area.tsx b/src/components/homes/home-kitchen/blog-area.tsx
new file mode 100644
index 0000000..8781d04
--- /dev/null
+++ b/src/components/homes/home-kitchen/blog-area.tsx
@@ -0,0 +1,87 @@
+import Link from 'next/link';
+import { blog_data } from '../../../data';
+
+const BlogArea = () => {
+    const blog_items = blog_data.filter(blog => blog.kitchen);
+    return (
+        <div className='edu-blog-area blog-area-1 edu-section-gap 3333'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='100'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Latest Articles</span>
+                    <h2 className='title'>Get News with EduBlink</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {blog_items.map((blog, i) => {
+                        const { id, img, comment, category, date, sm_desc, title } = blog;
+                        return (
+                            <div
+                                key={id}
+                                className='col-lg-4 col-md-6 col-12'
+                                data-sal-delay={`${i + 1}00`}
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='edu-blog blog-style-1'>
+                                    <div className='inner'>
+                                        <div className='thumbnail'>
+                                            <Link href={`/blog-details/${id}`}>
+                                                <picture>
+                                                    <img src={img} alt='Blog Images' />
+                                                </picture>
+                                            </Link>
+                                        </div>
+                                        <div className='content position-top'>
+                                            <div className='read-more-btn'>
+                                                <Link
+                                                    href={`/blog-details/${id}`}
+                                                    className='btn-icon-round'
+                                                >
+                                                    <i className='icon-4'></i>
+                                                </Link>
+                                            </div>
+                                            <div className='category-wrap'>
+                                                <Link
+                                                    href={`/blog-details/${id}`}
+                                                    className='blog-category'
+                                                >
+                                                    {category}
+                                                </Link>
+                                            </div>
+                                            <h5 className='title'>
+                                                <Link href={`/blog-details/${id}`}>
+                                                    {title}...
+                                                </Link>
+                                            </h5>
+                                            <ul className='blog-meta'>
+                                                <li>
+                                                    <i className='icon-27'></i>
+                                                    {date}
+                                                </li>
+                                                <li>
+                                                    <i className='icon-28'></i>
+                                                    Com {comment}
+                                                </li>
+                                            </ul>
+                                            <p>{sm_desc}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BlogArea;
diff --git a/src/components/homes/home-kitchen/brand-area.jsx b/src/components/homes/home-kitchen/brand-area.jsx
deleted file mode 100644
index 4529501..0000000
--- a/src/components/homes/home-kitchen/brand-area.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-function Brand({ img }) {
-    return (
-        <div className="brand-grid" data-sal-delay="450" data-sal="slide-up" data-sal-duration="1000">
-            <img src={`/assets/images/brand/brand-${img}.png`} alt="Brand Logo" />
-        </div>
-    )
-}
-
-const BrandArea = () => {
-    return (
-        <div className="edu-brand-area brand-area-3">
-            <div className="container">
-                <div className="brand-grid-wrap brand-style-3">
-                    <Brand img={'09'} />
-                    <Brand img={'10'} />
-                    <Brand img={'11'} />
-                    <Brand img={'12'} />
-                    <Brand img={'13'} />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default BrandArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kitchen/brand-area.tsx b/src/components/homes/home-kitchen/brand-area.tsx
new file mode 100644
index 0000000..72562f5
--- /dev/null
+++ b/src/components/homes/home-kitchen/brand-area.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+function Brand({ img }) {
+    return (
+        <div
+            className='brand-grid'
+            data-sal-delay='450'
+            data-sal='slide-up'
+            data-sal-duration='1000'
+        >
+            <picture>
+                <img src={`/assets/images/brand/brand-${img}.png`} alt='Brand Logo' />
+            </picture>
+        </div>
+    );
+}
+
+const BrandArea = () => {
+    return (
+        <div className='edu-brand-area brand-area-3'>
+            <div className='container'>
+                <div className='brand-grid-wrap brand-style-3'>
+                    <Brand img={'09'} />
+                    <Brand img={'10'} />
+                    <Brand img={'11'} />
+                    <Brand img={'12'} />
+                    <Brand img={'13'} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BrandArea;
diff --git a/src/components/homes/home-kitchen/category-area.jsx b/src/components/homes/home-kitchen/category-area.jsx
deleted file mode 100644
index 46884fa..0000000
--- a/src/components/homes/home-kitchen/category-area.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { CertificateTwo, HybridDistanceProgramsTwo, SkilledLecturersTwo, UserTwo } from '../../../svg';
-
-const CategoryArea = () => {
-    return (
-        <div className="features-area-1 gap-top-equal">
-            <div className="container">
-                <div className="row g-5">
-                    <FeatureBox delay={'50'} color={'color-primary-style'} icon={<SkilledLecturersTwo />}
-                    title={<><span>Skilled </span>Lecturers</>} text={'Lorem ipsum dolor consec tur elit adicing sed umod tempor.'} />
-
-                    <FeatureBox delay={'100'} color={'color-secondary-style'} icon={<HybridDistanceProgramsTwo />}
-                    title={<><span>Distance</span> Programs</>} text={'Lorem ipsum dolor consec tur elit adicing sed umod tempor.'} />
-
-                    <FeatureBox delay={'150'} color={'color-extra08-style'} icon={<CertificateTwo />}
-                    title={<><span>Online</span>Certifications</>} text={'Lorem ipsum dolor consec tur elit adicing sed umod tempor.'} />
-                    
-                    <FeatureBox delay={'150'} color={'color-extra05-style'} icon={<UserTwo />}
-                    title={<><span>6000</span>Members</>} text={'Lorem ipsum dolor consec tur elit adicing sed umod tempor.'} />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CategoryArea;
-
-const FeatureBox = ({ delay, icon, color, title, text }) => {
-    return (
-        <div className="col-lg-3" data-sal-delay={delay} data-sal="slide-up" data-sal-duration="800">
-            <div className={`features-box ${color} edublink-svg-animate`}>
-                <div className="icon">
-                    {icon}
-                </div>
-                <div className="content">
-                    <h5 className="title">{title}</h5>
-                    <p>{text}</p>
-                </div>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/homes/home-kitchen/category-area.tsx b/src/components/homes/home-kitchen/category-area.tsx
new file mode 100644
index 0000000..0dafa20
--- /dev/null
+++ b/src/components/homes/home-kitchen/category-area.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+    CertificateTwo,
+    HybridDistanceProgramsTwo,
+    SkilledLecturersTwo,
+    UserTwo,
+} from '../../../svg';
+
+const CategoryArea = () => {
+    return (
+        <div className='features-area-1 gap-top-equal'>
+            <div className='container'>
+                <div className='row g-5'>
+                    <FeatureBox
+                        delay={'50'}
+                        color={'color-primary-style'}
+                        icon={<SkilledLecturersTwo />}
+                        title={
+                            <>
+                                <span>Skilled </span>Lecturers
+                            </>
+                        }
+                        text={
+                            'Lorem ipsum dolor consec tur elit adicing sed umod tempor.'
+                        }
+                    />
+
+                    <FeatureBox
+                        delay={'100'}
+                        color={'color-secondary-style'}
+                        icon={<HybridDistanceProgramsTwo />}
+                        title={
+                            <>
+                                <span>Distance</span> Programs
+                            </>
+                        }
+                        text={
+                            'Lorem ipsum dolor consec tur elit adicing sed umod tempor.'
+                        }
+                    />
+
+                    <FeatureBox
+                        delay={'150'}
+                        color={'color-extra08-style'}
+                        icon={<CertificateTwo />}
+                        title={
+                            <>
+                                <span>Online</span>Certifications
+                            </>
+                        }
+                        text={
+                            'Lorem ipsum dolor consec tur elit adicing sed umod tempor.'
+                        }
+                    />
+
+                    <FeatureBox
+                        delay={'150'}
+                        color={'color-extra05-style'}
+                        icon={<UserTwo />}
+                        title={
+                            <>
+                                <span>6000</span>Members
+                            </>
+                        }
+                        text={
+                            'Lorem ipsum dolor consec tur elit adicing sed umod tempor.'
+                        }
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CategoryArea;
+
+const FeatureBox = ({ delay, icon, color, title, text }) => {
+    return (
+        <div
+            className='col-lg-3'
+            data-sal-delay={delay}
+            data-sal='slide-up'
+            data-sal-duration='800'
+        >
+            <div className={`features-box ${color} edublink-svg-animate`}>
+                <div className='icon'>{icon}</div>
+                <div className='content'>
+                    <h5 className='title'>{title}</h5>
+                    <p>{text}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/homes/home-kitchen/counter-area.jsx b/src/components/homes/home-kitchen/counter-area.tsx
similarity index 54%
rename from src/components/homes/home-kitchen/counter-area.jsx
rename to src/components/homes/home-kitchen/counter-area.tsx
index b993d12..0d35940 100644
--- a/src/components/homes/home-kitchen/counter-area.jsx
+++ b/src/components/homes/home-kitchen/counter-area.tsx
@@ -8,7 +8,7 @@ const counter_data = [
         count: 29.3,
         text: 'K',
         title: 'Student Enrolled',
-        decimal: 1
+        decimal: 1,
     },
     {
         color: 'secondary-color',
@@ -16,48 +16,52 @@ const counter_data = [
         count: 32.4,
         text: 'K',
         title: 'Class Completed',
-        decimal: 1
+        decimal: 1,
     },
     {
         color: 'extra08-color',
         icon: 'icon-49',
         count: 100,
         text: '%',
-        title: 'Satisfaction Rate'
+        title: 'Satisfaction Rate',
     },
     {
         color: 'extra05-color',
         icon: 'icon-50',
         count: 354,
         text: '+',
-        title: 'Top Instructors'
-    }
+        title: 'Top Instructors',
+    },
 ];
 
 const CounterArea = () => {
     return (
-        <div className="counterup-area-4">
-            <div className="container">
-                <div className="row g-5">
+        <div className='counterup-area-4'>
+            <div className='container'>
+                <div className='row g-5'>
                     {counter_data.map((c, i) => (
-                        <div key={i} className="col-lg-3 col-sm-6">
-                            <div className="edu-counterup counterup-style-4">
+                        <div key={i} className='col-lg-3 col-sm-6'>
+                            <div className='edu-counterup counterup-style-4'>
                                 <div className={`icon ${c.color}`}>
                                     <i className={c.icon}></i>
                                 </div>
-                                <h2 className="counter-item count-number">
-                                    <span className="odometer">
-                                        <Counter number={parseFloat(c.count)} text={c.text} decimal={c.decimal} />
+                                <h2 className='counter-item count-number'>
+                                    <span className='odometer'>
+                                        <Counter
+                                            number={c.count}
+                                            text={c.text}
+                                            decimal={c.decimal}
+                                        />
                                     </span>
                                 </h2>
-                                <h6 className="title">{c.title}</h6>
+                                <h6 className='title'>{c.title}</h6>
                             </div>
                         </div>
                     ))}
                 </div>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default CounterArea;
\ No newline at end of file
+export default CounterArea;
diff --git a/src/components/homes/home-kitchen/courses-area.jsx b/src/components/homes/home-kitchen/courses-area.jsx
deleted file mode 100644
index b2584df..0000000
--- a/src/components/homes/home-kitchen/courses-area.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { course_data } from '../../../data';
-import CourseTypeFour from '../../course/course-type-four';
-
-const courses = course_data.filter(course => course.kitchen_course);
-
-const CoursesArea = () => {
-    return (
-        <div className="edu-course-area course-area-5 gap-tb-text">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Popular Courses</span>
-                    <h2 className="title">Pick A Course To Get Started</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    {courses.slice(0,3).map((course, key) => {
-                        return (
-                            <div 
-                                key={course.id} 
-                                data-sal-delay="150" 
-                                data-sal="slide-up" 
-                                data-sal-duration="800"
-                                className={ `col-12 col-xl-4 col-lg-6 col-md-6 
-                                    ${ ( key+1 ) % 3 === 0 && key !== 0 ? 'course-style-3-third-item' : '' } 
-                                    ${ ( key+1 ) % 2 === 0 && key !== 0 ? 'course-style-3-even' : 'course-style-3-odd' }` 
-                                }
-                            >
-                                <CourseTypeFour data={course} />   
-                            </div>
-                        )
-                    })}
-                </div>
-                <div className="course-view-all" data-sal-delay="150" data-sal="slide-up" data-sal-duration="1200">
-                    <h5 className="view-text">Get the Most Dedicated Kitchen Course from EduBlink. 
-                    <Link href="/course-style-1" className="btn-transparent">
-                        All Courses<i className="icon-4"></i>
-                    </Link>
-                    </h5>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default CoursesArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kitchen/courses-area.tsx b/src/components/homes/home-kitchen/courses-area.tsx
new file mode 100644
index 0000000..9b7acb3
--- /dev/null
+++ b/src/components/homes/home-kitchen/courses-area.tsx
@@ -0,0 +1,68 @@
+import Link from 'next/link';
+import React from 'react';
+import { course_data } from '../../../data';
+import CourseTypeFour from '../../course/course-type-four';
+
+const courses = course_data.filter(course => course.kitchen_course);
+
+const CoursesArea = () => {
+    return (
+        <div className='edu-course-area course-area-5 gap-tb-text'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Popular Courses</span>
+                    <h2 className='title'>Pick A Course To Get Started</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {courses.slice(0, 3).map((course, key) => {
+                        return (
+                            <div
+                                key={course.id}
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                                className={`col-12 col-xl-4 col-lg-6 col-md-6 
+                                    ${
+                                        (key + 1) % 3 === 0 && key !== 0
+                                            ? 'course-style-3-third-item'
+                                            : ''
+                                    } 
+                                    ${
+                                        (key + 1) % 2 === 0 && key !== 0
+                                            ? 'course-style-3-even'
+                                            : 'course-style-3-odd'
+                                    }`}
+                            >
+                                <CourseTypeFour data={course} />
+                            </div>
+                        );
+                    })}
+                </div>
+                <div
+                    className='course-view-all'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='1200'
+                >
+                    <h5 className='view-text'>
+                        Get the Most Dedicated Kitchen Course from EduBlink.
+                        <Link href='/course-style-1' className='btn-transparent'>
+                            All Courses<i className='icon-4'></i>
+                        </Link>
+                    </h5>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CoursesArea;
diff --git a/src/components/homes/home-kitchen/faq-area.jsx b/src/components/homes/home-kitchen/faq-area.jsx
deleted file mode 100644
index e45432e..0000000
--- a/src/components/homes/home-kitchen/faq-area.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const contents = {
-    pre_title: 'FAq’s',
-    title: 'Frequently Asked Questions.',
-    faq_img: "/assets/images/faq/faq-07.jpg",
-    accordion_items: [
-        {
-            id: 'collapseOne', show: true, title: 'How can I contact a school directly?',
-            desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-        },
-        {
-            id: 'collapseTwo', show: false, title: 'How do I find a school where I want to study?',
-            desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-        },
-        {
-            id: 'collapseThree', show: false, title: 'Where should I study abroad?',
-            desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-        }
-    ]
-}
-
-const { pre_title, title, accordion_items, faq_img } = contents;
-
-const FaqArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-faq-area faq-style-3 gap-bottom-equal">
-            <div className="container">
-                <div className="row g-5 row--45">
-                    <div className="col-lg-6" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                        <div className="edu-faq-content">
-                            <div className="section-title section-left">
-                                <span className="pre-title">{pre_title}</span>
-                                <h2 className="title">{title}</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                            </div>
-                            <div className="faq-accordion" id="faq-accordion">
-                                <div className="accordion">
-                                    {accordion_items.map((item, i) => {
-                                        const { desc, id, show, title } = item;
-                                        return (
-                                            <div key={i} className="accordion-item">
-                                                <h5 className="accordion-header">
-                                                    <button className={`accordion-button ${show ? '' : 'collapsed'}`} type="button" data-bs-toggle="collapse" data-bs-target={`#${id}`} aria-expanded={show ? 'true' : 'false'}>
-                                                        {title}
-                                                    </button>
-                                                </h5>
-                                                <div id={id} className={`accordion-collapse collapse ${show ? 'show' : ''}`} data-bs-parent="#faq-accordion">
-                                                    <div className="accordion-body">
-                                                        <p>{desc}</p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        )
-                                    })}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-6">
-                        <div className="edu-faq-gallery">
-                            <div className="faq-thumbnail thumbnail-1" data-sal-delay="50" data-sal="slide-left" data-sal-duration="800">
-                                <img src={faq_img} alt="Faq Images" />
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-12.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-04.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-10.png" alt="Shape Images" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default FaqArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kitchen/faq-area.tsx b/src/components/homes/home-kitchen/faq-area.tsx
new file mode 100644
index 0000000..5dd1bfa
--- /dev/null
+++ b/src/components/homes/home-kitchen/faq-area.tsx
@@ -0,0 +1,166 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const contents = {
+    pre_title: 'FAq’s',
+    title: 'Frequently Asked Questions.',
+    faq_img: '/assets/images/faq/faq-07.jpg',
+    accordion_items: [
+        {
+            id: 'collapseOne',
+            show: true,
+            title: 'How can I contact a school directly?',
+            desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+        },
+        {
+            id: 'collapseTwo',
+            show: false,
+            title: 'How do I find a school where I want to study?',
+            desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+        },
+        {
+            id: 'collapseThree',
+            show: false,
+            title: 'Where should I study abroad?',
+            desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+        },
+    ],
+};
+
+const { pre_title, title, accordion_items, faq_img } = contents;
+
+const FaqArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-faq-area faq-style-3 gap-bottom-equal'>
+            <div className='container'>
+                <div className='row g-5 row--45'>
+                    <div
+                        className='col-lg-6'
+                        data-sal-delay='150'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='edu-faq-content'>
+                            <div className='section-title section-left'>
+                                <span className='pre-title'>{pre_title}</span>
+                                <h2 className='title'>{title}</h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                            </div>
+                            <div className='faq-accordion' id='faq-accordion'>
+                                <div className='accordion'>
+                                    {accordion_items.map((item, i) => {
+                                        const { desc, id, show, title } = item;
+                                        return (
+                                            <div key={i} className='accordion-item'>
+                                                <h5 className='accordion-header'>
+                                                    <button
+                                                        className={`accordion-button ${
+                                                            show ? '' : 'collapsed'
+                                                        }`}
+                                                        type='button'
+                                                        data-bs-toggle='collapse'
+                                                        data-bs-target={`#${id}`}
+                                                        aria-expanded={
+                                                            show ? 'true' : 'false'
+                                                        }
+                                                    >
+                                                        {title}
+                                                    </button>
+                                                </h5>
+                                                <div
+                                                    id={id}
+                                                    className={`accordion-collapse collapse ${
+                                                        show ? 'show' : ''
+                                                    }`}
+                                                    data-bs-parent='#faq-accordion'
+                                                >
+                                                    <div className='accordion-body'>
+                                                        <p>{desc}</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='col-lg-6'>
+                        <div className='edu-faq-gallery'>
+                            <div
+                                className='faq-thumbnail thumbnail-1'
+                                data-sal-delay='50'
+                                data-sal='slide-left'
+                                data-sal-duration='800'
+                            >
+                                <picture>
+                                    <img src={faq_img} alt='Faq Images' />
+                                </picture>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-12.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-04.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-10.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FaqArea;
diff --git a/src/components/homes/home-kitchen/hero-area.jsx b/src/components/homes/home-kitchen/hero-area.jsx
deleted file mode 100644
index ab39551..0000000
--- a/src/components/homes/home-kitchen/hero-area.jsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const HeroArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="hero-banner hero-style-5">
-            <div className="container">
-                <div className="row align-items-center">
-                    <div className="col-lg-6">
-                        <div className="banner-content">
-                            <h1 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Take Your Cooking Skill To The Next Level</h1>
-                            <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.</p>
-                            <div className="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <Link href="/course-style-1" className="edu-btn">
-                                    Find courses<i className="icon-4"></i>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="banner-thumbnail">
-                            <div className="thumbnail" data-sal-delay="500" data-sal="slide-left" data-sal-duration="1000">
-                                <img src="/assets/images/banner/couple-cooking.webp" alt="Couple Image" />
-                            </div>
-                            <ul className="shape-group">
-                                <li className="shape-1" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/about/shape-26.png" alt="Shape" />
-                                </li>
-                                <li className="shape-2" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/about/shape-15.png" alt="Shape" />
-                                </li>
-                                <li className="shape-3" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </li>
-                                <li className="shape-4" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-05.png" alt="Shape" />
-                </motion.li>
-
-                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(50).x,
-                        y: mouseDirection(50).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-04.png" alt="Shape" />
-                </motion.li>
-
-                <motion.li className="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-03.png" alt="Shape" />
-                </motion.li>
-
-                <motion.li className="shape-4 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-02.png" alt="Shape" />
-                </motion.li>
-                
-                <motion.li className="shape-5 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-01.png" alt="Shape" />
-                </motion.li>
-            </ul>
-        </div>
-    );
-};
-
-export default HeroArea;
diff --git a/src/components/homes/home-kitchen/hero-area.tsx b/src/components/homes/home-kitchen/hero-area.tsx
new file mode 100644
index 0000000..0e78754
--- /dev/null
+++ b/src/components/homes/home-kitchen/hero-area.tsx
@@ -0,0 +1,195 @@
+import React from 'react';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const HeroArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='hero-banner hero-style-5'>
+            <div className='container'>
+                <div className='row align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='banner-content'>
+                            <h1
+                                className='title'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Take Your Cooking Skill To The Next Level
+                            </h1>
+                            <p
+                                data-sal-delay='200'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit.
+                            </p>
+                            <div
+                                className='banner-btn'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <Link href='/course-style-1' className='edu-btn'>
+                                    Find courses<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='banner-thumbnail'>
+                            <div
+                                className='thumbnail'
+                                data-sal-delay='500'
+                                data-sal='slide-left'
+                                data-sal-duration='1000'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/banner/couple-cooking.webp'
+                                        alt='Couple Image'
+                                    />
+                                </picture>
+                            </div>
+                            <ul className='shape-group'>
+                                <li
+                                    className='shape-1'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-26.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <li
+                                    className='shape-2'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-15.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <li
+                                    className='shape-3'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <li
+                                    className='shape-4'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/counterup/shape-02.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-05.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(50).x,
+                        y: mouseDirection(50).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-04.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-03.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-4 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-02.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-5 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-01.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default HeroArea;
diff --git a/src/components/homes/home-kitchen/index.jsx b/src/components/homes/home-kitchen/index.tsx
similarity index 56%
rename from src/components/homes/home-kitchen/index.jsx
rename to src/components/homes/home-kitchen/index.tsx
index 35e2da1..fbe2e78 100644
--- a/src/components/homes/home-kitchen/index.jsx
+++ b/src/components/homes/home-kitchen/index.tsx
@@ -13,28 +13,27 @@ import InstagramArea from './instagrams';
 import TeamArea from './team-area';
 import TestimonialArea from './testimonial-area';
 
-
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
-                <Header/>
-                <HeroArea/>
-                <CategoryArea/>
-                <AboutArea/>
-                <BrandArea/>
-                <CoursesArea/>
-                <TestimonialArea/>
-                <CounterArea/>
-                <TeamArea/>
-                <FaqArea/>
-                <AdBanner/>
-                <BlogArea/>
-                <InstagramArea/>
-                <FooterTwo/>
+            <div id='main-wrapper' className='main-wrapper'>
+                <Header />
+                <HeroArea />
+                <CategoryArea />
+                <AboutArea />
+                <BrandArea />
+                <CoursesArea />
+                <TestimonialArea />
+                <CounterArea />
+                <TeamArea />
+                <FaqArea />
+                <AdBanner />
+                <BlogArea />
+                <InstagramArea />
+                <FooterTwo />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home-kitchen/instagrams.jsx b/src/components/homes/home-kitchen/instagrams.jsx
deleted file mode 100644
index 66edcf2..0000000
--- a/src/components/homes/home-kitchen/instagrams.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import SingleInstagram from '../../common/single-instagram';
-
-const InstagramArea = () => {
-    return (
-        <div className="edu-instagram-area instagram-area-1">
-            <div className="container-fluid">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">Instructors</span>
-                    <h2 className="title">Follow Me On Instagram</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-3">
-                    <SingleInstagram img={'01'} name={'@EduBlink.Cooking'} />
-                    <SingleInstagram img={'02'} name={'@EduBlink.Cooking'} />
-                    <SingleInstagram img={'03'} name={'@EduBlink.Cooking'} />
-                    <SingleInstagram img={'04'} name={'@EduBlink.Cooking'} />
-                    <SingleInstagram img={'05'} name={'@EduBlink.Cooking'} />
-                    <SingleInstagram img={'06'} name={'@EduBlink.Cooking'} />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default InstagramArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kitchen/instagrams.tsx b/src/components/homes/home-kitchen/instagrams.tsx
new file mode 100644
index 0000000..0d02ef5
--- /dev/null
+++ b/src/components/homes/home-kitchen/instagrams.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import SingleInstagram from '../../common/single-instagram';
+
+const InstagramArea = () => {
+    return (
+        <div className='edu-instagram-area instagram-area-1'>
+            <div className='container-fluid'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>Instructors</span>
+                    <h2 className='title'>Follow Me On Instagram</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-3'>
+                    <SingleInstagram img={'01'} name={'@EduBlink.Cooking'} />
+                    <SingleInstagram img={'02'} name={'@EduBlink.Cooking'} />
+                    <SingleInstagram img={'03'} name={'@EduBlink.Cooking'} />
+                    <SingleInstagram img={'04'} name={'@EduBlink.Cooking'} />
+                    <SingleInstagram img={'05'} name={'@EduBlink.Cooking'} />
+                    <SingleInstagram img={'06'} name={'@EduBlink.Cooking'} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default InstagramArea;
diff --git a/src/components/homes/home-kitchen/team-area.jsx b/src/components/homes/home-kitchen/team-area.jsx
deleted file mode 100644
index 1f536aa..0000000
--- a/src/components/homes/home-kitchen/team-area.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { instructors_data } from '../../../data';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import TeamThree from "../../team-member/team-three";
-
-const TeamArea = ({ about_p_2, about_p_3 }) => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className={`edu-team-area team-area-${about_p_2 ? '6' : '3'} edu-section-gap ${about_p_3 ? 'z-10' : ''}`}>
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Instructors</span>
-                    <h2 className="title">Course Instructors</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    {instructors_data.slice(0,3).map((instructor) => (
-                        <div key={instructor.id} className="col-lg-4 col-md-6" data-sal-delay={instructor.delay} data-sal="slide-up" data-sal-duration="800">
-                            <TeamThree instructor={instructor} />
-                        </div>
-                    ))}
-                </div>
-            </div>
-
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="200" data-sal="fade" data-sal-duration="800"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-26.png" alt="shape" />
-                </motion.li>
-            </ul>
-        </div>
-    )
-}
-
-export default TeamArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kitchen/team-area.tsx b/src/components/homes/home-kitchen/team-area.tsx
new file mode 100644
index 0000000..ae67ad1
--- /dev/null
+++ b/src/components/homes/home-kitchen/team-area.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { instructors_data } from '../../../data';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import TeamThree from '../../team-member/team-three';
+
+type TeamAreaProps = {
+    about_p_2?: boolean;
+    about_p_3?: boolean;
+};
+
+const TeamArea = ({ about_p_2, about_p_3 }: TeamAreaProps) => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div
+            className={`edu-team-area team-area-${
+                about_p_2 ? '6' : '3'
+            } edu-section-gap ${about_p_3 ? 'z-10' : ''}`}
+        >
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Instructors</span>
+                    <h2 className='title'>Course Instructors</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {instructors_data.slice(0, 3).map(instructor => (
+                        <div
+                            key={instructor.id}
+                            className='col-lg-4 col-md-6'
+                            data-sal-delay={instructor.delay}
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <TeamThree instructor={instructor} />
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='200'
+                    data-sal='fade'
+                    data-sal-duration='800'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-26.png' alt='shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default TeamArea;
diff --git a/src/components/homes/home-kitchen/testimonial-area.jsx b/src/components/homes/home-kitchen/testimonial-area.jsx
deleted file mode 100644
index 828a5dd..0000000
--- a/src/components/homes/home-kitchen/testimonial-area.jsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay } from "swiper";
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const testimonial_items = [
-    {
-        ratings: [1, 2, 3, 4, 5],
-        desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed mod tempor incididunt enim minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix unde omnis iste natus error sit voluptatem.',
-        img: '/assets/images/testimonial/testimonial-01.png',
-        name: 'Haley Bennet',
-        title: 'Designer'
-    },
-    {
-        ratings: [1, 2, 3, 4, 5],
-        desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed mod tempor incididunt enim minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix unde omnis iste natus error sit voluptatem.',
-        img: '/assets/images/testimonial/testimonial-02.png',
-        name: 'Richard Gere',
-        title: 'Developer'
-    },
-    {
-        ratings: [1, 2, 3, 4, 5],
-        desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed mod tempor incididunt enim minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix unde omnis iste natus error sit voluptatem.',
-        img: '/assets/images/testimonial/testimonial-03.png',
-        name: 'Megan Foxx',
-        title: 'Content creator'
-    }
-];
-
-const TestimonialArea = () => {
-    const [loop, setLoop] = useState(false);
-    useEffect(() => setLoop(true), [])
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="testimonial-area-3">
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-lg-6">
-                        <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                            <span className="pre-title">Testimonials</span>
-                            <h2 className="title">What Our Students <br /> Have To Say</h2>
-                            <span className="shape-line"><i className="icon-19"></i></span>
-                        </div>
-                    </div>
-                </div>
-                <Swiper
-                    slidesPerView={1}
-                    spaceBetween={0}
-                    loop={loop}
-                    className="testimonial-activation-2"
-                    grabCursor={true}
-                    modules={[Autoplay]}
-                    speed={1000}
-                    autoplay={{
-                        delay: 3000
-                    }}
-                    breakpoints={{
-                        768: {
-                            slidesPerView: 1
-                        },
-                        992: {
-                            slidesPerView: 2
-                        }
-                    }}
-                >
-                    {testimonial_items.map((item, i) => {
-                        const { desc, img, name, ratings, title } = item;
-                        return (
-                            <SwiperSlide key={i}>
-                                <div className="testimonial-slide testimonial-style-2">
-                                    <div className="content">
-                                        <div className="rating-icon">
-                                            {ratings.map(r => <i key={r} className="icon-23"></i>)}
-                                        </div>
-                                        <p>{desc}</p>
-                                        <div className="author-info">
-                                            <div className="thumb">
-                                                <img src={img} alt="Testimonial" />
-                                            </div>
-                                            <div className="info">
-                                                <h5 className="title">{name}</h5>
-                                                <span className="subtitle">{title}</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </SwiperSlide>
-                        )
-                    })}
-                </Swiper>
-            </div>
-
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(25).x,
-                        y: mouseReverse(25).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-03.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-2 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(25).x,
-                        y: mouseDirection(25).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-04.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-3 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(25).x,
-                        y: mouseReverse(25).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-02.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-4 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(25).x,
-                        y: mouseDirection(25).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-01.png" alt="Shape" />
-                </motion.li>
-                <li className="shape-5" data-sal-delay="100" data-sal="fade" data-sal-duration="1000">
-                    <img className="d-block-shape-light" src="/assets/images/others/map-shape-3.png" alt="Shape" />
-                    <img className="d-none-shape-dark" src="/assets/images/others/dark-map-2.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    )
-}
-
-export default TestimonialArea;
\ No newline at end of file
diff --git a/src/components/homes/home-kitchen/testimonial-area.tsx b/src/components/homes/home-kitchen/testimonial-area.tsx
new file mode 100644
index 0000000..bf84937
--- /dev/null
+++ b/src/components/homes/home-kitchen/testimonial-area.tsx
@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay } from 'swiper';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const testimonial_items = [
+    {
+        ratings: [1, 2, 3, 4, 5],
+        desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed mod tempor incididunt enim minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix unde omnis iste natus error sit voluptatem.',
+        img: '/assets/images/testimonial/testimonial-01.png',
+        name: 'Haley Bennet',
+        title: 'Designer',
+    },
+    {
+        ratings: [1, 2, 3, 4, 5],
+        desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed mod tempor incididunt enim minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix unde omnis iste natus error sit voluptatem.',
+        img: '/assets/images/testimonial/testimonial-02.png',
+        name: 'Richard Gere',
+        title: 'Developer',
+    },
+    {
+        ratings: [1, 2, 3, 4, 5],
+        desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed mod tempor incididunt enim minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix unde omnis iste natus error sit voluptatem.',
+        img: '/assets/images/testimonial/testimonial-03.png',
+        name: 'Megan Foxx',
+        title: 'Content creator',
+    },
+];
+
+const TestimonialArea = () => {
+    const [loop, setLoop] = useState(false);
+    useEffect(() => setLoop(true), []);
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='testimonial-area-3'>
+            <div className='container'>
+                <div className='row justify-content-center'>
+                    <div className='col-lg-6'>
+                        <div
+                            className='section-title section-center'
+                            data-sal-delay='150'
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <span className='pre-title'>Testimonials</span>
+                            <h2 className='title'>
+                                What Our Students <br /> Have To Say
+                            </h2>
+                            <span className='shape-line'>
+                                <i className='icon-19'></i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <Swiper
+                    slidesPerView={1}
+                    spaceBetween={0}
+                    loop={loop}
+                    className='testimonial-activation-2'
+                    grabCursor={true}
+                    modules={[Autoplay]}
+                    speed={1000}
+                    autoplay={{
+                        delay: 3000,
+                    }}
+                    breakpoints={{
+                        768: {
+                            slidesPerView: 1,
+                        },
+                        992: {
+                            slidesPerView: 2,
+                        },
+                    }}
+                >
+                    {testimonial_items.map((item, i) => {
+                        const { desc, img, name, ratings, title } = item;
+                        return (
+                            <SwiperSlide key={i}>
+                                <div className='testimonial-slide testimonial-style-2'>
+                                    <div className='content'>
+                                        <div className='rating-icon'>
+                                            {ratings.map(r => (
+                                                <i key={r} className='icon-23'></i>
+                                            ))}
+                                        </div>
+                                        <p>{desc}</p>
+                                        <div className='author-info'>
+                                            <div className='thumb'>
+                                                <picture>
+                                                    <img src={img} alt='Testimonial' />
+                                                </picture>
+                                            </div>
+                                            <div className='info'>
+                                                <h5 className='title'>{name}</h5>
+                                                <span className='subtitle'>{title}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </SwiperSlide>
+                        );
+                    })}
+                </Swiper>
+            </div>
+
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(25).x,
+                        y: mouseReverse(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-03.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(25).x,
+                        y: mouseDirection(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-04.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(25).x,
+                        y: mouseReverse(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-02.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-4 scene'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(25).x,
+                        y: mouseDirection(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-01.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <li
+                    className='shape-5'
+                    data-sal-delay='100'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img
+                            className='d-block-shape-light'
+                            src='/assets/images/others/map-shape-3.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                    <picture>
+                        <img
+                            className='d-none-shape-dark'
+                            src='/assets/images/others/dark-map-2.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default TestimonialArea;
diff --git a/src/components/homes/home-language-academy/about-area.jsx b/src/components/homes/home-language-academy/about-area.jsx
deleted file mode 100644
index 826583d..0000000
--- a/src/components/homes/home-language-academy/about-area.jsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const tabs = {
-    heading:[
-        {active:true,target:'about-edu',title:'About EduBlink'},
-        {target:'about-mission',title:'Our Mission'},
-        {target:'about-vision',title:'Our Vision'}
-    ],
-    content:[
-        {show:true,id:'about-edu',desc:"Magna aliquaenim minim veniam quis nostrud exercitation ullamco laborisLorem ipsum dolor sit amet consectetur adipisicing elit sed do eius tempor incididunt labore.",
-        feature_list:['Education award achived','Available online courses']},
-        {id:'about-mission',desc:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.",
-        feature_list:['Education award achived','Available online courses']},
-        {id:'about-vision',desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer.",
-        feature_list:['Education award achived','Available online courses']}
-    ]
-}
-
-
-const AboutArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-about-area about-style-3 language-about">
-            <div className="container">
-                <div className="row g-5 align-items-center">
-                    <div className="col-lg-6">
-                        <div className="about-image-gallery">
-                            <img className="main-img-1" data-sal-delay="100" data-sal="fade-in" data-sal-duration="800" src="/assets/images/about/about-19.webp" alt="About Image" />
-                            <div className="main-img-wrapper">
-                                <div className="main-img-inner" data-sal-delay="100" data-sal="fade-in" data-sal-duration="800">
-                                    <img className="main-img-2" src="/assets/images/about/about-20.webp" alt="About Image" />
-                                </div>
-                            </div>
-
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                                <li className="shape-2" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                                    <img className="rotateit" src="/assets/images/faq/shape-04.png" alt="Shape" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    
-                    <div className="col-lg-6" data-sal-delay="50" data-sal="slide-up" data-sal-duration="800">
-                        <div className="about-content">
-                            <div className="section-title section-left">
-                                <span className="pre-title">About Us</span>
-                                <h2 className="title">We Provide Best <span className="color-primary">Language</span> Courses For You</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                            </div>
-
-                            <ul className="nav nav-tabs" role="tablist">
-                                {
-                                    tabs.heading.map((t,i) => (
-                                        <li key={i} className="nav-item" role="presentation">
-                                            <button className={`nav-link ${t.active?'active':''}`} data-bs-toggle="tab" data-bs-target={`#${t.target}`} type="button" role="tab" tabIndex={'-1'} aria-selected={t.active?"true":'false'}> {t.title}</button>
-                                        </li>
-                                    ))
-                                } 
-                            </ul>
-                            
-                            <div className="tab-content">
-                                {
-                                    tabs.content.map((item,i) => { 
-                                        const {desc,feature_list,id,show} = item; 
-                                        return (
-                                            <div key={id} className={`tab-pane fade ${show?"show active":""}`} id={id} role="tabpanel">
-                                                <p>{desc}</p>
-                                                <ul className="features-list"> {feature_list.map((l,i) => <li key={i}>{l}</li>)} </ul>
-                                            </div> 
-                                        )
-                                    })
-                                }
-                            </div>
-
-                            <div className="about-btn sal-animate" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <a href="#" className="edu-btn">Learn more <i className="icon-4"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default AboutArea;
\ No newline at end of file
diff --git a/src/components/homes/home-language-academy/about-area.tsx b/src/components/homes/home-language-academy/about-area.tsx
new file mode 100644
index 0000000..963e50b
--- /dev/null
+++ b/src/components/homes/home-language-academy/about-area.tsx
@@ -0,0 +1,184 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const tabs = {
+    heading: [
+        { active: true, target: 'about-edu', title: 'About EduBlink' },
+        { target: 'about-mission', title: 'Our Mission' },
+        { target: 'about-vision', title: 'Our Vision' },
+    ],
+    content: [
+        {
+            show: true,
+            id: 'about-edu',
+            desc: 'Magna aliquaenim minim veniam quis nostrud exercitation ullamco laborisLorem ipsum dolor sit amet consectetur adipisicing elit sed do eius tempor incididunt labore.',
+            feature_list: ['Education award achived', 'Available online courses'],
+        },
+        {
+            id: 'about-mission',
+            desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.',
+            feature_list: ['Education award achived', 'Available online courses'],
+        },
+        {
+            id: 'about-vision',
+            desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer.',
+            feature_list: ['Education award achived', 'Available online courses'],
+        },
+    ],
+};
+
+const AboutArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-about-area about-style-3 language-about'>
+            <div className='container'>
+                <div className='row g-5 align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='about-image-gallery'>
+                            <picture>
+                                <img
+                                    className='main-img-1'
+                                    data-sal-delay='100'
+                                    data-sal='fade-in'
+                                    data-sal-duration='800'
+                                    src='/assets/images/about/about-19.webp'
+                                    alt='About Image'
+                                />
+                            </picture>
+                            <div className='main-img-wrapper'>
+                                <div
+                                    className='main-img-inner'
+                                    data-sal-delay='100'
+                                    data-sal='fade-in'
+                                    data-sal-duration='800'
+                                >
+                                    <picture>
+                                        <img
+                                            className='main-img-2'
+                                            src='/assets/images/about/about-20.webp'
+                                            alt='About Image'
+                                        />
+                                    </picture>
+                                </div>
+                            </div>
+
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <li
+                                    className='shape-2'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                >
+                                    <picture>
+                                        <img
+                                            className='rotateit'
+                                            src='/assets/images/faq/shape-04.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div
+                        className='col-lg-6'
+                        data-sal-delay='50'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='about-content'>
+                            <div className='section-title section-left'>
+                                <span className='pre-title'>About Us</span>
+                                <h2 className='title'>
+                                    We Provide Best{' '}
+                                    <span className='color-primary'>Language</span>{' '}
+                                    Courses For You
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                            </div>
+
+                            <ul className='nav nav-tabs' role='tablist'>
+                                {tabs.heading.map((t, i) => (
+                                    <li key={i} className='nav-item' role='presentation'>
+                                        <button
+                                            className={`nav-link ${
+                                                t.active ? 'active' : ''
+                                            }`}
+                                            data-bs-toggle='tab'
+                                            data-bs-target={`#${t.target}`}
+                                            type='button'
+                                            role='tab'
+                                            tabIndex={-1}
+                                            aria-selected={t.active ? 'true' : 'false'}
+                                        >
+                                            {' '}
+                                            {t.title}
+                                        </button>
+                                    </li>
+                                ))}
+                            </ul>
+
+                            <div className='tab-content'>
+                                {tabs.content.map((item, i) => {
+                                    const { desc, feature_list, id, show } = item;
+                                    return (
+                                        <div
+                                            key={id}
+                                            className={`tab-pane fade ${
+                                                show ? 'show active' : ''
+                                            }`}
+                                            id={id}
+                                            role='tabpanel'
+                                        >
+                                            <p>{desc}</p>
+                                            <ul className='features-list'>
+                                                {' '}
+                                                {feature_list.map((l, i) => (
+                                                    <li key={i}>{l}</li>
+                                                ))}{' '}
+                                            </ul>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+
+                            <div
+                                className='about-btn sal-animate'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <a href='#' className='edu-btn'>
+                                    Learn more <i className='icon-4'></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AboutArea;
diff --git a/src/components/homes/home-language-academy/counter-area.jsx b/src/components/homes/home-language-academy/counter-area.tsx
similarity index 52%
rename from src/components/homes/home-language-academy/counter-area.jsx
rename to src/components/homes/home-language-academy/counter-area.tsx
index 0c009ff..14089af 100644
--- a/src/components/homes/home-language-academy/counter-area.jsx
+++ b/src/components/homes/home-language-academy/counter-area.tsx
@@ -7,50 +7,54 @@ const counter_data = [
         count: 29.3,
         text: 'K',
         title: 'Student Enrolled',
-        decimal: 1
+        decimal: 1,
     },
     {
         color: 'secondary-color',
         count: 32.4,
         text: 'K',
         title: 'Class Completed',
-        decimal: 1
+        decimal: 1,
     },
     {
         color: 'extra02-color',
         count: 100,
         text: '%',
-        title: 'Satisfaction Rate'
+        title: 'Satisfaction Rate',
     },
     {
         color: 'extra05-color',
         count: 354,
         text: '%',
-        title: 'Top Instructors'
-    }
-]
+        title: 'Top Instructors',
+    },
+];
 
 const CounterArea = () => {
     return (
-        <div className="counterup-area-12">
-            <div className="container">
-                <div className="row g-5">
+        <div className='counterup-area-12'>
+            <div className='container'>
+                <div className='row g-5'>
                     {counter_data.map((c, i) => (
-                        <div key={i} className="col-lg-3 col-sm-6">
-                            <div className="edu-counterup counterup-style-12">
+                        <div key={i} className='col-lg-3 col-sm-6'>
+                            <div className='edu-counterup counterup-style-12'>
                                 <h2 className={`counter-item count-number ${c.color}`}>
-                                    <span className="odometer">
-                                        <Counter number={parseFloat(c.count)} text={c.text} decimal={c.decimal} />
+                                    <span className='odometer'>
+                                        <Counter
+                                            number={c.count}
+                                            text={c.text}
+                                            decimal={c.decimal}
+                                        />
                                     </span>
                                 </h2>
-                                <h6 className="title">{c.title}</h6>
+                                <h6 className='title'>{c.title}</h6>
                             </div>
                         </div>
                     ))}
                 </div>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default CounterArea;
\ No newline at end of file
+export default CounterArea;
diff --git a/src/components/homes/home-language-academy/faq-area.jsx b/src/components/homes/home-language-academy/faq-area.jsx
deleted file mode 100644
index 3148968..0000000
--- a/src/components/homes/home-language-academy/faq-area.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const accordion_items = [
-    {
-        id: 'collapseOne', 
-        show: true, 
-        title: 'How can I contact a school directly?',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    },
-    {
-        id: 'collapseTwo', 
-        show: false, 
-        title: 'How do I find a school where I want to study?',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    },
-    {
-        id: 'collapseThree', 
-        show: false, 
-        title: 'Where should I study abroad?',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    }
-];
-
-const FaqArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-faq-area faq-style-6 gap-top-equal">
-            <div className="container">
-                <div className="row g-5 row--45">
-                    <div className="col-lg-6 sal-animate" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                        <div className="edu-faq-content">
-                            <div className="section-title section-left">
-                                <span className="pre-title">FAQ’s</span>
-                                <h2 className="title">Over 10 Years in <span className="color-secondary">Distant <br /> Skill</span> Development</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                            </div>
-                            <div className="faq-accordion" id="faq-accordion">
-                                <div className="accordion">
-                                    {accordion_items.map((item, i) => {
-                                        const { desc, id, show, title } = item;
-                                        return (
-                                            <div key={i} className="accordion-item">
-                                                <h5 className="accordion-header">
-                                                    <button className={`accordion-button ${show ? '' : 'collapsed'}`} type="button" data-bs-toggle="collapse" data-bs-target={`#${id}`} aria-expanded={show ? 'true' : 'false'}>
-                                                        {title}
-                                                    </button>
-                                                </h5>
-                                                <div id={id} className={`accordion-collapse collapse ${show ? 'show' : ''}`} data-bs-parent="#faq-accordion">
-                                                    <div className="accordion-body">
-                                                        <p>{desc}</p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        )
-                                    })}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="edu-faq-gallery">
-                            <div className="faq-thumbnail thumbnail-1" data-sal-delay="50" data-sal="slide-left" data-sal-duration="800">
-                                <img src="/assets/images/others/faq-6.webp" alt="Faq Images" />
-                            </div>
-                            <ul className="shape-group">
-                                <li className="shape-1 sal-animate" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <span></span>
-                                </li>
-                                <li className="shape-2 sal-animate" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <span></span>
-                                </li>
-                                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape Images" />
-                                </motion.li>
-                                <li className="shape-4" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                                    <img className="rotateit" src="/assets/images/faq/shape-04.png" alt="Shape Images" />
-                                </li>
-                                <li className="shape-5 sal-animate" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/others/shape-39.png" alt="Shape" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default FaqArea;
\ No newline at end of file
diff --git a/src/components/homes/home-language-academy/faq-area.tsx b/src/components/homes/home-language-academy/faq-area.tsx
new file mode 100644
index 0000000..343daed
--- /dev/null
+++ b/src/components/homes/home-language-academy/faq-area.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const accordion_items = [
+    {
+        id: 'collapseOne',
+        show: true,
+        title: 'How can I contact a school directly?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+    {
+        id: 'collapseTwo',
+        show: false,
+        title: 'How do I find a school where I want to study?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+    {
+        id: 'collapseThree',
+        show: false,
+        title: 'Where should I study abroad?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+];
+
+const FaqArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-faq-area faq-style-6 gap-top-equal'>
+            <div className='container'>
+                <div className='row g-5 row--45'>
+                    <div
+                        className='col-lg-6 sal-animate'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='edu-faq-content'>
+                            <div className='section-title section-left'>
+                                <span className='pre-title'>FAQ’s</span>
+                                <h2 className='title'>
+                                    Over 10 Years in{' '}
+                                    <span className='color-secondary'>
+                                        Distant <br /> Skill
+                                    </span>{' '}
+                                    Development
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                            </div>
+                            <div className='faq-accordion' id='faq-accordion'>
+                                <div className='accordion'>
+                                    {accordion_items.map((item, i) => {
+                                        const { desc, id, show, title } = item;
+                                        return (
+                                            <div key={i} className='accordion-item'>
+                                                <h5 className='accordion-header'>
+                                                    <button
+                                                        className={`accordion-button ${
+                                                            show ? '' : 'collapsed'
+                                                        }`}
+                                                        type='button'
+                                                        data-bs-toggle='collapse'
+                                                        data-bs-target={`#${id}`}
+                                                        aria-expanded={
+                                                            show ? 'true' : 'false'
+                                                        }
+                                                    >
+                                                        {title}
+                                                    </button>
+                                                </h5>
+                                                <div
+                                                    id={id}
+                                                    className={`accordion-collapse collapse ${
+                                                        show ? 'show' : ''
+                                                    }`}
+                                                    data-bs-parent='#faq-accordion'
+                                                >
+                                                    <div className='accordion-body'>
+                                                        <p>{desc}</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='edu-faq-gallery'>
+                            <div
+                                className='faq-thumbnail thumbnail-1'
+                                data-sal-delay='50'
+                                data-sal='slide-left'
+                                data-sal-duration='800'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/others/faq-6.webp'
+                                        alt='Faq Images'
+                                    />
+                                </picture>
+                            </div>
+                            <ul className='shape-group'>
+                                <li
+                                    className='shape-1 sal-animate'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <span></span>
+                                </li>
+                                <li
+                                    className='shape-2 sal-animate'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <span></span>
+                                </li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <li
+                                    className='shape-4'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                >
+                                    <picture>
+                                        <img
+                                            className='rotateit'
+                                            src='/assets/images/faq/shape-04.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </li>
+                                <li
+                                    className='shape-5 sal-animate'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/shape-39.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FaqArea;
diff --git a/src/components/homes/home-language-academy/features.jsx b/src/components/homes/home-language-academy/features.jsx
deleted file mode 100644
index 67816f0..0000000
--- a/src/components/homes/home-language-academy/features.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react'
-
-const features = () => {
-    return (
-        <div className="features-area-6">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">features</span>
-                    <h2 className="title">Explore Yourself All Over The World</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                    <p>Consectetur adipiscing elit sed do eiusmod tempor.</p>
-                </div>
-                <div className="features-grid-wrap">
-                    <div className="features-box features-style-6 ">
-                        <div className="icon icon-course">
-                            <img className="svgInject" src="/assets/images/svg-icons/online-class.svg" alt="animated icon" />
-                        </div>
-                        <div className="content">
-                            <h5 className="title">80+ Online Courses</h5>
-                            <p>Lorem ipsum dolor sit amet cont adipiscing elit.</p>
-                        </div>
-                    </div>
-                    <div className="features-box features-style-6 ">
-                        <div className="icon icon-tag">
-                            <img className="svgInject" src="/assets/images/svg-icons/instructor.svg" alt="animated icon" />
-                        </div>
-                        <div className="content">
-                            <h5 className="title">Top Instructors</h5>
-                            <p>Lorem ipsum dolor sit amet cont adipiscing elit.</p>
-                        </div>
-                    </div>
-                    <div className="features-box features-style-6  feature-wrapper">
-                        <div className="icon certificate icon-certificate">
-                            <img className="svgInject" src="/assets/images/svg-icons/certificate.svg" alt="animated icon" />
-                        </div>
-                        <div className="content">
-                            <h5 className="title">Online Certificates</h5>
-                            <p>Lorem ipsum dolor sit amet cont adipiscing elit.</p>
-                        </div>
-                    </div>
-                    <div className="features-box features-style-6 feature-wrapper">
-                        <div className="icon icon-member">
-                            <img className="svgInject" src="/assets/images/svg-icons/user.svg" alt="animated icon" />
-                        </div>
-                        <div className="content">
-                            <h5 className="title">6000k+ Members</h5>
-                            <p>Lorem ipsum dolor sit amet cont adipiscing elit.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <li className="shape-1 sal-animate" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                    <img className="rotateit" src="/assets/images/about/shape-37.png" alt="Shape" />
-                </li>
-                <li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                    <img src="/assets/images/others/shape-41.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    )
-}
-
-export default features;
\ No newline at end of file
diff --git a/src/components/homes/home-language-academy/features.tsx b/src/components/homes/home-language-academy/features.tsx
new file mode 100644
index 0000000..de9034d
--- /dev/null
+++ b/src/components/homes/home-language-academy/features.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+
+const features = () => {
+    return (
+        <div className='features-area-6'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>features</span>
+                    <h2 className='title'>Explore Yourself All Over The World</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                    <p>Consectetur adipiscing elit sed do eiusmod tempor.</p>
+                </div>
+                <div className='features-grid-wrap'>
+                    <div className='features-box features-style-6 '>
+                        <div className='icon icon-course'>
+                            <picture>
+                                <img
+                                    className='svgInject'
+                                    src='/assets/images/svg-icons/online-class.svg'
+                                    alt='animated icon'
+                                />
+                            </picture>
+                        </div>
+                        <div className='content'>
+                            <h5 className='title'>80+ Online Courses</h5>
+                            <p>Lorem ipsum dolor sit amet cont adipiscing elit.</p>
+                        </div>
+                    </div>
+                    <div className='features-box features-style-6 '>
+                        <div className='icon icon-tag'>
+                            <picture>
+                                <img
+                                    className='svgInject'
+                                    src='/assets/images/svg-icons/instructor.svg'
+                                    alt='animated icon'
+                                />
+                            </picture>
+                        </div>
+                        <div className='content'>
+                            <h5 className='title'>Top Instructors</h5>
+                            <p>Lorem ipsum dolor sit amet cont adipiscing elit.</p>
+                        </div>
+                    </div>
+                    <div className='features-box features-style-6  feature-wrapper'>
+                        <div className='icon certificate icon-certificate'>
+                            <picture>
+                                <img
+                                    className='svgInject'
+                                    src='/assets/images/svg-icons/certificate.svg'
+                                    alt='animated icon'
+                                />
+                            </picture>
+                        </div>
+                        <div className='content'>
+                            <h5 className='title'>Online Certificates</h5>
+                            <p>Lorem ipsum dolor sit amet cont adipiscing elit.</p>
+                        </div>
+                    </div>
+                    <div className='features-box features-style-6 feature-wrapper'>
+                        <div className='icon icon-member'>
+                            <picture>
+                                <img
+                                    className='svgInject'
+                                    src='/assets/images/svg-icons/user.svg'
+                                    alt='animated icon'
+                                />
+                            </picture>
+                        </div>
+                        <div className='content'>
+                            <h5 className='title'>6000k+ Members</h5>
+                            <p>Lorem ipsum dolor sit amet cont adipiscing elit.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <li
+                    className='shape-1 sal-animate'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img
+                            className='rotateit'
+                            src='/assets/images/about/shape-37.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+                <li
+                    className='shape-2 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-41.png' alt='Shape' />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default features;
diff --git a/src/components/homes/home-language-academy/hero-area.jsx b/src/components/homes/home-language-academy/hero-area.jsx
deleted file mode 100644
index 6ff8e58..0000000
--- a/src/components/homes/home-language-academy/hero-area.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import Counter from '../../common/counter';
-
-const HeroArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="hero-banner hero-style-10">
-            <div className="container">
-                <div className="row align-items-center">
-                    <div className="col-lg-6">
-                        <div className="banner-content">
-                            <h1 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Take Online <br /> <span className="color-secondary">Language</span> Courses<br />With Certificate</h1>
-                            <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.</p>
-                            <div className="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <Link href="/course-style-1" className="edu-btn">
-                                    Find courses<i className="icon-4"></i>
-                                </Link>
-                            </div>
-                            <ul className="shape-group">
-                                <li className="shape-1" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <span className="d-block"></span>
-                                </li>
-                                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseReverse(25).x,
-                                        y: mouseReverse(25).y
-                                    } }
-                                >
-                                    <span className="d-block"></span>
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="banner-thumbnail">
-                            <div className="thumbnail" data-sal-delay="500" data-sal="slide-left" data-sal-duration="1000">
-                                <img src="/assets/images/banner/flag-boy.webp" alt="flag-boy Image" />
-                            </div>
-                            <div className="instructor-info" data-sal-delay="800" data-sal="fade-in" data-sal-duration="1000">
-                                <div className="inner">
-                                    <div className="enrolled-counter">
-                                        <div className="counterup-wrapper">
-                                            <h2 className="counter-item count-number primary-color">
-                                                <span className="odometer">
-                                                    <Counter number="9.3" decimal="1" text="K" />
-                                                </span>
-                                            </h2>
-                                            <h6 className="title">Enrolled</h6>
-                                        </div>
-                                    </div>
-                                    <div className="lahguage-counter">
-                                        <div className="counterup-wrapper">
-                                            <h2 className="counter-item count-number secondary-color">
-                                                <span className="odometer">
-                                                    <Counter number="20" text="+" />
-                                                </span>
-                                            </h2>
-                                            <h6 className="title">Languages</h6>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <ul className="shape-group">
-                                <li className="shape-3" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/about/shape-15.png" alt="Shape" />
-                                </li>
-
-                                <motion.li className="shape-4 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/counterup/shape-05.png" alt="Shape" />
-                                </motion.li>
-
-                                <li className="shape-5" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/svg-icons/circle-big.svg" alt="Shape" />
-                                </li>
-
-                                <li className="shape-6" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/svg-icons/circle-small.svg" alt="Shape" />
-                                </li>
-                                
-                                <motion.li className="shape-7 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseReverse(25).x,
-                                        y: mouseReverse(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <li className="shape-8">
-                    <img src="/assets/images/about/h-1-shape-01.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    );
-}
-
-export default HeroArea;
\ No newline at end of file
diff --git a/src/components/homes/home-language-academy/hero-area.tsx b/src/components/homes/home-language-academy/hero-area.tsx
new file mode 100644
index 0000000..ebb64d8
--- /dev/null
+++ b/src/components/homes/home-language-academy/hero-area.tsx
@@ -0,0 +1,211 @@
+import React from 'react';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import Counter from '../../common/counter';
+
+const HeroArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='hero-banner hero-style-10'>
+            <div className='container'>
+                <div className='row align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='banner-content'>
+                            <h1
+                                className='title'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Take Online <br />{' '}
+                                <span className='color-secondary'>Language</span> Courses
+                                <br />
+                                With Certificate
+                            </h1>
+                            <p
+                                data-sal-delay='200'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit.
+                            </p>
+                            <div
+                                className='banner-btn'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <Link href='/course-style-1' className='edu-btn'>
+                                    Find courses<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                            <ul className='shape-group'>
+                                <li
+                                    className='shape-1'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <span className='d-block'></span>
+                                </li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseReverse(25).x,
+                                        y: mouseReverse(25).y,
+                                    }}
+                                >
+                                    <span className='d-block'></span>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='banner-thumbnail'>
+                            <div
+                                className='thumbnail'
+                                data-sal-delay='500'
+                                data-sal='slide-left'
+                                data-sal-duration='1000'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/banner/flag-boy.webp'
+                                        alt='flag-boy Image'
+                                    />
+                                </picture>
+                            </div>
+                            <div
+                                className='instructor-info'
+                                data-sal-delay='800'
+                                data-sal='fade-in'
+                                data-sal-duration='1000'
+                            >
+                                <div className='inner'>
+                                    <div className='enrolled-counter'>
+                                        <div className='counterup-wrapper'>
+                                            <h2 className='counter-item count-number primary-color'>
+                                                <span className='odometer'>
+                                                    <Counter
+                                                        number={9.3}
+                                                        decimal={1}
+                                                        text='K'
+                                                    />
+                                                </span>
+                                            </h2>
+                                            <h6 className='title'>Enrolled</h6>
+                                        </div>
+                                    </div>
+                                    <div className='lahguage-counter'>
+                                        <div className='counterup-wrapper'>
+                                            <h2 className='counter-item count-number secondary-color'>
+                                                <span className='odometer'>
+                                                    <Counter number={20} text='+' />
+                                                </span>
+                                            </h2>
+                                            <h6 className='title'>Languages</h6>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <ul className='shape-group'>
+                                <li
+                                    className='shape-3'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-15.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+
+                                <motion.li
+                                    className='shape-4 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/counterup/shape-05.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <li
+                                    className='shape-5'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/svg-icons/circle-big.svg'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+
+                                <li
+                                    className='shape-6'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/svg-icons/circle-small.svg'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+
+                                <motion.li
+                                    className='shape-7 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseReverse(25).x,
+                                        y: mouseReverse(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <li className='shape-8'>
+                    <picture>
+                        <img src='/assets/images/about/h-1-shape-01.png' alt='Shape' />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default HeroArea;
diff --git a/src/components/homes/home-language-academy/index.jsx b/src/components/homes/home-language-academy/index.tsx
similarity index 72%
rename from src/components/homes/home-language-academy/index.jsx
rename to src/components/homes/home-language-academy/index.tsx
index 838c221..de379ed 100644
--- a/src/components/homes/home-language-academy/index.jsx
+++ b/src/components/homes/home-language-academy/index.tsx
@@ -12,8 +12,13 @@ import BlogArea from '../home/blog-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
-                <Header no_top_bar={true} header_style='7' disable_full_width disable_category />
+            <div id='main-wrapper' className='main-wrapper'>
+                <Header
+                    no_top_bar={true}
+                    header_style='7'
+                    disable_full_width
+                    disable_category
+                />
                 <HeroArea />
                 <Features />
                 <AboutArea />
@@ -25,7 +30,7 @@ const index = () => {
                 <Footer />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home-language-academy/testimonial.jsx b/src/components/homes/home-language-academy/testimonial.tsx
similarity index 58%
rename from src/components/homes/home-language-academy/testimonial.jsx
rename to src/components/homes/home-language-academy/testimonial.tsx
index 015ebfe..e346c1b 100644
--- a/src/components/homes/home-language-academy/testimonial.jsx
+++ b/src/components/homes/home-language-academy/testimonial.tsx
@@ -1,7 +1,6 @@
-
 import React, { useEffect, useState } from 'react';
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation, Thumbs } from "swiper";
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperType, { Navigation, Thumbs } from 'swiper';
 import Link from 'next/link';
 
 const testimonial_contents = {
@@ -13,46 +12,56 @@ const testimonial_contents = {
             desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed mod tempor incid idunt enim minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix unde omnis iste natus error sit voluptatem. accusantium doloreq laudantum.',
             ratings: [1, 2, 3, 4, 5],
             name: 'Ray Sanchez',
-            title: 'Student'
+            title: 'Student',
         },
         {
             img: '/assets/images/testimonial/testimonial-09.png',
             desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed mod tempor incid idunt enim minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix unde omnis iste natus error sit voluptatem. accusantium doloreq laudantum.',
             ratings: [1, 2, 3, 4, 5],
             name: 'Thomas Lopez',
-            title: 'Designer'
+            title: 'Designer',
         },
         {
             img: '/assets/images/testimonial/testimonial-10.png',
             desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed mod tempor incid idunt enim minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix unde omnis iste natus error sit voluptatem. accusantium doloreq laudantum.',
             ratings: [1, 2, 3, 4, 5],
             name: 'Amber Page',
-            title: 'Developer'
+            title: 'Developer',
         },
         {
             img: '/assets/images/testimonial/testimonial-12.jpg',
             desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed mod tempor incid idunt enim minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix unde omnis iste natus error sit voluptatem. accusantium doloreq laudantum.',
             ratings: [1, 2, 3, 4, 5],
             name: 'Robert Tapp',
-            title: 'Content Creator'
-        }
-    ]
-}
+            title: 'Content Creator',
+        },
+    ],
+};
 
-const { pre_title, testimonial_data, text, title } = testimonial_contents;
+const { pre_title, testimonial_data, title } = testimonial_contents;
 
 const Testimonial = () => {
     const [loop, setLoop] = useState(false);
-    const [activeThumb, setActiveThumb] = useState();
-    useEffect(() => setLoop(true), [])
+    const [activeThumb, setActiveThumb] = useState<SwiperType | undefined>();
+    useEffect(() => setLoop(true), []);
     return (
-        <div className="testimonial-area-10 section-gap-equal edublink-animated-shape">
-            <div className="container edublink-animated-shape">
-                <div className="testimonial-heading-area">
-                    <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                        <span className="pre-title">{pre_title}</span>
-                        <h2 className="title" dangerouslySetInnerHTML={{__html: title}}></h2>
-                        <span className="shape-line"><i className="icon-19"></i></span>
+        <div className='testimonial-area-10 section-gap-equal edublink-animated-shape'>
+            <div className='container edublink-animated-shape'>
+                <div className='testimonial-heading-area'>
+                    <div
+                        className='section-title section-center'
+                        data-sal-delay='150'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <span className='pre-title'>{pre_title}</span>
+                        <h2
+                            className='title'
+                            dangerouslySetInnerHTML={{ __html: title }}
+                        ></h2>
+                        <span className='shape-line'>
+                            <i className='icon-19'></i>
+                        </span>
                     </div>
                 </div>
 
@@ -60,26 +69,27 @@ const Testimonial = () => {
                     slidesPerView={1}
                     centeredSlides={true}
                     loop={loop}
-                    loopedSlides= {3}
+                    loopedSlides={3}
                     speed={1000}
                     modules={[Navigation, Thumbs]}
                     thumbs={{ swiper: activeThumb }}
                     autoplay={{
-                        delay: 3000
+                        delay: 3000,
                     }}
-                    className="home-language-testimonial-activator swiper"
+                    className='home-language-testimonial-activator swiper'
                 >
-
                     {testimonial_data.map((item, i) => (
                         <SwiperSlide key={i}>
-                            <div className="testimonial-grid">
-                                <div className="content">
-                                    <div className="rating-icon">
-                                        {item.ratings.map((r, i) => <i key={i} className="icon-23"></i>)}
+                            <div className='testimonial-grid'>
+                                <div className='content'>
+                                    <div className='rating-icon'>
+                                        {item.ratings.map((r, i) => (
+                                            <i key={i} className='icon-23'></i>
+                                        ))}
                                     </div>
                                     <p>{item.desc}</p>
-                                    <h5 className="title">{item.name}</h5>
-                                    <span className="subtitle">{item.title}</span>
+                                    <h5 className='title'>{item.name}</h5>
+                                    <span className='subtitle'>{item.title}</span>
                                 </div>
                             </div>
                         </SwiperSlide>
@@ -87,22 +97,23 @@ const Testimonial = () => {
                 </Swiper>
 
                 <Swiper
-                    onSwiper={setActiveThumb}
+                    onSwiper={swiper => setActiveThumb(swiper)}
                     slidesPerView={1}
-                    spaceBetween= {0}
+                    spaceBetween={0}
                     centeredSlides={true}
                     loop={loop}
                     slideToClickedSlide={true}
                     modules={[Navigation, Thumbs]}
-                    className="swiper testimonial-thumbs testimonial-thumb-wrap"
+                    className='swiper testimonial-thumbs testimonial-thumb-wrap'
                 >
-
                     {testimonial_data.map((item, i) => (
                         <SwiperSlide key={i}>
-                            <div className="nav-thumb swiper-slide">
-                                <div className="clint-thumb">
+                            <div className='nav-thumb swiper-slide'>
+                                <div className='clint-thumb'>
                                     <p>{item.title}</p>
-                                    <img src={item.img} alt="Testimonial" />
+                                    <picture>
+                                        <img src={item.img} alt='Testimonial' />
+                                    </picture>
                                 </div>
                             </div>
                         </SwiperSlide>
@@ -110,7 +121,7 @@ const Testimonial = () => {
                 </Swiper>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default Testimonial;
\ No newline at end of file
+export default Testimonial;
diff --git a/src/components/homes/home-language-academy/video-area.jsx b/src/components/homes/home-language-academy/video-area.jsx
deleted file mode 100644
index 4d44d8e..0000000
--- a/src/components/homes/home-language-academy/video-area.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import useModal from '../../../hooks/use-modal';
-import VideoModal from '../../common/popup-modal/video-modal';
-
-const VideoArea = () => {
-    const { isVideoOpen, setIsVideoOpen } = useModal();
-    return (
-        <>
-            <div className="video-area-5 gap-bottom-equal">
-                <div className="container">
-                    <div className="row g-5 justify-content-center">
-                        <div className="col-lg-6">
-                            <div className="video-gallery">
-                                <div className="thumbnail">
-                                    <img src="/assets/images/others/video-5.webp" alt="Thumb" />
-                                    <button onClick={ ()=> setIsVideoOpen(true) } className="video-play-btn video-popup-activation"> 
-                                        <i className="icon-18"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-lg-6">
-                            <div className="video-gallery">
-                                <div className="thumbnail thumbnail-2">
-                                    <img src="/assets/images/others/video-6.webp" alt="Thumb" />
-                                    <button onClick={ ()=> setIsVideoOpen(true) } className="video-play-btn video-popup-activation"> 
-                                        <i className="icon-18"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {/* video modal start */}
-            <VideoModal isVideoOpen={isVideoOpen} setIsVideoOpen={setIsVideoOpen} videoId={'PICj5tr9hcc'} />
-            {/* video modal end */}
-        </>
-    )
-}
-
-export default VideoArea;
\ No newline at end of file
diff --git a/src/components/homes/home-language-academy/video-area.tsx b/src/components/homes/home-language-academy/video-area.tsx
new file mode 100644
index 0000000..f63ce8a
--- /dev/null
+++ b/src/components/homes/home-language-academy/video-area.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import useModal from '../../../hooks/use-modal';
+import VideoModal from '../../common/popup-modal/video-modal';
+
+const VideoArea = () => {
+    const { isVideoOpen, setIsVideoOpen } = useModal();
+    return (
+        <>
+            <div className='video-area-5 gap-bottom-equal'>
+                <div className='container'>
+                    <div className='row g-5 justify-content-center'>
+                        <div className='col-lg-6'>
+                            <div className='video-gallery'>
+                                <div className='thumbnail'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/video-5.webp'
+                                            alt='Thumb'
+                                        />
+                                    </picture>
+                                    <button
+                                        onClick={() => setIsVideoOpen(true)}
+                                        className='video-play-btn video-popup-activation'
+                                    >
+                                        <i className='icon-18'></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div className='col-lg-6'>
+                            <div className='video-gallery'>
+                                <div className='thumbnail thumbnail-2'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/video-6.webp'
+                                            alt='Thumb'
+                                        />
+                                    </picture>
+                                    <button
+                                        onClick={() => setIsVideoOpen(true)}
+                                        className='video-play-btn video-popup-activation'
+                                    >
+                                        <i className='icon-18'></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* video modal start */}
+            <VideoModal
+                isVideoOpen={isVideoOpen}
+                setIsVideoOpen={setIsVideoOpen}
+                videoId={'PICj5tr9hcc'}
+            />
+            {/* video modal end */}
+        </>
+    );
+};
+
+export default VideoArea;
diff --git a/src/components/homes/home-modern-schooling/ad-banner.jsx b/src/components/homes/home-modern-schooling/ad-banner.jsx
deleted file mode 100644
index 00391aa..0000000
--- a/src/components/homes/home-modern-schooling/ad-banner.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const AdBanner = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="modern-schooling-cta-wrapper edu-cta-banner-area-6 bg-image">
-            <div className="container">
-                <div className="edu-cta-banner">
-                    <div className="row justify-content-center">
-                        <div className="col-lg-6">
-                            <div className="thumbnail">
-                                <img src="/assets/images/cta/cta-girl-bg.webp" alt="girl image" />
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-01 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/cta/shape-43.png" alt="shape" />
-                                </motion.li>
-                                <li className="shape-02">
-                                    <img src="/assets/images/cta/shape-42.png" alt="shape" />
-                                </li>
-                                <motion.li className="shape-03 scene"
-                                    animate={ {
-                                        x: mouseDirection(40).x,
-                                        y: mouseDirection(40).y
-                                    } }
-                                >
-                                    <img src="/assets/images/cta/shape-40.png" alt="shape" />
-                                </motion.li>
-                                <motion.li className="shape-04 scene"
-                                    animate={ {
-                                        x: mouseReverse(35).x,
-                                        y: mouseReverse(35).y
-                                    } }
-                                >
-                                    <img src="/assets/images/cta/shape-38.png" alt="shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                        <div className="col-lg-6">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <h2 className="title">Get Your Quality <br /> Skills Certificate Through <br /> EduBlink </h2>
-                                <Link href="/contact-us" className="edu-btn btn-secondary">
-                                    Get started now<i className="icon-4"></i>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                    <ul className="shape-group">
-                        <motion.li className="shape-05 scene"
-                            animate={ {
-                                x: mouseReverse(40).x,
-                                y: mouseReverse(40).y
-                            } }
-                        >
-                            <img src="/assets/images/cta/shape-39.png" alt="shape" />
-                        </motion.li>
-                        <li className="shape-06">
-                            <img src="/assets/images/cta/cta-round.svg" alt="shape" />
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default AdBanner;
\ No newline at end of file
diff --git a/src/components/homes/home-modern-schooling/ad-banner.tsx b/src/components/homes/home-modern-schooling/ad-banner.tsx
new file mode 100644
index 0000000..93963f0
--- /dev/null
+++ b/src/components/homes/home-modern-schooling/ad-banner.tsx
@@ -0,0 +1,119 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const AdBanner = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='modern-schooling-cta-wrapper edu-cta-banner-area-6 bg-image'>
+            <div className='container'>
+                <div className='edu-cta-banner'>
+                    <div className='row justify-content-center'>
+                        <div className='col-lg-6'>
+                            <div className='thumbnail'>
+                                <picture>
+                                    <img
+                                        src='/assets/images/cta/cta-girl-bg.webp'
+                                        alt='girl image'
+                                    />
+                                </picture>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-01 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-43.png'
+                                            alt='shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <li className='shape-02'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-42.png'
+                                            alt='shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <motion.li
+                                    className='shape-03 scene'
+                                    animate={{
+                                        x: mouseDirection(40).x,
+                                        y: mouseDirection(40).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-40.png'
+                                            alt='shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-04 scene'
+                                    animate={{
+                                        x: mouseReverse(35).x,
+                                        y: mouseReverse(35).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-38.png'
+                                            alt='shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                        <div className='col-lg-6'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <h2 className='title'>
+                                    Get Your Quality <br /> Skills Certificate Through{' '}
+                                    <br /> EduBlink{' '}
+                                </h2>
+                                <Link
+                                    href='/contact-us'
+                                    className='edu-btn btn-secondary'
+                                >
+                                    Get started now<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                    <ul className='shape-group'>
+                        <motion.li
+                            className='shape-05 scene'
+                            animate={{
+                                x: mouseReverse(40).x,
+                                y: mouseReverse(40).y,
+                            }}
+                        >
+                            <picture>
+                                <img src='/assets/images/cta/shape-39.png' alt='shape' />
+                            </picture>
+                        </motion.li>
+                        <li className='shape-06'>
+                            <picture>
+                                <img src='/assets/images/cta/cta-round.svg' alt='shape' />
+                            </picture>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AdBanner;
diff --git a/src/components/homes/home-modern-schooling/blog-area.jsx b/src/components/homes/home-modern-schooling/blog-area.jsx
deleted file mode 100644
index 8d160ef..0000000
--- a/src/components/homes/home-modern-schooling/blog-area.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { blog_data } from '../../../data';
-
-const blog_items = blog_data.filter(blog => blog.modern_schooling_blog);
-
-const BlogArea = () => {
-    return (
-        <div className="edu-blog-area blog-area-6 bg-image section-gap-equal">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Latest Articles</span>
-                    <h2 className="title">Get News with EduBlink</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    {blog_items.map((blog, i) => {
-                        const { id, img, delay, date, sm_desc, title, category } = blog;
-                        return (
-                            <div key={i} className="col-lg-3 col-md-6 col-12" data-sal-delay={delay} data-sal="slide-up" data-sal-duration="800">
-                                <div className="edu-blog blog-style-6">
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            <Link href={`/blog-details/${id}`}>
-
-                                                <img src={img} alt="Blog Images" />
-
-                                            </Link>
-                                            <span className="date">{date}</span>
-                                        </div>
-                                        <div className="content position-top">
-                                            <div className="read-more-btn">
-                                                <Link href={`/blog-details/${id}`} className="btn-icon-round">
-                                                    <i className="icon-4"></i>
-                                                </Link>
-                                            </div>
-                                            <div className="category-wrap">
-                                                <Link href={`/blog-details/${id}`} className="blog-category">
-                                                    {category}
-                                                </Link>
-                                            </div>
-                                            <h5 className="title">
-                                                <Link href={`/blog-details/${id}`}>
-                                                    {title}
-                                                </Link>
-                                            </h5>
-                                            <p>{sm_desc}</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default BlogArea;
\ No newline at end of file
diff --git a/src/components/homes/home-modern-schooling/blog-area.tsx b/src/components/homes/home-modern-schooling/blog-area.tsx
new file mode 100644
index 0000000..43a69f9
--- /dev/null
+++ b/src/components/homes/home-modern-schooling/blog-area.tsx
@@ -0,0 +1,79 @@
+import Link from 'next/link';
+import React from 'react';
+import { blog_data } from '../../../data';
+
+const blog_items = blog_data.filter(blog => blog.modern_schooling_blog);
+
+const BlogArea = () => {
+    return (
+        <div className='edu-blog-area blog-area-6 bg-image section-gap-equal'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='100'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Latest Articles</span>
+                    <h2 className='title'>Get News with EduBlink</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {blog_items.map((blog, i) => {
+                        const { id, img, delay, date, sm_desc, title, category } = blog;
+                        return (
+                            <div
+                                key={i}
+                                className='col-lg-3 col-md-6 col-12'
+                                data-sal-delay={delay}
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='edu-blog blog-style-6'>
+                                    <div className='inner'>
+                                        <div className='thumbnail'>
+                                            <Link href={`/blog-details/${id}`}>
+                                                <picture>
+                                                    <img src={img} alt='Blog Images' />
+                                                </picture>
+                                            </Link>
+                                            <span className='date'>{date}</span>
+                                        </div>
+                                        <div className='content position-top'>
+                                            <div className='read-more-btn'>
+                                                <Link
+                                                    href={`/blog-details/${id}`}
+                                                    className='btn-icon-round'
+                                                >
+                                                    <i className='icon-4'></i>
+                                                </Link>
+                                            </div>
+                                            <div className='category-wrap'>
+                                                <Link
+                                                    href={`/blog-details/${id}`}
+                                                    className='blog-category'
+                                                >
+                                                    {category}
+                                                </Link>
+                                            </div>
+                                            <h5 className='title'>
+                                                <Link href={`/blog-details/${id}`}>
+                                                    {title}
+                                                </Link>
+                                            </h5>
+                                            <p>{sm_desc}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BlogArea;
diff --git a/src/components/homes/home-modern-schooling/brand-area.jsx b/src/components/homes/home-modern-schooling/brand-area.tsx
similarity index 50%
rename from src/components/homes/home-modern-schooling/brand-area.jsx
rename to src/components/homes/home-modern-schooling/brand-area.tsx
index 871a014..8a872d3 100644
--- a/src/components/homes/home-modern-schooling/brand-area.jsx
+++ b/src/components/homes/home-modern-schooling/brand-area.tsx
@@ -6,23 +6,25 @@ const images = [
     '/assets/images/brand/brand-03.png',
     '/assets/images/brand/brand-04.png',
     '/assets/images/brand/brand-05.png',
-    '/assets/images/brand/brand-06.png'
+    '/assets/images/brand/brand-06.png',
 ];
 
 const BrandArea = () => {
     return (
-        <div className="edu-brand-area brand-area-6">
-            <div className="container">
-                <div className="brand-grid-wrap brand-style-2">
+        <div className='edu-brand-area brand-area-6'>
+            <div className='container'>
+                <div className='brand-grid-wrap brand-style-2'>
                     {images.map((img, i) => (
-                        <div key={i} className="brand-grid">
-                            <img src={img} alt="Brand Logo" />
+                        <div key={i} className='brand-grid'>
+                            <picture>
+                                <img src={img} alt='Brand Logo' />
+                            </picture>
                         </div>
                     ))}
                 </div>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default BrandArea;
\ No newline at end of file
+export default BrandArea;
diff --git a/src/components/homes/home-modern-schooling/courses.jsx b/src/components/homes/home-modern-schooling/courses.jsx
deleted file mode 100644
index 92b20b1..0000000
--- a/src/components/homes/home-modern-schooling/courses.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import { course_data } from '../../../data';
-import CourseTypeThree from '../../course/course-type-three';
-
-const Courses = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="home-eight-course edu-course-area course-area-8 gap-tb-text bg-image">
-            <div className="container edublink-animated-shape">
-                <ul>
-                    <li>
-                        <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                            <span className="pre-title">Popular Courses</span>
-                            <h2 className="title">Pick A Course To Get Started</h2>
-                            <span className="shape-line"><i className="icon-19"></i></span>
-                        </div>
-                    </li>
-                    <li>
-                        <div className="course-view-all" data-sal-delay="150" data-sal="slide-up" data-sal-duration="1200">
-                            <Link href="/course-style-1" className="edu-btn">
-                                Browse more courses<i className="icon-4"></i>
-                            </Link>
-                        </div>
-                    </li>
-                </ul>
-                <div className="row g-5">
-                    {course_data.slice(2,6).map((course) => {
-                        return (
-                            <div className="col-xl-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800" key={course.id}>
-                                <CourseTypeThree data={course} />
-                            </div>
-                        )
-                    })}
-                </div>
-
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                    </motion.li>
-                    <li className="shape-2">
-                        <span></span>
-                    </li>
-                    <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseReverse(30).x,
-                            y: mouseReverse(30).y
-                        } }
-                    >
-                        <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                    </motion.li>
-                    <li className="shape-4 sal-animate" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                        <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                    </li>
-                </ul>
-            </div>
-        </div>
-    );
-}
-
-export default Courses;
\ No newline at end of file
diff --git a/src/components/homes/home-modern-schooling/courses.tsx b/src/components/homes/home-modern-schooling/courses.tsx
new file mode 100644
index 0000000..414a265
--- /dev/null
+++ b/src/components/homes/home-modern-schooling/courses.tsx
@@ -0,0 +1,108 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import { course_data } from '../../../data';
+import CourseTypeThree from '../../course/course-type-three';
+
+const Courses = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='home-eight-course edu-course-area course-area-8 gap-tb-text bg-image'>
+            <div className='container edublink-animated-shape'>
+                <ul>
+                    <li>
+                        <div
+                            className='section-title section-left'
+                            data-sal-delay='150'
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <span className='pre-title'>Popular Courses</span>
+                            <h2 className='title'>Pick A Course To Get Started</h2>
+                            <span className='shape-line'>
+                                <i className='icon-19'></i>
+                            </span>
+                        </div>
+                    </li>
+                    <li>
+                        <div
+                            className='course-view-all'
+                            data-sal-delay='150'
+                            data-sal='slide-up'
+                            data-sal-duration='1200'
+                        >
+                            <Link href='/course-style-1' className='edu-btn'>
+                                Browse more courses<i className='icon-4'></i>
+                            </Link>
+                        </div>
+                    </li>
+                </ul>
+                <div className='row g-5'>
+                    {course_data.slice(2, 6).map(course => {
+                        return (
+                            <div
+                                className='col-xl-6'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                                key={course.id}
+                            >
+                                <CourseTypeThree data={course} />
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/about/shape-13.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                    <li className='shape-2'>
+                        <span></span>
+                    </li>
+                    <motion.li
+                        className='shape-3 scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseReverse(30).x,
+                            y: mouseReverse(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/about/shape-13.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                    <li
+                        className='shape-4 sal-animate'
+                        data-sal-delay='1000'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                    >
+                        <picture>
+                            <img
+                                src='/assets/images/counterup/shape-02.png'
+                                alt='Shape'
+                            />
+                        </picture>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default Courses;
diff --git a/src/components/homes/home-modern-schooling/faq-area.jsx b/src/components/homes/home-modern-schooling/faq-area.jsx
deleted file mode 100644
index 6325d8a..0000000
--- a/src/components/homes/home-modern-schooling/faq-area.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const accordion_items = [
-    {
-        id: 'collapseOne', 
-        show: true, 
-        title: 'How can I contact a school directly?',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    },
-    {
-        id: 'collapseTwo', 
-        show: false, 
-        title: 'How do I find a school where I want to study?',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    },
-    {
-        id: 'collapseThree', 
-        show: false, 
-        title: 'Where should I study abroad?',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    }
-];
-
-
-const FaqArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-faq-area faq-style-5 section-gap-equal">
-            <div className="container">
-                <div className="row g-5 row--45">
-                    <div className="col-lg-6">
-                        <div className="edu-faq-gallery">
-                            <div className="faq-thumbnail thumbnail-1" data-sal-delay="50" data-sal="slide-right" data-sal-duration="800">
-                                <img src="/assets/images/others/faq-5.webp" alt="Faq Images" />
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(40).x,
-                                        y: mouseReverse(40).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-35.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-36.png" alt="Shape Images" />
-                                </motion.li>
-                                <li className="shape-3">
-                                    <img src="/assets/images/faq/shape-34.png" alt="Shape Images" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                        <div className="edu-faq-content">
-                            <div className="section-title section-left">
-                                <span className="pre-title">FAQ’s</span>
-                                <h2 className="title">Over 10 Years in <span className="color-secondary">Distant <br /> Skill</span> Development</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                            </div>
-                            <div className="faq-accordion" id="faq-accordion">
-                                <div className="accordion">
-                                    {accordion_items.map((item, i) => {
-                                        const { desc, id, show, title } = item;
-                                        return (
-                                            <div key={i} className="accordion-item">
-                                                <h5 className="accordion-header">
-                                                    <button className={`accordion-button ${show ? '' : 'collapsed'}`} type="button" data-bs-toggle="collapse" data-bs-target={`#${id}`} aria-expanded={show ? 'true' : 'false'}>
-                                                        {title}
-                                                    </button>
-                                                </h5>
-                                                <div id={id} className={`accordion-collapse collapse ${show ? 'show' : ''}`} data-bs-parent="#faq-accordion">
-                                                    <div className="accordion-body">
-                                                        <p>{desc}</p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        )
-                                    })}
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(40).x,
-                                        y: mouseReverse(40).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-02.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <span></span>
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default FaqArea;
\ No newline at end of file
diff --git a/src/components/homes/home-modern-schooling/faq-area.tsx b/src/components/homes/home-modern-schooling/faq-area.tsx
new file mode 100644
index 0000000..3b9c2a4
--- /dev/null
+++ b/src/components/homes/home-modern-schooling/faq-area.tsx
@@ -0,0 +1,189 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const accordion_items = [
+    {
+        id: 'collapseOne',
+        show: true,
+        title: 'How can I contact a school directly?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+    {
+        id: 'collapseTwo',
+        show: false,
+        title: 'How do I find a school where I want to study?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+    {
+        id: 'collapseThree',
+        show: false,
+        title: 'Where should I study abroad?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+];
+
+const FaqArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-faq-area faq-style-5 section-gap-equal'>
+            <div className='container'>
+                <div className='row g-5 row--45'>
+                    <div className='col-lg-6'>
+                        <div className='edu-faq-gallery'>
+                            <div
+                                className='faq-thumbnail thumbnail-1'
+                                data-sal-delay='50'
+                                data-sal='slide-right'
+                                data-sal-duration='800'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/others/faq-5.webp'
+                                        alt='Faq Images'
+                                    />
+                                </picture>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(40).x,
+                                        y: mouseReverse(40).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-35.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-36.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <li className='shape-3'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-34.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div
+                        className='col-lg-6'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='edu-faq-content'>
+                            <div className='section-title section-left'>
+                                <span className='pre-title'>FAQ’s</span>
+                                <h2 className='title'>
+                                    Over 10 Years in{' '}
+                                    <span className='color-secondary'>
+                                        Distant <br /> Skill
+                                    </span>{' '}
+                                    Development
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                            </div>
+                            <div className='faq-accordion' id='faq-accordion'>
+                                <div className='accordion'>
+                                    {accordion_items.map((item, i) => {
+                                        const { desc, id, show, title } = item;
+                                        return (
+                                            <div key={i} className='accordion-item'>
+                                                <h5 className='accordion-header'>
+                                                    <button
+                                                        className={`accordion-button ${
+                                                            show ? '' : 'collapsed'
+                                                        }`}
+                                                        type='button'
+                                                        data-bs-toggle='collapse'
+                                                        data-bs-target={`#${id}`}
+                                                        aria-expanded={
+                                                            show ? 'true' : 'false'
+                                                        }
+                                                    >
+                                                        {title}
+                                                    </button>
+                                                </h5>
+                                                <div
+                                                    id={id}
+                                                    className={`accordion-collapse collapse ${
+                                                        show ? 'show' : ''
+                                                    }`}
+                                                    data-bs-parent='#faq-accordion'
+                                                >
+                                                    <div className='accordion-body'>
+                                                        <p>{desc}</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(40).x,
+                                        y: mouseReverse(40).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-02.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <span></span>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FaqArea;
diff --git a/src/components/homes/home-modern-schooling/hero-area.jsx b/src/components/homes/home-modern-schooling/hero-area.jsx
deleted file mode 100644
index 5db54c7..0000000
--- a/src/components/homes/home-modern-schooling/hero-area.jsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const HeroArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="hero-banner hero-style-8">
-            <div className="container edublink-animated-shape">
-                <div className="row align-items-center">
-                    <div className="col-lg-6">
-                        <div className="banner-content">
-                            <h1 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Find Your Best <br /> Courses to <span className="color-secondary">Develope</span> <br />your skills</h1>
-                            <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.</p>
-                            <div className="banner-search" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <div className="input-group">
-                                    <input type="text" className="form-control" placeholder="What do you want learn?" />
-                                    <button className="search-btn" type="button"><i className="icon-2"></i></button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-6">
-                        <div className="banner-thumbnail">
-                            <div className="thumbnail" data-sal-delay="500" data-sal="slide-left" data-sal-duration="1000">
-                                <img src="/assets/images/banner/home8-vactor-bg.webp" alt="vactor Image" />
-                            </div>
-
-                            <div className="instructor-info" data-sal-delay="600" data-sal="slide-up" data-sal-duration="1000">
-                                <div className="inner">
-                                    <h5 className="title">Instrunctor</h5>
-                                    <div className="media">
-                                        <div className="thumb">
-                                            <img src="/assets/images/banner/author-1.png" alt="Images" />
-                                        </div>
-                                        <div className="content">
-                                            <span>200+</span> Instactors
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <ul className="shape-group">
-                                <li className="shape-1" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/others/shape-30.png" alt="Shape" />
-                                </li>
-
-                                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/others/shape-31.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-3 scene shape-light" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-09.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-3 scene shape-dark" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/dark-shape-09.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-4 scene shape-light" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-13.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-4 scene shape-dark" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/dark-shape-13.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                
-                <ul className="shape-group">
-                    <li className="shape-5">
-                        <span></span>
-                    </li>
-                    <motion.li className="shape-6 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                        animate={ {
-                            x: mouseReverse(40).x,
-                            y: mouseReverse(40).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-32.png" alt="Shape" />
-                    </motion.li>
-                </ul>
-            </div>
-        </div>
-    )
-}
-
-export default HeroArea;
\ No newline at end of file
diff --git a/src/components/homes/home-modern-schooling/hero-area.tsx b/src/components/homes/home-modern-schooling/hero-area.tsx
new file mode 100644
index 0000000..49acd5d
--- /dev/null
+++ b/src/components/homes/home-modern-schooling/hero-area.tsx
@@ -0,0 +1,224 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const HeroArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='hero-banner hero-style-8'>
+            <div className='container edublink-animated-shape'>
+                <div className='row align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='banner-content'>
+                            <h1
+                                className='title'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Find Your Best <br /> Courses to{' '}
+                                <span className='color-secondary'>Develope</span> <br />
+                                your skills
+                            </h1>
+                            <p
+                                data-sal-delay='200'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit.
+                            </p>
+                            <div
+                                className='banner-search'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <div className='input-group'>
+                                    <input
+                                        type='text'
+                                        className='form-control'
+                                        placeholder='What do you want learn?'
+                                    />
+                                    <button className='search-btn' type='button'>
+                                        <i className='icon-2'></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='col-lg-6'>
+                        <div className='banner-thumbnail'>
+                            <div
+                                className='thumbnail'
+                                data-sal-delay='500'
+                                data-sal='slide-left'
+                                data-sal-duration='1000'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/banner/home8-vactor-bg.webp'
+                                        alt='vactor Image'
+                                    />
+                                </picture>
+                            </div>
+
+                            <div
+                                className='instructor-info'
+                                data-sal-delay='600'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <div className='inner'>
+                                    <h5 className='title'>Instrunctor</h5>
+                                    <div className='media'>
+                                        <div className='thumb'>
+                                            <picture>
+                                                <img
+                                                    src='/assets/images/banner/author-1.png'
+                                                    alt='Images'
+                                                />
+                                            </picture>
+                                        </div>
+                                        <div className='content'>
+                                            <span>200+</span> Instactors
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <ul className='shape-group'>
+                                <li
+                                    className='shape-1'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/shape-30.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/shape-31.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-3 scene shape-light'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-09.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-3 scene shape-dark'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/dark-shape-09.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-4 scene shape-light'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-4 scene shape-dark'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/dark-shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <ul className='shape-group'>
+                    <li className='shape-5'>
+                        <span></span>
+                    </li>
+                    <motion.li
+                        className='shape-6 scene'
+                        data-sal-delay='1000'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                        animate={{
+                            x: mouseReverse(40).x,
+                            y: mouseReverse(40).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-32.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default HeroArea;
diff --git a/src/components/homes/home-modern-schooling/index.jsx b/src/components/homes/home-modern-schooling/index.tsx
similarity index 56%
rename from src/components/homes/home-modern-schooling/index.jsx
rename to src/components/homes/home-modern-schooling/index.tsx
index 6736c0f..0958a6b 100644
--- a/src/components/homes/home-modern-schooling/index.jsx
+++ b/src/components/homes/home-modern-schooling/index.tsx
@@ -13,21 +13,21 @@ import TopCategories from './top-categories';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
-                <Header no_top_bar={true}/>
-                <HeroArea/>
-                <BrandArea/>
-                <TopCategories/>
-                <Courses/>
-                <FaqArea/>
-                <CounterArea home_8={true}/>
-                <TestimonialArea/>
-                <AdBanner/>
-                <BlogArea/>
-                <Footer/>
+            <div id='main-wrapper' className='main-wrapper'>
+                <Header no_top_bar={true} />
+                <HeroArea />
+                <BrandArea />
+                <TopCategories />
+                <Courses />
+                <FaqArea />
+                <CounterArea />
+                <TestimonialArea />
+                <AdBanner />
+                <BlogArea />
+                <Footer />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home-modern-schooling/testimonial-area.jsx b/src/components/homes/home-modern-schooling/testimonial-area.jsx
deleted file mode 100644
index 7b80dd3..0000000
--- a/src/components/homes/home-modern-schooling/testimonial-area.jsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Pagination } from 'swiper';
-
-const testimonials = [
-    {
-        img: '/assets/images/testimonial/testimonial-05.png',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-        ratings: [1, 2, 3, 4, 5],
-        name: 'Ray Sanchez',
-        title: 'Student'
-    },
-    {
-        img: '/assets/images/testimonial/testimonial-06.png',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-        ratings: [1, 2, 3, 4, 5],
-        name: 'Thomas Lopez',
-        title: 'Designer'
-    },
-    {
-        img: '/assets/images/testimonial/testimonial-07.png',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-        ratings: [1, 2, 3, 4, 5],
-        name: 'Amber Page',
-        title: 'Developer'
-    },
-    {
-        img: '/assets/images/testimonial/testimonial-06.png',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-        ratings: [1, 2, 3, 4, 5],
-        name: 'Thomas Lopez',
-        title: 'Designer'
-    }
-];
-
-const TestimonialArea = () => {
-    const [loop, setLoop] = useState(false);
-    useEffect(() => setLoop(true), [])
-    return (
-      <div className="testimonial-area-8 section-gap-equal">
-            <div className="container edublink-animated-shape">
-                <div className="row justify-content-center">
-                    <div className="col-lg-6">
-                        <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                            <span className="pre-title">Testimonials</span>
-                            <h2 className="title">What Our Students <br /> Have To Say</h2>
-                            <span className="shape-line"><i className="icon-19"></i></span>
-                        </div>
-                    </div>
-                </div>
-                <Swiper
-                    className="testimonial-activation swiper"
-                    slidesPerView={1}
-                    spaceBetween={0}
-                    loop={loop}
-                    modules={[Pagination,Autoplay]}
-                    grabCursor={true}
-                    speed={1000}
-                    autoplay={{
-                        delay: 3000
-                    }}
-                    breakpoints={{
-                        768: {
-                            slidesPerView: 2
-                        },
-                        992: {
-                            slidesPerView: 3
-                        }
-                    }}
-                    pagination={{
-                        el: '.swiper-pagination',
-                        type: 'bullets',
-                        clickable: true
-                    }}
-                >
-                    {testimonials.map((item, i) => {
-                        const {img,desc,name,ratings,title } = item;
-                        return (
-                            <SwiperSlide key={i}>
-                                <div className="testimonial-slide">
-                                    <div className="content">
-                                        <div className="author-info">
-                                            <div className="thumb">
-                                                <img src={img} alt="Testimonial" />
-                                            </div>
-                                        </div>
-                                        <p>{desc}</p>
-                                        <div className="rating-icon">
-                                            {ratings.map(r => <i key={r} className="icon-23"></i>)}
-                                        </div>
-                                        <div className="info">
-                                            <h5 className="title">{name}</h5>
-                                            <span className="subtitle">{title}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </SwiperSlide>
-                        )
-                    })}
-                </Swiper>
-                <div className="swiper-pagination"></div>
-            </div>
-            <ul className="shape-group">
-                <li className="shape-3" data-sal-delay="200" data-sal="fade" data-sal-duration="1000">
-                    <img className="d-block-shape-light" src="/assets/images/others/map-shape-3.png" alt="Shape" />
-                    <img className="d-none-shape-dark" src="/assets/images/others/dark-map-2-shape-3.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    )
-}
-
-export default TestimonialArea;
\ No newline at end of file
diff --git a/src/components/homes/home-modern-schooling/testimonial-area.tsx b/src/components/homes/home-modern-schooling/testimonial-area.tsx
new file mode 100644
index 0000000..30bddac
--- /dev/null
+++ b/src/components/homes/home-modern-schooling/testimonial-area.tsx
@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper';
+
+const testimonials = [
+    {
+        img: '/assets/images/testimonial/testimonial-05.png',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+        ratings: [1, 2, 3, 4, 5],
+        name: 'Ray Sanchez',
+        title: 'Student',
+    },
+    {
+        img: '/assets/images/testimonial/testimonial-06.png',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+        ratings: [1, 2, 3, 4, 5],
+        name: 'Thomas Lopez',
+        title: 'Designer',
+    },
+    {
+        img: '/assets/images/testimonial/testimonial-07.png',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+        ratings: [1, 2, 3, 4, 5],
+        name: 'Amber Page',
+        title: 'Developer',
+    },
+    {
+        img: '/assets/images/testimonial/testimonial-06.png',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+        ratings: [1, 2, 3, 4, 5],
+        name: 'Thomas Lopez',
+        title: 'Designer',
+    },
+];
+
+const TestimonialArea = () => {
+    const [loop, setLoop] = useState(false);
+    useEffect(() => setLoop(true), []);
+    return (
+        <div className='testimonial-area-8 section-gap-equal'>
+            <div className='container edublink-animated-shape'>
+                <div className='row justify-content-center'>
+                    <div className='col-lg-6'>
+                        <div
+                            className='section-title section-center'
+                            data-sal-delay='150'
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <span className='pre-title'>Testimonials</span>
+                            <h2 className='title'>
+                                What Our Students <br /> Have To Say
+                            </h2>
+                            <span className='shape-line'>
+                                <i className='icon-19'></i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <Swiper
+                    className='testimonial-activation swiper'
+                    slidesPerView={1}
+                    spaceBetween={0}
+                    loop={loop}
+                    modules={[Pagination, Autoplay]}
+                    grabCursor={true}
+                    speed={1000}
+                    autoplay={{
+                        delay: 3000,
+                    }}
+                    breakpoints={{
+                        768: {
+                            slidesPerView: 2,
+                        },
+                        992: {
+                            slidesPerView: 3,
+                        },
+                    }}
+                    pagination={{
+                        el: '.swiper-pagination',
+                        type: 'bullets',
+                        clickable: true,
+                    }}
+                >
+                    {testimonials.map((item, i) => {
+                        const { img, desc, name, ratings, title } = item;
+                        return (
+                            <SwiperSlide key={i}>
+                                <div className='testimonial-slide'>
+                                    <div className='content'>
+                                        <div className='author-info'>
+                                            <div className='thumb'>
+                                                <picture>
+                                                    <img src={img} alt='Testimonial' />
+                                                </picture>
+                                            </div>
+                                        </div>
+                                        <p>{desc}</p>
+                                        <div className='rating-icon'>
+                                            {ratings.map(r => (
+                                                <i key={r} className='icon-23'></i>
+                                            ))}
+                                        </div>
+                                        <div className='info'>
+                                            <h5 className='title'>{name}</h5>
+                                            <span className='subtitle'>{title}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </SwiperSlide>
+                        );
+                    })}
+                </Swiper>
+                <div className='swiper-pagination'></div>
+            </div>
+            <ul className='shape-group'>
+                <li
+                    className='shape-3'
+                    data-sal-delay='200'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img
+                            className='d-block-shape-light'
+                            src='/assets/images/others/map-shape-3.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                    <picture>
+                        <img
+                            className='d-none-shape-dark'
+                            src='/assets/images/others/dark-map-2-shape-3.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default TestimonialArea;
diff --git a/src/components/homes/home-modern-schooling/top-categories.jsx b/src/components/homes/home-modern-schooling/top-categories.jsx
deleted file mode 100644
index 10cf269..0000000
--- a/src/components/homes/home-modern-schooling/top-categories.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-function Category({ delay, color, icon, icon_class, title, course }) {
-    return (
-        <div className="col-lg-4 col-md-6" data-sal-delay={delay} data-sal="slide-up" data-sal-duration="800">
-            <div className={`categorie-grid categorie-style-4 ${color} edublink-svg-animate`}>
-                <div className="icon">
-                    <i className={`${icon} ${icon_class ? icon_class : ''}`}></i>
-                </div>
-                <div className="content">
-                    <Link href="/course-style-1">
-
-                        <h5 className="title">{title}</h5>
-
-                    </Link>
-                    <span className="course-count">{course} Courses</span>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-const TopCategories = () => {
-    return (
-        <div className="edu-categorie-area categorie-area-4 edu-section-gap">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <h2 className="title">Top Categories</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                    <p>Consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore</p>
-                </div>
-
-                <div className="row g-5">
-                    <Category delay="50" color="color-primary-style" icon="icon-9" title="Business Management" course="38" />
-
-                    <Category delay="100" color="color-secondary-style" icon="icon-9" icon_class="art-design"
-                    title="Arts & Design" course="40" />
-
-                    <Category delay="150" color="color-extra01-style" icon="icon-11" icon_class="personal-development"
-                    title="Personal Development" course="42" />
-
-                    <Category delay="50" color="color-tertiary-style" icon="icon-12" icon_class="health-fitness"
-                    title="Health & Fitness" course="36" />
-
-                    <Category delay="100" color="color-extra02-style" icon="icon-13" icon_class="data-science"
-                    title="Data Science" course="35" />
-
-                    <Category delay="150" color="color-extra03-style" icon="icon-14" title="Marketing" course="28" />
-
-                    <Category delay="50" color="color-extra04-style" icon="icon-15" title="Business & Finance" course="25" />
-
-                    <Category delay="100" color="color-extra05-style" icon="icon-16" icon_class="computer-science" title="Computer Science" course="26" />
-
-                    <Category delay="150" color="color-extra06-style" icon="icon-17" icon_class="video-photography" title="Video & Photography" course="22" />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default TopCategories;
\ No newline at end of file
diff --git a/src/components/homes/home-modern-schooling/top-categories.tsx b/src/components/homes/home-modern-schooling/top-categories.tsx
new file mode 100644
index 0000000..3702205
--- /dev/null
+++ b/src/components/homes/home-modern-schooling/top-categories.tsx
@@ -0,0 +1,142 @@
+import Link from 'next/link';
+import React from 'react';
+
+type CategoryProps = {
+    delay: string;
+    color: string;
+    icon: string;
+    icon_class?: string;
+    title: string;
+    course: string;
+};
+
+function Category({ delay, color, icon, icon_class, title, course }: CategoryProps) {
+    return (
+        <div
+            className='col-lg-4 col-md-6'
+            data-sal-delay={delay}
+            data-sal='slide-up'
+            data-sal-duration='800'
+        >
+            <div
+                className={`categorie-grid categorie-style-4 ${color} edublink-svg-animate`}
+            >
+                <div className='icon'>
+                    <i className={`${icon} ${icon_class ? icon_class : ''}`}></i>
+                </div>
+                <div className='content'>
+                    <Link href='/course-style-1'>
+                        <h5 className='title'>{title}</h5>
+                    </Link>
+                    <span className='course-count'>{course} Courses</span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+const TopCategories = () => {
+    return (
+        <div className='edu-categorie-area categorie-area-4 edu-section-gap'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <h2 className='title'>Top Categories</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                    <p>
+                        Consectetur adipiscing elit sed do eiusmod tempor incididunt ut
+                        labore et dolore
+                    </p>
+                </div>
+
+                <div className='row g-5'>
+                    <Category
+                        delay='50'
+                        color='color-primary-style'
+                        icon='icon-9'
+                        title='Business Management'
+                        course='38'
+                    />
+
+                    <Category
+                        delay='100'
+                        color='color-secondary-style'
+                        icon='icon-9'
+                        icon_class='art-design'
+                        title='Arts & Design'
+                        course='40'
+                    />
+
+                    <Category
+                        delay='150'
+                        color='color-extra01-style'
+                        icon='icon-11'
+                        icon_class='personal-development'
+                        title='Personal Development'
+                        course='42'
+                    />
+
+                    <Category
+                        delay='50'
+                        color='color-tertiary-style'
+                        icon='icon-12'
+                        icon_class='health-fitness'
+                        title='Health & Fitness'
+                        course='36'
+                    />
+
+                    <Category
+                        delay='100'
+                        color='color-extra02-style'
+                        icon='icon-13'
+                        icon_class='data-science'
+                        title='Data Science'
+                        course='35'
+                    />
+
+                    <Category
+                        delay='150'
+                        color='color-extra03-style'
+                        icon='icon-14'
+                        title='Marketing'
+                        course='28'
+                    />
+
+                    <Category
+                        delay='50'
+                        color='color-extra04-style'
+                        icon='icon-15'
+                        title='Business & Finance'
+                        course='25'
+                    />
+
+                    <Category
+                        delay='100'
+                        color='color-extra05-style'
+                        icon='icon-16'
+                        icon_class='computer-science'
+                        title='Computer Science'
+                        course='26'
+                    />
+
+                    <Category
+                        delay='150'
+                        color='color-extra06-style'
+                        icon='icon-17'
+                        icon_class='video-photography'
+                        title='Video & Photography'
+                        course='22'
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TopCategories;
diff --git a/src/components/homes/home-online-academy/blog-area.jsx b/src/components/homes/home-online-academy/blog-area.jsx
deleted file mode 100644
index 15f454b..0000000
--- a/src/components/homes/home-online-academy/blog-area.jsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { blog_data } from '../../../data';
-
-const blog_items = blog_data.filter(blog => blog.home_4);
-const large_blog = blog_items.find(blog => blog.large);
-const sm_blogs = blog_items.filter(blog => !blog.large)
-
-const BlogArea = () => {
-    return (
-        <div className="edu-blog-area blog-area-3 edu-section-gap">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="50" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Latest Articles</span>
-                    <h2 className="title">Get News with EduBlink</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5 row--45">
-                    <div className="col-lg-6 col-12" data-sal-delay="50" data-sal="slide-up" data-sal-duration="800">
-                        <div className="edu-blog blog-style-2 first-large-blog">
-                            <div className="inner">
-                                <div className="thumbnail">
-                                    <Link href={`/blog-details/${large_blog.id}`}>
-
-                                        <img src={large_blog.img} alt="Blog Images" />
-
-                                    </Link>
-                                </div>
-                                <div className="content">
-                                    <div className="blog-date">
-                                        <span className="day">{large_blog.date.split(' ')[1]}</span>
-                                        <span className="month">{large_blog.date.split(' ')[0]}</span>
-                                    </div>
-                                    <div className="category-wrap">
-                                        <Link href={`/blog-details/${large_blog.id}`} className="blog-category">
-                                            {large_blog.category}
-                                        </Link>
-                                    </div>
-                                    <h4 className="title">
-                                        <Link href={`/blog-details/${large_blog.id}`}>
-                                            {large_blog.title}
-                                        </Link>
-                                    </h4>
-                                    <p>Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.</p>
-                                    <ul className="blog-meta">
-                                        <li><i className="icon-25"></i>By <a href="#">{large_blog.author}</a></li>
-                                        <li><i className="icon-28"></i>Com {large_blog.comment}</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div className="col-lg-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                        {sm_blogs.map((blog) => {
-                            const { id, img, date, category, title, author, comment } = blog;
-                            return (
-                                <div key={id} className="edu-blog blog-style-2">
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            <Link href={`/blog-details/${id}`}>
-
-                                                <img src={img} alt="Blog Images" />
-
-                                            </Link>
-                                            <div className="blog-date">
-                                                <span className="day">{date.split(' ')[1]}</span>
-                                                <span className="month">{date.split(' ')[0]}</span>
-                                            </div>
-                                        </div>
-                                        <div className="content">
-                                            <div className="category-wrap">
-                                                <Link href={`/blog-details/${id}`} className="blog-category">
-                                                {category}
-                                                </Link>
-                                            </div>
-                                            <h5 className="title">
-                                                <Link href={`/blog-details/${id}`}>
-                                                {title}
-                                                </Link>
-                                            </h5>
-                                            <ul className="blog-meta">
-                                                <li><i className="icon-25"></i>By <a href="#">{author}</a></li>
-                                                <li><i className="icon-28"></i>Com {comment}</li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default BlogArea;
\ No newline at end of file
diff --git a/src/components/homes/home-online-academy/blog-area.tsx b/src/components/homes/home-online-academy/blog-area.tsx
new file mode 100644
index 0000000..318c375
--- /dev/null
+++ b/src/components/homes/home-online-academy/blog-area.tsx
@@ -0,0 +1,145 @@
+import Link from 'next/link';
+import React from 'react';
+import { blog_data } from '../../../data';
+
+const blog_items = blog_data.filter(blog => blog.home_4);
+const large_blog = blog_items.find(blog => blog.large);
+const sm_blogs = blog_items.filter(blog => !blog.large);
+
+const BlogArea = () => {
+    return (
+        <div className='edu-blog-area blog-area-3 edu-section-gap'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='50'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Latest Articles</span>
+                    <h2 className='title'>Get News with EduBlink</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5 row--45'>
+                    <div
+                        className='col-lg-6 col-12'
+                        data-sal-delay='50'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='edu-blog blog-style-2 first-large-blog'>
+                            <div className='inner'>
+                                <div className='thumbnail'>
+                                    <Link href={`/blog-details/${large_blog.id}`}>
+                                        <picture>
+                                            <img src={large_blog.img} alt='Blog Images' />
+                                        </picture>
+                                    </Link>
+                                </div>
+                                <div className='content'>
+                                    <div className='blog-date'>
+                                        <span className='day'>
+                                            {large_blog.date.split(' ')[1]}
+                                        </span>
+                                        <span className='month'>
+                                            {large_blog.date.split(' ')[0]}
+                                        </span>
+                                    </div>
+                                    <div className='category-wrap'>
+                                        <Link
+                                            href={`/blog-details/${large_blog.id}`}
+                                            className='blog-category'
+                                        >
+                                            {large_blog.category}
+                                        </Link>
+                                    </div>
+                                    <h4 className='title'>
+                                        <Link href={`/blog-details/${large_blog.id}`}>
+                                            {large_blog.title}
+                                        </Link>
+                                    </h4>
+                                    <p>
+                                        Lorem ipsum dolor sit amet consec tetur
+                                        adipisicing sed eiusmod tempor incid idunt labore.
+                                    </p>
+                                    <ul className='blog-meta'>
+                                        <li>
+                                            <i className='icon-25'></i>By{' '}
+                                            <a href='#'>{large_blog.author}</a>
+                                        </li>
+                                        <li>
+                                            <i className='icon-28'></i>Com{' '}
+                                            {large_blog.comment}
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        className='col-lg-6'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        {sm_blogs.map(blog => {
+                            const { id, img, date, category, title, author, comment } =
+                                blog;
+                            return (
+                                <div key={id} className='edu-blog blog-style-2'>
+                                    <div className='inner'>
+                                        <div className='thumbnail'>
+                                            <Link href={`/blog-details/${id}`}>
+                                                <picture>
+                                                    <img src={img} alt='Blog Images' />
+                                                </picture>
+                                            </Link>
+                                            <div className='blog-date'>
+                                                <span className='day'>
+                                                    {date.split(' ')[1]}
+                                                </span>
+                                                <span className='month'>
+                                                    {date.split(' ')[0]}
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div className='content'>
+                                            <div className='category-wrap'>
+                                                <Link
+                                                    href={`/blog-details/${id}`}
+                                                    className='blog-category'
+                                                >
+                                                    {category}
+                                                </Link>
+                                            </div>
+                                            <h5 className='title'>
+                                                <Link href={`/blog-details/${id}`}>
+                                                    {title}
+                                                </Link>
+                                            </h5>
+                                            <ul className='blog-meta'>
+                                                <li>
+                                                    <i className='icon-25'></i>By{' '}
+                                                    <a href='#'>{author}</a>
+                                                </li>
+                                                <li>
+                                                    <i className='icon-28'></i>Com{' '}
+                                                    {comment}
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BlogArea;
diff --git a/src/components/homes/home-online-academy/categories.jsx b/src/components/homes/home-online-academy/categories.jsx
deleted file mode 100644
index df079ad..0000000
--- a/src/components/homes/home-online-academy/categories.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-function Category({ delay, color, icon, icon_name, title }) {
-    return (
-        <div className="col" data-sal-delay={delay} data-sal="slide-up" data-sal-duration="800">
-            <div className={`categorie-grid categorie-style-3 ${color}`}>
-                <div className={`icon ${icon_name ? icon_name : ''}`}>
-                    <i className={icon}></i>
-                </div>
-                <div className="content">
-                    <Link href="/course-style-1">
-
-                        <h5 className="title">{title}</h5>
-
-                    </Link>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-const Categories = () => {
-    return (
-        <div className="edu-categorie-area categorie-area-3 edu-section-gap bg-image" id="categories">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">Categories</span>
-                    <h2 className="title">Online <span className="color-primary">Classes</span> For Remote Learning.</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                    <p>Consectetur adipiscing elit sed do eiusmod tempor.</p>
-                </div>
-                <div className="row row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 g-4">
-                    <Category delay={'100'} color={'color-primary-style'} icon="icon-9" title={'Management'} />
-                    <Category delay={'150'} color={'color-secondary-style'} icon="icon-10" title={'Arts & Design'} />
-                    <Category delay={'200'} color={'color-extra04-style'} icon="icon-11" title={'Development'} />
-                    <Category delay={'250'} color={'color-tertiary-style'} icon="icon-12" title={'Health & Fitness'} />
-                    <Category delay={'300'} color={'color-extra02-style'} icon="icon-13" title={'Data Science'} />
-                    <Category delay={'100'} color={'color-extra07-style'} icon="icon-42" icon_name={'design-pencil-icon'}
-                    title={'Data Science'} />
-                    <Category delay={'150'} color={'color-extra06-style'} icon="icon-14" title={'Marketing'} />
-                    <Category delay={'200'} color={'color-extra03-style'} icon="icon-16" icon_name={'laptop-icon'}
-                    title={'Computer Science'} />
-                    <Category delay={'250'} color={'color-extra01-style'} icon="icon-17" title={'Photography'} />
-                    <Category delay={'300'} color={'color-extra05-style'} icon="icon-43" title={'Music Class'} />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Categories;
\ No newline at end of file
diff --git a/src/components/homes/home-online-academy/categories.tsx b/src/components/homes/home-online-academy/categories.tsx
new file mode 100644
index 0000000..f8aeaca
--- /dev/null
+++ b/src/components/homes/home-online-academy/categories.tsx
@@ -0,0 +1,126 @@
+import Link from 'next/link';
+import React from 'react';
+
+type CategoryProps = {
+    delay: string;
+    color: string;
+    icon: string;
+    icon_name?: string;
+    title: string;
+};
+
+function Category({ delay, color, icon, icon_name, title }: CategoryProps) {
+    return (
+        <div
+            className='col'
+            data-sal-delay={delay}
+            data-sal='slide-up'
+            data-sal-duration='800'
+        >
+            <div className={`categorie-grid categorie-style-3 ${color}`}>
+                <div className={`icon ${icon_name ? icon_name : ''}`}>
+                    <i className={icon}></i>
+                </div>
+                <div className='content'>
+                    <Link href='/course-style-1'>
+                        <h5 className='title'>{title}</h5>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+const Categories = () => {
+    return (
+        <div
+            className='edu-categorie-area categorie-area-3 edu-section-gap bg-image'
+            id='categories'
+        >
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>Categories</span>
+                    <h2 className='title'>
+                        Online <span className='color-primary'>Classes</span> For Remote
+                        Learning.
+                    </h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                    <p>Consectetur adipiscing elit sed do eiusmod tempor.</p>
+                </div>
+                <div className='row row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 g-4'>
+                    <Category
+                        delay={'100'}
+                        color={'color-primary-style'}
+                        icon='icon-9'
+                        title={'Management'}
+                    />
+                    <Category
+                        delay={'150'}
+                        color={'color-secondary-style'}
+                        icon='icon-10'
+                        title={'Arts & Design'}
+                    />
+                    <Category
+                        delay={'200'}
+                        color={'color-extra04-style'}
+                        icon='icon-11'
+                        title={'Development'}
+                    />
+                    <Category
+                        delay={'250'}
+                        color={'color-tertiary-style'}
+                        icon='icon-12'
+                        title={'Health & Fitness'}
+                    />
+                    <Category
+                        delay={'300'}
+                        color={'color-extra02-style'}
+                        icon='icon-13'
+                        title={'Data Science'}
+                    />
+                    <Category
+                        delay={'100'}
+                        color={'color-extra07-style'}
+                        icon='icon-42'
+                        icon_name={'design-pencil-icon'}
+                        title={'Data Science'}
+                    />
+                    <Category
+                        delay={'150'}
+                        color={'color-extra06-style'}
+                        icon='icon-14'
+                        title={'Marketing'}
+                    />
+                    <Category
+                        delay={'200'}
+                        color={'color-extra03-style'}
+                        icon='icon-16'
+                        icon_name={'laptop-icon'}
+                        title={'Computer Science'}
+                    />
+                    <Category
+                        delay={'250'}
+                        color={'color-extra01-style'}
+                        icon='icon-17'
+                        title={'Photography'}
+                    />
+                    <Category
+                        delay={'300'}
+                        color={'color-extra05-style'}
+                        icon='icon-43'
+                        title={'Music Class'}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Categories;
diff --git a/src/components/homes/home-online-academy/counter-area.jsx b/src/components/homes/home-online-academy/counter-area.jsx
deleted file mode 100644
index 1005353..0000000
--- a/src/components/homes/home-online-academy/counter-area.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Counter from '../../common/counter';
-
-const counter_data = [
-    {
-        color: 'primary-color',
-        count: 29.3,
-        text: 'K',
-        title: 'Student Enrolled',
-        decimal: 1
-    },
-    {
-        color: 'secondary-color',
-        count: 32.4,
-        text: 'K',
-        title: 'Class Completed',
-        decimal: 1
-    },
-    {
-        color: 'extra02-color',
-        count: 100,
-        text: '%',
-        title: 'Satisfaction Rate'
-    },
-    {
-        color: 'extra05-color',
-        count: 354,
-        text: '%',
-        title: 'Top Instructors',
-        border_none:'border-none'
-    }
-]
-
-const CounterArea = () => {
-    return (
-        <div className="counterup-area-3 gap-bottom-equal">
-            <div className="container">
-                <div className="row g-5">
-                    {counter_data.map((c, i) => (
-                        <div key={i} className="col-lg-3 col-sm-6">
-                            <div className={`edu-counterup counterup-style-3 ${c.border_none ? c.border_none : '' }`}>
-                                <h2 className={`counter-item count-number ${c.color}`}>
-                                    <span className="odometer"><Counter number={parseFloat(c.count)} text={c.text} decimal={c.decimal} /></span>
-                                </h2>
-                                <h6 className="title">{c.title}</h6>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CounterArea;
\ No newline at end of file
diff --git a/src/components/homes/home-online-academy/counter-area.tsx b/src/components/homes/home-online-academy/counter-area.tsx
new file mode 100644
index 0000000..05b07b9
--- /dev/null
+++ b/src/components/homes/home-online-academy/counter-area.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import Counter from '../../common/counter';
+
+const counter_data = [
+    {
+        color: 'primary-color',
+        count: 29.3,
+        text: 'K',
+        title: 'Student Enrolled',
+        decimal: 1,
+    },
+    {
+        color: 'secondary-color',
+        count: 32.4,
+        text: 'K',
+        title: 'Class Completed',
+        decimal: 1,
+    },
+    {
+        color: 'extra02-color',
+        count: 100,
+        text: '%',
+        title: 'Satisfaction Rate',
+    },
+    {
+        color: 'extra05-color',
+        count: 354,
+        text: '%',
+        title: 'Top Instructors',
+        border_none: 'border-none',
+    },
+];
+
+const CounterArea = () => {
+    return (
+        <div className='counterup-area-3 gap-bottom-equal'>
+            <div className='container'>
+                <div className='row g-5'>
+                    {counter_data.map((c, i) => (
+                        <div key={i} className='col-lg-3 col-sm-6'>
+                            <div
+                                className={`edu-counterup counterup-style-3 ${
+                                    c.border_none ? c.border_none : ''
+                                }`}
+                            >
+                                <h2 className={`counter-item count-number ${c.color}`}>
+                                    <span className='odometer'>
+                                        <Counter
+                                            number={c.count}
+                                            text={c.text}
+                                            decimal={c.decimal}
+                                        />
+                                    </span>
+                                </h2>
+                                <h6 className='title'>{c.title}</h6>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CounterArea;
diff --git a/src/components/homes/home-online-academy/courses.jsx b/src/components/homes/home-online-academy/courses.jsx
deleted file mode 100644
index ee4ddce..0000000
--- a/src/components/homes/home-online-academy/courses.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { course_data } from '../../../data';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import CourseTypeThree from '../../course/course-type-three';
-
-const Courses = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="home-four-course edu-course-area course-area-4 gap-tb-text bg-image">
-            <div className="container edublink-animated-shape">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Popular Courses</span>
-                    <h2 className="title">Pick A Course To Get Started</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    {course_data.slice(0,4).map((course) => {
-                        return (
-                            <div className="col-xl-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800" key={course.id}>
-                                <CourseTypeThree data={course} />
-                            </div>
-                        )
-                    })}
-                </div>
-                
-                <div className="course-view-all" data-sal-delay="150" data-sal="slide-up" data-sal-duration="1200">
-                    <Link href="/course-style-1" className="edu-btn">
-                        Browse more courses<i className="icon-4"></i>
-                    </Link>
-                </div>
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseDirection(25).x,
-                            y: mouseDirection(25).y
-                        } }
-                    >
-                        <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                    </motion.li>
-                    <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseReverse(35).x,
-                            y: mouseReverse(35).y
-                        } }
-                    >
-                        <span></span>
-                    </motion.li>
-                </ul>
-            </div>
-        </div>
-    );
-}
-
-export default Courses;
\ No newline at end of file
diff --git a/src/components/homes/home-online-academy/courses.tsx b/src/components/homes/home-online-academy/courses.tsx
new file mode 100644
index 0000000..50edd3c
--- /dev/null
+++ b/src/components/homes/home-online-academy/courses.tsx
@@ -0,0 +1,85 @@
+import Link from 'next/link';
+import React from 'react';
+import { course_data } from '../../../data';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import CourseTypeThree from '../../course/course-type-three';
+
+const Courses = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='home-four-course edu-course-area course-area-4 gap-tb-text bg-image'>
+            <div className='container edublink-animated-shape'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Popular Courses</span>
+                    <h2 className='title'>Pick A Course To Get Started</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {course_data.slice(0, 4).map(course => {
+                        return (
+                            <div
+                                className='col-xl-6'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                                key={course.id}
+                            >
+                                <CourseTypeThree data={course} />
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <div
+                    className='course-view-all'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='1200'
+                >
+                    <Link href='/course-style-1' className='edu-btn'>
+                        Browse more courses<i className='icon-4'></i>
+                    </Link>
+                </div>
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseDirection(25).x,
+                            y: mouseDirection(25).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/about/shape-13.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                    <motion.li
+                        className='shape-2 scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseReverse(35).x,
+                            y: mouseReverse(35).y,
+                        }}
+                    >
+                        <span></span>
+                    </motion.li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default Courses;
diff --git a/src/components/homes/home-online-academy/cta-area.jsx b/src/components/homes/home-online-academy/cta-area.jsx
deleted file mode 100644
index b6e016e..0000000
--- a/src/components/homes/home-online-academy/cta-area.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const CtaArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="cta-area-1">
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-xl-8">
-                        <div className="home-four-cta edu-cta-box cta-style-3 bg-image bg-image--16">
-                            <div className="inner">
-                                <div className="content text-end">
-                                    <span className="subtitle">Get In Touch:</span>
-                                    <h3 className="title">
-                                        <a href="mailto:info@edublink">info@edublink</a>
-                                    </h3>
-                                </div>
-                                <div className="sparator">
-                                    <span>or</span>
-                                </div>
-                                <div className="content">
-                                    <span className="subtitle">Call Us Via:</span>
-                                    <h3 className="title">
-                                        <a href="tel:+011235641231">+01 123 5641 231</a>
-                                    </h3>
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-01 scene"
-                                    animate={ {
-                                        x: mouseReverse(25).x,
-                                        y: mouseReverse(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/cta/shape-06.png" alt="shape" />
-                                </motion.li>
-                                <motion.li className="shape-02 scene"
-                                    animate={ {
-                                        x: mouseDirection(25).x,
-                                        y: mouseDirection(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/cta/shape-12.png" alt="shape" />
-                                </motion.li>
-                                <motion.li className="shape-03 scene"
-                                    animate={ {
-                                        x: mouseDirection(25).x,
-                                        y: mouseDirection(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/cta/shape-04.png" alt="shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CtaArea;
\ No newline at end of file
diff --git a/src/components/homes/home-online-academy/cta-area.tsx b/src/components/homes/home-online-academy/cta-area.tsx
new file mode 100644
index 0000000..462f1a8
--- /dev/null
+++ b/src/components/homes/home-online-academy/cta-area.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const CtaArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='cta-area-1'>
+            <div className='container'>
+                <div className='row justify-content-center'>
+                    <div className='col-xl-8'>
+                        <div className='home-four-cta edu-cta-box cta-style-3 bg-image bg-image--16'>
+                            <div className='inner'>
+                                <div className='content text-end'>
+                                    <span className='subtitle'>Get In Touch:</span>
+                                    <h3 className='title'>
+                                        <a href='mailto:info@edublink'>info@edublink</a>
+                                    </h3>
+                                </div>
+                                <div className='sparator'>
+                                    <span>or</span>
+                                </div>
+                                <div className='content'>
+                                    <span className='subtitle'>Call Us Via:</span>
+                                    <h3 className='title'>
+                                        <a href='tel:+011235641231'>+01 123 5641 231</a>
+                                    </h3>
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-01 scene'
+                                    animate={{
+                                        x: mouseReverse(25).x,
+                                        y: mouseReverse(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-06.png'
+                                            alt='shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-02 scene'
+                                    animate={{
+                                        x: mouseDirection(25).x,
+                                        y: mouseDirection(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-12.png'
+                                            alt='shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-03 scene'
+                                    animate={{
+                                        x: mouseDirection(25).x,
+                                        y: mouseDirection(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-04.png'
+                                            alt='shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CtaArea;
diff --git a/src/components/homes/home-online-academy/faq-area.jsx b/src/components/homes/home-online-academy/faq-area.jsx
deleted file mode 100644
index ddebfc3..0000000
--- a/src/components/homes/home-online-academy/faq-area.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const accordion_items = [
-    {
-        id: 'collapseOne', show: true, title: 'How can I contact a school directly?',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    },
-    {
-        id: 'collapseTwo', show: false, title: 'How do I find a school where I want to study?',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    },
-    {
-        id: 'collapseThree', show: false, title: 'Where should I study abroad?',
-        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.'
-    }
-];
-
-const FaqArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-faq-area faq-style-2 bg-image">
-            <div className="container">
-                <div className="row g-5 row--45">
-                    <div className="col-lg-6" data-sal-delay="50" data-sal="slide-up" data-sal-duration="1000">
-                        <div className="edu-faq-content">
-                            <div className="section-title section-left">
-                                <span className="pre-title">FAQ’s</span>
-                                <h2 className="title">Learn Your Best Education Culture with EduBlink</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod tempor incididunt labore dolore magna.</p>
-                            </div>
-                            <div className="faq-accordion" id="faq-accordion">
-                                <div className="accordion">
-                                    {accordion_items.map((item, i) => {
-                                        const { desc, id, show, title } = item;
-                                        return (
-                                            <div key={i} className="accordion-item">
-                                                <h5 className="accordion-header">
-                                                    <button className={`accordion-button ${show ? '' : 'collapsed'}`} type="button" data-bs-toggle="collapse" data-bs-target={`#${id}`} aria-expanded={show ? 'true' : 'false'}>
-                                                        {title}
-                                                    </button>
-                                                </h5>
-                                                <div id={id} className={`accordion-collapse collapse ${show ? 'show' : ''}`} data-bs-parent="#faq-accordion">
-                                                    <div className="accordion-body">
-                                                        <p>{desc}</p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        )
-                                    })}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="edu-faq-gallery">
-                            <div className="row g-5">
-                                <div className="col-6" data-sal-delay="50" data-sal="slide-down" data-sal-duration="1000">
-                                    <div className="faq-thumbnail thumbnail-1">
-                                        <img src="/assets/images/faq/faq-05.jpg" alt="Faq Images" />
-                                    </div>
-                                </div>
-                                <div className="col-6" data-sal-delay="50" data-sal="slide-up" data-sal-duration="1000">
-                                    <div className="faq-thumbnail thumbnail-2">
-                                        <img src="/assets/images/faq/faq-06.jpg" alt="Faq Images" />
-                                    </div>
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-06.png" alt="Shape Images" />
-                                </motion.li>
-                                <li className="shape-2">
-                                    <img src="/assets/images/faq/shape-04.png" alt="Shape Images" />
-                                </li>
-                                <motion.li className="shape-3 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-16.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-4 scene"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/banner/shape-03.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-5 scene"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-08.png" alt="Shape Images" />
-                                </motion.li>
-                                <motion.li className="shape-6 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/faq/shape-09.png" alt="Shape Images" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default FaqArea;
\ No newline at end of file
diff --git a/src/components/homes/home-online-academy/faq-area.tsx b/src/components/homes/home-online-academy/faq-area.tsx
new file mode 100644
index 0000000..dc989d6
--- /dev/null
+++ b/src/components/homes/home-online-academy/faq-area.tsx
@@ -0,0 +1,214 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const accordion_items = [
+    {
+        id: 'collapseOne',
+        show: true,
+        title: 'How can I contact a school directly?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+    {
+        id: 'collapseTwo',
+        show: false,
+        title: 'How do I find a school where I want to study?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+    {
+        id: 'collapseThree',
+        show: false,
+        title: 'Where should I study abroad?',
+        desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eius mod ex tempor incididunt labore dolore magna aliquaenim ad minim eniam.',
+    },
+];
+
+const FaqArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-faq-area faq-style-2 bg-image'>
+            <div className='container'>
+                <div className='row g-5 row--45'>
+                    <div
+                        className='col-lg-6'
+                        data-sal-delay='50'
+                        data-sal='slide-up'
+                        data-sal-duration='1000'
+                    >
+                        <div className='edu-faq-content'>
+                            <div className='section-title section-left'>
+                                <span className='pre-title'>FAQ’s</span>
+                                <h2 className='title'>
+                                    Learn Your Best Education Culture with EduBlink
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eius mod tempor incididunt labore dolore
+                                    magna.
+                                </p>
+                            </div>
+                            <div className='faq-accordion' id='faq-accordion'>
+                                <div className='accordion'>
+                                    {accordion_items.map((item, i) => {
+                                        const { desc, id, show, title } = item;
+                                        return (
+                                            <div key={i} className='accordion-item'>
+                                                <h5 className='accordion-header'>
+                                                    <button
+                                                        className={`accordion-button ${
+                                                            show ? '' : 'collapsed'
+                                                        }`}
+                                                        type='button'
+                                                        data-bs-toggle='collapse'
+                                                        data-bs-target={`#${id}`}
+                                                        aria-expanded={
+                                                            show ? 'true' : 'false'
+                                                        }
+                                                    >
+                                                        {title}
+                                                    </button>
+                                                </h5>
+                                                <div
+                                                    id={id}
+                                                    className={`accordion-collapse collapse ${
+                                                        show ? 'show' : ''
+                                                    }`}
+                                                    data-bs-parent='#faq-accordion'
+                                                >
+                                                    <div className='accordion-body'>
+                                                        <p>{desc}</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='edu-faq-gallery'>
+                            <div className='row g-5'>
+                                <div
+                                    className='col-6'
+                                    data-sal-delay='50'
+                                    data-sal='slide-down'
+                                    data-sal-duration='1000'
+                                >
+                                    <div className='faq-thumbnail thumbnail-1'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/faq/faq-05.jpg'
+                                                alt='Faq Images'
+                                            />
+                                        </picture>
+                                    </div>
+                                </div>
+                                <div
+                                    className='col-6'
+                                    data-sal-delay='50'
+                                    data-sal='slide-up'
+                                    data-sal-duration='1000'
+                                >
+                                    <div className='faq-thumbnail thumbnail-2'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/faq/faq-06.jpg'
+                                                alt='Faq Images'
+                                            />
+                                        </picture>
+                                    </div>
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-06.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <li className='shape-2'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-04.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-16.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-4 scene'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/banner/shape-03.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-5 scene'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-08.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-6 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/faq/shape-09.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FaqArea;
diff --git a/src/components/homes/home-online-academy/hero-area.jsx b/src/components/homes/home-online-academy/hero-area.jsx
deleted file mode 100644
index 95bea98..0000000
--- a/src/components/homes/home-online-academy/hero-area.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const HeroArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="hero-banner hero-style-4 bg-image">
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-lg-8">
-                        <div className="banner-content">
-                            <h1 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">
-                                The Best Program to Enroll for Exchange    
-                            </h1>
-                            <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">
-                                Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.    
-                            </p>
-                            <div className="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <Link href="/course-style-1" className="edu-btn">
-                                    Find courses<i className="icon-4"></i>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="banner-gallery">
-                <Thumbnail num={'1'} slide={'slide-up'} img={'girl-4.jpg'} />
-                <Thumbnail num={'2'} slide={'slide-down'} img={'girl-5.jpg'} />
-                <Thumbnail num={'3'} slide={'slide-right'} img={'girl-6.jpg'} />
-                <div className="online-support" data-sal-delay="600" data-sal="slide-right" data-sal-duration="1000">
-                    <div className="inner">
-                        <div className="icon">
-                            <i className="icon-29"></i>
-                        </div>
-                        <div className="content">
-                            <span className="subtitle">Online Support </span>
-                            <h4 className="title"><a href="tel:+0123456789">+012 (345) 6789</a></h4>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="scroll-down-btn">
-                <a className="scroll-btn" href="#categories"><i className="icon-41"></i></a>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(25).x,
-                        y: mouseReverse(25).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-17.png" alt="Shape" />
-                </motion.li>
-
-                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(25).x,
-                        y: mouseDirection(25).y
-                    } }
-                >
-                    <img src="/assets/images/banner/shape-03.png" alt="Shape" />
-                </motion.li>
-
-                <motion.li className="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(25).x,
-                        y: mouseReverse(25).y
-                    } }
-                >
-                    <img src="/assets/images/faq/shape-09.png" alt="Shape" />
-                </motion.li>
-
-                <motion.li className="shape-4 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(25).x,
-                        y: mouseDirection(25).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-15.png" alt="Shape" />
-                </motion.li>
-
-                <motion.li className="shape-5 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(25).x,
-                        y: mouseDirection(25).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-16.png" alt="Shape" />
-                </motion.li>
-
-                <motion.li className="shape-6 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(25).x,
-                        y: mouseReverse(25).y
-                    } }
-                >
-                    <img src="/assets/images/faq/shape-12.png" alt="Shape" />
-                </motion.li>
-
-                <motion.li className="shape-7 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(25).x,
-                        y: mouseDirection(25).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-17.png" alt="Shape" />
-                </motion.li>
-                
-                <li className="shape-8 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                    <span></span>
-                </li>
-            </ul>
-        </div>
-    );
-}
-
-export default HeroArea;
-
-// Thumbnail
-const Thumbnail = ({ num, slide, img }) => {
-    return (
-        <div className={`thumbnail thumbnail-${num}`} data-sal-delay="500" data-sal={slide} data-sal-duration="1000">
-            <img src={`/assets/images/banner/${img}`} alt="Girl Image" />
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/homes/home-online-academy/hero-area.tsx b/src/components/homes/home-online-academy/hero-area.tsx
new file mode 100644
index 0000000..7e8c1e2
--- /dev/null
+++ b/src/components/homes/home-online-academy/hero-area.tsx
@@ -0,0 +1,207 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const HeroArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='hero-banner hero-style-4 bg-image'>
+            <div className='container'>
+                <div className='row justify-content-center'>
+                    <div className='col-lg-8'>
+                        <div className='banner-content'>
+                            <h1
+                                className='title'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                The Best Program to Enroll for Exchange
+                            </h1>
+                            <p
+                                data-sal-delay='200'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit.
+                            </p>
+                            <div
+                                className='banner-btn'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <Link href='/course-style-1' className='edu-btn'>
+                                    Find courses<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className='banner-gallery'>
+                <Thumbnail num={'1'} slide={'slide-up'} img={'girl-4.jpg'} />
+                <Thumbnail num={'2'} slide={'slide-down'} img={'girl-5.jpg'} />
+                <Thumbnail num={'3'} slide={'slide-right'} img={'girl-6.jpg'} />
+                <div
+                    className='online-support'
+                    data-sal-delay='600'
+                    data-sal='slide-right'
+                    data-sal-duration='1000'
+                >
+                    <div className='inner'>
+                        <div className='icon'>
+                            <i className='icon-29'></i>
+                        </div>
+                        <div className='content'>
+                            <span className='subtitle'>Online Support </span>
+                            <h4 className='title'>
+                                <a href='tel:+0123456789'>+012 (345) 6789</a>
+                            </h4>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className='scroll-down-btn'>
+                <a className='scroll-btn' href='#categories'>
+                    <i className='icon-41'></i>
+                </a>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(25).x,
+                        y: mouseReverse(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-17.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(25).x,
+                        y: mouseDirection(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/banner/shape-03.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(25).x,
+                        y: mouseReverse(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/faq/shape-09.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-4 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(25).x,
+                        y: mouseDirection(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-15.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-5 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(25).x,
+                        y: mouseDirection(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-16.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-6 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(25).x,
+                        y: mouseReverse(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/faq/shape-12.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-7 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(25).x,
+                        y: mouseDirection(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-17.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+
+                <li
+                    className='shape-8 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <span></span>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default HeroArea;
+
+// Thumbnail
+const Thumbnail = ({ num, slide, img }) => {
+    return (
+        <div
+            className={`thumbnail thumbnail-${num}`}
+            data-sal-delay='500'
+            data-sal={slide}
+            data-sal-duration='1000'
+        >
+            <picture>
+                <img src={`/assets/images/banner/${img}`} alt='Girl Image' />
+            </picture>
+        </div>
+    );
+};
diff --git a/src/components/homes/home-online-academy/index.jsx b/src/components/homes/home-online-academy/index.tsx
similarity index 69%
rename from src/components/homes/home-online-academy/index.jsx
rename to src/components/homes/home-online-academy/index.tsx
index fd89dc3..c43dfdc 100644
--- a/src/components/homes/home-online-academy/index.jsx
+++ b/src/components/homes/home-online-academy/index.tsx
@@ -15,23 +15,23 @@ import AdBanner from '../home-university/ad-banner';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <HeaderTwo style_3={true} />
-                <HeroArea/>
-                <Categories/>
-                <Courses/>
-                <BrandArea/>
-                <TeamArea/>
-                <CounterArea/>
-                <FaqArea/>
+                <HeroArea />
+                <Categories />
+                <Courses />
+                <BrandArea />
+                <TeamArea />
+                <CounterArea />
+                <FaqArea />
                 <EventArea event_2={true} />
-                <CtaArea/>
-                <BlogArea/>
+                <CtaArea />
+                <BlogArea />
                 <AdBanner home_4={true} />
                 <Footer dark_bg={true} home_4={true} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home-online-academy/team-area.jsx b/src/components/homes/home-online-academy/team-area.jsx
deleted file mode 100644
index d9b4ea8..0000000
--- a/src/components/homes/home-online-academy/team-area.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { instructors_data } from '../../../data';
-import TeamTwo from "../../team-member/team-two";
-
-const instructors = instructors_data.slice(0, 3);
-
-const TeamArea = ({ about_p }) => {
-    return (
-        <div className={`edu-team-area ${about_p ? 'team-area-5 section-gap-large' : 'team-area-2 edu-section-gap'}`}>
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150"
-                data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Instructors</span>
-                    <h2 className="title">Course Instructors</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    {instructors.slice(0,3).map((instructor) => {
-                        return (
-                            <div key={instructor.id} className="col-lg-4 col-md-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                                <TeamTwo instructor={instructor} />
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default TeamArea;
\ No newline at end of file
diff --git a/src/components/homes/home-online-academy/team-area.tsx b/src/components/homes/home-online-academy/team-area.tsx
new file mode 100644
index 0000000..3da3111
--- /dev/null
+++ b/src/components/homes/home-online-academy/team-area.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { instructors_data } from '../../../data';
+import TeamTwo from '../../team-member/team-two';
+
+const instructors = instructors_data.slice(0, 3);
+
+type TeamAreaProps = {
+    about_p?: boolean;
+};
+
+const TeamArea = ({ about_p }: TeamAreaProps) => {
+    return (
+        <div
+            className={`edu-team-area ${
+                about_p ? 'team-area-5 section-gap-large' : 'team-area-2 edu-section-gap'
+            }`}
+        >
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Instructors</span>
+                    <h2 className='title'>Course Instructors</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {instructors.slice(0, 3).map(instructor => {
+                        return (
+                            <div
+                                key={instructor.id}
+                                className='col-lg-4 col-md-6'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <TeamTwo instructor={instructor} />
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamArea;
diff --git a/src/components/homes/home-university/about-area.jsx b/src/components/homes/home-university/about-area.jsx
deleted file mode 100644
index a81c16a..0000000
--- a/src/components/homes/home-university/about-area.jsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const tabs = {
-    title:[
-        {
-            active:true,target:'about-edu',title:'About EduBlink'
-        },
-        {
-            target:'about-mission',title:'Our Mission'
-        },
-        {
-            target:'about-vision',title:'Our Vision'
-        }
-    ],
-    content:[
-        {
-            show:true,
-            id:'about-edu',
-            desc:"Magna aliquaenim minim veniam quis nostrud exercitation ullamco laborisLorem ipsum dolor sit amet consectetur adipisicing elit sed do eius tempor incididunt labore.",
-            feature_list: [
-                'Education award achived',
-                'Available online courses'
-            ]
-        },
-        {
-            id:'about-mission',
-            desc:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.",
-            feature_list:[
-                'Industry Expert Instructor',
-                'Up-to-Date Course Content'
-            ]
-        },
-        {
-            id:'about-vision',
-            desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer.",
-            feature_list: [
-                'Online Remote Learning',
-                'Lifetime Access For Learning'
-            ]
-        }
-    ]
-}
-
-const AboutArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-about-area about-style-3">
-            <div className="container">
-                <div className="row g-5 align-items-center">
-                    <div className="col-lg-6" data-sal-delay="50" data-sal="slide-up" data-sal-duration="800">
-                        <div className="about-content">
-                            <div className="section-title section-left">
-                                <span className="pre-title">About Us</span>
-                                <h2 className="title">We Provide Best <span className="color-primary">Education</span> Services For You</h2>
-                                <span className="shape-line">
-                                    <i className="icon-19"></i>
-                                </span>
-                            </div>
-                            <ul className="nav nav-tabs" role="tablist"> 
-                                {
-                                    tabs.title.map((t,i) => (
-                                        <li key={i} className="nav-item" role="presentation">
-                                            <button className={`nav-link ${t.active?'active':''}`} data-bs-toggle="tab" data-bs-target={`#${t.target}`} type="button" role="tab" tabIndex={'-1'} aria-selected={t.active?"true":'false'}> {t.title}</button>
-                                        </li>
-                                    ))
-                                } 
-                            </ul>
-                            <div className="tab-content"> 
-                                {tabs.content.map((item,i) => { const {desc,feature_list,id,show} = item; 
-                                    return (
-                                        <div key={id} className={`tab-pane fade ${show?"show active":""}`} id={id} role="tabpanel">
-                                            <p>{desc}</p>
-                                            <ul className="features-list"> {feature_list.map((l,i) => <li key={i}>{l}</li>)} </ul>
-                                        </div> 
-                                    )})
-                                } 
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="about-image-gallery">
-                            <img className="main-img-1" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800" src="/assets/images/about/about-04.webp" alt="About Image" />
-                            <img className="main-img-2" data-sal-delay="100" data-sal="slide-left" data-sal-duration="800" src="/assets/images/about/about-05.webp" alt="About Image" />
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-39.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-07.png" alt="Shape" />
-                                </motion.li>
-                                <li className="shape-4" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                                    <span></span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <li className="shape-5">
-                    <img className="rotateit" src="/assets/images/about/shape-13.png" alt="Shape" />
-                </li>
-                <li className="shape-6">
-                    <span></span>
-                </li>
-            </ul>
-        </div>
-    )
-}
-
-export default AboutArea;
\ No newline at end of file
diff --git a/src/components/homes/home-university/about-area.tsx b/src/components/homes/home-university/about-area.tsx
new file mode 100644
index 0000000..b19792c
--- /dev/null
+++ b/src/components/homes/home-university/about-area.tsx
@@ -0,0 +1,215 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const tabs = {
+    title: [
+        {
+            active: true,
+            target: 'about-edu',
+            title: 'About EduBlink',
+        },
+        {
+            target: 'about-mission',
+            title: 'Our Mission',
+        },
+        {
+            target: 'about-vision',
+            title: 'Our Vision',
+        },
+    ],
+    content: [
+        {
+            show: true,
+            id: 'about-edu',
+            desc: 'Magna aliquaenim minim veniam quis nostrud exercitation ullamco laborisLorem ipsum dolor sit amet consectetur adipisicing elit sed do eius tempor incididunt labore.',
+            feature_list: ['Education award achived', 'Available online courses'],
+        },
+        {
+            id: 'about-mission',
+            desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.',
+            feature_list: ['Industry Expert Instructor', 'Up-to-Date Course Content'],
+        },
+        {
+            id: 'about-vision',
+            desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer.',
+            feature_list: ['Online Remote Learning', 'Lifetime Access For Learning'],
+        },
+    ],
+};
+
+const AboutArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-about-area about-style-3'>
+            <div className='container'>
+                <div className='row g-5 align-items-center'>
+                    <div
+                        className='col-lg-6'
+                        data-sal-delay='50'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        <div className='about-content'>
+                            <div className='section-title section-left'>
+                                <span className='pre-title'>About Us</span>
+                                <h2 className='title'>
+                                    We Provide Best{' '}
+                                    <span className='color-primary'>Education</span>{' '}
+                                    Services For You
+                                </h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                            </div>
+                            <ul className='nav nav-tabs' role='tablist'>
+                                {tabs.title.map((t, i) => (
+                                    <li key={i} className='nav-item' role='presentation'>
+                                        <button
+                                            className={`nav-link ${
+                                                t.active ? 'active' : ''
+                                            }`}
+                                            data-bs-toggle='tab'
+                                            data-bs-target={`#${t.target}`}
+                                            type='button'
+                                            role='tab'
+                                            tabIndex={-1}
+                                            aria-selected={t.active ? 'true' : 'false'}
+                                        >
+                                            {' '}
+                                            {t.title}
+                                        </button>
+                                    </li>
+                                ))}
+                            </ul>
+                            <div className='tab-content'>
+                                {tabs.content.map((item, i) => {
+                                    const { desc, feature_list, id, show } = item;
+                                    return (
+                                        <div
+                                            key={id}
+                                            className={`tab-pane fade ${
+                                                show ? 'show active' : ''
+                                            }`}
+                                            id={id}
+                                            role='tabpanel'
+                                        >
+                                            <p>{desc}</p>
+                                            <ul className='features-list'>
+                                                {' '}
+                                                {feature_list.map((l, i) => (
+                                                    <li key={i}>{l}</li>
+                                                ))}{' '}
+                                            </ul>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='about-image-gallery'>
+                            <picture>
+                                <img
+                                    className='main-img-1'
+                                    data-sal-delay='100'
+                                    data-sal='slide-up'
+                                    data-sal-duration='800'
+                                    src='/assets/images/about/about-04.webp'
+                                    alt='About Image'
+                                />
+                            </picture>
+                            <picture>
+                                <img
+                                    className='main-img-2'
+                                    data-sal-delay='100'
+                                    data-sal='slide-left'
+                                    data-sal-duration='800'
+                                    src='/assets/images/about/about-05.webp'
+                                    alt='About Image'
+                                />
+                            </picture>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-39.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-07.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <li
+                                    className='shape-4'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                >
+                                    <span></span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <li className='shape-5'>
+                    <picture>
+                        <img
+                            className='rotateit'
+                            src='/assets/images/about/shape-13.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+                <li className='shape-6'>
+                    <span></span>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default AboutArea;
diff --git a/src/components/homes/home-university/ad-banner.jsx b/src/components/homes/home-university/ad-banner.jsx
deleted file mode 100644
index cf7597b..0000000
--- a/src/components/homes/home-university/ad-banner.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const AdBanner = ({ home_4 }) => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className={`${home_4 ? 'online-academy-cta-wrapper' : 'university-cta-wrapper' } edu-cta-banner-area bg-image`}>
-            <div className="container">
-                <div className="edu-cta-banner">
-                    <div className="row justify-content-center">
-                        <div className="col-lg-7">
-                            <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <h2 className="title">Get Your Quality Skills <span className="color-primary">Certificate</span> Through EduBlink </h2>
-                                <Link href="/contact-us" className="edu-btn btn-secondary">
-                                    Get started now<i className="icon-4"></i>
-
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                    <ul className="shape-group">
-                        <motion.li className="shape-01 scene"
-                            animate={ {
-                                x: mouseDirection(25).x,
-                                y: mouseDirection(25).y
-                            } }
-                        >
-                            <img src="/assets/images/cta/shape-10.png" alt="shape" />
-                        </motion.li>
-                        <motion.li className="shape-02 scene"
-                            animate={ {
-                                x: mouseReverse(25).x,
-                                y: mouseReverse(25).y
-                            } }
-                        >
-                            <img src="/assets/images/cta/shape-09.png" alt="shape" />
-                        </motion.li>
-                        <motion.li className="shape-03 scene"
-                            animate={ {
-                                x: mouseReverse(25).x,
-                                y: mouseReverse(25).y
-                            } }
-                        >
-                            <img src="/assets/images/cta/shape-08.png" alt="shape" />
-                        </motion.li>
-                        <motion.li className="shape-04 scene"
-                            animate={ {
-                                x: mouseDirection(25).x,
-                                y: mouseDirection(25).y
-                            } }
-                        >
-                            <img src="/assets/images/about/shape-13.png" alt="shape" />
-                        </motion.li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default AdBanner;
\ No newline at end of file
diff --git a/src/components/homes/home-university/ad-banner.tsx b/src/components/homes/home-university/ad-banner.tsx
new file mode 100644
index 0000000..b74f601
--- /dev/null
+++ b/src/components/homes/home-university/ad-banner.tsx
@@ -0,0 +1,97 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+type AdBannerProps = {
+    home_4?: boolean;
+};
+
+const AdBanner = ({ home_4 }: AdBannerProps) => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div
+            className={`${
+                home_4 ? 'online-academy-cta-wrapper' : 'university-cta-wrapper'
+            } edu-cta-banner-area bg-image`}
+        >
+            <div className='container'>
+                <div className='edu-cta-banner'>
+                    <div className='row justify-content-center'>
+                        <div className='col-lg-7'>
+                            <div
+                                className='section-title section-center'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <h2 className='title'>
+                                    Get Your Quality Skills{' '}
+                                    <span className='color-primary'>Certificate</span>{' '}
+                                    Through EduBlink{' '}
+                                </h2>
+                                <Link
+                                    href='/contact-us'
+                                    className='edu-btn btn-secondary'
+                                >
+                                    Get started now<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                    <ul className='shape-group'>
+                        <motion.li
+                            className='shape-01 scene'
+                            animate={{
+                                x: mouseDirection(25).x,
+                                y: mouseDirection(25).y,
+                            }}
+                        >
+                            <picture>
+                                <img src='/assets/images/cta/shape-10.png' alt='shape' />
+                            </picture>
+                        </motion.li>
+                        <motion.li
+                            className='shape-02 scene'
+                            animate={{
+                                x: mouseReverse(25).x,
+                                y: mouseReverse(25).y,
+                            }}
+                        >
+                            <picture>
+                                <img src='/assets/images/cta/shape-09.png' alt='shape' />
+                            </picture>
+                        </motion.li>
+                        <motion.li
+                            className='shape-03 scene'
+                            animate={{
+                                x: mouseReverse(25).x,
+                                y: mouseReverse(25).y,
+                            }}
+                        >
+                            <picture>
+                                <img src='/assets/images/cta/shape-08.png' alt='shape' />
+                            </picture>
+                        </motion.li>
+                        <motion.li
+                            className='shape-04 scene'
+                            animate={{
+                                x: mouseDirection(25).x,
+                                y: mouseDirection(25).y,
+                            }}
+                        >
+                            <picture>
+                                <img
+                                    src='/assets/images/about/shape-13.png'
+                                    alt='shape'
+                                />
+                            </picture>
+                        </motion.li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AdBanner;
diff --git a/src/components/homes/home-university/brand-area.jsx b/src/components/homes/home-university/brand-area.jsx
deleted file mode 100644
index b59d4d7..0000000
--- a/src/components/homes/home-university/brand-area.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-const brands = [
-    '/assets/images/brand/brand-01.png',
-    '/assets/images/brand/brand-02.png',
-    '/assets/images/brand/brand-03.png',
-    '/assets/images/brand/brand-04.png',
-    '/assets/images/brand/brand-05.png',
-    '/assets/images/brand/brand-06.png'
-]
-
-const BrandArea = () => {
-    return (
-        <div className="edu-brand-area brand-area-4 gap-lg-bottom-equal">
-            <div className="container">
-                <div className="brand-grid-wrap brand-style-2">
-                    { brands.map( ( img, i ) => (
-                        <div key={i} className="brand-grid">
-                            <img src={img} alt="Brand Logo" />
-                        </div>
-                    ) ) }
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default BrandArea;
\ No newline at end of file
diff --git a/src/components/homes/home-university/brand-area.tsx b/src/components/homes/home-university/brand-area.tsx
new file mode 100644
index 0000000..ac72dc0
--- /dev/null
+++ b/src/components/homes/home-university/brand-area.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const brands = [
+    '/assets/images/brand/brand-01.png',
+    '/assets/images/brand/brand-02.png',
+    '/assets/images/brand/brand-03.png',
+    '/assets/images/brand/brand-04.png',
+    '/assets/images/brand/brand-05.png',
+    '/assets/images/brand/brand-06.png',
+];
+
+const BrandArea = () => {
+    return (
+        <div className='edu-brand-area brand-area-4 gap-lg-bottom-equal'>
+            <div className='container'>
+                <div className='brand-grid-wrap brand-style-2'>
+                    {brands.map((img, i) => (
+                        <div key={i} className='brand-grid'>
+                            <picture>
+                                <img src={img} alt='Brand Logo' />
+                            </picture>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BrandArea;
diff --git a/src/components/homes/home-university/category-area.jsx b/src/components/homes/home-university/category-area.jsx
deleted file mode 100644
index 6b57257..0000000
--- a/src/components/homes/home-university/category-area.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { BookLibrary, ScholarshipFacility, SkilledLecturers } from '../../../svg';
-
-const categories = [
-    {
-        icon:<ScholarshipFacility/>,
-        title:'Scholarship Facility',
-        text:'Lorem ipsum dolor sit amet cont adipiscing elit.',
-        color:'color-primary-style'
-    },
-    {
-        icon:<SkilledLecturers/>,
-        title:'Skilled Lecturers',
-        text:'Lorem ipsum dolor sit amet cont adipiscing elit.',
-        color:'color-secondary-style'
-    },
-    {
-        icon:<BookLibrary/>,
-        title:'Book Library & Store',
-        text:'Lorem ipsum dolor sit amet cont adipiscing elit.',
-        color:'color-extra02-style'
-    }
-]
-
-const CategoryArea = () => {
-    return (
-        <div className="features-area-3">
-            <div className="container">
-                <div className="features-grid-wrap">
-                    {categories.map((c,i) => (
-                        <div key={i} className={`features-box features-style-3 ${c.color} edublink-svg-animate`}>
-                            <div className="icon">
-                                {c.icon}
-                            </div>
-                            <div className="content">
-                                <h4 className="title">{c.title}</h4>
-                                <p>{c.text}</p>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CategoryArea;
\ No newline at end of file
diff --git a/src/components/homes/home-university/category-area.tsx b/src/components/homes/home-university/category-area.tsx
new file mode 100644
index 0000000..bd785c4
--- /dev/null
+++ b/src/components/homes/home-university/category-area.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { BookLibrary, ScholarshipFacility, SkilledLecturers } from '../../../svg';
+
+const categories = [
+    {
+        icon: <ScholarshipFacility />,
+        title: 'Scholarship Facility',
+        text: 'Lorem ipsum dolor sit amet cont adipiscing elit.',
+        color: 'color-primary-style',
+    },
+    {
+        icon: <SkilledLecturers />,
+        title: 'Skilled Lecturers',
+        text: 'Lorem ipsum dolor sit amet cont adipiscing elit.',
+        color: 'color-secondary-style',
+    },
+    {
+        icon: <BookLibrary />,
+        title: 'Book Library & Store',
+        text: 'Lorem ipsum dolor sit amet cont adipiscing elit.',
+        color: 'color-extra02-style',
+    },
+];
+
+const CategoryArea = () => {
+    return (
+        <div className='features-area-3'>
+            <div className='container'>
+                <div className='features-grid-wrap'>
+                    {categories.map((c, i) => (
+                        <div
+                            key={i}
+                            className={`features-box features-style-3 ${c.color} edublink-svg-animate`}
+                        >
+                            <div className='icon'>{c.icon}</div>
+                            <div className='content'>
+                                <h4 className='title'>{c.title}</h4>
+                                <p>{c.text}</p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CategoryArea;
diff --git a/src/components/homes/home-university/college-champus.jsx b/src/components/homes/home-university/college-champus.jsx
deleted file mode 100644
index 3f0a2b9..0000000
--- a/src/components/homes/home-university/college-champus.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const features = [
-    {
-        icon:'icon-37 watch-icon',
-        color:'color-secondary-style',
-        title:'Student Life',
-        text:'Nostrud exer ciation laboris nis aliqup comodo perspiatix omnis iste natus.'
-    },
-    {
-        icon:'icon-38 art-board-icon',
-        color:'color-primary-style',
-        title:'Arts & Clubs',
-        text:'Omnis iste natus error sit voluptatem accusan tium doloreque laudantum.'
-    },
-    {
-        icon:'icon-39 fitness-icon',
-        color:'color-extra05-style',
-        title:'Sports &amp; Fitness',
-        text:'Tempor incididunt ut labore et dolore magna aliqua enim minim veniam quis.'
-    }
-]
-
-const CollegeCampus = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-campus-area gap-lg-top-equal">
-            <div className="container edublink-animated-shape">
-                <div className="row g-5">
-                    <div className="col-xl-7" data-sal-delay="50" data-sal="slide-right" data-sal-duration="800">
-                        <div className="campus-image-gallery">
-                            <div className="campus-thumbnail">
-                                <div className="thumbnail">
-                                    <img src="/assets/images/others/campus-01.webp" alt="Campus" />
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <span></span>
-                                </motion.li>
-                                <motion.li className="shape-2 scene"
-                                    animate={ {
-                                        x: mouseReverse(25).x,
-                                        y: mouseReverse(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-21.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-3 scene"
-                                    animate={ {
-                                        x: mouseDirection(25).x,
-                                        y: mouseDirection(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-xl-5" data-sal-delay="50" data-sal="slide-left" data-sal-duration="800">
-                        <div className="campus-content">
-                            <div className="inner">
-                                <div className="section-title section-left">
-                                    <span className="pre-title">Campus</span>
-                                    <h2 className="title">Campus Life</h2>
-                                    <span className="shape-line">
-                                        <i className="icon-19"></i>
-                                    </span>
-                                </div>
-                                <div className="features-list"> 
-                                    {features.map((item,i) => { 
-                                        const {color,icon,text,title} = item; 
-                                        return (
-                                            <div key={i} className={`features-box ${color}`}>
-                                                <div className="icon">
-                                                    <i className={icon}></i>
-                                                </div>
-                                                <div className="content">
-                                                    <h5 className="title">{title}</h5>
-                                                    <p>{text}</p>
-                                                </div>
-                                            </div> 
-                                        )
-                                    })} 
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-4 scene"
-                                    animate={ {
-                                        x: mouseReverse(25).x,
-                                        y: mouseReverse(25).y
-                                    } }
-                                >
-                                    <span></span>
-                                </motion.li>
-                                <motion.li className="shape-5 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <span></span>
-                                </motion.li>
-                                <motion.li className="shape-6 scene"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-25.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CollegeCampus;
\ No newline at end of file
diff --git a/src/components/homes/home-university/college-champus.tsx b/src/components/homes/home-university/college-champus.tsx
new file mode 100644
index 0000000..0fbad7c
--- /dev/null
+++ b/src/components/homes/home-university/college-champus.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const features = [
+    {
+        icon: 'icon-37 watch-icon',
+        color: 'color-secondary-style',
+        title: 'Student Life',
+        text: 'Nostrud exer ciation laboris nis aliqup comodo perspiatix omnis iste natus.',
+    },
+    {
+        icon: 'icon-38 art-board-icon',
+        color: 'color-primary-style',
+        title: 'Arts & Clubs',
+        text: 'Omnis iste natus error sit voluptatem accusan tium doloreque laudantum.',
+    },
+    {
+        icon: 'icon-39 fitness-icon',
+        color: 'color-extra05-style',
+        title: 'Sports &amp; Fitness',
+        text: 'Tempor incididunt ut labore et dolore magna aliqua enim minim veniam quis.',
+    },
+];
+
+const CollegeCampus = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-campus-area gap-lg-top-equal'>
+            <div className='container edublink-animated-shape'>
+                <div className='row g-5'>
+                    <div
+                        className='col-xl-7'
+                        data-sal-delay='50'
+                        data-sal='slide-right'
+                        data-sal-duration='800'
+                    >
+                        <div className='campus-image-gallery'>
+                            <div className='campus-thumbnail'>
+                                <div className='thumbnail'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/campus-01.webp'
+                                            alt='Campus'
+                                        />
+                                    </picture>
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <span></span>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    animate={{
+                                        x: mouseReverse(25).x,
+                                        y: mouseReverse(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-21.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    animate={{
+                                        x: mouseDirection(25).x,
+                                        y: mouseDirection(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div
+                        className='col-xl-5'
+                        data-sal-delay='50'
+                        data-sal='slide-left'
+                        data-sal-duration='800'
+                    >
+                        <div className='campus-content'>
+                            <div className='inner'>
+                                <div className='section-title section-left'>
+                                    <span className='pre-title'>Campus</span>
+                                    <h2 className='title'>Campus Life</h2>
+                                    <span className='shape-line'>
+                                        <i className='icon-19'></i>
+                                    </span>
+                                </div>
+                                <div className='features-list'>
+                                    {features.map((item, i) => {
+                                        const { color, icon, text, title } = item;
+                                        return (
+                                            <div
+                                                key={i}
+                                                className={`features-box ${color}`}
+                                            >
+                                                <div className='icon'>
+                                                    <i className={icon}></i>
+                                                </div>
+                                                <div className='content'>
+                                                    <h5 className='title'>{title}</h5>
+                                                    <p>{text}</p>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-4 scene'
+                                    animate={{
+                                        x: mouseReverse(25).x,
+                                        y: mouseReverse(25).y,
+                                    }}
+                                >
+                                    <span></span>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-5 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <span></span>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-6 scene'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-25.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CollegeCampus;
diff --git a/src/components/homes/home-university/courses-area.jsx b/src/components/homes/home-university/courses-area.jsx
deleted file mode 100644
index 126e021..0000000
--- a/src/components/homes/home-university/courses-area.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import { course_data } from '../../../data';
-import CourseTypeSix from '../../course/course-type-six';
-
-const courses = course_data.filter(course => course.university_courses);
-
-const CoursesArea = () => {
-    const [category, setCategory] = useState('undergraduate');
-    const category_items = courses.filter(course => course.filter_category.includes(category));
-    const [coursesItems, setCoursesItems] = useState(category_items);
-    const handleCategoryItems = (c) => {
-        setCategory(c)
-        const filtering_category_courses = courses.filter(course => course.filter_category.includes(c));
-        setCoursesItems(filtering_category_courses)
-    }
-
-    return (
-        <div className="edu-course-area course-area-3 section-gap-large bg-lighten04">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Popular Courses</span>
-                    <h2 className="title">Academic Programs</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="isotope-wrapper">
-                    <div className="isotop-button">
-                        <button onClick={() => handleCategoryItems('undergraduate')} className={category === 'undergraduate' ? 'is-checked' : ''}>
-                            <span className="filter-text">Undergraduate Program</span>
-                        </button>
-                        <button onClick={() => handleCategoryItems('graduate')} className={category === 'graduate' ? 'is-checked' : ''}>
-                            <span className="filter-text">Graduate Program</span>
-                        </button>
-                        <button onClick={() => handleCategoryItems('online')} className={category === 'online' ? 'is-checked' : ''}>
-                            <span className="filter-text">Online Program</span>
-                        </button>
-                    </div>
-
-                    <div className="row g-5" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                        {coursesItems.map((course, _) => {
-                            return (
-                                <div className="col-md-6 col-lg-4" key={course.id}>
-                                    <CourseTypeSix data={course} />
-                                </div>
-                            )
-                        })}
-                    </div>
-                </div>
-            </div>
-            
-            <ul className="shape-group">
-                <li className="shape-1">
-                    <img className="d-block-shape-light" src="/assets/images/others/map-shape-3.png" alt="Shape" />
-                    <img className="d-none-shape-dark" src="/assets/images/others/3-Home-1.png" alt="Shape" />
-                </li>
-                <li className="shape-2">
-                    <img className="d-block-shape-light" src="/assets/images/others/map-shape-3.png" alt="Shape" />
-                    <img className="d-none-shape-dark" src="/assets/images/others/dark-map-shape-3.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    )
-}
-
-export default CoursesArea;
\ No newline at end of file
diff --git a/src/components/homes/home-university/courses-area.tsx b/src/components/homes/home-university/courses-area.tsx
new file mode 100644
index 0000000..4060e38
--- /dev/null
+++ b/src/components/homes/home-university/courses-area.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { useState } from 'react';
+import { course_data } from '../../../data';
+import CourseTypeSix from '../../course/course-type-six';
+
+const courses = course_data.filter(course => course.university_courses);
+
+const CoursesArea = () => {
+    const [category, setCategory] = useState('undergraduate');
+    const category_items = courses.filter(course =>
+        course.filter_category.includes(category)
+    );
+    const [coursesItems, setCoursesItems] = useState(category_items);
+    const handleCategoryItems = c => {
+        setCategory(c);
+        const filtering_category_courses = courses.filter(course =>
+            course.filter_category.includes(c)
+        );
+        setCoursesItems(filtering_category_courses);
+    };
+
+    return (
+        <div className='edu-course-area course-area-3 section-gap-large bg-lighten04'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Popular Courses</span>
+                    <h2 className='title'>Academic Programs</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='isotope-wrapper'>
+                    <div className='isotop-button'>
+                        <button
+                            onClick={() => handleCategoryItems('undergraduate')}
+                            className={category === 'undergraduate' ? 'is-checked' : ''}
+                        >
+                            <span className='filter-text'>Undergraduate Program</span>
+                        </button>
+                        <button
+                            onClick={() => handleCategoryItems('graduate')}
+                            className={category === 'graduate' ? 'is-checked' : ''}
+                        >
+                            <span className='filter-text'>Graduate Program</span>
+                        </button>
+                        <button
+                            onClick={() => handleCategoryItems('online')}
+                            className={category === 'online' ? 'is-checked' : ''}
+                        >
+                            <span className='filter-text'>Online Program</span>
+                        </button>
+                    </div>
+
+                    <div
+                        className='row g-5'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='800'
+                    >
+                        {coursesItems.map((course, _) => {
+                            return (
+                                <div className='col-md-6 col-lg-4' key={course.id}>
+                                    <CourseTypeSix data={course} />
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            </div>
+
+            <ul className='shape-group'>
+                <li className='shape-1'>
+                    <picture>
+                        <img
+                            className='d-block-shape-light'
+                            src='/assets/images/others/map-shape-3.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                    <picture>
+                        <img
+                            className='d-none-shape-dark'
+                            src='/assets/images/others/3-Home-1.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+                <li className='shape-2'>
+                    <picture>
+                        <img
+                            className='d-block-shape-light'
+                            src='/assets/images/others/map-shape-3.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                    <picture>
+                        <img
+                            className='d-none-shape-dark'
+                            src='/assets/images/others/dark-map-shape-3.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default CoursesArea;
diff --git a/src/components/homes/home-university/cta.jsx b/src/components/homes/home-university/cta.jsx
deleted file mode 100644
index e77214c..0000000
--- a/src/components/homes/home-university/cta.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-const Cta = () => {
-    return (
-        <div className="cta-area-2">
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-xl-8">
-                        <div className="edu-cta-box cta-style-2 bg-image bg-image--9">
-                            <div className="inner">
-                                <div className="content text-end">
-                                    <span className="subtitle">Get In Touch:</span>
-                                    <h3 className="title">
-                                        <a href="mailto:info@edublink">info@edublink</a>
-                                    </h3>
-                                </div>
-                                <div className="sparator">
-                                    <span>or</span>
-                                </div>
-                                <div className="content">
-                                    <span className="subtitle">Call Us Via:</span>
-                                    <h3 className="title">
-                                        <a href="tel:+011235641231">+01 123 5641 231</a>
-                                    </h3>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Cta;
\ No newline at end of file
diff --git a/src/components/homes/home-university/cta.tsx b/src/components/homes/home-university/cta.tsx
new file mode 100644
index 0000000..c69399f
--- /dev/null
+++ b/src/components/homes/home-university/cta.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const Cta = () => {
+    return (
+        <div className='cta-area-2'>
+            <div className='container'>
+                <div className='row justify-content-center'>
+                    <div className='col-xl-8'>
+                        <div className='edu-cta-box cta-style-2 bg-image bg-image--9'>
+                            <div className='inner'>
+                                <div className='content text-end'>
+                                    <span className='subtitle'>Get In Touch:</span>
+                                    <h3 className='title'>
+                                        <a href='mailto:info@edublink'>info@edublink</a>
+                                    </h3>
+                                </div>
+                                <div className='sparator'>
+                                    <span>or</span>
+                                </div>
+                                <div className='content'>
+                                    <span className='subtitle'>Call Us Via:</span>
+                                    <h3 className='title'>
+                                        <a href='tel:+011235641231'>+01 123 5641 231</a>
+                                    </h3>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Cta;
diff --git a/src/components/homes/home-university/event-area.jsx b/src/components/homes/home-university/event-area.jsx
deleted file mode 100644
index ea32bd4..0000000
--- a/src/components/homes/home-university/event-area.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import { event_data } from '../../../data';
-import EventItem from '../../event-grid/event-item';
-
-const EventArea = ({ event_2 }) => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className={`edu-event-area ${event_2 ? 'event-area-2' : 'event-area-1 gap-large-text'}`}>
-            <div className="container edublink-animated-shape">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Events & News</span>
-                    <h2 className="title">Popular Events & News</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    {event_data.slice(0,3).map((event) => {
-                        const { delay, id } = event;
-                        return (
-                            <div key={id} className="col-lg-4 col-md-6" data-sal-delay={delay} data-sal="slide-up" data-sal-duration="800">
-                                <div className="edu-event event-style-1">
-                                    <EventItem item={event} />
-                                </div>
-                            </div>
-                        )
-                    })}
-                </div>
-
-                <div className="event-view-all-btn" data-sal-delay="150" data-sal="slide-up" data-sal-duration="1200">
-                    <h6 className="view-text">The Latest Events from EduBlink. <Link href="/event-grid" className="btn-transparent">
-                        View All<i className="icon-4"></i>
-                    </Link>
-                    </h6>
-                </div>
-
-                <ul className="shape-group">
-                    <li className="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                        <img className="rotateit" src="/assets/images/about/shape-13.png" alt="Shape" />
-                    </li>
-                    <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                        animate={ {
-                            x: mouseReverse(30).x,
-                            y: mouseReverse(30).y
-                        } }
-                    >
-                        <span></span>
-                    </motion.li>
-                </ul>
-            </div>
-        </div>
-    );
-}
-
-export default EventArea;
\ No newline at end of file
diff --git a/src/components/homes/home-university/event-area.tsx b/src/components/homes/home-university/event-area.tsx
new file mode 100644
index 0000000..627b776
--- /dev/null
+++ b/src/components/homes/home-university/event-area.tsx
@@ -0,0 +1,100 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import { event_data } from '../../../data';
+import EventItem from '../../event-grid/event-item';
+
+type EventAreaProps = {
+    event_2?: boolean;
+};
+
+const EventArea = ({ event_2 }: EventAreaProps) => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div
+            className={`edu-event-area ${
+                event_2 ? 'event-area-2' : 'event-area-1 gap-large-text'
+            }`}
+        >
+            <div className='container edublink-animated-shape'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Events & News</span>
+                    <h2 className='title'>Popular Events & News</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {event_data.slice(0, 3).map(event => {
+                        const { delay, id } = event;
+                        return (
+                            <div
+                                key={id}
+                                className='col-lg-4 col-md-6'
+                                data-sal-delay={delay}
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='edu-event event-style-1'>
+                                    <EventItem item={event} />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <div
+                    className='event-view-all-btn'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='1200'
+                >
+                    <h6 className='view-text'>
+                        The Latest Events from EduBlink.{' '}
+                        <Link href='/event-grid' className='btn-transparent'>
+                            View All<i className='icon-4'></i>
+                        </Link>
+                    </h6>
+                </div>
+
+                <ul className='shape-group'>
+                    <li
+                        className='shape-1'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                    >
+                        <picture>
+                            <img
+                                className='rotateit'
+                                src='/assets/images/about/shape-13.png'
+                                alt='Shape'
+                            />
+                        </picture>
+                    </li>
+                    <motion.li
+                        className='shape-2 scene'
+                        data-sal-delay='500'
+                        data-sal='fade'
+                        data-sal-duration='200'
+                        animate={{
+                            x: mouseReverse(30).x,
+                            y: mouseReverse(30).y,
+                        }}
+                    >
+                        <span></span>
+                    </motion.li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default EventArea;
diff --git a/src/components/homes/home-university/hero-slider.jsx b/src/components/homes/home-university/hero-slider.jsx
deleted file mode 100644
index 426dec5..0000000
--- a/src/components/homes/home-university/hero-slider.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation, EffectFade, Autoplay } from "swiper";
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const slider_data = [
-    {
-        id: 1,
-        src: '/assets/images/bg/bg-image-17.webp',
-        subtitle: 'Welcome to EduBlink',
-        title: 'World Best Program Best University',
-        sm_text: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
-        btn_text: 'Find courses'
-    },
-    {
-        id: 2,
-        src: '/assets/images/bg/bg-image-28.webp',
-        subtitle: 'World Best Program Best University',
-        title: 'World Best Program Best University',
-        sm_text: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
-        btn_text: 'Find courses'
-    },
-    {
-        id: 3,
-        src: '/assets/images/bg/bg-image-26.webp',
-        subtitle: 'World Best Program Best University',
-        title: 'World Best Program Best University',
-        sm_text: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
-        btn_text: 'Find courses'
-    }
-];
-
-const HeroSlider = () => {
-    const [loop, setLoop] = useState(false);
-    useEffect(() => setLoop(true), [])
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="hero-banner hero-style-3 bg-image">
-            <Swiper
-                slidesPerView={1}
-                spaceBetween={0}
-                loop={loop}
-                pagination={false}
-                grabCursor={true}
-                draggable={true}
-                modules={[Autoplay, EffectFade, Navigation]}
-                effect="fade"
-                className="swiper university-activator"
-                speed={1000}
-                autoplay={{
-                    delay: 5500
-                }}
-                navigation={{
-                    nextEl: ".slide-next",
-                    prevEl: ".slide-prev"
-                }}
-                lazy={{
-                    loadPrevNext: false,
-                    loadPrevNextAmount: 1
-                }}
-            >
-                {slider_data.map((item) => {
-                    const { btn_text, id, sm_text, src, subtitle, title } = item;
-                    return (
-                        <SwiperSlide key={id}>
-                            <img data-transform-origin='center center' src={src} className="swiper-lazy" alt="image" />
-                            <div className="thumbnail-bg-content">
-                                <div className="container edublink-animated-shape">
-                                    <div className="row">
-                                        <div className="col-7">
-                                            <div className="banner-content">
-                                                <span className="subtitle" data-sal="slide-up" data-sal-duration="1000">{subtitle}</span>
-                                                <h1 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">
-                                                    {title}
-                                                </h1>
-                                                <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">{sm_text}</p>
-                                                <div className="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                                    <Link href="/course-style-1" className="edu-btn btn-secondary">
-                                                        {btn_text} <i className="icon-4"></i>
-                                                    </Link>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </SwiperSlide>
-                    );
-                })}
-
-                <div className="hero-slider-bg-controls">
-                    <div className="swiper-slide-controls slide-prev">
-                        <i className="icon-west"></i>
-                    </div>
-                    <div className="swiper-slide-controls slide-next">
-                        <i className="icon-east"></i>
-                    </div>
-                </div>
-            </Swiper>
-
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(25).x,
-                        y: mouseReverse(25).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-10.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(25).x,
-                        y: mouseDirection(25).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-11.png" alt="Shape" />
-                </motion.li>
-                <li className="shape-3">
-                    <img src="/assets/images/others/shape-25.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    );
-}
-
-export default HeroSlider;
\ No newline at end of file
diff --git a/src/components/homes/home-university/hero-slider.tsx b/src/components/homes/home-university/hero-slider.tsx
new file mode 100644
index 0000000..683a6a2
--- /dev/null
+++ b/src/components/homes/home-university/hero-slider.tsx
@@ -0,0 +1,178 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, EffectFade, Autoplay } from 'swiper';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const slider_data = [
+    {
+        id: 1,
+        src: '/assets/images/bg/bg-image-17.webp',
+        subtitle: 'Welcome to EduBlink',
+        title: 'World Best Program Best University',
+        sm_text:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
+        btn_text: 'Find courses',
+    },
+    {
+        id: 2,
+        src: '/assets/images/bg/bg-image-28.webp',
+        subtitle: 'World Best Program Best University',
+        title: 'World Best Program Best University',
+        sm_text:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
+        btn_text: 'Find courses',
+    },
+    {
+        id: 3,
+        src: '/assets/images/bg/bg-image-26.webp',
+        subtitle: 'World Best Program Best University',
+        title: 'World Best Program Best University',
+        sm_text:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.',
+        btn_text: 'Find courses',
+    },
+];
+
+const HeroSlider = () => {
+    const [loop, setLoop] = useState(false);
+    useEffect(() => setLoop(true), []);
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='hero-banner hero-style-3 bg-image'>
+            <Swiper
+                slidesPerView={1}
+                spaceBetween={0}
+                loop={loop}
+                pagination={false}
+                grabCursor={true}
+                draggable={true}
+                modules={[Autoplay, EffectFade, Navigation]}
+                effect='fade'
+                className='swiper university-activator'
+                speed={1000}
+                autoplay={{
+                    delay: 5500,
+                }}
+                navigation={{
+                    nextEl: '.slide-next',
+                    prevEl: '.slide-prev',
+                }}
+                lazy={{
+                    loadPrevNext: false,
+                    loadPrevNextAmount: 1,
+                }}
+            >
+                {slider_data.map(item => {
+                    const { btn_text, id, sm_text, src, subtitle, title } = item;
+                    return (
+                        <SwiperSlide key={id}>
+                            <picture>
+                                <img
+                                    data-transform-origin='center center'
+                                    src={src}
+                                    className='swiper-lazy'
+                                    alt='image'
+                                />
+                            </picture>
+                            <div className='thumbnail-bg-content'>
+                                <div className='container edublink-animated-shape'>
+                                    <div className='row'>
+                                        <div className='col-7'>
+                                            <div className='banner-content'>
+                                                <span
+                                                    className='subtitle'
+                                                    data-sal='slide-up'
+                                                    data-sal-duration='1000'
+                                                >
+                                                    {subtitle}
+                                                </span>
+                                                <h1
+                                                    className='title'
+                                                    data-sal-delay='100'
+                                                    data-sal='slide-up'
+                                                    data-sal-duration='1000'
+                                                >
+                                                    {title}
+                                                </h1>
+                                                <p
+                                                    data-sal-delay='200'
+                                                    data-sal='slide-up'
+                                                    data-sal-duration='1000'
+                                                >
+                                                    {sm_text}
+                                                </p>
+                                                <div
+                                                    className='banner-btn'
+                                                    data-sal-delay='400'
+                                                    data-sal='slide-up'
+                                                    data-sal-duration='1000'
+                                                >
+                                                    <Link
+                                                        href='/course-style-1'
+                                                        className='edu-btn btn-secondary'
+                                                    >
+                                                        {btn_text}{' '}
+                                                        <i className='icon-4'></i>
+                                                    </Link>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </SwiperSlide>
+                    );
+                })}
+
+                <div className='hero-slider-bg-controls'>
+                    <div className='swiper-slide-controls slide-prev'>
+                        <i className='icon-west'></i>
+                    </div>
+                    <div className='swiper-slide-controls slide-next'>
+                        <i className='icon-east'></i>
+                    </div>
+                </div>
+            </Swiper>
+
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(25).x,
+                        y: mouseReverse(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-10.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(25).x,
+                        y: mouseDirection(25).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-11.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <li className='shape-3'>
+                    <picture>
+                        <img src='/assets/images/others/shape-25.png' alt='Shape' />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default HeroSlider;
diff --git a/src/components/homes/home-university/index.jsx b/src/components/homes/home-university/index.tsx
similarity index 65%
rename from src/components/homes/home-university/index.jsx
rename to src/components/homes/home-university/index.tsx
index de4baf7..b5f1fc6 100644
--- a/src/components/homes/home-university/index.jsx
+++ b/src/components/homes/home-university/index.tsx
@@ -16,24 +16,24 @@ import VideoArea from './video-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <HeaderTwo />
-                <HeroSlider/>
-                <CategoryArea/>
-                <AboutArea/>
+                <HeroSlider />
+                <CategoryArea />
+                <AboutArea />
                 <CounterArea home_3={true} />
-                <CoursesArea/>
-                <CollegeCampus/>
-                <Testimonial/>
-                <VideoArea/>
-                <Cta/>
-                <EventArea/>
-                <BrandArea/>
-                <AdBanner/>
+                <CoursesArea />
+                <CollegeCampus />
+                <Testimonial />
+                <VideoArea />
+                <Cta />
+                <EventArea />
+                <BrandArea />
+                <AdBanner />
                 <Footer dark_bg={true} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home-university/testimonial.jsx b/src/components/homes/home-university/testimonial.jsx
deleted file mode 100644
index 10dcb2a..0000000
--- a/src/components/homes/home-university/testimonial.jsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay,Pagination } from "swiper";
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const contents = {
-    pre_title: 'Testimonials',
-    title: <>What Our Students <br /> Have To Say</>,
-    desc: "Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor incidid unt labore dolore magna aliquaenim minim.",
-    testimonial_items: [
-        {
-            logo: '/assets/images/testimonial/logo-01.png',
-            desc: "Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix.",
-            ratings: [1, 2, 3, 4, 5],
-            img: "/assets/images/testimonial/testimonial-01.png",
-            name: "Ray Sanchez",
-            title: 'Student'
-        },
-        {
-            logo: '/assets/images/testimonial/logo-02.png',
-            desc: "Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix.",
-            ratings: [1, 2, 3, 4, 5],
-            img: "/assets/images/testimonial/testimonial-02.png",
-            name: "Thomas Lopez",
-            title: 'Designer'
-        },
-        {
-            logo: '/assets/images/testimonial/logo-03.png',
-            desc: "Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix.",
-            ratings: [1, 2, 3, 4, 5],
-            img: "/assets/images/testimonial/testimonial-03.png",
-            name: "Amber Page",
-            title: 'Developer'
-        },
-        {
-            logo: '/assets/images/testimonial/logo-02.png',
-            desc: "Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix.",
-            ratings: [1, 2, 3, 4, 5],
-            img: "/assets/images/testimonial/testimonial-04.png",
-            name: "Robert Tapp",
-            title: 'Content Creator'
-        }
-    ]
-}
-
-const { desc, pre_title, testimonial_items, title } = contents;
-
-const Testimonial = ( { about_p_2 } ) => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    const [loop, setLoop] = useState( false );
-    useEffect( () => setLoop(true), [])
-    return (
-        <div className={`testimonial-area-2 ${about_p_2?'edu-section-gap':'section-gap-large'}`}>
-            <div className="container edublink-animated-shape">
-                <div className="row justify-content-center">
-                    <div className="col-lg-6">
-                        <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                            <span className="pre-title">{pre_title}</span>
-                            <h2 className="title">{title}</h2>
-                            <span className="shape-line"><i className="icon-19"></i></span>
-                            <p>{desc}</p>
-                        </div>
-                    </div>
-                </div>
-                <Swiper
-                    className="testimonial-activation swiper"
-                    slidesPerView={1}
-                    spaceBetween={0}
-                    modules={[Autoplay, Pagination]}
-                    loop={loop}
-                    grabCursor={true}
-                    speed={1000}
-                    autoplay={{
-                        delay: 3000
-                    } }
-                    breakpoints={{
-                        768: {
-                            slidesPerView: 2
-                        },
-                        992: {
-                            slidesPerView: 3
-                        }
-                    }}
-                    pagination={{
-                        el: '.swiper-pagination',
-                        type: 'bullets',
-                        clickable: true
-                    } }
-                >
-                    {testimonial_items.map((item, i) => {
-                        const { desc, img, logo, name, ratings, title } = item;
-                        return (
-                            <SwiperSlide key={i}>
-                                <div className="testimonial-slide">
-                                    <div className="content">
-                                        <div className="logo"><img src={logo} alt="Logo" /></div>
-                                        <p>{desc}</p>
-                                        <div className="rating-icon">
-                                            {ratings.map((r) => <i key={r} className="icon-23"></i>)}
-                                        </div>
-                                    </div>
-                                    <div className="author-info">
-                                        <div className="thumb">
-                                            <img src={img} alt="Testimonial" />
-                                        </div>
-                                        <div className="info">
-                                            <h5 className="title">{name}</h5>
-                                            <span className="subtitle">{title}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </SwiperSlide>
-                        )
-                    })}
-                </Swiper>
-                <div className="swiper-pagination"></div>
-
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene" data-sal-delay="200" data-sal="fade" data-sal-duration="1000"
-                        animate={ {
-                            x: mouseReverse(25).x,
-                            y: mouseReverse(25).y
-                        } }
-                    >
-                        <img src="/assets/images/about/shape-30.png" alt="Shape" />
-                    </motion.li>
-                    <motion.li className="shape-2 scene" data-sal-delay="200" data-sal="fade" data-sal-duration="1000"
-                        animate={ {
-                            x: mouseDirection(25).x,
-                            y: mouseDirection(25).y
-                        } }
-                    >
-                        <img src="/assets/images/about/shape-25.png" alt="Shape" />
-                    </motion.li>
-                </ul>
-            </div>
-            <ul className="shape-group">
-                <li className="shape-3" data-sal-delay="200" data-sal="fade" data-sal-duration="1000">
-                    <img className="d-block-shape-light" src="/assets/images/others/map-shape-3.png" alt="Shape" />
-                    <img className="d-none-shape-dark" src="/assets/images/others/dark-map-2-shape-3.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    )
-}
-
-export default Testimonial;
\ No newline at end of file
diff --git a/src/components/homes/home-university/testimonial.tsx b/src/components/homes/home-university/testimonial.tsx
new file mode 100644
index 0000000..f053726
--- /dev/null
+++ b/src/components/homes/home-university/testimonial.tsx
@@ -0,0 +1,204 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const contents = {
+    pre_title: 'Testimonials',
+    title: (
+        <>
+            What Our Students <br /> Have To Say
+        </>
+    ),
+    desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor incidid unt labore dolore magna aliquaenim minim.',
+    testimonial_items: [
+        {
+            logo: '/assets/images/testimonial/logo-01.png',
+            desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix.',
+            ratings: [1, 2, 3, 4, 5],
+            img: '/assets/images/testimonial/testimonial-01.png',
+            name: 'Ray Sanchez',
+            title: 'Student',
+        },
+        {
+            logo: '/assets/images/testimonial/logo-02.png',
+            desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix.',
+            ratings: [1, 2, 3, 4, 5],
+            img: '/assets/images/testimonial/testimonial-02.png',
+            name: 'Thomas Lopez',
+            title: 'Designer',
+        },
+        {
+            logo: '/assets/images/testimonial/logo-03.png',
+            desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix.',
+            ratings: [1, 2, 3, 4, 5],
+            img: '/assets/images/testimonial/testimonial-03.png',
+            name: 'Amber Page',
+            title: 'Developer',
+        },
+        {
+            logo: '/assets/images/testimonial/logo-02.png',
+            desc: 'Lorem ipsum dolor amet consectur elit adicing elit sed do umod tempor ux incididunt enim ad minim veniam quis nosrud citation laboris nisiste aliquip comodo perspiatix.',
+            ratings: [1, 2, 3, 4, 5],
+            img: '/assets/images/testimonial/testimonial-04.png',
+            name: 'Robert Tapp',
+            title: 'Content Creator',
+        },
+    ],
+};
+
+const { desc, pre_title, testimonial_items, title } = contents;
+
+type TestimonialProps = {
+    about_p_2?: boolean;
+};
+
+const Testimonial = ({ about_p_2 }: TestimonialProps) => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    const [loop, setLoop] = useState(false);
+    useEffect(() => setLoop(true), []);
+    return (
+        <div
+            className={`testimonial-area-2 ${
+                about_p_2 ? 'edu-section-gap' : 'section-gap-large'
+            }`}
+        >
+            <div className='container edublink-animated-shape'>
+                <div className='row justify-content-center'>
+                    <div className='col-lg-6'>
+                        <div
+                            className='section-title section-center'
+                            data-sal-delay='150'
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <span className='pre-title'>{pre_title}</span>
+                            <h2 className='title'>{title}</h2>
+                            <span className='shape-line'>
+                                <i className='icon-19'></i>
+                            </span>
+                            <p>{desc}</p>
+                        </div>
+                    </div>
+                </div>
+                <Swiper
+                    className='testimonial-activation swiper'
+                    slidesPerView={1}
+                    spaceBetween={0}
+                    modules={[Autoplay, Pagination]}
+                    loop={loop}
+                    grabCursor={true}
+                    speed={1000}
+                    autoplay={{
+                        delay: 3000,
+                    }}
+                    breakpoints={{
+                        768: {
+                            slidesPerView: 2,
+                        },
+                        992: {
+                            slidesPerView: 3,
+                        },
+                    }}
+                    pagination={{
+                        el: '.swiper-pagination',
+                        type: 'bullets',
+                        clickable: true,
+                    }}
+                >
+                    {testimonial_items.map((item, i) => {
+                        const { desc, img, logo, name, ratings, title } = item;
+                        return (
+                            <SwiperSlide key={i}>
+                                <div className='testimonial-slide'>
+                                    <div className='content'>
+                                        <div className='logo'>
+                                            <picture>
+                                                <img src={logo} alt='Logo' />
+                                            </picture>
+                                        </div>
+                                        <p>{desc}</p>
+                                        <div className='rating-icon'>
+                                            {ratings.map(r => (
+                                                <i key={r} className='icon-23'></i>
+                                            ))}
+                                        </div>
+                                    </div>
+                                    <div className='author-info'>
+                                        <div className='thumb'>
+                                            <picture>
+                                                <img src={img} alt='Testimonial' />
+                                            </picture>
+                                        </div>
+                                        <div className='info'>
+                                            <h5 className='title'>{name}</h5>
+                                            <span className='subtitle'>{title}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </SwiperSlide>
+                        );
+                    })}
+                </Swiper>
+                <div className='swiper-pagination'></div>
+
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        data-sal-delay='200'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                        animate={{
+                            x: mouseReverse(25).x,
+                            y: mouseReverse(25).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/about/shape-30.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                    <motion.li
+                        className='shape-2 scene'
+                        data-sal-delay='200'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                        animate={{
+                            x: mouseDirection(25).x,
+                            y: mouseDirection(25).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/about/shape-25.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                </ul>
+            </div>
+            <ul className='shape-group'>
+                <li
+                    className='shape-3'
+                    data-sal-delay='200'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img
+                            className='d-block-shape-light'
+                            src='/assets/images/others/map-shape-3.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                    <picture>
+                        <img
+                            className='d-none-shape-dark'
+                            src='/assets/images/others/dark-map-2-shape-3.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default Testimonial;
diff --git a/src/components/homes/home-university/video-area.jsx b/src/components/homes/home-university/video-area.jsx
deleted file mode 100644
index ba8314a..0000000
--- a/src/components/homes/home-university/video-area.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import useModal from '../../../hooks/use-modal';
-import VideoModal from '../../common/popup-modal/video-modal';
-
-const VideoArea = () => {
-  const { isVideoOpen, setIsVideoOpen } = useModal();
-    return (
-        <React.Fragment>
-            <div className="video-area-2 bg-image--14 bg-image">
-                <div className="container">
-                    <div className="row justify-content-center">
-                        <div className="col-lg-6 col-md-8">
-                            <div className="video-banner-content">
-                                <div className="video-btn">
-                                    <button onClick={() => setIsVideoOpen(true)}
-                                        className="video-play-btn video-popup-activation">
-                                        <i className="icon-18"></i>
-                                    </button>
-                                </div>
-                                <h2 className="title">Take a Video Tour to Learn Intro of Campus</h2>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {/* video modal start */}
-            <VideoModal isVideoOpen={isVideoOpen} setIsVideoOpen={setIsVideoOpen} videoId={'PICj5tr9hcc'} />
-            {/* video modal end */}
-        </React.Fragment>
-    )
-}
-
-export default VideoArea;
\ No newline at end of file
diff --git a/src/components/homes/home-university/video-area.tsx b/src/components/homes/home-university/video-area.tsx
new file mode 100644
index 0000000..a545f77
--- /dev/null
+++ b/src/components/homes/home-university/video-area.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import useModal from '../../../hooks/use-modal';
+import VideoModal from '../../common/popup-modal/video-modal';
+
+const VideoArea = () => {
+    const { isVideoOpen, setIsVideoOpen } = useModal();
+    return (
+        <React.Fragment>
+            <div className='video-area-2 bg-image--14 bg-image'>
+                <div className='container'>
+                    <div className='row justify-content-center'>
+                        <div className='col-lg-6 col-md-8'>
+                            <div className='video-banner-content'>
+                                <div className='video-btn'>
+                                    <button
+                                        onClick={() => setIsVideoOpen(true)}
+                                        className='video-play-btn video-popup-activation'
+                                    >
+                                        <i className='icon-18'></i>
+                                    </button>
+                                </div>
+                                <h2 className='title'>
+                                    Take a Video Tour to Learn Intro of Campus
+                                </h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* video modal start */}
+            <VideoModal
+                isVideoOpen={isVideoOpen}
+                setIsVideoOpen={setIsVideoOpen}
+                videoId={'PICj5tr9hcc'}
+            />
+            {/* video modal end */}
+        </React.Fragment>
+    );
+};
+
+export default VideoArea;
diff --git a/src/components/homes/home-yoga-instructor/about-area.jsx b/src/components/homes/home-yoga-instructor/about-area.jsx
deleted file mode 100644
index 06f1a0e..0000000
--- a/src/components/homes/home-yoga-instructor/about-area.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const lists = [
-    'Cooking award achived', 
-    'Available online courses', 
-    'Online Certification'
-];
-
-const AboutArea = () => {
-    return (
-        <div className="edu-section-gap edu-about-area about-style-5">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">About</span>
-                    <h2 className="title">Hi! I am <span className="color-primary">Simon Baker</span> <br /> and I Offer to Develope Your Skill <br /> Through Yoga</h2>
-                </div>
-                <div className="row g-5 align-items-center">
-                    <div className="col-lg-6">
-                        <div className="about-image-gallery">
-                            <img className="main-img-1" src="/assets/images/about/about-08.webp" data-sal-delay="150" data-sal="fade" data-sal-duration="800" alt="About Image" />
-                            <ul className="shape-group">
-                                <li className="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                                    <img className="rotateit" src="/assets/images/about/shape-09.png" alt="Shape" />
-                                </li>
-                                <li className="shape-2" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                                    <img src="/assets/images/about/shape-10.png" alt="Shape" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="about-content" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                            <p>Magna aliquaenim minim veniam quis nostrud exercitation ullamco laborisLorem ipsum dolor sit amet consectetur adipisicing elit sed do eius tempor incididunt labore citation</p>
-                            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
-                            <ul className="features-list">
-                                {lists.map((l, i) => <li key={i}>{l}</li>)}
-                            </ul>
-                            <Link href="/about-1" className="edu-btn">
-                                Get Start Today<i className="icon-4"></i>
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <li className="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                    <img className="d-block-shape-light" src="/assets/images/about/shape-20.png" alt="Shape" />
-                    <img className="d-none-shape-dark" src="/assets/images/about/dark-shape-20.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    );
-}
-
-export default AboutArea;
\ No newline at end of file
diff --git a/src/components/homes/home-yoga-instructor/about-area.tsx b/src/components/homes/home-yoga-instructor/about-area.tsx
new file mode 100644
index 0000000..86382b7
--- /dev/null
+++ b/src/components/homes/home-yoga-instructor/about-area.tsx
@@ -0,0 +1,126 @@
+import Link from 'next/link';
+import React from 'react';
+
+const lists = [
+    'Cooking award achived',
+    'Available online courses',
+    'Online Certification',
+];
+
+const AboutArea = () => {
+    return (
+        <div className='edu-section-gap edu-about-area about-style-5'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>About</span>
+                    <h2 className='title'>
+                        Hi! I am <span className='color-primary'>Simon Baker</span> <br />{' '}
+                        and I Offer to Develope Your Skill <br /> Through Yoga
+                    </h2>
+                </div>
+                <div className='row g-5 align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='about-image-gallery'>
+                            <picture>
+                                <img
+                                    className='main-img-1'
+                                    src='/assets/images/about/about-08.webp'
+                                    data-sal-delay='150'
+                                    data-sal='fade'
+                                    data-sal-duration='800'
+                                    alt='About Image'
+                                />
+                            </picture>
+                            <ul className='shape-group'>
+                                <li
+                                    className='shape-1'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                >
+                                    <picture>
+                                        <img
+                                            className='rotateit'
+                                            src='/assets/images/about/shape-09.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <li
+                                    className='shape-2'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-10.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div
+                            className='about-content'
+                            data-sal-delay='150'
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <p>
+                                Magna aliquaenim minim veniam quis nostrud exercitation
+                                ullamco laborisLorem ipsum dolor sit amet consectetur
+                                adipisicing elit sed do eius tempor incididunt labore
+                                citation
+                            </p>
+                            <p>
+                                Duis aute irure dolor in reprehenderit in voluptate velit
+                                esse cillum dolore eu fugiat nulla pariatur.
+                            </p>
+                            <ul className='features-list'>
+                                {lists.map((l, i) => (
+                                    <li key={i}>{l}</li>
+                                ))}
+                            </ul>
+                            <Link href='/about-1' className='edu-btn'>
+                                Get Start Today<i className='icon-4'></i>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <li
+                    className='shape-1'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                >
+                    <picture>
+                        <img
+                            className='d-block-shape-light'
+                            src='/assets/images/about/shape-20.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                    <picture>
+                        <img
+                            className='d-none-shape-dark'
+                            src='/assets/images/about/dark-shape-20.png'
+                            alt='Shape'
+                        />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default AboutArea;
diff --git a/src/components/homes/home-yoga-instructor/counter-area.jsx b/src/components/homes/home-yoga-instructor/counter-area.jsx
deleted file mode 100644
index 82a9733..0000000
--- a/src/components/homes/home-yoga-instructor/counter-area.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import Counter from '../../common/counter';
-
-const counter_data = [
-    { icon: 'icon-77', count: 29.3, text: 'K', title: 'Student Enrolled', decimal: 1 },
-    { icon: 'icon-78', count: 32.4, text: 'K', title: 'Class Completed', decimal: 1 },
-    { icon: 'icon-79', count: 100, text: '%', title: 'Satisfaction Rate' },
-    { icon: 'icon-80', count: 354, text: '+', title: 'Top Instructors' }
-]
-
-const CounterArea = () => {
-    return (
-        <div className="counterup-area-6">
-            <div className="container">
-                <div className="row g-5">
-                    {counter_data.map((count, i) => (
-                        <div key={i} className="col-12 col-lg-3 col-md-6 col-sm-6">
-                            <div className="edu-counterup counterup-style-6">
-                                <div className="icon">
-                                    <i className={count.icon}></i>
-                                </div>
-                                <h2 className="counter-item count-number">
-                                    <span className="odometer">
-                                        <Counter number={parseFloat(count.count)} text={count.text} decimal={count.decimal} />
-                                    </span>
-                                </h2>
-                                <h6 className="title">{count.title}</h6>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CounterArea;
\ No newline at end of file
diff --git a/src/components/homes/home-yoga-instructor/counter-area.tsx b/src/components/homes/home-yoga-instructor/counter-area.tsx
new file mode 100644
index 0000000..e6a4063
--- /dev/null
+++ b/src/components/homes/home-yoga-instructor/counter-area.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import Counter from '../../common/counter';
+
+const counter_data = [
+    { icon: 'icon-77', count: 29.3, text: 'K', title: 'Student Enrolled', decimal: 1 },
+    { icon: 'icon-78', count: 32.4, text: 'K', title: 'Class Completed', decimal: 1 },
+    { icon: 'icon-79', count: 100, text: '%', title: 'Satisfaction Rate' },
+    { icon: 'icon-80', count: 354, text: '+', title: 'Top Instructors' },
+];
+
+const CounterArea = () => {
+    return (
+        <div className='counterup-area-6'>
+            <div className='container'>
+                <div className='row g-5'>
+                    {counter_data.map((count, i) => (
+                        <div key={i} className='col-12 col-lg-3 col-md-6 col-sm-6'>
+                            <div className='edu-counterup counterup-style-6'>
+                                <div className='icon'>
+                                    <i className={count.icon}></i>
+                                </div>
+                                <h2 className='counter-item count-number'>
+                                    <span className='odometer'>
+                                        <Counter
+                                            number={count.count}
+                                            text={count.text}
+                                            decimal={count.decimal}
+                                        />
+                                    </span>
+                                </h2>
+                                <h6 className='title'>{count.title}</h6>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CounterArea;
diff --git a/src/components/homes/home-yoga-instructor/course-area.jsx b/src/components/homes/home-yoga-instructor/course-area.jsx
deleted file mode 100644
index ee2c5cb..0000000
--- a/src/components/homes/home-yoga-instructor/course-area.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay, Pagination } from "swiper";
-import { course_data } from '../../../data';
-import CourseTypeTwo from '../../course/course-type-two';
-
-const course_items = course_data.filter(course => course.yoga_course);
-
-const CourseArea = () => {
-  const [loop, setLoop] = useState(false);
-  useEffect(() => setLoop(true), [])
-    return (
-        <div className="edu-course-area course-area-6 edu-section-gap bg-lighten01">
-            <div className="container">
-            <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                <span className="pre-title pre-textsecondary">Popular Courses</span>
-                <h2 className="title">Pick A Course To Get Started</h2>
-                <span className="shape-line"><i className="icon-19"></i></span>
-            </div>
-                <Swiper
-                    className="course-activation"
-                    slidesPerView={1}
-                    modules={[Autoplay, Pagination]}
-                    spaceBetween={0}
-                    loop={loop}
-                    grabCursor={true}
-                    speed={1000}
-                    autoplay={{
-                        delay: 3000
-                    }}
-                    breakpoints={{
-                        768: {
-                            slidesPerView: 2
-                        },
-                        1200: {
-                            slidesPerView: 3
-                        }
-                    }}
-                    pagination={{
-                        el: '.swiper-pagination',
-                        type: 'bullets',
-                        clickable: true
-                    }}
-                >
-                    {course_items.slice(0,4).map((course) => {
-                        const { id, img, level, title, course_price, lesson, student } = course;
-                        return (
-                            <SwiperSlide key={id}>
-                                <CourseTypeTwo data={course} />
-                            </SwiperSlide>
-                        )
-                    })}
-                </Swiper>
-                <div className="swiper-pagination"></div>
-            </div>
-        </div>
-    )
-}
-
-export default CourseArea;
\ No newline at end of file
diff --git a/src/components/homes/home-yoga-instructor/course-area.tsx b/src/components/homes/home-yoga-instructor/course-area.tsx
new file mode 100644
index 0000000..6d156c4
--- /dev/null
+++ b/src/components/homes/home-yoga-instructor/course-area.tsx
@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper';
+import { course_data } from '../../../data';
+import CourseTypeTwo from '../../course/course-type-two';
+
+const course_items = course_data.filter(course => course.yoga_course);
+
+const CourseArea = () => {
+    const [loop, setLoop] = useState(false);
+    useEffect(() => setLoop(true), []);
+    return (
+        <div className='edu-course-area course-area-6 edu-section-gap bg-lighten01'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>Popular Courses</span>
+                    <h2 className='title'>Pick A Course To Get Started</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <Swiper
+                    className='course-activation'
+                    slidesPerView={1}
+                    modules={[Autoplay, Pagination]}
+                    spaceBetween={0}
+                    loop={loop}
+                    grabCursor={true}
+                    speed={1000}
+                    autoplay={{
+                        delay: 3000,
+                    }}
+                    breakpoints={{
+                        768: {
+                            slidesPerView: 2,
+                        },
+                        1200: {
+                            slidesPerView: 3,
+                        },
+                    }}
+                    pagination={{
+                        el: '.swiper-pagination',
+                        type: 'bullets',
+                        clickable: true,
+                    }}
+                >
+                    {course_items.slice(0, 4).map(course => {
+                        const { id, img, level, title, course_price, lesson, student } =
+                            course;
+                        return (
+                            <SwiperSlide key={id}>
+                                <CourseTypeTwo data={course} />
+                            </SwiperSlide>
+                        );
+                    })}
+                </Swiper>
+                <div className='swiper-pagination'></div>
+            </div>
+        </div>
+    );
+};
+
+export default CourseArea;
diff --git a/src/components/homes/home-yoga-instructor/hero-area.jsx b/src/components/homes/home-yoga-instructor/hero-area.jsx
deleted file mode 100644
index c707c62..0000000
--- a/src/components/homes/home-yoga-instructor/hero-area.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const HeroArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="hero-banner hero-style-6">
-            <div className="container">
-                <div className="row align-items-center">
-                    <div className="col-lg-6">
-                        <div className="banner-content">
-                            <h1 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Yoga A Way of Feeling Relaxed & Calm!</h1>
-                            <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.</p>
-                            <div className="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <Link href="/course-style-1" className="edu-btn">
-                                    Find courses<i className="icon-4"></i>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="banner-thumbnail">
-                            <div className="thumbnail" data-sal-delay="500" data-sal="slide-up" data-sal-duration="1000">
-                                <img src="/assets/images/banner/girl-3.webp" alt="Yoga Image" />
-                            </div>
-                            <ul className="shape-group">
-                                <li className="shape-1" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/about/shape-27.png" alt="Shape" />
-                                </li>
-                                <li className="shape-2" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img className="rotateit" src="/assets/images/about/shape-28.png" alt="Shape" />
-                                </li>
-                                <li className="shape-3" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img className="rotateit" src="/assets/images/about/shape-10.png" alt="Shape" />
-                                </li>
-                                <li className="shape-4" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/about/shape-29.png" alt="Shape" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-12.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-13.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-14.png" alt="Shape" />
-                </motion.li>
-            </ul>
-        </div>
-    );
-}
-
-export default HeroArea;
\ No newline at end of file
diff --git a/src/components/homes/home-yoga-instructor/hero-area.tsx b/src/components/homes/home-yoga-instructor/hero-area.tsx
new file mode 100644
index 0000000..bd98eaf
--- /dev/null
+++ b/src/components/homes/home-yoga-instructor/hero-area.tsx
@@ -0,0 +1,165 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const HeroArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='hero-banner hero-style-6'>
+            <div className='container'>
+                <div className='row align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='banner-content'>
+                            <h1
+                                className='title'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Yoga A Way of Feeling Relaxed & Calm!
+                            </h1>
+                            <p
+                                data-sal-delay='200'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit.
+                            </p>
+                            <div
+                                className='banner-btn'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <Link href='/course-style-1' className='edu-btn'>
+                                    Find courses<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='banner-thumbnail'>
+                            <div
+                                className='thumbnail'
+                                data-sal-delay='500'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/banner/girl-3.webp'
+                                        alt='Yoga Image'
+                                    />
+                                </picture>
+                            </div>
+                            <ul className='shape-group'>
+                                <li
+                                    className='shape-1'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-27.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <li
+                                    className='shape-2'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            className='rotateit'
+                                            src='/assets/images/about/shape-28.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <li
+                                    className='shape-3'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            className='rotateit'
+                                            src='/assets/images/about/shape-10.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <li
+                                    className='shape-4'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-29.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-12.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-13.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-14.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default HeroArea;
diff --git a/src/components/homes/home-yoga-instructor/index.jsx b/src/components/homes/home-yoga-instructor/index.tsx
similarity index 56%
rename from src/components/homes/home-yoga-instructor/index.jsx
rename to src/components/homes/home-yoga-instructor/index.tsx
index a217030..515ad48 100644
--- a/src/components/homes/home-yoga-instructor/index.jsx
+++ b/src/components/homes/home-yoga-instructor/index.tsx
@@ -13,21 +13,21 @@ import WhyChose from './why-chose';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
-                <Header/>
-                <HeroArea/>
-                <AboutArea/>
-                <CourseArea/>
-                <CounterArea/>
-                <WhyChose/>
-                <TeamArea/>
-                <VideoArea/>
-                <TestimonialArea/>
-                <InstagramArea/>
-                <FooterFour/>
+            <div id='main-wrapper' className='main-wrapper'>
+                <Header />
+                <HeroArea />
+                <AboutArea />
+                <CourseArea />
+                <CounterArea />
+                <WhyChose />
+                <TeamArea />
+                <VideoArea />
+                <TestimonialArea />
+                <InstagramArea />
+                <FooterFour />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home-yoga-instructor/instagram-area.jsx b/src/components/homes/home-yoga-instructor/instagram-area.jsx
deleted file mode 100644
index bf20f33..0000000
--- a/src/components/homes/home-yoga-instructor/instagram-area.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import SingleInstagram from '../../common/single-instagram';
-
-const InstagramArea = () => {
-    return (
-        <div className="edu-instagram-area instagram-area-1">
-            <div className="container-fluid">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">Instructors</span>
-                    <h2 className="title">Follow Me On Instagram</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-3">
-                    <SingleInstagram img={'07'} name={'@EduBlink.Cooking'} />
-                    <SingleInstagram img={'08'} name={'@EduBlink.Cooking'} />
-                    <SingleInstagram img={'09'} name={'@EduBlink.Cooking'} />
-                    <SingleInstagram img={'10'} name={'@EduBlink.Cooking'} />
-                    <SingleInstagram img={'11'} name={'@EduBlink.Cooking'} />
-                    <SingleInstagram img={'12'} name={'@EduBlink.Cooking'} />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default InstagramArea;
\ No newline at end of file
diff --git a/src/components/homes/home-yoga-instructor/instagram-area.tsx b/src/components/homes/home-yoga-instructor/instagram-area.tsx
new file mode 100644
index 0000000..00d3683
--- /dev/null
+++ b/src/components/homes/home-yoga-instructor/instagram-area.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import SingleInstagram from '../../common/single-instagram';
+
+const InstagramArea = () => {
+    return (
+        <div className='edu-instagram-area instagram-area-1'>
+            <div className='container-fluid'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>Instructors</span>
+                    <h2 className='title'>Follow Me On Instagram</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-3'>
+                    <SingleInstagram img={'07'} name={'@EduBlink.Cooking'} />
+                    <SingleInstagram img={'08'} name={'@EduBlink.Cooking'} />
+                    <SingleInstagram img={'09'} name={'@EduBlink.Cooking'} />
+                    <SingleInstagram img={'10'} name={'@EduBlink.Cooking'} />
+                    <SingleInstagram img={'11'} name={'@EduBlink.Cooking'} />
+                    <SingleInstagram img={'12'} name={'@EduBlink.Cooking'} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default InstagramArea;
diff --git a/src/components/homes/home-yoga-instructor/team-area.jsx b/src/components/homes/home-yoga-instructor/team-area.jsx
deleted file mode 100644
index 2b68f22..0000000
--- a/src/components/homes/home-yoga-instructor/team-area.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import { yoga_instructor } from '../../../data/instructors.js';
-import TeamFour from "../../team-member/team-four";
-
-const TeamArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-team-area team-area-4">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title pre-textsecondary">Instructors</span>
-                    <h2 className="title">Course Instructors</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    {yoga_instructor.slice(0,3).map((instructor) => (
-                        <div key={instructor.id} className="col-lg-4 col-sm-6 col-12" data-sal-delay={instructor.delay} data-sal="slide-up" data-sal-duration="800">
-                            <TeamFour instructor={instructor} />
-                        </div>
-                    ))}
-                </div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <span>
-                        <img src="/assets/images/others/shape-14.png" alt="Shape" />
-                    </span>
-                </motion.li>
-                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <span>
-                        <img src="/assets/images/others/shape-13.png" alt="Shape" />
-                    </span>
-                </motion.li>
-                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-12.png" alt="Shape" />
-                </motion.li>
-            </ul>
-        </div>
-    )
-};
-
-export default TeamArea;
\ No newline at end of file
diff --git a/src/components/homes/home-yoga-instructor/team-area.tsx b/src/components/homes/home-yoga-instructor/team-area.tsx
new file mode 100644
index 0000000..aad3379
--- /dev/null
+++ b/src/components/homes/home-yoga-instructor/team-area.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import { yoga_instructor } from '../../../data/instructors';
+import TeamFour from '../../team-member/team-four';
+
+const TeamArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-team-area team-area-4'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title pre-textsecondary'>Instructors</span>
+                    <h2 className='title'>Course Instructors</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {yoga_instructor.slice(0, 3).map(instructor => (
+                        <div
+                            key={instructor.id}
+                            className='col-lg-4 col-sm-6 col-12'
+                            data-sal-delay={instructor.delay}
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <TeamFour instructor={instructor} />
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <span>
+                        <picture>
+                            <img src='/assets/images/others/shape-14.png' alt='Shape' />
+                        </picture>
+                    </span>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <span>
+                        <picture>
+                            <img src='/assets/images/others/shape-13.png' alt='Shape' />
+                        </picture>
+                    </span>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='200'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-12.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default TeamArea;
diff --git a/src/components/homes/home-yoga-instructor/testimonial-area.jsx b/src/components/homes/home-yoga-instructor/testimonial-area.jsx
deleted file mode 100644
index 16df082..0000000
--- a/src/components/homes/home-yoga-instructor/testimonial-area.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Navigation } from 'swiper';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const testimonial_contents = {
-    pre_title: 'Testimonials',
-    title: 'What Our Students Have To Say',
-    sm_text: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor incididunt labore dolore magna aliquaenim ad minim.',
-    testimonials: [
-        {
-            img: '/assets/images/testimonial/testimonial-01.png',
-            desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-            ratings: [1, 2, 3, 4, 5],
-            name: 'Ray Sanchez',
-            title: 'Student'
-        },
-        {
-            img: '/assets/images/testimonial/testimonial-02.png',
-            desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-            ratings: [1, 2, 3, 4, 5],
-            name: 'Amber Page',
-            title: 'Designer'
-        },
-        {
-            img: '/assets/images/testimonial/testimonial-03.png',
-            desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-            ratings: [1, 2, 3, 4, 5],
-            name: 'Sara Taylor',
-            title: 'Developer'
-        }
-    ]
-}
-
-const { pre_title, sm_text, testimonials, title } = testimonial_contents;
-
-const TestimonialArea = () => {
-    const [loop, setLoop] = useState(false);
-    useEffect(() => setLoop(true), [])
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="testimonial-area-4">
-            <div className="container">
-                <div className="row g-5">
-                    <div className="col-lg-5">
-                        <div className="testimonial-heading-area">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title pre-textsecondary">{pre_title}</span>
-                                <h2 className="title">{title}</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                                <p>{sm_text}</p>
-                                <div className="slick-arrow-nav slick-custom-arrow"></div>
-                            </div>
-                        </div>
-                        <div className="swiper-navigation">
-                            <div className="swiper-btn-nxt" style={{cursor:'pointer'}}>
-                                <i className="icon-west"></i>
-                            </div>
-                            <div className="swiper-btn-prv" style={{cursor:'pointer'}}>
-                                <i className="icon-east"></i>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-7">
-                        <Swiper
-                            className="testimonial-activation-3 swiper"
-                            slidesPerView={1}
-                            spaceBetween={0}
-                            loop={loop}
-                            grabCursor={true}
-                            modules={[Autoplay,Navigation]}
-                            speed={1000}
-                            autoplay={{
-                                delay: 3000
-                            }}
-                            navigation={{
-                                nextEl: ".swiper-btn-nxt",
-                                prevEl: ".swiper-btn-prv"
-                            }}
-                            breakpoints={{
-                                577: {
-                                    slidesPerView: 2
-                                }
-                            }}
-                        >
-                            {testimonials.map((item, i) => {
-                                const { desc, img, name, ratings, title } = item;
-                                return (
-                                    <SwiperSlide key={i}>
-                                        <div className="testimonial-grid testimonial-style-3">
-                                            <div className="thumbnail">
-                                                <img src={img} alt="Testimonial" />
-                                            </div>
-                                            <div className="content">
-                                                <p>{desc}</p>
-                                                <div className="rating-icon">
-                                                    {ratings.map(r => <i key={r} className="icon-23"></i>)}
-                                                </div>
-                                                <h5 className="title">{name}</h5>
-                                                <span className="subtitle">{title}</span>
-                                            </div>
-                                        </div>
-                                    </SwiperSlide>
-                                )
-                            })}
-                        </Swiper>
-                    </div>
-                </div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/others/shape-18.png" alt="Shape" />
-                </motion.li>
-                <li>
-                    <img src="/assets/images/others/map-shape-3.png" alt="Shape" />
-                </li>
-            </ul>
-        </div>
-    )
-}
-
-export default TestimonialArea;
\ No newline at end of file
diff --git a/src/components/homes/home-yoga-instructor/testimonial-area.tsx b/src/components/homes/home-yoga-instructor/testimonial-area.tsx
new file mode 100644
index 0000000..53de7da
--- /dev/null
+++ b/src/components/homes/home-yoga-instructor/testimonial-area.tsx
@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation } from 'swiper';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const testimonial_contents = {
+    pre_title: 'Testimonials',
+    title: 'What Our Students Have To Say',
+    sm_text:
+        'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor incididunt labore dolore magna aliquaenim ad minim.',
+    testimonials: [
+        {
+            img: '/assets/images/testimonial/testimonial-01.png',
+            desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+            ratings: [1, 2, 3, 4, 5],
+            name: 'Ray Sanchez',
+            title: 'Student',
+        },
+        {
+            img: '/assets/images/testimonial/testimonial-02.png',
+            desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+            ratings: [1, 2, 3, 4, 5],
+            name: 'Amber Page',
+            title: 'Designer',
+        },
+        {
+            img: '/assets/images/testimonial/testimonial-03.png',
+            desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+            ratings: [1, 2, 3, 4, 5],
+            name: 'Sara Taylor',
+            title: 'Developer',
+        },
+    ],
+};
+
+const { pre_title, sm_text, testimonials, title } = testimonial_contents;
+
+const TestimonialArea = () => {
+    const [loop, setLoop] = useState(false);
+    useEffect(() => setLoop(true), []);
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='testimonial-area-4'>
+            <div className='container'>
+                <div className='row g-5'>
+                    <div className='col-lg-5'>
+                        <div className='testimonial-heading-area'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title pre-textsecondary'>
+                                    {pre_title}
+                                </span>
+                                <h2 className='title'>{title}</h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>{sm_text}</p>
+                                <div className='slick-arrow-nav slick-custom-arrow'></div>
+                            </div>
+                        </div>
+                        <div className='swiper-navigation'>
+                            <div className='swiper-btn-nxt' style={{ cursor: 'pointer' }}>
+                                <i className='icon-west'></i>
+                            </div>
+                            <div className='swiper-btn-prv' style={{ cursor: 'pointer' }}>
+                                <i className='icon-east'></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-7'>
+                        <Swiper
+                            className='testimonial-activation-3 swiper'
+                            slidesPerView={1}
+                            spaceBetween={0}
+                            loop={loop}
+                            grabCursor={true}
+                            modules={[Autoplay, Navigation]}
+                            speed={1000}
+                            autoplay={{
+                                delay: 3000,
+                            }}
+                            navigation={{
+                                nextEl: '.swiper-btn-nxt',
+                                prevEl: '.swiper-btn-prv',
+                            }}
+                            breakpoints={{
+                                577: {
+                                    slidesPerView: 2,
+                                },
+                            }}
+                        >
+                            {testimonials.map((item, i) => {
+                                const { desc, img, name, ratings, title } = item;
+                                return (
+                                    <SwiperSlide key={i}>
+                                        <div className='testimonial-grid testimonial-style-3'>
+                                            <div className='thumbnail'>
+                                                <picture>
+                                                    <img src={img} alt='Testimonial' />
+                                                </picture>
+                                            </div>
+                                            <div className='content'>
+                                                <p>{desc}</p>
+                                                <div className='rating-icon'>
+                                                    {ratings.map(r => (
+                                                        <i
+                                                            key={r}
+                                                            className='icon-23'
+                                                        ></i>
+                                                    ))}
+                                                </div>
+                                                <h5 className='title'>{name}</h5>
+                                                <span className='subtitle'>{title}</span>
+                                            </div>
+                                        </div>
+                                    </SwiperSlide>
+                                );
+                            })}
+                        </Swiper>
+                    </div>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/others/shape-18.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <li>
+                    <picture>
+                        <img src='/assets/images/others/map-shape-3.png' alt='Shape' />
+                    </picture>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default TestimonialArea;
diff --git a/src/components/homes/home-yoga-instructor/video-area.jsx b/src/components/homes/home-yoga-instructor/video-area.jsx
deleted file mode 100644
index 0cbe126..0000000
--- a/src/components/homes/home-yoga-instructor/video-area.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import useModal from '../../../hooks/use-modal';
-import VideoModal from '../../common/popup-modal/video-modal';
-
-const VideoArea = () => {
-    const { isVideoOpen, setIsVideoOpen } = useModal();
-    return (
-        <>
-            <div className="video-area-3">
-                <div className="container">
-                    <div className="row justify-content-center">
-                        <div className="col-lg-9">
-                            <div className="video-gallery">
-                                <div className="thumbnail">
-                                    <img src="/assets/images/others/video-02.jpg" alt="Thumb"/>
-                                    <button onClick={() => setIsVideoOpen(true)} className="video-play-btn video-popup-activation">
-                                        <i className="icon-18"></i>
-                                    </button>
-                                </div>
-                                <ul className="shape-group">
-                                    <li className="shape-1">
-                                        <img className="rotateit" src="/assets/images/about/shape-10.png" alt="Shape"/>
-                                    </li>
-                                    <li className="shape-2">
-                                        <img src="/assets/images/about/shape-29.png" alt="Shape"/>
-                                    </li>
-                                    <li className="shape-3">
-                                        <img className="rotateit" src="/assets/images/about/shape-31.png" alt="Shape"/>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {/* video modal start */}
-            <VideoModal isVideoOpen={isVideoOpen} setIsVideoOpen={setIsVideoOpen} videoId={'PICj5tr9hcc'} />
-            {/* video modal end */}
-        </>
-    )
-}
-
-export default VideoArea;
\ No newline at end of file
diff --git a/src/components/homes/home-yoga-instructor/video-area.tsx b/src/components/homes/home-yoga-instructor/video-area.tsx
new file mode 100644
index 0000000..f5d4473
--- /dev/null
+++ b/src/components/homes/home-yoga-instructor/video-area.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import useModal from '../../../hooks/use-modal';
+import VideoModal from '../../common/popup-modal/video-modal';
+
+const VideoArea = () => {
+    const { isVideoOpen, setIsVideoOpen } = useModal();
+    return (
+        <>
+            <div className='video-area-3'>
+                <div className='container'>
+                    <div className='row justify-content-center'>
+                        <div className='col-lg-9'>
+                            <div className='video-gallery'>
+                                <div className='thumbnail'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/video-02.jpg'
+                                            alt='Thumb'
+                                        />
+                                    </picture>
+                                    <button
+                                        onClick={() => setIsVideoOpen(true)}
+                                        className='video-play-btn video-popup-activation'
+                                    >
+                                        <i className='icon-18'></i>
+                                    </button>
+                                </div>
+                                <ul className='shape-group'>
+                                    <li className='shape-1'>
+                                        <picture>
+                                            <img
+                                                className='rotateit'
+                                                src='/assets/images/about/shape-10.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </li>
+                                    <li className='shape-2'>
+                                        <picture>
+                                            <img
+                                                src='/assets/images/about/shape-29.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </li>
+                                    <li className='shape-3'>
+                                        <picture>
+                                            <img
+                                                className='rotateit'
+                                                src='/assets/images/about/shape-31.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* video modal start */}
+            <VideoModal
+                isVideoOpen={isVideoOpen}
+                setIsVideoOpen={setIsVideoOpen}
+                videoId={'PICj5tr9hcc'}
+            />
+            {/* video modal end */}
+        </>
+    );
+};
+
+export default VideoArea;
diff --git a/src/components/homes/home-yoga-instructor/why-chose.jsx b/src/components/homes/home-yoga-instructor/why-chose.jsx
deleted file mode 100644
index 53e0100..0000000
--- a/src/components/homes/home-yoga-instructor/why-chose.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
-
-const features = [
-    {
-        color:'color-secondary-style',
-        icon:'icon-81',
-        title:'Exclusive Program',
-        text:'Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris.'
-    },
-    {
-        color:'color-primary-style',
-        icon:'icon-82',
-        title:'Online Training',
-        text:'Consectetur adipisicing elit, sed do eiusmod tempor ux incididunt ut labore et dolore.'
-    },
-    {
-        color:'color-extra05-style',
-        icon:'icon-83',
-        title:'Individual Care',
-        text:'Incididunt ut labore et dolore magna aliqua. Ut enim ad minim.'
-    }
-];
-
-const WhyChose = () => {
-    const { scrollYProgress } = useScroll();
-    const y = useTransform(scrollYProgress, [0, 1], [0, -80]);
-    return (
-        <div className="why-choose-area-1 section-gap-equal">
-            <div className="container">
-                <div className="row g-5 row--45">
-                    <div className="col-lg-6">
-                        <div className="why-choose-content">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title pre-textsecondary">Why Choose</span>
-                                <h2 className="title">Why Choose My Yoga Courses?</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                                <p>Magna aliquaenim minim veniam quis nostrud exercitation ullamco laborisLorem ipsum dolor sit amet consectetur.</p>
-                            </div>
-                            <div className="features-list" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                {features.map((item,i) => {
-                                    const {color,icon,text,title} = item;
-                                    return (
-                                        <div key={i} className={`features-box ${color}`}>
-                                            <div className="icon">
-                                                <i className={icon}></i>
-                                            </div>
-                                            <div className="content">
-                                                <h5 className="title">{title}</h5>
-                                                <p>{text}</p>
-                                            </div>
-                                        </div>
-                                    )
-                                })}
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="why-choose-gallery">
-                            <div className="gallery-thumbnail">
-                                <div className="thumbnail thumbnail-1">
-                                    <img src="/assets/images/others/why-choose-01.webp" alt="Why Choose"/>
-                                </div>
-                                <motion.div className="thumbnail thumbnail-2" style={{ y }}>
-                                    <img src="/assets/images/others/why-choose-02.webp" alt="Why Choose"/>
-                                </motion.div>
-                            </div>
-                            <ul className="shape-group">
-                                <li className="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                                    <img src="/assets/images/about/shape-14.png" alt="Shape Images"/>
-                                </li>
-                                <li className="shape-2" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
-                                    <img src="/assets/images/about/shape-10.png" alt="Shape Images"/>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default WhyChose;
\ No newline at end of file
diff --git a/src/components/homes/home-yoga-instructor/why-chose.tsx b/src/components/homes/home-yoga-instructor/why-chose.tsx
new file mode 100644
index 0000000..4efd9af
--- /dev/null
+++ b/src/components/homes/home-yoga-instructor/why-chose.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import { motion, useScroll, useTransform } from 'framer-motion';
+
+const features = [
+    {
+        color: 'color-secondary-style',
+        icon: 'icon-81',
+        title: 'Exclusive Program',
+        text: 'Magna aliquaenim minim veniam nostrud exercit ation ullamco laboris.',
+    },
+    {
+        color: 'color-primary-style',
+        icon: 'icon-82',
+        title: 'Online Training',
+        text: 'Consectetur adipisicing elit, sed do eiusmod tempor ux incididunt ut labore et dolore.',
+    },
+    {
+        color: 'color-extra05-style',
+        icon: 'icon-83',
+        title: 'Individual Care',
+        text: 'Incididunt ut labore et dolore magna aliqua. Ut enim ad minim.',
+    },
+];
+
+const WhyChose = () => {
+    const { scrollYProgress } = useScroll();
+    const y = useTransform(scrollYProgress, [0, 1], [0, -80]);
+    return (
+        <div className='why-choose-area-1 section-gap-equal'>
+            <div className='container'>
+                <div className='row g-5 row--45'>
+                    <div className='col-lg-6'>
+                        <div className='why-choose-content'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title pre-textsecondary'>
+                                    Why Choose
+                                </span>
+                                <h2 className='title'>Why Choose My Yoga Courses?</h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>
+                                    Magna aliquaenim minim veniam quis nostrud
+                                    exercitation ullamco laborisLorem ipsum dolor sit amet
+                                    consectetur.
+                                </p>
+                            </div>
+                            <div
+                                className='features-list'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                {features.map((item, i) => {
+                                    const { color, icon, text, title } = item;
+                                    return (
+                                        <div key={i} className={`features-box ${color}`}>
+                                            <div className='icon'>
+                                                <i className={icon}></i>
+                                            </div>
+                                            <div className='content'>
+                                                <h5 className='title'>{title}</h5>
+                                                <p>{text}</p>
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='why-choose-gallery'>
+                            <div className='gallery-thumbnail'>
+                                <div className='thumbnail thumbnail-1'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/why-choose-01.webp'
+                                            alt='Why Choose'
+                                        />
+                                    </picture>
+                                </div>
+                                <motion.div
+                                    className='thumbnail thumbnail-2'
+                                    style={{ y }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/others/why-choose-02.webp'
+                                            alt='Why Choose'
+                                        />
+                                    </picture>
+                                </motion.div>
+                            </div>
+                            <ul className='shape-group'>
+                                <li
+                                    className='shape-1'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-14.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </li>
+                                <li
+                                    className='shape-2'
+                                    data-sal-delay='500'
+                                    data-sal='fade'
+                                    data-sal-duration='200'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-10.png'
+                                            alt='Shape Images'
+                                        />
+                                    </picture>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default WhyChose;
diff --git a/src/components/homes/home/about-area.jsx b/src/components/homes/home/about-area.jsx
deleted file mode 100644
index 00aa522..0000000
--- a/src/components/homes/home/about-area.jsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import useModal from '../../../hooks/use-modal';
-import VideoModal from '../../common/popup-modal/video-modal';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const features_list = ['Expert Trainers','Online Remote Learning','Lifetime Access']
-
-const AboutArea = () => {
-    const { isVideoOpen, setIsVideoOpen } = useModal();
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <>
-            <div className="gap-bottom-equal edu-about-area about-style-1">
-                <div className="container edublink-animated-shape">
-                    <div className="row g-5 align-items-center">
-                        <div className="col-lg-6">
-                            <div className="about-image-gallery">
-                                <img className="main-img-1" src="/assets/images/about/about-01.webp" alt="About Image" />
-                                <div className="video-box" data-sal-delay="150" data-sal="slide-down" data-sal-duration="800">
-                                    <div className="inner">
-                                        <div className="thumb">
-                                            <img src="/assets/images/about/about-02.webp" alt="About Image" />
-                                            <button onClick={() => setIsVideoOpen(true)} className="popup-icon video-popup-activation border-0">
-                                            <i className="icon-18"></i>
-                                            </button>
-                                        </div>
-                                        <div className="loading-bar">
-                                            <span></span>
-                                            <span></span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="award-status bounce-slide">
-                                    <div className="inner">
-                                        <div className="icon">
-                                            <i className="icon-21"></i>
-                                        </div>
-                                        <div className="content">
-                                            <h6 className="title">29+</h6>
-                                            <span className="subtitle">Wonderful Awards</span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <ul className="shape-group">
-                                    <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                        animate={ {
-                                            x: mouseReverse(25).x,
-                                            y: mouseReverse(25).y
-                                        } }
-                                    >
-                                        <img src="/assets/images/about/shape-36.png" alt="Shape" />
-                                    </motion.li>
-                                    <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                        animate={ {
-                                            x: mouseDirection(25).x,
-                                            y: mouseDirection(25).y
-                                        } }
-                                    >
-                                        <img src="/assets/images/about/shape-37.png" alt="Shape" />
-                                    </motion.li>
-                                    <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                                        animate={ {
-                                            x: mouseReverse(25).x,
-                                            y: mouseReverse(25).y
-                                        } }
-                                    >
-                                        <img src="/assets/images/about/shape-02.png" alt="Shape" />
-                                    </motion.li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div className="col-lg-6" data-sal-delay="150" data-sal="slide-left" data-sal-duration="800">
-                            <div className="about-content">
-                                <div className="section-title section-left">
-                                    <span className="pre-title">About Us</span>
-                                    <h2 className="title">Learn & Grow Your Skills From <span className="color-secondary">Anywhere</span></h2>
-                                    <span className="shape-line"><i className="icon-19"></i></span>
-                                    <p>Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod ex tempor incididunt labore dolore magna aliquaenim minim veniam quis nostrud exercitation ullamco laboris.</p>
-                                </div>
-                                <ul className="features-list">
-                                    {features_list.map((l,i) => <li key={i}>{l}</li>)}
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                    <ul className="shape-group">
-                        <motion.li className="shape-1 circle scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200"
-                            animate={ {
-                                x: mouseDirection(25).x,
-                                y: mouseDirection(25).y
-                            } }
-                        >
-                            <span className="d-block"></span>
-                        </motion.li>
-                    </ul>
-                </div>
-            </div>
-
-            {/* video modal start */}
-            <VideoModal isVideoOpen={isVideoOpen} setIsVideoOpen={setIsVideoOpen} videoId="PICj5tr9hcc" />
-            {/* video modal end */}
-        </>
-    );
-};
-
-export default AboutArea;
\ No newline at end of file
diff --git a/src/components/homes/home/about-area.tsx b/src/components/homes/home/about-area.tsx
new file mode 100644
index 0000000..68e98ca
--- /dev/null
+++ b/src/components/homes/home/about-area.tsx
@@ -0,0 +1,179 @@
+import useModal from '../../../hooks/use-modal';
+import VideoModal from '../../common/popup-modal/video-modal';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const features_list = ['Expert Trainers', 'Online Remote Learning', 'Lifetime Access'];
+
+const AboutArea = () => {
+    const { isVideoOpen, setIsVideoOpen } = useModal();
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <>
+            <div className='gap-bottom-equal edu-about-area about-style-1'>
+                <div className='container edublink-animated-shape'>
+                    <div className='row g-5 align-items-center'>
+                        <div className='col-lg-6'>
+                            <div className='about-image-gallery'>
+                                <picture>
+                                    <img
+                                        className='main-img-1'
+                                        src='/assets/images/about/about-01.webp'
+                                        alt='About Image'
+                                    />
+                                </picture>
+                                <div
+                                    className='video-box'
+                                    data-sal-delay='150'
+                                    data-sal='slide-down'
+                                    data-sal-duration='800'
+                                >
+                                    <div className='inner'>
+                                        <div className='thumb'>
+                                            <picture>
+                                                <img
+                                                    src='/assets/images/about/about-02.webp'
+                                                    alt='About Image'
+                                                />
+                                            </picture>
+                                            <button
+                                                onClick={() => setIsVideoOpen(true)}
+                                                className='popup-icon video-popup-activation border-0'
+                                            >
+                                                <i className='icon-18'></i>
+                                            </button>
+                                        </div>
+                                        <div className='loading-bar'>
+                                            <span></span>
+                                            <span></span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className='award-status bounce-slide'>
+                                    <div className='inner'>
+                                        <div className='icon'>
+                                            <i className='icon-21'></i>
+                                        </div>
+                                        <div className='content'>
+                                            <h6 className='title'>29+</h6>
+                                            <span className='subtitle'>
+                                                Wonderful Awards
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <ul className='shape-group'>
+                                    <motion.li
+                                        className='shape-1 scene'
+                                        data-sal-delay='500'
+                                        data-sal='fade'
+                                        data-sal-duration='200'
+                                        animate={{
+                                            x: mouseReverse(25).x,
+                                            y: mouseReverse(25).y,
+                                        }}
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/about/shape-36.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </motion.li>
+                                    <motion.li
+                                        className='shape-2 scene'
+                                        data-sal-delay='500'
+                                        data-sal='fade'
+                                        data-sal-duration='200'
+                                        animate={{
+                                            x: mouseDirection(25).x,
+                                            y: mouseDirection(25).y,
+                                        }}
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/about/shape-37.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </motion.li>
+                                    <motion.li
+                                        className='shape-3 scene'
+                                        data-sal-delay='500'
+                                        data-sal='fade'
+                                        data-sal-duration='200'
+                                        animate={{
+                                            x: mouseReverse(25).x,
+                                            y: mouseReverse(25).y,
+                                        }}
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/about/shape-02.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </motion.li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div
+                            className='col-lg-6'
+                            data-sal-delay='150'
+                            data-sal='slide-left'
+                            data-sal-duration='800'
+                        >
+                            <div className='about-content'>
+                                <div className='section-title section-left'>
+                                    <span className='pre-title'>About Us</span>
+                                    <h2 className='title'>
+                                        Learn & Grow Your Skills From{' '}
+                                        <span className='color-secondary'>Anywhere</span>
+                                    </h2>
+                                    <span className='shape-line'>
+                                        <i className='icon-19'></i>
+                                    </span>
+                                    <p>
+                                        Lorem ipsum dolor sit amet consectur adipiscing
+                                        elit sed eiusmod ex tempor incididunt labore
+                                        dolore magna aliquaenim minim veniam quis nostrud
+                                        exercitation ullamco laboris.
+                                    </p>
+                                </div>
+                                <ul className='features-list'>
+                                    {features_list.map((l, i) => (
+                                        <li key={i}>{l}</li>
+                                    ))}
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <ul className='shape-group'>
+                        <motion.li
+                            className='shape-1 circle scene'
+                            data-sal-delay='500'
+                            data-sal='fade'
+                            data-sal-duration='200'
+                            animate={{
+                                x: mouseDirection(25).x,
+                                y: mouseDirection(25).y,
+                            }}
+                        >
+                            <span className='d-block'></span>
+                        </motion.li>
+                    </ul>
+                </div>
+            </div>
+
+            {/* video modal start */}
+            <VideoModal
+                isVideoOpen={isVideoOpen}
+                setIsVideoOpen={setIsVideoOpen}
+                videoId='PICj5tr9hcc'
+            />
+            {/* video modal end */}
+        </>
+    );
+};
+
+export default AboutArea;
diff --git a/src/components/homes/home/ad-banner.jsx b/src/components/homes/home/ad-banner.jsx
deleted file mode 100644
index 63e2419..0000000
--- a/src/components/homes/home/ad-banner.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const AdBanner = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="edu-cta-banner-area home-one-cta-wrapper bg-image">
-            <div className="container">
-                <div className="edu-cta-banner">
-                    <div className="row justify-content-center">
-                        <div className="col-lg-7">
-                            <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <h2 className="title">Get Your Quality Skills <span className="color-secondary">Certificate</span> Through EduBlink </h2>
-                                <Link href="/contact-us" className="edu-btn">
-                                    Get started now<i className="icon-4"></i>
-
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                    <ul className="shape-group">
-                        <motion.li className="shape-01 scene"
-                            animate={ {
-                                x: mouseReverse(30).x,
-                                y: mouseReverse(30).y
-                            } }
-                        >
-                            <img src="/assets/images/cta/shape-10.png" alt="shape" />
-                        </motion.li>
-                        <motion.li className="shape-02 scene"
-                            animate={ {
-                                x: mouseDirection(30).x,
-                                y: mouseDirection(30).y
-                            } }
-                        >
-                            <img src="/assets/images/cta/shape-09.png" alt="shape" />
-                        </motion.li>
-                        <motion.li className="shape-03 scene"
-                            animate={ {
-                                x: mouseDirection(30).x,
-                                y: mouseDirection(30).y
-                            } }
-                        >
-                            <img src="/assets/images/cta/shape-08.png" alt="shape" />
-                        </motion.li>
-                        <motion.li className="shape-04 scene"
-                            animate={ {
-                                x: mouseReverse(30).x,
-                                y: mouseReverse(30).y
-                            } }
-                        >
-                            <img src="/assets/images/about/shape-13.png" alt="shape" />
-                        </motion.li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default AdBanner;
\ No newline at end of file
diff --git a/src/components/homes/home/ad-banner.tsx b/src/components/homes/home/ad-banner.tsx
new file mode 100644
index 0000000..b4a8eff
--- /dev/null
+++ b/src/components/homes/home/ad-banner.tsx
@@ -0,0 +1,85 @@
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const AdBanner = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='edu-cta-banner-area home-one-cta-wrapper bg-image'>
+            <div className='container'>
+                <div className='edu-cta-banner'>
+                    <div className='row justify-content-center'>
+                        <div className='col-lg-7'>
+                            <div
+                                className='section-title section-center'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <h2 className='title'>
+                                    Get Your Quality Skills{' '}
+                                    <span className='color-secondary'>Certificate</span>{' '}
+                                    Through EduBlink{' '}
+                                </h2>
+                                <Link href='/contact-us' className='edu-btn'>
+                                    Get started now<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                    <ul className='shape-group'>
+                        <motion.li
+                            className='shape-01 scene'
+                            animate={{
+                                x: mouseReverse(30).x,
+                                y: mouseReverse(30).y,
+                            }}
+                        >
+                            <picture>
+                                <img src='/assets/images/cta/shape-10.png' alt='shape' />
+                            </picture>
+                        </motion.li>
+                        <motion.li
+                            className='shape-02 scene'
+                            animate={{
+                                x: mouseDirection(30).x,
+                                y: mouseDirection(30).y,
+                            }}
+                        >
+                            <picture>
+                                <img src='/assets/images/cta/shape-09.png' alt='shape' />
+                            </picture>
+                        </motion.li>
+                        <motion.li
+                            className='shape-03 scene'
+                            animate={{
+                                x: mouseDirection(30).x,
+                                y: mouseDirection(30).y,
+                            }}
+                        >
+                            <picture>
+                                <img src='/assets/images/cta/shape-08.png' alt='shape' />
+                            </picture>
+                        </motion.li>
+                        <motion.li
+                            className='shape-04 scene'
+                            animate={{
+                                x: mouseReverse(30).x,
+                                y: mouseReverse(30).y,
+                            }}
+                        >
+                            <picture>
+                                <img
+                                    src='/assets/images/about/shape-13.png'
+                                    alt='shape'
+                                />
+                            </picture>
+                        </motion.li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AdBanner;
diff --git a/src/components/homes/home/blog-area.jsx b/src/components/homes/home/blog-area.jsx
deleted file mode 100644
index 8f14976..0000000
--- a/src/components/homes/home/blog-area.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-import { blog_data } from '../../../data';
-import BlogPostOne from '../../blog-post/blog-post-one';
-
-const BlogArea = ({ style_2 }) => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    const blogItems = blog_data.filter(b => b.home_1);
-    return (
-        <div className={`edu-blog-area ${style_2 ? style_2 : "blog-area-1 edu-section-gap" }`}>
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Latest Articles</span>
-                    <h2 className="title">Get News with EduBlink</h2>
-                    <span className="shape-line">
-                        <i className="icon-19"></i>
-                    </span>
-                </div>
-                <div className="row g-5"> 
-                    {blogItems.map((blogItem, i) => ( 
-                        <div key={i} className="col-lg-4 col-md-6 col-12" data-sal-delay={blogItem.delay} data-sal="slide-up" data-sal-duration="800">
-                            <BlogPostOne param={blogItem} />
-                        </div> 
-                    ))} 
-                </div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-02.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-2 scene"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <span></span>
-                </motion.li>
-                <motion.li className="shape-3 scene"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/counterup/shape-05.png" alt="Shape" />
-                </motion.li>
-            </ul>
-        </div>
-    )
-}
-
-export default BlogArea;
\ No newline at end of file
diff --git a/src/components/homes/home/blog-area.tsx b/src/components/homes/home/blog-area.tsx
new file mode 100644
index 0000000..b5cb77f
--- /dev/null
+++ b/src/components/homes/home/blog-area.tsx
@@ -0,0 +1,83 @@
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+import { blog_data } from '../../../data';
+import BlogPostOne from '../../blog-post/blog-post-one';
+
+type BlogAreaProps = {
+    style_2?: string;
+};
+
+const BlogArea = ({ style_2 }: BlogAreaProps) => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    const blogItems = blog_data.filter(b => b.home_1);
+    return (
+        <div
+            className={`edu-blog-area ${
+                style_2 ? style_2 : 'blog-area-1 edu-section-gap'
+            }`}
+        >
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='100'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Latest Articles</span>
+                    <h2 className='title'>Get News with EduBlink</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {blogItems.map((blogItem, i) => (
+                        <div
+                            key={i}
+                            className='col-lg-4 col-md-6 col-12'
+                            data-sal-delay={blogItem.delay}
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <BlogPostOne param={blogItem} />
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-02.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <span></span>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/counterup/shape-05.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default BlogArea;
diff --git a/src/components/homes/home/brand-area.jsx b/src/components/homes/home/brand-area.jsx
deleted file mode 100644
index 6cbef8e..0000000
--- a/src/components/homes/home/brand-area.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-const brand_contents = {
-    pre_title: 'Our Partners',
-    title: 'Learn with Our Partners',
-    text: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor incididunt.',
-    brands: [
-        'assets/images/brand/brand-01.png',
-        'assets/images/brand/brand-02.png',
-        'assets/images/brand/brand-03.png',
-        'assets/images/brand/brand-04.png',
-        'assets/images/brand/brand-05.png',
-        'assets/images/brand/brand-06.png',
-        'assets/images/brand/brand-07.png',
-        'assets/images/brand/brand-08.png'
-    ]
-}
-
-const { pre_title, title, text, brands } = brand_contents;
-
-const BrandArea = () => {
-    return (
-        <div className="edu-brand-area brand-area-1 gap-top-equal">
-            <div className="container">
-                <div className="row">
-                    <div className="col-lg-5">
-                        <div className="brand-section-heading">
-                            <div className="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title">{pre_title}</span>
-                                <h2 className="title">{title}</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                                <p>{text}</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-7">
-                        <div className="brand-grid-wrap">
-                            {brands.map((b, i) => (
-                                <div key={i} className="brand-grid">
-                                    <img src={b} alt="Brand Logo" />
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default BrandArea;
\ No newline at end of file
diff --git a/src/components/homes/home/brand-area.tsx b/src/components/homes/home/brand-area.tsx
new file mode 100644
index 0000000..4bb7257
--- /dev/null
+++ b/src/components/homes/home/brand-area.tsx
@@ -0,0 +1,58 @@
+const brand_contents = {
+    pre_title: 'Our Partners',
+    title: 'Learn with Our Partners',
+    text: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor incididunt.',
+    brands: [
+        'assets/images/brand/brand-01.png',
+        'assets/images/brand/brand-02.png',
+        'assets/images/brand/brand-03.png',
+        'assets/images/brand/brand-04.png',
+        'assets/images/brand/brand-05.png',
+        'assets/images/brand/brand-06.png',
+        'assets/images/brand/brand-07.png',
+        'assets/images/brand/brand-08.png',
+    ],
+};
+
+const { pre_title, title, text, brands } = brand_contents;
+
+const BrandArea = () => {
+    return (
+        <div className='edu-brand-area brand-area-1 gap-top-equal'>
+            <div className='container'>
+                <div className='row'>
+                    <div className='col-lg-5'>
+                        <div className='brand-section-heading'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title'>{pre_title}</span>
+                                <h2 className='title'>{title}</h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>{text}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-7'>
+                        <div className='brand-grid-wrap'>
+                            {brands.map((b, i) => (
+                                <div key={i} className='brand-grid'>
+                                    <picture>
+                                        <img src={b} alt='Brand Logo' />
+                                    </picture>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BrandArea;
diff --git a/src/components/homes/home/category-area.jsx b/src/components/homes/home/category-area.jsx
deleted file mode 100644
index beae24f..0000000
--- a/src/components/homes/home/category-area.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Certificate, Instructor, OnlineClass, User } from '../../../svg';
-
-const category_contents = [
-  { icon: <OnlineClass/>, title: '3020', subtitle: 'Online Courses' },
-  { icon: <Instructor/>, title: 'Top', subtitle: 'Instructors' },
-  { icon: <Certificate/>, title: 'Online', subtitle: 'Certifications' },
-  { icon: <User/>, title: '6000', subtitle: 'Members' },
-]
-
-const CategoryArea = () => {
-    return (
-        <div className="features-area-2">
-            <div className="container">
-                <div className="features-grid-wrap">
-                    {category_contents.map((category, i) => (
-                        <div key={i} className="features-box features-style-2 edublink-svg-animate">
-                            <div className="icon">
-                                {category.icon}
-                            </div>
-                            <div className="content">
-                                <h5 className="title"><span>{category.title}</span>{category.subtitle}</h5>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CategoryArea;
\ No newline at end of file
diff --git a/src/components/homes/home/category-area.tsx b/src/components/homes/home/category-area.tsx
new file mode 100644
index 0000000..c0c8617
--- /dev/null
+++ b/src/components/homes/home/category-area.tsx
@@ -0,0 +1,35 @@
+import { Certificate, Instructor, OnlineClass, User } from '../../../svg';
+
+const category_contents = [
+    { icon: <OnlineClass />, title: '3020', subtitle: 'Online Courses' },
+    { icon: <Instructor />, title: 'Top', subtitle: 'Instructors' },
+    { icon: <Certificate />, title: 'Online', subtitle: 'Certifications' },
+    { icon: <User />, title: '6000', subtitle: 'Members' },
+];
+
+const CategoryArea = () => {
+    return (
+        <div className='features-area-2'>
+            <div className='container'>
+                <div className='features-grid-wrap'>
+                    {category_contents.map((category, i) => (
+                        <div
+                            key={i}
+                            className='features-box features-style-2 edublink-svg-animate'
+                        >
+                            <div className='icon'>{category.icon}</div>
+                            <div className='content'>
+                                <h5 className='title'>
+                                    <span>{category.title}</span>
+                                    {category.subtitle}
+                                </h5>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CategoryArea;
diff --git a/src/components/homes/home/counter-box.jsx b/src/components/homes/home/counter-box.jsx
deleted file mode 100644
index e22c4d7..0000000
--- a/src/components/homes/home/counter-box.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import Counter from '../../common/counter';
-
-const counter_data = [
-    {color:'primary-color',number:45.2,text:'K',title:'Student Enrolled',decimal: 1},
-    {color:'secondary-color',number:32.4,text:'K',title:'Class Completed',decimal: 1},
-    {color:'extra05-color',number:354,text:'+',title:'Top Instructors'},
-    {color:'extra02-color',number:100,text:'%',title:'Satisfaction Rate'},
-];
-
-const CounterBox = () => {
-    return (
-        <>
-            <div className="counterup-box counterup-box-1">
-                { counter_data.slice(0,2).map( ( c,i ) => (
-                    <div key={i} className="edu-counterup counterup-style-2">
-                        <h2 className={`counter-item count-number ${c.color}`}>
-                        <span className="odometer">
-                            <Counter number={parseFloat(c.number)} text={c.text} decimal={c.decimal} />
-                        </span>
-                        </h2>
-                        <h6 className="title">{c.title}</h6>
-                    </div>
-                ) ) }
-            </div>
-            <div className="counterup-box counterup-box-2">
-                { counter_data.slice(2,4).map( ( c,i ) => (
-                    <div key={i} className="edu-counterup counterup-style-2">
-                        <h2 className={`counter-item count-number ${c.color}`}>
-                        <span className="odometer">
-                            <Counter number={parseFloat(c.number)} text={c.text} decimal={c.decimal} />
-                        </span>
-                        </h2>
-                        <h6 className="title">{c.title}</h6>
-                    </div>
-                ) ) }
-            </div>
-        </>
-    )
-}
-
-export default CounterBox;
\ No newline at end of file
diff --git a/src/components/homes/home/counter-box.tsx b/src/components/homes/home/counter-box.tsx
new file mode 100644
index 0000000..68a0fbc
--- /dev/null
+++ b/src/components/homes/home/counter-box.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import Counter from '../../common/counter';
+
+const counter_data = [
+    {
+        color: 'primary-color',
+        number: 45.2,
+        text: 'K',
+        title: 'Student Enrolled',
+        decimal: 1,
+    },
+    {
+        color: 'secondary-color',
+        number: 32.4,
+        text: 'K',
+        title: 'Class Completed',
+        decimal: 1,
+    },
+    { color: 'extra05-color', number: 354, text: '+', title: 'Top Instructors' },
+    { color: 'extra02-color', number: 100, text: '%', title: 'Satisfaction Rate' },
+];
+
+const CounterBox = () => {
+    return (
+        <>
+            <div className='counterup-box counterup-box-1'>
+                {counter_data.slice(0, 2).map((c, i) => (
+                    <div key={i} className='edu-counterup counterup-style-2'>
+                        <h2 className={`counter-item count-number ${c.color}`}>
+                            <span className='odometer'>
+                                <Counter
+                                    number={c.number}
+                                    text={c.text}
+                                    decimal={c.decimal}
+                                />
+                            </span>
+                        </h2>
+                        <h6 className='title'>{c.title}</h6>
+                    </div>
+                ))}
+            </div>
+            <div className='counterup-box counterup-box-2'>
+                {counter_data.slice(2, 4).map((c, i) => (
+                    <div key={i} className='edu-counterup counterup-style-2'>
+                        <h2 className={`counter-item count-number ${c.color}`}>
+                            <span className='odometer'>
+                                <Counter
+                                    number={c.number}
+                                    text={c.text}
+                                    decimal={c.decimal}
+                                />
+                            </span>
+                        </h2>
+                        <h6 className='title'>{c.title}</h6>
+                    </div>
+                ))}
+            </div>
+        </>
+    );
+};
+
+export default CounterBox;
diff --git a/src/components/homes/home/counter-up-area.jsx b/src/components/homes/home/counter-up-area.jsx
deleted file mode 100644
index 418d654..0000000
--- a/src/components/homes/home/counter-up-area.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import CounterBox from "./counter-box";
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const CounterUpArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="counterup-area-2">
-            <div className="container">
-                <div className="row g-5 justify-content-center">
-                    <div className="col-lg-8">
-                        <div className="counterup-box-wrap">
-                            <CounterBox/>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-2">
-                                    <img className="rotateit" src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-3 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/counterup/shape-04.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-4 scene"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/counterup/shape-05.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CounterUpArea;
\ No newline at end of file
diff --git a/src/components/homes/home/counter-up-area.tsx b/src/components/homes/home/counter-up-area.tsx
new file mode 100644
index 0000000..88a735f
--- /dev/null
+++ b/src/components/homes/home/counter-up-area.tsx
@@ -0,0 +1,75 @@
+import CounterBox from './counter-box';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const CounterUpArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='counterup-area-2'>
+            <div className='container'>
+                <div className='row g-5 justify-content-center'>
+                    <div className='col-lg-8'>
+                        <div className='counterup-box-wrap'>
+                            <CounterBox />
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li className='shape-2'>
+                                    <picture>
+                                        <img
+                                            className='rotateit'
+                                            src='/assets/images/counterup/shape-02.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/counterup/shape-04.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-4 scene'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/counterup/shape-05.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CounterUpArea;
diff --git a/src/components/homes/home/course-area.jsx b/src/components/homes/home/course-area.jsx
deleted file mode 100644
index b666671..0000000
--- a/src/components/homes/home/course-area.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Link from "next/link";
-import { course_data } from "../../../data";
-import CourseTypeOne from '../../course/course-type-one';
-
-const CourseArea = () => {
-    return (
-        <div className="edu-course-area course-area-1 edu-section-gap bg-lighten01">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up"
-                    data-sal-duration="800">
-                    <span className="pre-title">Popular Courses</span>
-                    <h2 className="title">Pick A Course To Get Started</h2> 
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    {course_data.slice(0,4).map((course) => {
-                        return (
-                            <div className="col-md-6 col-xl-3" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800" key={course.id}>
-                                <CourseTypeOne data={course} />
-                            </div>
-                        )
-                    })}
-                </div>
-                <div className="course-view-all" data-sal-delay="150" data-sal="slide-up" data-sal-duration="1200">
-                    <Link href="/course-style-1" className="edu-btn">
-                        Browse more courses<i className="icon-4"></i>
-                    </Link>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default CourseArea;
\ No newline at end of file
diff --git a/src/components/homes/home/course-area.tsx b/src/components/homes/home/course-area.tsx
new file mode 100644
index 0000000..c9b0613
--- /dev/null
+++ b/src/components/homes/home/course-area.tsx
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+import { course_data } from '../../../data';
+import CourseTypeOne from '../../course/course-type-one';
+
+const CourseArea = () => {
+    return (
+        <div className='edu-course-area course-area-1 edu-section-gap bg-lighten01'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Popular Courses</span>
+                    <h2 className='title'>Pick A Course To Get Started</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {course_data.slice(0, 4).map(course => {
+                        return (
+                            <div
+                                className='col-md-6 col-xl-3'
+                                data-sal-delay='150'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                                key={course.id}
+                            >
+                                <CourseTypeOne data={course} />
+                            </div>
+                        );
+                    })}
+                </div>
+                <div
+                    className='course-view-all'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='1200'
+                >
+                    <Link href='/course-style-1' className='edu-btn'>
+                        Browse more courses<i className='icon-4'></i>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CourseArea;
diff --git a/src/components/homes/home/cta-area.jsx b/src/components/homes/home/cta-area.jsx
deleted file mode 100644
index cf03880..0000000
--- a/src/components/homes/home/cta-area.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const CtaArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="home-one-cta-two cta-area-1">
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-xl-8">
-                        <div className="home-one-cta edu-cta-box bg-image">
-                            <div className="inner">
-                                <div className="content text-md-end">
-                                    <span className="subtitle">Get In Touch:</span>
-                                    <h3 className="title">
-                                        <a href="mailto:info@edublink">info@edublink</a>
-                                    </h3>
-                                </div>
-                                <div className="sparator">
-                                    <span>or</span>
-                                </div>
-                                <div className="content">
-                                    <span className="subtitle">Call Us Via:</span>
-                                    <h3 className="title">
-                                        <a href="tel:+011235641231">+01 123 5641 231</a>
-                                    </h3>
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-01 scene"
-                                    animate={ {
-                                        x: mouseReverse(50).x,
-                                        y: mouseReverse(50).y
-                                    } }
-                                >
-                                    <img src="/assets/images/cta/shape-06.png" alt="shape" />
-                                </motion.li>
-                                <motion.li className="shape-02 scene"
-                                    animate={ {
-                                        x: mouseDirection(50).x,
-                                        y: mouseDirection(50).y
-                                    } }
-                                >
-                                    <img src="/assets/images/cta/shape-12.png" alt="shape" />
-                                </motion.li>
-                                <motion.li className="shape-03 scene"
-                                    animate={ {
-                                        x: mouseDirection(50).x,
-                                        y: mouseDirection(50).y
-                                    } }
-                                >
-                                    <img src="/assets/images/cta/shape-04.png" alt="shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CtaArea;
\ No newline at end of file
diff --git a/src/components/homes/home/cta-area.tsx b/src/components/homes/home/cta-area.tsx
new file mode 100644
index 0000000..aca96fa
--- /dev/null
+++ b/src/components/homes/home/cta-area.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const CtaArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='home-one-cta-two cta-area-1'>
+            <div className='container'>
+                <div className='row justify-content-center'>
+                    <div className='col-xl-8'>
+                        <div className='home-one-cta edu-cta-box bg-image'>
+                            <div className='inner'>
+                                <div className='content text-md-end'>
+                                    <span className='subtitle'>Get In Touch:</span>
+                                    <h3 className='title'>
+                                        <a href='mailto:info@edublink'>info@edublink</a>
+                                    </h3>
+                                </div>
+                                <div className='sparator'>
+                                    <span>or</span>
+                                </div>
+                                <div className='content'>
+                                    <span className='subtitle'>Call Us Via:</span>
+                                    <h3 className='title'>
+                                        <a href='tel:+011235641231'>+01 123 5641 231</a>
+                                    </h3>
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-01 scene'
+                                    animate={{
+                                        x: mouseReverse(50).x,
+                                        y: mouseReverse(50).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-06.png'
+                                            alt='shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-02 scene'
+                                    animate={{
+                                        x: mouseDirection(50).x,
+                                        y: mouseDirection(50).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-12.png'
+                                            alt='shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-03 scene'
+                                    animate={{
+                                        x: mouseDirection(50).x,
+                                        y: mouseDirection(50).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/cta/shape-04.png'
+                                            alt='shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CtaArea;
diff --git a/src/components/homes/home/hero-area.jsx b/src/components/homes/home/hero-area.jsx
deleted file mode 100644
index 7c790cc..0000000
--- a/src/components/homes/home/hero-area.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
-
-const HeroArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="hero-banner hero-style-1">
-            <div className="container">
-                <div className="row align-items-center">
-                    <div className="col-lg-6">
-                        <div className="banner-content">
-                            <h1 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Get <span className="color-secondary">2500+</span> <br />Best Online Courses From EduBlink</h1>
-                            <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.</p>
-                            <div className="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <Link href="/course-style-1" className="edu-btn">
-                                    Find courses<i className="icon-4"></i>
-                                </Link>
-                            </div>
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000" 
-                                    animate={ {
-                                        x: mouseReverse(25).x,
-                                        y: mouseReverse(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="col-lg-6">
-                        <div className="banner-thumbnail">
-                            <div className="thumbnail" data-sal-delay="500" data-sal="slide-left" data-sal-duration="1000">
-                                <img src="/assets/images/banner/girl-1.webp" alt="Girl Image" />
-                            </div>
-                            <div className="instructor-info" data-sal-delay="600" data-sal="slide-up" data-sal-duration="1000">
-                                <div className="inner">
-                                    <h5 className="title">Instructor</h5>
-                                    <div className="media">
-                                        <div className="thumb">
-                                            <img src="/assets/images/banner/author-1.png" alt="Images" />
-                                        </div>
-                                        <div className="content">
-                                            <span>200+</span> Instructors
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <ul className="shape-group">
-                                <li className="shape-1" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/about/shape-15.png" alt="Shape" />
-                                </li>
-                                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                animate={ {
-                                    x: mouseDirection(25).x,
-                                    y: mouseDirection(25).y
-                                } }
-                                >
-                                    <img src="/assets/images/about/shape-16.png" alt="Shape" />
-                                </motion.li>
-
-                                <motion.li className="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                animate={ {
-                                    x: mouseReverse(20).x,
-                                    y: mouseReverse(20).y
-                                } }
-                                >
-                                <span className="circle-shape d-block"></span>
-                                </motion.li>
-
-                                <li className="shape-4" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                    <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                                </li>
-                                <motion.li className="shape-5 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseReverse(25).x,
-                                        y: mouseReverse(25).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-6 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                    animate={ {
-                                        x: mouseDirection(20).x,
-                                        y: mouseDirection(20).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-18.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="shape-7">
-                <img src="/assets/images/about/h-1-shape-01.png" alt="Shape" />
-            </div>
-        </div>
-    );
-}
-
-export default HeroArea;
\ No newline at end of file
diff --git a/src/components/homes/home/hero-area.tsx b/src/components/homes/home/hero-area.tsx
new file mode 100644
index 0000000..d23f50c
--- /dev/null
+++ b/src/components/homes/home/hero-area.tsx
@@ -0,0 +1,205 @@
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../../contexts/mouse-move-context';
+
+const HeroArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='hero-banner hero-style-1'>
+            <div className='container'>
+                <div className='row align-items-center'>
+                    <div className='col-lg-6'>
+                        <div className='banner-content'>
+                            <h1
+                                className='title'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Get <span className='color-secondary'>2500+</span> <br />
+                                Best Online Courses From EduBlink
+                            </h1>
+                            <p
+                                data-sal-delay='200'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Excepteur sint occaecat cupidatat non proident sunt in
+                                culpa qui officia deserunt mollit.
+                            </p>
+                            <div
+                                className='banner-btn'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <Link href='/course-style-1' className='edu-btn'>
+                                    Find courses<i className='icon-4'></i>
+                                </Link>
+                            </div>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseReverse(25).x,
+                                        y: mouseReverse(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div className='col-lg-6'>
+                        <div className='banner-thumbnail'>
+                            <div
+                                className='thumbnail'
+                                data-sal-delay='500'
+                                data-sal='slide-left'
+                                data-sal-duration='1000'
+                            >
+                                <picture>
+                                    <img
+                                        src='/assets/images/banner/girl-1.webp'
+                                        alt='Girl Image'
+                                    />
+                                </picture>
+                            </div>
+                            <div
+                                className='instructor-info'
+                                data-sal-delay='600'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <div className='inner'>
+                                    <h5 className='title'>Instructor</h5>
+                                    <div className='media'>
+                                        <div className='thumb'>
+                                            <picture>
+                                                <img
+                                                    src='/assets/images/banner/author-1.png'
+                                                    alt='Images'
+                                                />
+                                            </picture>
+                                        </div>
+                                        <div className='content'>
+                                            <span>200+</span> Instructors
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <ul className='shape-group'>
+                                <li
+                                    className='shape-1'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-15.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseDirection(25).x,
+                                        y: mouseDirection(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-16.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+
+                                <motion.li
+                                    className='shape-3 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseReverse(20).x,
+                                        y: mouseReverse(20).y,
+                                    }}
+                                >
+                                    <span className='circle-shape d-block'></span>
+                                </motion.li>
+
+                                <li
+                                    className='shape-4'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/counterup/shape-02.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </li>
+                                <motion.li
+                                    className='shape-5 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseReverse(25).x,
+                                        y: mouseReverse(25).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-6 scene'
+                                    data-sal-delay='1000'
+                                    data-sal='fade'
+                                    data-sal-duration='1000'
+                                    animate={{
+                                        x: mouseDirection(20).x,
+                                        y: mouseDirection(20).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-18.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className='shape-7'>
+                <picture>
+                    <img src='/assets/images/about/h-1-shape-01.png' alt='Shape' />
+                </picture>
+            </div>
+        </div>
+    );
+};
+
+export default HeroArea;
diff --git a/src/components/homes/home/index.jsx b/src/components/homes/home/index.tsx
similarity index 56%
rename from src/components/homes/home/index.jsx
rename to src/components/homes/home/index.tsx
index b59f2dd..cf9f873 100644
--- a/src/components/homes/home/index.jsx
+++ b/src/components/homes/home/index.tsx
@@ -16,24 +16,24 @@ import TopCategories from './top-categories';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
-                <Header/>
-                <HeroArea/>
-                <CategoryArea/>
-                <TopCategories/>
-                <AboutArea/>
-                <CourseArea/>
-                <CounterUpArea/>
-                <TestimonialArea/>
-                <CtaArea/>
-                <TeamArea/>
-                <AdBanner/>
-                <BrandArea/>
-                <BlogArea/>
-                <Footer/>
+            <div id='main-wrapper' className='main-wrapper'>
+                <Header />
+                <HeroArea />
+                <CategoryArea />
+                <TopCategories />
+                <AboutArea />
+                <CourseArea />
+                <CounterUpArea />
+                <TestimonialArea />
+                <CtaArea />
+                <TeamArea />
+                <AdBanner />
+                <BrandArea />
+                <BlogArea />
+                <Footer />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/homes/home/team-area.jsx b/src/components/homes/home/team-area.jsx
deleted file mode 100644
index 29b9da4..0000000
--- a/src/components/homes/home/team-area.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { instructors_data } from "../../../data";
-import TeamOne from "../../team-member/team-one";
-
-const TeamArea = () => {
-    return (
-        <div className="edu-team-area team-area-1 gap-tb-text">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Instructors</span>
-                    <h2 className="title">Course Instructors</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    {instructors_data.slice(0,4).map((instructor) => (
-                        <div key={instructor.id} className="col-lg-3 col-sm-6 col-12" data-sal-delay={instructor.delay} data-sal="slide-up" data-sal-duration="800">
-                            <TeamOne instructor={instructor} />
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default TeamArea;
\ No newline at end of file
diff --git a/src/components/homes/home/team-area.tsx b/src/components/homes/home/team-area.tsx
new file mode 100644
index 0000000..1b888bd
--- /dev/null
+++ b/src/components/homes/home/team-area.tsx
@@ -0,0 +1,38 @@
+import { instructors_data } from '../../../data';
+import TeamOne from '../../team-member/team-one';
+
+const TeamArea = () => {
+    return (
+        <div className='edu-team-area team-area-1 gap-tb-text'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Instructors</span>
+                    <h2 className='title'>Course Instructors</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {instructors_data.slice(0, 4).map(instructor => (
+                        <div
+                            key={instructor.id}
+                            className='col-lg-3 col-sm-6 col-12'
+                            data-sal-delay={instructor.delay}
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <TeamOne instructor={instructor} />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamArea;
diff --git a/src/components/homes/home/testimonial-area.jsx b/src/components/homes/home/testimonial-area.jsx
deleted file mode 100644
index 26c28b4..0000000
--- a/src/components/homes/home/testimonial-area.jsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay } from "swiper";
-import { useEffect, useState } from "react";
-
-const testimonial_data = [
-    {
-        img: '/assets/images/testimonial/testimonial-01.png',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-        ratings: <>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-        </>,
-        name: 'Ray Sanchez',
-        title: 'Student'
-    },
-    {
-        img: '/assets/images/testimonial/testimonial-02.png',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-        ratings: <>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-        </>,
-        name: 'Thomas Lopez',
-        title: 'Designer'
-    },
-    {
-        img: '/assets/images/testimonial/testimonial-03.png',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-        ratings: <>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-        </>,
-        name: 'Amber Page',
-        title: 'Developer'
-    },
-    {
-        img: '/assets/images/testimonial/testimonial-04.png',
-        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
-        ratings: <>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-            <i className="icon-23"></i>
-        </>,
-        name: 'Robert Tapp',
-        title: 'Content Creator'
-    }
-]
-
-export default function TestimonialArea() {
-    const [loop,setLoop] = useState(false);
-    useEffect(() => setLoop(true) ,[])
-    return (
-        <div className="testimonial-area-1 section-gap-equal">
-            <div className="container">
-                <div className="row g-lg-5">
-                    <div className="col-lg-5">
-                        <div className="testimonial-heading-area">
-                            <div className="section-title section-left" data-sal-delay="50" data-sal="slide-up" data-sal-duration="800">
-                                <span className="pre-title">Testimonials</span>
-                                <h2 className="title">What Our Students Have To Say</h2>
-                                <span className="shape-line"><i className="icon-19"></i></span>
-                                <p>Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor incididunt labore dolore magna aliquaenim ad minim.</p>
-                                <a href="#" className="edu-btn btn-large">View All<i className="icon-4"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-7">
-                        <Swiper
-                            slidesPerView={1}
-                            spaceBetween={0}
-                            loop={loop}
-                            className="home-one-testimonial-activator swiper "
-                            modules={[Autoplay]}
-                            pagination={false}
-                            grabCursor={true}
-                            speed={1500}
-                            autoplay={{
-                                delay: 3500
-                            }}
-                            breakpoints={{
-                                577: {
-                                slidesPerView: 2
-                                }
-                            }}
-                        >
-                            {testimonial_data.map((testi, i) => (
-                                <SwiperSlide key={i}>
-                                    <div className="testimonial-grid">
-                                        <div className="thumbnail">
-                                            <img src={testi.img} alt="Testimonial" />
-                                            <span className="qoute-icon"><i className="icon-26"></i></span>
-                                        </div>
-                                        <div className="content">
-                                            <p>{testi.desc}</p>
-                                            <div className="rating-icon">
-                                                {testi.ratings}
-                                            </div>
-                                            <h5 className="title">{testi.name}</h5>
-                                            <span className="subtitle">{testi.title}</span>
-                                        </div>
-                                    </div>
-                                </SwiperSlide>
-                            ))}
-                        </Swiper>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/homes/home/testimonial-area.tsx b/src/components/homes/home/testimonial-area.tsx
new file mode 100644
index 0000000..dc3eb15
--- /dev/null
+++ b/src/components/homes/home/testimonial-area.tsx
@@ -0,0 +1,148 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay } from 'swiper';
+import { useEffect, useState } from 'react';
+
+const testimonial_data = [
+    {
+        img: '/assets/images/testimonial/testimonial-01.png',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+        ratings: (
+            <>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+            </>
+        ),
+        name: 'Ray Sanchez',
+        title: 'Student',
+    },
+    {
+        img: '/assets/images/testimonial/testimonial-02.png',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+        ratings: (
+            <>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+            </>
+        ),
+        name: 'Thomas Lopez',
+        title: 'Designer',
+    },
+    {
+        img: '/assets/images/testimonial/testimonial-03.png',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+        ratings: (
+            <>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+            </>
+        ),
+        name: 'Amber Page',
+        title: 'Developer',
+    },
+    {
+        img: '/assets/images/testimonial/testimonial-04.png',
+        desc: 'Lorem ipsum dolor amet consec tur elit adicing sed do usmod zx tempor enim minim veniam quis nostrud exer citation.',
+        ratings: (
+            <>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+                <i className='icon-23'></i>
+            </>
+        ),
+        name: 'Robert Tapp',
+        title: 'Content Creator',
+    },
+];
+
+export default function TestimonialArea() {
+    const [loop, setLoop] = useState(false);
+    useEffect(() => setLoop(true), []);
+    return (
+        <div className='testimonial-area-1 section-gap-equal'>
+            <div className='container'>
+                <div className='row g-lg-5'>
+                    <div className='col-lg-5'>
+                        <div className='testimonial-heading-area'>
+                            <div
+                                className='section-title section-left'
+                                data-sal-delay='50'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <span className='pre-title'>Testimonials</span>
+                                <h2 className='title'>What Our Students Have To Say</h2>
+                                <span className='shape-line'>
+                                    <i className='icon-19'></i>
+                                </span>
+                                <p>
+                                    Lorem ipsum dolor sit amet consectur adipiscing elit
+                                    sed eiusmod tempor incididunt labore dolore magna
+                                    aliquaenim ad minim.
+                                </p>
+                                <a href='#' className='edu-btn btn-large'>
+                                    View All<i className='icon-4'></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col-lg-7'>
+                        <Swiper
+                            slidesPerView={1}
+                            spaceBetween={0}
+                            loop={loop}
+                            className='home-one-testimonial-activator swiper '
+                            modules={[Autoplay]}
+                            pagination={false}
+                            grabCursor={true}
+                            speed={1500}
+                            autoplay={{
+                                delay: 3500,
+                            }}
+                            breakpoints={{
+                                577: {
+                                    slidesPerView: 2,
+                                },
+                            }}
+                        >
+                            {testimonial_data.map((testi, i) => (
+                                <SwiperSlide key={i}>
+                                    <div className='testimonial-grid'>
+                                        <div className='thumbnail'>
+                                            <picture>
+                                                <img src={testi.img} alt='Testimonial' />
+                                            </picture>
+                                            <span className='qoute-icon'>
+                                                <i className='icon-26'></i>
+                                            </span>
+                                        </div>
+                                        <div className='content'>
+                                            <p>{testi.desc}</p>
+                                            <div className='rating-icon'>
+                                                {testi.ratings}
+                                            </div>
+                                            <h5 className='title'>{testi.name}</h5>
+                                            <span className='subtitle'>
+                                                {testi.title}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </SwiperSlide>
+                            ))}
+                        </Swiper>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/homes/home/top-categories.jsx b/src/components/homes/home/top-categories.tsx
similarity index 53%
rename from src/components/homes/home/top-categories.jsx
rename to src/components/homes/home/top-categories.tsx
index 187f153..324e90b 100644
--- a/src/components/homes/home/top-categories.jsx
+++ b/src/components/homes/home/top-categories.tsx
@@ -8,83 +8,96 @@ const category_contents = {
             delay: '50',
             color: 'color-primary-style',
             icon: 'icon-9',
-            title: 'Business Management'
+            title: 'Business Management',
         },
         {
             delay: '100',
             color: 'color-secondary-style',
             icon: 'icon-10 art-design',
-            title: 'Arts & Design'
+            title: 'Arts & Design',
         },
         {
             delay: '150',
             color: 'color-extra01-style',
             icon: 'icon-11 personal-development',
-            title: 'Personal Development'
+            title: 'Personal Development',
         },
         {
             delay: '50',
             color: 'color-tertiary-style',
             icon: 'icon-12 health-fitness',
-            title: 'Health & Fitness'
+            title: 'Health & Fitness',
         },
         {
             delay: '100',
             color: 'color-extra02-style',
             icon: 'icon-13 data-science',
-            title: 'Data Science'
+            title: 'Data Science',
         },
         {
             delay: '150',
             color: 'color-extra03-style',
             icon: 'icon-14',
-            title: 'Marketing'
+            title: 'Marketing',
         },
         {
             delay: '50',
             color: 'color-extra04-style',
             icon: 'icon-15',
-            title: 'Business & Finance'
+            title: 'Business & Finance',
         },
         {
             delay: '100',
             color: 'color-extra05-style',
             icon: 'icon-16 computer-science',
-            title: 'Computer Science'
+            title: 'Computer Science',
         },
         {
             delay: '150',
             color: 'color-extra06-style',
             icon: 'icon-17 video-photography',
-            title: 'Video & Photography'
-        }
-    ]
-}
+            title: 'Video & Photography',
+        },
+    ],
+};
 
 const { title, text, category_items } = category_contents;
 
 const TopCategories = () => {
     return (
-        <div className="edu-categorie-area categorie-area-2 edu-section-gap">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <h2 className="title">{title}</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
+        <div className='edu-categorie-area categorie-area-2 edu-section-gap'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <h2 className='title'>{title}</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
                     <p>{text}</p>
                 </div>
 
-                <div className="row g-5">
+                <div className='row g-5'>
                     {category_items.map((item, i) => (
-                        <div key={i} className="col-lg-4 col-md-6" data-sal-delay={`${item.delay}`} data-sal="slide-up" data-sal-duration="800">
-                            <div className={`categorie-grid categorie-style-2 ${item.color}`}>
-                                <div className="icon">
+                        <div
+                            key={i}
+                            className='col-lg-4 col-md-6'
+                            data-sal-delay={`${item.delay}`}
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <div
+                                className={`categorie-grid categorie-style-2 ${item.color}`}
+                            >
+                                <div className='icon'>
                                     <i className={item.icon}></i>
                                 </div>
-                                <div className="content">
-                                    <Link href="/course-style-1">
-
-                                        <h5 className="title">{item.title}</h5>
-
+                                <div className='content'>
+                                    <Link href='/course-style-1'>
+                                        <h5 className='title'>{item.title}</h5>
                                     </Link>
                                 </div>
                             </div>
@@ -94,6 +107,6 @@ const TopCategories = () => {
             </div>
         </div>
     );
-}
+};
 
-export default TopCategories;
\ No newline at end of file
+export default TopCategories;
diff --git a/src/components/landing-demo/counter-up-area.jsx b/src/components/landing-demo/counter-up-area.jsx
deleted file mode 100644
index 503729f..0000000
--- a/src/components/landing-demo/counter-up-area.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import Counter from '../common/counter';
-
-const CounterUpArea = () => {
-    return (
-        <div className="pv-demo-counterup">
-            <div className="container">
-                <div className="counterup-wrap">
-                    <div className="row">
-                        <div className="col-sm-4">
-                            <div className="edu-counterup counterup-style-1 border-end">
-                                <h2 className="counter-item count-number primary-color">
-                                    <span className="odometer">
-                                        <Counter number="8" text="+" />
-                                    </span>
-                                </h2>
-                                <span className="title">Home Pages</span>
-                            </div>
-                        </div>
-                        <div className="col-sm-4">
-                            <div className="edu-counterup counterup-style-1 border-end">
-                                <h2 className="counter-item count-number secondary-color">
-                                    <span className="odometer">
-                                        <Counter number="70" text="+" />
-                                    </span>
-                                </h2>
-                                <span className="title">Inner Pages</span>
-                            </div>
-                        </div>
-                        <div className="col-sm-4">
-                            <div className="edu-counterup counterup-style-1">
-                                <h2 className="counter-item count-number extra02-color">
-                                    <span className="odometer">
-                                        <Counter number="255" text="+" />
-                                    </span>
-                                </h2>
-                                <span className="title">UI Elements</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default CounterUpArea;
\ No newline at end of file
diff --git a/src/components/landing-demo/counter-up-area.tsx b/src/components/landing-demo/counter-up-area.tsx
new file mode 100644
index 0000000..22b8d37
--- /dev/null
+++ b/src/components/landing-demo/counter-up-area.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Counter from '../common/counter';
+
+const CounterUpArea = () => {
+    return (
+        <div className='pv-demo-counterup'>
+            <div className='container'>
+                <div className='counterup-wrap'>
+                    <div className='row'>
+                        <div className='col-sm-4'>
+                            <div className='edu-counterup counterup-style-1 border-end'>
+                                <h2 className='counter-item count-number primary-color'>
+                                    <span className='odometer'>
+                                        <Counter number={8} text='+' />
+                                    </span>
+                                </h2>
+                                <span className='title'>Home Pages</span>
+                            </div>
+                        </div>
+                        <div className='col-sm-4'>
+                            <div className='edu-counterup counterup-style-1 border-end'>
+                                <h2 className='counter-item count-number secondary-color'>
+                                    <span className='odometer'>
+                                        <Counter number={70} text='+' />
+                                    </span>
+                                </h2>
+                                <span className='title'>Inner Pages</span>
+                            </div>
+                        </div>
+                        <div className='col-sm-4'>
+                            <div className='edu-counterup counterup-style-1'>
+                                <h2 className='counter-item count-number extra02-color'>
+                                    <span className='odometer'>
+                                        <Counter number={255} text='+' />
+                                    </span>
+                                </h2>
+                                <span className='title'>UI Elements</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CounterUpArea;
diff --git a/src/components/landing-demo/course-demo.jsx b/src/components/landing-demo/course-demo.jsx
deleted file mode 100644
index 706590f..0000000
--- a/src/components/landing-demo/course-demo.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-
-const CourseDemo = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="pv-courses-demo">
-            <div className="container">
-                <div className="section-title section-center splash-title">
-                    <span className="number">7+</span>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                    <h2 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Responsive Course Layouts</h2>
-                    <p className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Multiple choices for getting learners impressed with course grids & layouts</p>
-                </div>
-            </div>
-
-            <div className="pv-gallery-wrapper">
-                <div className="background-marque margque-courses"></div>
-            </div>
-
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-36.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                </motion.li>
-                <li className="shape-4" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                    <img src="/assets/images/about/shape-15.png" alt="Shape" />
-                </li>
-                <motion.li className="shape-5 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(45).x,
-                        y: mouseDirection(45).y
-                    } }
-                >
-                    <span className="d-block"></span>
-                </motion.li>
-            </ul>
-        </div>
-    )
-}
-
-export default CourseDemo;
\ No newline at end of file
diff --git a/src/components/landing-demo/course-demo.tsx b/src/components/landing-demo/course-demo.tsx
new file mode 100644
index 0000000..b116ee8
--- /dev/null
+++ b/src/components/landing-demo/course-demo.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+
+const CourseDemo = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='pv-courses-demo'>
+            <div className='container'>
+                <div className='section-title section-center splash-title'>
+                    <span className='number'>7+</span>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                    <h2
+                        className='title'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='1000'
+                    >
+                        Responsive Course Layouts
+                    </h2>
+                    <p
+                        className='title'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='1000'
+                    >
+                        Multiple choices for getting learners impressed with course grids
+                        & layouts
+                    </p>
+                </div>
+            </div>
+
+            <div className='pv-gallery-wrapper'>
+                <div className='background-marque margque-courses'></div>
+            </div>
+
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-13.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-36.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/counterup/shape-02.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <li
+                    className='shape-4'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-15.png' alt='Shape' />
+                    </picture>
+                </li>
+                <motion.li
+                    className='shape-5 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(45).x,
+                        y: mouseDirection(45).y,
+                    }}
+                >
+                    <span className='d-block'></span>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default CourseDemo;
diff --git a/src/components/landing-demo/features.jsx b/src/components/landing-demo/features.jsx
deleted file mode 100644
index 10d6295..0000000
--- a/src/components/landing-demo/features.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import React from 'react'
-
-const Features = () => {
-    return (
-        <div className="pv-features-area">
-            <div className="container">
-                <div className="section-title section-center splash-title">
-                    <span className="pre-title" data-sal="slide-up" data-sal-duration="1000">TEMPLATE FEATURES</span>
-                    <h2 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Get Access to Exclusive <br /> Features</h2>
-                </div>
-                <div className="row row--20 row-cols-1 row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2">
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-14.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Bootstrap 5 <br /> Framework</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-15.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">W3C <br /> Validation</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-16.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Swiper <br /> Touch Slider</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-20.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Speed <br /> Performance</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-17.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Mouse-Move <br /> Effect</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-18.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Google Web <br /> Fonts</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-19.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Fully Responsive <br /> Layouts</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-21.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Well <br /> Documented</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-22.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Magnific <br /> Popup</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-23.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Translation <br /> Ready</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-24.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Fast 5 Star <br /> Support</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-26.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Lifetime <br /> Update</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-27.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Browser <br /> Compatibility</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-28.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Parallax <br /> Effect</h6>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col">
-                        <div className="demo-feature">
-                            <div className="inner">
-                                <div className="icon">
-                                    <img src="/assets/images/preview/icon-29.png" alt="Preview Images" />
-                                </div>
-                                <h6 className="title">Developer <br /> Friendly</h6>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Features;
\ No newline at end of file
diff --git a/src/components/landing-demo/features.tsx b/src/components/landing-demo/features.tsx
new file mode 100644
index 0000000..bcd03a8
--- /dev/null
+++ b/src/components/landing-demo/features.tsx
@@ -0,0 +1,286 @@
+import React from 'react';
+
+const Features = () => {
+    return (
+        <div className='pv-features-area'>
+            <div className='container'>
+                <div className='section-title section-center splash-title'>
+                    <span
+                        className='pre-title'
+                        data-sal='slide-up'
+                        data-sal-duration='1000'
+                    >
+                        TEMPLATE FEATURES
+                    </span>
+                    <h2
+                        className='title'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='1000'
+                    >
+                        Get Access to Exclusive <br /> Features
+                    </h2>
+                </div>
+                <div className='row row--20 row-cols-1 row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2'>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-14.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Bootstrap 5 <br /> Framework
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-15.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    W3C <br /> Validation
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-16.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Swiper <br /> Touch Slider
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-20.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Speed <br /> Performance
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-17.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Mouse-Move <br /> Effect
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-18.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Google Web <br /> Fonts
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-19.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Fully Responsive <br /> Layouts
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-21.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Well <br /> Documented
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-22.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Magnific <br /> Popup
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-23.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Translation <br /> Ready
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-24.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Fast 5 Star <br /> Support
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-26.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Lifetime <br /> Update
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-27.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Browser <br /> Compatibility
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-28.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Parallax <br /> Effect
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='col'>
+                        <div className='demo-feature'>
+                            <div className='inner'>
+                                <div className='icon'>
+                                    <picture>
+                                        <img
+                                            src='/assets/images/preview/icon-29.png'
+                                            alt='Preview Images'
+                                        />
+                                    </picture>
+                                </div>
+                                <h6 className='title'>
+                                    Developer <br /> Friendly
+                                </h6>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Features;
diff --git a/src/components/landing-demo/footer.jsx b/src/components/landing-demo/footer.jsx
deleted file mode 100644
index 999af1e..0000000
--- a/src/components/landing-demo/footer.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-
-const Footer = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="pv-cta-area bg-image">
-            <div className="container">
-                <div className="cta-content">
-                    <span className="subtitle" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Great Solutions for Smart People</span>
-                    <h2 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Create Your Education Website <br /> Today with EduBlink</h2>
-                    <div className="button-group" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                        <a href="https://1.envato.market/AoJezj" target="_blank" className="edu-btn">Download EduBlink <i className="icon-4"></i></a>
-                        <a href="#demos" className="edu-btn btn-bg-white">Demo Preview <i className="icon-4"></i></a>
-                    </div>
-                </div>
-            </div>
-
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/counterup/shape-02.png" alt="shape" />
-                </motion.li>
-
-                <li className="shape-2" data-sal-delay="500" data-sal="fade" data-sal-duration="1000">
-                    <img className="rotateit" src="/assets/images/about/shape-35.png" alt="shape" />
-                </li>
-
-                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-07.png" alt="shape" />
-                </motion.li>
-
-                <motion.li className="shape-4 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <span className="d-block"></span>
-                </motion.li>
-            </ul>
-        </div>
-    )
-}
-
-export default Footer;
\ No newline at end of file
diff --git a/src/components/landing-demo/footer.tsx b/src/components/landing-demo/footer.tsx
new file mode 100644
index 0000000..3be2880
--- /dev/null
+++ b/src/components/landing-demo/footer.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+
+const Footer = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='pv-cta-area bg-image'>
+            <div className='container'>
+                <div className='cta-content'>
+                    <span
+                        className='subtitle'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='1000'
+                    >
+                        Great Solutions for Smart People
+                    </span>
+                    <h2
+                        className='title'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='1000'
+                    >
+                        Create Your Education Website <br /> Today with EduBlink
+                    </h2>
+                    <div
+                        className='button-group'
+                        data-sal-delay='400'
+                        data-sal='slide-up'
+                        data-sal-duration='1000'
+                    >
+                        <a
+                            href='https://1.envato.market/AoJezj'
+                            target='_blank'
+                            className='edu-btn'
+                        >
+                            Download EduBlink <i className='icon-4'></i>
+                        </a>
+                        <a href='#demos' className='edu-btn btn-bg-white'>
+                            Demo Preview <i className='icon-4'></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/counterup/shape-02.png' alt='shape' />
+                    </picture>
+                </motion.li>
+
+                <li
+                    className='shape-2'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img
+                            className='rotateit'
+                            src='/assets/images/about/shape-35.png'
+                            alt='shape'
+                        />
+                    </picture>
+                </li>
+
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-07.png' alt='shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-4 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <span className='d-block'></span>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default Footer;
diff --git a/src/components/landing-demo/header.jsx b/src/components/landing-demo/header.jsx
deleted file mode 100644
index 2b8df8b..0000000
--- a/src/components/landing-demo/header.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { useState } from 'react';
-import Link from 'next/link';
-import useSticky from '../../hooks/use-sticky';
-import ResponsiveMenu from './responsive-menu';
-
-const Header = () => {
-    const { sticky } = useSticky();
-    const [isOpen, setIsOpen] = useState(false);
-    return <>
-        <header className="edu-header header-style-1 pv-header-style">
-            <div id="edu-sticky-placeholder"></div>
-            <div className={`header-mainmenu ${sticky ? 'edu-sticky' : ''}`}>
-                <div className="container-custom">
-                    <div className="header-navbar">
-                        <div className="header-brand">
-                            <div className="logo">
-                                <Link href="/">
-
-                                    <img className="logo-light" src="/assets/images/logo/logo-dark.png" alt="Corporate Logo" />
-                                    <img className="logo-dark" src="/assets/images/logo/logo-white.png" alt="Corporate Logo" />
-
-                                </Link>
-                            </div>
-                        </div>
-                        <div className="header-mainnav">
-                            <nav className="mainmenu-nav">
-                                <ul className="mainmenu">
-                                    <li>
-                                        <a href="#intro">Intro</a>
-                                    </li>
-                                    <li>
-                                        <a href="#demos">Demos</a>
-                                    </li>
-                                    <li>
-                                        <a href="https://docs.devsblink.com/edublink-react/" target="_blank">Documentation</a>
-                                    </li>
-                                    <li>
-                                        <a href="https://devsblink.freshdesk.com/" target="_blank">Support</a>
-                                    </li>
-                                </ul>
-                            </nav>
-                        </div>
-                        <div className="header-right">
-                            <ul className="header-action">
-                                <li className="header-btn">
-                                    <a href="https://1.envato.market/AoJezj" target="_blank" className="edu-btn btn-medium">Purchase Now</a>
-                                </li>
-                                <li className="mobile-menu-bar d-block d-xl-none">
-                                    <button className="hamberger-button" onClick={()=> setIsOpen(true)}>
-                                        <i className="icon-54"></i>
-                                    </button>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div className="popup-mobile-menu splash-mobile-menu">
-                <div className="inner">
-                    <div className="header-top">
-                        <div className="logo">
-                            <Link href="/">
-
-                                <img className="logo-light" src="/assets/images/logo/logo-dark.png" alt="Corporate Logo" />
-                                <img className="logo-dark" src="/assets/images/logo/logo-white.png" alt="Corporate Logo" />
-
-                            </Link>
-                        </div>
-                        <div className="close-menu">
-                            <button className="close-button">
-                                <i className="icon-73"></i>
-                            </button>
-                        </div>
-                    </div>
-                    <ul className="mainmenu">
-                        <li>
-                            <a href="#intro">Intro</a>
-                        </li>
-                        <li>
-                            <a href="#demos">Demos</a>
-                        </li>
-                        <li>
-                            <a href="https://docs.devsblink.com/edublink-react/" target="_blank">Documentation</a>
-                        </li>
-                        <li>
-                            <a href="https://devsblink.freshdesk.com/" target="_blank">Support</a>
-                        </li>
-                        <li className="header-btn">
-                            <a href="https://1.envato.market/AoJezj" target="_blank" className="edu-btn btn-medium">Purchase Now</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </header>
-
-        {/* sidebar start */}
-        <ResponsiveMenu isOpen={isOpen} setIsOpen={setIsOpen} />
-        {/* sidebar end */}
-    </>;
-}
-
-export default Header;
\ No newline at end of file
diff --git a/src/components/landing-demo/header.tsx b/src/components/landing-demo/header.tsx
new file mode 100644
index 0000000..428d277
--- /dev/null
+++ b/src/components/landing-demo/header.tsx
@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import Link from 'next/link';
+import useSticky from '../../hooks/use-sticky';
+import ResponsiveMenu from './responsive-menu';
+
+const Header = () => {
+    const { sticky } = useSticky();
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+        <>
+            <header className='edu-header header-style-1 pv-header-style'>
+                <div id='edu-sticky-placeholder'></div>
+                <div className={`header-mainmenu ${sticky ? 'edu-sticky' : ''}`}>
+                    <div className='container-custom'>
+                        <div className='header-navbar'>
+                            <div className='header-brand'>
+                                <div className='logo'>
+                                    <Link href='/'>
+                                        <picture>
+                                            <img
+                                                className='logo-light'
+                                                src='/assets/images/logo/logo-dark.png'
+                                                alt='Corporate Logo'
+                                            />
+                                        </picture>
+                                        <picture>
+                                            <img
+                                                className='logo-dark'
+                                                src='/assets/images/logo/logo-white.png'
+                                                alt='Corporate Logo'
+                                            />
+                                        </picture>
+                                    </Link>
+                                </div>
+                            </div>
+                            <div className='header-mainnav'>
+                                <nav className='mainmenu-nav'>
+                                    <ul className='mainmenu'>
+                                        <li>
+                                            <a href='#intro'>Intro</a>
+                                        </li>
+                                        <li>
+                                            <a href='#demos'>Demos</a>
+                                        </li>
+                                        <li>
+                                            <a
+                                                href='https://docs.devsblink.com/edublink-react/'
+                                                target='_blank'
+                                            >
+                                                Documentation
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a
+                                                href='https://devsblink.freshdesk.com/'
+                                                target='_blank'
+                                            >
+                                                Support
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </nav>
+                            </div>
+                            <div className='header-right'>
+                                <ul className='header-action'>
+                                    <li className='header-btn'>
+                                        <a
+                                            href='https://1.envato.market/AoJezj'
+                                            target='_blank'
+                                            className='edu-btn btn-medium'
+                                        >
+                                            Purchase Now
+                                        </a>
+                                    </li>
+                                    <li className='mobile-menu-bar d-block d-xl-none'>
+                                        <button
+                                            className='hamberger-button'
+                                            onClick={() => setIsOpen(true)}
+                                        >
+                                            <i className='icon-54'></i>
+                                        </button>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='popup-mobile-menu splash-mobile-menu'>
+                    <div className='inner'>
+                        <div className='header-top'>
+                            <div className='logo'>
+                                <Link href='/'>
+                                    <picture>
+                                        <img
+                                            className='logo-light'
+                                            src='/assets/images/logo/logo-dark.png'
+                                            alt='Corporate Logo'
+                                        />
+                                    </picture>
+                                    <picture>
+                                        <img
+                                            className='logo-dark'
+                                            src='/assets/images/logo/logo-white.png'
+                                            alt='Corporate Logo'
+                                        />
+                                    </picture>
+                                </Link>
+                            </div>
+                            <div className='close-menu'>
+                                <button className='close-button'>
+                                    <i className='icon-73'></i>
+                                </button>
+                            </div>
+                        </div>
+                        <ul className='mainmenu'>
+                            <li>
+                                <a href='#intro'>Intro</a>
+                            </li>
+                            <li>
+                                <a href='#demos'>Demos</a>
+                            </li>
+                            <li>
+                                <a
+                                    href='https://docs.devsblink.com/edublink-react/'
+                                    target='_blank'
+                                >
+                                    Documentation
+                                </a>
+                            </li>
+                            <li>
+                                <a
+                                    href='https://devsblink.freshdesk.com/'
+                                    target='_blank'
+                                >
+                                    Support
+                                </a>
+                            </li>
+                            <li className='header-btn'>
+                                <a
+                                    href='https://1.envato.market/AoJezj'
+                                    target='_blank'
+                                    className='edu-btn btn-medium'
+                                >
+                                    Purchase Now
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </header>
+
+            {/* sidebar start */}
+            <ResponsiveMenu isOpen={isOpen} setIsOpen={setIsOpen} />
+            {/* sidebar end */}
+        </>
+    );
+};
+
+export default Header;
diff --git a/src/components/landing-demo/hero-area.jsx b/src/components/landing-demo/hero-area.jsx
deleted file mode 100644
index 3feb023..0000000
--- a/src/components/landing-demo/hero-area.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-
-const HeroArea = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="hero-banner presentation-hero-style pv-hero-banner bg-image" id="intro">
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-lg-10">
-                        <div className="banner-content">
-                            <span className="subtitle" data-sal="slide-up" data-sal-duration="1000">Online Course & Education Template</span>
-                            <h1 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">EduBlink Education & Online Course HTML Template</h1>
-                            <div className="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                <a href="https://1.envato.market/AoJezj" target="_blank" className="edu-btn">Download EduBlink Now <i className="icon-4"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="banner-gallery">
-                <div className="thumbnail thumbnail-1" data-sal-delay="500" data-sal="slide-down" data-sal-duration="1000">
-                    <img src="/assets/images/preview/banner-thumb1.jpg" alt="demo" />
-                </div>
-                <div className="thumbnail thumbnail-2" data-sal-delay="500" data-sal="slide-up" data-sal-duration="1000">
-                    <img src="/assets/images/preview/banner-thumb2.jpg" alt="demo" />
-                </div>
-                <div className="thumbnail thumbnail-3" data-sal-delay="500" data-sal="slide-down" data-sal-duration="1000">
-                    <img src="/assets/images/preview/banner-thumb3.jpg" alt="demo" />
-                </div>
-                <div className="thumbnail thumbnail-4" data-sal-delay="500" data-sal="slide-up" data-sal-duration="1000">
-                    <img src="/assets/images/preview/banner-thumb4.jpg" alt="demo" />
-                </div>
-                <div className="thumbnail thumbnail-5" data-sal-delay="500" data-sal="slide-up" data-sal-duration="1000">
-                    <img src="/assets/images/preview/banner-thumb5.jpg" alt="demo" />
-                </div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(30).x,
-                        y: mouseReverse(30).y
-                    } }
-                >
-                    <img src="/assets/images/about/shape-25.png" alt="Shape" />
-                </motion.li>
-                <motion.li className="shape-4 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(28).x,
-                        y: mouseDirection(28).y
-                    } }
-                >
-                    <span className="d-block"></span>
-                </motion.li>
-            </ul>
-        </div>
-    )
-}
-
-export default HeroArea;
\ No newline at end of file
diff --git a/src/components/landing-demo/hero-area.tsx b/src/components/landing-demo/hero-area.tsx
new file mode 100644
index 0000000..c476872
--- /dev/null
+++ b/src/components/landing-demo/hero-area.tsx
@@ -0,0 +1,160 @@
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+
+const HeroArea = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div
+            className='hero-banner presentation-hero-style pv-hero-banner bg-image'
+            id='intro'
+        >
+            <div className='container'>
+                <div className='row justify-content-center'>
+                    <div className='col-lg-10'>
+                        <div className='banner-content'>
+                            <span
+                                className='subtitle'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Online Course & Education Template
+                            </span>
+                            <h1
+                                className='title'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                EduBlink Education & Online Course HTML Template
+                            </h1>
+                            <div
+                                className='banner-btn'
+                                data-sal-delay='400'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                <a
+                                    href='https://1.envato.market/AoJezj'
+                                    target='_blank'
+                                    className='edu-btn'
+                                >
+                                    Download EduBlink Now <i className='icon-4'></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className='banner-gallery'>
+                <div
+                    className='thumbnail thumbnail-1'
+                    data-sal-delay='500'
+                    data-sal='slide-down'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img src='/assets/images/preview/banner-thumb1.jpg' alt='demo' />
+                    </picture>
+                </div>
+                <div
+                    className='thumbnail thumbnail-2'
+                    data-sal-delay='500'
+                    data-sal='slide-up'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img src='/assets/images/preview/banner-thumb2.jpg' alt='demo' />
+                    </picture>
+                </div>
+                <div
+                    className='thumbnail thumbnail-3'
+                    data-sal-delay='500'
+                    data-sal='slide-down'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img src='/assets/images/preview/banner-thumb3.jpg' alt='demo' />
+                    </picture>
+                </div>
+                <div
+                    className='thumbnail thumbnail-4'
+                    data-sal-delay='500'
+                    data-sal='slide-up'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img src='/assets/images/preview/banner-thumb4.jpg' alt='demo' />
+                    </picture>
+                </div>
+                <div
+                    className='thumbnail thumbnail-5'
+                    data-sal-delay='500'
+                    data-sal='slide-up'
+                    data-sal-duration='1000'
+                >
+                    <picture>
+                        <img src='/assets/images/preview/banner-thumb5.jpg' alt='demo' />
+                    </picture>
+                </div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-13.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/counterup/shape-02.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(30).x,
+                        y: mouseReverse(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/about/shape-25.png' alt='Shape' />
+                    </picture>
+                </motion.li>
+                <motion.li
+                    className='shape-4 scene'
+                    data-sal-delay='1000'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(28).x,
+                        y: mouseDirection(28).y,
+                    }}
+                >
+                    <span className='d-block'></span>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default HeroArea;
diff --git a/src/components/landing-demo/home-demos.jsx b/src/components/landing-demo/home-demos.jsx
deleted file mode 100644
index 6547eaf..0000000
--- a/src/components/landing-demo/home-demos.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-const demos = [
-    {
-        title:'EduBlink Education',
-        link:'/',
-        imgSrc: 'home-01.jpg'
-    },
-    {
-        title:'Distant Learning',
-        link:'/home-distant-learning',
-        imgSrc: 'home-02.jpg'
-    },
-    {
-        title:'University',
-        link:'/home-university',
-        imgSrc: 'home-03.jpg'
-    },
-    {
-        title:'Online Academy',
-        link:'/home-online-academy',
-        imgSrc: 'home-04.jpg'
-    },
-    {
-        title:'Modern Schooling',
-        link:'/home-modern-schooling',
-        imgSrc: 'home-modern-schooling.jpg',
-        new: true
-    },
-    {
-        title:'Kitchen Coach',
-        link:'/home-kitchen',
-        imgSrc: 'home-05.jpg'
-    },
-    {
-        title:'Yoga Instructor',
-        link:'/home-yoga-instructor',
-        imgSrc: 'home-06.jpg'
-    },
-    {
-        title:'Kindergarten',
-        link:'/home-kindergarten',
-        imgSrc: 'home-07.jpg'
-    }
-];
-
-const comingSoon = [
-    {
-        title: 'Health Coach'
-    },
-    {
-        title: 'Remote Training'
-    },
-    {
-        title: 'Language Academy'
-    },
-    {
-        title: 'Photography'
-    }
-];
-
-const HomeDemos = () => {
-    return (
-        <div className="pv-demo-area" id="demos">
-            <div className="container-custom">
-                <div className="row">
-                    <div className="col-lg-12">
-                        <div className="section-title section-center splash-title">
-                            <span className="pre-title" data-sal="slide-up" data-sal-duration="1000">Unique Demos</span>
-                            <h2 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">8+ Pre-Made Creative Online Course <br /> Education Homepage</h2>
-                        </div>
-                    </div>
-                </div>
-
-
-                <div className="row row--30">
-                    {demos.map((demo, i) => {
-                        return (
-                            <div key={i} className="col-lg-4 col-md-6 col-sm-6 col-12" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                                <div className="single-demo">
-                                    { demo.new && <span className="new-wrapper">New</span> }
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            <Link href={demo.link} className="thumbnail-link" target="_blank">
-
-                                                <img
-                                                    src={`/assets/images/preview/${demo.imgSrc}`}
-                                                    alt="Preview Images"
-                                                />
-
-                                            </Link>
-                                            <div className="hover-action">
-                                                <Link href={demo.link} className="edu-btn btn-large" target="_blank">
-                                                    View Demo<i className="icon-4"></i>
-                                                </Link>
-                                            </div>
-                                        </div>
-                                        <h5 className="title">
-                                            <Link href={demo.link} target="_blank">
-                                                {demo.title}
-                                            </Link>
-                                        </h5>
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })}
-
-                    {comingSoon.map((demo, i) => {
-                        return (
-                            <div key={i+9} className="col-lg-4 col-md-6 col-sm-6 col-12" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                                <div className="single-demo coming-soon">
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            <a className="thumbnail-link" href="#">
-                                                <img src="/assets/images/preview/coming-soon.png" alt="Preview Images" />
-                                            </a>
-                                        </div>
-                                        <h5 className="title"><a href="#">{demo.title}</a></h5>
-                                    </div>
-                                </div>
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default HomeDemos;
\ No newline at end of file
diff --git a/src/components/landing-demo/home-demos.tsx b/src/components/landing-demo/home-demos.tsx
new file mode 100644
index 0000000..0de2e2d
--- /dev/null
+++ b/src/components/landing-demo/home-demos.tsx
@@ -0,0 +1,172 @@
+import React from 'react';
+import Link from 'next/link';
+
+const demos = [
+    {
+        title: 'EduBlink Education',
+        link: '/',
+        imgSrc: 'home-01.jpg',
+    },
+    {
+        title: 'Distant Learning',
+        link: '/home-distant-learning',
+        imgSrc: 'home-02.jpg',
+    },
+    {
+        title: 'University',
+        link: '/home-university',
+        imgSrc: 'home-03.jpg',
+    },
+    {
+        title: 'Online Academy',
+        link: '/home-online-academy',
+        imgSrc: 'home-04.jpg',
+    },
+    {
+        title: 'Modern Schooling',
+        link: '/home-modern-schooling',
+        imgSrc: 'home-modern-schooling.jpg',
+        new: true,
+    },
+    {
+        title: 'Kitchen Coach',
+        link: '/home-kitchen',
+        imgSrc: 'home-05.jpg',
+    },
+    {
+        title: 'Yoga Instructor',
+        link: '/home-yoga-instructor',
+        imgSrc: 'home-06.jpg',
+    },
+    {
+        title: 'Kindergarten',
+        link: '/home-kindergarten',
+        imgSrc: 'home-07.jpg',
+    },
+];
+
+const comingSoon = [
+    {
+        title: 'Health Coach',
+    },
+    {
+        title: 'Remote Training',
+    },
+    {
+        title: 'Language Academy',
+    },
+    {
+        title: 'Photography',
+    },
+];
+
+const HomeDemos = () => {
+    return (
+        <div className='pv-demo-area' id='demos'>
+            <div className='container-custom'>
+                <div className='row'>
+                    <div className='col-lg-12'>
+                        <div className='section-title section-center splash-title'>
+                            <span
+                                className='pre-title'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                Unique Demos
+                            </span>
+                            <h2
+                                className='title'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='1000'
+                            >
+                                8+ Pre-Made Creative Online Course <br /> Education
+                                Homepage
+                            </h2>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='row row--30'>
+                    {demos.map((demo, i) => {
+                        return (
+                            <div
+                                key={i}
+                                className='col-lg-4 col-md-6 col-sm-6 col-12'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='single-demo'>
+                                    {demo.new && <span className='new-wrapper'>New</span>}
+                                    <div className='inner'>
+                                        <div className='thumbnail'>
+                                            <Link
+                                                href={demo.link}
+                                                className='thumbnail-link'
+                                                target='_blank'
+                                            >
+                                                <picture>
+                                                    <img
+                                                        src={`/assets/images/preview/${demo.imgSrc}`}
+                                                        alt='Preview Images'
+                                                    />
+                                                </picture>
+                                            </Link>
+                                            <div className='hover-action'>
+                                                <Link
+                                                    href={demo.link}
+                                                    className='edu-btn btn-large'
+                                                    target='_blank'
+                                                >
+                                                    View Demo<i className='icon-4'></i>
+                                                </Link>
+                                            </div>
+                                        </div>
+                                        <h5 className='title'>
+                                            <Link href={demo.link} target='_blank'>
+                                                {demo.title}
+                                            </Link>
+                                        </h5>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+
+                    {comingSoon.map((demo, i) => {
+                        return (
+                            <div
+                                key={i + 9}
+                                className='col-lg-4 col-md-6 col-sm-6 col-12'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='single-demo coming-soon'>
+                                    <div className='inner'>
+                                        <div className='thumbnail'>
+                                            <a className='thumbnail-link' href='#'>
+                                                <picture>
+                                                    <img
+                                                        src='/assets/images/preview/coming-soon.png'
+                                                        alt='Preview Images'
+                                                    />
+                                                </picture>
+                                            </a>
+                                        </div>
+                                        <h5 className='title'>
+                                            <a href='#'>{demo.title}</a>
+                                        </h5>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default HomeDemos;
diff --git a/src/components/landing-demo/index.jsx b/src/components/landing-demo/index.tsx
similarity index 92%
rename from src/components/landing-demo/index.jsx
rename to src/components/landing-demo/index.tsx
index 4f9a6e0..cc3e3bd 100644
--- a/src/components/landing-demo/index.jsx
+++ b/src/components/landing-demo/index.tsx
@@ -12,7 +12,7 @@ import Footer from './footer';
 export default function HomeLanding() {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header />
                 <HeroArea />
                 <CounterUpArea />
@@ -25,5 +25,5 @@ export default function HomeLanding() {
                 <Footer />
             </div>
         </div>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/src/components/landing-demo/inner-pages-demo.jsx b/src/components/landing-demo/inner-pages-demo.jsx
deleted file mode 100644
index 5c66d6b..0000000
--- a/src/components/landing-demo/inner-pages-demo.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-
-const InnerPagesDemo = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="pv-inner-page-area bg-image">
-            <div className="container">
-                <div className="section-title section-center splash-title">
-                    <span className="number">45+</span>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                    <h2 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Pre-build Inner Pages</h2>
-                    <p data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Start with a page template, your site can be built in less than you can expect!!.</p>
-                </div>
-            </div>
-            <div className="pv-gallery-wrapper">
-                <div className="background-marque margque-inner-page"></div>
-            </div>
-            <ul className="shape-group">
-                <motion.li className="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseReverse(35).x,
-                        y: mouseReverse(35).y
-                    } }
-                >
-                    <img src="/assets/images/counterup/shape-03.png" alt="shape" />
-                </motion.li>
-
-                <motion.li className="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(30).x,
-                        y: mouseDirection(30).y
-                    } }
-                >
-                    <img src="/assets/images/counterup/shape-02.png" alt="shape" />
-                </motion.li>
-
-                <motion.li className="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="1000"
-                    animate={ {
-                        x: mouseDirection(35).x,
-                        y: mouseDirection(35).y
-                    } }
-                >
-                    <span className="d-block"></span>
-                </motion.li>
-            </ul>
-        </div>
-    )
-}
-
-export default InnerPagesDemo;
\ No newline at end of file
diff --git a/src/components/landing-demo/inner-pages-demo.tsx b/src/components/landing-demo/inner-pages-demo.tsx
new file mode 100644
index 0000000..402879b
--- /dev/null
+++ b/src/components/landing-demo/inner-pages-demo.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+
+const InnerPagesDemo = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='pv-inner-page-area bg-image'>
+            <div className='container'>
+                <div className='section-title section-center splash-title'>
+                    <span className='number'>45+</span>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                    <h2
+                        className='title'
+                        data-sal-delay='100'
+                        data-sal='slide-up'
+                        data-sal-duration='1000'
+                    >
+                        Pre-build Inner Pages
+                    </h2>
+                    <p data-sal-delay='100' data-sal='slide-up' data-sal-duration='1000'>
+                        Start with a page template, your site can be built in less than
+                        you can expect!!.
+                    </p>
+                </div>
+            </div>
+            <div className='pv-gallery-wrapper'>
+                <div className='background-marque margque-inner-page'></div>
+            </div>
+            <ul className='shape-group'>
+                <motion.li
+                    className='shape-1 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseReverse(35).x,
+                        y: mouseReverse(35).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/counterup/shape-03.png' alt='shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-2 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(30).x,
+                        y: mouseDirection(30).y,
+                    }}
+                >
+                    <picture>
+                        <img src='/assets/images/counterup/shape-02.png' alt='shape' />
+                    </picture>
+                </motion.li>
+
+                <motion.li
+                    className='shape-3 scene'
+                    data-sal-delay='500'
+                    data-sal='fade'
+                    data-sal-duration='1000'
+                    animate={{
+                        x: mouseDirection(35).x,
+                        y: mouseDirection(35).y,
+                    }}
+                >
+                    <span className='d-block'></span>
+                </motion.li>
+            </ul>
+        </div>
+    );
+};
+
+export default InnerPagesDemo;
diff --git a/src/components/landing-demo/online-course.jsx b/src/components/landing-demo/online-course.jsx
deleted file mode 100644
index b40941f..0000000
--- a/src/components/landing-demo/online-course.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-
-const OnlineCourse = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="pv-course-details-area bg-image">
-            <div className="wrapper">
-                <div className="container-custom">
-                    <div className="row align-items-center">
-                        <div className="col-xl-5 col-lg-6">
-                            <div className="course-content">
-                                <div className="section-title section-left splash-title">
-                                    <span className="pre-title" data-sal="slide-up" data-sal-duration="1000">Online Course</span>
-                                    <h2 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Learn Your Online Course Easily With EduBlink</h2>
-                                    <p data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Users can check up their active courses, update their bio, completed courses, track their progress easily and many more.</p>
-                                    <div data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                        <Link href="/course-details" className="edu-btn" target="_blank">
-                                            Course Details<i className="icon-4"></i>
-                                        </Link>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-xl-7 col-lg-6">
-                            <div className="course-thumbnail">
-                                <img src="/assets/images/preview/course-details.png" className="course-details-main" data-sal-delay="200" data-sal="fade" data-sal-duration="800" alt="Course Details" />
-                                <img src="/assets/images/preview/instructor.png" className="course-instructor" data-sal-delay="500" data-sal="slide-right" data-sal-duration="1000" alt="Course Instructor" />
-                                <ul className="shape-group">
-                                    <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                        animate={ {
-                                            x: mouseDirection(30).x,
-                                            y: mouseDirection(30).y
-                                        } }
-                                    >
-                                        <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                    </motion.li>
-                                    <li className="shape-2" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
-                                        <img className="rotateit" src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                                    </li>
-                                    <motion.li className="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                        animate={ {
-                                            x: mouseReverse(40).x,
-                                            y: mouseReverse(40).y
-                                        } }
-                                    >
-                                        <img src="/assets/images/counterup/shape-04.png" alt="Shape" />
-                                    </motion.li>
-                                    <motion.li className="shape-4 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                        animate={ {
-                                            x: mouseDirection(40).x,
-                                            y: mouseDirection(40).y
-                                        } }
-                                    >
-                                        <img src="/assets/images/counterup/shape-05.png" alt="Shape" />
-                                    </motion.li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default OnlineCourse;
\ No newline at end of file
diff --git a/src/components/landing-demo/online-course.tsx b/src/components/landing-demo/online-course.tsx
new file mode 100644
index 0000000..252c7f6
--- /dev/null
+++ b/src/components/landing-demo/online-course.tsx
@@ -0,0 +1,154 @@
+import React from 'react';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+
+const OnlineCourse = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='pv-course-details-area bg-image'>
+            <div className='wrapper'>
+                <div className='container-custom'>
+                    <div className='row align-items-center'>
+                        <div className='col-xl-5 col-lg-6'>
+                            <div className='course-content'>
+                                <div className='section-title section-left splash-title'>
+                                    <span
+                                        className='pre-title'
+                                        data-sal='slide-up'
+                                        data-sal-duration='1000'
+                                    >
+                                        Online Course
+                                    </span>
+                                    <h2
+                                        className='title'
+                                        data-sal-delay='100'
+                                        data-sal='slide-up'
+                                        data-sal-duration='1000'
+                                    >
+                                        Learn Your Online Course Easily With EduBlink
+                                    </h2>
+                                    <p
+                                        data-sal-delay='100'
+                                        data-sal='slide-up'
+                                        data-sal-duration='1000'
+                                    >
+                                        Users can check up their active courses, update
+                                        their bio, completed courses, track their progress
+                                        easily and many more.
+                                    </p>
+                                    <div
+                                        data-sal-delay='400'
+                                        data-sal='slide-up'
+                                        data-sal-duration='1000'
+                                    >
+                                        <Link
+                                            href='/course-details'
+                                            className='edu-btn'
+                                            target='_blank'
+                                        >
+                                            Course Details<i className='icon-4'></i>
+                                        </Link>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className='col-xl-7 col-lg-6'>
+                            <div className='course-thumbnail'>
+                                <picture>
+                                    <img
+                                        src='/assets/images/preview/course-details.png'
+                                        className='course-details-main'
+                                        data-sal-delay='200'
+                                        data-sal='fade'
+                                        data-sal-duration='800'
+                                        alt='Course Details'
+                                    />
+                                </picture>
+                                <picture>
+                                    <img
+                                        src='/assets/images/preview/instructor.png'
+                                        className='course-instructor'
+                                        data-sal-delay='500'
+                                        data-sal='slide-right'
+                                        data-sal-duration='1000'
+                                        alt='Course Instructor'
+                                    />
+                                </picture>
+                                <ul className='shape-group'>
+                                    <motion.li
+                                        className='shape-1 scene'
+                                        data-sal-delay='1000'
+                                        data-sal='fade'
+                                        data-sal-duration='1000'
+                                        animate={{
+                                            x: mouseDirection(30).x,
+                                            y: mouseDirection(30).y,
+                                        }}
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/about/shape-13.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </motion.li>
+                                    <li
+                                        className='shape-2'
+                                        data-sal-delay='1000'
+                                        data-sal='fade'
+                                        data-sal-duration='1000'
+                                    >
+                                        <picture>
+                                            <img
+                                                className='rotateit'
+                                                src='/assets/images/counterup/shape-02.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </li>
+                                    <motion.li
+                                        className='shape-3 scene'
+                                        data-sal-delay='1000'
+                                        data-sal='fade'
+                                        data-sal-duration='1000'
+                                        animate={{
+                                            x: mouseReverse(40).x,
+                                            y: mouseReverse(40).y,
+                                        }}
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/counterup/shape-04.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </motion.li>
+                                    <motion.li
+                                        className='shape-4 scene'
+                                        data-sal-delay='1000'
+                                        data-sal='fade'
+                                        data-sal-duration='1000'
+                                        animate={{
+                                            x: mouseDirection(40).x,
+                                            y: mouseDirection(40).y,
+                                        }}
+                                    >
+                                        <picture>
+                                            <img
+                                                src='/assets/images/counterup/shape-05.png'
+                                                alt='Shape'
+                                            />
+                                        </picture>
+                                    </motion.li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default OnlineCourse;
diff --git a/src/components/landing-demo/responsive-menu.jsx b/src/components/landing-demo/responsive-menu.jsx
deleted file mode 100644
index b4bd1f6..0000000
--- a/src/components/landing-demo/responsive-menu.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import Link from 'next/link';
-import React, { useState } from 'react';
-
-const ResponsiveMenu = ({ isOpen, setIsOpen }) => {
-    const [navTitle, setNavTitle] = useState('')
-
-    const openMobileMenu = (menu) => {
-        if(navTitle === menu){
-            setNavTitle('')
-        }
-        else {
-            setNavTitle(menu)
-        }
-    }
-    return <>
-        <div className={`popup-mobile-menu ${isOpen?'active':''}`}>
-            <div className="inner">
-                <div className="header-top">
-                    <div className="logo">
-                        <Link href="/">
-
-                            <img className="logo-light" src='/assets/images/logo/logo-dark.png' alt="logo" />
-                            <img className="logo-dark" src='/assets/images/logo/logo-white.png' alt="logo" />
-
-                        </Link>
-                    </div>
-
-                    <div className="close-menu" onClick={() => setIsOpen(false)}>
-                        <button className="close-button">
-                            <i className="icon-73"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <div className="mm-menu">
-                    <ul>
-                        <li>
-                            <a href="#intro">Intro</a>
-                        </li>
-                        <li>
-                            <a href="#demos">Demos</a>
-                        </li>
-                        <li>
-                            <a href="https://docs.devsblink.com/edublink-react/" target="_blank">Documentation</a>
-                        </li>
-                        <li>
-                            <a href="https://devsblink.freshdesk.com/" target="_blank">Support</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-
-        {/* overlay start */}
-        <div onClick={() => setIsOpen(false)} className={`body-overlay ${isOpen ? 'apply' : ''}`}></div>
-        {/* overlay end */}
-    </>;
-}
-
-export default ResponsiveMenu;
\ No newline at end of file
diff --git a/src/components/landing-demo/responsive-menu.tsx b/src/components/landing-demo/responsive-menu.tsx
new file mode 100644
index 0000000..5854247
--- /dev/null
+++ b/src/components/landing-demo/responsive-menu.tsx
@@ -0,0 +1,84 @@
+import Link from 'next/link';
+import React, { useState } from 'react';
+
+const ResponsiveMenu = ({ isOpen, setIsOpen }) => {
+    const [navTitle, setNavTitle] = useState('');
+
+    const openMobileMenu = menu => {
+        if (navTitle === menu) {
+            setNavTitle('');
+        } else {
+            setNavTitle(menu);
+        }
+    };
+    return (
+        <>
+            <div className={`popup-mobile-menu ${isOpen ? 'active' : ''}`}>
+                <div className='inner'>
+                    <div className='header-top'>
+                        <div className='logo'>
+                            <Link href='/'>
+                                <picture>
+                                    <img
+                                        className='logo-light'
+                                        src='/assets/images/logo/logo-dark.png'
+                                        alt='logo'
+                                    />
+                                </picture>
+                                <picture>
+                                    <img
+                                        className='logo-dark'
+                                        src='/assets/images/logo/logo-white.png'
+                                        alt='logo'
+                                    />
+                                </picture>
+                            </Link>
+                        </div>
+
+                        <div className='close-menu' onClick={() => setIsOpen(false)}>
+                            <button className='close-button'>
+                                <i className='icon-73'></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className='mm-menu'>
+                        <ul>
+                            <li>
+                                <a href='#intro'>Intro</a>
+                            </li>
+                            <li>
+                                <a href='#demos'>Demos</a>
+                            </li>
+                            <li>
+                                <a
+                                    href='https://docs.devsblink.com/edublink-react/'
+                                    target='_blank'
+                                >
+                                    Documentation
+                                </a>
+                            </li>
+                            <li>
+                                <a
+                                    href='https://devsblink.freshdesk.com/'
+                                    target='_blank'
+                                >
+                                    Support
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            {/* overlay start */}
+            <div
+                onClick={() => setIsOpen(false)}
+                className={`body-overlay ${isOpen ? 'apply' : ''}`}
+            ></div>
+            {/* overlay end */}
+        </>
+    );
+};
+
+export default ResponsiveMenu;
diff --git a/src/components/landing-demo/shop-support.jsx b/src/components/landing-demo/shop-support.jsx
deleted file mode 100644
index fbbcc3d..0000000
--- a/src/components/landing-demo/shop-support.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-
-const ShopSupport = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div className="pv-shop-area bg-image">
-            <div className="wrapper">
-                <div className="container-custom-1520">
-                    <div className="row align-items-center">
-                        <div className="col-lg-5 order-lg-2">
-                            <div className="shop-content">
-                                <div className="section-title section-left splash-title">
-                                    <span className="pre-title" data-sal="slide-up" data-sal-duration="1000">Online Store</span>
-
-                                    <h2 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Sell Like a Pro with <br /> E-commerce</h2>
-
-                                    <p data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">E-commerce. EduBlink provides all the tools you need to start selling online. Let your customers to experience E-commerce at its absolute-best.</p>
-
-                                    <div data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
-                                        <Link href="/course-style-1" className="edu-btn" target="_blank">
-                                            View Course Buy/Sell<i className="icon-4"></i>
-
-                                        </Link>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="col-lg-7 order-lg-1">
-                            <div className="shop-thumbnail">
-                                <div className="shop-thumbnail-images">
-                                    <img className="shop-demo-main" src="/assets/images/preview/shop-demo-main.png" data-sal-delay="200" data-sal="fade" data-sal-duration="800" alt="Shop Images" />
-
-                                    <img className="shop-demo-left" src="/assets/images/preview/shop-demo-left.png" data-sal-delay="500" data-sal="slide-right" data-sal-duration="1000" alt="Shop Images" />
-
-                                    <img className="shop-demo-right" src="/assets/images/preview/shop-demo-right.png" data-sal-delay="500" data-sal="slide-left" data-sal-duration="1000" alt="Shop Images" />
-
-                                    <ul className="shape-group">
-                                        <motion.li className="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                            animate={ {
-                                                x: mouseReverse(35).x,
-                                                y: mouseReverse(35).y
-                                            } }
-                                        >
-                                            <img src="/assets/images/about/shape-13.png" alt="shape" />
-                                        </motion.li>
-
-                                        <motion.li className="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                            animate={ {
-                                                x: mouseReverse(35).x,
-                                                y: mouseReverse(35).y
-                                            } }
-                                        >
-                                            <img src="/assets/images/about/shape-25.png" alt="shape" />
-                                        </motion.li>
-
-                                        <motion.li className="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000"
-                                            animate={ {
-                                                x: mouseDirection(35).x,
-                                                y: mouseDirection(35).y
-                                            } }
-                                        >
-                                            <span className="d-block"></span>
-                                        </motion.li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default ShopSupport;
\ No newline at end of file
diff --git a/src/components/landing-demo/shop-support.tsx b/src/components/landing-demo/shop-support.tsx
new file mode 100644
index 0000000..a03646b
--- /dev/null
+++ b/src/components/landing-demo/shop-support.tsx
@@ -0,0 +1,156 @@
+import React from 'react';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+
+const ShopSupport = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div className='pv-shop-area bg-image'>
+            <div className='wrapper'>
+                <div className='container-custom-1520'>
+                    <div className='row align-items-center'>
+                        <div className='col-lg-5 order-lg-2'>
+                            <div className='shop-content'>
+                                <div className='section-title section-left splash-title'>
+                                    <span
+                                        className='pre-title'
+                                        data-sal='slide-up'
+                                        data-sal-duration='1000'
+                                    >
+                                        Online Store
+                                    </span>
+
+                                    <h2
+                                        className='title'
+                                        data-sal-delay='100'
+                                        data-sal='slide-up'
+                                        data-sal-duration='1000'
+                                    >
+                                        Sell Like a Pro with <br /> E-commerce
+                                    </h2>
+
+                                    <p
+                                        data-sal-delay='100'
+                                        data-sal='slide-up'
+                                        data-sal-duration='1000'
+                                    >
+                                        E-commerce. EduBlink provides all the tools you
+                                        need to start selling online. Let your customers
+                                        to experience E-commerce at its absolute-best.
+                                    </p>
+
+                                    <div
+                                        data-sal-delay='400'
+                                        data-sal='slide-up'
+                                        data-sal-duration='1000'
+                                    >
+                                        <Link
+                                            href='/course-style-1'
+                                            className='edu-btn'
+                                            target='_blank'
+                                        >
+                                            View Course Buy/Sell<i className='icon-4'></i>
+                                        </Link>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='col-lg-7 order-lg-1'>
+                            <div className='shop-thumbnail'>
+                                <div className='shop-thumbnail-images'>
+                                    <picture>
+                                        <img
+                                            className='shop-demo-main'
+                                            src='/assets/images/preview/shop-demo-main.png'
+                                            data-sal-delay='200'
+                                            data-sal='fade'
+                                            data-sal-duration='800'
+                                            alt='Shop Images'
+                                        />
+                                    </picture>
+
+                                    <picture>
+                                        <img
+                                            className='shop-demo-left'
+                                            src='/assets/images/preview/shop-demo-left.png'
+                                            data-sal-delay='500'
+                                            data-sal='slide-right'
+                                            data-sal-duration='1000'
+                                            alt='Shop Images'
+                                        />
+                                    </picture>
+
+                                    <picture>
+                                        <img
+                                            className='shop-demo-right'
+                                            src='/assets/images/preview/shop-demo-right.png'
+                                            data-sal-delay='500'
+                                            data-sal='slide-left'
+                                            data-sal-duration='1000'
+                                            alt='Shop Images'
+                                        />
+                                    </picture>
+
+                                    <ul className='shape-group'>
+                                        <motion.li
+                                            className='shape-1 scene'
+                                            data-sal-delay='1000'
+                                            data-sal='fade'
+                                            data-sal-duration='1000'
+                                            animate={{
+                                                x: mouseReverse(35).x,
+                                                y: mouseReverse(35).y,
+                                            }}
+                                        >
+                                            <picture>
+                                                <img
+                                                    src='/assets/images/about/shape-13.png'
+                                                    alt='shape'
+                                                />
+                                            </picture>
+                                        </motion.li>
+
+                                        <motion.li
+                                            className='shape-2 scene'
+                                            data-sal-delay='1000'
+                                            data-sal='fade'
+                                            data-sal-duration='1000'
+                                            animate={{
+                                                x: mouseReverse(35).x,
+                                                y: mouseReverse(35).y,
+                                            }}
+                                        >
+                                            <picture>
+                                                <img
+                                                    src='/assets/images/about/shape-25.png'
+                                                    alt='shape'
+                                                />
+                                            </picture>
+                                        </motion.li>
+
+                                        <motion.li
+                                            className='shape-3 scene'
+                                            data-sal-delay='1000'
+                                            data-sal='fade'
+                                            data-sal-duration='1000'
+                                            animate={{
+                                                x: mouseDirection(35).x,
+                                                y: mouseDirection(35).y,
+                                            }}
+                                        >
+                                            <span className='d-block'></span>
+                                        </motion.li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ShopSupport;
diff --git a/src/components/pricing-table/index.jsx b/src/components/pricing-table/index.tsx
similarity index 66%
rename from src/components/pricing-table/index.jsx
rename to src/components/pricing-table/index.tsx
index b06fb9b..e9f1f2b 100644
--- a/src/components/pricing-table/index.jsx
+++ b/src/components/pricing-table/index.tsx
@@ -6,14 +6,14 @@ import PricingArea from './pricing-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Membership Plans" subtitle="Pricing" />
-                <PricingArea/>
+                <BreadcrumbThree title='Membership Plans' subtitle='Pricing' />
+                <PricingArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/pricing-table/pricing-area.jsx b/src/components/pricing-table/pricing-area.jsx
deleted file mode 100644
index 7688ec9..0000000
--- a/src/components/pricing-table/pricing-area.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-
-function PricingTable({title,delay,amount,duration,sm_text,item_off_1,item_off_2}) {
-    return (
-        <div className="col-lg-4" data-sal-delay={delay} data-sal="slide-up" data-sal-duration="800">
-            <div className="pricing-table">
-                <div className="pricing-header">
-                    <h6 className="title">{title}</h6>
-                    <div className="price-wrap">
-                        <span className="amount">${amount}</span>
-                        <span className="duration">{duration}</span>
-                    </div>
-                    <p>{sm_text}</p>
-                </div>
-
-                <div className="pricing-body">
-                    <ul className="list-item">
-                        <li><i className="icon-20"></i>Courses included: 1</li>
-                        <li><i className="icon-20"></i>Individual Course</li>
-                        <li><i className="icon-20"></i>Course learning checks</li>
-                        <li className={`${item_off_1?'item-off':''}`}><i className="icon-20"></i>Course discussions</li>
-                        <li className={`${item_off_2?'item-off':''}`}><i className="icon-20"></i>Offline learning</li>
-                    </ul>
-                </div>
-
-                <div className="pricing-btn">
-                    <a className="edu-btn btn-border btn-medium" href="#">Select plan<i className="icon-east"></i></a>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-const PricingArea = () => {
-    return (
-        <div className="edu-section-gap">
-            <div className="container">
-                <div className="section-title section-center" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Pricing Table</span>
-                    <h2 className="title">Great Membership Plan</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    <PricingTable delay='100' title="Silver Plan" amount="29.00" duration="Per month" item_off_1={true}
-                    sm_text="Lorem ipsum dolor sit amet consect adipisicing elit sed. do eilt sed" item_off_2={true} />
-
-                    <PricingTable delay='200' title="Gold Plan" amount="49.00" duration="Per month"
-                    sm_text="Lorem ipsum dolor sit amet consect adipisicing elit sed. do eilt sed" item_off_2={true} />
-
-                    <PricingTable delay='300' title="Diamond Plan" amount="79.00" duration="Per month"
-                    sm_text="Lorem ipsum dolor sit amet consect adipisicing elit sed. do eilt sed" />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default PricingArea;
\ No newline at end of file
diff --git a/src/components/pricing-table/pricing-area.tsx b/src/components/pricing-table/pricing-area.tsx
new file mode 100644
index 0000000..c2c5f09
--- /dev/null
+++ b/src/components/pricing-table/pricing-area.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+
+type PricingTableProps = {
+    title: string;
+    delay: string;
+    amount: string;
+    duration: string;
+    sm_text: string;
+    item_off_1?: boolean;
+    item_off_2?: boolean;
+};
+
+function PricingTable({
+    title,
+    delay,
+    amount,
+    duration,
+    sm_text,
+    item_off_1,
+    item_off_2,
+}: PricingTableProps) {
+    return (
+        <div
+            className='col-lg-4'
+            data-sal-delay={delay}
+            data-sal='slide-up'
+            data-sal-duration='800'
+        >
+            <div className='pricing-table'>
+                <div className='pricing-header'>
+                    <h6 className='title'>{title}</h6>
+                    <div className='price-wrap'>
+                        <span className='amount'>${amount}</span>
+                        <span className='duration'>{duration}</span>
+                    </div>
+                    <p>{sm_text}</p>
+                </div>
+
+                <div className='pricing-body'>
+                    <ul className='list-item'>
+                        <li>
+                            <i className='icon-20'></i>Courses included: 1
+                        </li>
+                        <li>
+                            <i className='icon-20'></i>Individual Course
+                        </li>
+                        <li>
+                            <i className='icon-20'></i>Course learning checks
+                        </li>
+                        <li className={`${item_off_1 ? 'item-off' : ''}`}>
+                            <i className='icon-20'></i>Course discussions
+                        </li>
+                        <li className={`${item_off_2 ? 'item-off' : ''}`}>
+                            <i className='icon-20'></i>Offline learning
+                        </li>
+                    </ul>
+                </div>
+
+                <div className='pricing-btn'>
+                    <a className='edu-btn btn-border btn-medium' href='#'>
+                        Select plan<i className='icon-east'></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+const PricingArea = () => {
+    return (
+        <div className='edu-section-gap'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Pricing Table</span>
+                    <h2 className='title'>Great Membership Plan</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    <PricingTable
+                        delay='100'
+                        title='Silver Plan'
+                        amount='29.00'
+                        duration='Per month'
+                        item_off_1={true}
+                        sm_text='Lorem ipsum dolor sit amet consect adipisicing elit sed. do eilt sed'
+                        item_off_2={true}
+                    />
+
+                    <PricingTable
+                        delay='200'
+                        title='Gold Plan'
+                        amount='49.00'
+                        duration='Per month'
+                        sm_text='Lorem ipsum dolor sit amet consect adipisicing elit sed. do eilt sed'
+                        item_off_2={true}
+                    />
+
+                    <PricingTable
+                        delay='300'
+                        title='Diamond Plan'
+                        amount='79.00'
+                        duration='Per month'
+                        sm_text='Lorem ipsum dolor sit amet consect adipisicing elit sed. do eilt sed'
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PricingArea;
diff --git a/src/components/privacy-policy/index.jsx b/src/components/privacy-policy/index.tsx
similarity index 65%
rename from src/components/privacy-policy/index.jsx
rename to src/components/privacy-policy/index.tsx
index f889895..6e3f83d 100644
--- a/src/components/privacy-policy/index.jsx
+++ b/src/components/privacy-policy/index.tsx
@@ -6,14 +6,14 @@ import PolicyArea from './policy-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Privacy Policy" subtitle="Privacy Policy" />
-                <PolicyArea/>
+                <BreadcrumbThree title='Privacy Policy' subtitle='Privacy Policy' />
+                <PolicyArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/privacy-policy/policy-area.jsx b/src/components/privacy-policy/policy-area.jsx
deleted file mode 100644
index 016fce9..0000000
--- a/src/components/privacy-policy/policy-area.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import SidebarOne from '../common/sidebar/blog-sidebar-1';
-
-const PolicyArea = () => {
-    return (
-        <section className="privacy-policy-area">
-            <div className="container">
-                <div className="row row--30">
-                    <div className="col-lg-8">
-                        <div className="privacy-policy">
-                            <div className="text-block">
-                                <h3 className="title">Definitions of Privacy Policy</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis aliquip commodo consequat aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.</p>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">General information</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip commodo consequat.</p>
-                                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.</p>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">Availability of Website</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                                <ul>
-                                    <li>Internet protocol (IP) addresses</li>
-                                    <li>Browser type, Internet Service Provider (ISP)</li>
-                                    <li>Date and time stamp, referring/exit pages</li>
-                                    <li>Possibly the number of click</li>
-                                </ul>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">Privacy Policies</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip commodo consequat. </p>
-                                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.</p>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">Third Party Policies</h4>
-                                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.</p>
-                                <ul>
-                                    <li>The Company name, the Company logo, and all related names, logos, product and service names, designs</li>
-                                    <li>No right, title or interest in or to the online course or any portion thereof, is transferred to any Member, and all rights not expressly granted herein, are reserved by the Company.</li>
-                                    <li>The online course is owned by the Company and is protected by American and international copyright, trademark, patent, trade secret and other intellectual property or proprietary rights laws.</li>
-                                </ul>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">Online Privacy</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip commodo consequat. </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-4">
-                        <SidebarOne />
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
-}
-
-export default PolicyArea;
\ No newline at end of file
diff --git a/src/components/privacy-policy/policy-area.tsx b/src/components/privacy-policy/policy-area.tsx
new file mode 100644
index 0000000..eeaf6a6
--- /dev/null
+++ b/src/components/privacy-policy/policy-area.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import SidebarOne from '../common/sidebar/blog-sidebar-1';
+
+const PolicyArea = () => {
+    return (
+        <section className='privacy-policy-area'>
+            <div className='container'>
+                <div className='row row--30'>
+                    <div className='col-lg-8'>
+                        <div className='privacy-policy'>
+                            <div className='text-block'>
+                                <h3 className='title'>Definitions of Privacy Policy</h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua. Ut enim ad minim veniam, quis
+                                    nostrud exercitation ullamco laboris nis aliquip
+                                    commodo consequat aute irure dolor in reprehenderit in
+                                    voluptate velit esse cillum dolore eu fugiat nulla
+                                    pariatur. Excepteur sint occaecat.
+                                </p>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>General information</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua. Ut enim ad minim veniam, quis
+                                    nostrud exercitation ullamco laboris nisi ut aliquip
+                                    commodo consequat.
+                                </p>
+                                <p>
+                                    Duis aute irure dolor in reprehenderit in voluptate
+                                    velit esse cillum dolore eu fugiat nulla pariatur.
+                                    Excepteur sint occaecat.
+                                </p>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>Availability of Website</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua.
+                                </p>
+                                <ul>
+                                    <li>Internet protocol (IP) addresses</li>
+                                    <li>Browser type, Internet Service Provider (ISP)</li>
+                                    <li>Date and time stamp, referring/exit pages</li>
+                                    <li>Possibly the number of click</li>
+                                </ul>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>Privacy Policies</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua. Ut enim ad minim veniam, quis
+                                    nostrud exercitation ullamco laboris nisi ut aliquip
+                                    commodo consequat.{' '}
+                                </p>
+                                <p>
+                                    Duis aute irure dolor in reprehenderit in voluptate
+                                    velit esse cillum dolore eu fugiat nulla pariatur.
+                                    Excepteur sint occaecat.
+                                </p>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>Third Party Policies</h4>
+                                <p>
+                                    Duis aute irure dolor in reprehenderit in voluptate
+                                    velit esse cillum dolore eu fugiat nulla pariatur.
+                                    Excepteur sint occaecat.
+                                </p>
+                                <ul>
+                                    <li>
+                                        The Company name, the Company logo, and all
+                                        related names, logos, product and service names,
+                                        designs
+                                    </li>
+                                    <li>
+                                        No right, title or interest in or to the online
+                                        course or any portion thereof, is transferred to
+                                        any Member, and all rights not expressly granted
+                                        herein, are reserved by the Company.
+                                    </li>
+                                    <li>
+                                        The online course is owned by the Company and is
+                                        protected by American and international copyright,
+                                        trademark, patent, trade secret and other
+                                        intellectual property or proprietary rights laws.
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>Online Privacy</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua. Ut enim ad minim veniam, quis
+                                    nostrud exercitation ullamco laboris nisi ut aliquip
+                                    commodo consequat.{' '}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='col-lg-4'>
+                        <SidebarOne />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default PolicyArea;
diff --git a/src/components/product-details/index.jsx b/src/components/product-details/index.tsx
similarity index 68%
rename from src/components/product-details/index.jsx
rename to src/components/product-details/index.tsx
index 4cd582f..47d2b69 100644
--- a/src/components/product-details/index.jsx
+++ b/src/components/product-details/index.tsx
@@ -4,18 +4,18 @@ import BreadcrumbThree from '../breadcrumb/breadcrumb-3';
 import ProductDescription from './product-description';
 import ProductDetailsArea from './product-details-area';
 
-const index = ({item}) => {
+const index = ({ item }) => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Product Page" subtitle={item?.title} />
+                <BreadcrumbThree title='Product Page' subtitle={item?.title} />
                 <ProductDetailsArea item={item} />
-                <ProductDescription item={item}/>
+                <ProductDescription item={item} />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/product-details/product-description.jsx b/src/components/product-details/product-description.jsx
deleted file mode 100644
index ffb8936..0000000
--- a/src/components/product-details/product-description.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import ProductCommentForm from '../forms/product-comment-form';
-
-const ProductDescription = ({item}) => {
-    return (
-        <div className="edu-product-description gap-bottom-equal">
-            <div className="container">
-                <div className="row">
-                    <div className="col-lg-12">
-                        <ul className="product-description-nav nav nav-tabs" id="myTab" role="tablist">
-                            <li className="nav-item" role="presentation">
-                                <button className="nav-link active" id="desc-tab" data-bs-toggle="tab" data-bs-target="#desc" type="button" role="tab" aria-controls="desc" aria-selected="true">Description</button>
-                            </li>
-                            <li className="nav-item" role="presentation">
-                                <button className="nav-link" id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="false">Reviews (1)</button>
-                            </li>
-                        </ul>
-
-                        <div className="tab-content" id="myTabContent">
-                            <div className="product-description-content tab-pane fade show active" id="desc" role="tabpanel" aria-labelledby="desc-tab">
-                                <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim ad minim veniam quis nostrud exercita mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur consequuntur magni dolores.</p>
-                                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
-                            </div>
-
-                            <div className="product-description-content tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
-                                <div className="comment-area">
-                                    <h5 className="heading-title">1 Review for The King of Drugs</h5>
-                                    <div className="comment-list-wrapper">
-                                        <div className="comment">
-                                            <div className="thumbnail">
-                                                <img src="/assets/images/blog/comment-03.jpg" alt="Comment Images" />
-                                            </div>
-
-                                            <div className="comment-content">
-                                                <h6 className="title">Edward Norton - <span className="date">Oct 10, 2021</span></h6>
-                                                <div className="rating">
-                                                    <i className="icon-23"></i>
-                                                    <i className="icon-23"></i>
-                                                    <i className="icon-23"></i>
-                                                    <i className="icon-23"></i>
-                                                    <i className="icon-23"></i>
-                                                </div>
-                                                <p>Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim est laborum. Sed perspiciatis unde omnis natus error sit voluptatem accusa dolore mque laudant totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi arch tecto beatae vitae dicta.</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="comment-form-area">
-                                    <h5 className="heading-title">Be First to Add a Review</h5>
-                                    <ProductCommentForm />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default ProductDescription;
\ No newline at end of file
diff --git a/src/components/product-details/product-description.tsx b/src/components/product-details/product-description.tsx
new file mode 100644
index 0000000..e7b872d
--- /dev/null
+++ b/src/components/product-details/product-description.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import ProductCommentForm from '../forms/product-comment-form';
+
+const ProductDescription = ({ item }) => {
+    return (
+        <div className='edu-product-description gap-bottom-equal'>
+            <div className='container'>
+                <div className='row'>
+                    <div className='col-lg-12'>
+                        <ul
+                            className='product-description-nav nav nav-tabs'
+                            id='myTab'
+                            role='tablist'
+                        >
+                            <li className='nav-item' role='presentation'>
+                                <button
+                                    className='nav-link active'
+                                    id='desc-tab'
+                                    data-bs-toggle='tab'
+                                    data-bs-target='#desc'
+                                    type='button'
+                                    role='tab'
+                                    aria-controls='desc'
+                                    aria-selected='true'
+                                >
+                                    Description
+                                </button>
+                            </li>
+                            <li className='nav-item' role='presentation'>
+                                <button
+                                    className='nav-link'
+                                    id='review-tab'
+                                    data-bs-toggle='tab'
+                                    data-bs-target='#review'
+                                    type='button'
+                                    role='tab'
+                                    aria-controls='review'
+                                    aria-selected='false'
+                                >
+                                    Reviews (1)
+                                </button>
+                            </li>
+                        </ul>
+
+                        <div className='tab-content' id='myTabContent'>
+                            <div
+                                className='product-description-content tab-pane fade show active'
+                                id='desc'
+                                role='tabpanel'
+                                aria-labelledby='desc-tab'
+                            >
+                                <p>
+                                    Consectetur adipisicing elit, sed do eiusmod tempor
+                                    incididunt ut labore et dolore magna aliqua.enim ad
+                                    minim veniam quis nostrud exercita mco laboris nisi ut
+                                    aliquip ex ea commodo consequat. duis aute irure dolor
+                                    in reprehenderit in voluptate velit esse cillum dolore
+                                    eu fugiat nulla pariatur consequuntur magni dolores.
+                                </p>
+                                <p>
+                                    Excepteur sint occaecat cupidatat non proident, sunt
+                                    in culpa qui officia deserunt mollit anim id est
+                                    laborum nemo enim ipsam voluptatem quia voluptas sit
+                                    aspernatur.
+                                </p>
+                            </div>
+
+                            <div
+                                className='product-description-content tab-pane fade'
+                                id='review'
+                                role='tabpanel'
+                                aria-labelledby='review-tab'
+                            >
+                                <div className='comment-area'>
+                                    <h5 className='heading-title'>
+                                        1 Review for The King of Drugs
+                                    </h5>
+                                    <div className='comment-list-wrapper'>
+                                        <div className='comment'>
+                                            <div className='thumbnail'>
+                                                <picture>
+                                                    <img
+                                                        src='/assets/images/blog/comment-03.jpg'
+                                                        alt='Comment Images'
+                                                    />
+                                                </picture>
+                                            </div>
+
+                                            <div className='comment-content'>
+                                                <h6 className='title'>
+                                                    Edward Norton -{' '}
+                                                    <span className='date'>
+                                                        Oct 10, 2021
+                                                    </span>
+                                                </h6>
+                                                <div className='rating'>
+                                                    <i className='icon-23'></i>
+                                                    <i className='icon-23'></i>
+                                                    <i className='icon-23'></i>
+                                                    <i className='icon-23'></i>
+                                                    <i className='icon-23'></i>
+                                                </div>
+                                                <p>
+                                                    Excepteur sint occaecat cupidatat non
+                                                    proident sunt in culpa qui officia
+                                                    deserunt mollit anim est laborum. Sed
+                                                    perspiciatis unde omnis natus error
+                                                    sit voluptatem accusa dolore mque
+                                                    laudant totam rem aperiam eaque ipsa
+                                                    quae ab illo inventore veritatis et
+                                                    quasi arch tecto beatae vitae dicta.
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className='comment-form-area'>
+                                    <h5 className='heading-title'>
+                                        Be First to Add a Review
+                                    </h5>
+                                    <ProductCommentForm />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductDescription;
diff --git a/src/components/product-details/product-details-area.jsx b/src/components/product-details/product-details-area.jsx
deleted file mode 100644
index 85da0d1..0000000
--- a/src/components/product-details/product-details-area.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const ProductDetailsArea = ({ item }) => {
-    return (
-        <div className="product-details-area gap-top-equal">
-            <div className="container">
-                <div className="row g-5 row--25">
-                    <div className="col-lg-6">
-                        <div className="thumbnail">
-                            <img src={item?.img} alt="Product Images" className='w-100' />
-                        </div>
-                    </div>
-
-                    <div className="col-lg-6">
-                        <div className="content">
-                            <h3 className="title">{item?.title}</h3>
-                            <div className="product-rating">
-                                <div className="rating">
-                                    {item?.rating?.map(r => <i key={r} className="icon-23"></i>)}
-                                </div>
-                                <span className="rating-count">(3)</span>
-                            </div>
-
-                            <div className="price">$70.30</div>
-
-                            <p>{item?.desc}</p>
-
-                            <div className="product-action">
-                                <div className="edu-quantity-btn">
-                                    <div className="pro-qty"><span className="dec qtybtn">-</span>
-                                        <input type="text" defaultValue="1" />
-                                        <span className="inc qtybtn">+</span>
-                                    </div>
-                                </div>
-
-                                <div className="add-to-cart-btn">
-                                    <Link href="/cart" className="edu-btn btn-medium">
-                                        Add To Cart
-                                    </Link>
-                                    <a href="#" className="wishlist-btn"><i className="icon-22"></i></a>
-                                </div>
-                            </div>
-
-                            <ul className="product-feature">
-                                <li><span>SKU:</span> {item?.sku}</li>
-                                <li><span>Categories: </span> <a href="#">Book</a> </li>
-                                <li><span>Tag: </span> <a href="#">Business</a> <a href="#">Administration</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default ProductDetailsArea;
\ No newline at end of file
diff --git a/src/components/product-details/product-details-area.tsx b/src/components/product-details/product-details-area.tsx
new file mode 100644
index 0000000..d6e7352
--- /dev/null
+++ b/src/components/product-details/product-details-area.tsx
@@ -0,0 +1,76 @@
+import Link from 'next/link';
+import React from 'react';
+
+const ProductDetailsArea = ({ item }) => {
+    return (
+        <div className='product-details-area gap-top-equal'>
+            <div className='container'>
+                <div className='row g-5 row--25'>
+                    <div className='col-lg-6'>
+                        <div className='thumbnail'>
+                            <picture>
+                                <img
+                                    src={item?.img}
+                                    alt='Product Images'
+                                    className='w-100'
+                                />
+                            </picture>
+                        </div>
+                    </div>
+
+                    <div className='col-lg-6'>
+                        <div className='content'>
+                            <h3 className='title'>{item?.title}</h3>
+                            <div className='product-rating'>
+                                <div className='rating'>
+                                    {item?.rating?.map(r => (
+                                        <i key={r} className='icon-23'></i>
+                                    ))}
+                                </div>
+                                <span className='rating-count'>(3)</span>
+                            </div>
+
+                            <div className='price'>$70.30</div>
+
+                            <p>{item?.desc}</p>
+
+                            <div className='product-action'>
+                                <div className='edu-quantity-btn'>
+                                    <div className='pro-qty'>
+                                        <span className='dec qtybtn'>-</span>
+                                        <input type='text' defaultValue='1' />
+                                        <span className='inc qtybtn'>+</span>
+                                    </div>
+                                </div>
+
+                                <div className='add-to-cart-btn'>
+                                    <Link href='/cart' className='edu-btn btn-medium'>
+                                        Add To Cart
+                                    </Link>
+                                    <a href='#' className='wishlist-btn'>
+                                        <i className='icon-22'></i>
+                                    </a>
+                                </div>
+                            </div>
+
+                            <ul className='product-feature'>
+                                <li>
+                                    <span>SKU:</span> {item?.sku}
+                                </li>
+                                <li>
+                                    <span>Categories: </span> <a href='#'>Book</a>{' '}
+                                </li>
+                                <li>
+                                    <span>Tag: </span> <a href='#'>Business</a>{' '}
+                                    <a href='#'>Administration</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductDetailsArea;
diff --git a/src/components/purchase-guide/index.jsx b/src/components/purchase-guide/index.tsx
similarity index 65%
rename from src/components/purchase-guide/index.jsx
rename to src/components/purchase-guide/index.tsx
index 2af4dbb..5b594b2 100644
--- a/src/components/purchase-guide/index.jsx
+++ b/src/components/purchase-guide/index.tsx
@@ -6,14 +6,14 @@ import PurchaseArea from './purchase-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Purchase Guide" subtitle="Purchase Guide" />
-                <PurchaseArea/>
+                <BreadcrumbThree title='Purchase Guide' subtitle='Purchase Guide' />
+                <PurchaseArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/purchase-guide/purchase-area.jsx b/src/components/purchase-guide/purchase-area.jsx
deleted file mode 100644
index a4cfb2c..0000000
--- a/src/components/purchase-guide/purchase-area.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import SidebarOne from '../common/sidebar/blog-sidebar-1';
-
-const PurchaseArea = () => {
-    return (
-        <section className="privacy-policy-area purchase-guide-area dfdfd">
-            <div className="container">
-                <div className="row row--30">
-                    <div className="col-lg-8">
-                        <div className="privacy-policy purchase-guide">
-                            <div className="text-block">
-                                <h3 className="title">Purchase Currency</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis aliquip commodo consequat aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">Account Registering</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                                <div className="row">
-                                    <div className="col-lg-5">
-                                        <ul>
-                                            <li>Name (required)</li>
-                                            <li>Age (required)</li>
-                                            <li>Date of birth (required)</li>
-                                            <li>Passport/ ID no. (required)</li>
-                                            <li>Current career (required)</li>
-                                        </ul>
-                                    </div>
-
-                                    <div className="col-lg-6">
-                                        <ul>
-                                            <li>Mobile phone numbers (required)</li>
-                                            <li>Email address (required)</li>
-                                            <li>Hobbies & interests (optional)</li>
-                                            <li>Social profiles (optional)</li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">How to Purchase a Course?</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis aliquip commodo consequat aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.</p>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">Accepted Credit Cards</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                                <ul>
-                                    <li>Visa</li>
-                                    <li>Mastercards</li>
-                                    <li>American Express</li>
-                                    <li>Discover</li>
-                                </ul>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">Why to Buy Our Course?</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                                <ul>
-                                    <li>Updated content on a regular basis</li>
-                                    <li>Secure & hassle-free payment</li>
-                                    <li>1-click checkout</li>
-                                    <li>Easy access & smart user dashboard</li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-4">
-                        <SidebarOne />
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
-}
-
-export default PurchaseArea;
\ No newline at end of file
diff --git a/src/components/purchase-guide/purchase-area.tsx b/src/components/purchase-guide/purchase-area.tsx
new file mode 100644
index 0000000..dd1569d
--- /dev/null
+++ b/src/components/purchase-guide/purchase-area.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import SidebarOne from '../common/sidebar/blog-sidebar-1';
+
+const PurchaseArea = () => {
+    return (
+        <section className='privacy-policy-area purchase-guide-area dfdfd'>
+            <div className='container'>
+                <div className='row row--30'>
+                    <div className='col-lg-8'>
+                        <div className='privacy-policy purchase-guide'>
+                            <div className='text-block'>
+                                <h3 className='title'>Purchase Currency</h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua. Ut enim ad minim veniam, quis
+                                    nostrud exercitation ullamco laboris nis aliquip
+                                    commodo consequat aute irure dolor in reprehenderit in
+                                    voluptate velit esse cillum dolore eu fugiat nulla
+                                    pariatur. Excepteur sint occaecat.{' '}
+                                </p>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>Account Registering</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua.
+                                </p>
+                                <div className='row'>
+                                    <div className='col-lg-5'>
+                                        <ul>
+                                            <li>Name (required)</li>
+                                            <li>Age (required)</li>
+                                            <li>Date of birth (required)</li>
+                                            <li>Passport/ ID no. (required)</li>
+                                            <li>Current career (required)</li>
+                                        </ul>
+                                    </div>
+
+                                    <div className='col-lg-6'>
+                                        <ul>
+                                            <li>Mobile phone numbers (required)</li>
+                                            <li>Email address (required)</li>
+                                            <li>Hobbies & interests (optional)</li>
+                                            <li>Social profiles (optional)</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>How to Purchase a Course?</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua. Ut enim ad minim veniam, quis
+                                    nostrud exercitation ullamco laboris nis aliquip
+                                    commodo consequat aute irure dolor in reprehenderit in
+                                    voluptate velit esse cillum dolore eu fugiat nulla
+                                    pariatur. Excepteur sint occaecat.
+                                </p>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>Accepted Credit Cards</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua.
+                                </p>
+                                <ul>
+                                    <li>Visa</li>
+                                    <li>Mastercards</li>
+                                    <li>American Express</li>
+                                    <li>Discover</li>
+                                </ul>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>Why to Buy Our Course?</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua.
+                                </p>
+                                <ul>
+                                    <li>Updated content on a regular basis</li>
+                                    <li>Secure & hassle-free payment</li>
+                                    <li>1-click checkout</li>
+                                    <li>Easy access & smart user dashboard</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='col-lg-4'>
+                        <SidebarOne />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default PurchaseArea;
diff --git a/src/components/seo.jsx b/src/components/seo.jsx
deleted file mode 100644
index 7f95106..0000000
--- a/src/components/seo.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import Head from "next/head";
-
-const SEO = ({ pageTitle, font }) => (
-    <Head>
-        <title>
-            {pageTitle && `${pageTitle} || EduBlink Online Education Platform React Next js Template`}
-        </title>
-        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
-        <meta name="description" content="Generated by create next app" />
-        <meta name="robots" content="noindex, follow" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1, shrink-to-fit=no"
-        />
-        {font && <link href={font} rel="stylesheet" />}
-        <link rel="icon" href="/favicon.ico" />
-    </Head>
-)
-
-export default SEO;
\ No newline at end of file
diff --git a/src/components/seo.tsx b/src/components/seo.tsx
new file mode 100644
index 0000000..20ccc9c
--- /dev/null
+++ b/src/components/seo.tsx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+
+type SEOProps = {
+    pageTitle?: string;
+    font?: string;
+};
+
+const SEO = ({ pageTitle, font }: SEOProps) => (
+    <Head>
+        <title>
+            {pageTitle &&
+                `${pageTitle} || EduBlink Online Education Platform React Next js Template`}
+        </title>
+        <meta httpEquiv='x-ua-compatible' content='ie=edge' />
+        <meta name='description' content='Generated by create next app' />
+        <meta name='robots' content='noindex, follow' />
+        <meta
+            name='viewport'
+            content='width=device-width, initial-scale=1, shrink-to-fit=no'
+        />
+        {font && <link href={font} rel='stylesheet' />}
+        <link rel='icon' href='/favicon.ico' />
+    </Head>
+);
+
+export default SEO;
diff --git a/src/components/shop/index.jsx b/src/components/shop/index.tsx
similarity index 67%
rename from src/components/shop/index.jsx
rename to src/components/shop/index.tsx
index 75a899b..a484a96 100644
--- a/src/components/shop/index.jsx
+++ b/src/components/shop/index.tsx
@@ -6,14 +6,14 @@ import ShopArea from './shop-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Shop Page" subtitle="Shop" />
-                <ShopArea/>
+                <BreadcrumbThree title='Shop Page' subtitle='Shop' />
+                <ShopArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/shop/shop-area.jsx b/src/components/shop/shop-area.jsx
deleted file mode 100644
index 55335c8..0000000
--- a/src/components/shop/shop-area.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { shop_data } from '../../data';
-
-const ShopArea = () => {
-    return (
-        <section className="shop-page-area section-gap-equal">
-            <div className="container">
-                <div className="edu-sorting-area">
-                    <div className="sorting-left">
-                        <h6 className="showing-text">We found <span>71</span> courses available for you</h6>
-                    </div>
-
-                    <div className="sorting-right">
-                        <div className="edu-sorting">
-                            <div className="icon"><i className="icon-55"></i></div>
-                            <select className="edu-select">
-                                <option>Filters</option>
-                                <option>Low To High</option>
-                                <option>High To Low</option>
-                                <option>Last Viewed</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="row g-5">
-                    {shop_data.map((product) => {
-                        const { id, img, delay, price, rating, title, total_rating } = product;
-                        return (
-                            <div key={id} className="col-lg-3 col-md-4 col-sm-6" data-sal-delay={delay}
-                                data-sal="slide-up" data-sal-duration="800">
-                                <div className="edu-product">
-                                    <div className="inner">
-                                        <div className="thumbnail">
-                                            <Link href={`/product-details/${id}`}>
-
-                                                <img src={img} alt="Shop Images" />
-
-                                            </Link>
-                                            <div className="product-hover-info">
-                                                <ul>
-                                                    <li><a href="#" role="button"><i className="icon-2"></i></a></li>
-                                                    <li>
-                                                        <Link href="/wishlist">
-                                                        <i className="icon-22"></i>
-                                                        </Link>
-                                                    </li>
-                                                    <li>
-                                                        <Link href="/cart">
-                                                        <i className="icon-3"></i>
-                                                        </Link>
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                        </div>
-
-                                        <div className="content">
-                                            <h6 className="title">
-                                                <Link href={`/product-details/${id}`}>
-                                                    {title}
-                                                </Link>
-                                            </h6>
-
-                                            <div className="product-rating">
-                                                <div className="rating">
-                                                    {rating.map(r => <i key={r} className="icon-23"></i>)}
-                                                </div>
-                                                <span className="rating-count">{(total_rating)}</span>
-                                            </div>
-                                            <div className="price">${price}</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-
-                <ul className="edu-pagination pt--50">
-                    <li><a href="#" aria-label="Previous"><i className="icon-west"></i></a></li>
-                    <li className="active"><a href="#">1</a></li>
-                    <li><a href="#">2</a></li>
-                    <li><a href="#">3</a></li>
-                    <li className="more-next"><a href="#"></a></li>
-                    <li><a href="#">8</a></li>
-                    <li><a href="#" aria-label="Next"><i className="icon-east"></i></a></li>
-                </ul>
-            </div>
-        </section>
-    );
-}
-
-export default ShopArea;
\ No newline at end of file
diff --git a/src/components/shop/shop-area.tsx b/src/components/shop/shop-area.tsx
new file mode 100644
index 0000000..32c785c
--- /dev/null
+++ b/src/components/shop/shop-area.tsx
@@ -0,0 +1,133 @@
+import Link from 'next/link';
+import React from 'react';
+import { shop_data } from '../../data';
+
+const ShopArea = () => {
+    return (
+        <section className='shop-page-area section-gap-equal'>
+            <div className='container'>
+                <div className='edu-sorting-area'>
+                    <div className='sorting-left'>
+                        <h6 className='showing-text'>
+                            We found <span>71</span> courses available for you
+                        </h6>
+                    </div>
+
+                    <div className='sorting-right'>
+                        <div className='edu-sorting'>
+                            <div className='icon'>
+                                <i className='icon-55'></i>
+                            </div>
+                            <select className='edu-select'>
+                                <option>Filters</option>
+                                <option>Low To High</option>
+                                <option>High To Low</option>
+                                <option>Last Viewed</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='row g-5'>
+                    {shop_data.map(product => {
+                        const { id, img, delay, price, rating, title, total_rating } =
+                            product;
+                        return (
+                            <div
+                                key={id}
+                                className='col-lg-3 col-md-4 col-sm-6'
+                                data-sal-delay={delay}
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <div className='edu-product'>
+                                    <div className='inner'>
+                                        <div className='thumbnail'>
+                                            <Link href={`/product-details/${id}`}>
+                                                <picture>
+                                                    <img src={img} alt='Shop Images' />
+                                                </picture>
+                                            </Link>
+                                            <div className='product-hover-info'>
+                                                <ul>
+                                                    <li>
+                                                        <a href='#' role='button'>
+                                                            <i className='icon-2'></i>
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <Link href='/wishlist'>
+                                                            <i className='icon-22'></i>
+                                                        </Link>
+                                                    </li>
+                                                    <li>
+                                                        <Link href='/cart'>
+                                                            <i className='icon-3'></i>
+                                                        </Link>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+
+                                        <div className='content'>
+                                            <h6 className='title'>
+                                                <Link href={`/product-details/${id}`}>
+                                                    {title}
+                                                </Link>
+                                            </h6>
+
+                                            <div className='product-rating'>
+                                                <div className='rating'>
+                                                    {rating.map(r => (
+                                                        <i
+                                                            key={r}
+                                                            className='icon-23'
+                                                        ></i>
+                                                    ))}
+                                                </div>
+                                                <span className='rating-count'>
+                                                    {total_rating}
+                                                </span>
+                                            </div>
+                                            <div className='price'>${price}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                <ul className='edu-pagination pt--50'>
+                    <li>
+                        <a href='#' aria-label='Previous'>
+                            <i className='icon-west'></i>
+                        </a>
+                    </li>
+                    <li className='active'>
+                        <a href='#'>1</a>
+                    </li>
+                    <li>
+                        <a href='#'>2</a>
+                    </li>
+                    <li>
+                        <a href='#'>3</a>
+                    </li>
+                    <li className='more-next'>
+                        <a href='#'></a>
+                    </li>
+                    <li>
+                        <a href='#'>8</a>
+                    </li>
+                    <li>
+                        <a href='#' aria-label='Next'>
+                            <i className='icon-east'></i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </section>
+    );
+};
+
+export default ShopArea;
diff --git a/src/components/sign-in/index.jsx b/src/components/sign-in/index.tsx
similarity index 67%
rename from src/components/sign-in/index.jsx
rename to src/components/sign-in/index.tsx
index 44a2c00..7f9aefd 100644
--- a/src/components/sign-in/index.jsx
+++ b/src/components/sign-in/index.tsx
@@ -6,14 +6,14 @@ import SignInArea from './sign-in-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="My Account" subtitle="Account" />
-                <SignInArea/>
+                <BreadcrumbThree title='My Account' subtitle='Account' />
+                <SignInArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/sign-in/sign-in-area.jsx b/src/components/sign-in/sign-in-area.jsx
deleted file mode 100644
index 876546c..0000000
--- a/src/components/sign-in/sign-in-area.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import LoginForm from '../forms/login-form';
-import RegisterForm from '../forms/register-form';
-
-const SignInArea = () => {
-  return (
-        <section className="account-page-area section-gap-equal">
-            <div className="container position-relative">
-                <div className="row g-5 justify-content-center">
-                    <div className="col-lg-5">
-                        <div className="login-form-box">
-                            <h3 className="title">Sign in</h3>
-                            <p>Don’t have an account? <a href="#">Sign up</a></p>
-                            <LoginForm/>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-5">
-                        <div className="login-form-box registration-form">
-                            <h3 className="title">Registration</h3>
-                            <p>Already have an account? <a href="#">Sign in</a></p>
-                            <RegisterForm/>
-                        </div>
-                    </div>
-                </div>
-
-                <ul className="shape-group">
-                    <li className="shape-1 scene">
-                        <img src="/assets/images/about/shape-07.png" alt="Shape" />
-                    </li>
-                    <li className="shape-2 scene">
-                        <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                    </li>
-                    <li className="shape-3 scene">
-                        <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                    </li>
-                </ul>
-            </div>
-        </section>
-    )
-}
-
-export default SignInArea;
\ No newline at end of file
diff --git a/src/components/sign-in/sign-in-area.tsx b/src/components/sign-in/sign-in-area.tsx
new file mode 100644
index 0000000..7f08d8d
--- /dev/null
+++ b/src/components/sign-in/sign-in-area.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import LoginForm from '../forms/login-form';
+import RegisterForm from '../forms/register-form';
+
+const SignInArea = () => {
+    return (
+        <section className='account-page-area section-gap-equal'>
+            <div className='container position-relative'>
+                <div className='row g-5 justify-content-center'>
+                    <div className='col-lg-5'>
+                        <div className='login-form-box'>
+                            <h3 className='title'>Sign in</h3>
+                            <p>
+                                Don’t have an account? <a href='#'>Sign up</a>
+                            </p>
+                            <LoginForm />
+                        </div>
+                    </div>
+
+                    <div className='col-lg-5'>
+                        <div className='login-form-box registration-form'>
+                            <h3 className='title'>Registration</h3>
+                            <p>
+                                Already have an account? <a href='#'>Sign in</a>
+                            </p>
+                            <RegisterForm />
+                        </div>
+                    </div>
+                </div>
+
+                <ul className='shape-group'>
+                    <li className='shape-1 scene'>
+                        <picture>
+                            <img src='/assets/images/about/shape-07.png' alt='Shape' />
+                        </picture>
+                    </li>
+                    <li className='shape-2 scene'>
+                        <picture>
+                            <img src='/assets/images/about/shape-13.png' alt='Shape' />
+                        </picture>
+                    </li>
+                    <li className='shape-3 scene'>
+                        <picture>
+                            <img
+                                src='/assets/images/counterup/shape-02.png'
+                                alt='Shape'
+                            />
+                        </picture>
+                    </li>
+                </ul>
+            </div>
+        </section>
+    );
+};
+
+export default SignInArea;
diff --git a/src/components/social-share/index.jsx b/src/components/social-share/index.tsx
similarity index 57%
rename from src/components/social-share/index.jsx
rename to src/components/social-share/index.tsx
index 947625d..fba15ad 100644
--- a/src/components/social-share/index.jsx
+++ b/src/components/social-share/index.tsx
@@ -1,19 +1,21 @@
 import React from 'react';
 
 const social_share = [
-    { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook',},
-    { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter', },
-    { link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
+    { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+    { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+    { link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2' },
 ];
 
 export const SocialShare = () => {
     return (
         <>
             {social_share.map((social, i) => (
-                <li key={i}><a href={social.link} target={social.target ? social.target : ''}>
-                <i className={social.icon}></i>
-                </a></li>
+                <li key={i}>
+                    <a href={social.link} target={social.target ? social.target : ''}>
+                        <i className={social.icon}></i>
+                    </a>
+                </li>
             ))}
         </>
-    )
-}
+    );
+};
diff --git a/src/components/team-member/team-five.jsx b/src/components/team-member/team-five.jsx
deleted file mode 100644
index 049a1c8..0000000
--- a/src/components/team-member/team-five.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const TeamFive = ({ instructor }) => {
-    return (
-        <div className="edu-team-grid team-style-5">
-            <div className="inner">
-                <div className="thumbnail-wrap">
-                    <div className="thumbnail">
-                        <Link href={`/team-details/${instructor.id}`}>
-
-                            <img src={`/assets/images/team/team-02/${instructor.img}`} alt="team images" />
-
-                        </Link>
-                    </div>
-                    <ul className="team-share-info">
-                        {instructor.social_links.map((social, i) => (
-                            <li key={i}>
-                                <a href={social.link} target={social.target ? social.target : ''}>
-                                    <i className={social.icon}></i>
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-                <div className="content">
-                    <h5 className="title">
-                        <Link href={`/team-details/${instructor.id}`}>
-                            {instructor.name}
-                        </Link>
-                    </h5>
-                    <span className="designation">{instructor.title}</span>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default TeamFive;
\ No newline at end of file
diff --git a/src/components/team-member/team-five.tsx b/src/components/team-member/team-five.tsx
new file mode 100644
index 0000000..7c9fcf6
--- /dev/null
+++ b/src/components/team-member/team-five.tsx
@@ -0,0 +1,45 @@
+import Link from 'next/link';
+import React from 'react';
+
+const TeamFive = ({ instructor }) => {
+    return (
+        <div className='edu-team-grid team-style-5'>
+            <div className='inner'>
+                <div className='thumbnail-wrap'>
+                    <div className='thumbnail'>
+                        <Link href={`/team-details/${instructor.id}`}>
+                            <picture>
+                                <img
+                                    src={`/assets/images/team/team-02/${instructor.img}`}
+                                    alt='team images'
+                                />
+                            </picture>
+                        </Link>
+                    </div>
+                    <ul className='team-share-info'>
+                        {instructor.social_links.map((social, i) => (
+                            <li key={i}>
+                                <a
+                                    href={social.link}
+                                    target={social.target ? social.target : ''}
+                                >
+                                    <i className={social.icon}></i>
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                <div className='content'>
+                    <h5 className='title'>
+                        <Link href={`/team-details/${instructor.id}`}>
+                            {instructor.name}
+                        </Link>
+                    </h5>
+                    <span className='designation'>{instructor.title}</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamFive;
diff --git a/src/components/team-member/team-four.jsx b/src/components/team-member/team-four.jsx
deleted file mode 100644
index de0c9c7..0000000
--- a/src/components/team-member/team-four.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-
-const TeamFour = ({ instructor }) => {
-    return (
-        <div className="edu-team-grid team-style-4">
-            <div className="inner">
-                <div className="thumbnail-wrap">
-                    <div className="thumbnail">
-                        <a>
-                            <img src={`/assets/images/team/yoga-instructor/${instructor.img}`} alt="team images" />
-                        </a>
-                    </div>
-                    <ul className="team-share-info">
-                        {instructor.social_links.map((social, i) => (
-                            <li key={i}>
-                                <a href={social.link} target={social.target ? social.target : ''}>
-                                    <i className={social.icon}></i>
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-                <div className="content">
-                    <h5 className="title">
-                        <a>{instructor.name}</a>
-                    </h5>
-                    <span className="designation">{instructor.title}</span>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default TeamFour;
\ No newline at end of file
diff --git a/src/components/team-member/team-four.tsx b/src/components/team-member/team-four.tsx
new file mode 100644
index 0000000..cce0b2b
--- /dev/null
+++ b/src/components/team-member/team-four.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+const TeamFour = ({ instructor }) => {
+    return (
+        <div className='edu-team-grid team-style-4'>
+            <div className='inner'>
+                <div className='thumbnail-wrap'>
+                    <div className='thumbnail'>
+                        <a>
+                            <picture>
+                                <img
+                                    src={`/assets/images/team/yoga-instructor/${instructor.img}`}
+                                    alt='team images'
+                                />
+                            </picture>
+                        </a>
+                    </div>
+                    <ul className='team-share-info'>
+                        {instructor.social_links.map((social, i) => (
+                            <li key={i}>
+                                <a
+                                    href={social.link}
+                                    target={social.target ? social.target : ''}
+                                >
+                                    <i className={social.icon}></i>
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                <div className='content'>
+                    <h5 className='title'>
+                        <a>{instructor.name}</a>
+                    </h5>
+                    <span className='designation'>{instructor.title}</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamFour;
diff --git a/src/components/team-member/team-one.jsx b/src/components/team-member/team-one.jsx
deleted file mode 100644
index bc86886..0000000
--- a/src/components/team-member/team-one.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const TeamOne = ({ instructor, image_location_path='01' }) => {
-    return (
-        <div className="edu-team-grid team-style-1">
-            <div className="inner">
-                <div className="thumbnail-wrap">
-                    <div className="thumbnail">
-                        <Link href={`/team-details/${instructor.id}`}>
-
-                            <img src={`/assets/images/team/team-${image_location_path}/${instructor.img}`} alt="team images" />
-
-                        </Link>
-                    </div>
-                    <ul className="team-share-info">
-                        <li><a href="#"><i className="icon-share-alt"></i></a></li>
-                        {instructor.social_links.map((social, i) => (
-                            <li key={i}>
-                                <a href={social.link} target={social.target ? social.target : ''}>
-                                    <i className={social.icon}></i>
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-                <div className="content">
-                    <h5 className="title">
-                        <Link href={`/team-details/${instructor.id}`}>
-                            {instructor.name}
-                        </Link>
-                    </h5>
-                    <span className="designation">{instructor.title}</span>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default TeamOne;
\ No newline at end of file
diff --git a/src/components/team-member/team-one.tsx b/src/components/team-member/team-one.tsx
new file mode 100644
index 0000000..0cb118f
--- /dev/null
+++ b/src/components/team-member/team-one.tsx
@@ -0,0 +1,50 @@
+import Link from 'next/link';
+import React from 'react';
+
+const TeamOne = ({ instructor, image_location_path = '01' }) => {
+    return (
+        <div className='edu-team-grid team-style-1'>
+            <div className='inner'>
+                <div className='thumbnail-wrap'>
+                    <div className='thumbnail'>
+                        <Link href={`/team-details/${instructor.id}`}>
+                            <picture>
+                                <img
+                                    src={`/assets/images/team/team-${image_location_path}/${instructor.img}`}
+                                    alt='team images'
+                                />
+                            </picture>
+                        </Link>
+                    </div>
+                    <ul className='team-share-info'>
+                        <li>
+                            <a href='#'>
+                                <i className='icon-share-alt'></i>
+                            </a>
+                        </li>
+                        {instructor.social_links.map((social, i) => (
+                            <li key={i}>
+                                <a
+                                    href={social.link}
+                                    target={social.target ? social.target : ''}
+                                >
+                                    <i className={social.icon}></i>
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                <div className='content'>
+                    <h5 className='title'>
+                        <Link href={`/team-details/${instructor.id}`}>
+                            {instructor.name}
+                        </Link>
+                    </h5>
+                    <span className='designation'>{instructor.title}</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamOne;
diff --git a/src/components/team-member/team-three.jsx b/src/components/team-member/team-three.jsx
deleted file mode 100644
index 8a0f420..0000000
--- a/src/components/team-member/team-three.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const TeamThree = ({ instructor }) => {
-    return (
-        <div className="edu-team-grid team-style-3">
-            <div className="inner">
-                <div className="thumbnail-wrap">
-                    <div className="thumbnail">
-                        <Link href={`/team-details/${instructor.id}`}>
-
-                            <img src={`/assets/images/team/team-02/${instructor.img}`} alt="team images" />
-
-                        </Link>
-                    </div>
-                    <ul className="team-share-info">
-                        {instructor.social_links.map((social, i) => (
-                            <li key={i}>
-                                <a href={social.link} target={social.target ? social.target : ''}>
-                                    <i className={social.icon}></i>
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-                <div className="content">
-                    <h5 className="title">
-                        <Link href={`/team-details/${instructor.id}`}>
-                            {instructor.name}
-                        </Link>
-                    </h5>
-                    <span className="designation">{instructor.title}</span>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default TeamThree;
\ No newline at end of file
diff --git a/src/components/team-member/team-three.tsx b/src/components/team-member/team-three.tsx
new file mode 100644
index 0000000..458122f
--- /dev/null
+++ b/src/components/team-member/team-three.tsx
@@ -0,0 +1,45 @@
+import Link from 'next/link';
+import React from 'react';
+
+const TeamThree = ({ instructor }) => {
+    return (
+        <div className='edu-team-grid team-style-3'>
+            <div className='inner'>
+                <div className='thumbnail-wrap'>
+                    <div className='thumbnail'>
+                        <Link href={`/team-details/${instructor.id}`}>
+                            <picture>
+                                <img
+                                    src={`/assets/images/team/team-02/${instructor.img}`}
+                                    alt='team images'
+                                />
+                            </picture>
+                        </Link>
+                    </div>
+                    <ul className='team-share-info'>
+                        {instructor.social_links.map((social, i) => (
+                            <li key={i}>
+                                <a
+                                    href={social.link}
+                                    target={social.target ? social.target : ''}
+                                >
+                                    <i className={social.icon}></i>
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                <div className='content'>
+                    <h5 className='title'>
+                        <Link href={`/team-details/${instructor.id}`}>
+                            {instructor.name}
+                        </Link>
+                    </h5>
+                    <span className='designation'>{instructor.title}</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamThree;
diff --git a/src/components/team-member/team-two.jsx b/src/components/team-member/team-two.jsx
deleted file mode 100644
index bef5899..0000000
--- a/src/components/team-member/team-two.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const TeamTwo = ({ instructor, image_location_path='02' }) => {
-    return (
-        <div className="edu-team-grid team-style-2">
-            <div className="inner">
-                <div className="thumbnail-wrap">
-                    <div className="thumbnail">
-                        <Link href={`/team-details/${instructor.id}`}>
-
-                            <img src={`/assets/images/team/team-${image_location_path}/${instructor.img}`} alt="team images" />
-
-                        </Link>
-                    </div>
-                    <ul className="team-share-info">
-                        {instructor.social_links.map((social, i) => (
-                            <li key={i}>
-                                <a href={social.link} target={social.target ? social.target : ''}>
-                                    <i className={social.icon}></i>
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-                <div className="content">
-                    <h5 className="title">
-                        <Link href={`/team-details/${instructor.id}`}>
-                            {instructor.name}
-                        </Link>
-                    </h5>
-                    <span className="designation">{instructor.title}</span>
-                    <p>{instructor.sm_text}</p>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default TeamTwo;
\ No newline at end of file
diff --git a/src/components/team-member/team-two.tsx b/src/components/team-member/team-two.tsx
new file mode 100644
index 0000000..6cc6169
--- /dev/null
+++ b/src/components/team-member/team-two.tsx
@@ -0,0 +1,46 @@
+import Link from 'next/link';
+import React from 'react';
+
+const TeamTwo = ({ instructor, image_location_path = '02' }) => {
+    return (
+        <div className='edu-team-grid team-style-2'>
+            <div className='inner'>
+                <div className='thumbnail-wrap'>
+                    <div className='thumbnail'>
+                        <Link href={`/team-details/${instructor.id}`}>
+                            <picture>
+                                <img
+                                    src={`/assets/images/team/team-${image_location_path}/${instructor.img}`}
+                                    alt='team images'
+                                />
+                            </picture>
+                        </Link>
+                    </div>
+                    <ul className='team-share-info'>
+                        {instructor.social_links.map((social, i) => (
+                            <li key={i}>
+                                <a
+                                    href={social.link}
+                                    target={social.target ? social.target : ''}
+                                >
+                                    <i className={social.icon}></i>
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                <div className='content'>
+                    <h5 className='title'>
+                        <Link href={`/team-details/${instructor.id}`}>
+                            {instructor.name}
+                        </Link>
+                    </h5>
+                    <span className='designation'>{instructor.title}</span>
+                    <p>{instructor.sm_text}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamTwo;
diff --git a/src/components/teams/team-1/index.jsx b/src/components/teams/team-1/index.tsx
similarity index 59%
rename from src/components/teams/team-1/index.jsx
rename to src/components/teams/team-1/index.tsx
index 7bdf135..0330fc3 100644
--- a/src/components/teams/team-1/index.jsx
+++ b/src/components/teams/team-1/index.tsx
@@ -6,14 +6,17 @@ import TeamArea from './team-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <Breadcrumb title={'leadership Instruction'} current_page="Instructors 1" />
-                <TeamArea/>
+                <Breadcrumb
+                    title={'leadership Instruction'}
+                    current_page='Instructors 1'
+                />
+                <TeamArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/teams/team-1/team-area.jsx b/src/components/teams/team-1/team-area.jsx
deleted file mode 100644
index 8637d9b..0000000
--- a/src/components/teams/team-1/team-area.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { instructors_data } from '../../../data';
-import TeamTwo from "../../../components/team-member/team-two";
-
-const TeamArea = () => {
-    return (
-        <div className="edu-team-area team-area-2 edu-section-gap">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Instructors</span>
-                    <h2 className="title">Course Instructors</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-
-                <div className="row g-5">
-                    {instructors_data.slice(0,6).map((instructor) => {
-                        return (
-                            <div key={instructor.id} className="col-lg-4 col-md-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
-                                <TeamTwo instructor={instructor} />
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default TeamArea;
\ No newline at end of file
diff --git a/src/components/teams/team-1/team-area.tsx b/src/components/teams/team-1/team-area.tsx
new file mode 100644
index 0000000..e91bee5
--- /dev/null
+++ b/src/components/teams/team-1/team-area.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { instructors_data } from '../../../data';
+import TeamTwo from '../../../components/team-member/team-two';
+
+const TeamArea = () => {
+    return (
+        <div className='edu-team-area team-area-2 edu-section-gap'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Instructors</span>
+                    <h2 className='title'>Course Instructors</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+
+                <div className='row g-5'>
+                    {instructors_data.slice(0, 6).map(instructor => {
+                        return (
+                            <div
+                                key={instructor.id}
+                                className='col-lg-4 col-md-6'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <TeamTwo instructor={instructor} />
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamArea;
diff --git a/src/components/teams/team-2/index.jsx b/src/components/teams/team-2/index.tsx
similarity index 59%
rename from src/components/teams/team-2/index.jsx
rename to src/components/teams/team-2/index.tsx
index dca49c2..2640e31 100644
--- a/src/components/teams/team-2/index.jsx
+++ b/src/components/teams/team-2/index.tsx
@@ -6,14 +6,17 @@ import TeamArea from './team-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <Breadcrumb title={'leadership Instruction'} current_page="Instructors 2" />
-                <TeamArea/>
+                <Breadcrumb
+                    title={'leadership Instruction'}
+                    current_page='Instructors 2'
+                />
+                <TeamArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/teams/team-2/team-area.jsx b/src/components/teams/team-2/team-area.jsx
deleted file mode 100644
index 4df3976..0000000
--- a/src/components/teams/team-2/team-area.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { instructors_data } from '../../../data';
-import TeamOne from "../../../components/team-member/team-one";
-
-const TeamArea = () => {
-	return (
-		<div className="edu-team-area team-area-1 gap-tb-text">
-			<div className="container">
-				<div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-					<span className="pre-title">Instructors</span>
-					<h2 className="title">Course Instructors</h2>
-					<span className="shape-line"><i className="icon-19"></i></span>
-				</div>
-				<div className="row g-5">
-					{instructors_data.slice(0,8).map((instructor) => (
-						<div key={instructor.id} className="col-lg-3 col-sm-6 col-12 mb--10" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-							<TeamOne instructor={instructor} />
-						</div>
-					))}
-
-				</div>
-			</div>
-		</div>
-	)
-}
-
-export default TeamArea;
\ No newline at end of file
diff --git a/src/components/teams/team-2/team-area.tsx b/src/components/teams/team-2/team-area.tsx
new file mode 100644
index 0000000..ba55bb4
--- /dev/null
+++ b/src/components/teams/team-2/team-area.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { instructors_data } from '../../../data';
+import TeamOne from '../../../components/team-member/team-one';
+
+const TeamArea = () => {
+    return (
+        <div className='edu-team-area team-area-1 gap-tb-text'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Instructors</span>
+                    <h2 className='title'>Course Instructors</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {instructors_data.slice(0, 8).map(instructor => (
+                        <div
+                            key={instructor.id}
+                            className='col-lg-3 col-sm-6 col-12 mb--10'
+                            data-sal-delay='150'
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <TeamOne instructor={instructor} />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamArea;
diff --git a/src/components/teams/team-3/index.jsx b/src/components/teams/team-3/index.tsx
similarity index 59%
rename from src/components/teams/team-3/index.jsx
rename to src/components/teams/team-3/index.tsx
index 1692ed7..21fab87 100644
--- a/src/components/teams/team-3/index.jsx
+++ b/src/components/teams/team-3/index.tsx
@@ -6,14 +6,17 @@ import TeamArea from './team-area';
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <Breadcrumb title={'leadership Instruction'} current_page="Instructors 3" />
-                <TeamArea/>
+                <Breadcrumb
+                    title={'leadership Instruction'}
+                    current_page='Instructors 3'
+                />
+                <TeamArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/teams/team-3/team-area.jsx b/src/components/teams/team-3/team-area.jsx
deleted file mode 100644
index 3e8b584..0000000
--- a/src/components/teams/team-3/team-area.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { instructors_data } from '../../../data';
-import TeamThree from "../../../components/team-member/team-three";
-
-const TeamArea = () => {
-    return (
-        <div className="edu-team-area team-area-3 edu-section-gap">
-            <div className="container">
-                <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
-                    <span className="pre-title">Instructors</span>
-                    <h2 className="title">Course Instructors</h2>
-                    <span className="shape-line"><i className="icon-19"></i></span>
-                </div>
-                <div className="row g-5">
-                    {instructors_data.slice(0,6).map((instructor) => {
-                        return (
-                            <div key={instructor.id} className="col-lg-4 col-md-6" data-sal-delay="100" data-sal="slide-up"
-                            data-sal-duration="800">
-                                <TeamThree instructor={instructor} />
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default TeamArea;
\ No newline at end of file
diff --git a/src/components/teams/team-3/team-area.tsx b/src/components/teams/team-3/team-area.tsx
new file mode 100644
index 0000000..efc6285
--- /dev/null
+++ b/src/components/teams/team-3/team-area.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { instructors_data } from '../../../data';
+import TeamThree from '../../../components/team-member/team-three';
+
+const TeamArea = () => {
+    return (
+        <div className='edu-team-area team-area-3 edu-section-gap'>
+            <div className='container'>
+                <div
+                    className='section-title section-center'
+                    data-sal-delay='150'
+                    data-sal='slide-up'
+                    data-sal-duration='800'
+                >
+                    <span className='pre-title'>Instructors</span>
+                    <h2 className='title'>Course Instructors</h2>
+                    <span className='shape-line'>
+                        <i className='icon-19'></i>
+                    </span>
+                </div>
+                <div className='row g-5'>
+                    {instructors_data.slice(0, 6).map(instructor => {
+                        return (
+                            <div
+                                key={instructor.id}
+                                className='col-lg-4 col-md-6'
+                                data-sal-delay='100'
+                                data-sal='slide-up'
+                                data-sal-duration='800'
+                            >
+                                <TeamThree instructor={instructor} />
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamArea;
diff --git a/src/components/teams/team-details/course-area.jsx b/src/components/teams/team-details/course-area.jsx
deleted file mode 100644
index f05baf9..0000000
--- a/src/components/teams/team-details/course-area.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { course_data } from '../../../data';
-import CourseTypeOne from '../../course/course-type-one';
-
-const CourseArea = ( { name } ) => {
-    // fetching only specific courses where instructor name get matched
-    const courses = course_data.filter(course => course.instructor === name );
-    return (
-        <>
-            { courses.length > 0 &&
-                <div className="edu-course-area course-area-1 edu-section-gap bg-lighten01">
-                    <div className="container">
-                        <div className="section-title section-center" data-sal-delay="150" data-sal="slide-up" 
-                        data-sal-duration="800">
-                            <h2 className="title">My Popular Courses</h2>
-                        </div>
-                        
-                        <div className="row g-5">
-                            {courses.map((course) => {
-                                return (
-                                    <div className="col-md-6 col-xl-3" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800" key={course.id}>
-                                        <CourseTypeOne data={course} />
-                                    </div>
-                                )
-                            })}
-                        </div>
-                    </div>
-                </div>
-            }
-        </>
-    )
-}
-
-export default CourseArea;
\ No newline at end of file
diff --git a/src/components/teams/team-details/course-area.tsx b/src/components/teams/team-details/course-area.tsx
new file mode 100644
index 0000000..1dd9382
--- /dev/null
+++ b/src/components/teams/team-details/course-area.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { course_data } from '../../../data';
+import CourseTypeOne from '../../course/course-type-one';
+
+const CourseArea = ({ name }) => {
+    // fetching only specific courses where instructor name get matched
+    const courses = course_data.filter(course => course.instructor === name);
+    return (
+        <>
+            {courses.length > 0 && (
+                <div className='edu-course-area course-area-1 edu-section-gap bg-lighten01'>
+                    <div className='container'>
+                        <div
+                            className='section-title section-center'
+                            data-sal-delay='150'
+                            data-sal='slide-up'
+                            data-sal-duration='800'
+                        >
+                            <h2 className='title'>My Popular Courses</h2>
+                        </div>
+
+                        <div className='row g-5'>
+                            {courses.map(course => {
+                                return (
+                                    <div
+                                        className='col-md-6 col-xl-3'
+                                        data-sal-delay='150'
+                                        data-sal='slide-up'
+                                        data-sal-duration='800'
+                                        key={course.id}
+                                    >
+                                        <CourseTypeOne data={course} />
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default CourseArea;
diff --git a/src/components/teams/team-details/index.jsx b/src/components/teams/team-details/index.tsx
similarity index 59%
rename from src/components/teams/team-details/index.jsx
rename to src/components/teams/team-details/index.tsx
index a169f0c..66fa9d9 100644
--- a/src/components/teams/team-details/index.jsx
+++ b/src/components/teams/team-details/index.tsx
@@ -4,18 +4,21 @@ import BreadcrumbThree from '../../breadcrumb/breadcrumb-3';
 import CourseArea from './course-area';
 import TeamArea from './team-area';
 
-const index = ({team}) => {
+const index = ({ team }) => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Instructor Details" subtitle="Instructor Details" />
+                <BreadcrumbThree
+                    title='Instructor Details'
+                    subtitle='Instructor Details'
+                />
                 <TeamArea team={team} />
-                <CourseArea name={team.name}/>
+                <CourseArea name={team.name} />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/teams/team-details/team-area.jsx b/src/components/teams/team-details/team-area.jsx
deleted file mode 100644
index 87f8cf9..0000000
--- a/src/components/teams/team-details/team-area.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-
-const TeamArea = ({ team }) => {
-    return (
-        <div className="edu-team-details-area section-gap-equal">
-            <div className="container">
-                <div className="row row--40">
-                    <div className="col-lg-4">
-                        <div className="team-details-thumb">
-                            <div className="thumbnail">
-                                <img src={`/assets/images/team/team-02/${team.img}`} alt="team images" />
-                            </div>
-
-                            <ul className="social-share">
-                                <li><a href="#"><i className="icon-share-alt"></i></a></li>
-                                {team?.social_links?.map((social, i) => (
-                                    <li key={i}>
-                                        <a href={social.link} target={social.target ? social.target : ''}>
-                                            <i className={social.icon}></i>
-                                        </a>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-8">
-                        <div className="team-details-content">
-                            <div className="main-info">
-                                <span className="subtitle">Instructor</span>
-                                <h3 className="title">{team?.name}</h3>
-                                <span className="designation">{team?.title}</span>
-                                <ul className="team-meta">
-                                    <li><i className="icon-25"></i>20 Students</li>
-                                    <li>
-                                        <div className="rating">
-                                            <i className="icon-23"></i>
-                                            <i className="icon-23"></i>
-                                            <i className="icon-23"></i>
-                                            <i className="icon-23"></i>
-                                            <i className="icon-23"></i>
-                                        </div>
-                                        <span className="rating-count">(720 Rating)</span>
-                                    </li>
-                                </ul>
-                            </div>
-
-                            <div className="bio-describe">
-                                <h4 className="title">About Me</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur elit sed do eius mod tempor incidid labore dolore magna aliqua. enim ad minim eniam quis nostrud exercitation ullamco laboris nisi aliquip ex commodo consequat. duis aute irure dolor in repreed ut perspiciatis unde omnis iste natus error sit voluptat em acus antium.</p>
-                                <p>doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi arch itecto beatae vitae dicta sunt explicabo.</p>
-                            </div>
-
-                            <div className="contact-info">
-                                <h4 className="title">Contact Me</h4>
-                                <ul>
-                                    <li><span>Address:</span>North Helenavile, FV77 8WS</li>
-                                    <li><span>Email:</span><a href="mailto:edublink@example.com" target="_blank" rel="noreferrer">edublink@example.com</a></li>
-                                    <li><span>Phone:</span><a href="tel:+37(417)683-4409">+37 (417) 683-4409</a></li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default TeamArea;
\ No newline at end of file
diff --git a/src/components/teams/team-details/team-area.tsx b/src/components/teams/team-details/team-area.tsx
new file mode 100644
index 0000000..c68bc4d
--- /dev/null
+++ b/src/components/teams/team-details/team-area.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+
+const TeamArea = ({ team }) => {
+    return (
+        <div className='edu-team-details-area section-gap-equal'>
+            <div className='container'>
+                <div className='row row--40'>
+                    <div className='col-lg-4'>
+                        <div className='team-details-thumb'>
+                            <div className='thumbnail'>
+                                <picture>
+                                    <img
+                                        src={`/assets/images/team/team-02/${team.img}`}
+                                        alt='team images'
+                                    />
+                                </picture>
+                            </div>
+
+                            <ul className='social-share'>
+                                <li>
+                                    <a href='#'>
+                                        <i className='icon-share-alt'></i>
+                                    </a>
+                                </li>
+                                {team?.social_links?.map((social, i) => (
+                                    <li key={i}>
+                                        <a
+                                            href={social.link}
+                                            target={social.target ? social.target : ''}
+                                        >
+                                            <i className={social.icon}></i>
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className='col-lg-8'>
+                        <div className='team-details-content'>
+                            <div className='main-info'>
+                                <span className='subtitle'>Instructor</span>
+                                <h3 className='title'>{team?.name}</h3>
+                                <span className='designation'>{team?.title}</span>
+                                <ul className='team-meta'>
+                                    <li>
+                                        <i className='icon-25'></i>20 Students
+                                    </li>
+                                    <li>
+                                        <div className='rating'>
+                                            <i className='icon-23'></i>
+                                            <i className='icon-23'></i>
+                                            <i className='icon-23'></i>
+                                            <i className='icon-23'></i>
+                                            <i className='icon-23'></i>
+                                        </div>
+                                        <span className='rating-count'>(720 Rating)</span>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div className='bio-describe'>
+                                <h4 className='title'>About Me</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur elit sed do
+                                    eius mod tempor incidid labore dolore magna aliqua.
+                                    enim ad minim eniam quis nostrud exercitation ullamco
+                                    laboris nisi aliquip ex commodo consequat. duis aute
+                                    irure dolor in repreed ut perspiciatis unde omnis iste
+                                    natus error sit voluptat em acus antium.
+                                </p>
+                                <p>
+                                    doloremque laudantium totam rem aperiam, eaque ipsa
+                                    quae ab illo inventore veritatis et quasi arch itecto
+                                    beatae vitae dicta sunt explicabo.
+                                </p>
+                            </div>
+
+                            <div className='contact-info'>
+                                <h4 className='title'>Contact Me</h4>
+                                <ul>
+                                    <li>
+                                        <span>Address:</span>North Helenavile, FV77 8WS
+                                    </li>
+                                    <li>
+                                        <span>Email:</span>
+                                        <a
+                                            href='mailto:edublink@example.com'
+                                            target='_blank'
+                                            rel='noreferrer'
+                                        >
+                                            edublink@example.com
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <span>Phone:</span>
+                                        <a href='tel:+37(417)683-4409'>
+                                            +37 (417) 683-4409
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TeamArea;
diff --git a/src/components/terms-condition/condition-area.jsx b/src/components/terms-condition/condition-area.jsx
deleted file mode 100644
index 64f6377..0000000
--- a/src/components/terms-condition/condition-area.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import SidebarOne from '../common/sidebar/blog-sidebar-1';
-
-const ConditionArea = () => {
-  return (
-        <section className="privacy-policy-area terms-condition-area">
-            <div className="container">
-                <div className="row row--30">
-                    <div className="col-lg-8">
-                        <div className="privacy-policy terms-condition">
-                            <div className="text-block">
-                                <h3 className="title">Definitions of Basic Terms, Rights and Restriction:</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip commodo consequat. </p>
-                                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.</p>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">Basic Terms</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis aliquip commodo consequat aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
-                            </div>
-
-                            <div className="text-block">
-                                <h4 className="title">Rights & Restrictions</h4>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                                <ul>
-                                    <li>Members must be at least 18 years of age.</li>
-                                    <li>Members are granted a time-limited, non-exclusive, revocable, nontransferable, and non-sublicenseable right to access that portion of the online course corresponding to the purchase.</li>
-                                    <li>The portion of the online course corresponding to the purchase will be available to the Member as long as the course is maintained by the Company, which will be a minimum of one year after Member’s purchase.</li>
-                                    <li>The videos in the course are provided as a video stream and are not downloadable.</li>
-                                    <li>By agreeing to grant such access, the Company does not obligate itself to maintain the course, or to maintain it in its present form. </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-4">
-                        <SidebarOne />
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
-}
-
-export default ConditionArea;
\ No newline at end of file
diff --git a/src/components/terms-condition/condition-area.tsx b/src/components/terms-condition/condition-area.tsx
new file mode 100644
index 0000000..917cb68
--- /dev/null
+++ b/src/components/terms-condition/condition-area.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import SidebarOne from '../common/sidebar/blog-sidebar-1';
+
+const ConditionArea = () => {
+    return (
+        <section className='privacy-policy-area terms-condition-area'>
+            <div className='container'>
+                <div className='row row--30'>
+                    <div className='col-lg-8'>
+                        <div className='privacy-policy terms-condition'>
+                            <div className='text-block'>
+                                <h3 className='title'>
+                                    Definitions of Basic Terms, Rights and Restriction:
+                                </h3>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua. Ut enim ad minim veniam, quis
+                                    nostrud exercitation ullamco laboris nisi ut aliquip
+                                    commodo consequat.{' '}
+                                </p>
+                                <p>
+                                    Duis aute irure dolor in reprehenderit in voluptate
+                                    velit esse cillum dolore eu fugiat nulla pariatur.
+                                    Excepteur sint occaecat.
+                                </p>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>Basic Terms</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua. Ut enim ad minim veniam, quis
+                                    nostrud exercitation ullamco laboris nis aliquip
+                                    commodo consequat aute irure dolor in reprehenderit in
+                                    voluptate velit esse cillum dolore eu fugiat nulla
+                                    pariatur. Excepteur sint occaecat.{' '}
+                                </p>
+                            </div>
+
+                            <div className='text-block'>
+                                <h4 className='title'>Rights & Restrictions</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipisicing
+                                    elit, sed do eiusmod tempor incididunt ut labore et
+                                    dolore magna aliqua.
+                                </p>
+                                <ul>
+                                    <li>Members must be at least 18 years of age.</li>
+                                    <li>
+                                        Members are granted a time-limited, non-exclusive,
+                                        revocable, nontransferable, and non-sublicenseable
+                                        right to access that portion of the online course
+                                        corresponding to the purchase.
+                                    </li>
+                                    <li>
+                                        The portion of the online course corresponding to
+                                        the purchase will be available to the Member as
+                                        long as the course is maintained by the Company,
+                                        which will be a minimum of one year after Member’s
+                                        purchase.
+                                    </li>
+                                    <li>
+                                        The videos in the course are provided as a video
+                                        stream and are not downloadable.
+                                    </li>
+                                    <li>
+                                        By agreeing to grant such access, the Company does
+                                        not obligate itself to maintain the course, or to
+                                        maintain it in its present form.{' '}
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='col-lg-4'>
+                        <SidebarOne />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ConditionArea;
diff --git a/src/components/terms-condition/index.jsx b/src/components/terms-condition/index.tsx
similarity index 65%
rename from src/components/terms-condition/index.jsx
rename to src/components/terms-condition/index.tsx
index d46ebec..ec3728e 100644
--- a/src/components/terms-condition/index.jsx
+++ b/src/components/terms-condition/index.tsx
@@ -3,18 +3,17 @@ import { Footer, Header } from '../../layout';
 import BreadcrumbThree from '../breadcrumb/breadcrumb-3';
 import ConditionArea from './condition-area';
 
-
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Terms & Condition" subtitle="Terms & Condition" />
-                <ConditionArea/>
+                <BreadcrumbThree title='Terms & Condition' subtitle='Terms & Condition' />
+                <ConditionArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/wishlist/index.jsx b/src/components/wishlist/index.tsx
similarity index 66%
rename from src/components/wishlist/index.jsx
rename to src/components/wishlist/index.tsx
index 83a86a4..60cac18 100644
--- a/src/components/wishlist/index.jsx
+++ b/src/components/wishlist/index.tsx
@@ -3,18 +3,17 @@ import { Footer, Header } from '../../layout';
 import BreadcrumbThree from '../breadcrumb/breadcrumb-3';
 import WishlistArea from './wishlist-area';
 
-
 const index = () => {
     return (
         <div className='sticky-header'>
-            <div id="main-wrapper" className="main-wrapper">
+            <div id='main-wrapper' className='main-wrapper'>
                 <Header no_top_bar={true} />
-                <BreadcrumbThree title="Wishlist Page" subtitle="Wishlist Page" />
-                <WishlistArea/>
+                <BreadcrumbThree title='Wishlist Page' subtitle='Wishlist Page' />
+                <WishlistArea />
                 <Footer style_2={'footer-dark bg-image footer-style-2'} />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default index;
\ No newline at end of file
+export default index;
diff --git a/src/components/wishlist/single-wishlist.jsx b/src/components/wishlist/single-wishlist.jsx
deleted file mode 100644
index 3165dd3..0000000
--- a/src/components/wishlist/single-wishlist.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { cart_course } from '../../redux/features/cart-slice';
-import { remove_wishlist_product } from '../../redux/features/wishlist-slice';
-
-const SingleWishlist = ({ item }) => {
-    const dispatch = useDispatch();
-    const {cartCourses} = useSelector(state => state.cart);
-    // handle add to cart
-    const handleAddToCart = (course) => {
-        dispatch(cart_course(course))
-    }
-
-    return (
-        <tr>
-            <td className="product-remove">
-                <a style={{ cursor: 'pointer' }} onClick={() => dispatch(remove_wishlist_product(item))}
-                className="remove-wishlist">
-                    <i className="icon-73"></i>
-                </a>
-            </td>
-            <td className="product-thumbnail">
-                <Link href={`/course-details/${item.id}`}>
-
-                    <img src={item.img} alt="Books" />
-
-                </Link>
-            </td>
-            <td className="product-title">
-                <Link href={`/course-details/${item.id}`}>
-                    {item.title}
-                </Link>
-            </td>
-            <td className="product-price" data-title="Price">
-                <span className="currency-symbol">$</span>{item.price}
-            </td>
-            <td className="product-status" data-title="Stock"> In Stock</td>
-            <td className="product-add-cart" onClick={() => handleAddToCart(item)}>
-                <a style={{ cursor: 'pointer' }} className="edu-btn btn-medium">
-                    {cartCourses.some(course => course.id === item.id) ? 'Added to cart' : 'Add to cart'}
-                </a>
-            </td>
-        </tr>
-    );
-}
-
-export default SingleWishlist;
\ No newline at end of file
diff --git a/src/components/wishlist/single-wishlist.tsx b/src/components/wishlist/single-wishlist.tsx
new file mode 100644
index 0000000..1451fb8
--- /dev/null
+++ b/src/components/wishlist/single-wishlist.tsx
@@ -0,0 +1,56 @@
+import Link from 'next/link';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { cart_course } from '../../redux/features/cart-slice';
+import { remove_wishlist_product } from '../../redux/features/wishlist-slice';
+import { AppState } from '../../redux/store';
+
+const SingleWishlist = ({ item }) => {
+    const dispatch = useDispatch();
+    const { cartCourses } = useSelector((state: AppState) => state.cart);
+    // handle add to cart
+    const handleAddToCart = course => {
+        dispatch(cart_course(course));
+    };
+
+    return (
+        <tr>
+            <td className='product-remove'>
+                <a
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => dispatch(remove_wishlist_product(item))}
+                    className='remove-wishlist'
+                >
+                    <i className='icon-73'></i>
+                </a>
+            </td>
+            <td className='product-thumbnail'>
+                <Link href={`/course-details/${item.id}`}>
+                    <picture>
+                        <img src={item.img} alt='Books' />
+                    </picture>
+                </Link>
+            </td>
+            <td className='product-title'>
+                <Link href={`/course-details/${item.id}`}>{item.title}</Link>
+            </td>
+            <td className='product-price' data-title='Price'>
+                <span className='currency-symbol'>$</span>
+                {item.price}
+            </td>
+            <td className='product-status' data-title='Stock'>
+                {' '}
+                In Stock
+            </td>
+            <td className='product-add-cart' onClick={() => handleAddToCart(item)}>
+                <a style={{ cursor: 'pointer' }} className='edu-btn btn-medium'>
+                    {cartCourses.some(course => course.id === item.id)
+                        ? 'Added to cart'
+                        : 'Add to cart'}
+                </a>
+            </td>
+        </tr>
+    );
+};
+
+export default SingleWishlist;
diff --git a/src/components/wishlist/wishlist-area.jsx b/src/components/wishlist/wishlist-area.jsx
deleted file mode 100644
index 621a3a4..0000000
--- a/src/components/wishlist/wishlist-area.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { useSelector } from 'react-redux';
-import SingleWishlist from './single-wishlist';
-
-const WishlistArea = () => {
-    const { wishlist } = useSelector(state => state.wishlist);
-    return (
-        <section className="cart-page-area edu-section-gap">
-            {wishlist.length === 0 && 
-                <div className="container">
-                    <div className="text-center">
-                        <h3>No Wishlist Product</h3>
-                        <Link href="/course-style-1" className="edu-btn btn-medium">
-                        Return to courses
-                        </Link>
-                    </div>
-                </div>
-            }
-            {wishlist.length > 0 && 
-                <div className="container">
-                    <div className="table-responsive">
-                        <table className="table cart-table wishlist-table">
-                            <thead>
-                                <tr>
-                                    <th scope="col" className="product-remove"></th>
-                                    <th scope="col" className="product-thumbnail"></th>
-                                    <th scope="col" className="product-title">Product Name</th>
-                                    <th scope="col" className="product-price">Price</th>
-                                    <th scope="col" className="product-status">Stock Status</th>
-                                    <th scope="col" className="product-add-cart"></th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {wishlist.map((item) => <SingleWishlist key={item.id} item={item} />)}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            }
-        </section>
-    );
-}
-
-export default WishlistArea;
\ No newline at end of file
diff --git a/src/components/wishlist/wishlist-area.tsx b/src/components/wishlist/wishlist-area.tsx
new file mode 100644
index 0000000..93c56c5
--- /dev/null
+++ b/src/components/wishlist/wishlist-area.tsx
@@ -0,0 +1,54 @@
+import Link from 'next/link';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import SingleWishlist from './single-wishlist';
+import { AppState } from '../../redux/store';
+
+const WishlistArea = () => {
+    const { wishlist } = useSelector((state: AppState) => state.wishlist);
+    return (
+        <section className='cart-page-area edu-section-gap'>
+            {wishlist.length === 0 && (
+                <div className='container'>
+                    <div className='text-center'>
+                        <h3>No Wishlist Product</h3>
+                        <Link href='/course-style-1' className='edu-btn btn-medium'>
+                            Return to courses
+                        </Link>
+                    </div>
+                </div>
+            )}
+            {wishlist.length > 0 && (
+                <div className='container'>
+                    <div className='table-responsive'>
+                        <table className='table cart-table wishlist-table'>
+                            <thead>
+                                <tr>
+                                    <th scope='col' className='product-remove'></th>
+                                    <th scope='col' className='product-thumbnail'></th>
+                                    <th scope='col' className='product-title'>
+                                        Product Name
+                                    </th>
+                                    <th scope='col' className='product-price'>
+                                        Price
+                                    </th>
+                                    <th scope='col' className='product-status'>
+                                        Stock Status
+                                    </th>
+                                    <th scope='col' className='product-add-cart'></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {wishlist.map(item => (
+                                    <SingleWishlist key={item.id} item={item} />
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default WishlistArea;
diff --git a/src/components/writing-evaluation/EvaluationResponse.tsx b/src/components/writing-evaluation/EvaluationResponse.tsx
new file mode 100644
index 0000000..60d94e6
--- /dev/null
+++ b/src/components/writing-evaluation/EvaluationResponse.tsx
@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { Evaluation } from '../../redux/features/api.types';
+import Sentence, { SentenceViewType } from './Sentence';
+
+type EvaluationResponseProps = {
+    evaluation: Evaluation.EvaluateResponse;
+};
+
+export default function EvaluationResponse({ evaluation }: EvaluationResponseProps) {
+    const [viewType, setViewType] = useState<SentenceViewType>('inline');
+
+    return (
+        <>
+            <div>
+                <button onClick={() => setViewType('student')}>Student Essay</button>
+                <button onClick={() => setViewType('inline')}>Inline Corrections</button>
+                <button onClick={() => setViewType('corrected')}>Corrected Essay</button>
+            </div>
+            <p>
+                {evaluation.operations.map((d, i) => (
+                    <Sentence key={i} data={d} index={i} viewType={viewType} />
+                ))}
+            </p>
+        </>
+    );
+}
diff --git a/src/components/writing-evaluation/FeedbackResponse.tsx b/src/components/writing-evaluation/FeedbackResponse.tsx
new file mode 100644
index 0000000..7e34c2c
--- /dev/null
+++ b/src/components/writing-evaluation/FeedbackResponse.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+type FeedbackResponseProps = {
+    feedback: Record<string, string>;
+};
+
+export default function FeedbackResponse({ feedback }: FeedbackResponseProps) {
+    const tabs = Object.keys(feedback);
+    const [activeTab, setActiveTab] = useState(tabs[0]);
+
+    return (
+        <div className='feedback'>
+            <div className='tab-wrapper'>
+                <div className='tabs'>
+                    {tabs.map(title => (
+                        <button
+                            key={title}
+                            className='tab-link'
+                            onClick={() => setActiveTab(title)}
+                        >
+                            {title}
+                        </button>
+                    ))}
+                </div>
+                <div className='tab-content'>
+                    {Object.entries(feedback).map(([title, content]) => (
+                        <div
+                            key={title}
+                            className={'tab' + (title === activeTab ? ' active' : '')}
+                        >
+                            <h5>{title}</h5>
+                            <p>{content}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/writing-evaluation/Sentence.tsx b/src/components/writing-evaluation/Sentence.tsx
new file mode 100644
index 0000000..ce8fe93
--- /dev/null
+++ b/src/components/writing-evaluation/Sentence.tsx
@@ -0,0 +1,21 @@
+import { Evaluation } from '../../redux/features/api.types';
+import SentenceFragment from './SentenceFragment';
+
+export type SentenceData = Evaluation.SentenceData;
+export type SentenceViewType = 'student' | 'corrected' | 'inline';
+
+type SentenceProps = {
+    index: number;
+    data: SentenceData;
+    viewType: SentenceViewType;
+};
+
+export default function Sentence({ index, data, viewType }: SentenceProps) {
+    return (
+        <span className={`s${index}`}>
+            {data.map((d, i) => (
+                <SentenceFragment key={i} viewType={viewType} {...d} />
+            ))}
+        </span>
+    );
+}
diff --git a/src/components/writing-evaluation/SentenceFragment.tsx b/src/components/writing-evaluation/SentenceFragment.tsx
new file mode 100644
index 0000000..cca67e9
--- /dev/null
+++ b/src/components/writing-evaluation/SentenceFragment.tsx
@@ -0,0 +1,32 @@
+import { Evaluation } from '../../redux/features/api.types';
+import { SentenceViewType } from './Sentence';
+
+type SentenceFragmentProps = Evaluation.SentenceFragmentData & {
+    viewType: SentenceViewType;
+};
+
+export default function SentenceFragment({
+    op,
+    word,
+    replace,
+    viewType,
+}: SentenceFragmentProps) {
+    if (!replace) {
+        if (viewType === 'student' && op === 'addition') {
+            return null;
+        }
+
+        if (viewType === 'corrected' && op === 'deletion') {
+            return null;
+        }
+
+        return <span className={op}>{word}</span>;
+    }
+
+    return (
+        <>
+            {viewType !== 'corrected' && <span className='incorrect'>{word}</span>}
+            {viewType !== 'student' && <span className='correct'>{replace}</span>}
+        </>
+    );
+}
diff --git a/src/components/writing-evaluation/Timer.tsx b/src/components/writing-evaluation/Timer.tsx
new file mode 100644
index 0000000..02f553d
--- /dev/null
+++ b/src/components/writing-evaluation/Timer.tsx
@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+export default function Timer() {
+    const [seconds, setSeconds] = useState<number>(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => setSeconds(s => s + 1), 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return <span className='timer'>{seconds}</span>;
+}
diff --git a/src/contexts/mouse-move-context.jsx b/src/contexts/mouse-move-context.jsx
deleted file mode 100644
index a9c73ec..0000000
--- a/src/contexts/mouse-move-context.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { createContext, useCallback, useContext, useMemo, useState, useEffect } from 'react';
-export const MouseMoveContext = createContext( {} );
-
-export const MouseMoveProvider = ( { children } ) => {
-    const [currentPosition, setCurrentPosition] = useState( { x: 0, y: 0 } );
-    const whileMouseMove = useCallback( ( e ) => {
-        setCurrentPosition( {
-            x: e.clientX - window.innerWidth / 2,
-            y: e.clientY - window.innerHeight / 2
-        } );
-    }, [] );
-
-    const mouseDirection = useMemo( () => {
-        return ( main = 20 ) => ( {
-            x: currentPosition.x / main,
-            y: currentPosition.y / main
-        } )
-    }, [currentPosition] );
-
-    const mouseReverse = useMemo( () => {
-        return ( main = 20 ) => ( {
-            x: ( currentPosition.x / main ) * -1,
-            y: ( currentPosition.y / main ) * -1
-        } );
-    }, [currentPosition] );
-
-    useEffect( () => {
-        window.addEventListener( 'mousemove', whileMouseMove );
-        return () => {
-            window.removeEventListener( 'mousemove', whileMouseMove );
-        }
-    }, [whileMouseMove] );
-
-    const param = useMemo(
-        () => ( {
-            mouseDirection,
-            mouseReverse
-        } ),
-        [mouseDirection, mouseReverse]
-    );
-
-    return (
-        <MouseMoveContext.Provider value={ param }>
-            { children }
-        </MouseMoveContext.Provider>
-    )
-};
-
-export const useMouseMoveUI = () => useContext( MouseMoveContext );
\ No newline at end of file
diff --git a/src/contexts/mouse-move-context.tsx b/src/contexts/mouse-move-context.tsx
new file mode 100644
index 0000000..2f7cb6b
--- /dev/null
+++ b/src/contexts/mouse-move-context.tsx
@@ -0,0 +1,74 @@
+import {
+    createContext,
+    useCallback,
+    useContext,
+    useMemo,
+    useState,
+    useEffect,
+    ReactNode,
+} from 'react';
+
+type MouseMoveProviderProps = {
+    children: ReactNode;
+};
+
+type MouseMoveState = {
+    mouseDirection: (main?: number) => {
+        x: number;
+        y: number;
+    };
+    mouseReverse: (main?: number) => {
+        x: number;
+        y: number;
+    };
+};
+
+export const MouseMoveContext = createContext<MouseMoveState>({
+    mouseDirection: _ => ({ x: 0, y: 0 }),
+    mouseReverse: _ => ({ x: 0, y: 0 }),
+});
+
+export const MouseMoveProvider = ({ children }: MouseMoveProviderProps) => {
+    const [currentPosition, setCurrentPosition] = useState({ x: 0, y: 0 });
+    const whileMouseMove = useCallback(e => {
+        setCurrentPosition({
+            x: e.clientX - window.innerWidth / 2,
+            y: e.clientY - window.innerHeight / 2,
+        });
+    }, []);
+
+    const mouseDirection = useMemo(() => {
+        return (main = 20) => ({
+            x: currentPosition.x / main,
+            y: currentPosition.y / main,
+        });
+    }, [currentPosition]);
+
+    const mouseReverse = useMemo(() => {
+        return (main = 20) => ({
+            x: (currentPosition.x / main) * -1,
+            y: (currentPosition.y / main) * -1,
+        });
+    }, [currentPosition]);
+
+    useEffect(() => {
+        window.addEventListener('mousemove', whileMouseMove);
+        return () => {
+            window.removeEventListener('mousemove', whileMouseMove);
+        };
+    }, [whileMouseMove]);
+
+    const param = useMemo(
+        () => ({
+            mouseDirection,
+            mouseReverse,
+        }),
+        [mouseDirection, mouseReverse]
+    );
+
+    return (
+        <MouseMoveContext.Provider value={param}>{children}</MouseMoveContext.Provider>
+    );
+};
+
+export const useMouseMoveUI = () => useContext(MouseMoveContext);
diff --git a/src/data-tstprep/blog-data.js b/src/data-tstprep/blog-data.js
deleted file mode 100644
index f9e48bf..0000000
--- a/src/data-tstprep/blog-data.js
+++ /dev/null
@@ -1,422 +0,0 @@
-const blog_data = [
-  {
-    id: 1,
-    img: '/assets/images/blog/blog-01.jpg',
-    category: 'ONLINE',
-    title: 'Become a Better Blogger: Content Planning',
-    date: "Oct 10, 2022",
-    comment: 9,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    delay:'100',
-    home_1:true,
-  },
-  {
-    id: 2,
-    img: '/assets/images/blog/blog-02.jpg',
-    category: 'LECTURE',
-    title: 'How to Keep Workouts Fresh in the Morning',
-    date: "Jan 10, 2022",
-    comment: 15,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
-    delay:'200',
-    home_1:true,
-  },
-  {
-    id: 3,
-    img: '/assets/images/blog/blog-03.jpg',
-    category: 'BUSINESS',
-    title: 'Four Ways to Keep Your Workout Routine Fresh',
-    date: "Feb 10, 2021",
-    comment: 12,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
-    delay:'300',
-    home_1:true,
-  },
-  // home 4
-  {
-    id: 4,
-    img: '/assets/images/blog/blog-04.jpg',
-    category: 'ONLINE',
-    title: 'Eco-Education in Our Lives: We Can Change the Future',
-    date: "JAN 10 2021",
-    comment: 18,
-    sm_desc: 'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
-    author:'Edward',
-    large:true,
-    home_4:true,
-  },
-  {
-    id: 5,
-    img: '/assets/images/blog/blog-05.jpg',
-    category: 'LECTURE',
-    title: 'Qualification for Students’ Satisfaction Rate',
-    date: "SEP 10 2021",
-    comment: 14,
-    sm_desc: 'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
-    author:'Edward',
-    home_4:true,
-  },
-  {
-    id: 6,
-    img: '/assets/images/blog/blog-06.jpg',
-    category: 'LECTURE',
-    title: 'Instructional Design and Adult Learners',
-    date: "SEP 18 2021",
-    comment: 9,
-    sm_desc: 'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
-    author:'Edward',
-    home_4:true,
-  },
-  {
-    id: 7,
-    img: '/assets/images/blog/blog-10.jpg',
-    category: 'LECTURE',
-    title: 'Join ATD 2021 International Conference & EXPO',
-    date: "SEP 25 2021",
-    comment: 16,
-    sm_desc: 'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
-    author:'Edward',
-    home_4:true,
-  },
-  // home 5
-  {
-    id: 8,
-    img: '/assets/images/blog/blog-11.jpg',
-    category: 'ONLINE',
-    title: 'Become a Better Blogger: Content Planning',
-    date: "Oct 10, 2022",
-    comment: 10,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    author:'Edward',
-    kitchen:true,
-  },
-  {
-    id: 9,
-    img: '/assets/images/blog/blog-12.jpg',
-    category: 'LECTURE',
-    title: 'Fresh Inspiration For March And A Smashing',
-    date: "Oct 15, 2022",
-    comment: 12,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
-    author:'Edward',
-    kitchen:true,
-  },
-  {
-    id: 10,
-    img: '/assets/images/blog/blog-13.jpg',
-    category: 'BUSINESS',
-    title: 'How to Developers Taking the Guess Work',
-    date: "Oct 20, 2022",
-    comment: 15,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
-    author:'Edward',
-    kitchen:true,
-  },
-  // kindergarten
-  {
-    id: 11,
-    img: '/assets/images/blog/blog-07.jpg',
-    category: 'ONLINE',
-    title: 'Do You Play Well With Other Children?',
-    date: "Nov 20, 2022",
-    comment: 10,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    author:'Edward',
-    kindergarten_blog:true,
-  },
-  {
-    id: 12,
-    img: '/assets/images/blog/blog-08.jpg',
-    category: 'HISTORY',
-    title: 'Early History of the United States',
-    date: "Dec 20, 2022",
-    comment: 12,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    author:'Edward',
-    kindergarten_blog:true,
-  },
-  {
-    id: 13,
-    img: '/assets/images/blog/blog-09.jpg',
-    category: 'BASEBALL',
-    title: 'What Collecting Baseball Cards Taught Me',
-    date: "Feb 20, 2022",
-    comment: 15,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    author:'Edward',
-    kindergarten_blog:true,
-  },
-  // modern schooling
-  {
-    id: 14,
-    img: '/assets/images/blog/blog-32.jpg',
-    category: 'ONLINE',
-    title: 'Good Things are Happening Creative Learning',
-    date: "Oct 20, 2022",
-    comment: 14,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
-    author:'Edward',
-    delay:'100',
-    modern_schooling_blog:true,
-  },
-  {
-    id: 15,
-    img: '/assets/images/blog/blog-33.jpg',
-    category: 'LECTURE',
-    title: 'Creating a Community of Diverse Learners',
-    date: "Oct 15, 2022",
-    comment: 14,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
-    author:'Edward',
-    delay:'200',
-    modern_schooling_blog:true,
-  },
-  {
-    id: 16,
-    img: '/assets/images/blog/blog-34.jpg',
-    category: 'BUSINESS',
-    title: 'Changing Lives and Giving Choices For Everyone',
-    date: "Oct 23, 2022",
-    comment: 19,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
-    author:'Edward',
-    delay:'300',
-    modern_schooling_blog:true,
-  },
-  {
-    id: 17,
-    img: '/assets/images/blog/blog-35.jpg',
-    category: 'BUSINESS',
-    title: 'An Excellent Foundation for Future Success',
-    date: "Oct 30, 2022",
-    comment: 20,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
-    author:'Edward',
-    delay:'300',
-    modern_schooling_blog:true,
-  },
-
-  // blog standard
-  {
-    id:18,
-    img:'/assets/images/blog/blog-14.jpg',
-    category:'Arts & Gallery',
-    title:'4 Learning Management System Design Tips For Better eLearning',
-    date:'Oct 10, 2022',
-    comment:'09',
-    desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
-    blog_standard:true,
-  },
-  {
-    id:19,
-    video:true,
-    img:'/assets/images/blog/blog-15.jpg',
-    category:'Online',
-    title:'Fresh Inspiration For March And A Smashing Winner 2022',
-    date:'Oct 15, 2022',
-    comment:'10',
-    desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
-    blog_standard:true,
-  },
-  {
-    id:20,
-    slider:true,
-    images:[
-      '/assets/images/blog/blog-16_1.jpg',
-      '/assets/images/blog/blog-16_2.jpg',
-      '/assets/images/blog/blog-16_3.jpg',
-    ],
-    category:'Education',
-    title:'How to Developers Taking the Guess Work Generation of Business',
-    date:'Oct 18, 2022',
-    comment:'12',
-    desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
-    blog_standard:true,
-  },
-  {
-    id:21,
-    img:'/assets/images/blog/blog-17.jpg',
-    category:'Developer',
-    title:'How to Become Computer Working Days Software Engineer?',
-    date:'Oct 20, 2022',
-    comment:'15',
-    desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
-    blog_standard:true,
-  },
-  {
-    id:22,
-    img:'/assets/images/blog/blog-18.jpg',
-    category:'Business',
-    title:'Ten Benefits Of Rentals That May Change Your Perspective',
-    date:'Jan 20, 2022',
-    comment:'18',
-    desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
-    blog_standard:true,
-  },
-
-  // blog masonry
-  {
-    id:23,
-    img:'/assets/images/blog/blog-01.jpg',
-    category:'ONLINE',
-    title:'Become a Better Blogger: Content Planning',
-    date:'Sep 20, 2022',
-    comment:'08',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    blog_masonry:true,
-  },
-  {
-    id:24,
-    img:'/assets/images/blog/blog-02.jpg',
-    category:'Lecture',
-    title:'Fresh Inspiration For March And A',
-    date:'Sep 15, 2022',
-    comment:'10',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
-    blog_masonry:true,
-  },
-  {
-    id:25,
-    img:'/assets/images/blog/blog-03.jpg',
-    category:'Business',
-    title:'How to Developers Taking the Guess Work',
-    date:'Sep 17, 2022',
-    comment:'12',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
-    blog_masonry:true,
-  },
-  {
-    id:26,
-    img:'/assets/images/blog/blog-19.jpg',
-    category:'Business',
-    title:'How to Become Computer Working Days',
-    date:'Oct 17, 2022',
-    comment:'15',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore ad dolore magna aliqua enim mini veniam quis nostrud exercitation.ullamco laboris.',
-    blog_masonry:true,
-  },
-  {
-    id:27,
-    img:'/assets/images/blog/blog-21.jpg',
-    category:'Lecture',
-    title:'Designing an Online Course from',
-    date:'Nov 15, 2022',
-    comment:'20',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
-    blog_masonry:true,
-  },
-  {
-    id:28,
-    img:'/assets/images/blog/blog-20.jpg',
-    category:'Online',
-    title:'Ten Benefits Of Rentals That May Change',
-    date:'Nov 20, 2022',
-    comment:'13',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    blog_masonry:true,
-  },
-  {
-    id:29,
-    img:'/assets/images/blog/blog-23.jpg',
-    category:'Business',
-    title:'How to Keep Workouts Fresh in the',
-    date:'Nov 27, 2022',
-    comment:'16',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore ad dolore magna aliqua enim mini veniam quis nostrud exercitation.ullamco laboris.',
-    blog_masonry:true,
-  },
-  {
-    id:30,
-    img:'/assets/images/blog/blog-24.jpg',
-    category:'Online',
-    title:'Become a Better Blogger: Content Planning',
-    date:'Nov 29, 2022',
-    comment:'22',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    blog_masonry:true,
-  },
-  {
-    id:31,
-    img:'/assets/images/blog/blog-22.jpg',
-    category:'Lecture',
-    title:'Unveiling the Secrets of Online Teaching',
-    date:'Nov 30, 2022',
-    comment:'18',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
-    blog_masonry:true,
-  },
-
-  // list blog 
-  {
-    id:32,
-    img:'/assets/images/blog/blog-25.jpg',
-    category:'Business',
-    title:'4 Learning Management System Design Tips',
-    date:'Sep 17, 2022',
-    comment:'12',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:33,
-    img:'/assets/images/blog/blog-26.jpg',
-    category:'Business',
-    title:'How to Developers Taking the Guess Work',
-    date:'Oct 17, 2022',
-    comment:'15',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:34,
-    img:'/assets/images/blog/blog-27.jpg',
-    category:'Lecture',
-    title:'Ten Benefits Of Rentals That May Change Your',
-    date:'Nov 15, 2022',
-    comment:'20',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:35,
-    img:'/assets/images/blog/blog-28.jpg',
-    category:'Online',
-    title:'Fresh Inspiration For March And A Smashing',
-    date:'Nov 20, 2022',
-    comment:'13',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:36,
-    img:'/assets/images/blog/blog-29.jpg',
-    category:'Business',
-    title:'Fresh Inspiration For March And A Smashing',
-    date:'Nov 27, 2022',
-    comment:'16',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:37,
-    img:'/assets/images/blog/blog-30.jpg',
-    category:'Online',
-    title:'How to Developers Taking the Guess Work',
-    date:'Nov 29, 2022',
-    comment:'22',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:38,
-    img:'/assets/images/blog/blog-31.jpg',
-    category:'Lecture',
-    title:'Ten Benefits Of Rentals That May Change',
-    date:'Nov 30, 2022',
-    comment:'18',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-]
-
-export default blog_data;
\ No newline at end of file
diff --git a/src/data-tstprep/blog-data.ts b/src/data-tstprep/blog-data.ts
new file mode 100644
index 0000000..25ba122
--- /dev/null
+++ b/src/data-tstprep/blog-data.ts
@@ -0,0 +1,430 @@
+const blog_data = [
+    {
+        id: 1,
+        img: '/assets/images/blog/blog-01.jpg',
+        category: 'ONLINE',
+        title: 'Become a Better Blogger: Content Planning',
+        date: 'Oct 10, 2022',
+        comment: 9,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        delay: '100',
+        home_1: true,
+    },
+    {
+        id: 2,
+        img: '/assets/images/blog/blog-02.jpg',
+        category: 'LECTURE',
+        title: 'How to Keep Workouts Fresh in the Morning',
+        date: 'Jan 10, 2022',
+        comment: 15,
+        sm_desc:
+            'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
+        delay: '200',
+        home_1: true,
+    },
+    {
+        id: 3,
+        img: '/assets/images/blog/blog-03.jpg',
+        category: 'BUSINESS',
+        title: 'Four Ways to Keep Your Workout Routine Fresh',
+        date: 'Feb 10, 2021',
+        comment: 12,
+        sm_desc:
+            'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
+        delay: '300',
+        home_1: true,
+    },
+    // home 4
+    {
+        id: 4,
+        img: '/assets/images/blog/blog-04.jpg',
+        category: 'ONLINE',
+        title: 'Eco-Education in Our Lives: We Can Change the Future',
+        date: 'JAN 10 2021',
+        comment: 18,
+        sm_desc:
+            'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
+        author: 'Edward',
+        large: true,
+        home_4: true,
+    },
+    {
+        id: 5,
+        img: '/assets/images/blog/blog-05.jpg',
+        category: 'LECTURE',
+        title: 'Qualification for Students’ Satisfaction Rate',
+        date: 'SEP 10 2021',
+        comment: 14,
+        sm_desc:
+            'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
+        author: 'Edward',
+        home_4: true,
+    },
+    {
+        id: 6,
+        img: '/assets/images/blog/blog-06.jpg',
+        category: 'LECTURE',
+        title: 'Instructional Design and Adult Learners',
+        date: 'SEP 18 2021',
+        comment: 9,
+        sm_desc:
+            'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
+        author: 'Edward',
+        home_4: true,
+    },
+    {
+        id: 7,
+        img: '/assets/images/blog/blog-10.jpg',
+        category: 'LECTURE',
+        title: 'Join ATD 2021 International Conference & EXPO',
+        date: 'SEP 25 2021',
+        comment: 16,
+        sm_desc:
+            'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
+        author: 'Edward',
+        home_4: true,
+    },
+    // home 5
+    {
+        id: 8,
+        img: '/assets/images/blog/blog-11.jpg',
+        category: 'ONLINE',
+        title: 'Become a Better Blogger: Content Planning',
+        date: 'Oct 10, 2022',
+        comment: 10,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        author: 'Edward',
+        kitchen: true,
+    },
+    {
+        id: 9,
+        img: '/assets/images/blog/blog-12.jpg',
+        category: 'LECTURE',
+        title: 'Fresh Inspiration For March And A Smashing',
+        date: 'Oct 15, 2022',
+        comment: 12,
+        sm_desc:
+            'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
+        author: 'Edward',
+        kitchen: true,
+    },
+    {
+        id: 10,
+        img: '/assets/images/blog/blog-13.jpg',
+        category: 'BUSINESS',
+        title: 'How to Developers Taking the Guess Work',
+        date: 'Oct 20, 2022',
+        comment: 15,
+        sm_desc:
+            'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
+        author: 'Edward',
+        kitchen: true,
+    },
+    // kindergarten
+    {
+        id: 11,
+        img: '/assets/images/blog/blog-07.jpg',
+        category: 'ONLINE',
+        title: 'Do You Play Well With Other Children?',
+        date: 'Nov 20, 2022',
+        comment: 10,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        author: 'Edward',
+        kindergarten_blog: true,
+    },
+    {
+        id: 12,
+        img: '/assets/images/blog/blog-08.jpg',
+        category: 'HISTORY',
+        title: 'Early History of the United States',
+        date: 'Dec 20, 2022',
+        comment: 12,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        author: 'Edward',
+        kindergarten_blog: true,
+    },
+    {
+        id: 13,
+        img: '/assets/images/blog/blog-09.jpg',
+        category: 'BASEBALL',
+        title: 'What Collecting Baseball Cards Taught Me',
+        date: 'Feb 20, 2022',
+        comment: 15,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        author: 'Edward',
+        kindergarten_blog: true,
+    },
+    // modern schooling
+    {
+        id: 14,
+        img: '/assets/images/blog/blog-32.jpg',
+        category: 'ONLINE',
+        title: 'Good Things are Happening Creative Learning',
+        date: 'Oct 20, 2022',
+        comment: 14,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
+        author: 'Edward',
+        delay: '100',
+        modern_schooling_blog: true,
+    },
+    {
+        id: 15,
+        img: '/assets/images/blog/blog-33.jpg',
+        category: 'LECTURE',
+        title: 'Creating a Community of Diverse Learners',
+        date: 'Oct 15, 2022',
+        comment: 14,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
+        author: 'Edward',
+        delay: '200',
+        modern_schooling_blog: true,
+    },
+    {
+        id: 16,
+        img: '/assets/images/blog/blog-34.jpg',
+        category: 'BUSINESS',
+        title: 'Changing Lives and Giving Choices For Everyone',
+        date: 'Oct 23, 2022',
+        comment: 19,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
+        author: 'Edward',
+        delay: '300',
+        modern_schooling_blog: true,
+    },
+    {
+        id: 17,
+        img: '/assets/images/blog/blog-35.jpg',
+        category: 'BUSINESS',
+        title: 'An Excellent Foundation for Future Success',
+        date: 'Oct 30, 2022',
+        comment: 20,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
+        author: 'Edward',
+        delay: '300',
+        modern_schooling_blog: true,
+    },
+
+    // blog standard
+    {
+        id: 18,
+        img: '/assets/images/blog/blog-14.jpg',
+        category: 'Arts & Gallery',
+        title: '4 Learning Management System Design Tips For Better eLearning',
+        date: 'Oct 10, 2022',
+        comment: '09',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
+        blog_standard: true,
+    },
+    {
+        id: 19,
+        video: true,
+        img: '/assets/images/blog/blog-15.jpg',
+        category: 'Online',
+        title: 'Fresh Inspiration For March And A Smashing Winner 2022',
+        date: 'Oct 15, 2022',
+        comment: '10',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
+        blog_standard: true,
+    },
+    {
+        id: 20,
+        slider: true,
+        images: [
+            '/assets/images/blog/blog-16_1.jpg',
+            '/assets/images/blog/blog-16_2.jpg',
+            '/assets/images/blog/blog-16_3.jpg',
+        ],
+        category: 'Education',
+        title: 'How to Developers Taking the Guess Work Generation of Business',
+        date: 'Oct 18, 2022',
+        comment: '12',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
+        blog_standard: true,
+    },
+    {
+        id: 21,
+        img: '/assets/images/blog/blog-17.jpg',
+        category: 'Developer',
+        title: 'How to Become Computer Working Days Software Engineer?',
+        date: 'Oct 20, 2022',
+        comment: '15',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
+        blog_standard: true,
+    },
+    {
+        id: 22,
+        img: '/assets/images/blog/blog-18.jpg',
+        category: 'Business',
+        title: 'Ten Benefits Of Rentals That May Change Your Perspective',
+        date: 'Jan 20, 2022',
+        comment: '18',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
+        blog_standard: true,
+    },
+
+    // blog masonry
+    {
+        id: 23,
+        img: '/assets/images/blog/blog-01.jpg',
+        category: 'ONLINE',
+        title: 'Become a Better Blogger: Content Planning',
+        date: 'Sep 20, 2022',
+        comment: '08',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        blog_masonry: true,
+    },
+    {
+        id: 24,
+        img: '/assets/images/blog/blog-02.jpg',
+        category: 'Lecture',
+        title: 'Fresh Inspiration For March And A',
+        date: 'Sep 15, 2022',
+        comment: '10',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
+        blog_masonry: true,
+    },
+    {
+        id: 25,
+        img: '/assets/images/blog/blog-03.jpg',
+        category: 'Business',
+        title: 'How to Developers Taking the Guess Work',
+        date: 'Sep 17, 2022',
+        comment: '12',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
+        blog_masonry: true,
+    },
+    {
+        id: 26,
+        img: '/assets/images/blog/blog-19.jpg',
+        category: 'Business',
+        title: 'How to Become Computer Working Days',
+        date: 'Oct 17, 2022',
+        comment: '15',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore ad dolore magna aliqua enim mini veniam quis nostrud exercitation.ullamco laboris.',
+        blog_masonry: true,
+    },
+    {
+        id: 27,
+        img: '/assets/images/blog/blog-21.jpg',
+        category: 'Lecture',
+        title: 'Designing an Online Course from',
+        date: 'Nov 15, 2022',
+        comment: '20',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
+        blog_masonry: true,
+    },
+    {
+        id: 28,
+        img: '/assets/images/blog/blog-20.jpg',
+        category: 'Online',
+        title: 'Ten Benefits Of Rentals That May Change',
+        date: 'Nov 20, 2022',
+        comment: '13',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        blog_masonry: true,
+    },
+    {
+        id: 29,
+        img: '/assets/images/blog/blog-23.jpg',
+        category: 'Business',
+        title: 'How to Keep Workouts Fresh in the',
+        date: 'Nov 27, 2022',
+        comment: '16',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore ad dolore magna aliqua enim mini veniam quis nostrud exercitation.ullamco laboris.',
+        blog_masonry: true,
+    },
+    {
+        id: 30,
+        img: '/assets/images/blog/blog-24.jpg',
+        category: 'Online',
+        title: 'Become a Better Blogger: Content Planning',
+        date: 'Nov 29, 2022',
+        comment: '22',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        blog_masonry: true,
+    },
+    {
+        id: 31,
+        img: '/assets/images/blog/blog-22.jpg',
+        category: 'Lecture',
+        title: 'Unveiling the Secrets of Online Teaching',
+        date: 'Nov 30, 2022',
+        comment: '18',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
+        blog_masonry: true,
+    },
+
+    // list blog
+    {
+        id: 32,
+        img: '/assets/images/blog/blog-25.jpg',
+        category: 'Business',
+        title: '4 Learning Management System Design Tips',
+        date: 'Sep 17, 2022',
+        comment: '12',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 33,
+        img: '/assets/images/blog/blog-26.jpg',
+        category: 'Business',
+        title: 'How to Developers Taking the Guess Work',
+        date: 'Oct 17, 2022',
+        comment: '15',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 34,
+        img: '/assets/images/blog/blog-27.jpg',
+        category: 'Lecture',
+        title: 'Ten Benefits Of Rentals That May Change Your',
+        date: 'Nov 15, 2022',
+        comment: '20',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 35,
+        img: '/assets/images/blog/blog-28.jpg',
+        category: 'Online',
+        title: 'Fresh Inspiration For March And A Smashing',
+        date: 'Nov 20, 2022',
+        comment: '13',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 36,
+        img: '/assets/images/blog/blog-29.jpg',
+        category: 'Business',
+        title: 'Fresh Inspiration For March And A Smashing',
+        date: 'Nov 27, 2022',
+        comment: '16',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 37,
+        img: '/assets/images/blog/blog-30.jpg',
+        category: 'Online',
+        title: 'How to Developers Taking the Guess Work',
+        date: 'Nov 29, 2022',
+        comment: '22',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 38,
+        img: '/assets/images/blog/blog-31.jpg',
+        category: 'Lecture',
+        title: 'Ten Benefits Of Rentals That May Change',
+        date: 'Nov 30, 2022',
+        comment: '18',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+];
+
+export default blog_data;
diff --git a/src/data-tstprep/course-data.js b/src/data-tstprep/course-data.js
deleted file mode 100644
index 4c4e70c..0000000
--- a/src/data-tstprep/course-data.js
+++ /dev/null
@@ -1,204 +0,0 @@
-// Define the API endpoint
-const baseUrl = 'https://platform.tstprep.com/wp-json/';
-const baseLD = baseUrl + 'ldlms/v2/';
-
-const graphqlUrl = 'https://tstprep.platform.test/wp/graphql';
-
-export const getCourseDataRest = async (id) => {
-    const response = await fetch(baseLD + `sfwd-courses/${id}`)
-    if (!response.ok) throw new Error(response.statusText); // Check if response went through
-
-    const item = await response.json();
-
-    return {
-        ...item,
-        title: item.title.rendered,
-
-        img: 'course-01.jpg',
-        duration: '4 Weeks',
-        course_outline: 'Online + Onsite',
-        level: 'Advanced',
-        rating: '4.9',
-        rating_count: 8,
-        course_price: '49.00',
-        lesson: 13,
-        student: 28,
-        category: 'Art & Design',
-        short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-        instructor: 'Jane Seymour',
-        instructor_img: 'team-01.webp',
-        instructor_title: 'Founder & CEO',
-        instructor_desc: 'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-        features: ['Build fully-fledged websites and web apps for your business.', 'After the course you will be able to build ANY website you want.', 'You will master both front and back-end development technologies.'],
-        social_links: [{
-            link: 'http://facebook.com',
-            target: '_blank',
-            icon: 'icon-facebook'
-        }, {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'}, {
-            link: 'https://www.linkedin.com/',
-            target: '_blank',
-            icon: 'icon-linkedin2'
-        }, {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}],
-        language: 'English',
-        certificate: 'yes',
-        videoId: 'PICj5tr9hcc',
-        course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-        course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-        learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-        course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-        curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-        course_lessons: [{
-            title: 'Week 1-4',
-            text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-            lessons: [{title: 'Introduction', icon: 'icon-68'}, {
-                title: 'Course Overview',
-                icon: 'icon-68'
-            }, {
-                title: 'Course Overview',
-                badge_list: true,
-                question: 0,
-                minutes: 10
-            }, {
-                title: 'Course Exercise / Reference Files',
-                icon: 'icon-68'
-            }, {
-                title: 'Code Editor Installation (Optional if you have one)',
-                icon: 'icon-68'
-            }, {title: ' Embedding PHP in HTML', icon: 'icon-68'},]
-        }, {
-            title: 'Week 5-8',
-            text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-            lessons: [{title: 'Defining Functions', icon: 'icon-68'}, {
-                title: 'Function Parameters',
-                icon: 'icon-68'
-            }, {
-                title: ' Return Values From Functions',
-                badge_list: true,
-                question: 2,
-                minutes: 15
-            }, {title: ' Global Variable and Scope', icon: 'icon-68'}, {
-                title: 'Newer Way of creating a Constant',
-                icon: 'icon-68'
-            }, {title: 'Constants', icon: 'icon-68'},]
-        },],
-        reviews: [{
-            img: '/assets/images/blog/comment-01.jpg',
-            rating: 5,
-            name: 'Haley Bennet',
-            date: 'Oct 10, 2021',
-            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-        }, {
-            img: '/assets/images/blog/comment-02.jpg',
-            rating: 5,
-            name: 'Simon Baker',
-            date: 'Oct 15, 2021',
-            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-        }, {
-            img: '/assets/images/blog/comment-03.jpg',
-            rating: 5,
-            name: 'Richard Gere',
-            date: 'Oct 19, 2021',
-            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-        },]
-
-    };
-}
-
-// Use fetch to send the GET request
-export const getCourses = async () => {
-    const response = await fetch(baseLD + 'sfwd-courses');
-    if (!response.ok) throw new Error(response.statusText); // Check if response went through
-
-    const data = await response.json();
-
-    return data.map(item => ({
-        ...item,
-        title: item.title.rendered,
-
-        img: 'course-01.jpg',
-        duration: '4 Weeks',
-        course_outline: 'Online + Onsite',
-        level: 'Advanced',
-        rating: '4.9',
-        rating_count: 8,
-        course_price: '49.00',
-        lesson: 13,
-        student: 28,
-        category: 'Art & Design',
-        short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-        instructor: 'Jane Seymour',
-        instructor_img: 'team-01.webp',
-        instructor_title: 'Founder & CEO',
-        instructor_desc: 'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-        features: [
-            'Build fully-fledged websites and web apps for your business.',
-            'After the course you will be able to build ANY website you want.',
-            'You will master both front and back-end development technologies.'
-        ],
-        social_links: [
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-            {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-        ],
-        language: 'English',
-        certificate: 'yes',
-        videoId: 'PICj5tr9hcc',
-        course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-        course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-        learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-        course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-        curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-        course_lessons: [
-            {
-                title: 'Week 1-4',
-                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-                lessons: [
-                    {title: 'Introduction', icon: 'icon-68'},
-                    {title: 'Course Overview', icon: 'icon-68'},
-                    {title: 'Course Overview', badge_list: true, question: 0, minutes: 10},
-                    {title: 'Course Exercise / Reference Files', icon: 'icon-68'},
-                    {title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68'},
-                    {title: ' Embedding PHP in HTML', icon: 'icon-68'},
-                ]
-            },
-            {
-                title: 'Week 5-8',
-                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-                lessons: [
-                    {title: 'Defining Functions', icon: 'icon-68'},
-                    {title: 'Function Parameters', icon: 'icon-68'},
-                    {title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15},
-                    {title: ' Global Variable and Scope', icon: 'icon-68'},
-                    {title: 'Newer Way of creating a Constant', icon: 'icon-68'},
-                    {title: 'Constants', icon: 'icon-68'},
-                ]
-            },
-        ],
-        reviews: [
-            {
-                img: '/assets/images/blog/comment-01.jpg',
-                rating: 5,
-                name: 'Haley Bennet',
-                date: 'Oct 10, 2021',
-                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-            },
-            {
-                img: '/assets/images/blog/comment-02.jpg',
-                rating: 5,
-                name: 'Simon Baker',
-                date: 'Oct 15, 2021',
-                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-            },
-            {
-                img: '/assets/images/blog/comment-03.jpg',
-                rating: 5,
-                name: 'Richard Gere',
-                date: 'Oct 19, 2021',
-                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-            },
-        ]
-
-    }));
-} // If an error occurred, log it to console
-
diff --git a/src/data-tstprep/course-data.ts b/src/data-tstprep/course-data.ts
new file mode 100644
index 0000000..08ab722
--- /dev/null
+++ b/src/data-tstprep/course-data.ts
@@ -0,0 +1,270 @@
+// Define the API endpoint
+const baseUrl = 'https://platform.tstprep.com/wp-json/';
+const baseLD = baseUrl + 'ldlms/v2/';
+
+const graphqlUrl = 'https://tstprep.platform.test/wp/graphql';
+
+export const getCourseDataRest = async id => {
+    const response = await fetch(baseLD + `sfwd-courses/${id}`);
+    if (!response.ok) throw new Error(response.statusText); // Check if response went through
+
+    const item = await response.json();
+
+    return {
+        ...item,
+        title: item.title.rendered,
+
+        img: 'course-01.jpg',
+        duration: '4 Weeks',
+        course_outline: 'Online + Onsite',
+        level: 'Advanced',
+        rating: '4.9',
+        rating_count: 8,
+        course_price: '49.00',
+        lesson: 13,
+        student: 28,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Jane Seymour',
+        instructor_img: 'team-01.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            {
+                link: 'http://facebook.com',
+                target: '_blank',
+                icon: 'icon-facebook',
+            },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        icon: 'icon-68',
+                    },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    {
+                        title: 'Course Exercise / Reference Files',
+                        icon: 'icon-68',
+                    },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    {
+                        title: 'Function Parameters',
+                        icon: 'icon-68',
+                    },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    {
+                        title: 'Newer Way of creating a Constant',
+                        icon: 'icon-68',
+                    },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    };
+};
+
+// Use fetch to send the GET request
+export const getCourses = async () => {
+    const response = await fetch(baseLD + 'sfwd-courses');
+    if (!response.ok) throw new Error(response.statusText); // Check if response went through
+
+    const data = await response.json();
+
+    return data.map(item => ({
+        ...item,
+        title: item.title.rendered,
+
+        img: 'course-01.jpg',
+        duration: '4 Weeks',
+        course_outline: 'Online + Onsite',
+        level: 'Advanced',
+        rating: '4.9',
+        rating_count: 8,
+        course_price: '49.00',
+        lesson: 13,
+        student: 28,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Jane Seymour',
+        instructor_img: 'team-01.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    }));
+}; // If an error occurred, log it to console
diff --git a/src/data-tstprep/event-data.js b/src/data-tstprep/event-data.js
deleted file mode 100644
index 8a74701..0000000
--- a/src/data-tstprep/event-data.js
+++ /dev/null
@@ -1,238 +0,0 @@
-const event_data = [
-  {
-    id: 1,
-    img: '/assets/images/event/event-01.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Learn English in Ease',
-    date: "SEP 30 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    delay:'100',
-    event_meta:'Newyork City, USA',
-    university:true,
-    event_grid:true,
-  },
-  {
-    id: 2,
-    img: '/assets/images/event/event-02.jpg',
-    time:'04:00PM-07:00PM',
-    title: 'Annual Workshop',
-    date: "DEC 25 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    delay:'200',
-    event_meta:'Washington D.C, USA',
-    university:true,
-    event_grid:true,
-  },
-  {
-    id: 3,
-    img: '/assets/images/event/event-03.jpg',
-    time:'10:00AM-11:00AM',
-    title: 'Design Think & Innovation',
-    date: "NOV 25 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    delay:'300',
-    event_meta:'New york City, USA',
-    university:true,
-    event_grid:true,
-  },
-  // home 7
-  {
-    id: 4,
-    img: '/assets/images/event/event-04.jpg',
-    bg_style:'bg-style-extra02',
-    time:'10:00AM-11:00AM',
-    title: 'Annual Music Conference',
-    date: "Nov 18, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
-    event_meta:'Ohio City, USA',
-    home_7:true,
-  },
-  {
-    id: 5,
-    img: '/assets/images/event/event-05.jpg',
-    bg_style:'bg-style-secondary',
-    time:'09:00AM-11:00AM',
-    title: 'Garden Camping Party',
-    date: "Oct 15, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
-    event_meta:'Newyork City, USA',
-    home_7:true,
-  },
-  {
-    id: 6,
-    img: '/assets/images/event/event-06.jpg',
-    bg_style:'bg-style-extra05',
-    time:'08:00AM-09:00AM',
-    title: 'Caterpillars to Butterflies',
-    date: "Dec 15, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
-    event_meta:'Washington D.C, USA',
-    home_7:true,
-  },
-  {
-    id: 7,
-    img: '/assets/images/event/event-07.jpg',
-    bg_style:'bg-style-primary',
-    time:'11:00AM-12:PM',
-    title: 'Animal Petting Party',
-    date: "Dec 28, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
-    event_meta:'Ohio City, USA',
-    home_7:true,
-  },
-  //  event_grid,
-  {
-    id: 8,
-    img: '/assets/images/event/event-08.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Annual Workshop',
-    date: "OCT 28 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    event_meta:'Newyork City, USA',
-    event_grid:true,
-  },
-  {
-    id: 9,
-    img: '/assets/images/event/event-09.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Annual Workshop',
-    date: "OCT 25 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    event_meta:'Newyork City, USA',
-    event_grid:true,
-  },
-  {
-    id: 10,
-    img: '/assets/images/event/event-10.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Annual Workshop',
-    date: "OCT 18 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    event_meta:'Newyork City, USA',
-    event_grid:true,
-  },
-  {
-    id: 11,
-    img: '/assets/images/event/event-08.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Annual Workshop',
-    date: "OCT 28 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    event_meta:'Newyork City, USA',
-    event_grid:true,
-  },
-
-  // event lists 
-  {
-    id: 12,
-    img: '/assets/images/event/event-14.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Global Education Fall Meeting for Everyone',
-    date: "OCT 28, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Art & Design',
-  },
-  {
-    id: 13,
-    img: '/assets/images/event/event-15.jpg',
-    time:'09:00AM-11:00PM',
-    title: 'Our excellence partner France Pavilion',
-    date: "FEB 28, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Development',
-  },
-  {
-    id: 14,
-    img: '/assets/images/event/event-16.jpg',
-    time:'07:00AM-09:00PM',
-    title: 'Explorations of New Approaches Works',
-    date: "FEB 15, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Business',
-  },
-  {
-    id: 15,
-    img: '/assets/images/event/event-17.jpg',
-    time:'06:00AM-08:00PM',
-    title: 'Digital Arts & Reshaping the Future with AI',
-    date: "JAN 18, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Marketing',
-  },
-  {
-    id: 16,
-    img: '/assets/images/event/event-18.jpg',
-    time:'07:00AM-08:00PM',
-    title: 'Online Presentation on PowerPoint 2022',
-    date: "DEC 18, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Art & Design',
-  },
-  {
-    id: 17,
-    img: '/assets/images/event/event-19.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'London International Conference',
-    date: "DEC 20, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Business',
-  },
-  {
-    id: 18,
-    img: '/assets/images/event/event-19.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Digital Arts & Reshaping the Future with AI',
-    date: "DEC 22, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Marketing',
-  },
-  {
-    id: 19,
-    img: '/assets/images/event/event-22.jpg',
-    time:'07:00AM-08:00PM',
-    title: 'Changes in Healthcare',
-    date: "DEC 18, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    health_coach_event:true,
-    category:'Art & Design',
-  },
-  {
-    id: 20,
-    img: '/assets/images/event/event-23.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Future Trends in Healthcare',
-    date: "DEC 20, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    health_coach_event:true,
-    category:'Business',
-  },
-  {
-    id: 21,
-    img: '/assets/images/event/event-24.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Health Education Plan',
-    date: "DEC 22, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    health_coach_event:true,
-    category:'Marketing',
-  },
-]
-
-export default event_data;
\ No newline at end of file
diff --git a/src/data-tstprep/event-data.ts b/src/data-tstprep/event-data.ts
new file mode 100644
index 0000000..0a053a5
--- /dev/null
+++ b/src/data-tstprep/event-data.ts
@@ -0,0 +1,255 @@
+const event_data = [
+    {
+        id: 1,
+        img: '/assets/images/event/event-01.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Learn English in Ease',
+        date: 'SEP 30 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        delay: '100',
+        event_meta: 'Newyork City, USA',
+        university: true,
+        event_grid: true,
+    },
+    {
+        id: 2,
+        img: '/assets/images/event/event-02.jpg',
+        time: '04:00PM-07:00PM',
+        title: 'Annual Workshop',
+        date: 'DEC 25 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        delay: '200',
+        event_meta: 'Washington D.C, USA',
+        university: true,
+        event_grid: true,
+    },
+    {
+        id: 3,
+        img: '/assets/images/event/event-03.jpg',
+        time: '10:00AM-11:00AM',
+        title: 'Design Think & Innovation',
+        date: 'NOV 25 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        delay: '300',
+        event_meta: 'New york City, USA',
+        university: true,
+        event_grid: true,
+    },
+    // home 7
+    {
+        id: 4,
+        img: '/assets/images/event/event-04.jpg',
+        bg_style: 'bg-style-extra02',
+        time: '10:00AM-11:00AM',
+        title: 'Annual Music Conference',
+        date: 'Nov 18, 2022',
+        sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
+        event_meta: 'Ohio City, USA',
+        home_7: true,
+    },
+    {
+        id: 5,
+        img: '/assets/images/event/event-05.jpg',
+        bg_style: 'bg-style-secondary',
+        time: '09:00AM-11:00AM',
+        title: 'Garden Camping Party',
+        date: 'Oct 15, 2022',
+        sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
+        event_meta: 'Newyork City, USA',
+        home_7: true,
+    },
+    {
+        id: 6,
+        img: '/assets/images/event/event-06.jpg',
+        bg_style: 'bg-style-extra05',
+        time: '08:00AM-09:00AM',
+        title: 'Caterpillars to Butterflies',
+        date: 'Dec 15, 2022',
+        sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
+        event_meta: 'Washington D.C, USA',
+        home_7: true,
+    },
+    {
+        id: 7,
+        img: '/assets/images/event/event-07.jpg',
+        bg_style: 'bg-style-primary',
+        time: '11:00AM-12:PM',
+        title: 'Animal Petting Party',
+        date: 'Dec 28, 2022',
+        sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
+        event_meta: 'Ohio City, USA',
+        home_7: true,
+    },
+    //  event_grid,
+    {
+        id: 8,
+        img: '/assets/images/event/event-08.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Annual Workshop',
+        date: 'OCT 28 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        event_meta: 'Newyork City, USA',
+        event_grid: true,
+    },
+    {
+        id: 9,
+        img: '/assets/images/event/event-09.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Annual Workshop',
+        date: 'OCT 25 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        event_meta: 'Newyork City, USA',
+        event_grid: true,
+    },
+    {
+        id: 10,
+        img: '/assets/images/event/event-10.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Annual Workshop',
+        date: 'OCT 18 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        event_meta: 'Newyork City, USA',
+        event_grid: true,
+    },
+    {
+        id: 11,
+        img: '/assets/images/event/event-08.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Annual Workshop',
+        date: 'OCT 28 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        event_meta: 'Newyork City, USA',
+        event_grid: true,
+    },
+
+    // event lists
+    {
+        id: 12,
+        img: '/assets/images/event/event-14.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Global Education Fall Meeting for Everyone',
+        date: 'OCT 28, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Art & Design',
+    },
+    {
+        id: 13,
+        img: '/assets/images/event/event-15.jpg',
+        time: '09:00AM-11:00PM',
+        title: 'Our excellence partner France Pavilion',
+        date: 'FEB 28, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Development',
+    },
+    {
+        id: 14,
+        img: '/assets/images/event/event-16.jpg',
+        time: '07:00AM-09:00PM',
+        title: 'Explorations of New Approaches Works',
+        date: 'FEB 15, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Business',
+    },
+    {
+        id: 15,
+        img: '/assets/images/event/event-17.jpg',
+        time: '06:00AM-08:00PM',
+        title: 'Digital Arts & Reshaping the Future with AI',
+        date: 'JAN 18, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Marketing',
+    },
+    {
+        id: 16,
+        img: '/assets/images/event/event-18.jpg',
+        time: '07:00AM-08:00PM',
+        title: 'Online Presentation on PowerPoint 2022',
+        date: 'DEC 18, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Art & Design',
+    },
+    {
+        id: 17,
+        img: '/assets/images/event/event-19.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'London International Conference',
+        date: 'DEC 20, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Business',
+    },
+    {
+        id: 18,
+        img: '/assets/images/event/event-19.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Digital Arts & Reshaping the Future with AI',
+        date: 'DEC 22, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Marketing',
+    },
+    {
+        id: 19,
+        img: '/assets/images/event/event-22.jpg',
+        time: '07:00AM-08:00PM',
+        title: 'Changes in Healthcare',
+        date: 'DEC 18, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        health_coach_event: true,
+        category: 'Art & Design',
+    },
+    {
+        id: 20,
+        img: '/assets/images/event/event-23.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Future Trends in Healthcare',
+        date: 'DEC 20, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        health_coach_event: true,
+        category: 'Business',
+    },
+    {
+        id: 21,
+        img: '/assets/images/event/event-24.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Health Education Plan',
+        date: 'DEC 22, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        health_coach_event: true,
+        category: 'Marketing',
+    },
+];
+
+export default event_data;
diff --git a/src/data-tstprep/index.js b/src/data-tstprep/index.js
deleted file mode 100644
index 320d644..0000000
--- a/src/data-tstprep/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {getCourses} from "./course-data";
-import instructors_data from "./instructors";
-import blog_data from "./blog-data";
-import event_data from "./event-data";
-import shop_data from "./shop-data";
-
-
-export {
-  getCourses,
-  instructors_data,
-  blog_data,
-  event_data,
-  shop_data,
-}
diff --git a/src/data-tstprep/index.ts b/src/data-tstprep/index.ts
new file mode 100644
index 0000000..899e6e5
--- /dev/null
+++ b/src/data-tstprep/index.ts
@@ -0,0 +1,7 @@
+import { getCourses } from './course-data';
+import instructors_data from './instructors';
+import blog_data from './blog-data';
+import event_data from './event-data';
+import shop_data from './shop-data';
+
+export { getCourses, instructors_data, blog_data, event_data, shop_data };
diff --git a/src/data-tstprep/instructors.js b/src/data-tstprep/instructors.js
deleted file mode 100644
index 28fa7e1..0000000
--- a/src/data-tstprep/instructors.js
+++ /dev/null
@@ -1,146 +0,0 @@
-const instructors_data = [
-    {
-        id:1,
-        img:'team-01.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Jane Seymour',
-        title:'UI Designer',
-        delay:'50',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:2,
-        img:'team-02.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Edward Norton',
-        title:'Web Developer',
-        delay:'100',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:3,
-        img:'team-03.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Penelope Cruz',
-        title:'Digital Marketer',
-        delay:'150',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:4,
-        img:'team-04.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'John Travolta',
-        title:'Wordpress Expert',
-        delay:'200',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:5,
-        img:'team-05.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Susan White',
-        title:'Wordpress Expert',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:6,
-        img:'team-06.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Connie Comerford',
-        title:'Web Developer',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:7,
-        img:'team-07.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Hilary Swank',
-        title:'Digital Marketer',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:8,
-        img:'team-08.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Michael Douglas',
-        title:'Designer',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    }
-]
-
-export const yoga_instructor = [
-    {
-        id:1,
-        img:'team-01.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Nancy Dew',
-        title:'Yoga Trainer',
-        delay:'50',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:2,
-        img:'team-02.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Jared Hayes',
-        title:'Yoga Trainer',
-        delay:'100',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:3,
-        img:'team-03.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Rebecca Roye',
-        title:'Yoga Trainer',
-        delay:'150',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    }
-];
-
-export default instructors_data;
\ No newline at end of file
diff --git a/src/data-tstprep/instructors.ts b/src/data-tstprep/instructors.ts
new file mode 100644
index 0000000..9659e56
--- /dev/null
+++ b/src/data-tstprep/instructors.ts
@@ -0,0 +1,190 @@
+const instructors_data = [
+    {
+        id: 1,
+        img: 'team-01.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Jane Seymour',
+        title: 'UI Designer',
+        delay: '50',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 2,
+        img: 'team-02.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Edward Norton',
+        title: 'Web Developer',
+        delay: '100',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 3,
+        img: 'team-03.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Penelope Cruz',
+        title: 'Digital Marketer',
+        delay: '150',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 4,
+        img: 'team-04.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'John Travolta',
+        title: 'Wordpress Expert',
+        delay: '200',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 5,
+        img: 'team-05.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Susan White',
+        title: 'Wordpress Expert',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 6,
+        img: 'team-06.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Connie Comerford',
+        title: 'Web Developer',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 7,
+        img: 'team-07.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Hilary Swank',
+        title: 'Digital Marketer',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 8,
+        img: 'team-08.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Michael Douglas',
+        title: 'Designer',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+];
+
+export const yoga_instructor = [
+    {
+        id: 1,
+        img: 'team-01.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Nancy Dew',
+        title: 'Yoga Trainer',
+        delay: '50',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 2,
+        img: 'team-02.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Jared Hayes',
+        title: 'Yoga Trainer',
+        delay: '100',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 3,
+        img: 'team-03.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Rebecca Roye',
+        title: 'Yoga Trainer',
+        delay: '150',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+];
+
+export default instructors_data;
diff --git a/src/data-tstprep/shop-data.js b/src/data-tstprep/shop-data.js
deleted file mode 100644
index b374219..0000000
--- a/src/data-tstprep/shop-data.js
+++ /dev/null
@@ -1,160 +0,0 @@
-const shop_data = [
-  {
-    id:1,
-    img:'/assets/images/shop/product-01.jpg',
-    title:'Sing To It',
-    rating:[1,2,3,4,5],
-    total_rating:3,
-    price:'70.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-007',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'100'
-  },
-  {
-    id:2,
-    img:'/assets/images/shop/product-02.jpg',
-    title:'Natural Science Project',
-    rating:[1,2,3,4,5],
-    total_rating:5,
-    price:'60.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-008',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'150'
-  },
-  {
-    id:3,
-    img:'/assets/images/shop/product-03.jpg',
-    title:'The King of Drugs',
-    rating:[1,2,3,4,5],
-    total_rating:7,
-    price:'80.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-088',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'200'
-  },
-  {
-    id:4,
-    img:'/assets/images/shop/product-04.jpg',
-    title:'Ray Brandbury',
-    rating:[1,2,3,4,5],
-    total_rating:10,
-    price:'90.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-098',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'250'
-  },
-  {
-    id:5,
-    img:'/assets/images/shop/product-05.jpg',
-    title:'Educated A Memoir',
-    rating:[1,2,3,4,5],
-    total_rating:5,
-    price:'85.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-098',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'300'
-  },
-  {
-    id:6,
-    img:'/assets/images/shop/product-06.jpg',
-    title:'The Silver Chair',
-    rating:[1,2,3,4,5],
-    total_rating:12,
-    price:'99.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-098',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'350'
-  },
-  {
-    id:7,
-    img:'/assets/images/shop/product-07.jpg',
-    title:'Harry Potter',
-    rating:[1,2,3,4],
-    total_rating:14,
-    price:'110.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-98',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'400'
-  },
-  {
-    id:8,
-    img:'/assets/images/shop/product-08.jpg',
-    title:'Code Breaker',
-    rating:[1,2,3,4,5],
-    total_rating:15,
-    price:'95.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-989',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'450'
-  },
-  {
-    id:9,
-    img:'/assets/images/shop/product-09.jpg',
-    title:'Vanguard',
-    rating:[1,2,3,4],
-    total_rating:16,
-    price:'65.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-988',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'500'
-  },
-  {
-    id:10,
-    img:'/assets/images/shop/product-10.jpg',
-    title:'Arctic Sea',
-    rating:[1,2,3,4],
-    total_rating:18,
-    price:'75.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-988',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'550'
-  },
-  {
-    id:11,
-    img:'/assets/images/shop/product-11.jpg',
-    title:'Secret Sky',
-    rating:[1,2,3,4,5],
-    total_rating:20,
-    price:'130.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-988',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'600'
-  },
-  {
-    id:12,
-    img:'/assets/images/shop/product-12.jpg',
-    title:'Women Who Launch',
-    rating:[1,2,3,4,5],
-    total_rating:22,
-    price:'125.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-988',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'650'
-  },
-]
-
-export default shop_data;
\ No newline at end of file
diff --git a/src/data-tstprep/shop-data.ts b/src/data-tstprep/shop-data.ts
new file mode 100644
index 0000000..0739088
--- /dev/null
+++ b/src/data-tstprep/shop-data.ts
@@ -0,0 +1,160 @@
+const shop_data = [
+    {
+        id: 1,
+        img: '/assets/images/shop/product-01.jpg',
+        title: 'Sing To It',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 3,
+        price: '70.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-007',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '100',
+    },
+    {
+        id: 2,
+        img: '/assets/images/shop/product-02.jpg',
+        title: 'Natural Science Project',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 5,
+        price: '60.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-008',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '150',
+    },
+    {
+        id: 3,
+        img: '/assets/images/shop/product-03.jpg',
+        title: 'The King of Drugs',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 7,
+        price: '80.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-088',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '200',
+    },
+    {
+        id: 4,
+        img: '/assets/images/shop/product-04.jpg',
+        title: 'Ray Brandbury',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 10,
+        price: '90.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-098',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '250',
+    },
+    {
+        id: 5,
+        img: '/assets/images/shop/product-05.jpg',
+        title: 'Educated A Memoir',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 5,
+        price: '85.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-098',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '300',
+    },
+    {
+        id: 6,
+        img: '/assets/images/shop/product-06.jpg',
+        title: 'The Silver Chair',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 12,
+        price: '99.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-098',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '350',
+    },
+    {
+        id: 7,
+        img: '/assets/images/shop/product-07.jpg',
+        title: 'Harry Potter',
+        rating: [1, 2, 3, 4],
+        total_rating: 14,
+        price: '110.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-98',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '400',
+    },
+    {
+        id: 8,
+        img: '/assets/images/shop/product-08.jpg',
+        title: 'Code Breaker',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 15,
+        price: '95.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-989',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '450',
+    },
+    {
+        id: 9,
+        img: '/assets/images/shop/product-09.jpg',
+        title: 'Vanguard',
+        rating: [1, 2, 3, 4],
+        total_rating: 16,
+        price: '65.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-988',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '500',
+    },
+    {
+        id: 10,
+        img: '/assets/images/shop/product-10.jpg',
+        title: 'Arctic Sea',
+        rating: [1, 2, 3, 4],
+        total_rating: 18,
+        price: '75.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-988',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '550',
+    },
+    {
+        id: 11,
+        img: '/assets/images/shop/product-11.jpg',
+        title: 'Secret Sky',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 20,
+        price: '130.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-988',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '600',
+    },
+    {
+        id: 12,
+        img: '/assets/images/shop/product-12.jpg',
+        title: 'Women Who Launch',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 22,
+        price: '125.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-988',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '650',
+    },
+];
+
+export default shop_data;
diff --git a/src/data/blog-data.js b/src/data/blog-data.js
deleted file mode 100644
index f9e48bf..0000000
--- a/src/data/blog-data.js
+++ /dev/null
@@ -1,422 +0,0 @@
-const blog_data = [
-  {
-    id: 1,
-    img: '/assets/images/blog/blog-01.jpg',
-    category: 'ONLINE',
-    title: 'Become a Better Blogger: Content Planning',
-    date: "Oct 10, 2022",
-    comment: 9,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    delay:'100',
-    home_1:true,
-  },
-  {
-    id: 2,
-    img: '/assets/images/blog/blog-02.jpg',
-    category: 'LECTURE',
-    title: 'How to Keep Workouts Fresh in the Morning',
-    date: "Jan 10, 2022",
-    comment: 15,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
-    delay:'200',
-    home_1:true,
-  },
-  {
-    id: 3,
-    img: '/assets/images/blog/blog-03.jpg',
-    category: 'BUSINESS',
-    title: 'Four Ways to Keep Your Workout Routine Fresh',
-    date: "Feb 10, 2021",
-    comment: 12,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
-    delay:'300',
-    home_1:true,
-  },
-  // home 4
-  {
-    id: 4,
-    img: '/assets/images/blog/blog-04.jpg',
-    category: 'ONLINE',
-    title: 'Eco-Education in Our Lives: We Can Change the Future',
-    date: "JAN 10 2021",
-    comment: 18,
-    sm_desc: 'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
-    author:'Edward',
-    large:true,
-    home_4:true,
-  },
-  {
-    id: 5,
-    img: '/assets/images/blog/blog-05.jpg',
-    category: 'LECTURE',
-    title: 'Qualification for Students’ Satisfaction Rate',
-    date: "SEP 10 2021",
-    comment: 14,
-    sm_desc: 'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
-    author:'Edward',
-    home_4:true,
-  },
-  {
-    id: 6,
-    img: '/assets/images/blog/blog-06.jpg',
-    category: 'LECTURE',
-    title: 'Instructional Design and Adult Learners',
-    date: "SEP 18 2021",
-    comment: 9,
-    sm_desc: 'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
-    author:'Edward',
-    home_4:true,
-  },
-  {
-    id: 7,
-    img: '/assets/images/blog/blog-10.jpg',
-    category: 'LECTURE',
-    title: 'Join ATD 2021 International Conference & EXPO',
-    date: "SEP 25 2021",
-    comment: 16,
-    sm_desc: 'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
-    author:'Edward',
-    home_4:true,
-  },
-  // home 5
-  {
-    id: 8,
-    img: '/assets/images/blog/blog-11.jpg',
-    category: 'ONLINE',
-    title: 'Become a Better Blogger: Content Planning',
-    date: "Oct 10, 2022",
-    comment: 10,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    author:'Edward',
-    kitchen:true,
-  },
-  {
-    id: 9,
-    img: '/assets/images/blog/blog-12.jpg',
-    category: 'LECTURE',
-    title: 'Fresh Inspiration For March And A Smashing',
-    date: "Oct 15, 2022",
-    comment: 12,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
-    author:'Edward',
-    kitchen:true,
-  },
-  {
-    id: 10,
-    img: '/assets/images/blog/blog-13.jpg',
-    category: 'BUSINESS',
-    title: 'How to Developers Taking the Guess Work',
-    date: "Oct 20, 2022",
-    comment: 15,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
-    author:'Edward',
-    kitchen:true,
-  },
-  // kindergarten
-  {
-    id: 11,
-    img: '/assets/images/blog/blog-07.jpg',
-    category: 'ONLINE',
-    title: 'Do You Play Well With Other Children?',
-    date: "Nov 20, 2022",
-    comment: 10,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    author:'Edward',
-    kindergarten_blog:true,
-  },
-  {
-    id: 12,
-    img: '/assets/images/blog/blog-08.jpg',
-    category: 'HISTORY',
-    title: 'Early History of the United States',
-    date: "Dec 20, 2022",
-    comment: 12,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    author:'Edward',
-    kindergarten_blog:true,
-  },
-  {
-    id: 13,
-    img: '/assets/images/blog/blog-09.jpg',
-    category: 'BASEBALL',
-    title: 'What Collecting Baseball Cards Taught Me',
-    date: "Feb 20, 2022",
-    comment: 15,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    author:'Edward',
-    kindergarten_blog:true,
-  },
-  // modern schooling
-  {
-    id: 14,
-    img: '/assets/images/blog/blog-32.jpg',
-    category: 'ONLINE',
-    title: 'Good Things are Happening Creative Learning',
-    date: "Oct 20, 2022",
-    comment: 14,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
-    author:'Edward',
-    delay:'100',
-    modern_schooling_blog:true,
-  },
-  {
-    id: 15,
-    img: '/assets/images/blog/blog-33.jpg',
-    category: 'LECTURE',
-    title: 'Creating a Community of Diverse Learners',
-    date: "Oct 15, 2022",
-    comment: 14,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
-    author:'Edward',
-    delay:'200',
-    modern_schooling_blog:true,
-  },
-  {
-    id: 16,
-    img: '/assets/images/blog/blog-34.jpg',
-    category: 'BUSINESS',
-    title: 'Changing Lives and Giving Choices For Everyone',
-    date: "Oct 23, 2022",
-    comment: 19,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
-    author:'Edward',
-    delay:'300',
-    modern_schooling_blog:true,
-  },
-  {
-    id: 17,
-    img: '/assets/images/blog/blog-35.jpg',
-    category: 'BUSINESS',
-    title: 'An Excellent Foundation for Future Success',
-    date: "Oct 30, 2022",
-    comment: 20,
-    sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
-    author:'Edward',
-    delay:'300',
-    modern_schooling_blog:true,
-  },
-
-  // blog standard
-  {
-    id:18,
-    img:'/assets/images/blog/blog-14.jpg',
-    category:'Arts & Gallery',
-    title:'4 Learning Management System Design Tips For Better eLearning',
-    date:'Oct 10, 2022',
-    comment:'09',
-    desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
-    blog_standard:true,
-  },
-  {
-    id:19,
-    video:true,
-    img:'/assets/images/blog/blog-15.jpg',
-    category:'Online',
-    title:'Fresh Inspiration For March And A Smashing Winner 2022',
-    date:'Oct 15, 2022',
-    comment:'10',
-    desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
-    blog_standard:true,
-  },
-  {
-    id:20,
-    slider:true,
-    images:[
-      '/assets/images/blog/blog-16_1.jpg',
-      '/assets/images/blog/blog-16_2.jpg',
-      '/assets/images/blog/blog-16_3.jpg',
-    ],
-    category:'Education',
-    title:'How to Developers Taking the Guess Work Generation of Business',
-    date:'Oct 18, 2022',
-    comment:'12',
-    desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
-    blog_standard:true,
-  },
-  {
-    id:21,
-    img:'/assets/images/blog/blog-17.jpg',
-    category:'Developer',
-    title:'How to Become Computer Working Days Software Engineer?',
-    date:'Oct 20, 2022',
-    comment:'15',
-    desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
-    blog_standard:true,
-  },
-  {
-    id:22,
-    img:'/assets/images/blog/blog-18.jpg',
-    category:'Business',
-    title:'Ten Benefits Of Rentals That May Change Your Perspective',
-    date:'Jan 20, 2022',
-    comment:'18',
-    desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
-    blog_standard:true,
-  },
-
-  // blog masonry
-  {
-    id:23,
-    img:'/assets/images/blog/blog-01.jpg',
-    category:'ONLINE',
-    title:'Become a Better Blogger: Content Planning',
-    date:'Sep 20, 2022',
-    comment:'08',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    blog_masonry:true,
-  },
-  {
-    id:24,
-    img:'/assets/images/blog/blog-02.jpg',
-    category:'Lecture',
-    title:'Fresh Inspiration For March And A',
-    date:'Sep 15, 2022',
-    comment:'10',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
-    blog_masonry:true,
-  },
-  {
-    id:25,
-    img:'/assets/images/blog/blog-03.jpg',
-    category:'Business',
-    title:'How to Developers Taking the Guess Work',
-    date:'Sep 17, 2022',
-    comment:'12',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
-    blog_masonry:true,
-  },
-  {
-    id:26,
-    img:'/assets/images/blog/blog-19.jpg',
-    category:'Business',
-    title:'How to Become Computer Working Days',
-    date:'Oct 17, 2022',
-    comment:'15',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore ad dolore magna aliqua enim mini veniam quis nostrud exercitation.ullamco laboris.',
-    blog_masonry:true,
-  },
-  {
-    id:27,
-    img:'/assets/images/blog/blog-21.jpg',
-    category:'Lecture',
-    title:'Designing an Online Course from',
-    date:'Nov 15, 2022',
-    comment:'20',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
-    blog_masonry:true,
-  },
-  {
-    id:28,
-    img:'/assets/images/blog/blog-20.jpg',
-    category:'Online',
-    title:'Ten Benefits Of Rentals That May Change',
-    date:'Nov 20, 2022',
-    comment:'13',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    blog_masonry:true,
-  },
-  {
-    id:29,
-    img:'/assets/images/blog/blog-23.jpg',
-    category:'Business',
-    title:'How to Keep Workouts Fresh in the',
-    date:'Nov 27, 2022',
-    comment:'16',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore ad dolore magna aliqua enim mini veniam quis nostrud exercitation.ullamco laboris.',
-    blog_masonry:true,
-  },
-  {
-    id:30,
-    img:'/assets/images/blog/blog-24.jpg',
-    category:'Online',
-    title:'Become a Better Blogger: Content Planning',
-    date:'Nov 29, 2022',
-    comment:'22',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-    blog_masonry:true,
-  },
-  {
-    id:31,
-    img:'/assets/images/blog/blog-22.jpg',
-    category:'Lecture',
-    title:'Unveiling the Secrets of Online Teaching',
-    date:'Nov 30, 2022',
-    comment:'18',
-    desc:'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
-    blog_masonry:true,
-  },
-
-  // list blog 
-  {
-    id:32,
-    img:'/assets/images/blog/blog-25.jpg',
-    category:'Business',
-    title:'4 Learning Management System Design Tips',
-    date:'Sep 17, 2022',
-    comment:'12',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:33,
-    img:'/assets/images/blog/blog-26.jpg',
-    category:'Business',
-    title:'How to Developers Taking the Guess Work',
-    date:'Oct 17, 2022',
-    comment:'15',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:34,
-    img:'/assets/images/blog/blog-27.jpg',
-    category:'Lecture',
-    title:'Ten Benefits Of Rentals That May Change Your',
-    date:'Nov 15, 2022',
-    comment:'20',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:35,
-    img:'/assets/images/blog/blog-28.jpg',
-    category:'Online',
-    title:'Fresh Inspiration For March And A Smashing',
-    date:'Nov 20, 2022',
-    comment:'13',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:36,
-    img:'/assets/images/blog/blog-29.jpg',
-    category:'Business',
-    title:'Fresh Inspiration For March And A Smashing',
-    date:'Nov 27, 2022',
-    comment:'16',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:37,
-    img:'/assets/images/blog/blog-30.jpg',
-    category:'Online',
-    title:'How to Developers Taking the Guess Work',
-    date:'Nov 29, 2022',
-    comment:'22',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-  {
-    id:38,
-    img:'/assets/images/blog/blog-31.jpg',
-    category:'Lecture',
-    title:'Ten Benefits Of Rentals That May Change',
-    date:'Nov 30, 2022',
-    comment:'18',
-    desc:'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
-    blog_list:true,
-  },
-]
-
-export default blog_data;
\ No newline at end of file
diff --git a/src/data/blog-data.ts b/src/data/blog-data.ts
new file mode 100644
index 0000000..25ba122
--- /dev/null
+++ b/src/data/blog-data.ts
@@ -0,0 +1,430 @@
+const blog_data = [
+    {
+        id: 1,
+        img: '/assets/images/blog/blog-01.jpg',
+        category: 'ONLINE',
+        title: 'Become a Better Blogger: Content Planning',
+        date: 'Oct 10, 2022',
+        comment: 9,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        delay: '100',
+        home_1: true,
+    },
+    {
+        id: 2,
+        img: '/assets/images/blog/blog-02.jpg',
+        category: 'LECTURE',
+        title: 'How to Keep Workouts Fresh in the Morning',
+        date: 'Jan 10, 2022',
+        comment: 15,
+        sm_desc:
+            'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
+        delay: '200',
+        home_1: true,
+    },
+    {
+        id: 3,
+        img: '/assets/images/blog/blog-03.jpg',
+        category: 'BUSINESS',
+        title: 'Four Ways to Keep Your Workout Routine Fresh',
+        date: 'Feb 10, 2021',
+        comment: 12,
+        sm_desc:
+            'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
+        delay: '300',
+        home_1: true,
+    },
+    // home 4
+    {
+        id: 4,
+        img: '/assets/images/blog/blog-04.jpg',
+        category: 'ONLINE',
+        title: 'Eco-Education in Our Lives: We Can Change the Future',
+        date: 'JAN 10 2021',
+        comment: 18,
+        sm_desc:
+            'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
+        author: 'Edward',
+        large: true,
+        home_4: true,
+    },
+    {
+        id: 5,
+        img: '/assets/images/blog/blog-05.jpg',
+        category: 'LECTURE',
+        title: 'Qualification for Students’ Satisfaction Rate',
+        date: 'SEP 10 2021',
+        comment: 14,
+        sm_desc:
+            'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
+        author: 'Edward',
+        home_4: true,
+    },
+    {
+        id: 6,
+        img: '/assets/images/blog/blog-06.jpg',
+        category: 'LECTURE',
+        title: 'Instructional Design and Adult Learners',
+        date: 'SEP 18 2021',
+        comment: 9,
+        sm_desc:
+            'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
+        author: 'Edward',
+        home_4: true,
+    },
+    {
+        id: 7,
+        img: '/assets/images/blog/blog-10.jpg',
+        category: 'LECTURE',
+        title: 'Join ATD 2021 International Conference & EXPO',
+        date: 'SEP 25 2021',
+        comment: 16,
+        sm_desc:
+            'Lorem ipsum dolor sit amet consec tetur adipisicing sed eiusmod tempor incid idunt labore.',
+        author: 'Edward',
+        home_4: true,
+    },
+    // home 5
+    {
+        id: 8,
+        img: '/assets/images/blog/blog-11.jpg',
+        category: 'ONLINE',
+        title: 'Become a Better Blogger: Content Planning',
+        date: 'Oct 10, 2022',
+        comment: 10,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        author: 'Edward',
+        kitchen: true,
+    },
+    {
+        id: 9,
+        img: '/assets/images/blog/blog-12.jpg',
+        category: 'LECTURE',
+        title: 'Fresh Inspiration For March And A Smashing',
+        date: 'Oct 15, 2022',
+        comment: 12,
+        sm_desc:
+            'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
+        author: 'Edward',
+        kitchen: true,
+    },
+    {
+        id: 10,
+        img: '/assets/images/blog/blog-13.jpg',
+        category: 'BUSINESS',
+        title: 'How to Developers Taking the Guess Work',
+        date: 'Oct 20, 2022',
+        comment: 15,
+        sm_desc:
+            'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
+        author: 'Edward',
+        kitchen: true,
+    },
+    // kindergarten
+    {
+        id: 11,
+        img: '/assets/images/blog/blog-07.jpg',
+        category: 'ONLINE',
+        title: 'Do You Play Well With Other Children?',
+        date: 'Nov 20, 2022',
+        comment: 10,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        author: 'Edward',
+        kindergarten_blog: true,
+    },
+    {
+        id: 12,
+        img: '/assets/images/blog/blog-08.jpg',
+        category: 'HISTORY',
+        title: 'Early History of the United States',
+        date: 'Dec 20, 2022',
+        comment: 12,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        author: 'Edward',
+        kindergarten_blog: true,
+    },
+    {
+        id: 13,
+        img: '/assets/images/blog/blog-09.jpg',
+        category: 'BASEBALL',
+        title: 'What Collecting Baseball Cards Taught Me',
+        date: 'Feb 20, 2022',
+        comment: 15,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        author: 'Edward',
+        kindergarten_blog: true,
+    },
+    // modern schooling
+    {
+        id: 14,
+        img: '/assets/images/blog/blog-32.jpg',
+        category: 'ONLINE',
+        title: 'Good Things are Happening Creative Learning',
+        date: 'Oct 20, 2022',
+        comment: 14,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
+        author: 'Edward',
+        delay: '100',
+        modern_schooling_blog: true,
+    },
+    {
+        id: 15,
+        img: '/assets/images/blog/blog-33.jpg',
+        category: 'LECTURE',
+        title: 'Creating a Community of Diverse Learners',
+        date: 'Oct 15, 2022',
+        comment: 14,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
+        author: 'Edward',
+        delay: '200',
+        modern_schooling_blog: true,
+    },
+    {
+        id: 16,
+        img: '/assets/images/blog/blog-34.jpg',
+        category: 'BUSINESS',
+        title: 'Changing Lives and Giving Choices For Everyone',
+        date: 'Oct 23, 2022',
+        comment: 19,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
+        author: 'Edward',
+        delay: '300',
+        modern_schooling_blog: true,
+    },
+    {
+        id: 17,
+        img: '/assets/images/blog/blog-35.jpg',
+        category: 'BUSINESS',
+        title: 'An Excellent Foundation for Future Success',
+        date: 'Oct 30, 2022',
+        comment: 20,
+        sm_desc: 'Lorem ipsum dolor sit amet cons tetur sed idunt.',
+        author: 'Edward',
+        delay: '300',
+        modern_schooling_blog: true,
+    },
+
+    // blog standard
+    {
+        id: 18,
+        img: '/assets/images/blog/blog-14.jpg',
+        category: 'Arts & Gallery',
+        title: '4 Learning Management System Design Tips For Better eLearning',
+        date: 'Oct 10, 2022',
+        comment: '09',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
+        blog_standard: true,
+    },
+    {
+        id: 19,
+        video: true,
+        img: '/assets/images/blog/blog-15.jpg',
+        category: 'Online',
+        title: 'Fresh Inspiration For March And A Smashing Winner 2022',
+        date: 'Oct 15, 2022',
+        comment: '10',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
+        blog_standard: true,
+    },
+    {
+        id: 20,
+        slider: true,
+        images: [
+            '/assets/images/blog/blog-16_1.jpg',
+            '/assets/images/blog/blog-16_2.jpg',
+            '/assets/images/blog/blog-16_3.jpg',
+        ],
+        category: 'Education',
+        title: 'How to Developers Taking the Guess Work Generation of Business',
+        date: 'Oct 18, 2022',
+        comment: '12',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
+        blog_standard: true,
+    },
+    {
+        id: 21,
+        img: '/assets/images/blog/blog-17.jpg',
+        category: 'Developer',
+        title: 'How to Become Computer Working Days Software Engineer?',
+        date: 'Oct 20, 2022',
+        comment: '15',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
+        blog_standard: true,
+    },
+    {
+        id: 22,
+        img: '/assets/images/blog/blog-18.jpg',
+        category: 'Business',
+        title: 'Ten Benefits Of Rentals That May Change Your Perspective',
+        date: 'Jan 20, 2022',
+        comment: '18',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip.',
+        blog_standard: true,
+    },
+
+    // blog masonry
+    {
+        id: 23,
+        img: '/assets/images/blog/blog-01.jpg',
+        category: 'ONLINE',
+        title: 'Become a Better Blogger: Content Planning',
+        date: 'Sep 20, 2022',
+        comment: '08',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        blog_masonry: true,
+    },
+    {
+        id: 24,
+        img: '/assets/images/blog/blog-02.jpg',
+        category: 'Lecture',
+        title: 'Fresh Inspiration For March And A',
+        date: 'Sep 15, 2022',
+        comment: '10',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
+        blog_masonry: true,
+    },
+    {
+        id: 25,
+        img: '/assets/images/blog/blog-03.jpg',
+        category: 'Business',
+        title: 'How to Developers Taking the Guess Work',
+        date: 'Sep 17, 2022',
+        comment: '12',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
+        blog_masonry: true,
+    },
+    {
+        id: 26,
+        img: '/assets/images/blog/blog-19.jpg',
+        category: 'Business',
+        title: 'How to Become Computer Working Days',
+        date: 'Oct 17, 2022',
+        comment: '15',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore ad dolore magna aliqua enim mini veniam quis nostrud exercitation.ullamco laboris.',
+        blog_masonry: true,
+    },
+    {
+        id: 27,
+        img: '/assets/images/blog/blog-21.jpg',
+        category: 'Lecture',
+        title: 'Designing an Online Course from',
+        date: 'Nov 15, 2022',
+        comment: '20',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
+        blog_masonry: true,
+    },
+    {
+        id: 28,
+        img: '/assets/images/blog/blog-20.jpg',
+        category: 'Online',
+        title: 'Ten Benefits Of Rentals That May Change',
+        date: 'Nov 20, 2022',
+        comment: '13',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        blog_masonry: true,
+    },
+    {
+        id: 29,
+        img: '/assets/images/blog/blog-23.jpg',
+        category: 'Business',
+        title: 'How to Keep Workouts Fresh in the',
+        date: 'Nov 27, 2022',
+        comment: '16',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore ad dolore magna aliqua enim mini veniam quis nostrud exercitation.ullamco laboris.',
+        blog_masonry: true,
+    },
+    {
+        id: 30,
+        img: '/assets/images/blog/blog-24.jpg',
+        category: 'Online',
+        title: 'Become a Better Blogger: Content Planning',
+        date: 'Nov 29, 2022',
+        comment: '22',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+        blog_masonry: true,
+    },
+    {
+        id: 31,
+        img: '/assets/images/blog/blog-22.jpg',
+        category: 'Lecture',
+        title: 'Unveiling the Secrets of Online Teaching',
+        date: 'Nov 30, 2022',
+        comment: '18',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
+        blog_masonry: true,
+    },
+
+    // list blog
+    {
+        id: 32,
+        img: '/assets/images/blog/blog-25.jpg',
+        category: 'Business',
+        title: '4 Learning Management System Design Tips',
+        date: 'Sep 17, 2022',
+        comment: '12',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 33,
+        img: '/assets/images/blog/blog-26.jpg',
+        category: 'Business',
+        title: 'How to Developers Taking the Guess Work',
+        date: 'Oct 17, 2022',
+        comment: '15',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 34,
+        img: '/assets/images/blog/blog-27.jpg',
+        category: 'Lecture',
+        title: 'Ten Benefits Of Rentals That May Change Your',
+        date: 'Nov 15, 2022',
+        comment: '20',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 35,
+        img: '/assets/images/blog/blog-28.jpg',
+        category: 'Online',
+        title: 'Fresh Inspiration For March And A Smashing',
+        date: 'Nov 20, 2022',
+        comment: '13',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 36,
+        img: '/assets/images/blog/blog-29.jpg',
+        category: 'Business',
+        title: 'Fresh Inspiration For March And A Smashing',
+        date: 'Nov 27, 2022',
+        comment: '16',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 37,
+        img: '/assets/images/blog/blog-30.jpg',
+        category: 'Online',
+        title: 'How to Developers Taking the Guess Work',
+        date: 'Nov 29, 2022',
+        comment: '22',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+    {
+        id: 38,
+        img: '/assets/images/blog/blog-31.jpg',
+        category: 'Lecture',
+        title: 'Ten Benefits Of Rentals That May Change',
+        date: 'Nov 30, 2022',
+        comment: '18',
+        desc: 'Lorem ipsum dolor sit amet cons tetur adip isicing sed eiusmod.',
+        blog_list: true,
+    },
+];
+
+export default blog_data;
diff --git a/src/data/course-data.js b/src/data/course-data.js
deleted file mode 100644
index ef6ea06..0000000
--- a/src/data/course-data.js
+++ /dev/null
@@ -1,2193 +0,0 @@
-const course_data = [
-  {
-    id: 1,
-    img: 'course-01.jpg',
-    duration: '4 Weeks',
-    course_outline:'Online + Onsite',
-    level: 'Advanced',
-    title: 'Starting SEO as your Home Based Business',
-    rating: '4.9',
-    rating_count: 8,
-    course_price: '49.00',
-    lesson: 13,
-    student: 28,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Jane Seymour',
-    instructor_img:'team-01.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 2,
-    img: 'course-02.jpg',
-    duration: '3 Weeks',
-    course_outline:'Online Only',
-    level: 'Beginner',
-    title: 'Java Programming Masterclass for Software Developers',
-    rating: '4.4',
-    rating_count: 10,
-    course_price: '78.99',
-    lesson: 15,
-    student: 35,
-    category:'Development',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Susan White',
-    instructor_img:'team-05.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'Korean',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 3,
-    img: 'course-03.jpg',
-    duration: '10 Weeks',
-    course_outline:'Onsite Only',
-    level: 'Advanced',
-    title: 'Building A Better World One Student At A Time',
-    rating: '5.0',
-    rating_count: 15,
-    course_price: '64.99',
-    lesson: 18,
-    student: 33,
-    category:'Business',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Penelope Cruz',
-    instructor_img:'team-02.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 4,
-    img: 'course-04.jpg',
-    duration: '6 Weeks',
-    course_outline:'Online Only',
-    level: 'Intermediate',
-    title: 'Master Your Personal Brand Like a Marketing Pro',
-    rating: '4.5',
-    rating_count: 18,
-    course_price: '55.99',
-    lesson: 20,
-    student: 38,
-    category:'Academics',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'John Travolta',
-    instructor_img:'team-02.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'German',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 5,
-    img: 'course-05.jpg',
-    duration: '6 Weeks',
-    course_outline:'Online + Onsite',
-    level: 'Advanced',
-    title: 'The Complete 2023 Web Development Bootcamp',
-    rating: '4.8',
-    rating_count: 27,
-    course_price: '49.99',
-    lesson: 35,
-    student: 48,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Edward Norton',
-    instructor_img:'team-02.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 6,
-    img: 'course-06.jpg',
-    duration: '9 Weeks',
-    course_outline:'Online + Onsite',
-    level: 'Intermediate',
-    title: 'Python for Beginners - Learn Programming from scratch',
-    rating: '4.9',
-    rating_count: 30,
-    course_price: '64.99',
-    lesson: 12,
-    student: 85,
-    category:'Marketing',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Penelope Cruz',
-    instructor_img:'team-05.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 7,
-    university_courses:true,
-    img: 'course-07.jpg',
-    filter_category:["undergraduate","graduate"],
-    duration: '6 Weeks',
-    course_outline:'Online + Onsite',
-    level: 'Business',
-    title: 'Public Administration',
-    rating: '5.0',
-    rating_count: 11,
-    course_price: '69.99',
-    lesson: 20,
-    student: 38,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'Jane Seymour',
-    instructor_img:'team-05.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language:'Hindi',
-    certificate:'yes',
-    videoId:'c238xxeDdFI',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 8,
-    university_courses:true,
-    img: 'course-08.jpg',
-    filter_category:["undergraduate","graduate"],
-    duration: '10 Weeks',
-    course_outline:'Online + Onsite',
-    level: 'Business',
-    title: 'Major in Economics',
-    rating: '4.9',
-    rating_count: 15,
-    course_price: '72.99',
-    lesson: 20,
-    student: 35,
-    category:'Development',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'Susan White',
-    instructor_img:'team-05.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 9,
-    university_courses:true,
-    img: 'course-09.jpg',
-    filter_category:["undergraduate","online"],
-    duration: '3 Weeks',
-    level: 'Business',
-    course_outline:'Online Only',
-    title: 'Business Studies',
-    rating: '4.4',
-    rating_count: 10,
-    course_price: '78.99',
-    lesson: 15,
-    student: 35,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'Penelope Cruz',
-    instructor_img:'team-02.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'Korean',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 10,
-    duration: '12 Weeks',
-    course_outline:'Onsite Only',
-    img: 'course-10.jpg',
-    hours: 35,
-    level: 'Beginner',
-    title: 'Master Microservices with Spring Boot and Spring Cloud',
-    rating: '5',
-    rating_count: 8,
-    course_price: '35',
-    lesson: 13,
-    student: 35,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Edward Norton',
-    instructor_img:'team-02.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 11,
-    duration: '9 Weeks',
-    course_outline:'Online Only',
-    img: 'course-11.jpg',
-    hours: 45,
-    level: 'Intermediate',
-    title: 'The Complete Angular Course: Beginner to Advanced',
-    rating: '4.8',
-    rating_count: 16,
-    course_price: '40',
-    lesson: 18,
-    student: 42,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Connie Comerford',
-    instructor_img:'team-06.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'German',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 12,
-    duration: '8 Weeks',
-    course_outline:'Online + Onsite',
-    img: 'course-12.jpg',
-    hours: 20,
-    level: 'Advanced',
-    title: 'Vue - The Complete Guide (w/ Router, Vuex, Composition API)',
-    rating: '5',
-    rating_count: 20,
-    course_price: '50',
-    lesson: 8,
-    student: 50,
-    category:'Marketing',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Edward Norton',
-    instructor_img:'team-02.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'Hindi',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 13,
-    duration: '14 Weeks',
-    course_outline:'Onsite Only',
-    img: 'course-13.jpg',
-    hours: 25,
-    level: 'Power Yoga',
-    title: 'Build Responsive Real- World Websites with HTML and CSS',
-    rating: '4.5',
-    rating_count: 20,
-    course_price: '30',
-    lesson: 18,
-    student: 25,
-    category:'Academics',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Jane Seymour',
-    instructor_img:'team-01.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  // kitchen course
-  {
-    id: 14,
-    kitchen_course:true,
-    course_outline:'Online Only',
-    duration: '16 Weeks',
-    img: 'course-14.jpg',
-    hours: 30,
-    level: 'Cooking',
-    title: 'Healthy Sushi Roll - Japanese Popular Cooking Class',
-    rating: '5',
-    rating_count: 35,
-    course_price: '40',
-    lesson: 22,
-    student: 28,
-    category:'Marketing',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Susan White',
-    instructor_img:'team-05.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Professional Japanese cooking from beginners to experts',
-      'Will be able to cook authentic Italian recipes in their own kitchen',
-      'Understand the HOW of cooking, before thinking of the WHAT to cook.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 15,
-    kitchen_course:true,
-    duration: '15 Weeks',
-    course_outline:'Online + Onsite',
-    img: 'course-15.jpg',
-    hours: 32,
-    level: 'Cooking',
-    title: 'Nutrition Kitchen - Basics of Cooking for Busy People',
-    rating: '4',
-    rating_count: 38,
-    course_price: '50',
-    lesson: 15,
-    student: 31,
-    category:'Business',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Penelope Cruz',
-    instructor_img:'team-03.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Prepare a huge variety of simple, delicious, healthy recipes.',
-      'Professional Indian cooking from beginners to experts.',
-      'Serve delicious and healthy meals for your loved ones.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 16,
-    kitchen_course:true,
-    duration: '13 Weeks',
-    course_outline:'Onsite Only',
-    img: 'course-16.jpg',
-    hours: 35,
-    level: 'Cooking',
-    title: 'Authentic Kerala Cooking - The South Indian Cuisine',
-    rating: '5',
-    rating_count: 40,
-    course_price: '60',
-    lesson: 20,
-    student: 36,
-    category:'Academics',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Edward Norton',
-    instructor_img:'team-02.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Cook much loved recipes like ravioli, pizza and pesto from scratch',
-      'Cook better than restaurant Thai food at home',
-      'Keep your food safe from harmful bacteria and disease.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 17,
-    kitchen_course:true,
-    duration: '20 Weeks',
-    course_outline:'Online + Onsite',
-    img: 'course-17.jpg',
-    hours: 40,
-    level: 'Cooking',
-    title: 'Vegan Thai Cooking Classes Popular Vegan Recipes',
-    rating: '5',
-    rating_count: 35,
-    course_price: '30',
-    lesson: 22,
-    student: 40,
-    category:'Development',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'Edward Norton',
-    instructor_img:'team-02.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Professional Indian cooking from beginners to experts.',
-      'Prepare a huge variety of simple, delicious, healthy recipes.',
-      'Serve delicious and healthy meals for your loved ones.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 18,
-    kitchen_course:true,
-    duration: '15 Weeks',
-    course_outline:'Online + Onsite',
-    img: 'course-18.jpg',
-    hours: 32,
-    level: 'Cooking',
-    title: 'Indian Culinary World - Master the art of Indian Cooking',
-    rating: '4',
-    rating_count: 38,
-    course_price: '50',
-    lesson: 15,
-    student: 31,
-    category:'Business',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Susan White',
-    instructor_img:'team-05.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Prepare a huge variety of simple, delicious, healthy recipes.',
-      'Professional Indian cooking from beginners to experts.',
-      'Serve delicious and healthy meals for your loved ones.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 19,
-    kitchen_course:true,
-    duration: '13 Weeks',
-    course_outline:'Onsite Only',
-    img: 'course-19.jpg',
-    hours: 35,
-    level: 'Cooking',
-    title: 'Herbalism - Medicinal Kitchen Herbs & Spices Certificate',
-    rating: '5',
-    rating_count: 40,
-    course_price: '60',
-    lesson: 20,
-    student: 36,
-    category:'Academics',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Jane Seymour',
-    instructor_img:'team-01.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Cook much loved recipes like ravioli, pizza and pesto from scratch',
-      'Cook better than restaurant Thai food at home',
-      'Keep your food safe from harmful bacteria and disease.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 20,
-    yoga_course: true,
-    img: 'course-20.jpg',
-    duration: '9 Weeks',
-    course_outline:'Onsite Only',
-    level: 'Power Yoga',
-    title: 'Yoga for Back Pain Relief',
-    rating: '4.9',
-    rating_count: 30,
-    course_price: '30',
-    lesson: 12,
-    student: 85,
-    category:'Marketing',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Edward Norton',
-    instructor_img:'team-02.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 21,
-    yoga_course: true,
-    img: 'course-21.jpg',
-    duration: '5 Weeks',
-    course_outline:'Online + Onsite',
-    level: 'Power Yoga',
-    title: 'Super Brain YOGA',
-    rating: '5.0',
-    rating_count: 11,
-    course_price: '40',
-    lesson: 20,
-    student: 38,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'John Travolta',
-    instructor_img:'team-04.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language:'Hindi',
-    certificate:'yes',
-    videoId:'c238xxeDdFI',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 22,
-    yoga_course:true,
-    img: 'course-22.jpg',
-    duration: '10 Weeks',
-    course_outline:'Online + Onsite',
-    level: 'Power Yoga',
-    title: 'Chair Yoga for Seniors',
-    rating: '4.9',
-    rating_count: 15,
-    course_price: '50',
-    lesson: 20,
-    student: 35,
-    category:'Development',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'John Travolta',
-    instructor_img:'team-04.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 23,
-    yoga_course: true,
-    img: 'course-23.jpg',
-    duration: '3 Weeks',
-    level: 'Power Yoga',
-    course_outline:'Online Only',
-    title: 'Online Yoga for Beginners',
-    rating: '4.4',
-    rating_count: 10,
-    course_price: '60',
-    lesson: 15,
-    student: 35,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'John Travolta',
-    instructor_img:'team-04.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'Korean',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Learn to use Python professionally, learning both Python 2 & Python 3!', 'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)', 'Understand the Theory behind Vue.js and use it in Real Projects', 'Create responsive, accessible, and beautiful layouts'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 24,
-    yoga_course: true,
-    duration: '12 Weeks',
-    course_outline:'Online Only',
-    img: 'course-24.jpg',
-    hours: 35,
-    level: 'Chair Yoga',
-    title: 'Yoga Nidra Master Class',
-    rating: '5',
-    rating_count: 8,
-    course_price: '70',
-    lesson: 13,
-    student: 35,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Jane Seymour',
-    instructor_img:'team-01.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 25,
-    yoga_course: true,
-    duration: '9 Weeks',
-    course_outline:'Online Only',
-    img: 'course-25.jpg',
-    hours: 45,
-    level: 'Chair Yoga',
-    title: 'Gentle Seated Chair Yoga',
-    rating: '4.8',
-    rating_count: 16,
-    course_price: '80',
-    lesson: 18,
-    student: 42,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
-    instructor: 'Jane Seymour',
-    instructor_img:'team-01.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'German',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
- // kindergarten course
-  {
-    id: 26,
-    kindergarten_course:true,
-    duration: '5 Weeks',
-    course_outline:'Online + Onsite',
-    img: 'course-26.jpg',
-    bg_color:'bg-color-extra02',
-    hours: 12,
-    level: 'Drawing',
-    title: 'Powerful Calming Techniques For Kids and Teens',
-    rating: '4.5',
-    rating_count: 40,
-    course_price: '40',
-    lesson: 25,
-    student: 45,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'Jane Seymour',
-    instructor_img:'team-01.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 27,
-    kindergarten_course:true,
-    duration: '12 Weeks',
-    course_outline:'Online + Onsite',
-    img: 'course-27.jpg',
-    bg_color:'bg-color-primary',
-    hours: 41,
-    level: 'Parenting',
-    title: 'Parenting Skills to Raise Responsible Children',
-    rating: '5',
-    rating_count: 42,
-    course_price: '50',
-    lesson: 28,
-    student: 50,
-    category:'Development',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'Connie Comerford',
-    instructor_img:'team-06.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 28,
-    kindergarten_course:true,
-    duration: '5 Weeks',
-    course_outline:'Onsite Only',
-    img: 'course-28.jpg',
-    bg_color:'bg-color-secondary',
-    hours: 12,
-    level: 'Drawing',
-    title: 'The Ultimate Drawing Course - Beginner to Advanced',
-    rating: '4.5',
-    rating_count: 40,
-    course_price: '60',
-    lesson: 25,
-    student: 45,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'Connie Comerford',
-    instructor_img:'team-06.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 29,
-    kindergarten_course:true,
-    duration: '12 Weeks',
-    course_outline:'Online + Onsite',
-    img: 'course-29.jpg',
-    bg_color:'bg-color-extra02',
-    hours: 41,
-    level: 'Parenting',
-    title: 'Public Speaking for Kids (& Parents) Kids Can Speak!',
-    rating: '5',
-    rating_count: 42,
-    course_price: '70',
-    lesson: 28,
-    student: 50,
-    category:'Development',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'Connie Comerford',
-    instructor_img:'team-06.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 30,
-    kindergarten_course:true,
-    duration: '5 Weeks',
-    course_outline:'Online Only',
-    img: 'course-30.jpg',
-    bg_color:'bg-color-primary',
-    hours: 12,
-    level: 'Drawing',
-    title: 'Real-World Programming for Kids with Python',
-    rating: '4.5',
-    rating_count: 40,
-    course_price: '80',
-    lesson: 25,
-    student: 45,
-    category:'Art & Design',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'Susan White',
-    instructor_img:'team-05.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  },
-  {
-    id: 31,
-    kindergarten_course:true,
-    duration: '12 Weeks',
-    course_outline:'Online + Onsite',
-    img: 'course-31.jpg',
-    bg_color:'bg-color-secondary',
-    hours: 41,
-    level: 'Parenting',
-    title: 'How to Get Kids to Eat Healthy',
-    rating: '5',
-    rating_count: 42,
-    course_price: '90',
-    lesson: 28,
-    student: 50,
-    category:'Development',
-    short_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    instructor: 'Jane Seymour',
-    instructor_img:'team-01.webp',
-    instructor_title:'Founder & CEO',
-    instructor_desc:'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
-    features: [
-      'Build fully-fledged websites and web apps for your business.',
-      'After the course you will be able to build ANY website you want.',
-      'You will master both front and back-end development technologies.'
-    ],
-    social_links:[
-      {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-      {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-      {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'},
-      {link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube'}
-    ],
-    language: 'English',
-    certificate: 'yes',
-    videoId: 'PICj5tr9hcc',
-    course_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
-    course_desc_2: 'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
-    learn_list: ['Professional Japanese cooking from beginners to experts','Will be able to cook authentic Italian recipes in their own kitchen','Understand the HOW of cooking, before thinking of the WHAT to cook.'],
-    course_desc_3: 'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
-    curriculum_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
-    course_lessons: [
-      {
-        title: 'Week 1-4',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Introduction', icon: 'icon-68' },
-          { title: 'Course Overview', icon: 'icon-68' },
-          { title: 'Course Overview', badge_list: true, question: 0, minutes: 10 },
-          { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
-          { title: 'Code Editor Installation (Optional if you have one)', icon: 'icon-68' },
-          { title: ' Embedding PHP in HTML', icon: 'icon-68' },
-        ]
-      },
-      {
-        title: 'Week 5-8',
-        text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
-        lessons: [
-          { title: 'Defining Functions', icon: 'icon-68' },
-          { title: 'Function Parameters', icon: 'icon-68' },
-          { title: ' Return Values From Functions', badge_list: true, question: 2, minutes: 15 },
-          { title: ' Global Variable and Scope', icon: 'icon-68' },
-          { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
-          { title: 'Constants', icon: 'icon-68' },
-        ]
-      },
-    ],
-    reviews:[
-      {img:'/assets/images/blog/comment-01.jpg',rating:5,name:'Haley Bennet',date:'Oct 10, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-02.jpg',rating:5,name:'Simon Baker',date:'Oct 15, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-      {img:'/assets/images/blog/comment-03.jpg',rating:5,name:'Richard Gere',date:'Oct 19, 2021',desc:'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
-    ]
-  }
-]
-
-export default course_data;
diff --git a/src/data/course-data.ts b/src/data/course-data.ts
new file mode 100644
index 0000000..d565b18
--- /dev/null
+++ b/src/data/course-data.ts
@@ -0,0 +1,3672 @@
+type SocialLink = {
+    link: string;
+    target: string;
+    icon: string;
+};
+
+type Lesson =
+    | {
+          title: string;
+          icon: string;
+      }
+    | {
+          title: string;
+          badge_list: boolean;
+          question: number;
+          minutes: number;
+      };
+
+type CourseLesson = {
+    title: string;
+    text: string;
+    lessons: Lesson[];
+};
+
+type Review = {
+    img: string;
+    rating: number;
+    name: string;
+    date: string;
+    desc: string;
+};
+
+type Course = {
+    id: number;
+    university_courses?: true;
+    kitchen_course?: true;
+    yoga_course?: true;
+    kindergarten_course?: true;
+    img: string;
+    bg_color?: string;
+    hours?: number;
+    filter_category?: string[];
+    duration: string;
+    course_outline: string;
+    level: string;
+    title: string;
+    rating: string;
+    rating_count: number;
+    course_price: string;
+    lesson: number;
+    student: number;
+    category: string;
+    short_desc: string;
+    instructor: string;
+    instructor_img: string;
+    instructor_title: string;
+    instructor_desc: string;
+    features: string[];
+    social_links: SocialLink[];
+    language: string;
+    certificate: string;
+    videoId: string;
+    course_desc: string;
+    course_desc_2: string;
+    learn_list: string[];
+    course_desc_3: string;
+    curriculum_desc: string;
+    course_lessons: CourseLesson[];
+    reviews: Review[];
+};
+
+const course_data: Course[] = [
+    {
+        id: 1,
+        img: 'course-01.jpg',
+        duration: '4 Weeks',
+        course_outline: 'Online + Onsite',
+        level: 'Advanced',
+        title: 'Starting SEO as your Home Based Business',
+        rating: '4.9',
+        rating_count: 8,
+        course_price: '49.00',
+        lesson: 13,
+        student: 28,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Jane Seymour',
+        instructor_img: 'team-01.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 2,
+        img: 'course-02.jpg',
+        duration: '3 Weeks',
+        course_outline: 'Online Only',
+        level: 'Beginner',
+        title: 'Java Programming Masterclass for Software Developers',
+        rating: '4.4',
+        rating_count: 10,
+        course_price: '78.99',
+        lesson: 15,
+        student: 35,
+        category: 'Development',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Susan White',
+        instructor_img: 'team-05.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'Korean',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 3,
+        img: 'course-03.jpg',
+        duration: '10 Weeks',
+        course_outline: 'Onsite Only',
+        level: 'Advanced',
+        title: 'Building A Better World One Student At A Time',
+        rating: '5.0',
+        rating_count: 15,
+        course_price: '64.99',
+        lesson: 18,
+        student: 33,
+        category: 'Business',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Penelope Cruz',
+        instructor_img: 'team-02.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 4,
+        img: 'course-04.jpg',
+        duration: '6 Weeks',
+        course_outline: 'Online Only',
+        level: 'Intermediate',
+        title: 'Master Your Personal Brand Like a Marketing Pro',
+        rating: '4.5',
+        rating_count: 18,
+        course_price: '55.99',
+        lesson: 20,
+        student: 38,
+        category: 'Academics',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'John Travolta',
+        instructor_img: 'team-02.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'German',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 5,
+        img: 'course-05.jpg',
+        duration: '6 Weeks',
+        course_outline: 'Online + Onsite',
+        level: 'Advanced',
+        title: 'The Complete 2023 Web Development Bootcamp',
+        rating: '4.8',
+        rating_count: 27,
+        course_price: '49.99',
+        lesson: 35,
+        student: 48,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Edward Norton',
+        instructor_img: 'team-02.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 6,
+        img: 'course-06.jpg',
+        duration: '9 Weeks',
+        course_outline: 'Online + Onsite',
+        level: 'Intermediate',
+        title: 'Python for Beginners - Learn Programming from scratch',
+        rating: '4.9',
+        rating_count: 30,
+        course_price: '64.99',
+        lesson: 12,
+        student: 85,
+        category: 'Marketing',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Penelope Cruz',
+        instructor_img: 'team-05.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 7,
+        university_courses: true,
+        img: 'course-07.jpg',
+        filter_category: ['undergraduate', 'graduate'],
+        duration: '6 Weeks',
+        course_outline: 'Online + Onsite',
+        level: 'Business',
+        title: 'Public Administration',
+        rating: '5.0',
+        rating_count: 11,
+        course_price: '69.99',
+        lesson: 20,
+        student: 38,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'Jane Seymour',
+        instructor_img: 'team-05.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'Hindi',
+        certificate: 'yes',
+        videoId: 'c238xxeDdFI',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 8,
+        university_courses: true,
+        img: 'course-08.jpg',
+        filter_category: ['undergraduate', 'graduate'],
+        duration: '10 Weeks',
+        course_outline: 'Online + Onsite',
+        level: 'Business',
+        title: 'Major in Economics',
+        rating: '4.9',
+        rating_count: 15,
+        course_price: '72.99',
+        lesson: 20,
+        student: 35,
+        category: 'Development',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'Susan White',
+        instructor_img: 'team-05.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 9,
+        university_courses: true,
+        img: 'course-09.jpg',
+        filter_category: ['undergraduate', 'online'],
+        duration: '3 Weeks',
+        level: 'Business',
+        course_outline: 'Online Only',
+        title: 'Business Studies',
+        rating: '4.4',
+        rating_count: 10,
+        course_price: '78.99',
+        lesson: 15,
+        student: 35,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'Penelope Cruz',
+        instructor_img: 'team-02.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'Korean',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 10,
+        duration: '12 Weeks',
+        course_outline: 'Onsite Only',
+        img: 'course-10.jpg',
+        hours: 35,
+        level: 'Beginner',
+        title: 'Master Microservices with Spring Boot and Spring Cloud',
+        rating: '5',
+        rating_count: 8,
+        course_price: '35',
+        lesson: 13,
+        student: 35,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Edward Norton',
+        instructor_img: 'team-02.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 11,
+        duration: '9 Weeks',
+        course_outline: 'Online Only',
+        img: 'course-11.jpg',
+        hours: 45,
+        level: 'Intermediate',
+        title: 'The Complete Angular Course: Beginner to Advanced',
+        rating: '4.8',
+        rating_count: 16,
+        course_price: '40',
+        lesson: 18,
+        student: 42,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Connie Comerford',
+        instructor_img: 'team-06.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'German',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 12,
+        duration: '8 Weeks',
+        course_outline: 'Online + Onsite',
+        img: 'course-12.jpg',
+        hours: 20,
+        level: 'Advanced',
+        title: 'Vue - The Complete Guide (w/ Router, Vuex, Composition API)',
+        rating: '5',
+        rating_count: 20,
+        course_price: '50',
+        lesson: 8,
+        student: 50,
+        category: 'Marketing',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Edward Norton',
+        instructor_img: 'team-02.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'Hindi',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 13,
+        duration: '14 Weeks',
+        course_outline: 'Onsite Only',
+        img: 'course-13.jpg',
+        hours: 25,
+        level: 'Power Yoga',
+        title: 'Build Responsive Real- World Websites with HTML and CSS',
+        rating: '4.5',
+        rating_count: 20,
+        course_price: '30',
+        lesson: 18,
+        student: 25,
+        category: 'Academics',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Jane Seymour',
+        instructor_img: 'team-01.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    // kitchen course
+    {
+        id: 14,
+        kitchen_course: true,
+        course_outline: 'Online Only',
+        duration: '16 Weeks',
+        img: 'course-14.jpg',
+        hours: 30,
+        level: 'Cooking',
+        title: 'Healthy Sushi Roll - Japanese Popular Cooking Class',
+        rating: '5',
+        rating_count: 35,
+        course_price: '40',
+        lesson: 22,
+        student: 28,
+        category: 'Marketing',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Susan White',
+        instructor_img: 'team-05.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 15,
+        kitchen_course: true,
+        duration: '15 Weeks',
+        course_outline: 'Online + Onsite',
+        img: 'course-15.jpg',
+        hours: 32,
+        level: 'Cooking',
+        title: 'Nutrition Kitchen - Basics of Cooking for Busy People',
+        rating: '4',
+        rating_count: 38,
+        course_price: '50',
+        lesson: 15,
+        student: 31,
+        category: 'Business',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Penelope Cruz',
+        instructor_img: 'team-03.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Prepare a huge variety of simple, delicious, healthy recipes.',
+            'Professional Indian cooking from beginners to experts.',
+            'Serve delicious and healthy meals for your loved ones.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 16,
+        kitchen_course: true,
+        duration: '13 Weeks',
+        course_outline: 'Onsite Only',
+        img: 'course-16.jpg',
+        hours: 35,
+        level: 'Cooking',
+        title: 'Authentic Kerala Cooking - The South Indian Cuisine',
+        rating: '5',
+        rating_count: 40,
+        course_price: '60',
+        lesson: 20,
+        student: 36,
+        category: 'Academics',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Edward Norton',
+        instructor_img: 'team-02.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Cook much loved recipes like ravioli, pizza and pesto from scratch',
+            'Cook better than restaurant Thai food at home',
+            'Keep your food safe from harmful bacteria and disease.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 17,
+        kitchen_course: true,
+        duration: '20 Weeks',
+        course_outline: 'Online + Onsite',
+        img: 'course-17.jpg',
+        hours: 40,
+        level: 'Cooking',
+        title: 'Vegan Thai Cooking Classes Popular Vegan Recipes',
+        rating: '5',
+        rating_count: 35,
+        course_price: '30',
+        lesson: 22,
+        student: 40,
+        category: 'Development',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'Edward Norton',
+        instructor_img: 'team-02.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Professional Indian cooking from beginners to experts.',
+            'Prepare a huge variety of simple, delicious, healthy recipes.',
+            'Serve delicious and healthy meals for your loved ones.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 18,
+        kitchen_course: true,
+        duration: '15 Weeks',
+        course_outline: 'Online + Onsite',
+        img: 'course-18.jpg',
+        hours: 32,
+        level: 'Cooking',
+        title: 'Indian Culinary World - Master the art of Indian Cooking',
+        rating: '4',
+        rating_count: 38,
+        course_price: '50',
+        lesson: 15,
+        student: 31,
+        category: 'Business',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Susan White',
+        instructor_img: 'team-05.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Prepare a huge variety of simple, delicious, healthy recipes.',
+            'Professional Indian cooking from beginners to experts.',
+            'Serve delicious and healthy meals for your loved ones.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 19,
+        kitchen_course: true,
+        duration: '13 Weeks',
+        course_outline: 'Onsite Only',
+        img: 'course-19.jpg',
+        hours: 35,
+        level: 'Cooking',
+        title: 'Herbalism - Medicinal Kitchen Herbs & Spices Certificate',
+        rating: '5',
+        rating_count: 40,
+        course_price: '60',
+        lesson: 20,
+        student: 36,
+        category: 'Academics',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Jane Seymour',
+        instructor_img: 'team-01.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Cook much loved recipes like ravioli, pizza and pesto from scratch',
+            'Cook better than restaurant Thai food at home',
+            'Keep your food safe from harmful bacteria and disease.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 20,
+        yoga_course: true,
+        img: 'course-20.jpg',
+        duration: '9 Weeks',
+        course_outline: 'Onsite Only',
+        level: 'Power Yoga',
+        title: 'Yoga for Back Pain Relief',
+        rating: '4.9',
+        rating_count: 30,
+        course_price: '30',
+        lesson: 12,
+        student: 85,
+        category: 'Marketing',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Edward Norton',
+        instructor_img: 'team-02.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 21,
+        yoga_course: true,
+        img: 'course-21.jpg',
+        duration: '5 Weeks',
+        course_outline: 'Online + Onsite',
+        level: 'Power Yoga',
+        title: 'Super Brain YOGA',
+        rating: '5.0',
+        rating_count: 11,
+        course_price: '40',
+        lesson: 20,
+        student: 38,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'John Travolta',
+        instructor_img: 'team-04.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'Hindi',
+        certificate: 'yes',
+        videoId: 'c238xxeDdFI',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 22,
+        yoga_course: true,
+        img: 'course-22.jpg',
+        duration: '10 Weeks',
+        course_outline: 'Online + Onsite',
+        level: 'Power Yoga',
+        title: 'Chair Yoga for Seniors',
+        rating: '4.9',
+        rating_count: 15,
+        course_price: '50',
+        lesson: 20,
+        student: 35,
+        category: 'Development',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'John Travolta',
+        instructor_img: 'team-04.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 23,
+        yoga_course: true,
+        img: 'course-23.jpg',
+        duration: '3 Weeks',
+        level: 'Power Yoga',
+        course_outline: 'Online Only',
+        title: 'Online Yoga for Beginners',
+        rating: '4.4',
+        rating_count: 10,
+        course_price: '60',
+        lesson: 15,
+        student: 35,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'John Travolta',
+        instructor_img: 'team-04.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'Korean',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Learn to use Python professionally, learning both Python 2 & Python 3!',
+            'Build 6 beautiful real-world projects for your portfolio (not boring toy apps)',
+            'Understand the Theory behind Vue.js and use it in Real Projects',
+            'Create responsive, accessible, and beautiful layouts',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 24,
+        yoga_course: true,
+        duration: '12 Weeks',
+        course_outline: 'Online Only',
+        img: 'course-24.jpg',
+        hours: 35,
+        level: 'Chair Yoga',
+        title: 'Yoga Nidra Master Class',
+        rating: '5',
+        rating_count: 8,
+        course_price: '70',
+        lesson: 13,
+        student: 35,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Jane Seymour',
+        instructor_img: 'team-01.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 25,
+        yoga_course: true,
+        duration: '9 Weeks',
+        course_outline: 'Online Only',
+        img: 'course-25.jpg',
+        hours: 45,
+        level: 'Chair Yoga',
+        title: 'Gentle Seated Chair Yoga',
+        rating: '4.8',
+        rating_count: 16,
+        course_price: '80',
+        lesson: 18,
+        student: 42,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod tempor.',
+        instructor: 'Jane Seymour',
+        instructor_img: 'team-01.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'German',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    // kindergarten course
+    {
+        id: 26,
+        kindergarten_course: true,
+        duration: '5 Weeks',
+        course_outline: 'Online + Onsite',
+        img: 'course-26.jpg',
+        bg_color: 'bg-color-extra02',
+        hours: 12,
+        level: 'Drawing',
+        title: 'Powerful Calming Techniques For Kids and Teens',
+        rating: '4.5',
+        rating_count: 40,
+        course_price: '40',
+        lesson: 25,
+        student: 45,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'Jane Seymour',
+        instructor_img: 'team-01.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 27,
+        kindergarten_course: true,
+        duration: '12 Weeks',
+        course_outline: 'Online + Onsite',
+        img: 'course-27.jpg',
+        bg_color: 'bg-color-primary',
+        hours: 41,
+        level: 'Parenting',
+        title: 'Parenting Skills to Raise Responsible Children',
+        rating: '5',
+        rating_count: 42,
+        course_price: '50',
+        lesson: 28,
+        student: 50,
+        category: 'Development',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'Connie Comerford',
+        instructor_img: 'team-06.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 28,
+        kindergarten_course: true,
+        duration: '5 Weeks',
+        course_outline: 'Onsite Only',
+        img: 'course-28.jpg',
+        bg_color: 'bg-color-secondary',
+        hours: 12,
+        level: 'Drawing',
+        title: 'The Ultimate Drawing Course - Beginner to Advanced',
+        rating: '4.5',
+        rating_count: 40,
+        course_price: '60',
+        lesson: 25,
+        student: 45,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'Connie Comerford',
+        instructor_img: 'team-06.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 29,
+        kindergarten_course: true,
+        duration: '12 Weeks',
+        course_outline: 'Online + Onsite',
+        img: 'course-29.jpg',
+        bg_color: 'bg-color-extra02',
+        hours: 41,
+        level: 'Parenting',
+        title: 'Public Speaking for Kids (& Parents) Kids Can Speak!',
+        rating: '5',
+        rating_count: 42,
+        course_price: '70',
+        lesson: 28,
+        student: 50,
+        category: 'Development',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'Connie Comerford',
+        instructor_img: 'team-06.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 30,
+        kindergarten_course: true,
+        duration: '5 Weeks',
+        course_outline: 'Online Only',
+        img: 'course-30.jpg',
+        bg_color: 'bg-color-primary',
+        hours: 12,
+        level: 'Drawing',
+        title: 'Real-World Programming for Kids with Python',
+        rating: '4.5',
+        rating_count: 40,
+        course_price: '80',
+        lesson: 25,
+        student: 45,
+        category: 'Art & Design',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'Susan White',
+        instructor_img: 'team-05.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+    {
+        id: 31,
+        kindergarten_course: true,
+        duration: '12 Weeks',
+        course_outline: 'Online + Onsite',
+        img: 'course-31.jpg',
+        bg_color: 'bg-color-secondary',
+        hours: 41,
+        level: 'Parenting',
+        title: 'How to Get Kids to Eat Healthy',
+        rating: '5',
+        rating_count: 42,
+        course_price: '90',
+        lesson: 28,
+        student: 50,
+        category: 'Development',
+        short_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        instructor: 'Jane Seymour',
+        instructor_img: 'team-01.webp',
+        instructor_title: 'Founder & CEO',
+        instructor_desc:
+            'Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua enim minim veniam quis nostrud exercitation ulla mco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate.',
+        features: [
+            'Build fully-fledged websites and web apps for your business.',
+            'After the course you will be able to build ANY website you want.',
+            'You will master both front and back-end development technologies.',
+        ],
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+            { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube' },
+        ],
+        language: 'English',
+        certificate: 'yes',
+        videoId: 'PICj5tr9hcc',
+        course_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur enim ipsam.',
+        course_desc_2:
+            'Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
+        learn_list: [
+            'Professional Japanese cooking from beginners to experts',
+            'Will be able to cook authentic Italian recipes in their own kitchen',
+            'Understand the HOW of cooking, before thinking of the WHAT to cook.',
+        ],
+        course_desc_3:
+            'Consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat duis aute irure dolor.',
+        curriculum_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc idid unt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exerec tation ullamco laboris nis aliquip commodo consequat.',
+        course_lessons: [
+            {
+                title: 'Week 1-4',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Introduction', icon: 'icon-68' },
+                    { title: 'Course Overview', icon: 'icon-68' },
+                    {
+                        title: 'Course Overview',
+                        badge_list: true,
+                        question: 0,
+                        minutes: 10,
+                    },
+                    { title: 'Course Exercise / Reference Files', icon: 'icon-68' },
+                    {
+                        title: 'Code Editor Installation (Optional if you have one)',
+                        icon: 'icon-68',
+                    },
+                    { title: ' Embedding PHP in HTML', icon: 'icon-68' },
+                ],
+            },
+            {
+                title: 'Week 5-8',
+                text: 'Advanced story telling techniques for writers: Personas, Characters & Plots',
+                lessons: [
+                    { title: 'Defining Functions', icon: 'icon-68' },
+                    { title: 'Function Parameters', icon: 'icon-68' },
+                    {
+                        title: ' Return Values From Functions',
+                        badge_list: true,
+                        question: 2,
+                        minutes: 15,
+                    },
+                    { title: ' Global Variable and Scope', icon: 'icon-68' },
+                    { title: 'Newer Way of creating a Constant', icon: 'icon-68' },
+                    { title: 'Constants', icon: 'icon-68' },
+                ],
+            },
+        ],
+        reviews: [
+            {
+                img: '/assets/images/blog/comment-01.jpg',
+                rating: 5,
+                name: 'Haley Bennet',
+                date: 'Oct 10, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-02.jpg',
+                rating: 5,
+                name: 'Simon Baker',
+                date: 'Oct 15, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                img: '/assets/images/blog/comment-03.jpg',
+                rating: 5,
+                name: 'Richard Gere',
+                date: 'Oct 19, 2021',
+                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+        ],
+    },
+];
+
+export default course_data;
diff --git a/src/data/event-data.js b/src/data/event-data.js
deleted file mode 100644
index 8a74701..0000000
--- a/src/data/event-data.js
+++ /dev/null
@@ -1,238 +0,0 @@
-const event_data = [
-  {
-    id: 1,
-    img: '/assets/images/event/event-01.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Learn English in Ease',
-    date: "SEP 30 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    delay:'100',
-    event_meta:'Newyork City, USA',
-    university:true,
-    event_grid:true,
-  },
-  {
-    id: 2,
-    img: '/assets/images/event/event-02.jpg',
-    time:'04:00PM-07:00PM',
-    title: 'Annual Workshop',
-    date: "DEC 25 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    delay:'200',
-    event_meta:'Washington D.C, USA',
-    university:true,
-    event_grid:true,
-  },
-  {
-    id: 3,
-    img: '/assets/images/event/event-03.jpg',
-    time:'10:00AM-11:00AM',
-    title: 'Design Think & Innovation',
-    date: "NOV 25 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    delay:'300',
-    event_meta:'New york City, USA',
-    university:true,
-    event_grid:true,
-  },
-  // home 7
-  {
-    id: 4,
-    img: '/assets/images/event/event-04.jpg',
-    bg_style:'bg-style-extra02',
-    time:'10:00AM-11:00AM',
-    title: 'Annual Music Conference',
-    date: "Nov 18, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
-    event_meta:'Ohio City, USA',
-    home_7:true,
-  },
-  {
-    id: 5,
-    img: '/assets/images/event/event-05.jpg',
-    bg_style:'bg-style-secondary',
-    time:'09:00AM-11:00AM',
-    title: 'Garden Camping Party',
-    date: "Oct 15, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
-    event_meta:'Newyork City, USA',
-    home_7:true,
-  },
-  {
-    id: 6,
-    img: '/assets/images/event/event-06.jpg',
-    bg_style:'bg-style-extra05',
-    time:'08:00AM-09:00AM',
-    title: 'Caterpillars to Butterflies',
-    date: "Dec 15, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
-    event_meta:'Washington D.C, USA',
-    home_7:true,
-  },
-  {
-    id: 7,
-    img: '/assets/images/event/event-07.jpg',
-    bg_style:'bg-style-primary',
-    time:'11:00AM-12:PM',
-    title: 'Animal Petting Party',
-    date: "Dec 28, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
-    event_meta:'Ohio City, USA',
-    home_7:true,
-  },
-  //  event_grid,
-  {
-    id: 8,
-    img: '/assets/images/event/event-08.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Annual Workshop',
-    date: "OCT 28 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    event_meta:'Newyork City, USA',
-    event_grid:true,
-  },
-  {
-    id: 9,
-    img: '/assets/images/event/event-09.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Annual Workshop',
-    date: "OCT 25 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    event_meta:'Newyork City, USA',
-    event_grid:true,
-  },
-  {
-    id: 10,
-    img: '/assets/images/event/event-10.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Annual Workshop',
-    date: "OCT 18 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    event_meta:'Newyork City, USA',
-    event_grid:true,
-  },
-  {
-    id: 11,
-    img: '/assets/images/event/event-08.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Annual Workshop',
-    date: "OCT 28 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
-    event_meta:'Newyork City, USA',
-    event_grid:true,
-  },
-
-  // event lists 
-  {
-    id: 12,
-    img: '/assets/images/event/event-14.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Global Education Fall Meeting for Everyone',
-    date: "OCT 28, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Art & Design',
-  },
-  {
-    id: 13,
-    img: '/assets/images/event/event-15.jpg',
-    time:'09:00AM-11:00PM',
-    title: 'Our excellence partner France Pavilion',
-    date: "FEB 28, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Development',
-  },
-  {
-    id: 14,
-    img: '/assets/images/event/event-16.jpg',
-    time:'07:00AM-09:00PM',
-    title: 'Explorations of New Approaches Works',
-    date: "FEB 15, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Business',
-  },
-  {
-    id: 15,
-    img: '/assets/images/event/event-17.jpg',
-    time:'06:00AM-08:00PM',
-    title: 'Digital Arts & Reshaping the Future with AI',
-    date: "JAN 18, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Marketing',
-  },
-  {
-    id: 16,
-    img: '/assets/images/event/event-18.jpg',
-    time:'07:00AM-08:00PM',
-    title: 'Online Presentation on PowerPoint 2022',
-    date: "DEC 18, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Art & Design',
-  },
-  {
-    id: 17,
-    img: '/assets/images/event/event-19.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'London International Conference',
-    date: "DEC 20, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Business',
-  },
-  {
-    id: 18,
-    img: '/assets/images/event/event-19.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Digital Arts & Reshaping the Future with AI',
-    date: "DEC 22, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    event_list:true,
-    category:'Marketing',
-  },
-  {
-    id: 19,
-    img: '/assets/images/event/event-22.jpg',
-    time:'07:00AM-08:00PM',
-    title: 'Changes in Healthcare',
-    date: "DEC 18, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    health_coach_event:true,
-    category:'Art & Design',
-  },
-  {
-    id: 20,
-    img: '/assets/images/event/event-23.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Future Trends in Healthcare',
-    date: "DEC 20, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    health_coach_event:true,
-    category:'Business',
-  },
-  {
-    id: 21,
-    img: '/assets/images/event/event-24.jpg',
-    time:'08:00AM-10:00PM',
-    title: 'Health Education Plan',
-    date: "DEC 22, 2022",
-    sm_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
-    event_meta:'Newyork City, USA',
-    health_coach_event:true,
-    category:'Marketing',
-  },
-]
-
-export default event_data;
\ No newline at end of file
diff --git a/src/data/event-data.ts b/src/data/event-data.ts
new file mode 100644
index 0000000..0a053a5
--- /dev/null
+++ b/src/data/event-data.ts
@@ -0,0 +1,255 @@
+const event_data = [
+    {
+        id: 1,
+        img: '/assets/images/event/event-01.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Learn English in Ease',
+        date: 'SEP 30 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        delay: '100',
+        event_meta: 'Newyork City, USA',
+        university: true,
+        event_grid: true,
+    },
+    {
+        id: 2,
+        img: '/assets/images/event/event-02.jpg',
+        time: '04:00PM-07:00PM',
+        title: 'Annual Workshop',
+        date: 'DEC 25 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        delay: '200',
+        event_meta: 'Washington D.C, USA',
+        university: true,
+        event_grid: true,
+    },
+    {
+        id: 3,
+        img: '/assets/images/event/event-03.jpg',
+        time: '10:00AM-11:00AM',
+        title: 'Design Think & Innovation',
+        date: 'NOV 25 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        delay: '300',
+        event_meta: 'New york City, USA',
+        university: true,
+        event_grid: true,
+    },
+    // home 7
+    {
+        id: 4,
+        img: '/assets/images/event/event-04.jpg',
+        bg_style: 'bg-style-extra02',
+        time: '10:00AM-11:00AM',
+        title: 'Annual Music Conference',
+        date: 'Nov 18, 2022',
+        sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
+        event_meta: 'Ohio City, USA',
+        home_7: true,
+    },
+    {
+        id: 5,
+        img: '/assets/images/event/event-05.jpg',
+        bg_style: 'bg-style-secondary',
+        time: '09:00AM-11:00AM',
+        title: 'Garden Camping Party',
+        date: 'Oct 15, 2022',
+        sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
+        event_meta: 'Newyork City, USA',
+        home_7: true,
+    },
+    {
+        id: 6,
+        img: '/assets/images/event/event-06.jpg',
+        bg_style: 'bg-style-extra05',
+        time: '08:00AM-09:00AM',
+        title: 'Caterpillars to Butterflies',
+        date: 'Dec 15, 2022',
+        sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
+        event_meta: 'Washington D.C, USA',
+        home_7: true,
+    },
+    {
+        id: 7,
+        img: '/assets/images/event/event-07.jpg',
+        bg_style: 'bg-style-primary',
+        time: '11:00AM-12:PM',
+        title: 'Animal Petting Party',
+        date: 'Dec 28, 2022',
+        sm_desc: 'Lorem ipsum dolor sit amet consectur adipisicing elit.',
+        event_meta: 'Ohio City, USA',
+        home_7: true,
+    },
+    //  event_grid,
+    {
+        id: 8,
+        img: '/assets/images/event/event-08.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Annual Workshop',
+        date: 'OCT 28 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        event_meta: 'Newyork City, USA',
+        event_grid: true,
+    },
+    {
+        id: 9,
+        img: '/assets/images/event/event-09.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Annual Workshop',
+        date: 'OCT 25 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        event_meta: 'Newyork City, USA',
+        event_grid: true,
+    },
+    {
+        id: 10,
+        img: '/assets/images/event/event-10.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Annual Workshop',
+        date: 'OCT 18 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        event_meta: 'Newyork City, USA',
+        event_grid: true,
+    },
+    {
+        id: 11,
+        img: '/assets/images/event/event-08.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Annual Workshop',
+        date: 'OCT 28 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet consectur elit sed eiusmod ex tempor incididunt labore dolore magna.',
+        event_meta: 'Newyork City, USA',
+        event_grid: true,
+    },
+
+    // event lists
+    {
+        id: 12,
+        img: '/assets/images/event/event-14.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Global Education Fall Meeting for Everyone',
+        date: 'OCT 28, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Art & Design',
+    },
+    {
+        id: 13,
+        img: '/assets/images/event/event-15.jpg',
+        time: '09:00AM-11:00PM',
+        title: 'Our excellence partner France Pavilion',
+        date: 'FEB 28, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Development',
+    },
+    {
+        id: 14,
+        img: '/assets/images/event/event-16.jpg',
+        time: '07:00AM-09:00PM',
+        title: 'Explorations of New Approaches Works',
+        date: 'FEB 15, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Business',
+    },
+    {
+        id: 15,
+        img: '/assets/images/event/event-17.jpg',
+        time: '06:00AM-08:00PM',
+        title: 'Digital Arts & Reshaping the Future with AI',
+        date: 'JAN 18, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Marketing',
+    },
+    {
+        id: 16,
+        img: '/assets/images/event/event-18.jpg',
+        time: '07:00AM-08:00PM',
+        title: 'Online Presentation on PowerPoint 2022',
+        date: 'DEC 18, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Art & Design',
+    },
+    {
+        id: 17,
+        img: '/assets/images/event/event-19.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'London International Conference',
+        date: 'DEC 20, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Business',
+    },
+    {
+        id: 18,
+        img: '/assets/images/event/event-19.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Digital Arts & Reshaping the Future with AI',
+        date: 'DEC 22, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        event_list: true,
+        category: 'Marketing',
+    },
+    {
+        id: 19,
+        img: '/assets/images/event/event-22.jpg',
+        time: '07:00AM-08:00PM',
+        title: 'Changes in Healthcare',
+        date: 'DEC 18, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        health_coach_event: true,
+        category: 'Art & Design',
+    },
+    {
+        id: 20,
+        img: '/assets/images/event/event-23.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Future Trends in Healthcare',
+        date: 'DEC 20, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        health_coach_event: true,
+        category: 'Business',
+    },
+    {
+        id: 21,
+        img: '/assets/images/event/event-24.jpg',
+        time: '08:00AM-10:00PM',
+        title: 'Health Education Plan',
+        date: 'DEC 22, 2022',
+        sm_desc:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.',
+        event_meta: 'Newyork City, USA',
+        health_coach_event: true,
+        category: 'Marketing',
+    },
+];
+
+export default event_data;
diff --git a/src/data/index.js b/src/data/index.js
deleted file mode 100644
index aa2eea0..0000000
--- a/src/data/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import course_data from "./course-data";
-import instructors_data from "./instructors";
-import blog_data from "./blog-data";
-import event_data from "./event-data";
-import shop_data from "./shop-data";
-
-
-export {
-  course_data,
-  instructors_data,
-  blog_data,
-  event_data,
-  shop_data,
-}
\ No newline at end of file
diff --git a/src/data/index.ts b/src/data/index.ts
new file mode 100644
index 0000000..6d0c644
--- /dev/null
+++ b/src/data/index.ts
@@ -0,0 +1,7 @@
+import course_data from './course-data';
+import instructors_data from './instructors';
+import blog_data from './blog-data';
+import event_data from './event-data';
+import shop_data from './shop-data';
+
+export { course_data, instructors_data, blog_data, event_data, shop_data };
diff --git a/src/data/instructors.js b/src/data/instructors.js
deleted file mode 100644
index 28fa7e1..0000000
--- a/src/data/instructors.js
+++ /dev/null
@@ -1,146 +0,0 @@
-const instructors_data = [
-    {
-        id:1,
-        img:'team-01.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Jane Seymour',
-        title:'UI Designer',
-        delay:'50',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:2,
-        img:'team-02.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Edward Norton',
-        title:'Web Developer',
-        delay:'100',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:3,
-        img:'team-03.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Penelope Cruz',
-        title:'Digital Marketer',
-        delay:'150',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:4,
-        img:'team-04.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'John Travolta',
-        title:'Wordpress Expert',
-        delay:'200',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:5,
-        img:'team-05.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Susan White',
-        title:'Wordpress Expert',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:6,
-        img:'team-06.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Connie Comerford',
-        title:'Web Developer',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:7,
-        img:'team-07.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Hilary Swank',
-        title:'Digital Marketer',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:8,
-        img:'team-08.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Michael Douglas',
-        title:'Designer',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    }
-]
-
-export const yoga_instructor = [
-    {
-        id:1,
-        img:'team-01.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Nancy Dew',
-        title:'Yoga Trainer',
-        delay:'50',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:2,
-        img:'team-02.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Jared Hayes',
-        title:'Yoga Trainer',
-        delay:'100',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    },
-    {
-        id:3,
-        img:'team-03.webp',
-        social_links:[
-            {link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook'},
-            {link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter'},
-            {link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2'}
-        ],
-        name:'Rebecca Roye',
-        title:'Yoga Trainer',
-        delay:'150',
-        sm_text:"Consectetur adipisicing elit, sed do eius mod tempor incididunt"
-    }
-];
-
-export default instructors_data;
\ No newline at end of file
diff --git a/src/data/instructors.ts b/src/data/instructors.ts
new file mode 100644
index 0000000..9659e56
--- /dev/null
+++ b/src/data/instructors.ts
@@ -0,0 +1,190 @@
+const instructors_data = [
+    {
+        id: 1,
+        img: 'team-01.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Jane Seymour',
+        title: 'UI Designer',
+        delay: '50',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 2,
+        img: 'team-02.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Edward Norton',
+        title: 'Web Developer',
+        delay: '100',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 3,
+        img: 'team-03.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Penelope Cruz',
+        title: 'Digital Marketer',
+        delay: '150',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 4,
+        img: 'team-04.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'John Travolta',
+        title: 'Wordpress Expert',
+        delay: '200',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 5,
+        img: 'team-05.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Susan White',
+        title: 'Wordpress Expert',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 6,
+        img: 'team-06.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Connie Comerford',
+        title: 'Web Developer',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 7,
+        img: 'team-07.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Hilary Swank',
+        title: 'Digital Marketer',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 8,
+        img: 'team-08.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Michael Douglas',
+        title: 'Designer',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+];
+
+export const yoga_instructor = [
+    {
+        id: 1,
+        img: 'team-01.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Nancy Dew',
+        title: 'Yoga Trainer',
+        delay: '50',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 2,
+        img: 'team-02.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Jared Hayes',
+        title: 'Yoga Trainer',
+        delay: '100',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+    {
+        id: 3,
+        img: 'team-03.webp',
+        social_links: [
+            { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+            { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+            {
+                link: 'https://www.linkedin.com/',
+                target: '_blank',
+                icon: 'icon-linkedin2',
+            },
+        ],
+        name: 'Rebecca Roye',
+        title: 'Yoga Trainer',
+        delay: '150',
+        sm_text: 'Consectetur adipisicing elit, sed do eius mod tempor incididunt',
+    },
+];
+
+export default instructors_data;
diff --git a/src/data/shop-data.js b/src/data/shop-data.js
deleted file mode 100644
index b374219..0000000
--- a/src/data/shop-data.js
+++ /dev/null
@@ -1,160 +0,0 @@
-const shop_data = [
-  {
-    id:1,
-    img:'/assets/images/shop/product-01.jpg',
-    title:'Sing To It',
-    rating:[1,2,3,4,5],
-    total_rating:3,
-    price:'70.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-007',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'100'
-  },
-  {
-    id:2,
-    img:'/assets/images/shop/product-02.jpg',
-    title:'Natural Science Project',
-    rating:[1,2,3,4,5],
-    total_rating:5,
-    price:'60.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-008',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'150'
-  },
-  {
-    id:3,
-    img:'/assets/images/shop/product-03.jpg',
-    title:'The King of Drugs',
-    rating:[1,2,3,4,5],
-    total_rating:7,
-    price:'80.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-088',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'200'
-  },
-  {
-    id:4,
-    img:'/assets/images/shop/product-04.jpg',
-    title:'Ray Brandbury',
-    rating:[1,2,3,4,5],
-    total_rating:10,
-    price:'90.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-098',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'250'
-  },
-  {
-    id:5,
-    img:'/assets/images/shop/product-05.jpg',
-    title:'Educated A Memoir',
-    rating:[1,2,3,4,5],
-    total_rating:5,
-    price:'85.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-098',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'300'
-  },
-  {
-    id:6,
-    img:'/assets/images/shop/product-06.jpg',
-    title:'The Silver Chair',
-    rating:[1,2,3,4,5],
-    total_rating:12,
-    price:'99.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-098',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'350'
-  },
-  {
-    id:7,
-    img:'/assets/images/shop/product-07.jpg',
-    title:'Harry Potter',
-    rating:[1,2,3,4],
-    total_rating:14,
-    price:'110.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-98',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'400'
-  },
-  {
-    id:8,
-    img:'/assets/images/shop/product-08.jpg',
-    title:'Code Breaker',
-    rating:[1,2,3,4,5],
-    total_rating:15,
-    price:'95.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-989',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'450'
-  },
-  {
-    id:9,
-    img:'/assets/images/shop/product-09.jpg',
-    title:'Vanguard',
-    rating:[1,2,3,4],
-    total_rating:16,
-    price:'65.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-988',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'500'
-  },
-  {
-    id:10,
-    img:'/assets/images/shop/product-10.jpg',
-    title:'Arctic Sea',
-    rating:[1,2,3,4],
-    total_rating:18,
-    price:'75.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-988',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'550'
-  },
-  {
-    id:11,
-    img:'/assets/images/shop/product-11.jpg',
-    title:'Secret Sky',
-    rating:[1,2,3,4,5],
-    total_rating:20,
-    price:'130.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-988',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'600'
-  },
-  {
-    id:12,
-    img:'/assets/images/shop/product-12.jpg',
-    title:'Women Who Launch',
-    rating:[1,2,3,4,5],
-    total_rating:22,
-    price:'125.00',
-    desc:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
-    sku:'MB-988',
-    category:'Book',
-    tag:['Business','Administration'],
-    delay:'650'
-  },
-]
-
-export default shop_data;
\ No newline at end of file
diff --git a/src/data/shop-data.ts b/src/data/shop-data.ts
new file mode 100644
index 0000000..0739088
--- /dev/null
+++ b/src/data/shop-data.ts
@@ -0,0 +1,160 @@
+const shop_data = [
+    {
+        id: 1,
+        img: '/assets/images/shop/product-01.jpg',
+        title: 'Sing To It',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 3,
+        price: '70.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-007',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '100',
+    },
+    {
+        id: 2,
+        img: '/assets/images/shop/product-02.jpg',
+        title: 'Natural Science Project',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 5,
+        price: '60.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-008',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '150',
+    },
+    {
+        id: 3,
+        img: '/assets/images/shop/product-03.jpg',
+        title: 'The King of Drugs',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 7,
+        price: '80.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-088',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '200',
+    },
+    {
+        id: 4,
+        img: '/assets/images/shop/product-04.jpg',
+        title: 'Ray Brandbury',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 10,
+        price: '90.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-098',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '250',
+    },
+    {
+        id: 5,
+        img: '/assets/images/shop/product-05.jpg',
+        title: 'Educated A Memoir',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 5,
+        price: '85.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-098',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '300',
+    },
+    {
+        id: 6,
+        img: '/assets/images/shop/product-06.jpg',
+        title: 'The Silver Chair',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 12,
+        price: '99.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-098',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '350',
+    },
+    {
+        id: 7,
+        img: '/assets/images/shop/product-07.jpg',
+        title: 'Harry Potter',
+        rating: [1, 2, 3, 4],
+        total_rating: 14,
+        price: '110.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-98',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '400',
+    },
+    {
+        id: 8,
+        img: '/assets/images/shop/product-08.jpg',
+        title: 'Code Breaker',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 15,
+        price: '95.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-989',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '450',
+    },
+    {
+        id: 9,
+        img: '/assets/images/shop/product-09.jpg',
+        title: 'Vanguard',
+        rating: [1, 2, 3, 4],
+        total_rating: 16,
+        price: '65.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-988',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '500',
+    },
+    {
+        id: 10,
+        img: '/assets/images/shop/product-10.jpg',
+        title: 'Arctic Sea',
+        rating: [1, 2, 3, 4],
+        total_rating: 18,
+        price: '75.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-988',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '550',
+    },
+    {
+        id: 11,
+        img: '/assets/images/shop/product-11.jpg',
+        title: 'Secret Sky',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 20,
+        price: '130.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-988',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '600',
+    },
+    {
+        id: 12,
+        img: '/assets/images/shop/product-12.jpg',
+        title: 'Women Who Launch',
+        rating: [1, 2, 3, 4, 5],
+        total_rating: 22,
+        price: '125.00',
+        desc: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sed ut perspic atis unde omnis iste natus.',
+        sku: 'MB-988',
+        category: 'Book',
+        tag: ['Business', 'Administration'],
+        delay: '650',
+    },
+];
+
+export default shop_data;
diff --git a/src/firebase/firebase.config.js b/src/firebase/firebase.config.js
deleted file mode 100644
index 01e01bc..0000000
--- a/src/firebase/firebase.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const firebaseConfig = {
-    apiKey: "AIzaSyBBUsU6zVh1unjDVE2zGgZSgtBzFdHAgYg",
-    authDomain: "edu-blink.firebaseapp.com",
-    projectId: "edu-blink",
-    storageBucket: "edu-blink.appspot.com",
-    messagingSenderId: "568463423109",
-    appId: "1:568463423109:web:66e8a7a12aaa3af3619bec"
-};
-
-export default firebaseConfig;
\ No newline at end of file
diff --git a/src/firebase/firebase.config.ts b/src/firebase/firebase.config.ts
new file mode 100644
index 0000000..230843e
--- /dev/null
+++ b/src/firebase/firebase.config.ts
@@ -0,0 +1,10 @@
+const firebaseConfig = {
+    apiKey: 'AIzaSyBBUsU6zVh1unjDVE2zGgZSgtBzFdHAgYg',
+    authDomain: 'edu-blink.firebaseapp.com',
+    projectId: 'edu-blink',
+    storageBucket: 'edu-blink.appspot.com',
+    messagingSenderId: '568463423109',
+    appId: '1:568463423109:web:66e8a7a12aaa3af3619bec',
+};
+
+export default firebaseConfig;
diff --git a/src/firebase/firebase.init.js b/src/firebase/firebase.init.js
deleted file mode 100644
index b3d494b..0000000
--- a/src/firebase/firebase.init.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { initializeApp } from "firebase/app";
-import firebaseConfig from './firebase.config';
-
-function firebaseInitialization() {
-    initializeApp(firebaseConfig)
-}
-
-export default firebaseInitialization;
\ No newline at end of file
diff --git a/src/firebase/firebase.init.ts b/src/firebase/firebase.init.ts
new file mode 100644
index 0000000..c8a585d
--- /dev/null
+++ b/src/firebase/firebase.init.ts
@@ -0,0 +1,8 @@
+import { initializeApp } from 'firebase/app';
+import firebaseConfig from './firebase.config';
+
+function firebaseInitialization() {
+    initializeApp(firebaseConfig);
+}
+
+export default firebaseInitialization;
diff --git a/src/hooks/use-cart-info.js b/src/hooks/use-cart-info.js
deleted file mode 100644
index 2a858ad..0000000
--- a/src/hooks/use-cart-info.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-
-const useCartInfo = () => {
-    const [quantity, setQuantity] = useState(0);
-    const [total, setTotal] = useState(0);
-    const cartItems = useSelector(state => state.cart.cartCourses);
-
-    useEffect(() => {
-        const cart = cartItems.reduce((cartTotal, cartItem) => {
-            const { price, quantity } = cartItem;
-            const itemTotal = price * quantity;
-            cartTotal.total += itemTotal
-            cartTotal.quantity += quantity
-
-            return cartTotal;
-        }, {
-            total: 0,
-            quantity: 0,
-        })
-        setQuantity(cart.quantity);
-        setTotal(cart.total);
-    }, [cartItems])
-    return {
-        quantity,
-        total
-    }
-}
-
-export default useCartInfo;
\ No newline at end of file
diff --git a/src/hooks/use-cart-info.ts b/src/hooks/use-cart-info.ts
new file mode 100644
index 0000000..c51c187
--- /dev/null
+++ b/src/hooks/use-cart-info.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from '../redux/store';
+
+const useCartInfo = () => {
+    const [quantity, setQuantity] = useState(0);
+    const [total, setTotal] = useState(0);
+    const cartItems = useSelector((state: AppState) => state.cart.cartCourses);
+
+    useEffect(() => {
+        const cart = cartItems.reduce(
+            (cartTotal, cartItem) => {
+                const { price, quantity } = cartItem;
+                const itemTotal = price * quantity;
+                cartTotal.total += itemTotal;
+                cartTotal.quantity += quantity;
+
+                return cartTotal;
+            },
+            {
+                total: 0,
+                quantity: 0,
+            }
+        );
+        setQuantity(cart.quantity);
+        setTotal(cart.total);
+    }, [cartItems]);
+    return {
+        quantity,
+        total,
+    };
+};
+
+export default useCartInfo;
diff --git a/src/hooks/use-firebase.js b/src/hooks/use-firebase.js
deleted file mode 100644
index e9eee68..0000000
--- a/src/hooks/use-firebase.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import {
-  getAuth, createUserWithEmailAndPassword, updateProfile,
-  signInWithEmailAndPassword, sendPasswordResetEmail,signOut
-} from "firebase/auth";
-import { useDispatch } from "react-redux";
-import { toast } from "react-toastify";
-import firebaseInitialization from "../firebase/firebase.init";
-import { add_user, sign_out, user_info } from "../redux/features/auth-slice";
-
-// initialize firebase app
-firebaseInitialization();
-
-// declare auth
-const auth = getAuth();
-
-const useFirebase = () => {
-    // dispatch
-    const dispatch = useDispatch()
-    // register With Email Password
-    const registerWithEmailPassword = (email, password, name) => {
-        createUserWithEmailAndPassword(auth, email, password)
-        .then((user) => {
-            updateProfile(auth.currentUser, {
-                displayName: name,
-            }).then(() => {
-            }).catch((error) => {
-            });
-            dispatch(add_user({
-                name: name,
-                email: user.user.email,
-                uid: user.user.uid
-            }))
-            toast.success(`${name} register successfully`, {
-                position: 'top-left'
-            })
-        })
-        .catch((error) => {
-            const errorMessage = error?.message;
-            toast.error(`${errorMessage}`, {
-                position: 'top-left'
-            })
-        });
-
-    }
-
-    // login with email and password
-    const loginWithEmailPassword = (email, password) => {
-        signInWithEmailAndPassword(auth, email, password)
-        .then((user) => {
-            const { displayName: name, email, uid } = user.user;
-            dispatch(user_info({
-                name: name,
-                email: email,
-                uid: uid
-            }))
-                toast.success(`${name} login successfully`, {
-                position: 'top-left'
-            })
-        })
-        .catch((error) => {
-            const errorMessage = error.message;
-            toast.error(`${errorMessage}`, {
-                position: 'top-left'
-            })
-        });
-
-    }
-
-    // password reset email sent
-    const resetPassword = (email) => {
-        sendPasswordResetEmail(auth, email)
-        .then(() => {
-            toast.success(`Password reset email sent!`, {
-                position: 'top-left'
-            })
-        })
-        .catch((error) => {
-            const errorMessage = error?.message;
-            toast.error(`${errorMessage}`, {
-                position: 'top-left'
-            })
-        });
-
-    }
-
-    // logout
-    const logout = () => {
-        signOut(auth).then(() => {
-        dispatch(sign_out())
-        toast.success(`Sign-out successful.`, {
-            position: 'top-left'
-        })
-        }).catch((error) => {
-            // An error happened.
-        });
-    }
-
-    return {
-        registerWithEmailPassword,
-        loginWithEmailPassword,
-        resetPassword,
-        logout
-    }
-}
-
-export default useFirebase;
\ No newline at end of file
diff --git a/src/hooks/use-firebase.ts b/src/hooks/use-firebase.ts
new file mode 100644
index 0000000..ea15761
--- /dev/null
+++ b/src/hooks/use-firebase.ts
@@ -0,0 +1,113 @@
+import {
+    getAuth,
+    createUserWithEmailAndPassword,
+    updateProfile,
+    signInWithEmailAndPassword,
+    sendPasswordResetEmail,
+    signOut,
+} from 'firebase/auth';
+import { useDispatch } from 'react-redux';
+import { toast } from 'react-toastify';
+import firebaseInitialization from '../firebase/firebase.init';
+import { add_user, sign_out, user_info } from '../redux/features/auth-slice';
+
+// initialize firebase app
+firebaseInitialization();
+
+// declare auth
+const auth = getAuth();
+
+const useFirebase = () => {
+    // dispatch
+    const dispatch = useDispatch();
+    // register With Email Password
+    const registerWithEmailPassword = (email, password, name) => {
+        createUserWithEmailAndPassword(auth, email, password)
+            .then(user => {
+                updateProfile(auth.currentUser, {
+                    displayName: name,
+                })
+                    .then(() => {})
+                    .catch(error => {});
+                dispatch(
+                    add_user({
+                        name: name,
+                        email: user.user.email,
+                        uid: user.user.uid,
+                    })
+                );
+                toast.success(`${name} register successfully`, {
+                    position: 'top-left',
+                });
+            })
+            .catch(error => {
+                const errorMessage = error?.message;
+                toast.error(`${errorMessage}`, {
+                    position: 'top-left',
+                });
+            });
+    };
+
+    // login with email and password
+    const loginWithEmailPassword = (email, password) => {
+        signInWithEmailAndPassword(auth, email, password)
+            .then(user => {
+                const { displayName: name, email, uid } = user.user;
+                dispatch(
+                    user_info({
+                        name: name,
+                        email: email,
+                        uid: uid,
+                    })
+                );
+                toast.success(`${name} login successfully`, {
+                    position: 'top-left',
+                });
+            })
+            .catch(error => {
+                const errorMessage = error.message;
+                toast.error(`${errorMessage}`, {
+                    position: 'top-left',
+                });
+            });
+    };
+
+    // password reset email sent
+    const resetPassword = email => {
+        sendPasswordResetEmail(auth, email)
+            .then(() => {
+                toast.success(`Password reset email sent!`, {
+                    position: 'top-left',
+                });
+            })
+            .catch(error => {
+                const errorMessage = error?.message;
+                toast.error(`${errorMessage}`, {
+                    position: 'top-left',
+                });
+            });
+    };
+
+    // logout
+    const logout = () => {
+        signOut(auth)
+            .then(() => {
+                dispatch(sign_out());
+                toast.success(`Sign-out successful.`, {
+                    position: 'top-left',
+                });
+            })
+            .catch(error => {
+                // An error happened.
+            });
+    };
+
+    return {
+        registerWithEmailPassword,
+        loginWithEmailPassword,
+        resetPassword,
+        logout,
+    };
+};
+
+export default useFirebase;
diff --git a/src/hooks/use-modal.js b/src/hooks/use-modal.js
deleted file mode 100644
index a3aba0a..0000000
--- a/src/hooks/use-modal.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const { useState } = require("react")
-
-const useModal = () => {
-    const [isVideoOpen,setIsVideoOpen] = useState(false);
-    return {isVideoOpen,setIsVideoOpen}
-}
-
-export default useModal;
\ No newline at end of file
diff --git a/src/hooks/use-modal.ts b/src/hooks/use-modal.ts
new file mode 100644
index 0000000..d480b4c
--- /dev/null
+++ b/src/hooks/use-modal.ts
@@ -0,0 +1,8 @@
+const { useState } = require('react');
+
+const useModal = () => {
+    const [isVideoOpen, setIsVideoOpen] = useState(false);
+    return { isVideoOpen, setIsVideoOpen };
+};
+
+export default useModal;
diff --git a/src/hooks/use-scroll-to-top.js b/src/hooks/use-scroll-to-top.ts
similarity index 69%
rename from src/hooks/use-scroll-to-top.js
rename to src/hooks/use-scroll-to-top.ts
index 9cb716c..31a8c77 100644
--- a/src/hooks/use-scroll-to-top.js
+++ b/src/hooks/use-scroll-to-top.ts
@@ -1,9 +1,9 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react';
 
 function useScrollToTop() {
     const [stick, setStick] = useState(false);
     const onClickHandler = () => {
-        window.scrollTo({ top: 0, behavior: "smooth" });
+        window.scrollTo({ top: 0, behavior: 'smooth' });
     };
 
     useEffect(() => {
@@ -16,9 +16,9 @@ function useScrollToTop() {
             }
         };
 
-        window.addEventListener("scroll", scrollHandler);
+        window.addEventListener('scroll', scrollHandler);
         return () => {
-            window.removeEventListener("scroll", scrollHandler);
+            window.removeEventListener('scroll', scrollHandler);
         };
     }, [stick]);
 
diff --git a/src/hooks/use-sticky.js b/src/hooks/use-sticky.js
deleted file mode 100644
index 03e2da5..0000000
--- a/src/hooks/use-sticky.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect, useState } from "react";
-
-const useSticky = () => {
-    const [sticky, setSticky] = useState(false);
-    const stickyHeader = () => {
-        if (window.scrollY > 80) {
-            setSticky(true)
-        } else {
-            setSticky(false)
-        }
-    }
-  
-    useEffect(() => {
-        window.addEventListener('scroll', stickyHeader)
-    }, []);
-
-    return {
-        sticky
-    }
-}
-
-export default useSticky;
\ No newline at end of file
diff --git a/src/hooks/use-sticky.ts b/src/hooks/use-sticky.ts
new file mode 100644
index 0000000..2cacce9
--- /dev/null
+++ b/src/hooks/use-sticky.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+const useSticky = () => {
+    const [sticky, setSticky] = useState(false);
+    const stickyHeader = () => {
+        if (window.scrollY > 80) {
+            setSticky(true);
+        } else {
+            setSticky(false);
+        }
+    };
+
+    useEffect(() => {
+        window.addEventListener('scroll', stickyHeader);
+    }, []);
+
+    return {
+        sticky,
+    };
+};
+
+export default useSticky;
diff --git a/src/layout/footers/component/footer-social.jsx b/src/layout/footers/component/footer-social.jsx
deleted file mode 100644
index cd144b3..0000000
--- a/src/layout/footers/component/footer-social.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-const social_share = [
-    { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook', color: 'color-fb' },
-    { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter', color: 'color-twitter' },
-    { link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2', color: 'color-linkd' },
-    { link: 'https://www.youtube.com/', target: '_blank', icon: 'icon-youtube', color: 'color-yt' },
-    { link: 'https://www.instagram.com/', target: '_blank', icon: 'icon-instagram', color: 'color-ig' },
-]
-
-import React from 'react';
-
-const FooterSocial = () => {
-    return (
-        <>
-            {social_share.map((social, i) => (
-                <li key={i}><a href={social.link} target={social.target ? social.target : ''} className={`${social.color}`}>
-                <i className={social.icon}></i>
-                </a></li>
-            ))}
-        </>
-    )
-}
-
-export default FooterSocial;
\ No newline at end of file
diff --git a/src/layout/footers/component/footer-social.tsx b/src/layout/footers/component/footer-social.tsx
new file mode 100644
index 0000000..296498d
--- /dev/null
+++ b/src/layout/footers/component/footer-social.tsx
@@ -0,0 +1,54 @@
+const social_share = [
+    {
+        link: 'http://facebook.com',
+        target: '_blank',
+        icon: 'icon-facebook',
+        color: 'color-fb',
+    },
+    {
+        link: 'http://twitter.com',
+        target: '_blank',
+        icon: 'icon-twitter',
+        color: 'color-twitter',
+    },
+    {
+        link: 'https://www.linkedin.com/',
+        target: '_blank',
+        icon: 'icon-linkedin2',
+        color: 'color-linkd',
+    },
+    {
+        link: 'https://www.youtube.com/',
+        target: '_blank',
+        icon: 'icon-youtube',
+        color: 'color-yt',
+    },
+    {
+        link: 'https://www.instagram.com/',
+        target: '_blank',
+        icon: 'icon-instagram',
+        color: 'color-ig',
+    },
+];
+
+import React from 'react';
+
+const FooterSocial = () => {
+    return (
+        <>
+            {social_share.map((social, i) => (
+                <li key={i}>
+                    <a
+                        href={social.link}
+                        target={social.target ? social.target : ''}
+                        className={`${social.color}`}
+                    >
+                        <i className={social.icon}></i>
+                    </a>
+                </li>
+            ))}
+        </>
+    );
+};
+
+export default FooterSocial;
diff --git a/src/layout/footers/footer-2.jsx b/src/layout/footers/footer-2.jsx
deleted file mode 100644
index d4aefe4..0000000
--- a/src/layout/footers/footer-2.jsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-import FooterSocial from './component/footer-social';
-
-const footer_contents = {
-    desc: 'Lorem ipsum dolor amet consecto adi pisicing elit sed eiusm tempor incidid unt labore dolore.',
-    add: '70-80 Upper St Norwich NR2',
-    call: '+01 123 5641 231',
-    email: 'info@edublink.com',
-    widgets: [
-        {
-            col: '3',
-            class: 'explore-widget',
-            widget_title: 'Online Platform',
-            footer_links: [
-                { link: 'about-1', title: 'About' },
-                { link: 'course-style-1', title: 'Courses' },
-                { link: 'team-1', title: 'Instructor' },
-                { link: 'event-grid', title: 'Events' },
-                { link: 'team-details', title: 'Instructor Profile' },
-                { link: 'purchase-guide', title: 'Purchase Guide' }
-            ]
-        },
-        {
-            col: '2',
-            class: 'quick-link-widget',
-            widget_title: 'Links',
-            footer_links: [
-                { link: 'contact-us', title: 'Contact Us' },
-                { link: 'gallery-grid', title: 'Gallery' },
-                { link: 'blog-standard', title: 'News & Articles' },
-                { link: 'faq', title: "FAQ's" },
-                { link: 'sign-in', title: 'Sign In/Registration' },
-                { link: 'coming-soon', title: 'Coming Soon' }
-            ]
-        }
-    ]
-}
-
-const { add, call, desc, email, widgets } = footer_contents;
-
-const FooterTwo = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <footer className="edu-footer footer-light footer-for-kitchen footer-style-4">
-            <div className="footer-top">
-                <div className="container">
-                    <div className="row g-5">
-                        <div className="col-lg-3 col-md-6">
-                            <div className="edu-footer-widget">
-                                <h4 className="widget-title">Address</h4>
-                                <div className="inner">
-                                    <p className="description">{desc}</p>
-                                    <div className="widget-information">
-                                        <ul className="information-list">
-                                            <li><span>Add:</span>{add}</li>
-                                            <li><span>Call:</span><a href="tel:+011235641231">{call}</a></li>
-                                            <li><span>Email:</span><a href="mailto:info@edublink.com"
-                                            target="_blank" rel="noreferrer">{email}</a></li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        {widgets.map((w, i) => (
-                            <div key={i} className={`col-lg-${w.col} col-sm-6`}>
-                                <div className={`edu-footer-widget ${w.class}`}>
-                                    <h4 className="widget-title">{w.widget_title}</h4>
-                                    <div className="inner">
-                                        <ul className="footer-link link-hover">
-                                            {w.footer_links.map((l, i) => <li key={i}>
-                                            <Link href={`/${l.link}`}>{l.title}</Link>
-                                            </li>)}
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
-                        <div className="col-lg-4 col-md-6">
-                            <div className="edu-footer-widget">
-                                <h4 className="widget-title">Contacts</h4>
-                                <div className="inner">
-                                    <p className="description">Enter your email address to register to our newsletter subscription</p>
-                                    <div className="input-group footer-subscription-form">
-                                        <input type="email" className="form-control" placeholder="Your email" />
-                                        <button className="edu-btn btn-medium" type="button">Subscribe <i className="icon-4"></i></button>
-                                    </div>
-                                    <ul className="social-share icon-transparent">
-                                        <FooterSocial />
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-01-01.png" alt="shape" />
-                    </motion.li>
-                    <motion.li className="shape-2 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                        animate={ {
-                            x: mouseReverse(30).x,
-                            y: mouseReverse(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-02-01.png" alt="shape" />
-                    </motion.li>
-                    <li className="shape-3" data-sal-delay="100" data-sal="fade" data-sal-duration="1000">
-                        <img src="/assets/images/others/shape-03-01.png" alt="shape" />
-                    </li>
-                    <motion.li className="shape-4 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-04-01.png" alt="shape" />
-                    </motion.li>
-                    <motion.li className="shape-5 scene" data-sal-delay="100" data-sal="fade" data-sal-duration="1000"
-                        animate={ {
-                            x: mouseReverse(30).x,
-                            y: mouseReverse(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-05-01.png" alt="shape" />
-                    </motion.li>
-                </ul>
-            </div>
-            <div className="copyright-area">
-                <div className="container">
-                    <div className="row">
-                        <div className="col-lg-12">
-                            <div className="inner text-center">
-                                <p>Copyright {new Date().getFullYear()} <a href="https://1.envato.market/AoJezj" rel="noreferrer" target="_blank">EduBlink</a> Designed By <a href="https://1.envato.market/YgGJbj" target="_blank" rel="noreferrer">DevsBlink</a>. All Rights Reserved</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </footer>
-    );
-}
-
-export default FooterTwo;
\ No newline at end of file
diff --git a/src/layout/footers/footer-2.tsx b/src/layout/footers/footer-2.tsx
new file mode 100644
index 0000000..edfc6f6
--- /dev/null
+++ b/src/layout/footers/footer-2.tsx
@@ -0,0 +1,246 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+import FooterSocial from './component/footer-social';
+
+const footer_contents = {
+    desc: 'Lorem ipsum dolor amet consecto adi pisicing elit sed eiusm tempor incidid unt labore dolore.',
+    add: '70-80 Upper St Norwich NR2',
+    call: '+01 123 5641 231',
+    email: 'info@edublink.com',
+    widgets: [
+        {
+            col: '3',
+            class: 'explore-widget',
+            widget_title: 'Online Platform',
+            footer_links: [
+                { link: 'about-1', title: 'About' },
+                { link: 'course-style-1', title: 'Courses' },
+                { link: 'team-1', title: 'Instructor' },
+                { link: 'event-grid', title: 'Events' },
+                { link: 'team-details', title: 'Instructor Profile' },
+                { link: 'purchase-guide', title: 'Purchase Guide' },
+            ],
+        },
+        {
+            col: '2',
+            class: 'quick-link-widget',
+            widget_title: 'Links',
+            footer_links: [
+                { link: 'contact-us', title: 'Contact Us' },
+                { link: 'gallery-grid', title: 'Gallery' },
+                { link: 'blog-standard', title: 'News & Articles' },
+                { link: 'faq', title: "FAQ's" },
+                { link: 'sign-in', title: 'Sign In/Registration' },
+                { link: 'coming-soon', title: 'Coming Soon' },
+            ],
+        },
+    ],
+};
+
+const { add, call, desc, email, widgets } = footer_contents;
+
+const FooterTwo = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <footer className='edu-footer footer-light footer-for-kitchen footer-style-4'>
+            <div className='footer-top'>
+                <div className='container'>
+                    <div className='row g-5'>
+                        <div className='col-lg-3 col-md-6'>
+                            <div className='edu-footer-widget'>
+                                <h4 className='widget-title'>Address</h4>
+                                <div className='inner'>
+                                    <p className='description'>{desc}</p>
+                                    <div className='widget-information'>
+                                        <ul className='information-list'>
+                                            <li>
+                                                <span>Add:</span>
+                                                {add}
+                                            </li>
+                                            <li>
+                                                <span>Call:</span>
+                                                <a href='tel:+011235641231'>{call}</a>
+                                            </li>
+                                            <li>
+                                                <span>Email:</span>
+                                                <a
+                                                    href='mailto:info@edublink.com'
+                                                    target='_blank'
+                                                    rel='noreferrer'
+                                                >
+                                                    {email}
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {widgets.map((w, i) => (
+                            <div key={i} className={`col-lg-${w.col} col-sm-6`}>
+                                <div className={`edu-footer-widget ${w.class}`}>
+                                    <h4 className='widget-title'>{w.widget_title}</h4>
+                                    <div className='inner'>
+                                        <ul className='footer-link link-hover'>
+                                            {w.footer_links.map((l, i) => (
+                                                <li key={i}>
+                                                    <Link href={`/${l.link}`}>
+                                                        {l.title}
+                                                    </Link>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                        <div className='col-lg-4 col-md-6'>
+                            <div className='edu-footer-widget'>
+                                <h4 className='widget-title'>Contacts</h4>
+                                <div className='inner'>
+                                    <p className='description'>
+                                        Enter your email address to register to our
+                                        newsletter subscription
+                                    </p>
+                                    <div className='input-group footer-subscription-form'>
+                                        <input
+                                            type='email'
+                                            className='form-control'
+                                            placeholder='Your email'
+                                        />
+                                        <button
+                                            className='edu-btn btn-medium'
+                                            type='button'
+                                        >
+                                            Subscribe <i className='icon-4'></i>
+                                        </button>
+                                    </div>
+                                    <ul className='social-share icon-transparent'>
+                                        <FooterSocial />
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        data-sal-delay='100'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img
+                                src='/assets/images/others/shape-01-01.png'
+                                alt='shape'
+                            />
+                        </picture>
+                    </motion.li>
+                    <motion.li
+                        className='shape-2 scene'
+                        data-sal-delay='100'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                        animate={{
+                            x: mouseReverse(30).x,
+                            y: mouseReverse(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img
+                                src='/assets/images/others/shape-02-01.png'
+                                alt='shape'
+                            />
+                        </picture>
+                    </motion.li>
+                    <li
+                        className='shape-3'
+                        data-sal-delay='100'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                    >
+                        <picture>
+                            <img
+                                src='/assets/images/others/shape-03-01.png'
+                                alt='shape'
+                            />
+                        </picture>
+                    </li>
+                    <motion.li
+                        className='shape-4 scene'
+                        data-sal-delay='100'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img
+                                src='/assets/images/others/shape-04-01.png'
+                                alt='shape'
+                            />
+                        </picture>
+                    </motion.li>
+                    <motion.li
+                        className='shape-5 scene'
+                        data-sal-delay='100'
+                        data-sal='fade'
+                        data-sal-duration='1000'
+                        animate={{
+                            x: mouseReverse(30).x,
+                            y: mouseReverse(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img
+                                src='/assets/images/others/shape-05-01.png'
+                                alt='shape'
+                            />
+                        </picture>
+                    </motion.li>
+                </ul>
+            </div>
+            <div className='copyright-area'>
+                <div className='container'>
+                    <div className='row'>
+                        <div className='col-lg-12'>
+                            <div className='inner text-center'>
+                                <p>
+                                    Copyright {new Date().getFullYear()}{' '}
+                                    <a
+                                        href='https://1.envato.market/AoJezj'
+                                        rel='noreferrer'
+                                        target='_blank'
+                                    >
+                                        EduBlink
+                                    </a>{' '}
+                                    Designed By{' '}
+                                    <a
+                                        href='https://1.envato.market/YgGJbj'
+                                        target='_blank'
+                                        rel='noreferrer'
+                                    >
+                                        DevsBlink
+                                    </a>
+                                    . All Rights Reserved
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default FooterTwo;
diff --git a/src/layout/footers/footer-3.jsx b/src/layout/footers/footer-3.jsx
deleted file mode 100644
index f294c0f..0000000
--- a/src/layout/footers/footer-3.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import FooterSocial from './component/footer-social';
-
-const widgets = [
-    {
-        col: '3',
-        class: 'explore-widget',
-        widget_title: 'Online Platform',
-        footer_links: [
-            { link: 'about-1', title: 'About' },
-            { link: 'course-style-1', title: 'Courses' },
-            { link: 'team-1', title: 'Instructor' },
-            { link: 'event-grid', title: 'Events' },
-            { link: 'team-details', title: 'Instructor Profile' },
-            { link: 'purchase-guide', title: 'Purchase Guide' }
-        ]
-    },
-    {
-        col: '2',
-        class: 'quick-link-widget',
-        widget_title: 'Links',
-        footer_links: [
-            { link: 'contact-us', title: 'Contact Us' },
-            { link: 'gallery-grid', title: 'Gallery' },
-            { link: 'blog-standard', title: 'News & Articles' },
-            { link: 'faq', title: "FAQ's" },
-            { link: 'sign-in', title: 'Sign In/Registration' },
-            { link: 'coming-soon', title: 'Coming Soon' }
-        ]
-    }
-]
-
-const FooterThree = () => {
-    return (
-        <footer className="edu-footer footer-kindergarten footer-style-6">
-            <div className="footer-top">
-                <div className="container">
-                    <div className="row g-5">
-                        <div className="col-lg-3 col-md-6 col-sm-12 col-12">
-                            <div className="edu-footer-widget">
-                                <div className="logo">
-                                    <Link href="/">
-
-                                        <img className="logo-dark" src="/assets/images/logo/logo-white.png" alt="Corporate Logo" />
-
-                                    </Link>
-                                </div>
-                                <p className="description">Lorem ipsum dolor amet consecto adi pisicing elit sed eiusm tempor incidid unt labore dolore magna aliqua enim.</p>
-                            </div>
-                        </div>
-
-                        {widgets.map((w, i) => (
-                            <div key={i} className={`col-lg-${w.col} col-sm-6`}>
-                                <div className={`edu-footer-widget ${w.class}`}>
-                                    <h4 className="widget-title">{w.widget_title}</h4>
-                                    <div className="inner">
-                                        <ul className="footer-link link-hover">
-                                            {w.footer_links.map((l, i) => 
-                                                <li key={i}>
-                                                    <Link href={`/${l.link}`}>{l.title}</Link>
-                                                </li>
-                                            )}
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
-
-                        <div className="col-lg-4 col-md-6 col-sm-6 col-12">
-                            <div className="edu-footer-widget">
-                            <h6 className="widget-title">Contacts</h6>
-                                <div className="inner">
-                                    <p className="description">Lorem ipsum dolor amet consecto adi pisicing elit sed eiusm tempor dolore.</p>
-                                    <div className="widget-information">
-                                        <ul className="information-list">
-                                            <li><span>Add:</span>70-80 Upper St Norwich NR2</li>
-                                            <li><span>Call:</span><a href="tel:+011235641231">+01 123 5641 231</a></li>
-                                            <li><span>Email:</span><a href="mailto:info@edublink.com" target="_blank" rel="noreferrer">info@edublink.com</a></li>
-                                        </ul>
-                                    </div>
-
-                                    <ul className="social-share icon-transparent">
-                                        <FooterSocial />
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div className="copyright-area bg-image">
-                <div className="container">
-                    <div className="row">
-                        <div className="col-lg-12">
-                            <div className="inner text-center">
-                                <p>
-                                    Copyright {new Date().toDateString()} 
-                                    <a href="https://1.envato.market/AoJezj" rel="noreferrer" target="_blank">EduBlink</a> Designed By <a href="https://1.envato.market/YgGJbj" target="_blank" rel="noreferrer">DevsBlink</a>. All Rights Reserved
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </footer>
-    );
-}
-
-export default FooterThree;
\ No newline at end of file
diff --git a/src/layout/footers/footer-3.tsx b/src/layout/footers/footer-3.tsx
new file mode 100644
index 0000000..c565bd8
--- /dev/null
+++ b/src/layout/footers/footer-3.tsx
@@ -0,0 +1,156 @@
+import Link from 'next/link';
+import React from 'react';
+import FooterSocial from './component/footer-social';
+
+const widgets = [
+    {
+        col: '3',
+        class: 'explore-widget',
+        widget_title: 'Online Platform',
+        footer_links: [
+            { link: 'about-1', title: 'About' },
+            { link: 'course-style-1', title: 'Courses' },
+            { link: 'team-1', title: 'Instructor' },
+            { link: 'event-grid', title: 'Events' },
+            { link: 'team-details', title: 'Instructor Profile' },
+            { link: 'purchase-guide', title: 'Purchase Guide' },
+        ],
+    },
+    {
+        col: '2',
+        class: 'quick-link-widget',
+        widget_title: 'Links',
+        footer_links: [
+            { link: 'contact-us', title: 'Contact Us' },
+            { link: 'gallery-grid', title: 'Gallery' },
+            { link: 'blog-standard', title: 'News & Articles' },
+            { link: 'faq', title: "FAQ's" },
+            { link: 'sign-in', title: 'Sign In/Registration' },
+            { link: 'coming-soon', title: 'Coming Soon' },
+        ],
+    },
+];
+
+const FooterThree = () => {
+    return (
+        <footer className='edu-footer footer-kindergarten footer-style-6'>
+            <div className='footer-top'>
+                <div className='container'>
+                    <div className='row g-5'>
+                        <div className='col-lg-3 col-md-6 col-sm-12 col-12'>
+                            <div className='edu-footer-widget'>
+                                <div className='logo'>
+                                    <Link href='/'>
+                                        <picture>
+                                            <img
+                                                className='logo-dark'
+                                                src='/assets/images/logo/logo-white.png'
+                                                alt='Corporate Logo'
+                                            />
+                                        </picture>
+                                    </Link>
+                                </div>
+                                <p className='description'>
+                                    Lorem ipsum dolor amet consecto adi pisicing elit sed
+                                    eiusm tempor incidid unt labore dolore magna aliqua
+                                    enim.
+                                </p>
+                            </div>
+                        </div>
+
+                        {widgets.map((w, i) => (
+                            <div key={i} className={`col-lg-${w.col} col-sm-6`}>
+                                <div className={`edu-footer-widget ${w.class}`}>
+                                    <h4 className='widget-title'>{w.widget_title}</h4>
+                                    <div className='inner'>
+                                        <ul className='footer-link link-hover'>
+                                            {w.footer_links.map((l, i) => (
+                                                <li key={i}>
+                                                    <Link href={`/${l.link}`}>
+                                                        {l.title}
+                                                    </Link>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+
+                        <div className='col-lg-4 col-md-6 col-sm-6 col-12'>
+                            <div className='edu-footer-widget'>
+                                <h6 className='widget-title'>Contacts</h6>
+                                <div className='inner'>
+                                    <p className='description'>
+                                        Lorem ipsum dolor amet consecto adi pisicing elit
+                                        sed eiusm tempor dolore.
+                                    </p>
+                                    <div className='widget-information'>
+                                        <ul className='information-list'>
+                                            <li>
+                                                <span>Add:</span>70-80 Upper St Norwich
+                                                NR2
+                                            </li>
+                                            <li>
+                                                <span>Call:</span>
+                                                <a href='tel:+011235641231'>
+                                                    +01 123 5641 231
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <span>Email:</span>
+                                                <a
+                                                    href='mailto:info@edublink.com'
+                                                    target='_blank'
+                                                    rel='noreferrer'
+                                                >
+                                                    info@edublink.com
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+
+                                    <ul className='social-share icon-transparent'>
+                                        <FooterSocial />
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className='copyright-area bg-image'>
+                <div className='container'>
+                    <div className='row'>
+                        <div className='col-lg-12'>
+                            <div className='inner text-center'>
+                                <p>
+                                    Copyright {new Date().toDateString()}
+                                    <a
+                                        href='https://1.envato.market/AoJezj'
+                                        rel='noreferrer'
+                                        target='_blank'
+                                    >
+                                        EduBlink
+                                    </a>{' '}
+                                    Designed By{' '}
+                                    <a
+                                        href='https://1.envato.market/YgGJbj'
+                                        target='_blank'
+                                        rel='noreferrer'
+                                    >
+                                        DevsBlink
+                                    </a>
+                                    . All Rights Reserved
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default FooterThree;
diff --git a/src/layout/footers/footer-4.jsx b/src/layout/footers/footer-4.jsx
deleted file mode 100644
index f072059..0000000
--- a/src/layout/footers/footer-4.jsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../../contexts/mouse-move-context';
-import FooterSocial from './component/footer-social';
-
-const footer_contents = {
-    desc: 'Lorem ipsum dolor amet consecto adi pisicing elit sed eiusm tempor incidid unt labore dolore.',
-    add: '70-80 Upper St Norwich NR2',
-    call: '+01 123 5641 231',
-    email: 'info@edublink.com',
-    widgets: [
-        {
-            col: '3',
-            class: 'explore-widget',
-            widget_title: 'Online Platform',
-            footer_links: [
-                { link: 'about-1', title: 'About' },
-                { link: 'course-style-1', title: 'Courses' },
-                { link: 'team-1', title: 'Instructor' },
-                { link: 'event-grid', title: 'Events' },
-                { link: 'team-details', title: 'Instructor Profile' },
-                { link: 'purchase-guide', title: 'Purchase Guide' }
-            ]
-        },
-        {
-            col: '2',
-            class: 'quick-link-widget',
-            widget_title: 'Links',
-            footer_links: [
-                { link: 'contact-us', title: 'Contact Us' },
-                { link: 'gallery-grid', title: 'Gallery' },
-                { link: 'blog-standard', title: 'News & Articles' },
-                { link: 'faq', title: "FAQ's" },
-                { link: 'sign-in', title: 'Sign In/Registration' },
-                { link: 'coming-soon', title: 'Coming Soon' }
-            ]
-        }
-    ]
-}
-
-const { add, call, desc, email, widgets } = footer_contents;
-
-const FooterTwo = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <footer className="edu-footer footer-light footer-for-yoga footer-style-5">
-            <div className="footer-top">
-                <div className="container">
-                    <div className="row g-5">
-                        <div className="col-lg-3 col-md-6">
-                            <div className="edu-footer-widget">
-                                <h4 className="widget-title">Address</h4>
-                                <div className="inner">
-                                    <p className="description">{desc}</p>
-                                    <div className="widget-information">
-                                        <ul className="information-list">
-                                            <li><span>Add:</span>{add}</li>
-                                            <li><span>Call:</span><a href="tel:+011235641231">{call}</a></li>
-                                            <li><span>Email:</span><a href="mailto:info@edublink.com"
-                                            target="_blank" rel="noreferrer">{email}</a></li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        {widgets.map((w, i) => (
-                            <div key={i} className={`col-lg-${w.col} col-sm-6`}>
-                                <div className={`edu-footer-widget ${w.class}`}>
-                                    <h4 className="widget-title">{w.widget_title}</h4>
-                                    <div className="inner">
-                                        <ul className="footer-link link-hover">
-                                            {w.footer_links.map((l, i) => <li key={i}>
-                                            <Link href={`/${l.link}`}>{l.title}</Link>
-                                            </li>)}
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
-
-                        <div className="col-lg-4 col-md-6">
-                            <div className="edu-footer-widget">
-                                <h4 className="widget-title">Contacts</h4>
-                                <div className="inner">
-                                    <p className="description">Enter your email address to register to our newsletter subscription</p>
-                                    <div className="input-group footer-subscription-form">
-                                        <input type="email" className="form-control" placeholder="Your email" />
-                                        <button className="edu-btn btn-medium" type="button">Subscribe <i className="icon-4"></i></button>
-                                    </div>
-                                    <ul className="social-share icon-transparent">
-                                        <FooterSocial />
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <ul className="shape-group shape-group-2">
-                    <motion.li className="shape-1 scene"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-06.png" alt="shape" />
-                    </motion.li>
-                    <motion.li className="shape-2 scene"
-                        animate={ {
-                            x: mouseReverse(30).x,
-                            y: mouseReverse(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-07.png" alt="shape" />
-                    </motion.li>
-                    <li className="shape-3">
-                        <img src="/assets/images/about/shape-10.png" alt="shape" />
-                    </li>
-                    <motion.li className="shape-4 scene"
-                        animate={ {
-                            x: mouseReverse(30).x,
-                            y: mouseReverse(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-08.png" alt="shape" />
-                    </motion.li>
-                    <motion.li className="shape-5 scene"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-09.png" alt="shape" />
-                    </motion.li>
-                </ul>
-            </div>
-
-            <div className="copyright-area">
-                <div className="container">
-                    <div className="row">
-                        <div className="col-lg-12">
-                            <div className="inner text-center">
-                                <p>Copyright {new Date().getFullYear()} 
-                                    <a href="https://1.envato.market/AoJezj" rel="noreferrer" target="_blank">EduBlink</a> Designed By <a href="https://1.envato.market/YgGJbj" target="_blank" rel="noreferrer">DevsBlink</a>. All Rights Reserved
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </footer>
-    );
-}
-
-export default FooterTwo;
\ No newline at end of file
diff --git a/src/layout/footers/footer-4.tsx b/src/layout/footers/footer-4.tsx
new file mode 100644
index 0000000..60a0c5b
--- /dev/null
+++ b/src/layout/footers/footer-4.tsx
@@ -0,0 +1,217 @@
+import Link from 'next/link';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../../contexts/mouse-move-context';
+import FooterSocial from './component/footer-social';
+
+const footer_contents = {
+    desc: 'Lorem ipsum dolor amet consecto adi pisicing elit sed eiusm tempor incidid unt labore dolore.',
+    add: '70-80 Upper St Norwich NR2',
+    call: '+01 123 5641 231',
+    email: 'info@edublink.com',
+    widgets: [
+        {
+            col: '3',
+            class: 'explore-widget',
+            widget_title: 'Online Platform',
+            footer_links: [
+                { link: 'about-1', title: 'About' },
+                { link: 'course-style-1', title: 'Courses' },
+                { link: 'team-1', title: 'Instructor' },
+                { link: 'event-grid', title: 'Events' },
+                { link: 'team-details', title: 'Instructor Profile' },
+                { link: 'purchase-guide', title: 'Purchase Guide' },
+            ],
+        },
+        {
+            col: '2',
+            class: 'quick-link-widget',
+            widget_title: 'Links',
+            footer_links: [
+                { link: 'contact-us', title: 'Contact Us' },
+                { link: 'gallery-grid', title: 'Gallery' },
+                { link: 'blog-standard', title: 'News & Articles' },
+                { link: 'faq', title: "FAQ's" },
+                { link: 'sign-in', title: 'Sign In/Registration' },
+                { link: 'coming-soon', title: 'Coming Soon' },
+            ],
+        },
+    ],
+};
+
+const { add, call, desc, email, widgets } = footer_contents;
+
+const FooterTwo = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <footer className='edu-footer footer-light footer-for-yoga footer-style-5'>
+            <div className='footer-top'>
+                <div className='container'>
+                    <div className='row g-5'>
+                        <div className='col-lg-3 col-md-6'>
+                            <div className='edu-footer-widget'>
+                                <h4 className='widget-title'>Address</h4>
+                                <div className='inner'>
+                                    <p className='description'>{desc}</p>
+                                    <div className='widget-information'>
+                                        <ul className='information-list'>
+                                            <li>
+                                                <span>Add:</span>
+                                                {add}
+                                            </li>
+                                            <li>
+                                                <span>Call:</span>
+                                                <a href='tel:+011235641231'>{call}</a>
+                                            </li>
+                                            <li>
+                                                <span>Email:</span>
+                                                <a
+                                                    href='mailto:info@edublink.com'
+                                                    target='_blank'
+                                                    rel='noreferrer'
+                                                >
+                                                    {email}
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {widgets.map((w, i) => (
+                            <div key={i} className={`col-lg-${w.col} col-sm-6`}>
+                                <div className={`edu-footer-widget ${w.class}`}>
+                                    <h4 className='widget-title'>{w.widget_title}</h4>
+                                    <div className='inner'>
+                                        <ul className='footer-link link-hover'>
+                                            {w.footer_links.map((l, i) => (
+                                                <li key={i}>
+                                                    <Link href={`/${l.link}`}>
+                                                        {l.title}
+                                                    </Link>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+
+                        <div className='col-lg-4 col-md-6'>
+                            <div className='edu-footer-widget'>
+                                <h4 className='widget-title'>Contacts</h4>
+                                <div className='inner'>
+                                    <p className='description'>
+                                        Enter your email address to register to our
+                                        newsletter subscription
+                                    </p>
+                                    <div className='input-group footer-subscription-form'>
+                                        <input
+                                            type='email'
+                                            className='form-control'
+                                            placeholder='Your email'
+                                        />
+                                        <button
+                                            className='edu-btn btn-medium'
+                                            type='button'
+                                        >
+                                            Subscribe <i className='icon-4'></i>
+                                        </button>
+                                    </div>
+                                    <ul className='social-share icon-transparent'>
+                                        <FooterSocial />
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <ul className='shape-group shape-group-2'>
+                    <motion.li
+                        className='shape-1 scene'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-06.png' alt='shape' />
+                        </picture>
+                    </motion.li>
+                    <motion.li
+                        className='shape-2 scene'
+                        animate={{
+                            x: mouseReverse(30).x,
+                            y: mouseReverse(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-07.png' alt='shape' />
+                        </picture>
+                    </motion.li>
+                    <li className='shape-3'>
+                        <picture>
+                            <img src='/assets/images/about/shape-10.png' alt='shape' />
+                        </picture>
+                    </li>
+                    <motion.li
+                        className='shape-4 scene'
+                        animate={{
+                            x: mouseReverse(30).x,
+                            y: mouseReverse(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-08.png' alt='shape' />
+                        </picture>
+                    </motion.li>
+                    <motion.li
+                        className='shape-5 scene'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-09.png' alt='shape' />
+                        </picture>
+                    </motion.li>
+                </ul>
+            </div>
+
+            <div className='copyright-area'>
+                <div className='container'>
+                    <div className='row'>
+                        <div className='col-lg-12'>
+                            <div className='inner text-center'>
+                                <p>
+                                    Copyright {new Date().getFullYear()}
+                                    <a
+                                        href='https://1.envato.market/AoJezj'
+                                        rel='noreferrer'
+                                        target='_blank'
+                                    >
+                                        EduBlink
+                                    </a>{' '}
+                                    Designed By{' '}
+                                    <a
+                                        href='https://1.envato.market/YgGJbj'
+                                        target='_blank'
+                                        rel='noreferrer'
+                                    >
+                                        DevsBlink
+                                    </a>
+                                    . All Rights Reserved
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default FooterTwo;
diff --git a/src/layout/footers/footer.jsx b/src/layout/footers/footer.jsx
deleted file mode 100644
index c9340ff..0000000
--- a/src/layout/footers/footer.jsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import Link from "next/link";
-import FooterSocial from "./component/footer-social";
-
-const footer_contents = {
-    logoLight: '/assets/images/logo/logo-dark.png',
-    logoDark: '/assets/images/logo/logo-white.png',
-    desc: 'Lorem ipsum dolor amet consecto adi pisicing elit sed eiusm tempor incidid unt labore dolore.',
-    add: '70-80 Upper St Norwich NR2',
-    call: '+01 123 5641 231',
-    email: 'info@edublink.com',
-    widgets: [
-        {
-            col: '3',
-            class: 'explore-widget',
-            widget_title: 'Online Platform',
-            footer_links: [
-                { link: 'about-1', title: 'About' },
-                { link: 'course-style-1', title: 'Courses' },
-                { link: 'team-1', title: 'Instructor' },
-                { link: 'event-grid', title: 'Events' },
-                { link: 'team-details', title: 'Instructor Profile' },
-                { link: 'purchase-guide', title: 'Purchase Guide' }
-            ]
-        },
-        {
-            col: '2',
-            class: 'quick-link-widget',
-            widget_title: 'Links',
-            footer_links: [
-                { link: 'contact-us', title: 'Contact Us' },
-                { link: 'gallery-grid', title: 'Gallery' },
-                { link: 'blog-standard', title: 'News & Articles' },
-                { link: 'faq', title: "FAQ's" },
-                { link: 'sign-in', title: 'Sign In/Registration' },
-                { link: 'coming-soon', title: 'Coming Soon' }
-            ]
-        }
-    ]
-
-}
-
-const { logoDark, logoLight, desc, add, call, email, widgets } = footer_contents;
-
-const Footer = ({ style_2, dark_bg,home_4 }) => {
-    return (
-        <footer className={`edu-footer ${style_2 ? style_2 : dark_bg ? 'footer-dark bg-image footer-style-3' : "footer-lighten bg-image footer-style-1"}`}>
-            <div className={`footer-top ${style_2 ? "footer-top-2" : ""}`}>
-                <div className="container">
-                    <div className="row g-5">
-                        <div className="col-lg-3 col-md-6">
-                            <div className="edu-footer-widget">
-                                <div className="logo">
-                                    <Link href={'/'}>
-
-                                        {!dark_bg && <>
-                                            {!style_2 && <img className="logo-light" src={logoLight} alt="Corporate Logo" />}
-                                            <img className="logo-dark" src={logoDark} alt="Corporate Logo" />
-                                        </>}
-
-                                    </Link>
-
-                                    <Link href={'/'}>
-
-                                        {dark_bg && <img className="logo-light" src={home_4?'/assets/images/logo/logo-white.png' :'/assets/images/logo/logo-light-2.png'} alt="Corporate Logo" />}
-
-                                    </Link>
-                                </div>
-
-                                <p className="description">{desc}</p>
-                                <div className="widget-information">
-                                    <ul className="information-list">
-                                        <li><span>Add:</span>{add}</li>
-                                        <li><span>Call:</span><a href="tel:+011235641231">{call}</a></li>
-                                        <li><span>Email:</span><a href="mailto:info@edublink.com" rel="noreferrer" target="_blank">{email}</a></li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-
-                        {widgets.map((w, i) => (
-                            <div key={i} className={`col-lg-${w.col} col-sm-6`}>
-                                <div className={`edu-footer-widget ${w.class}`}>
-                                    <h4 className="widget-title">{w.widget_title}</h4>
-                                    <div className="inner">
-                                        <ul className="footer-link link-hover">
-                                            {w.footer_links.map((l, i) => <li key={i}><Link href={`/${l.link}`}>{l.title}</Link></li>)}
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
-
-                        <div className="col-lg-4 col-md-6">
-                            <div className="edu-footer-widget">
-                                <h4 className="widget-title">Contacts</h4>
-                                <div className="inner">
-                                    <p className="description">Enter your email address to register to our newsletter subscription</p>
-                                    <div className="input-group footer-subscription-form">
-                                        <input type="email" className="form-control" placeholder="Your email" />
-                                        <button className={`edu-btn ${dark_bg && !home_4?'btn-secondary':''} btn-medium`} type="button">Subscribe <i className="icon-4"></i></button>
-                                    </div>
-                                    <ul className="social-share icon-transparent">
-                                        <FooterSocial/>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div className="copyright-area">
-                <div className="container">
-                    <div className="row">
-                        <div className="col-lg-12">
-                            <div className="inner text-center">
-                                <p>Copyright {new Date().getFullYear()} <a href="https://1.envato.market/AoJezj" rel="noreferrer" target="_blank">EduBlink</a> Designed By <a href="https://1.envato.market/YgGJbj" rel="noreferrer" target="_blank">DevsBlink</a>. All Rights Reserved</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </footer>
-    );
-}
-
-export default Footer;
\ No newline at end of file
diff --git a/src/layout/footers/footer.tsx b/src/layout/footers/footer.tsx
new file mode 100644
index 0000000..0c9633b
--- /dev/null
+++ b/src/layout/footers/footer.tsx
@@ -0,0 +1,217 @@
+import Link from 'next/link';
+import FooterSocial from './component/footer-social';
+
+const footer_contents = {
+    logoLight: '/assets/images/logo/logo-dark.png',
+    logoDark: '/assets/images/logo/logo-white.png',
+    desc: 'Lorem ipsum dolor amet consecto adi pisicing elit sed eiusm tempor incidid unt labore dolore.',
+    add: '70-80 Upper St Norwich NR2',
+    call: '+01 123 5641 231',
+    email: 'info@edublink.com',
+    widgets: [
+        {
+            col: '3',
+            class: 'explore-widget',
+            widget_title: 'Online Platform',
+            footer_links: [
+                { link: 'about-1', title: 'About' },
+                { link: 'course-style-1', title: 'Courses' },
+                { link: 'team-1', title: 'Instructor' },
+                { link: 'event-grid', title: 'Events' },
+                { link: 'team-details', title: 'Instructor Profile' },
+                { link: 'purchase-guide', title: 'Purchase Guide' },
+            ],
+        },
+        {
+            col: '2',
+            class: 'quick-link-widget',
+            widget_title: 'Links',
+            footer_links: [
+                { link: 'contact-us', title: 'Contact Us' },
+                { link: 'gallery-grid', title: 'Gallery' },
+                { link: 'blog-standard', title: 'News & Articles' },
+                { link: 'faq', title: "FAQ's" },
+                { link: 'sign-in', title: 'Sign In/Registration' },
+                { link: 'coming-soon', title: 'Coming Soon' },
+            ],
+        },
+    ],
+};
+
+const { logoDark, logoLight, desc, add, call, email, widgets } = footer_contents;
+
+type FooterProps = {
+    style_2?: string;
+    dark_bg?: boolean;
+    home_4?: boolean;
+};
+
+const Footer = ({ style_2, dark_bg, home_4 }: FooterProps) => {
+    return (
+        <footer
+            className={`edu-footer ${
+                style_2
+                    ? style_2
+                    : dark_bg
+                    ? 'footer-dark bg-image footer-style-3'
+                    : 'footer-lighten bg-image footer-style-1'
+            }`}
+        >
+            <div className={`footer-top ${style_2 ? 'footer-top-2' : ''}`}>
+                <div className='container'>
+                    <div className='row g-5'>
+                        <div className='col-lg-3 col-md-6'>
+                            <div className='edu-footer-widget'>
+                                <div className='logo'>
+                                    <Link href={'/'}>
+                                        {!dark_bg && (
+                                            <>
+                                                {!style_2 && (
+                                                    <picture>
+                                                        <img
+                                                            className='logo-light'
+                                                            src={logoLight}
+                                                            alt='Corporate Logo'
+                                                        />
+                                                    </picture>
+                                                )}
+                                                <picture>
+                                                    <img
+                                                        className='logo-dark'
+                                                        src={logoDark}
+                                                        alt='Corporate Logo'
+                                                    />
+                                                </picture>
+                                            </>
+                                        )}
+                                    </Link>
+
+                                    <Link href={'/'}>
+                                        {dark_bg && (
+                                            <picture>
+                                                <img
+                                                    className='logo-light'
+                                                    src={
+                                                        home_4
+                                                            ? '/assets/images/logo/logo-white.png'
+                                                            : '/assets/images/logo/logo-light-2.png'
+                                                    }
+                                                    alt='Corporate Logo'
+                                                />
+                                            </picture>
+                                        )}
+                                    </Link>
+                                </div>
+
+                                <p className='description'>{desc}</p>
+                                <div className='widget-information'>
+                                    <ul className='information-list'>
+                                        <li>
+                                            <span>Add:</span>
+                                            {add}
+                                        </li>
+                                        <li>
+                                            <span>Call:</span>
+                                            <a href='tel:+011235641231'>{call}</a>
+                                        </li>
+                                        <li>
+                                            <span>Email:</span>
+                                            <a
+                                                href='mailto:info@edublink.com'
+                                                rel='noreferrer'
+                                                target='_blank'
+                                            >
+                                                {email}
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+
+                        {widgets.map((w, i) => (
+                            <div key={i} className={`col-lg-${w.col} col-sm-6`}>
+                                <div className={`edu-footer-widget ${w.class}`}>
+                                    <h4 className='widget-title'>{w.widget_title}</h4>
+                                    <div className='inner'>
+                                        <ul className='footer-link link-hover'>
+                                            {w.footer_links.map((l, i) => (
+                                                <li key={i}>
+                                                    <Link href={`/${l.link}`}>
+                                                        {l.title}
+                                                    </Link>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+
+                        <div className='col-lg-4 col-md-6'>
+                            <div className='edu-footer-widget'>
+                                <h4 className='widget-title'>Contacts</h4>
+                                <div className='inner'>
+                                    <p className='description'>
+                                        Enter your email address to register to our
+                                        newsletter subscription
+                                    </p>
+                                    <div className='input-group footer-subscription-form'>
+                                        <input
+                                            type='email'
+                                            className='form-control'
+                                            placeholder='Your email'
+                                        />
+                                        <button
+                                            className={`edu-btn ${
+                                                dark_bg && !home_4 ? 'btn-secondary' : ''
+                                            } btn-medium`}
+                                            type='button'
+                                        >
+                                            Subscribe <i className='icon-4'></i>
+                                        </button>
+                                    </div>
+                                    <ul className='social-share icon-transparent'>
+                                        <FooterSocial />
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className='copyright-area'>
+                <div className='container'>
+                    <div className='row'>
+                        <div className='col-lg-12'>
+                            <div className='inner text-center'>
+                                <p>
+                                    Copyright {new Date().getFullYear()}{' '}
+                                    <a
+                                        href='https://1.envato.market/AoJezj'
+                                        rel='noreferrer'
+                                        target='_blank'
+                                    >
+                                        EduBlink
+                                    </a>{' '}
+                                    Designed By{' '}
+                                    <a
+                                        href='https://1.envato.market/YgGJbj'
+                                        rel='noreferrer'
+                                        target='_blank'
+                                    >
+                                        DevsBlink
+                                    </a>
+                                    . All Rights Reserved
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
diff --git a/src/layout/headers/component/cart.jsx b/src/layout/headers/component/cart.jsx
deleted file mode 100644
index 24a4a0e..0000000
--- a/src/layout/headers/component/cart.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useDispatch, useSelector } from 'react-redux';
-import Link from 'next/link';
-import useCartInfo from '../../../hooks/use-cart-info';
-import { remove_cart_course } from '../../../redux/features/cart-slice';
-
-const Cart = () => {
-    const cartItems = useSelector(state => state.cart.cartCourses);
-    const dispatch = useDispatch();
-    const {total} = useCartInfo();
-    
-    return (
-        <div className="edublink-header-mini-cart">
-            {cartItems.length === 0 && 
-                <div className="wrapper empty-cart-wrapper">
-                    <h5 className="empty-cart">Your cart is empty</h5>
-                </div>
-            }
-            {cartItems.length >= 1 && 
-                <div className="wrapper">
-                    <ul className={`items ${cartItems.length > 4 ? 'cart-height' : ''}`}>
-                        {cartItems.map((item, index) => (
-                            <li key={index} className="each-item">
-                                <div className="thumb">
-                                    <Link href={`/course-details/${item.id}`}>
-
-                                        <img src={item.img} alt="course-thumb" />
-
-                                    </Link>
-                                </div>
-                                <div className="content">
-                                    <h5 className="title">
-                                        <Link href={`/course-details/${item.id}`}>
-
-                                            {item.title}
-
-                                        </Link>
-                                    </h5>
-                                    <div className="price-and-quantity">
-                                        <span className="quantity">{item.quantity}</span>
-                                        <span className="quantity-symbol">×</span>
-                                        <span className="price">$ {item.price}</span>
-                                    </div>
-                                </div>
-                                <div className="cart-item-remove">
-                                    <button onClick={() => dispatch(remove_cart_course(item))}>
-                                        <i className="icon-73"></i>
-                                    </button>
-                                </div>
-                            </li>
-                        ))}
-                    </ul>
-
-                    <div className="total-price-wrapper">
-                        <span className="total-text">Subtotal:</span>
-                        <span className="total-amount">${parseFloat(total.toFixed(3))}</span>
-                    </div>
-
-                    <div className="cart-checkout-buttons">
-                        <Link href="/cart" className="edu-btn btn-small cart-btn">
-                            View Cart
-                        </Link>
-
-                        <Link href="/checkout" className="edu-btn btn-small btn-secondary checkout-btn">
-                            Checkout
-                        </Link>
-                    </div>
-                </div>
-            }
-        </div>
-    );
-}
-
-export default Cart;
\ No newline at end of file
diff --git a/src/layout/headers/component/cart.tsx b/src/layout/headers/component/cart.tsx
new file mode 100644
index 0000000..41c4635
--- /dev/null
+++ b/src/layout/headers/component/cart.tsx
@@ -0,0 +1,79 @@
+import { useDispatch, useSelector } from 'react-redux';
+import Link from 'next/link';
+import useCartInfo from '../../../hooks/use-cart-info';
+import { remove_cart_course } from '../../../redux/features/cart-slice';
+import { AppState } from '../../../redux/store';
+
+const Cart = () => {
+    const cartItems = useSelector((state: AppState) => state.cart.cartCourses);
+    const dispatch = useDispatch();
+    const { total } = useCartInfo();
+
+    return (
+        <div className='edublink-header-mini-cart'>
+            {cartItems.length === 0 && (
+                <div className='wrapper empty-cart-wrapper'>
+                    <h5 className='empty-cart'>Your cart is empty</h5>
+                </div>
+            )}
+            {cartItems.length >= 1 && (
+                <div className='wrapper'>
+                    <ul className={`items ${cartItems.length > 4 ? 'cart-height' : ''}`}>
+                        {cartItems.map((item, index) => (
+                            <li key={index} className='each-item'>
+                                <div className='thumb'>
+                                    <Link href={`/course-details/${item.id}`}>
+                                        <picture>
+                                            <img src={item.img} alt='course-thumb' />
+                                        </picture>
+                                    </Link>
+                                </div>
+                                <div className='content'>
+                                    <h5 className='title'>
+                                        <Link href={`/course-details/${item.id}`}>
+                                            {item.title}
+                                        </Link>
+                                    </h5>
+                                    <div className='price-and-quantity'>
+                                        <span className='quantity'>{item.quantity}</span>
+                                        <span className='quantity-symbol'>×</span>
+                                        <span className='price'>$ {item.price}</span>
+                                    </div>
+                                </div>
+                                <div className='cart-item-remove'>
+                                    <button
+                                        onClick={() => dispatch(remove_cart_course(item))}
+                                    >
+                                        <i className='icon-73'></i>
+                                    </button>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+
+                    <div className='total-price-wrapper'>
+                        <span className='total-text'>Subtotal:</span>
+                        <span className='total-amount'>
+                            ${parseFloat(total.toFixed(3))}
+                        </span>
+                    </div>
+
+                    <div className='cart-checkout-buttons'>
+                        <Link href='/cart' className='edu-btn btn-small cart-btn'>
+                            View Cart
+                        </Link>
+
+                        <Link
+                            href='/checkout'
+                            className='edu-btn btn-small btn-secondary checkout-btn'
+                        >
+                            Checkout
+                        </Link>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Cart;
diff --git a/src/layout/headers/component/header-top-left.jsx b/src/layout/headers/component/header-top-left.jsx
deleted file mode 100644
index 5b9a325..0000000
--- a/src/layout/headers/component/header-top-left.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const HeaderTopLeft = () => {
-    return (
-        <div className="header-notify">
-            First 20 students get 50% discount. <a href="#">Hurry up!</a>
-        </div>
-    )
-}
-
-export default HeaderTopLeft;
\ No newline at end of file
diff --git a/src/layout/headers/component/header-top-left.tsx b/src/layout/headers/component/header-top-left.tsx
new file mode 100644
index 0000000..87b0ea2
--- /dev/null
+++ b/src/layout/headers/component/header-top-left.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const HeaderTopLeft = () => {
+    return (
+        <div className='header-notify'>
+            First 20 students get 50% discount. <a href='#'>Hurry up!</a>
+        </div>
+    );
+};
+
+export default HeaderTopLeft;
diff --git a/src/layout/headers/component/header-top-right.jsx b/src/layout/headers/component/header-top-right.jsx
deleted file mode 100644
index 729a90e..0000000
--- a/src/layout/headers/component/header-top-right.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const social_share = [
-    { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
-    { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
-    { link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2' },
-    { link: 'https://www.instagram.com/', target: '_blank', icon: 'icon-instagram' }
-]
-
-const HeaderTopRight = () => {
-    return (
-        <ul className="header-info">
-            <li><Link href="/sign-in">Login</Link></li>
-            <li><Link href="/sign-in">Register</Link></li>
-            <li><a href="tel:+011235641231"><i className="icon-phone"></i>Call: 123 4561 5523</a></li>
-            <li><a href="mailto:info@edublink.com" rel="noreferrer" target="_blank"><i className="icon-envelope"></i>Email: info@edublink.com</a></li>
-            <li className="social-icon">
-                {social_share.map((social, i) => (
-                    <a key={i} href={social.link} target={social.target ? social.target : ''} className={`${social.color}`}>
-                        <i className={social.icon}></i>
-                    </a>
-                ))}
-            </li>
-        </ul>
-    );
-}
-
-export default HeaderTopRight;
\ No newline at end of file
diff --git a/src/layout/headers/component/header-top-right.tsx b/src/layout/headers/component/header-top-right.tsx
new file mode 100644
index 0000000..a1ff3b8
--- /dev/null
+++ b/src/layout/headers/component/header-top-right.tsx
@@ -0,0 +1,46 @@
+import Link from 'next/link';
+import React from 'react';
+
+const social_share = [
+    { link: 'http://facebook.com', target: '_blank', icon: 'icon-facebook' },
+    { link: 'http://twitter.com', target: '_blank', icon: 'icon-twitter' },
+    { link: 'https://www.linkedin.com/', target: '_blank', icon: 'icon-linkedin2' },
+    { link: 'https://www.instagram.com/', target: '_blank', icon: 'icon-instagram' },
+];
+
+const HeaderTopRight = () => {
+    return (
+        <ul className='header-info'>
+            <li>
+                <Link href='/sign-in'>Login</Link>
+            </li>
+            <li>
+                <Link href='/sign-in'>Register</Link>
+            </li>
+            <li>
+                <a href='tel:+011235641231'>
+                    <i className='icon-phone'></i>Call: 123 4561 5523
+                </a>
+            </li>
+            <li>
+                <a href='mailto:info@edublink.com' rel='noreferrer' target='_blank'>
+                    <i className='icon-envelope'></i>Email: info@edublink.com
+                </a>
+            </li>
+            <li className='social-icon'>
+                {social_share.map((social, i) => (
+                    <a
+                        key={i}
+                        href={social.link}
+                        target={social.target ? social.target : ''}
+                        // className={`${social.color}`}
+                    >
+                        <i className={social.icon}></i>
+                    </a>
+                ))}
+            </li>
+        </ul>
+    );
+};
+
+export default HeaderTopRight;
diff --git a/src/layout/headers/component/main-menu.jsx b/src/layout/headers/component/main-menu.tsx
similarity index 64%
rename from src/layout/headers/component/main-menu.jsx
rename to src/layout/headers/component/main-menu.tsx
index 2ee5f6c..f71c571 100644
--- a/src/layout/headers/component/main-menu.jsx
+++ b/src/layout/headers/component/main-menu.tsx
@@ -4,46 +4,43 @@ import Link from 'next/link';
 
 const MainMenu = () => {
     return (
-        <ul className="mainmenu">
+        <ul className='mainmenu'>
             {menu_data.map((menu, i) => (
-                <li key={i} className="has-droupdown"><a href="#">{menu.title}</a>
-                    {!menu.mega_menu && 
-                        <ul className="submenu">
+                <li key={i} className='has-droupdown'>
+                    <a href='#'>{menu.title}</a>
+                    {!menu.mega_menu && (
+                        <ul className='submenu'>
                             {menu.submenus.map((nav, i) => (
                                 <li key={i}>
                                     <Link href={`${nav.link}`}>
-
                                         {nav.title}
-                                        {nav?.hot && <span className="badge-1">hot</span>}
-                                        {nav?.new && <span className="badge">new</span>}
-
+                                        {nav?.hot && <span className='badge-1'>hot</span>}
+                                        {nav?.new && <span className='badge'>new</span>}
                                     </Link>
                                 </li>
                             ))}
                         </ul>
-                    }
-                    {menu.mega_menu && 
-                        <ul className="mega-menu">
+                    )}
+                    {menu.mega_menu && (
+                        <ul className='mega-menu'>
                             {menu.submenus.map((nav, i) => (
                                 <li key={i}>
-                                    <h6 className="menu-title">{nav.title}</h6>
-                                    <ul className="submenu mega-sub-menu-01">
+                                    <h6 className='menu-title'>{nav.title}</h6>
+                                    <ul className='submenu mega-sub-menu-01'>
                                         {nav.mega_submenu.map((m, i) => (
                                             <li key={i}>
-                                                <Link href={`${m.link}`}>
-                                                    {m.title}
-                                                </Link>
+                                                <Link href={`${m.link}`}>{m.title}</Link>
                                             </li>
                                         ))}
                                     </ul>
                                 </li>
                             ))}
                         </ul>
-                    }
+                    )}
                 </li>
             ))}
         </ul>
     );
-}
+};
 
-export default MainMenu;
\ No newline at end of file
+export default MainMenu;
diff --git a/src/layout/headers/header-2.jsx b/src/layout/headers/header-2.jsx
deleted file mode 100644
index 683a489..0000000
--- a/src/layout/headers/header-2.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import Link from 'next/link';
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import SearchPopup from '../../components/common/popup-modal/search-popup';
-import OffCanvas from '../../components/common/sidebar/off-canvas';
-import useCartInfo from '../../hooks/use-cart-info';
-import useSticky from '../../hooks/use-sticky';
-import { wishlistItems } from '../../redux/features/wishlist-slice';
-import MainMenu from './component/main-menu';
-import Cart from './component/cart';
-
-const HeaderTwo = ({ style_3, no_topBar = false }) => {
-    const { sticky } = useSticky();
-    const { quantity } = useCartInfo();
-    const [isSearchOpen, setIsSearchOpen] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-    const wishlists = useSelector(wishlistItems);
-    return <>
-        <header className={`edu-header header-style-${style_3 ? '3' : '2'} ${no_topBar ? 'no-topbar' : ''}`}>
-            {!no_topBar && 
-                <div className="header-top-bar">
-                    <div className="container">
-                        <div className="header-top">
-                            <div className="header-top-left">
-                                <ul className="header-info">
-                                    <li><a href="tel:+011235641231"><i className="icon-phone"></i>Call: 123 4561 5523</a></li>
-                                    <li><a href="mailto:info@edublink.com" rel="noreferrer" target="_blank"><i className="icon-envelope"></i>Email: info@edublink.com</a></li>
-                                </ul>
-                            </div>
-
-                            <div className="header-top-right">
-                                <ul className="header-info">
-                                    <li><Link href="/sign-in">Login</Link></li>
-                                    <li><Link href="/sign-in">Register</Link></li>
-                                    <li className="header-btn"><a href="#" className={`edu-btn ${style_3 ? '' : 'btn-secondary'} btn-medium`}>Apply Now <i className="icon-4"></i></a></li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            }
-
-            <div id="edu-sticky-placeholder"></div>
-
-            <div className={`header-mainmenu ${sticky ? 'edu-sticky' : ''}`}>
-                <div className="container">
-                    <div className="header-navbar">
-                        <div className="header-brand">
-                            <div className="logo">
-                                <Link href="/">
-
-                                    <img className="logo-light" src={style_3 ? '/assets/images/logo/logo-dark.png' : "/assets/images/logo/logo-dark-2.png"} alt="Corporate Logo" />
-                                    <img className="logo-dark" src={style_3 ? '/assets/images/logo/logo-white.png' : "/assets/images/logo/logo-light-2.png"} alt="Corporate Logo" />
-
-                                </Link>
-                            </div>
-                        </div>
-
-                        <div className="header-mainnav">
-                            <nav className="mainmenu-nav">
-                                <MainMenu />
-                            </nav>
-                        </div>
-
-                        <div className="header-right">
-                            <ul className="header-action">
-                                <li className="icon search-icon" onClick={() => setIsSearchOpen(true)}>
-                                    <a style={{cursor:'pointer'}} className="search-trigger">
-                                        <i className="icon-2"></i>
-                                    </a>
-                                </li>
-
-                                <li className="icon">
-                                    <Link href="/wishlist" className="wishlist">
-
-                                        <i className="icon-22"></i>
-                                        <span className="count">{wishlists?.length}</span>
-
-                                    </Link>
-                                </li>
-
-                                <li className="icon cart-icon">
-                                    <Link href="/cart" className="cart-icon">
-
-                                        <i className="icon-3"></i>
-                                        <span className="count">{quantity}</span>
-
-                                    </Link>
-                                    <Cart />
-                                </li>
-
-                                {no_topBar && 
-                                    <li className="header-btn">
-                                        <a href="#" className="edu-btn btn-medium">Apply Now <i className="icon-4"></i></a>
-                                    </li>
-                                }
-
-                                <li className="mobile-menu-bar d-block d-xl-none">
-                                    <button className="hamberger-button" onClick={()=> setIsOpen(true)}>
-                                        <i className="icon-54"></i>
-                                    </button>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-    
-            {/* <!-- Start Search Popup  --> */}
-            <SearchPopup isSearchOpen={isSearchOpen} setIsSearchOpen={setIsSearchOpen} />
-            {/* <!-- End Search Popup  --> */}
-        </header>
-
-        {/* sidebar start */}
-        <OffCanvas isOpen={isOpen} setIsOpen={setIsOpen} />
-        {/* sidebar end */}
-    </>;
-}
-
-export default HeaderTwo;
\ No newline at end of file
diff --git a/src/layout/headers/header-2.tsx b/src/layout/headers/header-2.tsx
new file mode 100644
index 0000000..fcc679f
--- /dev/null
+++ b/src/layout/headers/header-2.tsx
@@ -0,0 +1,188 @@
+import Link from 'next/link';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import SearchPopup from '../../components/common/popup-modal/search-popup';
+import OffCanvas from '../../components/common/sidebar/off-canvas';
+import useCartInfo from '../../hooks/use-cart-info';
+import useSticky from '../../hooks/use-sticky';
+import { wishlistItems } from '../../redux/features/wishlist-slice';
+import MainMenu from './component/main-menu';
+import Cart from './component/cart';
+
+type HeaderTwoProps = {
+    style_3?: boolean;
+    no_topBar?: boolean;
+};
+
+const HeaderTwo = ({ style_3, no_topBar = false }: HeaderTwoProps) => {
+    const { sticky } = useSticky();
+    const { quantity } = useCartInfo();
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const wishlists = useSelector(wishlistItems);
+    return (
+        <>
+            <header
+                className={`edu-header header-style-${style_3 ? '3' : '2'} ${
+                    no_topBar ? 'no-topbar' : ''
+                }`}
+            >
+                {!no_topBar && (
+                    <div className='header-top-bar'>
+                        <div className='container'>
+                            <div className='header-top'>
+                                <div className='header-top-left'>
+                                    <ul className='header-info'>
+                                        <li>
+                                            <a href='tel:+011235641231'>
+                                                <i className='icon-phone'></i>Call: 123
+                                                4561 5523
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a
+                                                href='mailto:info@edublink.com'
+                                                rel='noreferrer'
+                                                target='_blank'
+                                            >
+                                                <i className='icon-envelope'></i>Email:
+                                                info@edublink.com
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+
+                                <div className='header-top-right'>
+                                    <ul className='header-info'>
+                                        <li>
+                                            <Link href='/sign-in'>Login</Link>
+                                        </li>
+                                        <li>
+                                            <Link href='/sign-in'>Register</Link>
+                                        </li>
+                                        <li className='header-btn'>
+                                            <a
+                                                href='#'
+                                                className={`edu-btn ${
+                                                    style_3 ? '' : 'btn-secondary'
+                                                } btn-medium`}
+                                            >
+                                                Apply Now <i className='icon-4'></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                <div id='edu-sticky-placeholder'></div>
+
+                <div className={`header-mainmenu ${sticky ? 'edu-sticky' : ''}`}>
+                    <div className='container'>
+                        <div className='header-navbar'>
+                            <div className='header-brand'>
+                                <div className='logo'>
+                                    <Link href='/'>
+                                        <picture>
+                                            <img
+                                                className='logo-light'
+                                                src={
+                                                    style_3
+                                                        ? '/assets/images/logo/logo-dark.png'
+                                                        : '/assets/images/logo/logo-dark-2.png'
+                                                }
+                                                alt='Corporate Logo'
+                                            />
+                                        </picture>
+                                        <picture>
+                                            <img
+                                                className='logo-dark'
+                                                src={
+                                                    style_3
+                                                        ? '/assets/images/logo/logo-white.png'
+                                                        : '/assets/images/logo/logo-light-2.png'
+                                                }
+                                                alt='Corporate Logo'
+                                            />
+                                        </picture>
+                                    </Link>
+                                </div>
+                            </div>
+
+                            <div className='header-mainnav'>
+                                <nav className='mainmenu-nav'>
+                                    <MainMenu />
+                                </nav>
+                            </div>
+
+                            <div className='header-right'>
+                                <ul className='header-action'>
+                                    <li
+                                        className='icon search-icon'
+                                        onClick={() => setIsSearchOpen(true)}
+                                    >
+                                        <a
+                                            style={{ cursor: 'pointer' }}
+                                            className='search-trigger'
+                                        >
+                                            <i className='icon-2'></i>
+                                        </a>
+                                    </li>
+
+                                    <li className='icon'>
+                                        <Link href='/wishlist' className='wishlist'>
+                                            <i className='icon-22'></i>
+                                            <span className='count'>
+                                                {wishlists?.length}
+                                            </span>
+                                        </Link>
+                                    </li>
+
+                                    <li className='icon cart-icon'>
+                                        <Link href='/cart' className='cart-icon'>
+                                            <i className='icon-3'></i>
+                                            <span className='count'>{quantity}</span>
+                                        </Link>
+                                        <Cart />
+                                    </li>
+
+                                    {no_topBar && (
+                                        <li className='header-btn'>
+                                            <a href='#' className='edu-btn btn-medium'>
+                                                Apply Now <i className='icon-4'></i>
+                                            </a>
+                                        </li>
+                                    )}
+
+                                    <li className='mobile-menu-bar d-block d-xl-none'>
+                                        <button
+                                            className='hamberger-button'
+                                            onClick={() => setIsOpen(true)}
+                                        >
+                                            <i className='icon-54'></i>
+                                        </button>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* <!-- Start Search Popup  --> */}
+                <SearchPopup
+                    isSearchOpen={isSearchOpen}
+                    setIsSearchOpen={setIsSearchOpen}
+                />
+                {/* <!-- End Search Popup  --> */}
+            </header>
+
+            {/* sidebar start */}
+            <OffCanvas isOpen={isOpen} setIsOpen={setIsOpen} />
+            {/* sidebar end */}
+        </>
+    );
+};
+
+export default HeaderTwo;
diff --git a/src/layout/headers/header-3.jsx b/src/layout/headers/header-3.jsx
deleted file mode 100644
index b74c537..0000000
--- a/src/layout/headers/header-3.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import Link from 'next/link';
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import SearchPopup from '../../components/common/popup-modal/search-popup';
-import OffCanvas from '../../components/common/sidebar/off-canvas';
-import useCartInfo from '../../hooks/use-cart-info';
-import useSticky from '../../hooks/use-sticky';
-import { wishlistItems } from '../../redux/features/wishlist-slice';
-import MainMenu from './component/main-menu';
-import Cart from './component/cart';
-
-const HeaderThree = () => {
-    const { sticky } = useSticky();
-    const { quantity } = useCartInfo();
-    const wishlists = useSelector(wishlistItems);
-    const [isSearchOpen, setIsSearchOpen] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-
-    return <>
-        <header className="edu-header header-style-4 header-fullwidth no-topbar">
-            <div id="edu-sticky-placeholder"></div>
-            <div className={`header-mainmenu ${sticky ? 'edu-sticky' : ''}`}>
-                <div className="container-fluid">
-                    <div className="header-navbar">
-                        <div className="header-brand">
-                            <div className="logo">
-                                <Link href="/">
-
-                                    <img className="logo-light" src="/assets/images/logo/logo-dark.png" alt="Corporate Logo" />
-                                    <img className="logo-dark" src="/assets/images/logo/logo-white.png" alt="Corporate Logo" />
-
-                                </Link>
-                            </div>
-                        </div>
-
-                        <div className="header-mainnav">
-                            <nav className="mainmenu-nav">
-                                <MainMenu />
-                            </nav>
-                        </div>
-
-                        <div className="header-right">
-                            <ul className="header-action">
-                                <li className="search-bar">
-                                    <div className="input-group">
-                                        <input type="text" className="form-control" placeholder="Search" />
-                                        <button onClick={() => setIsSearchOpen(true)} className="search-btn" type="button"><i className="icon-2"></i></button>
-                                    </div>
-                                </li>
-
-                                <li className="icon search-icon">
-                                    <a href='#' className="search-trigger">
-                                        <i className="icon-2"></i>
-                                    </a>
-                                </li>
-
-                                <li className="icon">
-                                    <Link href="/wishlist" className="wishlist">
-
-                                        <i className="icon-22"></i>
-                                        <span className="count">{wishlists?.length}</span>
-
-                                    </Link>
-                                </li>
-
-                                <li className="icon cart-icon">
-                                    <Link href="/cart" className="cart-icon">
-
-                                        <i className="icon-3"></i>
-                                        <span className="count">{quantity}</span>
-
-                                    </Link>
-                                    <Cart />
-                                </li>
-
-                                <li className="header-btn">
-                                    <Link href="/contact-us" className="edu-btn btn-medium btn-curved">
-                                        Try for free<i className="icon-4"></i>
-                                    </Link>
-                                </li>
-
-                                <li className="mobile-menu-bar d-block d-xl-none">
-                                    <button className="hamberger-button" onClick={() => setIsOpen(true)}>
-                                        <i className="icon-54"></i>
-                                    </button>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {/* <!-- Start Search Popup  --> */}
-            <SearchPopup isSearchOpen={isSearchOpen} setIsSearchOpen={setIsSearchOpen} />
-            {/* <!-- End Search Popup  --> */}
-        </header>
-
-        {/* sidebar start */}
-        <OffCanvas isOpen={isOpen} setIsOpen={setIsOpen} />
-        {/* sidebar end */}
-    </>;
-}
-
-export default HeaderThree;
\ No newline at end of file
diff --git a/src/layout/headers/header-3.tsx b/src/layout/headers/header-3.tsx
new file mode 100644
index 0000000..038987a
--- /dev/null
+++ b/src/layout/headers/header-3.tsx
@@ -0,0 +1,132 @@
+import Link from 'next/link';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import SearchPopup from '../../components/common/popup-modal/search-popup';
+import OffCanvas from '../../components/common/sidebar/off-canvas';
+import useCartInfo from '../../hooks/use-cart-info';
+import useSticky from '../../hooks/use-sticky';
+import { wishlistItems } from '../../redux/features/wishlist-slice';
+import MainMenu from './component/main-menu';
+import Cart from './component/cart';
+
+const HeaderThree = () => {
+    const { sticky } = useSticky();
+    const { quantity } = useCartInfo();
+    const wishlists = useSelector(wishlistItems);
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <>
+            <header className='edu-header header-style-4 header-fullwidth no-topbar'>
+                <div id='edu-sticky-placeholder'></div>
+                <div className={`header-mainmenu ${sticky ? 'edu-sticky' : ''}`}>
+                    <div className='container-fluid'>
+                        <div className='header-navbar'>
+                            <div className='header-brand'>
+                                <div className='logo'>
+                                    <Link href='/'>
+                                        <picture>
+                                            <img
+                                                className='logo-light'
+                                                src='/assets/images/logo/logo-dark.png'
+                                                alt='Corporate Logo'
+                                            />
+                                        </picture>
+                                        <picture>
+                                            <img
+                                                className='logo-dark'
+                                                src='/assets/images/logo/logo-white.png'
+                                                alt='Corporate Logo'
+                                            />
+                                        </picture>
+                                    </Link>
+                                </div>
+                            </div>
+
+                            <div className='header-mainnav'>
+                                <nav className='mainmenu-nav'>
+                                    <MainMenu />
+                                </nav>
+                            </div>
+
+                            <div className='header-right'>
+                                <ul className='header-action'>
+                                    <li className='search-bar'>
+                                        <div className='input-group'>
+                                            <input
+                                                type='text'
+                                                className='form-control'
+                                                placeholder='Search'
+                                            />
+                                            <button
+                                                onClick={() => setIsSearchOpen(true)}
+                                                className='search-btn'
+                                                type='button'
+                                            >
+                                                <i className='icon-2'></i>
+                                            </button>
+                                        </div>
+                                    </li>
+
+                                    <li className='icon search-icon'>
+                                        <a href='#' className='search-trigger'>
+                                            <i className='icon-2'></i>
+                                        </a>
+                                    </li>
+
+                                    <li className='icon'>
+                                        <Link href='/wishlist' className='wishlist'>
+                                            <i className='icon-22'></i>
+                                            <span className='count'>
+                                                {wishlists?.length}
+                                            </span>
+                                        </Link>
+                                    </li>
+
+                                    <li className='icon cart-icon'>
+                                        <Link href='/cart' className='cart-icon'>
+                                            <i className='icon-3'></i>
+                                            <span className='count'>{quantity}</span>
+                                        </Link>
+                                        <Cart />
+                                    </li>
+
+                                    <li className='header-btn'>
+                                        <Link
+                                            href='/contact-us'
+                                            className='edu-btn btn-medium btn-curved'
+                                        >
+                                            Try for free<i className='icon-4'></i>
+                                        </Link>
+                                    </li>
+
+                                    <li className='mobile-menu-bar d-block d-xl-none'>
+                                        <button
+                                            className='hamberger-button'
+                                            onClick={() => setIsOpen(true)}
+                                        >
+                                            <i className='icon-54'></i>
+                                        </button>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {/* <!-- Start Search Popup  --> */}
+                <SearchPopup
+                    isSearchOpen={isSearchOpen}
+                    setIsSearchOpen={setIsSearchOpen}
+                />
+                {/* <!-- End Search Popup  --> */}
+            </header>
+
+            {/* sidebar start */}
+            <OffCanvas isOpen={isOpen} setIsOpen={setIsOpen} />
+            {/* sidebar end */}
+        </>
+    );
+};
+
+export default HeaderThree;
diff --git a/src/layout/headers/header.jsx b/src/layout/headers/header.jsx
deleted file mode 100644
index 48bec0e..0000000
--- a/src/layout/headers/header.jsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, { useState } from 'react';
-import Link from 'next/link';
-import { useSelector } from 'react-redux';
-import MainMenu from '../headers/component/main-menu';
-import HeaderTopRight from '../headers/component/header-top-right';
-import HeaderTopLeft from '../headers/component/header-top-left';
-import SearchPopup from '../../components/common/popup-modal/search-popup';
-import useSticky from '../../hooks/use-sticky';
-import { wishlistItems } from '../../redux/features/wishlist-slice';
-import useCartInfo from '../../hooks/use-cart-info';
-import OffCanvas from '../../components/common/sidebar/off-canvas';
-import Cart from './component/cart';
-
-const categories = [
-    { link: '/course-style-1', title: 'Design' },
-    { link: '/course-style-1', title: 'Development' },
-    { link: '/course-style-1', title: 'Architecture' },
-    { link: '/course-style-1', title: 'Life Style' },
-    { link: '/course-style-1', title: 'Data Science' },
-    { link: '/course-style-1', title: 'Marketing' },
-    { link: '/course-style-1', title: 'Music' },
-    { link: '/course-style-1', title: 'Photography' },
-    { link: '/course-style-1', title: 'Finance' },
-    { link: '/course-style-1', title: 'Motivation' }
-]
-
-const Header = ({ header_style, no_top_bar, disable_full_width, disable_category }) => {
-    const { sticky } = useSticky();
-    const { quantity } = useCartInfo();
-    const wishlists = useSelector(wishlistItems);
-    const [isSearchOpen, setIsSearchOpen] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-
-    return <>
-        <header className={`edu-header header-style-${header_style ? header_style : '1'} ${ disable_full_width ? 'disbale-header-fullwidth' : 'header-fullwidth' } ${no_top_bar ? 'no-topbar' : ''}`}>
-            { ! no_top_bar && 
-                <div className="header-top-bar">
-                    <div className="container-fluid">
-                        <div className="header-top">
-                            <div className="header-top-left">
-                                <HeaderTopLeft />
-                            </div>
-                            <div className="header-top-right">
-                                <HeaderTopRight />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            }
-            <div id="edu-sticky-placeholder"></div>
-            <div className={`header-mainmenu ${sticky ? 'edu-sticky' : ''}`}>
-                <div className="container-fluid">
-                    <div className="header-navbar">
-                        <div className="header-brand">
-                            <div className="logo">
-                                <Link href={'/'}>
-
-                                    <img className="logo-light" src='/assets/images/logo/logo-dark.png' alt="logo" />
-                                    <img className="logo-dark" src='/assets/images/logo/logo-white.png' alt="logo" />
-
-                                </Link>
-                            </div>
-
-                            { ! disable_category &&
-                                <div className="header-category">
-                                    <nav className="mainmenu-nav">
-                                        <ul className="mainmenu">
-                                            <li className="has-droupdown">
-                                                <a href="#"><i className="icon-1"></i>Category</a>
-                                                <ul className="submenu">
-                                                    {
-                                                        categories.map((category, i) => (
-                                                            <li key={i}>
-                                                                <Link href={`${category.link}`}>{category.title}</Link>
-                                                            </li>
-                                                        ) )
-                                                    }
-                                                </ul>
-                                            </li>
-                                        </ul>
-                                    </nav>
-                                </div>
-                            }
-                        </div>
-                        <div className="header-mainnav">
-                            <nav className="mainmenu-nav">
-                                {/* main menu start */}
-                                <MainMenu />
-                                {/* main menu end */}
-                            </nav>
-                        </div>
-                        <div className="header-right">
-                            <ul className="header-action">
-                                <li className="search-bar">
-                                    <div className="input-group">
-                                        <input type="text" className="form-control" placeholder="Search" />
-                                        <button className="search-btn" type="button">
-                                            <i className="icon-2"></i>
-                                        </button>
-                                    </div>
-                                </li>
-                                <li className="icon search-icon">
-                                    <a style={{cursor:'pointer'}} onClick={() => setIsSearchOpen(true)} className="search-trigger">
-                                        <i className="icon-2"></i>
-                                    </a>
-                                </li>
-                                <li className="icon">
-                                    <Link href="/wishlist" className="wishlist">
-
-                                        <i className="icon-22"></i>
-                                        <span className="count">{wishlists?.length}</span>
-
-                                    </Link>
-                                </li>
-                                <li className="icon cart-icon">
-                                    <Link href="/cart" className="cart-icon">
-
-                                        <i className="icon-3"></i>
-                                        <span className="count">{quantity}</span>
-
-                                    </Link>
-                                    <Cart />
-                                </li>
-                                <li className="header-btn">
-                                    <Link href="/contact-us" className="edu-btn btn-medium">
-                                        Try for free<i className="icon-4"></i>
-                                    </Link>
-                                </li>
-                                <li className="mobile-menu-bar d-block d-xl-none">
-                                    <button className="hamberger-button" onClick={() => setIsOpen(true)}>
-                                        <i className="icon-54"></i>
-                                    </button>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            {/* <!-- Start Search Popup  --> */}
-            <SearchPopup isSearchOpen={isSearchOpen} setIsSearchOpen={setIsSearchOpen} />
-            {/* <!-- End Search Popup  --> */}
-        </header>
-
-        {/* sidebar start */}
-        <OffCanvas isOpen={isOpen} setIsOpen={setIsOpen} />
-        {/* sidebar end */}
-    </>;
-}
-
-export default Header;
\ No newline at end of file
diff --git a/src/layout/headers/header.tsx b/src/layout/headers/header.tsx
new file mode 100644
index 0000000..4227917
--- /dev/null
+++ b/src/layout/headers/header.tsx
@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useSelector } from 'react-redux';
+import MainMenu from '../headers/component/main-menu';
+import HeaderTopRight from '../headers/component/header-top-right';
+import HeaderTopLeft from '../headers/component/header-top-left';
+import SearchPopup from '../../components/common/popup-modal/search-popup';
+import useSticky from '../../hooks/use-sticky';
+import { wishlistItems } from '../../redux/features/wishlist-slice';
+import useCartInfo from '../../hooks/use-cart-info';
+import OffCanvas from '../../components/common/sidebar/off-canvas';
+import Cart from './component/cart';
+
+const categories = [
+    { link: '/course-style-1', title: 'Design' },
+    { link: '/course-style-1', title: 'Development' },
+    { link: '/course-style-1', title: 'Architecture' },
+    { link: '/course-style-1', title: 'Life Style' },
+    { link: '/course-style-1', title: 'Data Science' },
+    { link: '/course-style-1', title: 'Marketing' },
+    { link: '/course-style-1', title: 'Music' },
+    { link: '/course-style-1', title: 'Photography' },
+    { link: '/course-style-1', title: 'Finance' },
+    { link: '/course-style-1', title: 'Motivation' },
+];
+
+type HeaderProps = {
+    header_style?: string;
+    no_top_bar?: boolean;
+    disable_full_width?: boolean;
+    disable_category?: boolean;
+};
+
+const Header = ({
+    header_style,
+    no_top_bar,
+    disable_full_width,
+    disable_category,
+}: HeaderProps) => {
+    const { sticky } = useSticky();
+    const { quantity } = useCartInfo();
+    const wishlists = useSelector(wishlistItems);
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <>
+            <header
+                className={`edu-header header-style-${
+                    header_style ? header_style : '1'
+                } ${
+                    disable_full_width ? 'disbale-header-fullwidth' : 'header-fullwidth'
+                } ${no_top_bar ? 'no-topbar' : ''}`}
+            >
+                {!no_top_bar && (
+                    <div className='header-top-bar'>
+                        <div className='container-fluid'>
+                            <div className='header-top'>
+                                <div className='header-top-left'>
+                                    <HeaderTopLeft />
+                                </div>
+                                <div className='header-top-right'>
+                                    <HeaderTopRight />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+                <div id='edu-sticky-placeholder'></div>
+                <div className={`header-mainmenu ${sticky ? 'edu-sticky' : ''}`}>
+                    <div className='container-fluid'>
+                        <div className='header-navbar'>
+                            <div className='header-brand'>
+                                <div className='logo'>
+                                    <Link href={'/'}>
+                                        <picture>
+                                            <img
+                                                className='logo-light'
+                                                src='/assets/images/logo/logo-dark.png'
+                                                alt='logo'
+                                            />
+                                        </picture>
+                                        <picture>
+                                            <img
+                                                className='logo-dark'
+                                                src='/assets/images/logo/logo-white.png'
+                                                alt='logo'
+                                            />
+                                        </picture>
+                                    </Link>
+                                </div>
+
+                                {!disable_category && (
+                                    <div className='header-category'>
+                                        <nav className='mainmenu-nav'>
+                                            <ul className='mainmenu'>
+                                                <li className='has-droupdown'>
+                                                    <a href='#'>
+                                                        <i className='icon-1'></i>Category
+                                                    </a>
+                                                    <ul className='submenu'>
+                                                        {categories.map((category, i) => (
+                                                            <li key={i}>
+                                                                <Link
+                                                                    href={`${category.link}`}
+                                                                >
+                                                                    {category.title}
+                                                                </Link>
+                                                            </li>
+                                                        ))}
+                                                    </ul>
+                                                </li>
+                                            </ul>
+                                        </nav>
+                                    </div>
+                                )}
+                            </div>
+                            <div className='header-mainnav'>
+                                <nav className='mainmenu-nav'>
+                                    {/* main menu start */}
+                                    <MainMenu />
+                                    {/* main menu end */}
+                                </nav>
+                            </div>
+                            <div className='header-right'>
+                                <ul className='header-action'>
+                                    <li className='search-bar'>
+                                        <div className='input-group'>
+                                            <input
+                                                type='text'
+                                                className='form-control'
+                                                placeholder='Search'
+                                            />
+                                            <button className='search-btn' type='button'>
+                                                <i className='icon-2'></i>
+                                            </button>
+                                        </div>
+                                    </li>
+                                    <li className='icon search-icon'>
+                                        <a
+                                            style={{ cursor: 'pointer' }}
+                                            onClick={() => setIsSearchOpen(true)}
+                                            className='search-trigger'
+                                        >
+                                            <i className='icon-2'></i>
+                                        </a>
+                                    </li>
+                                    <li className='icon'>
+                                        <Link href='/wishlist' className='wishlist'>
+                                            <i className='icon-22'></i>
+                                            <span className='count'>
+                                                {wishlists?.length}
+                                            </span>
+                                        </Link>
+                                    </li>
+                                    <li className='icon cart-icon'>
+                                        <Link href='/cart' className='cart-icon'>
+                                            <i className='icon-3'></i>
+                                            <span className='count'>{quantity}</span>
+                                        </Link>
+                                        <Cart />
+                                    </li>
+                                    <li className='header-btn'>
+                                        <Link
+                                            href='/contact-us'
+                                            className='edu-btn btn-medium'
+                                        >
+                                            Try for free<i className='icon-4'></i>
+                                        </Link>
+                                    </li>
+                                    <li className='mobile-menu-bar d-block d-xl-none'>
+                                        <button
+                                            className='hamberger-button'
+                                            onClick={() => setIsOpen(true)}
+                                        >
+                                            <i className='icon-54'></i>
+                                        </button>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* <!-- Start Search Popup  --> */}
+                <SearchPopup
+                    isSearchOpen={isSearchOpen}
+                    setIsSearchOpen={setIsSearchOpen}
+                />
+                {/* <!-- End Search Popup  --> */}
+            </header>
+
+            {/* sidebar start */}
+            <OffCanvas isOpen={isOpen} setIsOpen={setIsOpen} />
+            {/* sidebar end */}
+        </>
+    );
+};
+
+export default Header;
diff --git a/src/layout/headers/menu-data.js b/src/layout/headers/menu-data.ts
similarity index 87%
rename from src/layout/headers/menu-data.js
rename to src/layout/headers/menu-data.ts
index 5129aca..53bd36c 100644
--- a/src/layout/headers/menu-data.js
+++ b/src/layout/headers/menu-data.ts
@@ -12,8 +12,8 @@ const menu_data = [
             { title: 'Yoga Instructor', link: '/home-yoga-instructor' },
             { title: 'Kindergarten', link: '/home-kindergarten' },
             { title: 'Modern Schooling', link: '/home-modern-schooling', new: true },
-            { title: 'Landing Demo', link: '/landing-demo' }
-        ]
+            { title: 'Landing Demo', link: '/landing-demo' },
+        ],
     },
     {
         title: 'Pages',
@@ -30,8 +30,8 @@ const menu_data = [
                     { title: 'Instructor 2', link: '/team-2' },
                     { title: 'Instructor 3', link: '/team-3' },
                     { title: 'Instructor Profile', link: '/team-details' },
-                    { title: 'Pricing Table', link: '/pricing-table' }
-                ]
+                    { title: 'Pricing Table', link: '/pricing-table' },
+                ],
             },
             {
                 title: 'Inner Pages',
@@ -42,9 +42,9 @@ const menu_data = [
                     { title: 'Event List', link: '/event-list' },
                     { title: 'Event Details', link: '/event-details' },
                     { title: 'Purchase Guide', link: '/purchase-guide' },
-                    { title: "404 Error", link: '/404' },
-                    { title: "Coming Soon", link: '/coming-soon' }
-                ]
+                    { title: '404 Error', link: '/404' },
+                    { title: 'Coming Soon', link: '/coming-soon' },
+                ],
             },
             {
                 title: 'Inner Pages',
@@ -55,9 +55,9 @@ const menu_data = [
                     { title: 'Sign In', link: '/sign-in' },
                     { title: 'Cart', link: '/cart' },
                     { title: 'Wishlist', link: '/wishlist' },
-                    { title: 'Checkout', link: '/checkout' }
-                ]
-            }
+                    { title: 'Checkout', link: '/checkout' },
+                ],
+            },
         ],
         mobile_pages_menu: [
             { title: 'About Us 1', link: '/about-1' },
@@ -68,8 +68,8 @@ const menu_data = [
             { title: 'Instructor 3', link: '/team-3' },
             { title: 'Instructor Profile', link: '/team-details' },
             { title: "Faq's", link: '/faq' },
-            { title: "404 Error", link: '/404' },
-            { title: "Coming Soon", link: '/coming-soon' },
+            { title: '404 Error', link: '/404' },
+            { title: 'Coming Soon', link: '/coming-soon' },
             { title: 'Gallery Grid', link: '/gallery-grid' },
             { title: 'Gallery Masonry', link: '/gallery-masonry' },
             { title: 'Event Grid', link: '/event-grid' },
@@ -84,8 +84,8 @@ const menu_data = [
             { title: 'Product Details', link: '/product-details' },
             { title: 'Cart', link: '/cart' },
             { title: 'Wishlist', link: '/wishlist' },
-            { title: 'Checkout', link: '/checkout' }
-        ]
+            { title: 'Checkout', link: '/checkout' },
+        ],
     },
     {
         title: 'Courses',
@@ -99,8 +99,8 @@ const menu_data = [
             { title: 'Course Style 5', link: '/course-style-5' },
             { title: 'Course Details 1', link: '/course-details' },
             { title: 'Course Details 2', link: '/course-details-2' },
-            { title: 'Course Details 3', link: '/course-details-3' }
-        ]
+            { title: 'Course Details 3', link: '/course-details-3' },
+        ],
     },
     {
         title: 'Blog',
@@ -110,8 +110,8 @@ const menu_data = [
             { title: 'Blog Standard', link: '/blog-standard' },
             { title: 'Blog Masonry', link: '/blog-masonry' },
             { title: 'Blog List', link: '/blog-list' },
-            { title: 'Blog Details', link: '/blog-details' }
-        ]
+            { title: 'Blog Details', link: '/blog-details' },
+        ],
     },
     {
         title: 'Contact',
@@ -119,9 +119,9 @@ const menu_data = [
         mega_menu: false,
         submenus: [
             { title: 'Contact Us', link: '/contact-us' },
-            { title: 'Contact Me', link: '/contact-me' }
-        ]
-    }
-]
+            { title: 'Contact Me', link: '/contact-me' },
+        ],
+    },
+];
 
-export default menu_data;
\ No newline at end of file
+export default menu_data;
diff --git a/src/layout/index.jsx b/src/layout/index.jsx
deleted file mode 100644
index aefa5a9..0000000
--- a/src/layout/index.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Header from "./headers/header";
-import HeaderTwo from "./headers/header-2";
-import HeaderThree from "./headers/header-3";
-import Footer from "./footers/footer";
-import FooterTwo from "./footers/footer-2";
-import FooterThree from "./footers/footer-3";
-import FooterFour from "./footers/footer-4";
-import Wrapper from "./wrapper";
-
-export {
-    Header,
-    HeaderTwo,
-    HeaderThree,
-    Footer,
-    FooterTwo,
-    FooterThree,
-    FooterFour,
-    Wrapper
-}
\ No newline at end of file
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
new file mode 100644
index 0000000..1293750
--- /dev/null
+++ b/src/layout/index.tsx
@@ -0,0 +1,19 @@
+import Header from './headers/header';
+import HeaderTwo from './headers/header-2';
+import HeaderThree from './headers/header-3';
+import Footer from './footers/footer';
+import FooterTwo from './footers/footer-2';
+import FooterThree from './footers/footer-3';
+import FooterFour from './footers/footer-4';
+import Wrapper from './wrapper';
+
+export {
+    Header,
+    HeaderTwo,
+    HeaderThree,
+    Footer,
+    FooterTwo,
+    FooterThree,
+    FooterFour,
+    Wrapper,
+};
diff --git a/src/layout/no-ssr-wrapper.tsx b/src/layout/no-ssr-wrapper.tsx
new file mode 100644
index 0000000..998ee88
--- /dev/null
+++ b/src/layout/no-ssr-wrapper.tsx
@@ -0,0 +1,14 @@
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+type NoSSRWrapperProps = {
+    children: React.ReactElement;
+};
+
+const NoSSRWrapper = ({ children }: NoSSRWrapperProps) => (
+    <React.Fragment>{children}</React.Fragment>
+);
+
+export default dynamic(() => Promise.resolve(NoSSRWrapper), {
+    ssr: false,
+});
diff --git a/src/layout/wrapper.jsx b/src/layout/wrapper.tsx
similarity index 98%
rename from src/layout/wrapper.jsx
rename to src/layout/wrapper.tsx
index 6f9271c..bc196d7 100644
--- a/src/layout/wrapper.jsx
+++ b/src/layout/wrapper.tsx
@@ -18,5 +18,5 @@ export default function Wrapper({ children }) {
             <ScrollToTop />
             <ToastContainer />
         </>
-    )
+    );
 }
diff --git a/src/pages/404.jsx b/src/pages/404.jsx
deleted file mode 100644
index 9a0c899..0000000
--- a/src/pages/404.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import Link from 'next/link';
-import BreadcrumbThree from '../components/breadcrumb/breadcrumb-3';
-import SEO from '../components/seo';
-import { Footer, Header, Wrapper } from '../layout';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../contexts/mouse-move-context';
-
-const ErrorPage = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <Wrapper>
-            <SEO pageTitle={'404 Page'} />
-            <Header no_top_bar={true} />
-            <BreadcrumbThree title="Error-404" subtitle="Error-404" />
-            
-            <section className="section-gap-equal error-page-area">
-                <div className="container">
-                    <div className="edu-error">
-                        <div className="thumbnail">
-                            <img src="/assets/images/others/404.png" alt="404 Error" />
-                            <ul className="shape-group">
-                                <motion.li className="shape-1 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-25.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-2 scene"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-15.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-3 scene"
-                                    animate={ {
-                                        x: mouseReverse(30).x,
-                                        y: mouseReverse(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/about/shape-13.png" alt="Shape" />
-                                </motion.li>
-                                <motion.li className="shape-4 scene"
-                                    animate={ {
-                                        x: mouseDirection(30).x,
-                                        y: mouseDirection(30).y
-                                    } }
-                                >
-                                    <img src="/assets/images/counterup/shape-02.png" alt="Shape" />
-                                </motion.li>
-                            </ul>
-                        </div>
-                        <div className="content">
-                            <h2 className="title">404 - Page Not Found</h2>
-                            <h4 className="subtitle">The page you are looking for does not exist.</h4>
-                            <Link href="/" className="edu-btn">
-
-                                <i className="icon-west"></i>Back to Homepage
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-                <ul className="shape-group">
-                    <li className="shape-1">
-                        <img src="/assets/images/others/map-shape-2.png" alt="Shape" />
-                    </li>
-                </ul>
-            </section>
-            <Footer style_2={'footer-dark bg-image footer-style-2'} />
-        </Wrapper>
-    );
-}
-
-export default ErrorPage;
\ No newline at end of file
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 0000000..f449fbc
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,112 @@
+import Link from 'next/link';
+import BreadcrumbThree from '../components/breadcrumb/breadcrumb-3';
+import SEO from '../components/seo';
+import { Footer, Header, Wrapper } from '../layout';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../contexts/mouse-move-context';
+
+const ErrorPage = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <Wrapper>
+            <SEO pageTitle={'404 Page'} />
+            <Header no_top_bar={true} />
+            <BreadcrumbThree title='Error-404' subtitle='Error-404' />
+
+            <section className='section-gap-equal error-page-area'>
+                <div className='container'>
+                    <div className='edu-error'>
+                        <div className='thumbnail'>
+                            <picture>
+                                <img
+                                    src='/assets/images/others/404.png'
+                                    alt='404 Error'
+                                />
+                            </picture>
+                            <ul className='shape-group'>
+                                <motion.li
+                                    className='shape-1 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-25.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-2 scene'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-15.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-3 scene'
+                                    animate={{
+                                        x: mouseReverse(30).x,
+                                        y: mouseReverse(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/about/shape-13.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                                <motion.li
+                                    className='shape-4 scene'
+                                    animate={{
+                                        x: mouseDirection(30).x,
+                                        y: mouseDirection(30).y,
+                                    }}
+                                >
+                                    <picture>
+                                        <img
+                                            src='/assets/images/counterup/shape-02.png'
+                                            alt='Shape'
+                                        />
+                                    </picture>
+                                </motion.li>
+                            </ul>
+                        </div>
+                        <div className='content'>
+                            <h2 className='title'>404 - Page Not Found</h2>
+                            <h4 className='subtitle'>
+                                The page you are looking for does not exist.
+                            </h4>
+                            <Link href='/' className='edu-btn'>
+                                <i className='icon-west'></i>Back to Homepage
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <ul className='shape-group'>
+                    <li className='shape-1'>
+                        <picture>
+                            <img
+                                src='/assets/images/others/map-shape-2.png'
+                                alt='Shape'
+                            />
+                        </picture>
+                    </li>
+                </ul>
+            </section>
+            <Footer style_2={'footer-dark bg-image footer-style-2'} />
+        </Wrapper>
+    );
+};
+
+export default ErrorPage;
diff --git a/src/pages/_app.jsx b/src/pages/_app.tsx
similarity index 64%
rename from src/pages/_app.jsx
rename to src/pages/_app.tsx
index b6d38f9..8107f66 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.tsx
@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import sal from 'sal.js';
 import { ThemeProvider } from 'next-themes';
 if (typeof window !== 'undefined') {
-  require( 'bootstrap/dist/js/bootstrap' );
+    require('bootstrap/dist/js/bootstrap');
 }
 import '../styles/index.scss';
 import { store } from '../redux/store';
@@ -12,28 +12,28 @@ import Theme from '../components/common/theme';
 import { MouseMoveProvider } from '../contexts/mouse-move-context';
 import SEO from '../components/seo';
 
-function MyApp( { Component, pageProps } ) {
+function MyApp({ Component, pageProps }) {
     const router = useRouter();
-    useEffect( () => {
-        sal( { threshold: 0.1, once: true } );
-    }, [router.asPath] );
+    useEffect(() => {
+        sal({ root: null, threshold: 0.1, once: true });
+    }, [router.asPath]);
 
-    useEffect( () => {
+    useEffect(() => {
         sal();
-    }, [] );
+    }, []);
     return (
         <React.Fragment>
-            <SEO font="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Spartan:wght@400;500;600;700;800&display=swap" />
-            <Provider store={ store }>
-                <ThemeProvider defaultTheme="light">
+            <SEO font='https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Spartan:wght@400;500;600;700;800&display=swap' />
+            <Provider store={store}>
+                <ThemeProvider defaultTheme='light'>
                     <MouseMoveProvider>
-                        <Component { ...pageProps } />
+                        <Component {...pageProps} />
                     </MouseMoveProvider>
                     <Theme />
                 </ThemeProvider>
             </Provider>
         </React.Fragment>
-    )
+    );
 }
 
 export default MyApp;
diff --git a/src/pages/about-1.jsx b/src/pages/about-1.tsx
similarity index 88%
rename from src/pages/about-1.jsx
rename to src/pages/about-1.tsx
index 7f2bd95..863dc95 100644
--- a/src/pages/about-1.jsx
+++ b/src/pages/about-1.tsx
@@ -8,7 +8,7 @@ const AboutOne = () => {
             <SEO pageTitle={'About One'} />
             <AboutOneMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default AboutOne;
\ No newline at end of file
+export default AboutOne;
diff --git a/src/pages/about-2.jsx b/src/pages/about-2.tsx
similarity index 88%
rename from src/pages/about-2.jsx
rename to src/pages/about-2.tsx
index a1e44e2..7286016 100644
--- a/src/pages/about-2.jsx
+++ b/src/pages/about-2.tsx
@@ -8,7 +8,7 @@ const AboutTwo = () => {
             <SEO pageTitle={'About Two'} />
             <AboutTwoMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default AboutTwo;
\ No newline at end of file
+export default AboutTwo;
diff --git a/src/pages/about-3.jsx b/src/pages/about-3.tsx
similarity index 88%
rename from src/pages/about-3.jsx
rename to src/pages/about-3.tsx
index 037ed22..20b4bb5 100644
--- a/src/pages/about-3.jsx
+++ b/src/pages/about-3.tsx
@@ -8,7 +8,7 @@ const AboutThree = () => {
             <SEO pageTitle={'About Three'} />
             <AboutThreeMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default AboutThree;
\ No newline at end of file
+export default AboutThree;
diff --git a/src/pages/api/event.js b/src/pages/api/event.js
deleted file mode 100644
index 75ca29d..0000000
--- a/src/pages/api/event.js
+++ /dev/null
@@ -1,37 +0,0 @@
-export default function handler(req, res) {
-  res.status(200).json([
-    {
-      id: 1,
-      img: '/assets/images/blog/blog-01.jpg',
-      category: 'ONLINE',
-      title: 'Become a Better Blogger: Content Planning',
-      date: "Oct 10, 2022",
-      comment: 9,
-      sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
-      delay:'100',
-      home_1:true,
-    },
-    {
-      id: 2,
-      img: '/assets/images/blog/blog-02.jpg',
-      category: 'LECTURE',
-      title: 'How to Keep Workouts Fresh in the Morning',
-      date: "Jan 10, 2022",
-      comment: 15,
-      sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
-      delay:'200',
-      home_1:true,
-    },
-    {
-      id: 3,
-      img: '/assets/images/blog/blog-03.jpg',
-      category: 'BUSINESS',
-      title: 'Four Ways to Keep Your Workout Routine Fresh',
-      date: "Feb 10, 2021",
-      comment: 12,
-      sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
-      delay:'300',
-      home_1:true,
-    }
-  ])
-}
\ No newline at end of file
diff --git a/src/pages/api/event.ts b/src/pages/api/event.ts
new file mode 100644
index 0000000..677da6e
--- /dev/null
+++ b/src/pages/api/event.ts
@@ -0,0 +1,39 @@
+export default function handler(req, res) {
+    res.status(200).json([
+        {
+            id: 1,
+            img: '/assets/images/blog/blog-01.jpg',
+            category: 'ONLINE',
+            title: 'Become a Better Blogger: Content Planning',
+            date: 'Oct 10, 2022',
+            comment: 9,
+            sm_desc: 'Lorem ipsum dolor sit amet cons tetur adipisicing sed.',
+            delay: '100',
+            home_1: true,
+        },
+        {
+            id: 2,
+            img: '/assets/images/blog/blog-02.jpg',
+            category: 'LECTURE',
+            title: 'How to Keep Workouts Fresh in the Morning',
+            date: 'Jan 10, 2022',
+            comment: 15,
+            sm_desc:
+                'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt labore dol oremagna aliqua.',
+            delay: '200',
+            home_1: true,
+        },
+        {
+            id: 3,
+            img: '/assets/images/blog/blog-03.jpg',
+            category: 'BUSINESS',
+            title: 'Four Ways to Keep Your Workout Routine Fresh',
+            date: 'Feb 10, 2021',
+            comment: 12,
+            sm_desc:
+                'Lorem ipsum dolor sit amet cons tetur adipisicing sed do eiusmod ux tempor incid idunt.',
+            delay: '300',
+            home_1: true,
+        },
+    ]);
+}
diff --git a/src/pages/api/hello.js b/src/pages/api/hello.ts
similarity index 72%
rename from src/pages/api/hello.js
rename to src/pages/api/hello.ts
index 90a76c0..2627544 100644
--- a/src/pages/api/hello.js
+++ b/src/pages/api/hello.ts
@@ -1,4 +1,4 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+    res.status(200).json({ name: 'John Doe' });
 }
diff --git a/src/pages/blog-details/[id].jsx b/src/pages/blog-details/[id].tsx
similarity index 76%
rename from src/pages/blog-details/[id].jsx
rename to src/pages/blog-details/[id].tsx
index f9da5fe..d99ab66 100644
--- a/src/pages/blog-details/[id].jsx
+++ b/src/pages/blog-details/[id].tsx
@@ -8,33 +8,33 @@ import BlogDetailsMain from '../../components/blog-details';
 const DynamicBlogDetails = () => {
     const router = useRouter();
     const { id } = router.query;
-    const blog = blog_data.find(item => Number(item.id) === Number(id))
+    const blog = blog_data.find(item => Number(item.id) === Number(id));
     return (
         <Wrapper>
             <SEO pageTitle={'Blog Details'} />
             <BlogDetailsMain blog={blog} />
         </Wrapper>
-    )
-}
+    );
+};
 
 export default DynamicBlogDetails;
 
 export async function getStaticPaths() {
-    const paths = blog_data.map((blog) => {
+    const paths = blog_data.map(blog => {
         return {
-            params:{
-                id:`${blog.id}`
-            }
-        }
-    })
+            params: {
+                id: `${blog.id}`,
+            },
+        };
+    });
     return {
-      paths,
-      fallback: false,
-    }
-  }
+        paths,
+        fallback: false,
+    };
+}
 
 export async function getStaticProps(context) {
     return {
-        props: {}
-    }
-}
\ No newline at end of file
+        props: {},
+    };
+}
diff --git a/src/pages/blog-details/index.jsx b/src/pages/blog-details/index.tsx
similarity index 90%
rename from src/pages/blog-details/index.jsx
rename to src/pages/blog-details/index.tsx
index 5da2808..71899b5 100644
--- a/src/pages/blog-details/index.jsx
+++ b/src/pages/blog-details/index.tsx
@@ -11,7 +11,7 @@ const BlogDetails = () => {
             <SEO pageTitle={'Blog Details'} />
             <BlogDetailsMain blog={blog} />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default BlogDetails;
\ No newline at end of file
+export default BlogDetails;
diff --git a/src/pages/blog-list.jsx b/src/pages/blog-list.tsx
similarity index 88%
rename from src/pages/blog-list.jsx
rename to src/pages/blog-list.tsx
index 6b1a298..2257214 100644
--- a/src/pages/blog-list.jsx
+++ b/src/pages/blog-list.tsx
@@ -8,7 +8,7 @@ const BlogList = () => {
             <SEO pageTitle={'Blog'} />
             <BlogListMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default BlogList;
\ No newline at end of file
+export default BlogList;
diff --git a/src/pages/blog-masonry.jsx b/src/pages/blog-masonry.tsx
similarity index 88%
rename from src/pages/blog-masonry.jsx
rename to src/pages/blog-masonry.tsx
index b010eda..774873b 100644
--- a/src/pages/blog-masonry.jsx
+++ b/src/pages/blog-masonry.tsx
@@ -8,7 +8,7 @@ const BlogMasonry = () => {
             <SEO pageTitle={'Blog Masonry'} />
             <BlogMasonryMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default BlogMasonry;
\ No newline at end of file
+export default BlogMasonry;
diff --git a/src/pages/blog-standard.jsx b/src/pages/blog-standard.tsx
similarity index 87%
rename from src/pages/blog-standard.jsx
rename to src/pages/blog-standard.tsx
index bf6e512..af86243 100644
--- a/src/pages/blog-standard.jsx
+++ b/src/pages/blog-standard.tsx
@@ -8,7 +8,7 @@ const BlogStandard = () => {
             <SEO pageTitle={'Blog Standard'} />
             <BlogMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default BlogStandard;
\ No newline at end of file
+export default BlogStandard;
diff --git a/src/pages/cart.jsx b/src/pages/cart.tsx
similarity index 89%
rename from src/pages/cart.jsx
rename to src/pages/cart.tsx
index d26138a..96617db 100644
--- a/src/pages/cart.jsx
+++ b/src/pages/cart.tsx
@@ -8,7 +8,7 @@ const Cart = () => {
             <SEO pageTitle={'Cart'} />
             <CartMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default Cart;
\ No newline at end of file
+export default Cart;
diff --git a/src/pages/checkout.jsx b/src/pages/checkout.tsx
similarity index 88%
rename from src/pages/checkout.jsx
rename to src/pages/checkout.tsx
index 36e0d85..70471a0 100644
--- a/src/pages/checkout.jsx
+++ b/src/pages/checkout.tsx
@@ -8,7 +8,7 @@ const Checkout = () => {
             <SEO pageTitle={'Checkout'} />
             <CheckoutMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default Checkout;
\ No newline at end of file
+export default Checkout;
diff --git a/src/pages/coming-soon.jsx b/src/pages/coming-soon.jsx
deleted file mode 100644
index dbdbb59..0000000
--- a/src/pages/coming-soon.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import Time from '../utils/time';
-import { motion } from 'framer-motion';
-import { useMouseMoveUI } from '../contexts/mouse-move-context';
-
-const ComingSoon = () => {
-    const { mouseDirection, mouseReverse } = useMouseMoveUI();
-    return (
-        <div id="main-wrapper" className="main-wrapper">
-            <section className="coming-soon-page-area ">
-                <div className="container">
-                    <div className="coming-soon-content">
-                        <h1 className="title">Coming Soon</h1>
-                        <div className="coming-countdown">
-                            <div className="countdown-section">
-                                <div>
-                                    <div className="countdown-number day">{Time('2023-12-5 00:00:00').days}</div>
-                                    <div className="countdown-unit">Days</div>
-                                </div>
-                            </div>
-                            <div className="countdown-section">
-                                <div>
-                                    <div className="countdown-number hour">{Time('2023-12-5 00:00:00').hours}</div>
-                                    <div className="countdown-unit">Hrss</div>
-                                </div>
-                            </div>
-                            <div className="countdown-section">
-                                <div>
-                                    <div className="countdown-number minute">{Time('2023-12-5 00:00:00').minutes}</div>
-                                    <div className="countdown-unit">Mints</div>
-                                </div>
-                            </div>
-                            <div className="countdown-section">
-                                <div>
-                                    <div className="countdown-number second" suppressHydrationWarning>{Time('2023-12-5 00:00:00').seconds}</div>
-                                    <div className="countdown-unit">Sec</div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div className="input-group">
-                            <input type="email" className="form-control" placeholder="Enter your email address" />
-                            <button className="edu-btn btn-medium" type="button">Subscribe <i className="icon-4"></i></button>
-                        </div>
-                    </div>
-                </div>
-                <ul className="shape-group">
-                    <motion.li className="shape-1 scene"
-                        animate={ {
-                            x: mouseReverse(40).x,
-                            y: mouseReverse(40).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-22.png" alt="Shape" />
-                    </motion.li>
-                    <motion.li className="shape-2 scene"
-                        animate={ {
-                            x: mouseDirection(30).x,
-                            y: mouseDirection(30).y
-                        } }
-                    >
-                        <img src="/assets/images/others/shape-23.png" alt="Shape" />
-                    </motion.li>
-                    <li className="shape-3">
-                        <img className="rotateit" src="/assets/images/others/shape-24.png" alt="Shape" />
-                    </li>
-                    <li className="shape-4"></li>
-                </ul>
-            </section>
-        </div>
-    )
-}
-
-export default ComingSoon;
\ No newline at end of file
diff --git a/src/pages/coming-soon.tsx b/src/pages/coming-soon.tsx
new file mode 100644
index 0000000..be2abb5
--- /dev/null
+++ b/src/pages/coming-soon.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import Time from '../utils/time';
+import { motion } from 'framer-motion';
+import { useMouseMoveUI } from '../contexts/mouse-move-context';
+
+const ComingSoon = () => {
+    const { mouseDirection, mouseReverse } = useMouseMoveUI();
+    return (
+        <div id='main-wrapper' className='main-wrapper'>
+            <section className='coming-soon-page-area '>
+                <div className='container'>
+                    <div className='coming-soon-content'>
+                        <h1 className='title'>Coming Soon</h1>
+                        <div className='coming-countdown'>
+                            <div className='countdown-section'>
+                                <div>
+                                    <div className='countdown-number day'>
+                                        {Time('2023-12-5 00:00:00').days}
+                                    </div>
+                                    <div className='countdown-unit'>Days</div>
+                                </div>
+                            </div>
+                            <div className='countdown-section'>
+                                <div>
+                                    <div className='countdown-number hour'>
+                                        {Time('2023-12-5 00:00:00').hours}
+                                    </div>
+                                    <div className='countdown-unit'>Hrss</div>
+                                </div>
+                            </div>
+                            <div className='countdown-section'>
+                                <div>
+                                    <div className='countdown-number minute'>
+                                        {Time('2023-12-5 00:00:00').minutes}
+                                    </div>
+                                    <div className='countdown-unit'>Mints</div>
+                                </div>
+                            </div>
+                            <div className='countdown-section'>
+                                <div>
+                                    <div
+                                        className='countdown-number second'
+                                        suppressHydrationWarning
+                                    >
+                                        {Time('2023-12-5 00:00:00').seconds}
+                                    </div>
+                                    <div className='countdown-unit'>Sec</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='input-group'>
+                            <input
+                                type='email'
+                                className='form-control'
+                                placeholder='Enter your email address'
+                            />
+                            <button className='edu-btn btn-medium' type='button'>
+                                Subscribe <i className='icon-4'></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <ul className='shape-group'>
+                    <motion.li
+                        className='shape-1 scene'
+                        animate={{
+                            x: mouseReverse(40).x,
+                            y: mouseReverse(40).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-22.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                    <motion.li
+                        className='shape-2 scene'
+                        animate={{
+                            x: mouseDirection(30).x,
+                            y: mouseDirection(30).y,
+                        }}
+                    >
+                        <picture>
+                            <img src='/assets/images/others/shape-23.png' alt='Shape' />
+                        </picture>
+                    </motion.li>
+                    <li className='shape-3'>
+                        <picture>
+                            <img
+                                className='rotateit'
+                                src='/assets/images/others/shape-24.png'
+                                alt='Shape'
+                            />
+                        </picture>
+                    </li>
+                    <li className='shape-4'></li>
+                </ul>
+            </section>
+        </div>
+    );
+};
+
+export default ComingSoon;
diff --git a/src/pages/contact-me.jsx b/src/pages/contact-me.tsx
similarity index 79%
rename from src/pages/contact-me.jsx
rename to src/pages/contact-me.tsx
index a920acc..cbf2e94 100644
--- a/src/pages/contact-me.jsx
+++ b/src/pages/contact-me.tsx
@@ -6,9 +6,9 @@ const ContactMe = () => {
     return (
         <Wrapper>
             <SEO pageTitle={'Contact Me'} />
-            <ContactMeMain/>
+            <ContactMeMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default ContactMe;
\ No newline at end of file
+export default ContactMe;
diff --git a/src/pages/contact-us.jsx b/src/pages/contact-us.tsx
similarity index 88%
rename from src/pages/contact-us.jsx
rename to src/pages/contact-us.tsx
index f26dc4b..68225ee 100644
--- a/src/pages/contact-us.jsx
+++ b/src/pages/contact-us.tsx
@@ -8,7 +8,7 @@ const ContactUs = () => {
             <SEO pageTitle={'Contact Us'} />
             <ContactUsMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default ContactUs;
\ No newline at end of file
+export default ContactUs;
diff --git a/src/pages/course-details-2.jsx b/src/pages/course-details-2.tsx
similarity index 83%
rename from src/pages/course-details-2.jsx
rename to src/pages/course-details-2.tsx
index ce71407..342c6a1 100644
--- a/src/pages/course-details-2.jsx
+++ b/src/pages/course-details-2.tsx
@@ -3,7 +3,7 @@ import { Wrapper } from '../layout';
 import CourseDetailsTwoMain from '../components/course-details-2';
 import { course_data } from '../data';
 
-const course = course_data[0]
+const course = course_data[0];
 
 const CourseDetailsTwo = () => {
     return (
@@ -11,7 +11,7 @@ const CourseDetailsTwo = () => {
             <SEO pageTitle={'Course Details 2'} />
             <CourseDetailsTwoMain course={course} />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default CourseDetailsTwo;
\ No newline at end of file
+export default CourseDetailsTwo;
diff --git a/src/pages/course-details-3.jsx b/src/pages/course-details-3.tsx
similarity index 87%
rename from src/pages/course-details-3.jsx
rename to src/pages/course-details-3.tsx
index 5dbd8e4..1d8f59c 100644
--- a/src/pages/course-details-3.jsx
+++ b/src/pages/course-details-3.tsx
@@ -8,7 +8,7 @@ const CourseDetailsThree = () => {
             <SEO pageTitle={'Course Details 3'} />
             <CourseDetailsThreeMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default CourseDetailsThree;
\ No newline at end of file
+export default CourseDetailsThree;
diff --git a/src/pages/course-details/[id].jsx b/src/pages/course-details/[id].jsx
deleted file mode 100644
index 23958dd..0000000
--- a/src/pages/course-details/[id].jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {useRouter} from 'next/router';
-import React from 'react';
-import SEO from '../../components/seo';
-import {Wrapper} from '../../layout';
-import CourseDetailsMain from '../../components/course-details';
-import {getAllCourses, getCourseData} from "../../utils/api";
-
-
-const DynamicCourseDetails = ({course}) => {
-    const router = useRouter();
-    const {id} = router.query;
-
-    return (
-        <Wrapper>
-            <SEO pageTitle={'Course Details'}/>
-            <CourseDetailsMain course={course}/>
-        </Wrapper>
-    )
-}
-
-export default DynamicCourseDetails;
-
-export async function getStaticPaths() {
-    const courses = await getAllCourses();
-
-    const paths = courses?.nodes?.map((node) => {
-        return `/course-details/${node.id}`
-    })
-
-    return {
-        paths,
-        fallback: 'blocking',
-    }
-}
-
-export async function getStaticProps(context) {
-    const course = await getCourseData(context.params.id)
-
-    return {
-        props: {
-            course,
-        },
-        revalidate: false
-    }
-}
diff --git a/src/pages/course-details/[id].tsx b/src/pages/course-details/[id].tsx
new file mode 100644
index 0000000..8bd6c04
--- /dev/null
+++ b/src/pages/course-details/[id].tsx
@@ -0,0 +1,46 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+import SEO from '../../components/seo';
+import { Wrapper } from '../../layout';
+import CourseDetailsMain from '../../components/course-details';
+import { getAllCourses, getCourseData } from '../../utils/api';
+
+const DynamicCourseDetails = ({ course }) => {
+    const router = useRouter();
+    const { id } = router.query;
+
+    return (
+        <Wrapper>
+            <SEO pageTitle={'Course Details'} />
+            <CourseDetailsMain course={course} />
+        </Wrapper>
+    );
+};
+
+export default DynamicCourseDetails;
+
+export async function getStaticPaths() {
+    return { paths: [], fallback: 'blocking' };
+
+    const courses = await getAllCourses();
+
+    const paths = courses?.nodes?.map(node => {
+        return `/course-details/${node.id}`;
+    });
+
+    return {
+        paths,
+        fallback: 'blocking',
+    };
+}
+
+export async function getStaticProps(context) {
+    const course = await getCourseData(context.params.id);
+
+    return {
+        props: {
+            course,
+        },
+        revalidate: false,
+    };
+}
diff --git a/src/pages/course-details/index.jsx b/src/pages/course-details/index.tsx
similarity index 97%
rename from src/pages/course-details/index.jsx
rename to src/pages/course-details/index.tsx
index ec1d118..24ecda6 100644
--- a/src/pages/course-details/index.jsx
+++ b/src/pages/course-details/index.tsx
@@ -12,7 +12,7 @@ const CourseDetails = () => {
             <SEO pageTitle={'Course Details'} />
             <CourseDetailsMain course={course} />
         </Wrapper>
-    )
-}
+    );
+};
 
 export default CourseDetails;
diff --git a/src/pages/course-style-1.jsx b/src/pages/course-style-1.jsx
deleted file mode 100644
index a537e10..0000000
--- a/src/pages/course-style-1.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {useRouter} from 'next/router';
-import React from 'react';
-import SEO from '../components/seo';
-import { Wrapper } from '../layout';
-import CourseStyleOneMain from '../components/course-style-1';
-import {getAllCourses} from "../utils/api";
-
-const CourseStyleOne = ({courses}) => {
-    const router = useRouter();
-    const {id} = router.query;
-
-    return (
-        <Wrapper>
-            <SEO pageTitle={'1Course Style 1'} />
-            <CourseStyleOneMain courses={courses.nodes}/>
-        </Wrapper>
-    )
-}
-
-export default CourseStyleOne;
-
-
-// This gets called on every request
-export async function getStaticProps() {
-  // Fetch data from external API
-  const courses = await getAllCourses()
-
-  // Pass data to the page via props
-  return { props: { courses } }
-}
diff --git a/src/pages/course-style-1.tsx b/src/pages/course-style-1.tsx
new file mode 100644
index 0000000..ee8ee21
--- /dev/null
+++ b/src/pages/course-style-1.tsx
@@ -0,0 +1,29 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+import SEO from '../components/seo';
+import { Wrapper } from '../layout';
+import CourseStyleOneMain from '../components/course-style-1';
+import { getAllCourses } from '../utils/api';
+
+const CourseStyleOne = ({ courses }) => {
+    const router = useRouter();
+    const { id } = router.query;
+
+    return (
+        <Wrapper>
+            <SEO pageTitle={'1Course Style 1'} />
+            {courses ? <CourseStyleOneMain courses={courses.nodes} /> : 'No courses'}
+        </Wrapper>
+    );
+};
+
+export default CourseStyleOne;
+
+// This gets called on every request
+// export async function getStaticProps() {
+//     // Fetch data from external API
+//     const courses = await getAllCourses();
+
+//     // Pass data to the page via props
+//     return { props: { courses } };
+// }
diff --git a/src/pages/course-style-2.jsx b/src/pages/course-style-2.tsx
similarity index 88%
rename from src/pages/course-style-2.jsx
rename to src/pages/course-style-2.tsx
index bda0d7b..dcdc57d 100644
--- a/src/pages/course-style-2.jsx
+++ b/src/pages/course-style-2.tsx
@@ -8,7 +8,7 @@ const CourseStyleTwo = () => {
             <SEO pageTitle={'Course Style 2'} />
             <CourseStyleTwoMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default CourseStyleTwo;
\ No newline at end of file
+export default CourseStyleTwo;
diff --git a/src/pages/course-style-3.jsx b/src/pages/course-style-3.tsx
similarity index 87%
rename from src/pages/course-style-3.jsx
rename to src/pages/course-style-3.tsx
index 5119f91..147c27f 100644
--- a/src/pages/course-style-3.jsx
+++ b/src/pages/course-style-3.tsx
@@ -8,7 +8,7 @@ const CourseStyleThree = () => {
             <SEO pageTitle={'Course Style 3'} />
             <CourseStyleThreeMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default CourseStyleThree;
\ No newline at end of file
+export default CourseStyleThree;
diff --git a/src/pages/course-style-4.jsx b/src/pages/course-style-4.tsx
similarity index 87%
rename from src/pages/course-style-4.jsx
rename to src/pages/course-style-4.tsx
index 37a4a04..ebdbbd5 100644
--- a/src/pages/course-style-4.jsx
+++ b/src/pages/course-style-4.tsx
@@ -8,7 +8,7 @@ const CourseStyleFour = () => {
             <SEO pageTitle={'Course Style 4'} />
             <CourseStyleFourMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default CourseStyleFour;
\ No newline at end of file
+export default CourseStyleFour;
diff --git a/src/pages/course-style-5.jsx b/src/pages/course-style-5.tsx
similarity index 87%
rename from src/pages/course-style-5.jsx
rename to src/pages/course-style-5.tsx
index d76dc2d..49f0993 100644
--- a/src/pages/course-style-5.jsx
+++ b/src/pages/course-style-5.tsx
@@ -8,7 +8,7 @@ const CourseStyleFive = () => {
             <SEO pageTitle={'Course Style 5'} />
             <CourseStyleFiveMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default CourseStyleFive;
\ No newline at end of file
+export default CourseStyleFive;
diff --git a/src/pages/dev/upload-json.tsx b/src/pages/dev/upload-json.tsx
new file mode 100644
index 0000000..c1b8c25
--- /dev/null
+++ b/src/pages/dev/upload-json.tsx
@@ -0,0 +1,88 @@
+import React, { ChangeEvent, useState } from 'react';
+import { Wrapper } from '../../layout';
+import SEO from '../../components/seo';
+import { Evaluation } from '../../redux/features/api.types';
+import EvaluationResponse from '../../components/writing-evaluation/EvaluationResponse';
+import FeedbackResponse from '../../components/writing-evaluation/FeedbackResponse';
+
+type ResultJson = {
+    evaluation: Evaluation.EvaluateResponse;
+    feedback: Evaluation.FeedbackResponse;
+    preset: string;
+    connection_id: number;
+};
+
+const UploadJson = () => {
+    const [resultJson, setFileContent] = useState<ResultJson | null>(null);
+
+    const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files[0];
+        if (file && file.type === 'application/json') {
+            const reader = new FileReader();
+            reader.onload = e => {
+                try {
+                    // @ts-ignore
+                    const json = JSON.parse(e.target.result);
+                    setFileContent(json);
+                } catch (error) {
+                    alert('Error parsing JSON!');
+                }
+            };
+            reader.readAsText(file);
+        } else {
+            alert('Please upload a valid JSON file.');
+        }
+    };
+
+    return (
+        <Wrapper>
+            <SEO pageTitle={'Upload Json'} />
+            <div id='main-wrapper' className='main-wrapper'>
+                <section className='edu-section-gap course-details-area'>
+                    <div className='course-details-content'>
+                        <div className='tab-content' id='myTabContent'>
+                            <div
+                                className='tab-pane fade show active'
+                                id='overview'
+                                role='tabpanel'
+                                aria-labelledby='overview-tab'
+                            >
+                                <div className='course-tab-content'>
+                                    <div className='course-overview'>
+                                        <h5 className='title'>Upload Json</h5>
+                                        <div className='writing-evaluation-form writing-evaluation-form-1'>
+                                            <input
+                                                type='file'
+                                                onChange={handleFileChange}
+                                                accept='.json'
+                                            />
+                                            {resultJson && (
+                                                <>
+                                                    <h5 className='title'>
+                                                        {'Connection ' +
+                                                            resultJson.connection_id}
+                                                    </h5>
+                                                    <p>{resultJson.preset}</p>
+                                                    <EvaluationResponse
+                                                        evaluation={resultJson.evaluation}
+                                                    />
+                                                    <FeedbackResponse
+                                                        feedback={
+                                                            resultJson.feedback.feedback
+                                                        }
+                                                    />
+                                                </>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </Wrapper>
+    );
+};
+
+export default UploadJson;
diff --git a/src/pages/dev/wai-1.tsx b/src/pages/dev/wai-1.tsx
new file mode 100644
index 0000000..f82b26c
--- /dev/null
+++ b/src/pages/dev/wai-1.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Wrapper } from '../../layout';
+import SEO from '../../components/seo';
+import WritingEvaluation from '../../components/forms/writing-evaluation-form';
+
+const WaiOne = () => {
+    return (
+        <Wrapper>
+            <SEO pageTitle={'Course Details'} />
+            <div id='main-wrapper' className='main-wrapper'>
+                <section className='edu-section-gap course-details-area'>
+                    <div className='course-details-content'>
+                        <div className='tab-content' id='myTabContent'>
+                            <div
+                                className='tab-pane fade show active'
+                                id='overview'
+                                role='tabpanel'
+                                aria-labelledby='overview-tab'
+                            >
+                                <div className='course-tab-content'>
+                                    <div className='course-overview'>
+                                        <WritingEvaluation connection_id={1} />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </Wrapper>
+    );
+};
+
+export default WaiOne;
diff --git a/src/pages/dev/wai-2.tsx b/src/pages/dev/wai-2.tsx
new file mode 100644
index 0000000..0767e1e
--- /dev/null
+++ b/src/pages/dev/wai-2.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Wrapper } from '../../layout';
+import SEO from '../../components/seo';
+import WritingEvaluation from '../../components/forms/writing-evaluation-form';
+
+const WaiTwo = () => {
+    return (
+        <Wrapper>
+            <SEO pageTitle={'Course Details'} />
+            <div id='main-wrapper' className='main-wrapper'>
+                <section className='edu-section-gap course-details-area'>
+                    <div className='course-details-content'>
+                        <div className='tab-content' id='myTabContent'>
+                            <div
+                                className='tab-pane fade show active'
+                                id='overview'
+                                role='tabpanel'
+                                aria-labelledby='overview-tab'
+                            >
+                                <div className='course-tab-content'>
+                                    <div className='course-overview'>
+                                        <WritingEvaluation connection_id={2} />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </Wrapper>
+    );
+};
+
+export default WaiTwo;
+
+/*
+{
+    "feedback": {
+        "Grammar": "...",
+        "Spelling": "...",
+        "Punctuation": "..."
+    }
+}
+
+*/
diff --git a/src/pages/event-details/[id].jsx b/src/pages/event-details/[id].tsx
similarity index 76%
rename from src/pages/event-details/[id].jsx
rename to src/pages/event-details/[id].tsx
index 44c7858..f9c9b6a 100644
--- a/src/pages/event-details/[id].jsx
+++ b/src/pages/event-details/[id].tsx
@@ -8,33 +8,33 @@ import EventDetailsMain from '../../components/event-details';
 const DynamicEventDetails = () => {
     const router = useRouter();
     const { id } = router.query;
-    const event = event_data.find(item => Number(item.id) === Number(id))
+    const event = event_data.find(item => Number(item.id) === Number(id));
     return (
         <Wrapper>
             <SEO pageTitle={'Event Details'} />
             <EventDetailsMain event={event} />
         </Wrapper>
-    )
-}
+    );
+};
 
 export default DynamicEventDetails;
 
 export async function getStaticPaths() {
-    const paths = event_data.map((event) => {
+    const paths = event_data.map(event => {
         return {
-            params:{
-                id:`${event.id}`
-            }
-        }
-    })
+            params: {
+                id: `${event.id}`,
+            },
+        };
+    });
     return {
-      paths,
-      fallback: false,
-    }
-  }
+        paths,
+        fallback: false,
+    };
+}
 
 export async function getStaticProps(context) {
     return {
-        props: {}
-    }
-}
\ No newline at end of file
+        props: {},
+    };
+}
diff --git a/src/pages/event-details/index.jsx b/src/pages/event-details/index.tsx
similarity index 84%
rename from src/pages/event-details/index.jsx
rename to src/pages/event-details/index.tsx
index d9ccaff..48217a4 100644
--- a/src/pages/event-details/index.jsx
+++ b/src/pages/event-details/index.tsx
@@ -3,7 +3,7 @@ import { Wrapper } from '../../layout';
 import EventDetailsMain from '../../components/event-details';
 import { event_data } from '../../data';
 
-const event = event_data[0]
+const event = event_data[0];
 
 const EventDetails = () => {
     return (
@@ -11,7 +11,7 @@ const EventDetails = () => {
             <SEO pageTitle={'Event Details'} />
             <EventDetailsMain event={event} />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default EventDetails;
\ No newline at end of file
+export default EventDetails;
diff --git a/src/pages/event-grid.jsx b/src/pages/event-grid.tsx
similarity index 88%
rename from src/pages/event-grid.jsx
rename to src/pages/event-grid.tsx
index 49e606d..9b9f457 100644
--- a/src/pages/event-grid.jsx
+++ b/src/pages/event-grid.tsx
@@ -8,7 +8,7 @@ const EventGrid = () => {
             <SEO pageTitle={'Event Grid'} />
             <EventGridMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default EventGrid;
\ No newline at end of file
+export default EventGrid;
diff --git a/src/pages/event-list.jsx b/src/pages/event-list.tsx
similarity index 88%
rename from src/pages/event-list.jsx
rename to src/pages/event-list.tsx
index 3e29344..f64d066 100644
--- a/src/pages/event-list.jsx
+++ b/src/pages/event-list.tsx
@@ -8,7 +8,7 @@ const EventList = () => {
             <SEO pageTitle={'Event List'} />
             <EventListMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default EventList;
\ No newline at end of file
+export default EventList;
diff --git a/src/pages/faq.jsx b/src/pages/faq.tsx
similarity index 97%
rename from src/pages/faq.jsx
rename to src/pages/faq.tsx
index 9f1b7fc..6e7c09f 100644
--- a/src/pages/faq.jsx
+++ b/src/pages/faq.tsx
@@ -8,5 +8,5 @@ export default function Faq() {
             <SEO pageTitle={'Faq'} />
             <FaqMain />
         </Wrapper>
-    )
+    );
 }
diff --git a/src/pages/gallery-grid.jsx b/src/pages/gallery-grid.tsx
similarity index 97%
rename from src/pages/gallery-grid.jsx
rename to src/pages/gallery-grid.tsx
index 2260895..fc14f0a 100644
--- a/src/pages/gallery-grid.jsx
+++ b/src/pages/gallery-grid.tsx
@@ -8,5 +8,5 @@ export default function GalleryGrid() {
             <SEO pageTitle={'Gallery Grid'} />
             <GalleryGridMain />
         </Wrapper>
-    )
+    );
 }
diff --git a/src/pages/gallery-masonry.jsx b/src/pages/gallery-masonry.tsx
similarity index 97%
rename from src/pages/gallery-masonry.jsx
rename to src/pages/gallery-masonry.tsx
index d19aad7..a5e01d9 100644
--- a/src/pages/gallery-masonry.jsx
+++ b/src/pages/gallery-masonry.tsx
@@ -8,5 +8,5 @@ export default function GalleryMasonry() {
             <SEO pageTitle={'Gallery Masonry'} />
             <GalleryMasonryMain />
         </Wrapper>
-    )
+    );
 }
diff --git a/src/pages/home-distant-learning.jsx b/src/pages/home-distant-learning.tsx
similarity index 90%
rename from src/pages/home-distant-learning.jsx
rename to src/pages/home-distant-learning.tsx
index 4e590f7..30e0258 100644
--- a/src/pages/home-distant-learning.jsx
+++ b/src/pages/home-distant-learning.tsx
@@ -8,7 +8,7 @@ const HomeTwo = () => {
             <SEO pageTitle={'Distant Learning'} />
             <HomeDistantLearning />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default HomeTwo;
\ No newline at end of file
+export default HomeTwo;
diff --git a/src/pages/home-health-coach.jsx b/src/pages/home-health-coach.tsx
similarity index 88%
rename from src/pages/home-health-coach.jsx
rename to src/pages/home-health-coach.tsx
index 26abe99..1f3f191 100644
--- a/src/pages/home-health-coach.jsx
+++ b/src/pages/home-health-coach.tsx
@@ -8,7 +8,7 @@ const HomeHealthCoach = () => {
             <SEO pageTitle={'Health Coach'} />
             <HealthCoachContent />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default HomeHealthCoach;
\ No newline at end of file
+export default HomeHealthCoach;
diff --git a/src/pages/home-kindergarten.jsx b/src/pages/home-kindergarten.tsx
similarity index 89%
rename from src/pages/home-kindergarten.jsx
rename to src/pages/home-kindergarten.tsx
index 9c4ef5e..dd69824 100644
--- a/src/pages/home-kindergarten.jsx
+++ b/src/pages/home-kindergarten.tsx
@@ -8,7 +8,7 @@ const HomeSeven = () => {
             <SEO pageTitle={'Kindergarten'} />
             <HomeKindergarten />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default HomeSeven;
\ No newline at end of file
+export default HomeSeven;
diff --git a/src/pages/home-kitchen.jsx b/src/pages/home-kitchen.tsx
similarity index 90%
rename from src/pages/home-kitchen.jsx
rename to src/pages/home-kitchen.tsx
index 3237bf6..fc2cced 100644
--- a/src/pages/home-kitchen.jsx
+++ b/src/pages/home-kitchen.tsx
@@ -8,7 +8,7 @@ const HomeFive = () => {
             <SEO pageTitle={'Kitchen Coach'} />
             <HomeKitchen />
         </Wrapper>
-    )
+    );
 };
 
-export default HomeFive;
\ No newline at end of file
+export default HomeFive;
diff --git a/src/pages/home-language-academy.jsx b/src/pages/home-language-academy.tsx
similarity index 87%
rename from src/pages/home-language-academy.jsx
rename to src/pages/home-language-academy.tsx
index 190727c..7d569db 100644
--- a/src/pages/home-language-academy.jsx
+++ b/src/pages/home-language-academy.tsx
@@ -8,7 +8,7 @@ const HomeLanguageAcademy = () => {
             <SEO pageTitle={'Language Academy'} />
             <LanguageAcademy />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default HomeLanguageAcademy;
\ No newline at end of file
+export default HomeLanguageAcademy;
diff --git a/src/pages/home-modern-schooling.jsx b/src/pages/home-modern-schooling.tsx
similarity index 87%
rename from src/pages/home-modern-schooling.jsx
rename to src/pages/home-modern-schooling.tsx
index 9fd1363..d37db72 100644
--- a/src/pages/home-modern-schooling.jsx
+++ b/src/pages/home-modern-schooling.tsx
@@ -8,7 +8,7 @@ const HomeModernSchooling = () => {
             <SEO pageTitle={'Modern Schooling'} />
             <ModernSchooling />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default HomeModernSchooling;
\ No newline at end of file
+export default HomeModernSchooling;
diff --git a/src/pages/home-online-academy.jsx b/src/pages/home-online-academy.tsx
similarity index 90%
rename from src/pages/home-online-academy.jsx
rename to src/pages/home-online-academy.tsx
index 041140c..277f322 100644
--- a/src/pages/home-online-academy.jsx
+++ b/src/pages/home-online-academy.tsx
@@ -8,7 +8,7 @@ const HomeFour = () => {
             <SEO pageTitle={'Online Academy'} />
             <HomeOnlineAcademy />
         </Wrapper>
-    )
+    );
 };
 
-export default HomeFour;
\ No newline at end of file
+export default HomeFour;
diff --git a/src/pages/home-university.jsx b/src/pages/home-university.tsx
similarity index 89%
rename from src/pages/home-university.jsx
rename to src/pages/home-university.tsx
index ff532a0..4fb06cd 100644
--- a/src/pages/home-university.jsx
+++ b/src/pages/home-university.tsx
@@ -8,7 +8,7 @@ const HomeThree = () => {
             <SEO pageTitle={'University'} />
             <HomeUniversity />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default HomeThree;
\ No newline at end of file
+export default HomeThree;
diff --git a/src/pages/home-yoga-instructor.jsx b/src/pages/home-yoga-instructor.tsx
similarity index 89%
rename from src/pages/home-yoga-instructor.jsx
rename to src/pages/home-yoga-instructor.tsx
index 7d7eb90..d13e0bc 100644
--- a/src/pages/home-yoga-instructor.jsx
+++ b/src/pages/home-yoga-instructor.tsx
@@ -8,7 +8,7 @@ const HomeSix = () => {
             <SEO pageTitle={'Yoga Instructor'} />
             <HomeYoga />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default HomeSix;
\ No newline at end of file
+export default HomeSix;
diff --git a/src/pages/index.jsx b/src/pages/index.tsx
similarity index 96%
rename from src/pages/index.jsx
rename to src/pages/index.tsx
index 451094e..cd98a5d 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.tsx
@@ -8,5 +8,5 @@ export default function Home() {
             <SEO pageTitle={'Home Main'} />
             <HomeMain />
         </Wrapper>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/src/pages/landing-demo.jsx b/src/pages/landing-demo.tsx
similarity index 88%
rename from src/pages/landing-demo.jsx
rename to src/pages/landing-demo.tsx
index 2ac8c17..24fc38f 100644
--- a/src/pages/landing-demo.jsx
+++ b/src/pages/landing-demo.tsx
@@ -8,7 +8,7 @@ const LandingDemo = () => {
             <SEO pageTitle={'Landing Demo'} />
             <HomeLanding />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default LandingDemo;
\ No newline at end of file
+export default LandingDemo;
diff --git a/src/pages/pricing-table.jsx b/src/pages/pricing-table.tsx
similarity index 97%
rename from src/pages/pricing-table.jsx
rename to src/pages/pricing-table.tsx
index a2fc5ed..b26431f 100644
--- a/src/pages/pricing-table.jsx
+++ b/src/pages/pricing-table.tsx
@@ -8,5 +8,5 @@ export default function PricingTable() {
             <SEO pageTitle={'Pricing Table'} />
             <PricingTableMain />
         </Wrapper>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/src/pages/privacy-policy.jsx b/src/pages/privacy-policy.tsx
similarity index 97%
rename from src/pages/privacy-policy.jsx
rename to src/pages/privacy-policy.tsx
index da9e2a9..4dd31f2 100644
--- a/src/pages/privacy-policy.jsx
+++ b/src/pages/privacy-policy.tsx
@@ -8,5 +8,5 @@ export default function PrivacyPolicy() {
             <SEO pageTitle={'Privacy Policy'} />
             <PrivacyPolicyMain />
         </Wrapper>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/src/pages/purchase-guide.jsx b/src/pages/purchase-guide.tsx
similarity index 97%
rename from src/pages/purchase-guide.jsx
rename to src/pages/purchase-guide.tsx
index 5d7f3f7..25f2cd9 100644
--- a/src/pages/purchase-guide.jsx
+++ b/src/pages/purchase-guide.tsx
@@ -8,5 +8,5 @@ export default function PurchaseGuide() {
             <SEO pageTitle={'Purchase Guide'} />
             <PurchaseGuideMain />
         </Wrapper>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/src/pages/sign-in.jsx b/src/pages/sign-in.tsx
similarity index 97%
rename from src/pages/sign-in.jsx
rename to src/pages/sign-in.tsx
index 39c0c46..05443a9 100644
--- a/src/pages/sign-in.jsx
+++ b/src/pages/sign-in.tsx
@@ -8,5 +8,5 @@ export default function SignIn() {
             <SEO pageTitle={'Sign In'} />
             <SignInMain />
         </Wrapper>
-    )
+    );
 }
diff --git a/src/pages/team-1.jsx b/src/pages/team-1.tsx
similarity index 88%
rename from src/pages/team-1.jsx
rename to src/pages/team-1.tsx
index 60da11d..e62e0cc 100644
--- a/src/pages/team-1.jsx
+++ b/src/pages/team-1.tsx
@@ -8,7 +8,7 @@ const TeamOne = () => {
             <SEO pageTitle={'Team One'} />
             <TeamOneMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default TeamOne;
\ No newline at end of file
+export default TeamOne;
diff --git a/src/pages/team-2.jsx b/src/pages/team-2.tsx
similarity index 88%
rename from src/pages/team-2.jsx
rename to src/pages/team-2.tsx
index 12f65b0..64e3d9b 100644
--- a/src/pages/team-2.jsx
+++ b/src/pages/team-2.tsx
@@ -8,7 +8,7 @@ const TeamTwo = () => {
             <SEO pageTitle={'Team Two'} />
             <TeamTwoMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default TeamTwo;
\ No newline at end of file
+export default TeamTwo;
diff --git a/src/pages/team-3.jsx b/src/pages/team-3.tsx
similarity index 88%
rename from src/pages/team-3.jsx
rename to src/pages/team-3.tsx
index 94cbeea..9cd2ba6 100644
--- a/src/pages/team-3.jsx
+++ b/src/pages/team-3.tsx
@@ -8,7 +8,7 @@ const TeamThree = () => {
             <SEO pageTitle={'Team Three'} />
             <TeamThreeMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default TeamThree;
\ No newline at end of file
+export default TeamThree;
diff --git a/src/pages/team-details/[id].jsx b/src/pages/team-details/[id].tsx
similarity index 74%
rename from src/pages/team-details/[id].jsx
rename to src/pages/team-details/[id].tsx
index 400566a..28f74aa 100644
--- a/src/pages/team-details/[id].jsx
+++ b/src/pages/team-details/[id].tsx
@@ -8,33 +8,33 @@ import TeamDetailMain from '../../components/teams/team-details';
 const DynamicTeamDetails = () => {
     const router = useRouter();
     const { id } = router.query;
-    const team = instructors_data.find(item => Number(item.id) === Number(id))
+    const team = instructors_data.find(item => Number(item.id) === Number(id));
     return (
         <Wrapper>
             <SEO pageTitle={'Team Details'} />
             <TeamDetailMain team={team} />
         </Wrapper>
-    )
-}
+    );
+};
 
 export default DynamicTeamDetails;
 
 export async function getStaticPaths() {
-    const paths = instructors_data.map((instructor) => {
+    const paths = instructors_data.map(instructor => {
         return {
-            params:{
-                id:`${instructor.id}`
-            }
-        }
-    })
+            params: {
+                id: `${instructor.id}`,
+            },
+        };
+    });
     return {
-      paths,
-      fallback: false,
-    }
-  }
+        paths,
+        fallback: false,
+    };
+}
 
 export async function getStaticProps(context) {
     return {
-        props: {}
-    }
-}
\ No newline at end of file
+        props: {},
+    };
+}
diff --git a/src/pages/team-details/index.jsx b/src/pages/team-details/index.tsx
similarity index 83%
rename from src/pages/team-details/index.jsx
rename to src/pages/team-details/index.tsx
index 638eb3f..b09ba41 100644
--- a/src/pages/team-details/index.jsx
+++ b/src/pages/team-details/index.tsx
@@ -3,7 +3,7 @@ import { Wrapper } from '../../layout';
 import TeamDetailMain from '../../components/teams/team-details';
 import { instructors_data } from '../../data';
 
-const team = instructors_data[0]
+const team = instructors_data[0];
 
 const TeamDetail = () => {
     return (
@@ -11,7 +11,7 @@ const TeamDetail = () => {
             <SEO pageTitle={'Team Details'} />
             <TeamDetailMain team={team} />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default TeamDetail;
\ No newline at end of file
+export default TeamDetail;
diff --git a/src/pages/terms-condition.jsx b/src/pages/terms-condition.tsx
similarity index 87%
rename from src/pages/terms-condition.jsx
rename to src/pages/terms-condition.tsx
index 5993177..13359ab 100644
--- a/src/pages/terms-condition.jsx
+++ b/src/pages/terms-condition.tsx
@@ -6,7 +6,7 @@ export default function TermsCondition() {
     return (
         <Wrapper>
             <SEO pageTitle={'Terms Condition'} />
-            <TermsConditionMain/>
+            <TermsConditionMain />
         </Wrapper>
-    )
+    );
 }
diff --git a/src/pages/wishlist.jsx b/src/pages/wishlist.tsx
similarity index 79%
rename from src/pages/wishlist.jsx
rename to src/pages/wishlist.tsx
index 7e4f044..bab8659 100644
--- a/src/pages/wishlist.jsx
+++ b/src/pages/wishlist.tsx
@@ -6,9 +6,9 @@ const Wishlist = () => {
     return (
         <Wrapper>
             <SEO pageTitle={'Wishlist'} />
-            <WishlistMain/>
+            <WishlistMain />
         </Wrapper>
-    )
-}
+    );
+};
 
-export default Wishlist;
\ No newline at end of file
+export default Wishlist;
diff --git a/src/redux/features/api-slice.ts b/src/redux/features/api-slice.ts
new file mode 100644
index 0000000..5c25462
--- /dev/null
+++ b/src/redux/features/api-slice.ts
@@ -0,0 +1,131 @@
+import { BaseQueryFn, createApi } from '@reduxjs/toolkit/query/react';
+import queries from '../queries';
+import {
+    Evaluation,
+    LoginRequest,
+    LoginResponse,
+    RegisterRequest,
+    RegisterResponse,
+} from './api.types';
+import { getLocalStorage } from '../../utils/localstorage';
+import { BaseEndpointDefinition } from '@reduxjs/toolkit/dist/query/endpointDefinitions';
+
+const API_URL = process.env.NEXT_PUBLIC_WORDPRESS_API_URL;
+
+type BaseQuery = BaseQueryFn<
+    {
+        query: keyof typeof queries;
+        variables: Record<string, any>;
+    },
+    unknown,
+    string[]
+>;
+
+const baseQuery: BaseQuery = async ({ query, variables }) => {
+    try {
+        const token = getLocalStorage<string>('token');
+        const headers = {
+            'Content-Type': 'application/json',
+            ...(query === 'login'
+                ? {}
+                : {
+                      Authorization: `Bearer ${token}`,
+                  }),
+        };
+
+        const res = await fetch(API_URL, {
+            headers,
+            method: 'POST',
+            body: JSON.stringify({
+                query: queries[query],
+                variables,
+            }),
+        });
+        const json = await res.json();
+        const data = json.data[query];
+        if (data !== null) {
+            return { data };
+        }
+
+        const errors = json.errors.map(e => e.message);
+        return { error: errors };
+    } catch (error) {
+        return { error };
+    }
+};
+
+type EvaluationQuery<QueryArg, ResultType> = BaseEndpointDefinition<
+    QueryArg,
+    BaseQuery,
+    ResultType
+>['queryFn'];
+
+function evaluationQuery(
+    url: 'get_title'
+): EvaluationQuery<Evaluation.TitleRequest, Evaluation.TitleResponse>;
+function evaluationQuery(
+    url: 'correct_sent'
+): EvaluationQuery<Evaluation.EvaluateRequest, Evaluation.EvaluateResponse>;
+function evaluationQuery(
+    url: 'get_feedback'
+): EvaluationQuery<Evaluation.FeedbackRequest, Evaluation.FeedbackResponse>;
+function evaluationQuery(url: string) {
+    return async (data: any) => {
+        const response = await fetch(`https://TSTPrep-tstprep-writing.hf.space/${url}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: 'Bearer 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',
+            },
+            body: JSON.stringify(data),
+        });
+        if (!response.ok) return { error: [response.statusText] };
+
+        const item = await response.json();
+        return { data: item };
+    };
+}
+
+export const api = createApi({
+    baseQuery,
+    endpoints: builder => ({
+        evaluationTitle: builder.query<Evaluation.TitleResponse, Evaluation.TitleRequest>(
+            {
+                queryFn: evaluationQuery('get_title'),
+            }
+        ),
+        evaluate: builder.mutation<
+            Evaluation.EvaluateResponse,
+            Evaluation.EvaluateRequest
+        >({
+            queryFn: evaluationQuery('correct_sent'),
+        }),
+        feedback: builder.mutation<
+            Evaluation.FeedbackResponse,
+            Evaluation.FeedbackRequest
+        >({
+            queryFn: evaluationQuery('get_feedback'),
+        }),
+
+        login: builder.mutation<LoginResponse, LoginRequest>({
+            query: variables => ({
+                query: 'login',
+                variables,
+            }),
+        }),
+        register: builder.mutation<RegisterResponse, RegisterRequest>({
+            query: variables => ({
+                query: 'register',
+                variables,
+            }),
+        }),
+    }),
+});
+
+export const {
+    useEvaluationTitleQuery,
+    useEvaluateMutation,
+    useFeedbackMutation,
+    useLoginMutation,
+    useRegisterMutation,
+} = api;
diff --git a/src/redux/features/api.types.ts b/src/redux/features/api.types.ts
new file mode 100644
index 0000000..b6c85ea
--- /dev/null
+++ b/src/redux/features/api.types.ts
@@ -0,0 +1,80 @@
+export namespace Evaluation {
+    export type SingleFragmentType = 'nochange' | 'addition' | 'deletion';
+    export type DoubleFragmentType = 'replacement';
+
+    export type SentenceFragmentData =
+        | {
+              op: SingleFragmentType;
+              word: string;
+              replace?: undefined;
+          }
+        | {
+              op: DoubleFragmentType;
+              word: string;
+              replace: string;
+          };
+
+    export type SentenceData = SentenceFragmentData[];
+
+    export type EvaluateOpcodes = SentenceData[];
+
+    type EvaluateResult = {
+        evaluation_per_sentence: {
+            original_sentence: string;
+            corrected_sentence: string;
+        }[];
+    };
+
+    export type TitleRequest = {
+        connection_id: number;
+    };
+
+    export type TitleResponse = {
+        title: string;
+        preset: string;
+    };
+
+    export type EvaluateRequest = {
+        essay: string;
+        task: string;
+        demo: boolean;
+        connection_id: number;
+    };
+
+    export type EvaluateResponse = {
+        operations: EvaluateOpcodes;
+        result_json: EvaluateResult;
+    };
+
+    export type FeedbackRequest = {
+        task: string;
+        demo: boolean;
+        connection_id: number;
+        result_json: EvaluateResult;
+    };
+
+    export type FeedbackResponse = {
+        feedback: Record<string, string>;
+    };
+}
+
+export type LoginRequest = {
+    username: string;
+    password: string;
+};
+
+export type LoginResponse = {
+    authToken: string;
+};
+
+export type RegisterRequest = {
+    email: string;
+    username: string;
+    password: string;
+};
+
+export type RegisterResponse = {
+    user: {
+        jwtAuthToken: string;
+    };
+};
diff --git a/src/redux/features/auth-slice.js b/src/redux/features/auth-slice.js
deleted file mode 100644
index eb48438..0000000
--- a/src/redux/features/auth-slice.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { getLocalStorage, setLocalStorage } from '../../utils/localstorage';
-
-const initialState = {
-    allUsers: [],
-    user: {}
-}
-
-export const authSlice = createSlice({
-    name: 'auth',
-    initialState,
-    reducers: {
-        add_user: (state, { payload }) => {
-            state.allUsers.push(payload);
-            state.user = payload;
-            setLocalStorage('user', state.user);
-        },
-        user_info: (state, { payload }) => {
-            state.user = payload;
-            setLocalStorage('user', state.user);
-        },
-        sign_out: (state, { payload }) => {
-            state.user = {};
-            setLocalStorage('user', state.user);
-        },
-        get_user: (state, { payload }) => {
-            state.user = getLocalStorage('user');
-        }
-    }
-})
-
-export const { user_info, add_user, sign_out,get_user } = authSlice.actions;
-
-export default authSlice.reducer;
\ No newline at end of file
diff --git a/src/redux/features/auth-slice.ts b/src/redux/features/auth-slice.ts
new file mode 100644
index 0000000..661a0a3
--- /dev/null
+++ b/src/redux/features/auth-slice.ts
@@ -0,0 +1,56 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import {
+    getLocalStorage,
+    removeLocalStorage,
+    setLocalStorage,
+} from '../../utils/localstorage';
+
+export type AuthState = {
+    allUsers: any[];
+    user: any;
+    token?: string;
+};
+
+const initialState: AuthState = {
+    allUsers: [],
+    user: {},
+    token: getLocalStorage('token'),
+};
+
+export const authSlice = createSlice({
+    name: 'auth',
+    initialState,
+    reducers: {
+        add_user: (state, { payload }) => {
+            state.allUsers.push(payload);
+            state.user = payload;
+            setLocalStorage('user', state.user);
+        },
+        user_info: (state, { payload }) => {
+            state.user = payload;
+            setLocalStorage('user', state.user);
+        },
+        sign_out: state => {
+            state.user = {};
+            setLocalStorage('user', state.user);
+        },
+        get_user: state => {
+            state.user = getLocalStorage('user');
+        },
+
+        signIn: (state, action: PayloadAction<string>) => {
+            console.log('sign in');
+            state.token = action.payload;
+            setLocalStorage('token', action.payload);
+        },
+        signOut: (state, action: PayloadAction<void>) => {
+            state.token = undefined;
+            removeLocalStorage('token');
+        },
+    },
+});
+
+export const { user_info, add_user, sign_out, get_user, signIn, signOut } =
+    authSlice.actions;
+
+export default authSlice.reducer;
diff --git a/src/redux/features/cart-slice.js b/src/redux/features/cart-slice.js
deleted file mode 100644
index 2c43a42..0000000
--- a/src/redux/features/cart-slice.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { toast } from 'react-toastify';
-import { getLocalStorage, setLocalStorage } from '../../utils/localstorage';
-
-const initialState = {
-    cartCourses:[],
-}
-
-export const cartSlice = createSlice({
-    name: 'cart',
-    initialState,
-    reducers: {
-        cart_course: (state,{payload}) => {
-            const courseIndex = state.cartCourses.findIndex(item => Number(item.id ) === Number(payload.id));
-            if(courseIndex >= 0){
-                state.cartCourses[courseIndex].quantity +=1;
-                toast.info(`${payload.title} removed from cart.`, {
-                    position: 'top-left'
-                })
-            } else {
-                const tempCourse = {...payload,quantity:1};
-                state.cartCourses.push(tempCourse)
-                    toast.success(`${payload.title} added to cart`, {
-                    position: 'top-left'
-                })
-            }
-            setLocalStorage('cart_items',state.cartCourses);
-        },
-
-        decrease_quantity:(state,{payload}) => {
-            const cartIndex = state.cartCourses.findIndex(item => Number(item.id ) === Number(payload.id));
-            if(state.cartCourses[cartIndex].quantity > 1){
-                state.cartCourses[cartIndex].quantity -= 1
-                toast.error(`Decrease cart quantity`, {
-                    position: 'top-left'
-                })
-            }
-            setLocalStorage('cart_items',state.cartCourses);
-        },
-
-        remove_cart_course:(state,{payload}) => {
-            state.cartCourses = state.cartCourses.filter(item => Number(item.id ) !== Number(payload.id));
-            toast.error(`removed from your cart`, {
-                position: 'top-left'
-            })
-            setLocalStorage('cart_items',state.cartCourses);
-        },
-
-        clear_cart:(state,{payload}) => {
-            const confirmMsg = window.confirm('Are you sure deleted your all cart items ?');
-            if(confirmMsg){
-                state.cartCourses = [];
-            }
-            setLocalStorage('cart_items',state.cartCourses);
-        },
-
-        get_cart_courses: (state, action) => {
-            state.cartCourses = getLocalStorage('cart_items');
-        }
-    }
-})
-
-export const {cart_course,remove_cart_course,decrease_quantity,clear_cart,get_cart_courses} = cartSlice.actions;
-export const cartCourses = state => state.cart.cartCourses;
-export default cartSlice.reducer
\ No newline at end of file
diff --git a/src/redux/features/cart-slice.ts b/src/redux/features/cart-slice.ts
new file mode 100644
index 0000000..a6a2ddb
--- /dev/null
+++ b/src/redux/features/cart-slice.ts
@@ -0,0 +1,79 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { toast } from 'react-toastify';
+import { getLocalStorage, setLocalStorage } from '../../utils/localstorage';
+
+const initialState = {
+    cartCourses: [],
+};
+
+export const cartSlice = createSlice({
+    name: 'cart',
+    initialState,
+    reducers: {
+        cart_course: (state, { payload }) => {
+            const courseIndex = state.cartCourses.findIndex(
+                item => Number(item.id) === Number(payload.id)
+            );
+            if (courseIndex >= 0) {
+                state.cartCourses[courseIndex].quantity += 1;
+                toast.info(`${payload.title} removed from cart.`, {
+                    position: 'top-left',
+                });
+            } else {
+                const tempCourse = { ...payload, quantity: 1 };
+                state.cartCourses.push(tempCourse);
+                toast.success(`${payload.title} added to cart`, {
+                    position: 'top-left',
+                });
+            }
+            setLocalStorage('cart_items', state.cartCourses);
+        },
+
+        decrease_quantity: (state, { payload }) => {
+            const cartIndex = state.cartCourses.findIndex(
+                item => Number(item.id) === Number(payload.id)
+            );
+            if (state.cartCourses[cartIndex].quantity > 1) {
+                state.cartCourses[cartIndex].quantity -= 1;
+                toast.error(`Decrease cart quantity`, {
+                    position: 'top-left',
+                });
+            }
+            setLocalStorage('cart_items', state.cartCourses);
+        },
+
+        remove_cart_course: (state, { payload }) => {
+            state.cartCourses = state.cartCourses.filter(
+                item => Number(item.id) !== Number(payload.id)
+            );
+            toast.error(`removed from your cart`, {
+                position: 'top-left',
+            });
+            setLocalStorage('cart_items', state.cartCourses);
+        },
+
+        clear_cart: state => {
+            const confirmMsg = window.confirm(
+                'Are you sure deleted your all cart items ?'
+            );
+            if (confirmMsg) {
+                state.cartCourses = [];
+            }
+            setLocalStorage('cart_items', state.cartCourses);
+        },
+
+        get_cart_courses: state => {
+            state.cartCourses = getLocalStorage('cart_items') ?? [];
+        },
+    },
+});
+
+export const {
+    cart_course,
+    remove_cart_course,
+    decrease_quantity,
+    clear_cart,
+    get_cart_courses,
+} = cartSlice.actions;
+export const cartCourses = state => state.cart.cartCourses;
+export default cartSlice.reducer;
diff --git a/src/redux/features/course-slice.js b/src/redux/features/course-slice.ts
similarity index 56%
rename from src/redux/features/course-slice.js
rename to src/redux/features/course-slice.ts
index 256d8b1..70f172f 100644
--- a/src/redux/features/course-slice.js
+++ b/src/redux/features/course-slice.ts
@@ -2,18 +2,18 @@ import { createSlice } from '@reduxjs/toolkit';
 import { course_data } from '../../data';
 
 const initialState = {
-    courses:course_data,
-    course:{}
-}
+    courses: course_data,
+    course: {},
+};
 
 export const courseSlice = createSlice({
     name: 'course',
     initialState,
     reducers: {
-        single_product: (state,{payload}) => {}
-    }
-})
+        single_product: (state, { payload }) => {},
+    },
+});
 
 export const { single_product } = courseSlice.actions;
-export const selectCourses = (state) => state.courses.courses;
-export default courseSlice.reducer
+export const selectCourses = state => state.courses.courses;
+export default courseSlice.reducer;
diff --git a/src/redux/features/event-slice.js b/src/redux/features/event-slice.js
deleted file mode 100644
index c353b09..0000000
--- a/src/redux/features/event-slice.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import {createSlice} from '@reduxjs/toolkit';
-
-export const eventSlice = createSlice({
-    name:'event',
-    initialState:{
-        categories:[]
-    },
-    reducers:{
-        add_category:(state,{payload}) => {
-            if(payload.changeType === 'remove'){
-                state.categories = state.categories.filter((category) => category !== payload.item)
-            }
-            else if(payload.changeType === 'added'){
-                state.categories.push(payload.item)
-            }
-        }
-    }
-})
-
-export const {add_category}  = eventSlice.actions;
-export default eventSlice.reducer;
\ No newline at end of file
diff --git a/src/redux/features/event-slice.ts b/src/redux/features/event-slice.ts
new file mode 100644
index 0000000..39c7bfb
--- /dev/null
+++ b/src/redux/features/event-slice.ts
@@ -0,0 +1,22 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export const eventSlice = createSlice({
+    name: 'event',
+    initialState: {
+        categories: [],
+    },
+    reducers: {
+        add_category: (state, { payload }) => {
+            if (payload.changeType === 'remove') {
+                state.categories = state.categories.filter(
+                    category => category !== payload.item
+                );
+            } else if (payload.changeType === 'added') {
+                state.categories.push(payload.item);
+            }
+        },
+    },
+});
+
+export const { add_category } = eventSlice.actions;
+export default eventSlice.reducer;
diff --git a/src/redux/features/filter-slice.js b/src/redux/features/filter-slice.ts
similarity index 78%
rename from src/redux/features/filter-slice.js
rename to src/redux/features/filter-slice.ts
index 4ad4fe4..b9e2b63 100644
--- a/src/redux/features/filter-slice.js
+++ b/src/redux/features/filter-slice.ts
@@ -1,7 +1,7 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice } from '@reduxjs/toolkit';
 
 export const filterSlice = createSlice({
-    name: "filter",
+    name: 'filter',
     initialState: {
         categories: [],
         instructors: [],
@@ -10,15 +10,15 @@ export const filterSlice = createSlice({
         price: 0,
         page_count: 0,
         item_offset: 0,
-        forcePage: null
+        forcePage: null,
     },
     reducers: {
         add_category: (state, { payload }) => {
-            if (payload.changeType === "remove") {
+            if (payload.changeType === 'remove') {
                 state.categories = state.categories.filter(
-                    (category) => category !== payload.item
+                    category => category !== payload.item
                 );
-            } else if (payload.changeType === "added") {
+            } else if (payload.changeType === 'added') {
                 state.categories.push(payload.item);
             }
         },
@@ -28,7 +28,7 @@ export const filterSlice = createSlice({
                 state.instructors.push(payload.instructor);
             } else {
                 state.instructors = state.instructors.filter(
-                    (instructor) => instructor !== payload.instructor
+                    instructor => instructor !== payload.instructor
                 );
             }
         },
@@ -37,9 +37,7 @@ export const filterSlice = createSlice({
             if (!isExist) {
                 state.levels.push(payload.level);
             } else {
-                state.levels = state.levels.filter(
-                    (level) => level !== payload.level
-                );
+                state.levels = state.levels.filter(level => level !== payload.level);
             }
         },
         add_language: (state, { payload }) => {
@@ -48,7 +46,7 @@ export const filterSlice = createSlice({
                 state.languages.push(payload.language);
             } else {
                 state.languages = state.languages.filter(
-                    (language) => language !== payload.language
+                    language => language !== payload.language
                 );
             }
         },
@@ -70,8 +68,8 @@ export const filterSlice = createSlice({
             state.languages = [];
             state.levels = [];
             state.price = payload;
-        }
-    }
+        },
+    },
 });
 
 export const {
@@ -83,7 +81,7 @@ export const {
     reset_filter,
     add_count_page,
     add_item_offset,
-    add_force_page
+    add_force_page,
 } = filterSlice.actions;
 
-export default filterSlice.reducer;
\ No newline at end of file
+export default filterSlice.reducer;
diff --git a/src/redux/features/wishlist-slice.js b/src/redux/features/wishlist-slice.js
deleted file mode 100644
index c3e2e55..0000000
--- a/src/redux/features/wishlist-slice.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { toast } from 'react-toastify';
-import { getLocalStorage, setLocalStorage } from '../../utils/localstorage';
-
-const initialState = {
-    wishlist:[]
-}
-
-export const wishlistSlice = createSlice({
-    name: 'wishlist',
-    initialState,
-    reducers: {
-        add_to_wishlist:(state,{payload}) => {
-            if(payload.change_type === 'remove_wishlist'){
-                state.wishlist = state.wishlist.filter(item => item.id !== payload.item.id)
-                toast.error(`${payload.item.title} removed from wishlist`, {
-                    position: 'top-left'
-                })
-            } else if(payload.change_type === 'add_wishlist'){
-                state.wishlist.push(payload.item);
-                toast.success(`${payload.item.title} added to wishlist`, {
-                    position: 'top-left'
-                })
-            }
-            setLocalStorage('wishlist_items',state.wishlist)
-        },
-        remove_wishlist_product:(state,{payload}) => {
-            state.wishlist = state.wishlist.filter(item => item.id !== payload.id);
-            toast.error(`removed from your wishlist`, {
-                position: 'top-left'
-            })
-            setLocalStorage('wishlist_items',state.wishlist)
-        },
-        get_wishlist_products: (state, { payload }) => {
-            state.wishlist = getLocalStorage('wishlist_items');
-        }
-    }
-})
-
-export const { add_to_wishlist,remove_wishlist_product,get_wishlist_products } = wishlistSlice.actions;
-export const wishlistItems = (state) => state.wishlist.wishlist;
-export default wishlistSlice.reducer
\ No newline at end of file
diff --git a/src/redux/features/wishlist-slice.ts b/src/redux/features/wishlist-slice.ts
new file mode 100644
index 0000000..889c9ed
--- /dev/null
+++ b/src/redux/features/wishlist-slice.ts
@@ -0,0 +1,45 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { toast } from 'react-toastify';
+import { getLocalStorage, setLocalStorage } from '../../utils/localstorage';
+
+const initialState = {
+    wishlist: [],
+};
+
+export const wishlistSlice = createSlice({
+    name: 'wishlist',
+    initialState,
+    reducers: {
+        add_to_wishlist: (state, { payload }) => {
+            if (payload.change_type === 'remove_wishlist') {
+                state.wishlist = state.wishlist.filter(
+                    item => item.id !== payload.item.id
+                );
+                toast.error(`${payload.item.title} removed from wishlist`, {
+                    position: 'top-left',
+                });
+            } else if (payload.change_type === 'add_wishlist') {
+                state.wishlist.push(payload.item);
+                toast.success(`${payload.item.title} added to wishlist`, {
+                    position: 'top-left',
+                });
+            }
+            setLocalStorage('wishlist_items', state.wishlist);
+        },
+        remove_wishlist_product: (state, { payload }) => {
+            state.wishlist = state.wishlist.filter(item => item.id !== payload.id);
+            toast.error(`removed from your wishlist`, {
+                position: 'top-left',
+            });
+            setLocalStorage('wishlist_items', state.wishlist);
+        },
+        get_wishlist_products: state => {
+            state.wishlist = getLocalStorage('wishlist_items') ?? [];
+        },
+    },
+});
+
+export const { add_to_wishlist, remove_wishlist_product, get_wishlist_products } =
+    wishlistSlice.actions;
+export const wishlistItems = state => state.wishlist.wishlist;
+export default wishlistSlice.reducer;
diff --git a/src/redux/queries.ts b/src/redux/queries.ts
new file mode 100644
index 0000000..a3176d6
--- /dev/null
+++ b/src/redux/queries.ts
@@ -0,0 +1,31 @@
+const queries = {
+    login: `
+        mutation LoginUser($username: String!, $password: String!) {
+            login(
+                input: {
+                    username: $username
+                    password: $password
+                }
+            ) {
+                authToken
+            }
+        }
+    `,
+    register: `
+        mutation RegisterUser($username: String!, $email: String!, $password: String!) {
+            registerUser(
+                input: {
+                    username: $username
+                    password: $password
+                    email: $email
+                }
+            ) {
+                user {
+                    jwtAuthToken
+                }
+            }
+        }
+    `,
+};
+
+export default queries;
diff --git a/src/redux/store.js b/src/redux/store.js
deleted file mode 100644
index e3ffbf0..0000000
--- a/src/redux/store.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { combineReducers, configureStore } from '@reduxjs/toolkit';
-import courseSlice  from './features/course-slice';
-import cartSlice from './features/cart-slice';
-import wishlistSlice from './features/wishlist-slice';
-import eventSlice from './features/event-slice';
-import filterSlice from './features/filter-slice';
-import authSlice from './features/auth-slice';
-
-const rootReducer = combineReducers({
-    auth:authSlice,
-    courses:courseSlice,
-    cart:cartSlice,
-    wishlist:wishlistSlice,
-    event:eventSlice,
-    filter:filterSlice
-})
-
-export const store = configureStore({
-    reducer: rootReducer,
-    middleware:(getDefaultMiddleware) => getDefaultMiddleware({
-        serializableCheck:false
-    })
-})
\ No newline at end of file
diff --git a/src/redux/store.ts b/src/redux/store.ts
new file mode 100644
index 0000000..513b45e
--- /dev/null
+++ b/src/redux/store.ts
@@ -0,0 +1,29 @@
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import courseSlice from './features/course-slice';
+import cartSlice from './features/cart-slice';
+import wishlistSlice from './features/wishlist-slice';
+import eventSlice from './features/event-slice';
+import filterSlice from './features/filter-slice';
+import authSlice from './features/auth-slice';
+import { api } from './features/api-slice';
+
+const rootReducer = combineReducers({
+    api: api.reducer,
+    auth: authSlice,
+    courses: courseSlice,
+    cart: cartSlice,
+    wishlist: wishlistSlice,
+    event: eventSlice,
+    filter: filterSlice,
+});
+
+export const store = configureStore({
+    reducer: rootReducer,
+    middleware: getDefaultMiddleware =>
+        getDefaultMiddleware({
+            serializableCheck: false,
+        }).concat(api.middleware),
+});
+
+export type AppState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d90f2df..98bc095 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,5 @@
 @import '~bootstrap/scss/bootstrap';
-@import "swiper/css/bundle";
+@import 'swiper/css/bundle';
 @import 'node_modules/react-modal-video/scss/modal-video.scss';
 @import 'react-image-lightbox/style.css';
 @import 'react-toastify/dist/ReactToastify.css';
diff --git a/src/svg/book-library.js b/src/svg/book-library.js
deleted file mode 100644
index 0844da2..0000000
--- a/src/svg/book-library.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-const BookLibrary = () => {
-  return (
-      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-        viewBox="0 0 40 40" style={{ enableBackground: "new 0 0 40 40" }} xmlSpace="preserve">
-        <style type="text/css" jsx>
-          {`.bookpath{fill:none;stroke:#8e56ff;stroke-width:2;stroke-miterlimit:10;}`}
-        </style>
-        <g>
-          <path className="bookpath" d="M4.53,4.88H35.5v34h-29c-1.1,0-2-0.9-2-2V4.92C4.5,4.9,4.52,4.88,4.53,4.88z" />
-          <path className="bookpath" d="M32.48,4.88V1.12H6.5c-1.1,0-2,0.9-2,2v1.77" />
-          <line className="bookpath" x1="8.67" y1="4.88" x2="8.67" y2="38.46" />
-          <path className="bookpath" d="M22.52,4.88v14.36c0,0.14,0.17,0.21,0.27,0.11l3.54-3.54c0.06-0.06,0.16-0.06,0.22,0l3.8,3.8 c0.1,0.1,0.27,0.03,0.27-0.11V4.88"/>
-        </g>
-      </svg>
-  );
-};
-
-export default BookLibrary;
\ No newline at end of file
diff --git a/src/svg/book-library.tsx b/src/svg/book-library.tsx
new file mode 100644
index 0000000..996511e
--- /dev/null
+++ b/src/svg/book-library.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+const BookLibrary = () => {
+    return (
+        <svg
+            version='1.1'
+            id='Layer_1'
+            xmlns='http://www.w3.org/2000/svg'
+            xmlnsXlink='http://www.w3.org/1999/xlink'
+            x='0px'
+            y='0px'
+            viewBox='0 0 40 40'
+            // @ts-expect-error ts(2353)
+            style={{ enableBackground: 'new 0 0 40 40' }}
+            xmlSpace='preserve'
+        >
+            <style type='text/css' jsx>
+                {`
+                    .bookpath {
+                        fill: none;
+                        stroke: #8e56ff;
+                        stroke-width: 2;
+                        stroke-miterlimit: 10;
+                    }
+                `}
+            </style>
+            <g>
+                <path
+                    className='bookpath'
+                    d='M4.53,4.88H35.5v34h-29c-1.1,0-2-0.9-2-2V4.92C4.5,4.9,4.52,4.88,4.53,4.88z'
+                />
+                <path
+                    className='bookpath'
+                    d='M32.48,4.88V1.12H6.5c-1.1,0-2,0.9-2,2v1.77'
+                />
+                <line className='bookpath' x1='8.67' y1='4.88' x2='8.67' y2='38.46' />
+                <path
+                    className='bookpath'
+                    d='M22.52,4.88v14.36c0,0.14,0.17,0.21,0.27,0.11l3.54-3.54c0.06-0.06,0.16-0.06,0.22,0l3.8,3.8 c0.1,0.1,0.27,0.03,0.27-0.11V4.88'
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default BookLibrary;
diff --git a/src/svg/books.js b/src/svg/books.js
deleted file mode 100644
index eaeab92..0000000
--- a/src/svg/books.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-const Books = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="19.84" height="17.75" viewBox="0 0 19.84 17.75">
-      <defs>
-        <style type="text/css">
-          {`.cls-1 {fill: #181818;fill-rule: evenodd;}`}
-        </style>
-      </defs>
-      <path className="cls-1" d="M1244.3,708.6c-0.57-1.6-1.78-.867-1.43-1.008l-2.52,1.008v-1.314a0.719,0.719,0,0,0-.65-0.658h-9.86a0.6,0.6,0,0,0-.66.658v16.43a0.6,0.6,0,0,0,.66.657h9.86a0.6,0.6,0,0,0,.65-0.657v-11.83s3.14,8.9,3.82,10.812a1.069,1.069,0,0,0,1.44.361s2.23-.89,3.01-1.206a1,1,0,0,0,.28-1.423Zm-3.79,1.262,2.59-1.069,1.01,2.695-2.35,1.016Zm-1.47,2.024h-3.29v-3.943h3.29v3.943Zm-4.6-3.943v3.943h-3.95v-3.943h3.95Zm-3.95,5.258h3.95v9.858h-3.95V713.2Zm5.26,0h3.29v9.858h-3.29V713.2Zm6.46,0.388,2.45-.933,3.06,8.347-2.45.994Z" transform="translate(-1229.19 -706.625)" />
-    </svg>
-
-  );
-};
-
-export default Books;
diff --git a/src/svg/books.tsx b/src/svg/books.tsx
new file mode 100644
index 0000000..87bd7d4
--- /dev/null
+++ b/src/svg/books.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Books = () => {
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            width='19.84'
+            height='17.75'
+            viewBox='0 0 19.84 17.75'
+        >
+            <defs>
+                <style type='text/css'>
+                    {`.cls-1 {fill: #181818;fill-rule: evenodd;}`}
+                </style>
+            </defs>
+            <path
+                className='cls-1'
+                d='M1244.3,708.6c-0.57-1.6-1.78-.867-1.43-1.008l-2.52,1.008v-1.314a0.719,0.719,0,0,0-.65-0.658h-9.86a0.6,0.6,0,0,0-.66.658v16.43a0.6,0.6,0,0,0,.66.657h9.86a0.6,0.6,0,0,0,.65-0.657v-11.83s3.14,8.9,3.82,10.812a1.069,1.069,0,0,0,1.44.361s2.23-.89,3.01-1.206a1,1,0,0,0,.28-1.423Zm-3.79,1.262,2.59-1.069,1.01,2.695-2.35,1.016Zm-1.47,2.024h-3.29v-3.943h3.29v3.943Zm-4.6-3.943v3.943h-3.95v-3.943h3.95Zm-3.95,5.258h3.95v9.858h-3.95V713.2Zm5.26,0h3.29v9.858h-3.29V713.2Zm6.46,0.388,2.45-.933,3.06,8.347-2.45.994Z'
+                transform='translate(-1229.19 -706.625)'
+            />
+        </svg>
+    );
+};
+
+export default Books;
diff --git a/src/svg/certificate-2.js b/src/svg/certificate-2.js
deleted file mode 100644
index 278444a..0000000
--- a/src/svg/certificate-2.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-const CertificateTwo = () => {
-  return (
-    <svg width="37" viewBox="0 0 48 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M29.1048 32.5521H2.67293C1.72721 32.5521 0.964844 31.7998 0.964844 30.8664V2.63786C0.964844 1.70453 1.72721 0.952148 2.67293 0.952148H45.3267C46.2724 0.952148 47.0348 1.70453 47.0348 2.63786V30.8664C47.0348 31.7998 46.2724 32.5521 45.3267 32.5521H41.8044" fill="none" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M8.31836 9.33301H40.6658" fill="none" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M8.31836 16.752H22.369" fill="none" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M35.4355 28.2858C39.001 28.2858 41.8914 25.4332 41.8914 21.9144C41.8914 18.3956 39.001 15.543 35.4355 15.543C31.8699 15.543 28.9795 18.3956 28.9795 21.9144C28.9795 25.4332 31.8699 28.2858 35.4355 28.2858Z" fill="none" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M30.5523 26.0762L28.0626 38.6286C28.0047 38.9238 28.3231 39.1428 28.5837 39L34.5668 35.619C35.0975 35.3143 35.7538 35.3143 36.2942 35.619L42.2773 39C42.5378 39.1524 42.8563 38.9238 42.7984 38.6286L40.3086 26.0762" fill="none" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" />
-    </svg>
-  );
-};
-
-export default CertificateTwo;
\ No newline at end of file
diff --git a/src/svg/certificate-2.tsx b/src/svg/certificate-2.tsx
new file mode 100644
index 0000000..1df9709
--- /dev/null
+++ b/src/svg/certificate-2.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+const CertificateTwo = () => {
+    return (
+        <svg
+            width='37'
+            viewBox='0 0 48 40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M29.1048 32.5521H2.67293C1.72721 32.5521 0.964844 31.7998 0.964844 30.8664V2.63786C0.964844 1.70453 1.72721 0.952148 2.67293 0.952148H45.3267C46.2724 0.952148 47.0348 1.70453 47.0348 2.63786V30.8664C47.0348 31.7998 46.2724 32.5521 45.3267 32.5521H41.8044'
+                fill='none'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M8.31836 9.33301H40.6658'
+                fill='none'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M8.31836 16.752H22.369'
+                fill='none'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M35.4355 28.2858C39.001 28.2858 41.8914 25.4332 41.8914 21.9144C41.8914 18.3956 39.001 15.543 35.4355 15.543C31.8699 15.543 28.9795 18.3956 28.9795 21.9144C28.9795 25.4332 31.8699 28.2858 35.4355 28.2858Z'
+                fill='none'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M30.5523 26.0762L28.0626 38.6286C28.0047 38.9238 28.3231 39.1428 28.5837 39L34.5668 35.619C35.0975 35.3143 35.7538 35.3143 36.2942 35.619L42.2773 39C42.5378 39.1524 42.8563 38.9238 42.7984 38.6286L40.3086 26.0762'
+                fill='none'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+        </svg>
+    );
+};
+
+export default CertificateTwo;
diff --git a/src/svg/certificate.js b/src/svg/certificate.js
deleted file mode 100644
index b137047..0000000
--- a/src/svg/certificate.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-const Certificate = () => {
-  return (
-    <svg width="37" viewBox="0 0 48 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M29.1048 32.5521H2.67293C1.72721 32.5521 0.964844 31.7998 0.964844 30.8664V2.63786C0.964844 1.70453 1.72721 0.952148 2.67293 0.952148H45.3267C46.2724 0.952148 47.0348 1.70453 47.0348 2.63786V30.8664C47.0348 31.7998 46.2724 32.5521 45.3267 32.5521H41.8044" fill="none" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M8.31836 9.33301H40.6658" fill="none" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M8.31836 16.752H22.369" fill="none" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M35.4355 28.2858C39.001 28.2858 41.8914 25.4332 41.8914 21.9144C41.8914 18.3956 39.001 15.543 35.4355 15.543C31.8699 15.543 28.9795 18.3956 28.9795 21.9144C28.9795 25.4332 31.8699 28.2858 35.4355 28.2858Z" fill="none" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M30.5523 26.0762L28.0626 38.6286C28.0047 38.9238 28.3231 39.1428 28.5837 39L34.5668 35.619C35.0975 35.3143 35.7538 35.3143 36.2942 35.619L42.2773 39C42.5378 39.1524 42.8563 38.9238 42.7984 38.6286L40.3086 26.0762" fill="none" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" />
-    </svg>
-
-  );
-};
-
-export default Certificate;
\ No newline at end of file
diff --git a/src/svg/certificate.tsx b/src/svg/certificate.tsx
new file mode 100644
index 0000000..409aea1
--- /dev/null
+++ b/src/svg/certificate.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+const Certificate = () => {
+    return (
+        <svg
+            width='37'
+            viewBox='0 0 48 40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M29.1048 32.5521H2.67293C1.72721 32.5521 0.964844 31.7998 0.964844 30.8664V2.63786C0.964844 1.70453 1.72721 0.952148 2.67293 0.952148H45.3267C46.2724 0.952148 47.0348 1.70453 47.0348 2.63786V30.8664C47.0348 31.7998 46.2724 32.5521 45.3267 32.5521H41.8044'
+                fill='none'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M8.31836 9.33301H40.6658'
+                fill='none'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M8.31836 16.752H22.369'
+                fill='none'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M35.4355 28.2858C39.001 28.2858 41.8914 25.4332 41.8914 21.9144C41.8914 18.3956 39.001 15.543 35.4355 15.543C31.8699 15.543 28.9795 18.3956 28.9795 21.9144C28.9795 25.4332 31.8699 28.2858 35.4355 28.2858Z'
+                fill='none'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M30.5523 26.0762L28.0626 38.6286C28.0047 38.9238 28.3231 39.1428 28.5837 39L34.5668 35.619C35.0975 35.3143 35.7538 35.3143 36.2942 35.619L42.2773 39C42.5378 39.1524 42.8563 38.9238 42.7984 38.6286L40.3086 26.0762'
+                fill='none'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+        </svg>
+    );
+};
+
+export default Certificate;
diff --git a/src/svg/hybrid-distance-programs-2.js b/src/svg/hybrid-distance-programs-2.js
deleted file mode 100644
index ee5b24d..0000000
--- a/src/svg/hybrid-distance-programs-2.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-const HybridDistanceProgramsTwo = () => {
-  return (
-    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M3.51448 30.4573C0.0954334 27.0383 0.0954334 21.4954 3.51448 18.0764L18.0764 3.51448C21.4954 0.0954334 27.0383 0.0954334 30.4573 3.51448C33.8764 6.93353 33.8764 12.4764 30.4573 15.8954L15.8954 30.4573C12.4764 33.8764 6.93353 33.8764 3.51448 30.4573Z" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-      <path d="M31.3715 39.0477C35.6109 39.0477 39.0477 35.6109 39.0477 31.3715C39.0477 27.1321 35.6109 23.6953 31.3715 23.6953C27.1321 23.6953 23.6953 27.1321 23.6953 31.3715C23.6953 35.6109 27.1321 39.0477 31.3715 39.0477Z" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-      <path d="M10.7905 10.791L23.1715 23.172" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-      <path d="M25.9619 36.781L36.781 25.9619" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-      <path d="M19.5337 9.57139L21.9527 7.15234" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-    </svg>
-  );
-};
-
-export default HybridDistanceProgramsTwo;
\ No newline at end of file
diff --git a/src/svg/hybrid-distance-programs-2.tsx b/src/svg/hybrid-distance-programs-2.tsx
new file mode 100644
index 0000000..b6832fa
--- /dev/null
+++ b/src/svg/hybrid-distance-programs-2.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+const HybridDistanceProgramsTwo = () => {
+    return (
+        <svg
+            width='40'
+            height='40'
+            viewBox='0 0 40 40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M3.51448 30.4573C0.0954334 27.0383 0.0954334 21.4954 3.51448 18.0764L18.0764 3.51448C21.4954 0.0954334 27.0383 0.0954334 30.4573 3.51448C33.8764 6.93353 33.8764 12.4764 30.4573 15.8954L15.8954 30.4573C12.4764 33.8764 6.93353 33.8764 3.51448 30.4573Z'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+            <path
+                d='M31.3715 39.0477C35.6109 39.0477 39.0477 35.6109 39.0477 31.3715C39.0477 27.1321 35.6109 23.6953 31.3715 23.6953C27.1321 23.6953 23.6953 27.1321 23.6953 31.3715C23.6953 35.6109 27.1321 39.0477 31.3715 39.0477Z'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+            <path
+                d='M10.7905 10.791L23.1715 23.172'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+            <path
+                d='M25.9619 36.781L36.781 25.9619'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+            <path
+                d='M19.5337 9.57139L21.9527 7.15234'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+        </svg>
+    );
+};
+
+export default HybridDistanceProgramsTwo;
diff --git a/src/svg/hybrid-distance-programs.js b/src/svg/hybrid-distance-programs.js
deleted file mode 100644
index ebb8847..0000000
--- a/src/svg/hybrid-distance-programs.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-const HybridDistancePrograms = () => {
-  return (
-    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M3.51448 30.4573C0.0954334 27.0383 0.0954334 21.4954 3.51448 18.0764L18.0764 3.51448C21.4954 0.0954334 27.0383 0.0954334 30.4573 3.51448C33.8764 6.93353 33.8764 12.4764 30.4573 15.8954L15.8954 30.4573C12.4764 33.8764 6.93353 33.8764 3.51448 30.4573Z" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-      <path d="M31.3715 39.0477C35.6109 39.0477 39.0477 35.6109 39.0477 31.3715C39.0477 27.1321 35.6109 23.6953 31.3715 23.6953C27.1321 23.6953 23.6953 27.1321 23.6953 31.3715C23.6953 35.6109 27.1321 39.0477 31.3715 39.0477Z" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-      <path d="M10.7905 10.791L23.1715 23.172" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-      <path d="M25.9619 36.781L36.781 25.9619" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-      <path d="M19.5337 9.57139L21.9527 7.15234" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-    </svg>
-  );
-};
-
-export default HybridDistancePrograms;
\ No newline at end of file
diff --git a/src/svg/hybrid-distance-programs.tsx b/src/svg/hybrid-distance-programs.tsx
new file mode 100644
index 0000000..73c45bf
--- /dev/null
+++ b/src/svg/hybrid-distance-programs.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+const HybridDistancePrograms = () => {
+    return (
+        <svg
+            width='40'
+            height='40'
+            viewBox='0 0 40 40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M3.51448 30.4573C0.0954334 27.0383 0.0954334 21.4954 3.51448 18.0764L18.0764 3.51448C21.4954 0.0954334 27.0383 0.0954334 30.4573 3.51448C33.8764 6.93353 33.8764 12.4764 30.4573 15.8954L15.8954 30.4573C12.4764 33.8764 6.93353 33.8764 3.51448 30.4573Z'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+            <path
+                d='M31.3715 39.0477C35.6109 39.0477 39.0477 35.6109 39.0477 31.3715C39.0477 27.1321 35.6109 23.6953 31.3715 23.6953C27.1321 23.6953 23.6953 27.1321 23.6953 31.3715C23.6953 35.6109 27.1321 39.0477 31.3715 39.0477Z'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+            <path
+                d='M10.7905 10.791L23.1715 23.172'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+            <path
+                d='M25.9619 36.781L36.781 25.9619'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+            <path
+                d='M19.5337 9.57139L21.9527 7.15234'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+        </svg>
+    );
+};
+
+export default HybridDistancePrograms;
diff --git a/src/svg/index.js b/src/svg/index.js
deleted file mode 100644
index 822bfe3..0000000
--- a/src/svg/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import OnlineClass from "./online-class";
-import Instructor from "./instructor";
-import Certificate from "./certificate";
-import User from "./user";
-import OnlineDegree from "./online-degree";
-import NonDegreeProgram from "./non-degree-program";
-import OffCanvasPrograms from "./off-canvas-programs";
-import HybridDistancePrograms from "./hybrid-distance-programs";
-import ScholarshipFacility from "./scholarship-facility";
-import SkilledLecturers from "./skilled-lecturers";
-import BookLibrary from "./book-library";
-import SkilledLecturersTwo from "./skilled-lecturers-2";
-import HybridDistanceProgramsTwo from "./hybrid-distance-programs-2";
-import CertificateTwo from "./certificate-2";
-import UserTwo from "./user-2";
-import Books from "./books";
-
-export {
-    OnlineClass,
-    Instructor,
-    Certificate,
-    User,
-    OnlineDegree,
-    NonDegreeProgram,
-    OffCanvasPrograms,
-    HybridDistancePrograms,
-    ScholarshipFacility,
-    SkilledLecturers,
-    BookLibrary,
-    SkilledLecturersTwo,
-    HybridDistanceProgramsTwo,
-    CertificateTwo,
-    UserTwo,
-    Books
-}
\ No newline at end of file
diff --git a/src/svg/index.ts b/src/svg/index.ts
new file mode 100644
index 0000000..a057a46
--- /dev/null
+++ b/src/svg/index.ts
@@ -0,0 +1,35 @@
+import OnlineClass from './online-class';
+import Instructor from './instructor';
+import Certificate from './certificate';
+import User from './user';
+import OnlineDegree from './online-degree';
+import NonDegreeProgram from './non-degree-program';
+import OffCanvasPrograms from './off-canvas-programs';
+import HybridDistancePrograms from './hybrid-distance-programs';
+import ScholarshipFacility from './scholarship-facility';
+import SkilledLecturers from './skilled-lecturers';
+import BookLibrary from './book-library';
+import SkilledLecturersTwo from './skilled-lecturers-2';
+import HybridDistanceProgramsTwo from './hybrid-distance-programs-2';
+import CertificateTwo from './certificate-2';
+import UserTwo from './user-2';
+import Books from './books';
+
+export {
+    OnlineClass,
+    Instructor,
+    Certificate,
+    User,
+    OnlineDegree,
+    NonDegreeProgram,
+    OffCanvasPrograms,
+    HybridDistancePrograms,
+    ScholarshipFacility,
+    SkilledLecturers,
+    BookLibrary,
+    SkilledLecturersTwo,
+    HybridDistanceProgramsTwo,
+    CertificateTwo,
+    UserTwo,
+    Books,
+};
diff --git a/src/svg/instructor.js b/src/svg/instructor.js
deleted file mode 100644
index 032d932..0000000
--- a/src/svg/instructor.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from "react";
-
-const Instructor = (props) => (
-  <svg width="26" height="40" viewBox="0 0 31 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M28.8827 31.2393L26.7251 38.0491H4.27539L2.11774 31.2393H28.8827V31.2393ZM29.3042 29.2881H1.69624C0.55218 29.2881 -0.260704 30.3613 0.0805067 31.4247L2.42884 38.8393C2.63959 39.532 3.30194 40.0003 4.04457 40.0003H26.9659C27.7085 40.0003 28.3709 39.532 28.5816 38.8393L30.93 31.4247C31.2611 30.3613 30.4483 29.2881 29.3042 29.2881Z" fill="#ffffff"/>
-    <path d="M4.48584 30.1174C4.48584 26.9369 7.14528 24.3516 10.4169 24.3516H20.583C23.8546 24.3516 26.514 26.9369 26.514 30.1174" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10"/>
-    <path d="M15.0737 34.6436H15.9268" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M20.4827 24.3512V22.5853C20.4827 21.7268 20.8039 20.9073 21.3558 20.2341C22.5802 18.7512 23.4232 17.1024 23.7242 14.6341C23.7744 14.2146 24.1357 13.8829 24.5672 13.8829C25.059 13.8829 25.4503 13.4927 25.4503 13.0146V12.2439C25.4503 11.7658 25.0489 11.3756 24.5572 11.3756H24.5471C24.1056 11.3756 23.7543 11.0536 23.7042 10.6341C23.0518 5.1512 19.6197 0.975586 15.5051 0.975586C11.3804 0.975586 7.95828 5.1512 7.27586 10.6341C7.22568 11.0536 6.86439 11.3853 6.43286 11.3853H6.41279C5.8508 11.3853 5.38916 11.8341 5.38916 12.3805V12.878C5.38916 13.4244 5.8508 13.8731 6.41279 13.8731C6.85436 13.8731 7.20561 14.1951 7.25578 14.6244C7.55685 17.0927 8.40988 18.7512 9.62419 20.2341C10.1761 20.9073 10.4973 21.7366 10.4973 22.5951V24.3512" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10"/>
-    <path d="M6.51318 11.3857H13.9395C15.4449 11.3857 16.8298 10.3223 16.9301 8.86862C16.9603 8.40033 16.9201 7.44423 17.0807 7.00521C17.171 6.7613 17.5724 6.83935 17.6527 7.09301L18.4957 10.4686C18.6763 11.0247 19.2082 11.3955 19.8003 11.3955H24.3565" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10"/>
-</svg>
-
-)
-
-export default Instructor
diff --git a/src/svg/instructor.tsx b/src/svg/instructor.tsx
new file mode 100644
index 0000000..51efb7f
--- /dev/null
+++ b/src/svg/instructor.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+const Instructor = props => (
+    <svg
+        width='26'
+        height='40'
+        viewBox='0 0 31 40'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+    >
+        <path
+            d='M28.8827 31.2393L26.7251 38.0491H4.27539L2.11774 31.2393H28.8827V31.2393ZM29.3042 29.2881H1.69624C0.55218 29.2881 -0.260704 30.3613 0.0805067 31.4247L2.42884 38.8393C2.63959 39.532 3.30194 40.0003 4.04457 40.0003H26.9659C27.7085 40.0003 28.3709 39.532 28.5816 38.8393L30.93 31.4247C31.2611 30.3613 30.4483 29.2881 29.3042 29.2881Z'
+            fill='#ffffff'
+        />
+        <path
+            d='M4.48584 30.1174C4.48584 26.9369 7.14528 24.3516 10.4169 24.3516H20.583C23.8546 24.3516 26.514 26.9369 26.514 30.1174'
+            stroke='#ffffff'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+        />
+        <path
+            d='M15.0737 34.6436H15.9268'
+            stroke='#ffffff'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+        />
+        <path
+            d='M20.4827 24.3512V22.5853C20.4827 21.7268 20.8039 20.9073 21.3558 20.2341C22.5802 18.7512 23.4232 17.1024 23.7242 14.6341C23.7744 14.2146 24.1357 13.8829 24.5672 13.8829C25.059 13.8829 25.4503 13.4927 25.4503 13.0146V12.2439C25.4503 11.7658 25.0489 11.3756 24.5572 11.3756H24.5471C24.1056 11.3756 23.7543 11.0536 23.7042 10.6341C23.0518 5.1512 19.6197 0.975586 15.5051 0.975586C11.3804 0.975586 7.95828 5.1512 7.27586 10.6341C7.22568 11.0536 6.86439 11.3853 6.43286 11.3853H6.41279C5.8508 11.3853 5.38916 11.8341 5.38916 12.3805V12.878C5.38916 13.4244 5.8508 13.8731 6.41279 13.8731C6.85436 13.8731 7.20561 14.1951 7.25578 14.6244C7.55685 17.0927 8.40988 18.7512 9.62419 20.2341C10.1761 20.9073 10.4973 21.7366 10.4973 22.5951V24.3512'
+            stroke='#ffffff'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+        />
+        <path
+            d='M6.51318 11.3857H13.9395C15.4449 11.3857 16.8298 10.3223 16.9301 8.86862C16.9603 8.40033 16.9201 7.44423 17.0807 7.00521C17.171 6.7613 17.5724 6.83935 17.6527 7.09301L18.4957 10.4686C18.6763 11.0247 19.2082 11.3955 19.8003 11.3955H24.3565'
+            stroke='#ffffff'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+        />
+    </svg>
+);
+
+export default Instructor;
diff --git a/src/svg/non-degree-program.js b/src/svg/non-degree-program.js
deleted file mode 100644
index bc3fcc7..0000000
--- a/src/svg/non-degree-program.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-const NonDegreeProgram = () => {
-  return (
-    <svg width="45" height="40" viewBox="0 0 45 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M26.0913 17.2855L23.2222 12.495C22.8949 11.9522 22.1054 11.9522 21.778 12.495L14.4032 24.7712C14.2684 24.9998 14.2492 25.2855 14.3551 25.5236L17.0412 31.6569C17.099 31.7998 17.1279 31.9522 17.099 32.1046L16.2036 38.095C16.1266 38.5998 16.5213 39.0474 17.0316 39.0474H22.4905H27.9494C28.4597 39.0474 28.8544 38.5998 28.7774 38.095L27.882 32.1236C27.8628 31.9712 27.882 31.8093 27.9398 31.676L30.6259 25.5427C30.7318 25.295 30.7126 25.0188 30.5778 24.7903L28.6426 21.5712" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-      <path d="M16.252 31.9902H28.7487" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
-      <path d="M22.4999 27.9713C24.2546 27.9713 25.6771 26.5642 25.6771 24.8284C25.6771 23.0927 24.2546 21.6855 22.4999 21.6855C20.7452 21.6855 19.3228 23.0927 19.3228 24.8284C19.3228 26.5642 20.7452 27.9713 22.4999 27.9713Z" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M22.5 12.0947V18.1043" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M22.4999 7.84739C24.4247 7.84739 25.9851 6.30383 25.9851 4.39977C25.9851 2.4957 24.4247 0.952148 22.4999 0.952148C20.575 0.952148 19.0146 2.4957 19.0146 4.39977C19.0146 6.30383 20.575 7.84739 22.4999 7.84739Z" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M5.01611 4.39941H19.0148" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M2.98471 6.39941C4.10134 6.39941 5.00654 5.50398 5.00654 4.39941C5.00654 3.29484 4.10134 2.39941 2.98471 2.39941C1.86809 2.39941 0.962891 3.29484 0.962891 4.39941C0.962891 5.50398 1.86809 6.39941 2.98471 6.39941Z" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M8.19321 18.8184C9.30983 18.8184 10.215 17.9229 10.215 16.8184C10.215 15.7138 9.30983 14.8184 8.19321 14.8184C7.07659 14.8184 6.17139 15.7138 6.17139 16.8184C6.17139 17.9229 7.07659 18.8184 8.19321 18.8184Z" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M8.19336 15.0947C8.19336 9.18037 13.0265 4.39941 19.0053 4.39941" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M39.9841 4.39941H25.9854" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M42.0057 6.39941C43.1223 6.39941 44.0275 5.50398 44.0275 4.39941C44.0275 3.29484 43.1223 2.39941 42.0057 2.39941C40.8891 2.39941 39.9839 3.29484 39.9839 4.39941C39.9839 5.50398 40.8891 6.39941 42.0057 6.39941Z" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M36.7972 18.8184C37.9138 18.8184 38.819 17.9229 38.819 16.8184C38.819 15.7138 37.9138 14.8184 36.7972 14.8184C35.6806 14.8184 34.7754 15.7138 34.7754 16.8184C34.7754 17.9229 35.6806 18.8184 36.7972 18.8184Z" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M36.7973 15.0947C36.7973 9.18037 31.9642 4.39941 25.9854 4.39941" stroke="#ee4a62" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M27.333 19.7903C27.5776 19.7903 27.7759 19.5941 27.7759 19.3522C27.7759 19.1102 27.5776 18.9141 27.333 18.9141C27.0884 18.9141 26.8901 19.1102 26.8901 19.3522C26.8901 19.5941 27.0884 19.7903 27.333 19.7903Z" stroke="#ee4a62" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-
-  );
-};
-
-export default NonDegreeProgram;
\ No newline at end of file
diff --git a/src/svg/non-degree-program.tsx b/src/svg/non-degree-program.tsx
new file mode 100644
index 0000000..23a4313
--- /dev/null
+++ b/src/svg/non-degree-program.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+
+const NonDegreeProgram = () => {
+    return (
+        <svg
+            width='45'
+            height='40'
+            viewBox='0 0 45 40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M26.0913 17.2855L23.2222 12.495C22.8949 11.9522 22.1054 11.9522 21.778 12.495L14.4032 24.7712C14.2684 24.9998 14.2492 25.2855 14.3551 25.5236L17.0412 31.6569C17.099 31.7998 17.1279 31.9522 17.099 32.1046L16.2036 38.095C16.1266 38.5998 16.5213 39.0474 17.0316 39.0474H22.4905H27.9494C28.4597 39.0474 28.8544 38.5998 28.7774 38.095L27.882 32.1236C27.8628 31.9712 27.882 31.8093 27.9398 31.676L30.6259 25.5427C30.7318 25.295 30.7126 25.0188 30.5778 24.7903L28.6426 21.5712'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+            <path
+                d='M16.252 31.9902H28.7487'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+            />
+            <path
+                d='M22.4999 27.9713C24.2546 27.9713 25.6771 26.5642 25.6771 24.8284C25.6771 23.0927 24.2546 21.6855 22.4999 21.6855C20.7452 21.6855 19.3228 23.0927 19.3228 24.8284C19.3228 26.5642 20.7452 27.9713 22.4999 27.9713Z'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M22.5 12.0947V18.1043'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M22.4999 7.84739C24.4247 7.84739 25.9851 6.30383 25.9851 4.39977C25.9851 2.4957 24.4247 0.952148 22.4999 0.952148C20.575 0.952148 19.0146 2.4957 19.0146 4.39977C19.0146 6.30383 20.575 7.84739 22.4999 7.84739Z'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M5.01611 4.39941H19.0148'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M2.98471 6.39941C4.10134 6.39941 5.00654 5.50398 5.00654 4.39941C5.00654 3.29484 4.10134 2.39941 2.98471 2.39941C1.86809 2.39941 0.962891 3.29484 0.962891 4.39941C0.962891 5.50398 1.86809 6.39941 2.98471 6.39941Z'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M8.19321 18.8184C9.30983 18.8184 10.215 17.9229 10.215 16.8184C10.215 15.7138 9.30983 14.8184 8.19321 14.8184C7.07659 14.8184 6.17139 15.7138 6.17139 16.8184C6.17139 17.9229 7.07659 18.8184 8.19321 18.8184Z'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M8.19336 15.0947C8.19336 9.18037 13.0265 4.39941 19.0053 4.39941'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M39.9841 4.39941H25.9854'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M42.0057 6.39941C43.1223 6.39941 44.0275 5.50398 44.0275 4.39941C44.0275 3.29484 43.1223 2.39941 42.0057 2.39941C40.8891 2.39941 39.9839 3.29484 39.9839 4.39941C39.9839 5.50398 40.8891 6.39941 42.0057 6.39941Z'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M36.7972 18.8184C37.9138 18.8184 38.819 17.9229 38.819 16.8184C38.819 15.7138 37.9138 14.8184 36.7972 14.8184C35.6806 14.8184 34.7754 15.7138 34.7754 16.8184C34.7754 17.9229 35.6806 18.8184 36.7972 18.8184Z'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M36.7973 15.0947C36.7973 9.18037 31.9642 4.39941 25.9854 4.39941'
+                stroke='#ee4a62'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M27.333 19.7903C27.5776 19.7903 27.7759 19.5941 27.7759 19.3522C27.7759 19.1102 27.5776 18.9141 27.333 18.9141C27.0884 18.9141 26.8901 19.1102 26.8901 19.3522C26.8901 19.5941 27.0884 19.7903 27.333 19.7903Z'
+                stroke='#ee4a62'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+        </svg>
+    );
+};
+
+export default NonDegreeProgram;
diff --git a/src/svg/off-canvas-programs.js b/src/svg/off-canvas-programs.js
deleted file mode 100644
index 8136601..0000000
--- a/src/svg/off-canvas-programs.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-const OffCanvasPrograms = () => {
-  return (
-    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M38.095 39.0474H1.90453C1.38072 39.0474 0.952148 38.6188 0.952148 38.095V1.90453C0.952148 1.38072 1.38072 0.952148 1.90453 0.952148H38.095C38.6188 0.952148 39.0474 1.38072 39.0474 1.90453V38.095C39.0474 38.6188 38.6188 39.0474 38.095 39.0474Z" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M0.952148 9.75195H39.0474" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M14.3997 18.2383L9.35205 24.0859L13.9997 29.924" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M24.0664 18.2383L29.1045 24.0859L24.4664 29.924" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M21.4379 18.2383L16.9141 29.924" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M5.78086 6.00899C6.0123 6.00899 6.19991 5.82138 6.19991 5.58995C6.19991 5.35851 6.0123 5.1709 5.78086 5.1709C5.54943 5.1709 5.36182 5.35851 5.36182 5.58995C5.36182 5.82138 5.54943 6.00899 5.78086 6.00899Z" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M9.42832 6.00899C9.65976 6.00899 9.84737 5.82138 9.84737 5.58995C9.84737 5.35851 9.65976 5.1709 9.42832 5.1709C9.19689 5.1709 9.00928 5.35851 9.00928 5.58995C9.00928 5.82138 9.19689 6.00899 9.42832 6.00899Z" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M13.0665 6.00899C13.2979 6.00899 13.4856 5.82138 13.4856 5.58995C13.4856 5.35851 13.2979 5.1709 13.0665 5.1709C12.8351 5.1709 12.6475 5.35851 12.6475 5.58995C12.6475 5.82138 12.8351 6.00899 13.0665 6.00899Z" stroke="#4664e4" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-
-  );
-};
-
-export default OffCanvasPrograms;
\ No newline at end of file
diff --git a/src/svg/off-canvas-programs.tsx b/src/svg/off-canvas-programs.tsx
new file mode 100644
index 0000000..7da4b0b
--- /dev/null
+++ b/src/svg/off-canvas-programs.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+const OffCanvasPrograms = () => {
+    return (
+        <svg
+            width='40'
+            height='40'
+            viewBox='0 0 40 40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M38.095 39.0474H1.90453C1.38072 39.0474 0.952148 38.6188 0.952148 38.095V1.90453C0.952148 1.38072 1.38072 0.952148 1.90453 0.952148H38.095C38.6188 0.952148 39.0474 1.38072 39.0474 1.90453V38.095C39.0474 38.6188 38.6188 39.0474 38.095 39.0474Z'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M0.952148 9.75195H39.0474'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M14.3997 18.2383L9.35205 24.0859L13.9997 29.924'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M24.0664 18.2383L29.1045 24.0859L24.4664 29.924'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M21.4379 18.2383L16.9141 29.924'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M5.78086 6.00899C6.0123 6.00899 6.19991 5.82138 6.19991 5.58995C6.19991 5.35851 6.0123 5.1709 5.78086 5.1709C5.54943 5.1709 5.36182 5.35851 5.36182 5.58995C5.36182 5.82138 5.54943 6.00899 5.78086 6.00899Z'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M9.42832 6.00899C9.65976 6.00899 9.84737 5.82138 9.84737 5.58995C9.84737 5.35851 9.65976 5.1709 9.42832 5.1709C9.19689 5.1709 9.00928 5.35851 9.00928 5.58995C9.00928 5.82138 9.19689 6.00899 9.42832 6.00899Z'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M13.0665 6.00899C13.2979 6.00899 13.4856 5.82138 13.4856 5.58995C13.4856 5.35851 13.2979 5.1709 13.0665 5.1709C12.8351 5.1709 12.6475 5.35851 12.6475 5.58995C12.6475 5.82138 12.8351 6.00899 13.0665 6.00899Z'
+                stroke='#4664e4'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+        </svg>
+    );
+};
+
+export default OffCanvasPrograms;
diff --git a/src/svg/online-class.js b/src/svg/online-class.js
deleted file mode 100644
index 7dd9365..0000000
--- a/src/svg/online-class.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from "react";
-
-const OnlineClass = (props) => (
-  <svg width="38" height="36" viewBox="0 0 44 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M41.37 34.7695C41.27 36.5695 39.78 37.9995 37.95 37.9995H5.42C3.6 37.9995 2.1 36.5695 2 34.7695H41.37ZM41.57 32.7695H1.81C0.81 32.7695 0 33.5795 0 34.5795C0 37.5695 2.43 39.9995 5.42 39.9995H37.95C40.94 39.9995 43.37 37.5695 43.37 34.5795C43.38 33.5795 42.57 32.7695 41.57 32.7695Z" fill="#ffffff"/>
-    <path d="M38.3501 15.5801V33.6801H4.12012V9.27012C4.12012 8.77012 4.52012 8.37012 5.02012 8.37012H28.0001" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10"/>
-    <path d="M41.3801 2V14.27H31.9901C31.3001 14.27 30.6301 14.52 30.1101 14.96L29.1101 15.64V2H41.3801ZM41.5701 0H28.9201C27.9201 0 27.1101 0.81 27.1101 1.81V17.89C27.1101 18.39 27.5201 18.72 27.9401 18.72C28.1401 18.72 28.3501 18.64 28.5201 18.48L31.3501 16.54C31.5201 16.37 31.7501 16.27 31.9901 16.27H41.5701C42.5701 16.27 43.3801 15.46 43.3801 14.46V1.81C43.3801 0.81 42.5701 0 41.5701 0Z" fill="#ffffff"/>
-    <path d="M32.0801 6.12988H38.4101" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M33.8899 10.1396H36.5899" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M10.9399 33.6701V26.7001C10.9399 24.5601 12.9599 22.8301 15.4599 22.8301C17.9599 22.8301 19.9799 24.5601 19.9799 26.7001V33.6701" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10"/>
-    <path d="M15.46 22.8302C16.9567 22.8302 18.17 21.6168 18.17 20.1202C18.17 18.6235 16.9567 17.4102 15.46 17.4102C13.9633 17.4102 12.75 18.6235 12.75 20.1202C12.75 21.6168 13.9633 22.8302 15.46 22.8302Z" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10"/>
-</svg>
-
-)
-
-export default OnlineClass
diff --git a/src/svg/online-class.tsx b/src/svg/online-class.tsx
new file mode 100644
index 0000000..9930485
--- /dev/null
+++ b/src/svg/online-class.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+const OnlineClass = props => (
+    <svg
+        width='38'
+        height='36'
+        viewBox='0 0 44 40'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+    >
+        <path
+            d='M41.37 34.7695C41.27 36.5695 39.78 37.9995 37.95 37.9995H5.42C3.6 37.9995 2.1 36.5695 2 34.7695H41.37ZM41.57 32.7695H1.81C0.81 32.7695 0 33.5795 0 34.5795C0 37.5695 2.43 39.9995 5.42 39.9995H37.95C40.94 39.9995 43.37 37.5695 43.37 34.5795C43.38 33.5795 42.57 32.7695 41.57 32.7695Z'
+            fill='#ffffff'
+        />
+        <path
+            d='M38.3501 15.5801V33.6801H4.12012V9.27012C4.12012 8.77012 4.52012 8.37012 5.02012 8.37012H28.0001'
+            stroke='#ffffff'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+        />
+        <path
+            d='M41.3801 2V14.27H31.9901C31.3001 14.27 30.6301 14.52 30.1101 14.96L29.1101 15.64V2H41.3801ZM41.5701 0H28.9201C27.9201 0 27.1101 0.81 27.1101 1.81V17.89C27.1101 18.39 27.5201 18.72 27.9401 18.72C28.1401 18.72 28.3501 18.64 28.5201 18.48L31.3501 16.54C31.5201 16.37 31.7501 16.27 31.9901 16.27H41.5701C42.5701 16.27 43.3801 15.46 43.3801 14.46V1.81C43.3801 0.81 42.5701 0 41.5701 0Z'
+            fill='#ffffff'
+        />
+        <path
+            d='M32.0801 6.12988H38.4101'
+            stroke='#ffffff'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+        />
+        <path
+            d='M33.8899 10.1396H36.5899'
+            stroke='#ffffff'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+        />
+        <path
+            d='M10.9399 33.6701V26.7001C10.9399 24.5601 12.9599 22.8301 15.4599 22.8301C17.9599 22.8301 19.9799 24.5601 19.9799 26.7001V33.6701'
+            stroke='#ffffff'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+        />
+        <path
+            d='M15.46 22.8302C16.9567 22.8302 18.17 21.6168 18.17 20.1202C18.17 18.6235 16.9567 17.4102 15.46 17.4102C13.9633 17.4102 12.75 18.6235 12.75 20.1202C12.75 21.6168 13.9633 22.8302 15.46 22.8302Z'
+            stroke='#ffffff'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+        />
+    </svg>
+);
+
+export default OnlineClass;
diff --git a/src/svg/online-degree.js b/src/svg/online-degree.js
deleted file mode 100644
index 318011b..0000000
--- a/src/svg/online-degree.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-const OnlineDegree = () => {
-  return (
-    <svg width="34" height="40" viewBox="0 0 34 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M7.70459 25.5939L12.8535 30.8403C13.015 31.0021 13.11 31.2307 13.11 31.4592V35.0298C13.11 35.4106 13.3475 35.7439 13.699 35.8676C15.0575 36.3342 18.4679 36.7341 20.9664 38.8574C21.5364 39.3335 22.4009 38.905 22.4009 38.1719V34.3918C22.4009 32.9921 23.4744 31.8496 24.8613 31.7067C27.1033 31.4592 30.0483 29.9452 29.8773 23.6325C29.8678 23.1373 30.2763 22.7279 30.7702 22.7279H31.8247C32.8507 22.7279 33.4112 21.5377 32.7557 20.7474L29.6873 17.015C29.3928 16.6627 29.2313 16.2057 29.2313 15.7486V10.2833C29.2503 6.19852 25.8683 0.952148 19.4559 0.952148C13.0435 0.952148 8.72108 3.58009 8.72108 6.4556" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" strokeLinejoin="round" />
-      <path d="M24.1014 5.98926V23.9945C24.1014 24.9752 23.3129 25.7655 22.3344 25.7655H20.1779C19.9499 25.7655 19.7409 25.8798 19.6269 26.0797L17.9739 28.7648C17.9169 28.8505 17.8029 28.8695 17.7269 28.8029L14.554 25.9369C14.4305 25.8322 14.2785 25.7655 14.117 25.7655H2.71717C1.73868 25.7655 0.950195 24.9657 0.950195 23.9945V7.88404C0.950195 6.90333 1.73868 6.11304 2.71717 6.11304H18.7624" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M12.2168 17.5674C13.1717 17.5674 13.9457 16.7915 13.9457 15.8345C13.9457 14.8774 13.1717 14.1016 12.2168 14.1016C11.2619 14.1016 10.4878 14.8774 10.4878 15.8345C10.4878 16.7915 11.2619 17.5674 12.2168 17.5674Z" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M7.70456 12.9688C8.65945 12.9688 9.43354 12.1929 9.43354 11.2359C9.43354 10.2788 8.65945 9.50293 7.70456 9.50293C6.74967 9.50293 5.97559 10.2788 5.97559 11.2359C5.97559 12.1929 6.74967 12.9688 7.70456 12.9688Z" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M16.7295 12.9688C17.6843 12.9688 18.4584 12.1929 18.4584 11.2359C18.4584 10.2788 17.6843 9.50293 16.7295 9.50293C15.7746 9.50293 15.0005 10.2788 15.0005 11.2359C15.0005 12.1929 15.7746 12.9688 16.7295 12.9688Z" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M7.70456 22.167C8.65945 22.167 9.43354 21.3912 9.43354 20.4341C9.43354 19.477 8.65945 18.7012 7.70456 18.7012C6.74967 18.7012 5.97559 19.477 5.97559 20.4341C5.97559 21.3912 6.74967 22.167 7.70456 22.167Z" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M16.7295 22.167C17.6843 22.167 18.4584 21.3912 18.4584 20.4341C18.4584 19.477 17.6843 18.7012 16.7295 18.7012C15.7746 18.7012 15.0005 19.477 15.0005 20.4341C15.0005 21.3912 15.7746 22.167 16.7295 22.167Z" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M13.3472 14.5296L15.4656 12.4062" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M10.9152 14.7009L8.73975 12.5205" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M10.8582 17.7295L8.73975 19.8528" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M13.2808 17.5576L15.4657 19.738" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />strokeWidth
-      <path d="M21.4507 6.55079C21.692 6.55079 21.8877 6.35469 21.8877 6.1128C21.8877 5.8709 21.692 5.6748 21.4507 5.6748C21.2093 5.6748 21.0137 5.8709 21.0137 6.1128C21.0137 6.35469 21.2093 6.55079 21.4507 6.55079Z" stroke="#1ab69d" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-
-  );
-};
-
-export default OnlineDegree;
\ No newline at end of file
diff --git a/src/svg/online-degree.tsx b/src/svg/online-degree.tsx
new file mode 100644
index 0000000..d95955f
--- /dev/null
+++ b/src/svg/online-degree.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+
+const OnlineDegree = () => {
+    return (
+        <svg
+            width='34'
+            height='40'
+            viewBox='0 0 34 40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M7.70459 25.5939L12.8535 30.8403C13.015 31.0021 13.11 31.2307 13.11 31.4592V35.0298C13.11 35.4106 13.3475 35.7439 13.699 35.8676C15.0575 36.3342 18.4679 36.7341 20.9664 38.8574C21.5364 39.3335 22.4009 38.905 22.4009 38.1719V34.3918C22.4009 32.9921 23.4744 31.8496 24.8613 31.7067C27.1033 31.4592 30.0483 29.9452 29.8773 23.6325C29.8678 23.1373 30.2763 22.7279 30.7702 22.7279H31.8247C32.8507 22.7279 33.4112 21.5377 32.7557 20.7474L29.6873 17.015C29.3928 16.6627 29.2313 16.2057 29.2313 15.7486V10.2833C29.2503 6.19852 25.8683 0.952148 19.4559 0.952148C13.0435 0.952148 8.72108 3.58009 8.72108 6.4556'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M24.1014 5.98926V23.9945C24.1014 24.9752 23.3129 25.7655 22.3344 25.7655H20.1779C19.9499 25.7655 19.7409 25.8798 19.6269 26.0797L17.9739 28.7648C17.9169 28.8505 17.8029 28.8695 17.7269 28.8029L14.554 25.9369C14.4305 25.8322 14.2785 25.7655 14.117 25.7655H2.71717C1.73868 25.7655 0.950195 24.9657 0.950195 23.9945V7.88404C0.950195 6.90333 1.73868 6.11304 2.71717 6.11304H18.7624'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M12.2168 17.5674C13.1717 17.5674 13.9457 16.7915 13.9457 15.8345C13.9457 14.8774 13.1717 14.1016 12.2168 14.1016C11.2619 14.1016 10.4878 14.8774 10.4878 15.8345C10.4878 16.7915 11.2619 17.5674 12.2168 17.5674Z'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M7.70456 12.9688C8.65945 12.9688 9.43354 12.1929 9.43354 11.2359C9.43354 10.2788 8.65945 9.50293 7.70456 9.50293C6.74967 9.50293 5.97559 10.2788 5.97559 11.2359C5.97559 12.1929 6.74967 12.9688 7.70456 12.9688Z'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M16.7295 12.9688C17.6843 12.9688 18.4584 12.1929 18.4584 11.2359C18.4584 10.2788 17.6843 9.50293 16.7295 9.50293C15.7746 9.50293 15.0005 10.2788 15.0005 11.2359C15.0005 12.1929 15.7746 12.9688 16.7295 12.9688Z'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M7.70456 22.167C8.65945 22.167 9.43354 21.3912 9.43354 20.4341C9.43354 19.477 8.65945 18.7012 7.70456 18.7012C6.74967 18.7012 5.97559 19.477 5.97559 20.4341C5.97559 21.3912 6.74967 22.167 7.70456 22.167Z'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M16.7295 22.167C17.6843 22.167 18.4584 21.3912 18.4584 20.4341C18.4584 19.477 17.6843 18.7012 16.7295 18.7012C15.7746 18.7012 15.0005 19.477 15.0005 20.4341C15.0005 21.3912 15.7746 22.167 16.7295 22.167Z'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M13.3472 14.5296L15.4656 12.4062'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M10.9152 14.7009L8.73975 12.5205'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M10.8582 17.7295L8.73975 19.8528'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M13.2808 17.5576L15.4657 19.738'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            strokeWidth
+            <path
+                d='M21.4507 6.55079C21.692 6.55079 21.8877 6.35469 21.8877 6.1128C21.8877 5.8709 21.692 5.6748 21.4507 5.6748C21.2093 5.6748 21.0137 5.8709 21.0137 6.1128C21.0137 6.35469 21.2093 6.55079 21.4507 6.55079Z'
+                stroke='#1ab69d'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+        </svg>
+    );
+};
+
+export default OnlineDegree;
diff --git a/src/svg/scholarship-facility.js b/src/svg/scholarship-facility.js
deleted file mode 100644
index 4b1b4ff..0000000
--- a/src/svg/scholarship-facility.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-const ScholarshipFacility = () => {
-  return (
-    <svg width="49" height="40" viewBox="0 0 49 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M22.9037 25.4288L2.05528 15.0479C0.611854 14.3241 0.583177 12.2764 2.01704 11.5241L22.5118 1.1812C23.1044 0.866916 23.8118 0.87644 24.3949 1.19073L43.6948 12.4479C45.1191 13.2193 45.0617 15.2764 43.5992 15.9717L23.7736 25.4288C23.5059 25.5717 23.1809 25.5717 22.9037 25.4288Z" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M7.55176 17.7812V30.5146C7.55176 31.0574 7.77162 31.5717 8.16354 31.9432C11.0504 34.6765 23.8022 45.0955 38.7049 31.9336C39.1255 31.5622 39.3645 31.0193 39.3645 30.4574V18.0098" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M44.5837 29.6289V33.1718L40.7505 39.048H48.0441L46.486 35.5908" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M22.5405 13.7617L44.5838 15.5141V25.8379" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M44.5839 29.6284C45.6345 29.6284 46.4862 28.7798 46.4862 27.7331C46.4862 26.6864 45.6345 25.8379 44.5839 25.8379C43.5333 25.8379 42.6816 26.6864 42.6816 27.7331C42.6816 28.7798 43.5333 29.6284 44.5839 29.6284Z" stroke="#1ab69d" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-
-  );
-};
-
-export default ScholarshipFacility;
\ No newline at end of file
diff --git a/src/svg/scholarship-facility.tsx b/src/svg/scholarship-facility.tsx
new file mode 100644
index 0000000..c77b825
--- /dev/null
+++ b/src/svg/scholarship-facility.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+const ScholarshipFacility = () => {
+    return (
+        <svg
+            width='49'
+            height='40'
+            viewBox='0 0 49 40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M22.9037 25.4288L2.05528 15.0479C0.611854 14.3241 0.583177 12.2764 2.01704 11.5241L22.5118 1.1812C23.1044 0.866916 23.8118 0.87644 24.3949 1.19073L43.6948 12.4479C45.1191 13.2193 45.0617 15.2764 43.5992 15.9717L23.7736 25.4288C23.5059 25.5717 23.1809 25.5717 22.9037 25.4288Z'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M7.55176 17.7812V30.5146C7.55176 31.0574 7.77162 31.5717 8.16354 31.9432C11.0504 34.6765 23.8022 45.0955 38.7049 31.9336C39.1255 31.5622 39.3645 31.0193 39.3645 30.4574V18.0098'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M44.5837 29.6289V33.1718L40.7505 39.048H48.0441L46.486 35.5908'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M22.5405 13.7617L44.5838 15.5141V25.8379'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M44.5839 29.6284C45.6345 29.6284 46.4862 28.7798 46.4862 27.7331C46.4862 26.6864 45.6345 25.8379 44.5839 25.8379C43.5333 25.8379 42.6816 26.6864 42.6816 27.7331C42.6816 28.7798 43.5333 29.6284 44.5839 29.6284Z'
+                stroke='#1ab69d'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+        </svg>
+    );
+};
+
+export default ScholarshipFacility;
diff --git a/src/svg/skilled-lecturers-2.js b/src/svg/skilled-lecturers-2.js
deleted file mode 100644
index 5ee29ae..0000000
--- a/src/svg/skilled-lecturers-2.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-
-const SkilledLecturersTwo = () => {
-  return (
-    <>
-      {/* <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> */}
-      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44 44" style={{ enableBackground: "new 0 0 44 44" }} xmlSpace="preserve">
-        <style type="text/css" jsx>
-          {`.st0{fill:none;stroke:#1ab69d;stroke-width:2;stroke-miterlimit:10;}
-	.st1{fill:none;stroke:#1ab69d;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
-	.st2{fill:none;stroke:#1ab69d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}`}
-        </style>
-        <g>
-          <circle className="st0" cx="11.88" cy="6.09" r="4.09" />
-          <path className="st0" d="M8.95,14.04l0.79,0.58c1.23,0.91,2.94,0.79,4.03-0.3l0,0c0.58-0.58,1.37-0.9,2.19-0.9h0
-		c2.19,0,4.3,0.87,5.85,2.42l0.83,0.83c0.29,0.29,0.68,0.45,1.08,0.45h3.34c1.41,0,2.55,1.14,2.55,2.55v0
-		c0,1.41-1.14,2.55-2.55,2.55h-4.83c-0.76,0-1.49-0.3-2.02-0.84l-1.83-1.83c-0.64-0.64-1.73-0.19-1.73,0.72V42h-4.76H7.07V31.56
-		c0-1.47-1.2-2.67-2.67-2.67h0c-1.11,0-2.02-0.9-2.02-2.02v-8.72c0-2.62,2.12-4.73,4.74-4.73h0C7.78,13.43,8.42,13.64,8.95,14.04z"
-          />
-          <line className="st1" x1="11.81" y1="41.19" x2="11.81" y2="27.07" />
-          <path className="st2" d="M19.21,2h20.76c1.16,0,2.11,0.94,2.11,2.11v21.56c0,1.16-0.94,2.11-2.11,2.11H20.76" />
-          <line className="st2" x1="23.29" y1="6.85" x2="34.96" y2="6.85" />
-          <line className="st2" x1="23.29" y1="11.67" x2="28.83" y2="11.67" />
-          <line className="st2" x1="34.61" y1="11.49" x2="28.97" y2="17.13" />
-          <line className="st1" x1="1.93" y1="42" x2="34.46" y2="42" />
-        </g>
-      </svg>
-
-    </>
-  );
-};
-
-export default SkilledLecturersTwo;
\ No newline at end of file
diff --git a/src/svg/skilled-lecturers-2.tsx b/src/svg/skilled-lecturers-2.tsx
new file mode 100644
index 0000000..ccffdd1
--- /dev/null
+++ b/src/svg/skilled-lecturers-2.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+const SkilledLecturersTwo = () => {
+    return (
+        <>
+            {/* <?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> */}
+            <svg
+                version='1.1'
+                id='Layer_1'
+                xmlns='http://www.w3.org/2000/svg'
+                xmlnsXlink='http://www.w3.org/1999/xlink'
+                x='0px'
+                y='0px'
+                viewBox='0 0 44 44'
+                // @ts-expect-error ts(2353)
+                style={{ enableBackground: 'new 0 0 44 44' }}
+                xmlSpace='preserve'
+            >
+                <style type='text/css' jsx>
+                    {`
+                        .st0 {
+                            fill: none;
+                            stroke: #1ab69d;
+                            stroke-width: 2;
+                            stroke-miterlimit: 10;
+                        }
+                        .st1 {
+                            fill: none;
+                            stroke: #1ab69d;
+                            stroke-width: 2;
+                            stroke-linecap: round;
+                            stroke-miterlimit: 10;
+                        }
+                        .st2 {
+                            fill: none;
+                            stroke: #1ab69d;
+                            stroke-width: 2;
+                            stroke-linecap: round;
+                            stroke-linejoin: round;
+                            stroke-miterlimit: 10;
+                        }
+                    `}
+                </style>
+                <g>
+                    <circle className='st0' cx='11.88' cy='6.09' r='4.09' />
+                    <path
+                        className='st0'
+                        d='M8.95,14.04l0.79,0.58c1.23,0.91,2.94,0.79,4.03-0.3l0,0c0.58-0.58,1.37-0.9,2.19-0.9h0
+		c2.19,0,4.3,0.87,5.85,2.42l0.83,0.83c0.29,0.29,0.68,0.45,1.08,0.45h3.34c1.41,0,2.55,1.14,2.55,2.55v0
+		c0,1.41-1.14,2.55-2.55,2.55h-4.83c-0.76,0-1.49-0.3-2.02-0.84l-1.83-1.83c-0.64-0.64-1.73-0.19-1.73,0.72V42h-4.76H7.07V31.56
+		c0-1.47-1.2-2.67-2.67-2.67h0c-1.11,0-2.02-0.9-2.02-2.02v-8.72c0-2.62,2.12-4.73,4.74-4.73h0C7.78,13.43,8.42,13.64,8.95,14.04z'
+                    />
+                    <line className='st1' x1='11.81' y1='41.19' x2='11.81' y2='27.07' />
+                    <path
+                        className='st2'
+                        d='M19.21,2h20.76c1.16,0,2.11,0.94,2.11,2.11v21.56c0,1.16-0.94,2.11-2.11,2.11H20.76'
+                    />
+                    <line className='st2' x1='23.29' y1='6.85' x2='34.96' y2='6.85' />
+                    <line className='st2' x1='23.29' y1='11.67' x2='28.83' y2='11.67' />
+                    <line className='st2' x1='34.61' y1='11.49' x2='28.97' y2='17.13' />
+                    <line className='st1' x1='1.93' y1='42' x2='34.46' y2='42' />
+                </g>
+            </svg>
+        </>
+    );
+};
+
+export default SkilledLecturersTwo;
diff --git a/src/svg/skilled-lecturers.js b/src/svg/skilled-lecturers.js
deleted file mode 100644
index 11a87ad..0000000
--- a/src/svg/skilled-lecturers.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-const SkilledLecturers = () => {
-  return (
-    <>
-
-      {/* <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> */}
-      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-        viewBox="0 0 44 44" style={{enableBackground:"new 0 0 44 44"}} xmlSpace="preserve">
-        <style type="text/css" jsx>
-          {`.st0{fill:none;stroke:#ee4a62;stroke-width:2;stroke-miterlimit:10;}
-	.st1{fill:none;stroke:#ee4a62;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
-	.st2{fill:none;stroke:#ee4a62;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}`}
-        </style>
-        <g>
-          <circle className="st0" cx="11.88" cy="6.09" r="4.09" />
-          <path className="st0" d="M8.95,14.04l0.79,0.58c1.23,0.91,2.94,0.79,4.03-0.3l0,0c0.58-0.58,1.37-0.9,2.19-0.9h0
-		c2.19,0,4.3,0.87,5.85,2.42l0.83,0.83c0.29,0.29,0.68,0.45,1.08,0.45h3.34c1.41,0,2.55,1.14,2.55,2.55v0
-		c0,1.41-1.14,2.55-2.55,2.55h-4.83c-0.76,0-1.49-0.3-2.02-0.84l-1.83-1.83c-0.64-0.64-1.73-0.19-1.73,0.72V42h-4.76H7.07V31.56
-		c0-1.47-1.2-2.67-2.67-2.67h0c-1.11,0-2.02-0.9-2.02-2.02v-8.72c0-2.62,2.12-4.73,4.74-4.73h0C7.78,13.43,8.42,13.64,8.95,14.04z"
-          />
-          <line className="st1" x1="11.81" y1="41.19" x2="11.81" y2="27.07" />
-          <path className="st2" d="M19.21,2h20.76c1.16,0,2.11,0.94,2.11,2.11v21.56c0,1.16-0.94,2.11-2.11,2.11H20.76" />
-          <line className="st2" x1="23.29" y1="6.85" x2="34.96" y2="6.85" />
-          <line className="st2" x1="23.29" y1="11.67" x2="28.83" y2="11.67" />
-          <line className="st2" x1="34.61" y1="11.49" x2="28.97" y2="17.13" />
-          <line className="st1" x1="1.93" y1="42" x2="34.46" y2="42" />
-        </g>
-      </svg>
-
-    </>
-  );
-};
-
-export default SkilledLecturers;
\ No newline at end of file
diff --git a/src/svg/skilled-lecturers.tsx b/src/svg/skilled-lecturers.tsx
new file mode 100644
index 0000000..5d7d5b9
--- /dev/null
+++ b/src/svg/skilled-lecturers.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+const SkilledLecturers = () => {
+    return (
+        <>
+            {/* <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> */}
+            <svg
+                version='1.1'
+                id='Layer_1'
+                xmlns='http://www.w3.org/2000/svg'
+                xmlnsXlink='http://www.w3.org/1999/xlink'
+                x='0px'
+                y='0px'
+                viewBox='0 0 44 44'
+                // @ts-expect-error ts(2353)
+                style={{ enableBackground: 'new 0 0 44 44' }}
+                xmlSpace='preserve'
+            >
+                <style type='text/css' jsx>
+                    {`
+                        .st0 {
+                            fill: none;
+                            stroke: #ee4a62;
+                            stroke-width: 2;
+                            stroke-miterlimit: 10;
+                        }
+                        .st1 {
+                            fill: none;
+                            stroke: #ee4a62;
+                            stroke-width: 2;
+                            stroke-linecap: round;
+                            stroke-miterlimit: 10;
+                        }
+                        .st2 {
+                            fill: none;
+                            stroke: #ee4a62;
+                            stroke-width: 2;
+                            stroke-linecap: round;
+                            stroke-linejoin: round;
+                            stroke-miterlimit: 10;
+                        }
+                    `}
+                </style>
+                <g>
+                    <circle className='st0' cx='11.88' cy='6.09' r='4.09' />
+                    <path
+                        className='st0'
+                        d='M8.95,14.04l0.79,0.58c1.23,0.91,2.94,0.79,4.03-0.3l0,0c0.58-0.58,1.37-0.9,2.19-0.9h0
+		c2.19,0,4.3,0.87,5.85,2.42l0.83,0.83c0.29,0.29,0.68,0.45,1.08,0.45h3.34c1.41,0,2.55,1.14,2.55,2.55v0
+		c0,1.41-1.14,2.55-2.55,2.55h-4.83c-0.76,0-1.49-0.3-2.02-0.84l-1.83-1.83c-0.64-0.64-1.73-0.19-1.73,0.72V42h-4.76H7.07V31.56
+		c0-1.47-1.2-2.67-2.67-2.67h0c-1.11,0-2.02-0.9-2.02-2.02v-8.72c0-2.62,2.12-4.73,4.74-4.73h0C7.78,13.43,8.42,13.64,8.95,14.04z'
+                    />
+                    <line className='st1' x1='11.81' y1='41.19' x2='11.81' y2='27.07' />
+                    <path
+                        className='st2'
+                        d='M19.21,2h20.76c1.16,0,2.11,0.94,2.11,2.11v21.56c0,1.16-0.94,2.11-2.11,2.11H20.76'
+                    />
+                    <line className='st2' x1='23.29' y1='6.85' x2='34.96' y2='6.85' />
+                    <line className='st2' x1='23.29' y1='11.67' x2='28.83' y2='11.67' />
+                    <line className='st2' x1='34.61' y1='11.49' x2='28.97' y2='17.13' />
+                    <line className='st1' x1='1.93' y1='42' x2='34.46' y2='42' />
+                </g>
+            </svg>
+        </>
+    );
+};
+
+export default SkilledLecturers;
diff --git a/src/svg/user-2.js b/src/svg/user-2.js
deleted file mode 100644
index 37ec4df..0000000
--- a/src/svg/user-2.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-const UserTwo = () => {
-  return (
-    <svg width="38" height="40" viewBox="0 0 45 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M22.5004 20.4568C26.6355 20.4568 29.9876 17.1309 29.9876 13.0282C29.9876 8.92549 26.6355 5.59961 22.5004 5.59961C18.3653 5.59961 15.0132 8.92549 15.0132 13.0282C15.0132 17.1309 18.3653 20.4568 22.5004 20.4568Z" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M32.7999 39.0468H12.2005C11.6821 39.0468 11.2598 38.6277 11.2598 38.1134V31.6182C11.2598 25.4563 16.2896 20.4658 22.5002 20.4658C28.7107 20.4658 33.7406 25.4563 33.7406 31.6182V38.123C33.7406 38.6277 33.3182 39.0468 32.7999 39.0468Z" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M25.6772 6.06643C26.6563 3.09501 29.4784 0.952148 32.7997 0.952148C36.9368 0.952148 40.2869 4.27596 40.2869 8.38072C40.2869 12.4855 36.9368 15.8093 32.7997 15.8093C31.6862 15.8093 30.6303 15.5712 29.68 15.1331" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M29.1714 16.4088C30.3137 16.0279 31.5327 15.8184 32.7998 15.8184C39.0103 15.8184 44.0402 20.8088 44.0402 26.9707V33.4755C44.0402 33.9898 43.6178 34.4088 43.0995 34.4088H33.9133" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M19.3229 6.06643C18.3342 3.09501 15.5217 0.952148 12.2004 0.952148C8.06325 0.952148 4.70361 4.27596 4.70361 8.38072C4.70361 12.4855 8.05366 15.8093 12.1908 15.8093C13.3043 15.8093 14.3602 15.5712 15.3105 15.1331" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M15.8288 16.4088C14.6865 16.0279 13.4674 15.8184 12.2004 15.8184C5.98982 15.8184 0.959961 20.8088 0.959961 26.9707V33.4755C0.959961 33.9898 1.38232 34.4088 1.90066 34.4088H11.0869" stroke="#f8941f" strokeWidth="2" strokeMiterlimit="10" />
-    </svg>
-  );
-};
-
-export default UserTwo;
\ No newline at end of file
diff --git a/src/svg/user-2.tsx b/src/svg/user-2.tsx
new file mode 100644
index 0000000..9b23641
--- /dev/null
+++ b/src/svg/user-2.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+const UserTwo = () => {
+    return (
+        <svg
+            width='38'
+            height='40'
+            viewBox='0 0 45 40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M22.5004 20.4568C26.6355 20.4568 29.9876 17.1309 29.9876 13.0282C29.9876 8.92549 26.6355 5.59961 22.5004 5.59961C18.3653 5.59961 15.0132 8.92549 15.0132 13.0282C15.0132 17.1309 18.3653 20.4568 22.5004 20.4568Z'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M32.7999 39.0468H12.2005C11.6821 39.0468 11.2598 38.6277 11.2598 38.1134V31.6182C11.2598 25.4563 16.2896 20.4658 22.5002 20.4658C28.7107 20.4658 33.7406 25.4563 33.7406 31.6182V38.123C33.7406 38.6277 33.3182 39.0468 32.7999 39.0468Z'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M25.6772 6.06643C26.6563 3.09501 29.4784 0.952148 32.7997 0.952148C36.9368 0.952148 40.2869 4.27596 40.2869 8.38072C40.2869 12.4855 36.9368 15.8093 32.7997 15.8093C31.6862 15.8093 30.6303 15.5712 29.68 15.1331'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M29.1714 16.4088C30.3137 16.0279 31.5327 15.8184 32.7998 15.8184C39.0103 15.8184 44.0402 20.8088 44.0402 26.9707V33.4755C44.0402 33.9898 43.6178 34.4088 43.0995 34.4088H33.9133'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M19.3229 6.06643C18.3342 3.09501 15.5217 0.952148 12.2004 0.952148C8.06325 0.952148 4.70361 4.27596 4.70361 8.38072C4.70361 12.4855 8.05366 15.8093 12.1908 15.8093C13.3043 15.8093 14.3602 15.5712 15.3105 15.1331'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M15.8288 16.4088C14.6865 16.0279 13.4674 15.8184 12.2004 15.8184C5.98982 15.8184 0.959961 20.8088 0.959961 26.9707V33.4755C0.959961 33.9898 1.38232 34.4088 1.90066 34.4088H11.0869'
+                stroke='#f8941f'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+        </svg>
+    );
+};
+
+export default UserTwo;
diff --git a/src/svg/user.js b/src/svg/user.js
deleted file mode 100644
index b34ece6..0000000
--- a/src/svg/user.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-const User = () => {
-  return (
-    <svg width="38" height="40" viewBox="0 0 45 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M22.5004 20.4568C26.6355 20.4568 29.9876 17.1309 29.9876 13.0282C29.9876 8.92549 26.6355 5.59961 22.5004 5.59961C18.3653 5.59961 15.0132 8.92549 15.0132 13.0282C15.0132 17.1309 18.3653 20.4568 22.5004 20.4568Z" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M32.7999 39.0468H12.2005C11.6821 39.0468 11.2598 38.6277 11.2598 38.1134V31.6182C11.2598 25.4563 16.2896 20.4658 22.5002 20.4658C28.7107 20.4658 33.7406 25.4563 33.7406 31.6182V38.123C33.7406 38.6277 33.3182 39.0468 32.7999 39.0468Z" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M25.6772 6.06643C26.6563 3.09501 29.4784 0.952148 32.7997 0.952148C36.9368 0.952148 40.2869 4.27596 40.2869 8.38072C40.2869 12.4855 36.9368 15.8093 32.7997 15.8093C31.6862 15.8093 30.6303 15.5712 29.68 15.1331" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M29.1714 16.4088C30.3137 16.0279 31.5327 15.8184 32.7998 15.8184C39.0103 15.8184 44.0402 20.8088 44.0402 26.9707V33.4755C44.0402 33.9898 43.6178 34.4088 43.0995 34.4088H33.9133" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M19.3229 6.06643C18.3342 3.09501 15.5217 0.952148 12.2004 0.952148C8.06325 0.952148 4.70361 4.27596 4.70361 8.38072C4.70361 12.4855 8.05366 15.8093 12.1908 15.8093C13.3043 15.8093 14.3602 15.5712 15.3105 15.1331" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" />
-      <path d="M15.8288 16.4088C14.6865 16.0279 13.4674 15.8184 12.2004 15.8184C5.98982 15.8184 0.959961 20.8088 0.959961 26.9707V33.4755C0.959961 33.9898 1.38232 34.4088 1.90066 34.4088H11.0869" stroke="#ffffff" strokeWidth="2" strokeMiterlimit="10" />
-    </svg>
-  );
-};
-
-export default User;
\ No newline at end of file
diff --git a/src/svg/user.tsx b/src/svg/user.tsx
new file mode 100644
index 0000000..9ca3169
--- /dev/null
+++ b/src/svg/user.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+const User = () => {
+    return (
+        <svg
+            width='38'
+            height='40'
+            viewBox='0 0 45 40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <path
+                d='M22.5004 20.4568C26.6355 20.4568 29.9876 17.1309 29.9876 13.0282C29.9876 8.92549 26.6355 5.59961 22.5004 5.59961C18.3653 5.59961 15.0132 8.92549 15.0132 13.0282C15.0132 17.1309 18.3653 20.4568 22.5004 20.4568Z'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M32.7999 39.0468H12.2005C11.6821 39.0468 11.2598 38.6277 11.2598 38.1134V31.6182C11.2598 25.4563 16.2896 20.4658 22.5002 20.4658C28.7107 20.4658 33.7406 25.4563 33.7406 31.6182V38.123C33.7406 38.6277 33.3182 39.0468 32.7999 39.0468Z'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M25.6772 6.06643C26.6563 3.09501 29.4784 0.952148 32.7997 0.952148C36.9368 0.952148 40.2869 4.27596 40.2869 8.38072C40.2869 12.4855 36.9368 15.8093 32.7997 15.8093C31.6862 15.8093 30.6303 15.5712 29.68 15.1331'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M29.1714 16.4088C30.3137 16.0279 31.5327 15.8184 32.7998 15.8184C39.0103 15.8184 44.0402 20.8088 44.0402 26.9707V33.4755C44.0402 33.9898 43.6178 34.4088 43.0995 34.4088H33.9133'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M19.3229 6.06643C18.3342 3.09501 15.5217 0.952148 12.2004 0.952148C8.06325 0.952148 4.70361 4.27596 4.70361 8.38072C4.70361 12.4855 8.05366 15.8093 12.1908 15.8093C13.3043 15.8093 14.3602 15.5712 15.3105 15.1331'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+            <path
+                d='M15.8288 16.4088C14.6865 16.0279 13.4674 15.8184 12.2004 15.8184C5.98982 15.8184 0.959961 20.8088 0.959961 26.9707V33.4755C0.959961 33.9898 1.38232 34.4088 1.90066 34.4088H11.0869'
+                stroke='#ffffff'
+                strokeWidth='2'
+                strokeMiterlimit='10'
+            />
+        </svg>
+    );
+};
+
+export default User;
diff --git a/src/ui/paginatio-2.jsx b/src/ui/paginatio-2.jsx
deleted file mode 100644
index b6067b7..0000000
--- a/src/ui/paginatio-2.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-const PaginationTwo = () => {
-    return (
-        <>
-            <li><a href="#" aria-label="Previous"><i className="icon-west"></i></a></li>
-            <li className="active"><a href="#">1</a></li>
-            <li><a href="#">2</a></li>
-            <li><a href="#">3</a></li>
-            <li className="more-next"><a href="#"></a></li>
-            <li><a href="#">8</a></li>
-            <li><a href="#" aria-label="Next"><i className="icon-east"></i></a></li>
-            </>
-    )
-}
-
-export default PaginationTwo;
\ No newline at end of file
diff --git a/src/ui/paginatio-2.tsx b/src/ui/paginatio-2.tsx
new file mode 100644
index 0000000..867bf20
--- /dev/null
+++ b/src/ui/paginatio-2.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const PaginationTwo = () => {
+    return (
+        <>
+            <li>
+                <a href='#' aria-label='Previous'>
+                    <i className='icon-west'></i>
+                </a>
+            </li>
+            <li className='active'>
+                <a href='#'>1</a>
+            </li>
+            <li>
+                <a href='#'>2</a>
+            </li>
+            <li>
+                <a href='#'>3</a>
+            </li>
+            <li className='more-next'>
+                <a href='#'></a>
+            </li>
+            <li>
+                <a href='#'>8</a>
+            </li>
+            <li>
+                <a href='#' aria-label='Next'>
+                    <i className='icon-east'></i>
+                </a>
+            </li>
+        </>
+    );
+};
+
+export default PaginationTwo;
diff --git a/src/ui/pagination.jsx b/src/ui/pagination.jsx
deleted file mode 100644
index 786b229..0000000
--- a/src/ui/pagination.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import ReactPaginate from "react-paginate";
-
-const Pagination = ({ handlePageClick, pageCount, focusPage }) => {
-    return (
-        <ReactPaginate
-            nextLabel={
-                <>
-                    <i className="icon-east"></i>
-                </>
-            }
-            onPageChange={handlePageClick}
-            forcePage={focusPage}
-            pageRangeDisplayed={3}
-            marginPagesDisplayed={2}
-            pageCount={pageCount}
-            previousLabel={
-                <>
-                    <i className="icon-west"></i>
-                </>
-            }
-            pageClassName="page-items"
-            pageLinkClassName="page-links"
-            previousClassName="page-items"
-            previousLinkClassName="page-links"
-            nextClassName="page-items"
-            nextLinkClassName="page-links"
-            breakLabel="..."
-            breakClassName="page-items"
-            breakLinkClassName="page-links"
-            containerClassName="edu-pagination"
-            activeClassName="active"
-            renderOnZeroPageCount={null}
-        />
-    );
-};
-
-export default Pagination;
diff --git a/src/ui/pagination.tsx b/src/ui/pagination.tsx
new file mode 100644
index 0000000..4138b29
--- /dev/null
+++ b/src/ui/pagination.tsx
@@ -0,0 +1,43 @@
+import ReactPaginate from 'react-paginate';
+
+type PaginationProps = {
+    handlePageClick?: (selectedItem: { selected: number }) => void;
+    pageCount: number;
+    focusPage?: number;
+};
+
+const Pagination = ({ handlePageClick, pageCount, focusPage }: PaginationProps) => {
+    return (
+        <ReactPaginate
+            nextLabel={
+                <>
+                    <i className='icon-east'></i>
+                </>
+            }
+            onPageChange={handlePageClick}
+            forcePage={focusPage}
+            pageRangeDisplayed={3}
+            marginPagesDisplayed={2}
+            pageCount={pageCount}
+            previousLabel={
+                <>
+                    <i className='icon-west'></i>
+                </>
+            }
+            pageClassName='page-items'
+            pageLinkClassName='page-links'
+            previousClassName='page-items'
+            previousLinkClassName='page-links'
+            nextClassName='page-items'
+            nextLinkClassName='page-links'
+            breakLabel='...'
+            breakClassName='page-items'
+            breakLinkClassName='page-links'
+            containerClassName='edu-pagination'
+            activeClassName='active'
+            renderOnZeroPageCount={null}
+        />
+    );
+};
+
+export default Pagination;
diff --git a/src/ui/scroll-to-top.jsx b/src/ui/scroll-to-top.jsx
deleted file mode 100644
index 8dcf5a5..0000000
--- a/src/ui/scroll-to-top.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useEffect } from 'react';
-import useScrollToTop from '../hooks/use-scroll-to-top';
-
-const ScrollToTop = () => {
-    const { stick, onClickHandler } = useScrollToTop();
-
-    useEffect( () => {
-        const progressPath = document.querySelector( '.rn-progress-parent path' );
-        const pathLength = progressPath.getTotalLength();
-        progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
-        progressPath.style.strokeDasharray = `${pathLength} ${pathLength}`;
-        progressPath.style.strokeDashoffset = pathLength;
-        progressPath.getBoundingClientRect();
-        progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
-        const updateProgress = () => {
-            const scroll = window.scrollY;
-            const docHeight = document.body.offsetHeight;
-            const winHeight = window.innerHeight;
-            const height = docHeight - winHeight;
-            const progress = pathLength - ( scroll * pathLength ) / height;
-            progressPath.style.strokeDashoffset = progress;
-        };
-        updateProgress();
-        window.addEventListener( 'scroll', updateProgress );
-    });
-
-    return (
-        <div
-            className={`rn-progress-parent ${ stick && "rn-backto-top-active"}`}
-            role="button"
-            onClick={onClickHandler}
-            onKeyUp={(e) => e}
-            tabIndex={-1}
-        >
-            <svg
-                className="rn-back-circle svg-inner"
-                width="100%"
-                height="100%"
-                viewBox="-1 -1 102 102"
-            >
-                <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
-            </svg>
-        </div>
-    )
-}
-
-export default ScrollToTop;
diff --git a/src/ui/scroll-to-top.tsx b/src/ui/scroll-to-top.tsx
new file mode 100644
index 0000000..25cda5e
--- /dev/null
+++ b/src/ui/scroll-to-top.tsx
@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+import useScrollToTop from '../hooks/use-scroll-to-top';
+
+const ScrollToTop = () => {
+    const { stick, onClickHandler } = useScrollToTop();
+
+    useEffect(() => {
+        const progressPath = document.querySelector<SVGPathElement>(
+            '.rn-progress-parent path'
+        );
+        const pathLength = progressPath.getTotalLength();
+        progressPath.style.transition = progressPath.style.webkitTransition = 'none';
+        progressPath.style.strokeDasharray = `${pathLength} ${pathLength}`;
+        progressPath.style.strokeDashoffset = pathLength.toString();
+        progressPath.getBoundingClientRect();
+        progressPath.style.transition = progressPath.style.webkitTransition =
+            'stroke-dashoffset 10ms linear';
+        const updateProgress = () => {
+            const scroll = window.scrollY;
+            const docHeight = document.body.offsetHeight;
+            const winHeight = window.innerHeight;
+            const height = docHeight - winHeight;
+            const progress = pathLength - (scroll * pathLength) / height;
+            progressPath.style.strokeDashoffset = progress.toString();
+        };
+        updateProgress();
+        window.addEventListener('scroll', updateProgress);
+    });
+
+    return (
+        <div
+            className={`rn-progress-parent ${stick && 'rn-backto-top-active'}`}
+            role='button'
+            onClick={onClickHandler}
+            onKeyUp={e => e}
+            tabIndex={-1}
+        >
+            <svg
+                className='rn-back-circle svg-inner'
+                width='100%'
+                height='100%'
+                viewBox='-1 -1 102 102'
+            >
+                <path d='M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98' />
+            </svg>
+        </div>
+    );
+};
+
+export default ScrollToTop;
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 581894f..2eac483 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,12 +1,10 @@
-const API_URL = process.env.WORDPRESS_API_URL
+const API_URL = process.env.WORDPRESS_API_URL;
 
-async function fetchAPI(query = '', {variables}: Record<string, any> = {}) {
-    const headers = {'Content-Type': 'application/json'}
+async function fetchAPI(query = '', { variables }: Record<string, any> = {}) {
+    const headers = { 'Content-Type': 'application/json' };
 
     if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {
-        headers[
-            'Authorization'
-            ] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`
+        headers['Authorization'] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`;
     }
 
     // WPGraphQL Plugin must be enabled
@@ -17,15 +15,15 @@ async function fetchAPI(query = '', {variables}: Record<string, any> = {}) {
             query,
             variables,
         }),
-    })
+    });
 
-    const json = await res.json()
+    const json = await res.json();
     if (json.errors) {
-        console.error(json.errors)
-        throw new Error('Failed to fetch API')
+        console.error(json.errors);
+        throw new Error('Failed to fetch API');
     }
 
-    return json.data
+    return json.data;
 }
 
 export async function getPreviewPost(id, idType = 'DATABASE_ID') {
@@ -39,10 +37,10 @@ export async function getPreviewPost(id, idType = 'DATABASE_ID') {
       }
     }`,
         {
-            variables: {id, idType},
+            variables: { id, idType },
         }
-    )
-    return data.post
+    );
+    return data.post;
 }
 
 export async function getAllPostsWithSlug() {
@@ -56,8 +54,8 @@ export async function getAllPostsWithSlug() {
         }
       }
     }
-  `)
-    return data?.posts
+  `);
+    return data?.posts;
 }
 
 export async function getAllPostsForHome(preview) {
@@ -97,20 +95,18 @@ export async function getAllPostsForHome(preview) {
                 preview,
             },
         }
-    )
+    );
 
-    return data?.posts
+    return data?.posts;
 }
 
 export async function getPostAndMorePosts(slug, preview, previewData) {
-    const postPreview = preview && previewData?.post
+    const postPreview = preview && previewData?.post;
     // The slug may be the id of an unpublished post
-    const isId = Number.isInteger(Number(slug))
-    const isSamePost = isId
-        ? Number(slug) === postPreview.id
-        : slug === postPreview.slug
-    const isDraft = isSamePost && postPreview?.status === 'draft'
-    const isRevision = isSamePost && postPreview?.status === 'publish'
+    const isId = Number.isInteger(Number(slug));
+    const isSamePost = isId ? Number(slug) === postPreview.id : slug === postPreview.slug;
+    const isDraft = isSamePost && postPreview?.status === 'draft';
+    const isRevision = isSamePost && postPreview?.status === 'publish';
     const data = await fetchAPI(
         `
     fragment AuthorFields on User {
@@ -192,30 +188,29 @@ export async function getPostAndMorePosts(slug, preview, previewData) {
                 idType: isDraft ? 'DATABASE_ID' : 'SLUG',
             },
         }
-    )
+    );
 
     // Draft posts may not have an slug
-    if (isDraft) data.post.slug = postPreview.id
+    if (isDraft) data.post.slug = postPreview.id;
     // Apply a revision (changes in a published post)
     if (isRevision && data.post.revisions) {
-        const revision = data.post.revisions.edges[0]?.node
+        const revision = data.post.revisions.edges[0]?.node;
 
-        if (revision) Object.assign(data.post, revision)
-        delete data.post.revisions
+        if (revision) Object.assign(data.post, revision);
+        delete data.post.revisions;
     }
 
     // Filter out the main post
-    data.posts.edges = data.posts.edges.filter(({node}) => node.slug !== slug)
+    data.posts.edges = data.posts.edges.filter(({ node }) => node.slug !== slug);
     // If there are still 3 posts, remove the last one
-    if (data.posts.edges.length > 2) data.posts.edges.pop()
+    if (data.posts.edges.length > 2) data.posts.edges.pop();
 
-    return data
+    return data;
 }
 
-
-export async function getAllCourses(preview) {
+export async function getAllCourses(preview?) {
     const data = await fetchAPI(
-`
+        `
 query AllCourses {
   courses {
     nodes {
@@ -233,14 +228,14 @@ query AllCourses {
                 preview,
             },
         }
-    )
+    );
 
-    return data?.courses
+    return data?.courses;
 }
 
-export async function getCourseData(id, preview) {
+export async function getCourseData(id, preview?) {
     const data = await fetchAPI(
-`
+        `
 query CourseDetail ($id: ID!) {
   course(id: $id) {
     courseId
@@ -257,8 +252,7 @@ query CourseDetail ($id: ID!) {
                 preview,
             },
         }
-    )
+    );
 
-    return data?.course
+    return data?.course;
 }
-
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index ce40e53..ffc2e06 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-wordpress'
-export const CMS_NAME = 'WordPress'
-export const CMS_URL = 'https://wordpress.org'
+export const EXAMPLE_PATH = 'cms-wordpress';
+export const CMS_NAME = 'WordPress';
+export const CMS_URL = 'https://wordpress.org';
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**WordPress**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%2C%253C%253Fxml+version%3D%271.0%27+encoding%3D%27UTF-8%27%253F%253E%253Csvg+preserveAspectRatio%3D%27xMidYMid%27+version%3D%271.1%27+viewBox%3D%270+0+256+255%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%253E%253Cg+fill%3D%27%2523464342%27%253E%253Cpath+d%3D%27m18.124+127.5c0+43.295+25.161+80.711+61.646+98.441l-52.176-142.96c-6.0691+13.603-9.4699+28.657-9.4699+44.515zm183.22-5.5196c0-13.518-4.8557-22.88-9.0204-30.166-5.5446-9.01-10.742-16.64-10.742-25.65+0-10.055+7.6259-19.414+18.367-19.414+0.48494+0+0.94491+0.060358+1.4174+0.087415-19.46-17.828-45.387-28.714-73.863-28.714-38.213+0-71.832+19.606-91.39+49.302+2.5662+0.077008+4.9847+0.13112+7.039+0.13112+11.441+0+29.151-1.3882+29.151-1.3882+5.8963-0.34758+6.5915+8.3127+0.7014+9.01+0+0-5.9255+0.69724-12.519+1.0427l39.832+118.48+23.937-71.79-17.042-46.692c-5.8901-0.3455-11.47-1.0427-11.47-1.0427-5.8942-0.3455-5.2033-9.3575+0.69099-9.01+0+0+18.064+1.3882+28.811+1.3882+11.439+0+29.151-1.3882+29.151-1.3882+5.9005-0.34758+6.5936+8.3127+0.7014+9.01+0+0-5.938+0.69724-12.519+1.0427l39.528+117.58+10.91-36.458c4.7287-15.129+8.3273-25.995+8.3273-35.359zm-71.921+15.087l-32.818+95.363c9.7988+2.8805+20.162+4.4561+30.899+4.4561+12.738+0+24.953-2.202+36.323-6.2002-0.29346-0.46829-0.55987-0.96572-0.77841-1.5069l-33.625-92.112zm94.058-62.046c0.47037+3.4841+0.73678+7.2242+0.73678+11.247+0+11.1-2.073+23.577-8.3169+39.178l-33.411+96.599c32.518-18.963+54.391-54.193+54.391-94.545+0.002081-19.017-4.8557-36.899-13.399-52.48zm-95.977-75.023c-70.304+0-127.5+57.196-127.5+127.5+0+70.313+57.2+127.51+127.5+127.51+70.302+0+127.51-57.194+127.51-127.51-0.002082-70.304-57.209-127.5-127.51-127.5zm0+249.16c-67.08+0-121.66-54.578-121.66-121.66+0-67.08+54.576-121.65+121.66-121.65+67.078+0+121.65+54.574+121.65+121.65+0+67.084-54.574+121.66-121.65+121.66z%27%2F%253E%253C%2Fg%253E%253C%2Fsvg%253E'
+    'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**WordPress**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%2C%253C%253Fxml+version%3D%271.0%27+encoding%3D%27UTF-8%27%253F%253E%253Csvg+preserveAspectRatio%3D%27xMidYMid%27+version%3D%271.1%27+viewBox%3D%270+0+256+255%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%253E%253Cg+fill%3D%27%2523464342%27%253E%253Cpath+d%3D%27m18.124+127.5c0+43.295+25.161+80.711+61.646+98.441l-52.176-142.96c-6.0691+13.603-9.4699+28.657-9.4699+44.515zm183.22-5.5196c0-13.518-4.8557-22.88-9.0204-30.166-5.5446-9.01-10.742-16.64-10.742-25.65+0-10.055+7.6259-19.414+18.367-19.414+0.48494+0+0.94491+0.060358+1.4174+0.087415-19.46-17.828-45.387-28.714-73.863-28.714-38.213+0-71.832+19.606-91.39+49.302+2.5662+0.077008+4.9847+0.13112+7.039+0.13112+11.441+0+29.151-1.3882+29.151-1.3882+5.8963-0.34758+6.5915+8.3127+0.7014+9.01+0+0-5.9255+0.69724-12.519+1.0427l39.832+118.48+23.937-71.79-17.042-46.692c-5.8901-0.3455-11.47-1.0427-11.47-1.0427-5.8942-0.3455-5.2033-9.3575+0.69099-9.01+0+0+18.064+1.3882+28.811+1.3882+11.439+0+29.151-1.3882+29.151-1.3882+5.9005-0.34758+6.5936+8.3127+0.7014+9.01+0+0-5.938+0.69724-12.519+1.0427l39.528+117.58+10.91-36.458c4.7287-15.129+8.3273-25.995+8.3273-35.359zm-71.921+15.087l-32.818+95.363c9.7988+2.8805+20.162+4.4561+30.899+4.4561+12.738+0+24.953-2.202+36.323-6.2002-0.29346-0.46829-0.55987-0.96572-0.77841-1.5069l-33.625-92.112zm94.058-62.046c0.47037+3.4841+0.73678+7.2242+0.73678+11.247+0+11.1-2.073+23.577-8.3169+39.178l-33.411+96.599c32.518-18.963+54.391-54.193+54.391-94.545+0.002081-19.017-4.8557-36.899-13.399-52.48zm-95.977-75.023c-70.304+0-127.5+57.196-127.5+127.5+0+70.313+57.2+127.51+127.5+127.51+70.302+0+127.51-57.194+127.51-127.51-0.002082-70.304-57.209-127.5-127.51-127.5zm0+249.16c-67.08+0-121.66-54.578-121.66-121.66+0-67.08+54.576-121.65+121.66-121.65+67.078+0+121.65+54.574+121.65+121.65+0+67.084-54.574+121.66-121.65+121.66z%27%2F%253E%253C%2Fg%253E%253C%2Fsvg%253E';
diff --git a/src/utils/jquery.js b/src/utils/jquery.js
deleted file mode 100644
index cd40398..0000000
--- a/src/utils/jquery.js
+++ /dev/null
@@ -1,32 +0,0 @@
-if (typeof window !== 'undefined') {
-
-    window.$ = window.jQuery = require('jquery');
-
-
-    $(document).ready(function() {
-
-
-        setTimeout(function() {            // Change the h1 text
-
-            $('h5').text("TST Prep's Writing Evaluation Demo 1");
-
-            // Change placeholder text for textarea elements
-            $('textarea[name="task"]').attr('placeholder', 'Paste your TOEFL integrated writing task here').css('margin-bottom', '30px');
-            $('textarea[name="essay"]').attr('placeholder', 'Paste or write your essay here');
-
-            // Move the task textarea and its label before the essay textarea
-            var taskTextArea = $('textarea[name="task"]');
-            var taskLabel = $('label[for="task"]');
-            var essayTextArea = $('textarea[name="essay"]');
-            var essayLabel = $('label[for="essay"]');
-
-            // Reorder the textareas: Move the task textarea and label before the essay label
-            essayLabel.before(taskTextArea);
-            taskTextArea.before(taskLabel);
-
-
-        }, 700);
-    });
-
-
-}
diff --git a/src/utils/jquery.ts b/src/utils/jquery.ts
new file mode 100644
index 0000000..f07845e
--- /dev/null
+++ b/src/utils/jquery.ts
@@ -0,0 +1,8 @@
+// @ts-nocheck
+
+if (typeof window !== 'undefined') {
+    // Ensure jQuery is available globally in the window object, a necessary step if jQuery is being used in a React project.
+    window.$ = window.jQuery = require('jquery');
+
+    $(document).ready(function () {});
+}
diff --git a/src/utils/localstorage.js b/src/utils/localstorage.js
deleted file mode 100644
index 342a8b5..0000000
--- a/src/utils/localstorage.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export const setLocalStorage = (name, items) => {
-    localStorage.setItem(name, JSON.stringify(items));
-}
-export const getLocalStorage = (name) => {
-    const data = localStorage.getItem(name);
-    if (data) {
-        return JSON.parse(data);
-    } else {
-        localStorage.setItem(name, JSON.stringify([]));
-        return [];
-    }
-}
\ No newline at end of file
diff --git a/src/utils/localstorage.ts b/src/utils/localstorage.ts
new file mode 100644
index 0000000..50af81e
--- /dev/null
+++ b/src/utils/localstorage.ts
@@ -0,0 +1,18 @@
+export const setLocalStorage = (name: string, items: any) => {
+    if (typeof window === 'undefined') return;
+    localStorage.setItem(name, JSON.stringify(items));
+};
+
+export const getLocalStorage = <T = any>(name: string): T | undefined => {
+    if (typeof window === 'undefined') return;
+    const data = localStorage.getItem(name);
+    if (data) {
+        return JSON.parse(data) as T;
+    }
+    return undefined;
+};
+
+export const removeLocalStorage = (name: string) => {
+    if (typeof window === 'undefined') return;
+    localStorage.removeItem(name);
+};
diff --git a/src/utils/time.js b/src/utils/time.ts
similarity index 54%
rename from src/utils/time.js
rename to src/utils/time.ts
index 7b6de7e..fe94744 100644
--- a/src/utils/time.js
+++ b/src/utils/time.ts
@@ -1,11 +1,18 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 
 const msInSecond = 1000;
 const msInMinute = 60 * 1000;
 const msInAHour = 60 * msInMinute;
 const msInADay = 24 * msInAHour;
 
-const getPartsofTimeDuration = (duration) => {
+type TimeParts<T extends string | number> = {
+    days: T;
+    hours: T;
+    minutes: T;
+    seconds: T;
+};
+
+const getPartsofTimeDuration = (duration: number): TimeParts<number> => {
     const days = Math.floor(duration / msInADay);
     const hours = Math.floor((duration % msInADay) / msInAHour);
     const minutes = Math.floor((duration % msInAHour) / msInMinute);
@@ -13,24 +20,29 @@ const getPartsofTimeDuration = (duration) => {
     return { days, hours, minutes, seconds };
 };
 
-const Time = (endDateTime) => {
-    const date = new Date().toLocaleTimeString()
+const formatNumber = (n: number): string => n.toString().padStart(2, '0');
+
+const formatTimeParts = (timeParts: TimeParts<number>): TimeParts<string> => ({
+    days: formatNumber(timeParts.days),
+    hours: formatNumber(timeParts.hours),
+    minutes: formatNumber(timeParts.minutes),
+    seconds: formatNumber(timeParts.seconds),
+});
+
+const Time = endDateTime => {
+    const date = new Date().toLocaleTimeString();
     const [time, setTime] = useState(date);
 
     const now = Date.now(); // Number of milliseconds from begining of time
     const future = new Date(endDateTime);
     const timeDif = future.getTime() - now;
-    let timeParts = getPartsofTimeDuration(timeDif);
-    timeParts.days = timeParts.days <= 9 ? `0${timeParts.days}` : timeParts.days;
-    timeParts.minutes = timeParts.minutes <= 9 ? `0${timeParts.minutes}` : timeParts.minutes;
-    timeParts.hours = timeParts.hours <= 9 ? `0${timeParts.hours}` : timeParts.hours;
-    timeParts.seconds = timeParts.seconds <= 9 ? `0${timeParts.seconds}` : timeParts.seconds;
+    let timeParts = formatTimeParts(getPartsofTimeDuration(timeDif));
 
     useEffect(() => {
         const timeout = setTimeout(() => {
             const date = new Date();
             setTime(date.toLocaleTimeString());
-        }, 1000 );
+        }, 1000);
 
         return () => {
             clearTimeout(timeout);
@@ -38,5 +50,5 @@ const Time = (endDateTime) => {
     }, [time]);
 
     return timeParts;
-}
-export default Time
\ No newline at end of file
+};
+export default Time;
diff --git a/src/utils/validation-schema.js b/src/utils/validation-schema.js
deleted file mode 100644
index d8e8a14..0000000
--- a/src/utils/validation-schema.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as Yup from 'yup';
-
-export const registerSchema = Yup.object().shape({
-    name: Yup.string().required().label( 'Name' ),
-    email: Yup.string().required().email().label( 'Email' ),
-    password: Yup.string().required().min(6).label( 'Password' ),
-    terms:Yup.bool().oneOf([true,'You need to accept the terms and conditions'])
-});
-
-export const loginSchema = Yup.object().shape({
-    email: Yup.string().required().email().label( 'Email' ),
-    password: Yup.string().required().min(6).label( 'Password' )
-});
-
-export const blogCommentSchema = Yup.object().shape({
-    name: Yup.string().required().label( 'Name' ),
-    email: Yup.string().required().email().label( 'Email' ),
-    msg: Yup.string().required().min(20).label( 'Message' )
-});
-
-export const contactSchema = Yup.object().shape({
-    name: Yup.string().required().label( 'Name' ),
-    email: Yup.string().required().email().label( 'Email' ),
-    phone: Yup.string().required().min(11).label( 'Phone' ),
-    msg: Yup.string().required().min(20).label( 'Message' )
-});
-
-export const courseSchema = Yup.object().shape({
-    title: Yup.string().required().label( 'Title' ),
-    name: Yup.string().required().label( 'Name' ),
-    email: Yup.string().required().email().label( 'Email' ),
-    msg: Yup.string().required().min(20).label( 'Summery' )
-});
\ No newline at end of file
diff --git a/src/utils/validation-schema.ts b/src/utils/validation-schema.ts
new file mode 100644
index 0000000..ec0034f
--- /dev/null
+++ b/src/utils/validation-schema.ts
@@ -0,0 +1,33 @@
+import * as Yup from 'yup';
+
+export const registerSchema = Yup.object().shape({
+    name: Yup.string().required().label('Name'),
+    email: Yup.string().required().email().label('Email'),
+    password: Yup.string().required().min(6).label('Password'),
+    terms: Yup.bool().oneOf([true], 'You need to accept the terms and conditions'),
+});
+
+export const loginSchema = Yup.object().shape({
+    email: Yup.string().required().email().label('Email'),
+    password: Yup.string().required().min(6).label('Password'),
+});
+
+export const blogCommentSchema = Yup.object().shape({
+    name: Yup.string().required().label('Name'),
+    email: Yup.string().required().email().label('Email'),
+    msg: Yup.string().required().min(20).label('Message'),
+});
+
+export const contactSchema = Yup.object().shape({
+    name: Yup.string().required().label('Name'),
+    email: Yup.string().required().email().label('Email'),
+    phone: Yup.string().required().min(11).label('Phone'),
+    msg: Yup.string().required().min(20).label('Message'),
+});
+
+export const courseSchema = Yup.object().shape({
+    title: Yup.string().required().label('Title'),
+    name: Yup.string().required().label('Name'),
+    email: Yup.string().required().email().label('Email'),
+    msg: Yup.string().required().min(20).label('Summery'),
+});
diff --git a/tsconfig.json b/tsconfig.json
index 8aece21..0094373 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,30 +1,20 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "incremental": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "moduleResolution": "node"
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+    "compilerOptions": {
+        "target": "es2015",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": false,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "incremental": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "moduleResolution": "node"
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["node_modules"]
 }