131 lines
7.5 KiB
JavaScript
131 lines
7.5 KiB
JavaScript
import React from 'react'
|
|
import cImg from '/public/images/checkout/img-1.png'
|
|
import cImg2 from '/public/images/checkout/img-2.png'
|
|
import cImg3 from '/public/images/checkout/img-3.png'
|
|
import cImg4 from '/public/images/checkout/img-4.png'
|
|
import Image from 'next/image'
|
|
|
|
const SubmitHandler = (e) => {
|
|
e.preventDefault()
|
|
}
|
|
|
|
const Donation = () => {
|
|
return (
|
|
<div id="Donations">
|
|
<form onSubmit={SubmitHandler}>
|
|
<div className="wpo-donations-amount">
|
|
<h2>Your Donation</h2>
|
|
<input type="text" className="form-control" name="text" id="text"
|
|
placeholder="Enter Donation Amount" />
|
|
</div>
|
|
<div className="wpo-donations-details">
|
|
<h2>Details</h2>
|
|
<div className="row">
|
|
<div className="col-lg-6 col-md-6 col-sm-6 col-12 form-group">
|
|
<input type="text" className="form-control" name="name" id="fname"
|
|
placeholder="First Name" />
|
|
</div>
|
|
<div className="col-lg-6 col-md-6 col-sm-6 col-12 form-group">
|
|
<input type="text" className="form-control" name="name" id="name"
|
|
placeholder="Last Name" />
|
|
</div>
|
|
<div className="col-lg-6 col-md-6 col-sm-6 col-12 form-group clearfix">
|
|
<input type="email" className="form-control" name="email" id="email"
|
|
placeholder="Email" />
|
|
</div>
|
|
<div className="col-lg-6 col-md-6 col-sm-6 col-12 form-group">
|
|
<input type="text" className="form-control" name="Adress"
|
|
id="Adress" placeholder="Adress" />
|
|
</div>
|
|
<div className="col-lg-12 col-12 form-group">
|
|
<textarea className="form-control" name="note" id="note"
|
|
placeholder="Message"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="wpo-doanation-payment">
|
|
<h2>Choose Your Payment Method</h2>
|
|
<div className="wpo-payment-area">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="wpo-payment-option" id="open4">
|
|
<div className="wpo-payment-select">
|
|
<ul>
|
|
<li className="addToggle">
|
|
<input id="add" defaultChecked
|
|
type="radio" name="payment" value="30" />
|
|
<label htmlFor="add">Payment By Card</label>
|
|
</li>
|
|
<li className="removeToggle">
|
|
<input id="remove" type="radio"
|
|
name="payment" value="30" />
|
|
<label htmlFor="remove">Offline Donation</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="open5" className="payment-name">
|
|
<ul>
|
|
<li className="visa"><input id="1" type="radio"
|
|
name="size" value="30" />
|
|
<label htmlFor="1"><Image
|
|
src={cImg}
|
|
alt="" /></label>
|
|
</li>
|
|
<li className="mas"><input id="2" type="radio"
|
|
name="size" value="30" />
|
|
<label htmlFor="2"><Image
|
|
src={cImg2}
|
|
alt="" /></label>
|
|
</li>
|
|
<li className="ski"><input id="3" type="radio"
|
|
name="size" value="30" />
|
|
<label htmlFor="3"><Image
|
|
src={cImg3}
|
|
alt="" /></label>
|
|
</li>
|
|
<li className="pay"><input id="4" type="radio"
|
|
name="size" value="30" />
|
|
<label htmlFor="4"><Image
|
|
src={cImg4}
|
|
alt="" /></label>
|
|
</li>
|
|
</ul>
|
|
<div className="contact-form form-style">
|
|
<div className="row">
|
|
<div className="col-lg-6 col-md-12 col-12">
|
|
<label>Card holder Name</label>
|
|
<input type="text" placeholder=""
|
|
name="name" />
|
|
</div>
|
|
<div className="col-lg-6 col-md-12 col-12">
|
|
<label>Card Number</label>
|
|
<input type="text" placeholder=""
|
|
id="card" name="card" />
|
|
</div>
|
|
<div className="col-lg-6 col-md-12 col-12">
|
|
<label>CVV</label>
|
|
<input type="text" placeholder=""
|
|
name="CVV" />
|
|
</div>
|
|
<div className="col-lg-6 col-md-12 col-12">
|
|
<label>Expire Date</label>
|
|
<input type="text" placeholder=""
|
|
name="date" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="submit-area">
|
|
<button type="submit" className="theme-btn submit-btn">Donate Now</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Donation; |