feat: main page recent movies style sync

frontend/src/components/Preview.tsx

@@ -200,25 +200,25 @@ export const Preview: React.FC = () => {
     <Divider/>
 
     <Card title="Recent movies" >
-    <Space style={{ display: 'flex', padding: "5 %", justifyContent: "flex-end", width:"fit-content", overflow: "auto"}}>
-    {cardsDataExample2.map((movie) => {
-        return (
-          <>
-            <Link to={`/movie/${movie.id}`}>
-              <Card
-                hoverable
-                style={{
-                  width: 240,
-                }}
-                cover={<img alt={movie.name} src={movie.picture} />}
-              >
-                <Meta title={movie.name} description={movie.originalName} />
-              </Card>
-            </Link>
-          </>
-        );
-      })}
-    </Space>
+    <Row justify="space-evenly" gutter={50}>
+        {cardsDataExample2.map((movie) => {
+          return (
+            <Col flex={1}>
+              <Link to={`/movie/${movie.id}`}>
+                <Card
+                  hoverable
+                  style={{
+                    width: "240px",
+                  }}
+                  cover={<img alt={movie.name} src={movie.picture} />}
+                >
+                  <Meta title={movie.name} description={movie.originalName} />
+                </Card>
+              </Link>
+            </Col>
+          );
+        })}
+      </Row>
     </Card>
   </Space>
 )};