ui updating: in progress

src/App.tsx

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { Redirect, Route, Switch, useHistory } from "react-router-dom";
 
 import { Header } from "./components/header/header";
-import { Demos } from "./components/demos/demos";
+import { Card } from "./components/demos/Card";
 import { Main } from "./components/Main/Main";
 import { PlayerComponent } from "./components/playerComponent/playerComponent";
 
@@ -45,14 +45,14 @@ const App: React.FC = () => {
       <Route exact path="/">
         <Header></Header>
         <div className="main">
-          <h3 className="demos__tittle">{t("demo-title")}</h3>
-          <div className="demo__container">
+          <h3 className="card-title">{t("demo-title")}</h3>
+          <div className="card-container">
             {cards.map((i: ICards) => (
-              <Demos
+              <Card
                 onClick={() => handleCards(i)}
                 key={i._id}
                 item={i}
-              ></Demos>
+              ></Card>
             ))}
           </div>
         </div>
@@ -60,11 +60,9 @@ const App: React.FC = () => {
       <Route path="/connect-page">
         {currentCard ? (
           <div className="background">
-            <div className="blur">
               <Header></Header>
               <div className="content__container">
                 <Main></Main>
-              </div>
             </div>
           </div>
         ) : (