-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
108 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
function Pricing() { | ||
|
||
return ( | ||
<> | ||
<div className="container col-xl-10 col-xxl-8 px-4 py-5"> | ||
<div className="row align-items-center g-lg-5 py-5"> | ||
<div className="col-lg-7 text-center text-lg-start"> | ||
<h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1> | ||
<p className="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p> | ||
</div> | ||
<div className="col-md-10 mx-auto col-lg-5"> | ||
<form className="p-4 p-md-5 border rounded-3 bg-body-tertiary"> | ||
<div className="form-floating mb-3"> | ||
<input type="email" className="form-control" id="floatingInput" placeholder="name@example.com" /> | ||
<label for="floatingInput">Email address</label> | ||
</div> | ||
<div className="form-floating mb-3"> | ||
<input type="password" className="form-control" id="floatingPassword" placeholder="Password" /> | ||
<label for="floatingPassword">Password</label> | ||
</div> | ||
<div className="checkbox mb-3"> | ||
<label> | ||
<input type="checkbox" value="remember-me" /> Remember me | ||
</label> | ||
</div> | ||
<button className="w-100 btn btn-lg btn-primary" type="submit">Sign up</button> | ||
<hr className="my-4" /> | ||
<small className="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small> | ||
</form> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="container py-3"> | ||
<div className="row row-cols-1 row-cols-md-3 mb-3 text-center"> | ||
<div className="col"> | ||
<div className="card mb-4 rounded-3 shadow-sm"> | ||
<div className="card-header py-3"> | ||
<h4 className="my-0 fw-normal">Free</h4> | ||
</div> | ||
<div className="card-body"> | ||
<h1 className="card-title pricing-card-title">$0<small className="text-body-secondary fw-light">/mo</small></h1> | ||
<ul className="list-unstyled mt-3 mb-4"> | ||
<li>10 users included</li> | ||
<li>2 GB of storage</li> | ||
<li>Email support</li> | ||
<li>Help center access</li> | ||
</ul> | ||
<button type="button" className="w-100 btn btn-lg btn-outline-primary">Sign up for free</button> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="col"> | ||
<div className="card mb-4 rounded-3 shadow-sm"> | ||
<div className="card-header py-3"> | ||
<h4 className="my-0 fw-normal">Pro</h4> | ||
</div> | ||
<div className="card-body"> | ||
<h1 className="card-title pricing-card-title">$15<small className="text-body-secondary fw-light">/mo</small></h1> | ||
<ul className="list-unstyled mt-3 mb-4"> | ||
<li>20 users included</li> | ||
<li>10 GB of storage</li> | ||
<li>Priority email support</li> | ||
<li>Help center access</li> | ||
</ul> | ||
<button type="button" className="w-100 btn btn-lg btn-primary">Get started</button> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="col"> | ||
<div className="card mb-4 rounded-3 shadow-sm border-primary"> | ||
<div className="card-header py-3 text-bg-primary border-primary"> | ||
<h4 className="my-0 fw-normal">Enterprise</h4> | ||
</div> | ||
<div className="card-body"> | ||
<h1 className="card-title pricing-card-title">$29<small className="text-body-secondary fw-light">/mo</small></h1> | ||
<ul className="list-unstyled mt-3 mb-4"> | ||
<li>30 users included</li> | ||
<li>15 GB of storage</li> | ||
<li>Phone and email support</li> | ||
<li>Help center access</li> | ||
</ul> | ||
<button type="button" className="w-100 btn btn-lg btn-primary">Contact us</button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
</div> | ||
</> | ||
|
||
) | ||
} | ||
|
||
export default Pricing |