page confirm

src/app/order/confirm-order/layout.tsx

@@ -0,0 +1,9 @@
+import Header from '../../ui/header';
+
+export default function Layout({children,}: {children: React.ReactNode;}) {
+  	return (
+	    <div className="dark-mode">
+	        {children}
+	    </div>
+  	)
+}

src/app/order/confirm-order/page.tsx

@@ -0,0 +1,79 @@
+import Breadcrumb from "@/app/ui/breadcrumb";
+import Cart from "@/app/ui/cart";
+
+const SearchPage = () =>{
+    return (
+        <section className="confirm-order-section d-flex container">
+    		<div className="confirm-order-wrapper flex-grow-1">
+				<Breadcrumb />
+                <div className="address-wrapper mb-3">
+                    <div className="heading">
+                        <div className="title ">Giao đến</div>
+                    </div>
+                    <div className="address">
+                        <form>
+                            <div className="mb-3">
+                                <label htmlFor="exampleInputEmail1" className="form-label">Tỉnh / Thành phố</label>
+                                <select className="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
+                                    <option selected>Ho CHi Minh</option>
+                                    <option value="1">One</option>
+                                    <option value="2">Two</option>
+                                    <option value="3">Three</option>
+                                </select>
+                            </div>
+                            <div className="row mb-3">
+                                <div className="col">
+                                    <label htmlFor="exampleInputEmail1" className="form-label">Quận  / Huyện</label>
+                                    <input type="text" className="form-control" placeholder="First name" aria-label="First name"/>
+                                </div>
+                                <div className="col">
+                                    <label htmlFor="exampleInputEmail1" className="form-label">Phường / Xã</label>
+                                    <input type="text" className="form-control" placeholder="Last name" aria-label="Last name"/>
+                                </div>
+                            </div>
+                            <div className="mb-3">
+                                <label htmlFor="exampleInputEmail1" className="form-label">Số nhà & Tên đường</label>
+                                <input type="text" className="form-control" placeholder="24 Nguyen Dinh thi" aria-label="Last name"/>
+                            </div>
+                            <div className="mb-3">
+                                <label htmlFor="exampleInputEmail1" className="form-label">Ghi chú cho tài xế</label>
+                                <input type="text" className="form-control" placeholder="24 Nguyen Dinh thi" aria-label="Last name"/>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+				<div className="delivery-timer-section mb-3">
+                    <div className="heading">
+                        <div className="title ">Thời gian giao hàng</div>
+                    </div>
+                    <div className="delivery-timer">
+                        <input type="text" className="delivery-timer-day mx-2" placeholder="Hôm nay" />
+                        <input type="text" className="delivery-timer-time" placeholder="11h30 - 12h" />
+                    </div>
+                </div>
+                <div className="packing-section mb-3">
+                    <div className="heading">
+                        <div className="title ">Đóng gói</div>
+                    </div>
+                </div>
+                <div className="payment-section mb-3">
+                    <div className="heading">
+                        <div className="title ">Phương thức thanh toán</div>
+                    </div>
+                    <div className="payment">
+
+                    </div>
+                </div>
+                <div className="voucher-section mb-3">
+                    <div className="heading">
+                        <div className="title ">Khuyến mãi</div>
+                    </div>
+                </div>
+			</div>
+
+			<Cart />
+		</section>
+    )
+}
+
+export default SearchPage;

src/app/search/page.tsx

@@ -2,7 +2,6 @@ import Breadcrumb from "@/app/ui/breadcrumb";
 import InterestingFood from "@/components/homePage/interesting_food";
 
 const SearchPage = () =>{
-
     return (
         <section className="d-flex flex-column container home-section">
 			<Breadcrumb />

src/styles/order.css

@@ -805,4 +805,45 @@
     line-height: 24px;
     padding: 0 8px;
     min-width: 60px;
-}
+}
+
+/* confim order*/
+.address-wrapper{
+    gap: 8px;
+    padding: 0 16px;
+    background-color: #ffffff;
+}
+.confirm-order-section .heading{
+    border-bottom: 1px #d0d5dd;
+    padding: 8px 0px;
+}
+.confirm-order-section .heading .title{
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: 600;
+}
+.address-wrapper .address{
+    gap: 16;
+    padding: 8px 0 16px 0;
+}
+.delivery-timer-section,.packing-section,.payment-section,.voucher-section{
+    padding: 0 16px;
+    background-color: #ffffff;
+}
+.delivery-timer{
+    border-top: 1px solid #d0d5dd;
+    gap: 16px;
+    padding: 16px 0;
+}
+.delivery-timer-day,.delivery-timer-time{
+
+    background-color: #00473C;
+    border-radius: 6px;
+    padding: 10px 14px 10px 14px;
+    gap: 8px;
+    width: 125px;
+    height: 44px;
+}
+.delivery-timer-day::placeholder,.delivery-timer-time::placeholder{
+    color: #e6ff55;
+}