feat: finisheed preview page overflow

frontend/src/components/Preview.tsx

-import { Card, Carousel, Divider, Image, Space } from "antd";
+import {
+  Card,
+  Carousel,
+  Col,
+  Divider,
+  Grid,
+  Image,
+  Menu,
+  Row,
+  Space,
+} from "antd";
 import Meta from "antd/lib/card/Meta";
 import Title from "antd/lib/skeleton/Title";
 import React from "react";
@@ -237,51 +247,55 @@ export const cardsDataExample2: MovieIO[] = [
 ];
 
 const Preview: React.FC = () => (
-  <Space className="preview" direction="vertical"  style={{display: "flex", paddingTop:"2%"}}>
-    <Card title="Popular movies" >
-    <Space style={{ display: 'flex', padding: "5 %", justifyContent: "flex-end", width:"fit-content", overflow: "auto"}}>
-      
-      {cardsDataExample.map((movie) => {
-        return (
-          <>
-            <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>
-          </>
-        );
-      })}
-    </Space>
+  <Space
+    className="preview"
+    direction="vertical"
+    style={{ display: "flex", paddingTop: "2%" }}
+  >
+    <Card title="Editor's picks">
+      <Row justify="space-evenly" gutter={50}>
+        {cardsDataExample.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>
-    <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>
+    <Divider />
+
+    <Card title="Recent movies">
+      <Row justify="space-evenly"   gutter={50}>
+        {cardsDataExample.map((movie) => {
+          return (
+            <Col flex={1} style={{display: "flex"}}>
+              <Link to={`/movie/${movie.id}`} style={{alignSelf: "center"}}>
+                <Card
+                  hoverable
+                  style={{
+                    width: "240px",
+                    alignSelf: "center",
+                  }}
+                  cover={<img alt={movie.name} src={movie.picture} />}
+                >
+                  <Meta title={movie.name} description={movie.originalName} />
+                </Card>
+              </Link>
+            </Col>
+          );
+        })}
+      </Row>
     </Card>
   </Space>
 );