order payment process

src/app/layout.tsx

@@ -2,6 +2,7 @@ import '@/styles/global.css';
 import '@/styles/bootstrap.min.css';
 import '@/styles/layout.css'
 import '@/styles/fonts.css'
+import '@/styles/order.css'
 import '@/styles/style.css'
 
 import Head from "next/head"

src/app/order/payment-process/page.tsx

@@ -0,0 +1,86 @@
+
+
+import Breadcrumb from "@/app/ui/breadcrumb";
+const SearchPage = () =>{
+
+    return (
+        <div className="w-100 h-100 d-flex justify-content-center align-items-center">
+            <div className="payment-process d-flex flex-column">
+                <div className="heading">
+                    <div className="momo-icon">
+                        <img src="/images/momo.svg" alt=""/>
+                    </div>
+
+                    <div>
+                        Cổng thanh toán Momo
+                    </div>
+
+                    <div className="spacer flex-grow-1"></div>
+
+                    <div className="close-button cursor-pointer">x</div>
+                </div>
+
+                <div className="payment-with-qr-code d-flex gap-4">
+                    <div className="qr-code-and-amount d-flex flex-column">
+                        <div className="qr-code">
+                            <img src="/images/qrcode.png" alt="" />
+                        </div>
+
+                        <div>Tổng tiền: 170,000đ</div>
+                    </div>
+
+                    <div className="tutorial-and-timing d-flex flex-column gap-2">
+                        <div className="heading">
+                            Quét mã QR để thanh toán
+                        </div>
+
+                        <div className="tutorial-row d-flex gap-2 align-items-center">
+                            <div className="step-number">1</div>
+                            <div>Mở ứng dụng MoMo trên điện thoại</div>
+                        </div>
+
+                        <div className="tutorial-row d-flex gap-2 align-items-center">
+                            <div className="step-number">2</div>
+                            <div className="d-flex gap-2">Trên MoMo, chọn biểu tượng 
+                                <img src="/images/qrcode-1.png" alt="" /> 
+                                <span className="font-weight-700">Quét mã QR</span>
+                            </div>
+                        </div>
+
+                        <div className="tutorial-row d-flex gap-2 align-items-center">
+                            <div className="step-number">3</div>
+                            <div>Quét mã QR ở trang này và thanh toán</div>
+                        </div>
+
+                        <div className="payment-timing">
+                            <div className="heading">
+                                Giao dịch sẽ hết hạn sau:
+                            </div>
+
+                            <div className="d-flex gap-3 justify-content-center w-100">
+                                <div className="timing-card">
+                                    <div className="time">04</div>
+                                    <div className="unit">Phút</div>
+                                </div>
+
+                                <div className="timing-card">
+                                    <div className="time">41</div>
+                                    <div className="unit">Giây</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="change-other-method d-flex justify-content-center gap-2">
+                            <img src="/images/switch-horizontal-01.svg" alt=""/>
+                            <div className="">
+                                Đổi phương thức thanh toán
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default SearchPage;

src/app/search/page.tsx

@@ -1,10 +1,14 @@
-
+import Breadcrumb from "@/app/ui/breadcrumb";
 const SearchPage = () =>{
 
     return (
-        <div>
-            SearchPage
-        </div>
+        <section className="chef-detail-and-card-info-section d-flex container">
+    		<div className="chef-detail-wrapper flex-grow-1">
+				<Breadcrumb />
+
+			</div>
+
+		</section>
     )
 }
 

src/app/ui/header/index.tsx

@@ -1,11 +1,14 @@
 'use client'
+import { useState } from 'react';
 import CartHeader from "./cartHeader";
 import CheckLogin from "./checkLogin";
+import CartModel from "../cart/cartModel";
 type HeaderType = {
     isErrorPage?: Boolean;
 }
 
 const Header = ({ isErrorPage }: HeaderType) => {
+    const [show, setShow] = useState(false);
     return(
         <section className={`header-section d-flex justify-content-center `}>
             <div className="header-container container w-100 d-flex justify-content-between align-items-center gap-5">
@@ -23,10 +26,9 @@ const Header = ({ isErrorPage }: HeaderType) => {
                         <img className="" alt="" src="/images/vn.svg"/>
                     </div>
                 </div>
-
             </div>
 
-
+            <CartModel setShow={setShow} show={show}/>
         </section>
     )
 };

src/styles/order.css

@@ -0,0 +1,149 @@
+.payment-process {
+    background: white;
+    gap: 10px;
+}
+.payment-process .heading {
+    display: flex;
+    padding: 8px 24px;
+    align-items: center;
+    gap: 16px;
+    align-self: stretch;
+    color: #101828;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 30px;
+    border-bottom: 1px solid #EAECF0;
+}
+.momo-icon {
+    display: flex;
+    width: 48px;
+    height: 48px;
+    padding: 12px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    border: 1px solid #EAECF0;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+.momo-icon img {
+    width: 32px;
+    height: 32px;
+}
+.close-button {
+    cursor: pointer;
+}
+.payment-with-qr-code {
+    padding: 24px;
+    align-items: flex-start;
+}
+.qr-code-and-amount {
+    gap: 10px;
+    color: #000;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 32px;
+    text-align: center;
+}
+.qr-code {
+    display: flex;
+    padding: 32px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 16px;
+    background: linear-gradient(48deg, #CD1883 9.34%, #E01B8F 84.33%);
+}
+.payment-process .heading {
+    display: flex;
+    padding: 8px 24px;
+    align-items: center;
+    gap: 16px;
+    align-self: stretch;
+    color: #101828;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 30px;
+    border-bottom: 1px solid #EAECF0;
+}
+.tutorial-and-timing .heading {
+    color: #000;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 30px;
+}
+.tutorial-row {
+    color: #000;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+}
+.tutorial-row .step-number {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 45px;
+    background: #EAECF0;
+    font-size: 14px;
+    font-weight: 400;
+}
+.payment-timing {
+    display: flex;
+    padding: 12px 8px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 8px;
+    background: #FFF0F6;
+}
+.payment-timing .heading {
+    color: #C11574;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    border-bottom: none;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+}
+.timing-card {
+    display: flex;
+    padding: 8px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    background: #F3D4E6;
+}
+.timing-card .time {
+    color: #C11574;
+    text-align: center;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 30px;
+}
+.timing-card .unit {
+    color: #C11574;
+    text-align: center;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+}
+.change-other-method {
+    color: #0A58FF;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+}