Skip to content

Commit

Permalink
add pricing example
Browse files Browse the repository at this point in the history
  • Loading branch information
sfc23007 committed Nov 25, 2024
1 parent 80dc7ac commit be33e5e
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 13 deletions.
12 changes: 7 additions & 5 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Route, Routes } from 'react-router-dom';
import './App.scss'
import Navbar from './Navbar'
import Home from './Home'
import About from './About'
import Contact from './Contact'
import Footer from './Footer'
import UConnHeader from './UConnHeader';
import UConnFooter from './UConnFooter';
import Home from './Home'
import About from './About'
import Contact from './Contact'
import Pricing from './Pricing'

function App() {

Expand All @@ -18,9 +19,10 @@ function App() {
<Route path='/' element={<Home/>} />
<Route path='/about' element={<About/>} />
<Route path='/contact' element={<Contact/>} />
<Route path='/pricing' element={<Pricing/>} />
</Routes>
<Footer />
<UConnFooter />
<Footer />
<UConnFooter />
</>
)
}
Expand Down
4 changes: 2 additions & 2 deletions src/Contact.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ function Contact() {
<h2>Contact us</h2>
<p className="lead">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 class="card">
<div class="card-body">
<div className="card">
<div className="card-body">
<div className="row g-5">
<div className="col-md-5 col-lg-4 order-md-last">
<h4 className="d-flex justify-content-between align-items-center mb-3">
Expand Down
5 changes: 2 additions & 3 deletions src/Home.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@

function App() {
function Home() {

return (
<>
Expand Down Expand Up @@ -33,4 +32,4 @@ function App() {
)
}

export default App
export default Home
6 changes: 3 additions & 3 deletions src/Navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ const Navbar = () => {
<li className="nav-item">
<Link className="nav-link" to="/contact" onClick={handleNavCollapse}>Contact</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/pricing" onClick={handleNavCollapse}>Pricing</Link>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
Expand All @@ -36,9 +39,6 @@ const Navbar = () => {
<li><a className="dropdown-item" href="#" onClick={handleNavCollapse}>Something else here</a></li>
</ul>
</li>
<li className="nav-item">
<a className="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form className="d-flex" role="search">
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"></input>
Expand Down
94 changes: 94 additions & 0 deletions src/Pricing.jsx
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

0 comments on commit be33e5e

Please sign in to comment.