add pricing example

sfc23007 · Nov 25, 2024 · be33e5e · be33e5e
1 parent 80dc7ac
commit be33e5e
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 13 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -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() {
 
@@ -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 />
     </>
   )
 }

diff --git a/src/Contact.jsx b/src/Contact.jsx
@@ -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">

diff --git a/src/Home.jsx b/src/Home.jsx
@@ -1,5 +1,4 @@
-
-function App() {
+function Home() {
 
   return (
     <>
@@ -33,4 +32,4 @@ function App() {
   )
 }
 
-export default App
+export default Home
diff --git a/src/Navbar.jsx b/src/Navbar.jsx
@@ -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
@@ -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>

diff --git a/src/Pricing.jsx b/src/Pricing.jsx
@@ -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