498 lines
21 KiB
JavaScript
498 lines
21 KiB
JavaScript
"use client";
|
||
import PageBanner from "@/components/PageBanner";
|
||
import WellFoodLayout from "@/layout/WellFoodLayout";
|
||
import { Accordion } from "react-bootstrap";
|
||
const page = () => {
|
||
return (
|
||
<WellFoodLayout>
|
||
<PageBanner pageTitle={"Checkout"} />
|
||
<div className="checkout-form-area py-130">
|
||
<div className="container">
|
||
<div className="checkout-faqs" id="checkout-faqs">
|
||
<Accordion>
|
||
<div className="alert bgc-lighter wow fadeInUp delay-0-2s">
|
||
<h6>
|
||
Returning customer?{" "}
|
||
<Accordion.Toggle
|
||
as={"a"}
|
||
eventKey="collapse0"
|
||
href="#"
|
||
onClick={(e) => e.preventDefault()}
|
||
className="collapsed card-header"
|
||
data-bs-toggle="collapse"
|
||
data-bs-target="#collapse0"
|
||
aria-expanded="false"
|
||
aria-controls="collapse0"
|
||
>
|
||
Click here to login
|
||
</Accordion.Toggle>
|
||
</h6>
|
||
<Accordion.Collapse eventKey="collapse0" className="content">
|
||
<form action="#">
|
||
<p>Please login your accont.</p>
|
||
<div className="row">
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="email"
|
||
id="email-address"
|
||
name="email-address"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="Your Email Address"
|
||
required=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="password"
|
||
id="password"
|
||
name="password"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="Your Password"
|
||
required=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="form-footer">
|
||
<button type="submit" className="theme-btn style-two">
|
||
login <i className="fas fa-angle-double-right" />
|
||
</button>
|
||
<input
|
||
type="checkbox"
|
||
name="loss-passowrd"
|
||
id="loss-passowrd"
|
||
required=""
|
||
/>
|
||
<label htmlFor="loss-passowrd">Remember me</label>
|
||
</div>
|
||
<a href="#">Lost your password?</a>
|
||
</form>
|
||
</Accordion.Collapse>
|
||
</div>
|
||
</Accordion>
|
||
|
||
<Accordion>
|
||
<div className="alert bgc-lighter wow fadeInUp delay-0-3s">
|
||
<h6>
|
||
Have a coupon?{" "}
|
||
<Accordion.Toggle
|
||
as={"a"}
|
||
eventKey="collapse3"
|
||
href="#"
|
||
onClick={(e) => e.preventDefault()}
|
||
className="collapsed card-header"
|
||
>
|
||
Click here to enter your code
|
||
</Accordion.Toggle>
|
||
</h6>
|
||
<Accordion.Collapse eventKey="collapse3" className="content">
|
||
<form action="#">
|
||
<p>If you have a coupon code, please apply it below.</p>
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="coupon-code"
|
||
name="coupon-code"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="Coupon Code"
|
||
required=""
|
||
/>
|
||
</div>
|
||
<button type="submit" className="theme-btn style-two">
|
||
apply coupon <i className="fas fa-angle-double-right" />
|
||
</button>
|
||
</form>
|
||
</Accordion.Collapse>
|
||
</div>
|
||
</Accordion>
|
||
|
||
<Accordion defaultActiveKey="collapse4">
|
||
<div className="alert bgc-lighter wow fadeInUp delay-0-4s">
|
||
<h6>
|
||
Billing Address{" "}
|
||
<Accordion.Toggle
|
||
as={"a"}
|
||
eventKey="collapse4"
|
||
href="#"
|
||
onClick={(e) => e.preventDefault()}
|
||
className="card-header"
|
||
>
|
||
{" "}
|
||
Enter here
|
||
</Accordion.Toggle>
|
||
</h6>
|
||
<Accordion.Collapse eventKey="collapse4" className="content">
|
||
<form
|
||
id="checkout-form"
|
||
className="checkout-form"
|
||
name="checkout-form"
|
||
action="#"
|
||
method="post"
|
||
>
|
||
<div className="row">
|
||
<div className="col-lg-12 pt-15">
|
||
<h5>Personal Information</h5>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="first-name"
|
||
name="first-name"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="First Name"
|
||
required=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="last-name"
|
||
name="last-name"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="Last Name"
|
||
required=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="number"
|
||
name="number"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="Phone Number"
|
||
required=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="email"
|
||
id="email"
|
||
name="email"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="Email Address"
|
||
required=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="company-name"
|
||
name="company-name"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="Company name (optional)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="company-address"
|
||
name="company-address"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="Company Address (optional)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-12">
|
||
<h5>Your Address</h5>
|
||
</div>
|
||
<div className="col-md-6 mb-30">
|
||
<div className="form-group">
|
||
<select name="country" id="country">
|
||
<option value="value1">Select Country</option>
|
||
<option value="value2">Australia</option>
|
||
<option value="value3">Canada</option>
|
||
<option value="value4">China</option>
|
||
<option value="value5">Morocco</option>
|
||
<option value="value6">Saudi Arabia</option>
|
||
<option value="value7">United Kingdom (UK)</option>
|
||
<option value="value8">United States (US)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="city"
|
||
name="city"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="City"
|
||
required=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="state"
|
||
name="state"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="State"
|
||
required=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="zip"
|
||
name="zip"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="Zip"
|
||
required=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="street-name"
|
||
name="street-name"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="House, street name"
|
||
required=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6">
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
id="apartment-name"
|
||
name="apartment-name"
|
||
className="form-control"
|
||
defaultValue=""
|
||
placeholder="Apartment, suite, unit etc. (optional)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-12">
|
||
<h5>Order Notes (optional)</h5>
|
||
</div>
|
||
<div className="col-md-12">
|
||
<div className="form-group mb-0">
|
||
<textarea
|
||
name="order-note"
|
||
id="order-note"
|
||
className="form-control"
|
||
rows={5}
|
||
placeholder="Notes about your order, e.g. special notes for delivery."
|
||
defaultValue={""}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</Accordion.Collapse>
|
||
</div>
|
||
</Accordion>
|
||
|
||
<Accordion>
|
||
<div className="alert bgc-lighter wow fadeInUp delay-0-2s">
|
||
<h6>
|
||
Select Your{" "}
|
||
<Accordion.Toggle
|
||
as={"a"}
|
||
eventKey="collapse5"
|
||
href="#"
|
||
onClick={(e) => e.preventDefault()}
|
||
className="collapsed card-header"
|
||
>
|
||
{" "}
|
||
Payment Method
|
||
</Accordion.Toggle>
|
||
</h6>
|
||
<Accordion.Collapse eventKey="collapse5" className="content">
|
||
<div className="payment-cart-total pt-25">
|
||
<div className="row justify-content-between">
|
||
<div className="col-lg-6">
|
||
<div className="payment-method rmb-30">
|
||
<h5 className="mb-20">Payment Method</h5>
|
||
<Accordion
|
||
defaultActiveKey="collapseOne"
|
||
as="ul"
|
||
id="paymentMethod"
|
||
className="mb-30"
|
||
>
|
||
{/* Default unchecked */}
|
||
<li className="custom-control custom-radio">
|
||
<input
|
||
type="radio"
|
||
className="custom-control-input"
|
||
id="methodone"
|
||
name="defaultExampleRadios"
|
||
defaultChecked
|
||
/>{" "}
|
||
<Accordion.Toggle
|
||
as="label"
|
||
className="custom-control-label"
|
||
htmlFor="methodone"
|
||
data-toggle="collapse"
|
||
data-target="#collapseOne"
|
||
eventKey="collapseOne"
|
||
>
|
||
{" "}
|
||
Direct Bank Transfer{" "}
|
||
<i className="fas fa-money-check" />
|
||
</Accordion.Toggle>
|
||
<Accordion.Collapse
|
||
eventKey="collapseOne"
|
||
data-parent="#paymentMethod"
|
||
style={{}}
|
||
>
|
||
<p>
|
||
Make your payment directly into our bank
|
||
account. Please use your Order ID as the
|
||
payment reference. Your order will not be
|
||
shipped our account.
|
||
</p>
|
||
</Accordion.Collapse>
|
||
</li>
|
||
{/* Default unchecked */}
|
||
<li className="custom-control custom-radio">
|
||
<input
|
||
type="radio"
|
||
className="custom-control-input"
|
||
id="methodtwo"
|
||
name="defaultExampleRadios"
|
||
/>{" "}
|
||
<Accordion.Toggle
|
||
as="label"
|
||
className="custom-control-label collapsed"
|
||
htmlFor="methodtwo"
|
||
data-toggle="collapse"
|
||
data-target="#collapseTwo"
|
||
eventKey="collapseTwo"
|
||
>
|
||
{" "}
|
||
Cash On Delivery <i className="fas fa-truck" />
|
||
</Accordion.Toggle>
|
||
<Accordion.Collapse
|
||
eventKey="collapseTwo"
|
||
data-parent="#paymentMethod"
|
||
style={{}}
|
||
>
|
||
<p>Pay with cash upon delivery.</p>
|
||
</Accordion.Collapse>
|
||
</li>
|
||
{/* Default unchecked */}
|
||
<li className="custom-control custom-radio">
|
||
<input
|
||
type="radio"
|
||
className="custom-control-input"
|
||
id="methodthree"
|
||
name="defaultExampleRadios"
|
||
/>{" "}
|
||
<Accordion.Toggle
|
||
as="label"
|
||
className="custom-control-label collapsed"
|
||
htmlFor="methodthree"
|
||
data-toggle="collapse"
|
||
data-target="#collapsethree"
|
||
eventKey="collapsethree"
|
||
>
|
||
Paypal <i className="fab fa-cc-paypal" />
|
||
</Accordion.Toggle>
|
||
<Accordion.Collapse
|
||
eventKey="collapsethree"
|
||
data-parent="#paymentMethod"
|
||
style={{}}
|
||
>
|
||
<p>
|
||
Pay via PayPal; you can pay with your credit
|
||
card if you don’t have a PayPal account.
|
||
</p>
|
||
</Accordion.Collapse>
|
||
</li>
|
||
</Accordion>
|
||
<p>
|
||
Your personal data will be used to process your
|
||
order, support your experience throughout this
|
||
website, and for other purposes described in our
|
||
privacy policy.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-5">
|
||
<div className="shoping-cart-total text-left mb-20">
|
||
<h5 className="text-center mb-20">Cart Totals</h5>
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
Chicken Soup <strong>× 1</strong>
|
||
</td>
|
||
<td>$70.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
Alaskan Crab <strong>× 2</strong>
|
||
</td>
|
||
<td>$130.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Shipping Fee</td>
|
||
<td>$10.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Vat</td>
|
||
<td>$5.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<strong>Order Total</strong>
|
||
</td>
|
||
<td>
|
||
<strong>$225.00</strong>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Accordion.Collapse>
|
||
</div>
|
||
</Accordion>
|
||
<button type="button" className="theme-btn w-100">
|
||
Place order <i className="fas fa-angle-double-right" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</WellFoodLayout>
|
||
);
|
||
};
|
||
export default page;
|