сделал карточку

src/components/Card/Card.module.css

+.Card {
+    min-width: 320;
+    min-height: 100px;
+    background-color: #F1F2F6;
+    border: 1px solid black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.CardImage {
+    border-radius: 5px;
+}
+
+.CardInfo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+}
+
+.CardCountry {
+    display: flex;
+    gap: 5px;
+}
+
+.Country {
+    padding: 5px;
+    background: #193B670D;
+    border-radius: 5px;
+}
+
+.Sender {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.SenderInfo {
+    border: 1px solid black;
+    padding: 3px;
+    border-radius: 5px;
+}
+
+.PriceDiv {
+    display: flex;
+    justify-content: center;
+}
+
+.Price {
+    font-size: 25px;
+    font-weight: bold;
+}
\ No newline at end of file

src/components/Card/Card.tsx

+import Image from "next/image"
+import image from '../../../public/image.jpg'
+import styles from './Card.module.css'
+import CardButton from "../UI/CardButton/CardButton"
+
+type Props = {
+    url: string
+    price: string
+}
+
+const Card = ({url, price}: Props) => {
+    return (
+        <div className={styles.Card}>
+            <Image
+                className={styles.CardImage}
+                src={url}
+                width={310}
+                height={191}
+                alt='image'
+                priority
+            />
+            <div className={styles.CardInfo}>
+                <div className={styles.CardCountry}>
+                    <p className={styles.Country}>Madrid</p>
+                    <p>{'>'}</p>
+                    <p className={styles.Country}>Almaty</p>
+                </div>
+
+                <div className={styles.Sender}>
+                    <span>Sender</span>
+                    <p className={styles.SenderInfo}>4.9 | PashaStarman</p>
+                </div>
+
+                <div className={styles.PriceDiv}>
+                    <p className={styles.Price}>{price} KZT</p>
+                </div>
+            </div>
+            <CardButton label={"Let's go"}/>
+        </div>
+    )
+}
+
+export default Card
\ No newline at end of file

src/components/CardList/CardList.module.css

+.CardLIst {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 20px;
+}
\ No newline at end of file

src/components/CardList/CardList.tsx

+import { data } from "@/constants/data"
+import Card from "../Card/Card"
+import styles from './CardList.module.css'
+
+const CardList = () => {
+    return (
+        <div className={styles.CardLIst}>
+            {data.map(card => {
+                return <Card key={card.price} url={card.url} price={card.price}/>
+            })}
+        </div>
+    )
+}
+
+export default CardList
\ No newline at end of file

src/components/UI/CardButton/CardButton.module.css

+.CardButton {
+    width: 310px;
+    height: 35px;
+    background-color: #005FDB;
+    color: white;
+    font-weight: 500;
+    size: 16px;
+    padding: 8px;
+    border: none;
+    border-radius: 5px;
+}
\ No newline at end of file

src/components/UI/CardButton/CardButton.tsx

+import styles from './CardButton.module.css'
+
+type Props = {
+    label: string
+}
+
+const CardButton = ({label}: Props) => {
+    return (
+        <>
+            <button className={styles.CardButton}>{label}</button>
+        </>
+    )
+}
+
+export default CardButton
\ No newline at end of file

src/constants/data.ts

+export const data = [
+    {
+        url: '/image.jpg',
+        price: '99.000'
+    },
+    {
+        url: '/image2.jpg',
+        price: '88.000'
+    },
+    {
+        url: '/image.jpg',
+        price: '55.000'
+    },
+]
\ No newline at end of file

src/pages/Home/Home.tsx

+import CardList from "@/components/CardList/CardList"
+
 const Home = () => {
     return (
         <>
-        <h1>Home Page</h1></>
+            <CardList/>
+        </>
     )
 }