From 99ce761ea86e6a836bde97e2112fcce887e0616c Mon Sep 17 00:00:00 2001
From: Scott Cathcart <scott.cathcart@uconn.edu>
Date: Mon, 25 Nov 2024 13:58:41 -0500
Subject: [PATCH] move contact to checkout, add contact, update home rounded,
 updating pricing footer

---
 src/App.jsx      |   2 +
 src/Checkout.jsx | 232 +++++++++++++++++++++++++++++++++++++++++++++++
 src/Contact.jsx  | 222 +++------------------------------------------
 src/Home.jsx     |   2 +-
 src/Pricing.jsx  |   4 +-
 5 files changed, 248 insertions(+), 214 deletions(-)
 create mode 100644 src/Checkout.jsx

diff --git a/src/App.jsx b/src/App.jsx
index a639d0f..46f7008 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import UConnFooter from './UConnFooter';
 import Home from './Home'
 import About from './About'
 import Contact from './Contact'
+import Checkout from './Checkout'
 import Pricing from './Pricing'
 
 function App() {
@@ -20,6 +21,7 @@ function App() {
         <Route path='/about' element={<About/>} />
         <Route path='/contact' element={<Contact/>} />
         <Route path='/pricing' element={<Pricing/>} />
+        <Route path='/checkout' element={<Checkout/>} />
       </Routes>
       <Footer />
       <UConnFooter />
diff --git a/src/Checkout.jsx b/src/Checkout.jsx
new file mode 100644
index 0000000..5e9f4f7
--- /dev/null
+++ b/src/Checkout.jsx
@@ -0,0 +1,232 @@
+function Checkout() {
+
+  return (
+    <>
+      <div className="container">
+        <main>
+          <div className="py-5 text-center">
+            <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 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">
+                    <span className="text-primary">Your cart</span>
+                    <span className="badge bg-primary rounded-pill">3</span>
+                  </h4>
+                  <ul className="list-group mb-3">
+                    <li className="list-group-item d-flex justify-content-between lh-sm">
+                      <div>
+                        <h6 className="my-0">Product name</h6>
+                        <small className="text-body-secondary">Brief description</small>
+                      </div>
+                      <span className="text-body-secondary">$12</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between lh-sm">
+                      <div>
+                        <h6 className="my-0">Second product</h6>
+                        <small className="text-body-secondary">Brief description</small>
+                      </div>
+                      <span className="text-body-secondary">$8</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between lh-sm">
+                      <div>
+                        <h6 className="my-0">Third item</h6>
+                        <small className="text-body-secondary">Brief description</small>
+                      </div>
+                      <span className="text-body-secondary">$5</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between bg-body-tertiary">
+                      <div className="text-success">
+                        <h6 className="my-0">Promo code</h6>
+                        <small>EXAMPLECODE</small>
+                      </div>
+                      <span className="text-success">−$5</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between">
+                      <span>Total (USD)</span>
+                      <strong>$20</strong>
+                    </li>
+                  </ul>
+
+                  <form className="card p-2">
+                    <div className="input-group">
+                      <input type="text" className="form-control" placeholder="Promo code" />
+                      <button type="submit" className="btn btn-secondary">Redeem</button>
+                    </div>
+                  </form>
+                </div>
+                <div className="col-md-7 col-lg-8">
+                  <h4 className="mb-3">Billing address</h4>
+                  <form className="needs-validation" novalidate>
+                    <div className="row g-3">
+                      <div className="col-sm-6">
+                        <label for="firstName" className="form-label">First name</label>
+                        <input type="text" className="form-control" id="firstName" placeholder="" value="" required />
+                        <div className="invalid-feedback">
+                          Valid first name is required.
+                        </div>
+                      </div>
+
+                      <div className="col-sm-6">
+                        <label for="lastName" className="form-label">Last name</label>
+                        <input type="text" className="form-control" id="lastName" placeholder="" value="" required />
+                        <div className="invalid-feedback">
+                          Valid last name is required.
+                        </div>
+                      </div>
+
+                      <div className="col-12">
+                        <label for="username" className="form-label">Username</label>
+                        <div className="input-group has-validation">
+                          <span className="input-group-text">@</span>
+                          <input type="text" className="form-control" id="username" placeholder="Username" required />
+                        <div className="invalid-feedback">
+                            Your username is required.
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="col-12">
+                        <label for="email" className="form-label">Email <span className="text-body-secondary">(Optional)</span></label>
+                        <input type="email" className="form-control" id="email" placeholder="you@example.com" />
+                        <div className="invalid-feedback">
+                          Please enter a valid email address for shipping updates.
+                        </div>
+                      </div>
+
+                      <div className="col-12">
+                        <label for="address" className="form-label">Address</label>
+                        <input type="text" className="form-control" id="address" placeholder="1234 Main St" required />
+                        <div className="invalid-feedback">
+                          Please enter your shipping address.
+                        </div>
+                      </div>
+
+                      <div className="col-12">
+                        <label for="address2" className="form-label">Address 2 <span className="text-body-secondary">(Optional)</span></label>
+                        <input type="text" className="form-control" id="address2" placeholder="Apartment or suite" />
+                      </div>
+
+                      <div className="col-md-5">
+                        <label for="country" className="form-label">Country</label>
+                        <select className="form-select" id="country" required>
+                          <option value="">Choose...</option>
+                          <option>United States</option>
+                        </select>
+                        <div className="invalid-feedback">
+                          Please select a valid country.
+                        </div>
+                      </div>
+
+                      <div className="col-md-4">
+                        <label for="state" className="form-label">State</label>
+                        <select className="form-select" id="state" required>
+                          <option value="">Choose...</option>
+                          <option>Connecticut</option>
+                        </select>
+                        <div className="invalid-feedback">
+                          Please provide a valid state.
+                        </div>
+                      </div>
+
+                      <div className="col-md-3">
+                        <label for="zip" className="form-label">Zip</label>
+                        <input type="text" className="form-control" id="zip" placeholder="" required />
+                        <div className="invalid-feedback">
+                          Zip code required.
+                        </div>
+                      </div>
+                    </div>
+
+                    <hr className="my-4"></hr>
+
+                    <div className="form-check">
+                      <input type="checkbox" className="form-check-input" id="same-address" />
+                      <label className="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
+                    </div>
+
+                    <div className="form-check">
+                      <input type="checkbox" className="form-check-input" id="save-info" />
+                      <label className="form-check-label" for="save-info">Save this information for next time</label>
+                    </div>
+
+                    <hr className="my-4"></hr>
+
+                    <h4 className="mb-3">Payment</h4>
+
+                    <div className="my-3">
+                      <div className="form-check">
+                        <input id="credit" name="paymentMethod" type="radio" className="form-check-input" checked required />
+                        <label className="form-check-label" for="credit">Credit card</label>
+                      </div>
+                      <div className="form-check">
+                        <input id="debit" name="paymentMethod" type="radio" className="form-check-input" required />
+                        <label className="form-check-label" for="debit">Debit card</label>
+                      </div>
+                      <div className="form-check">
+                        <input id="paypal" name="paymentMethod" type="radio" className="form-check-input" required />
+                        <label className="form-check-label" for="paypal">PayPal</label>
+                      </div>
+                    </div>
+
+                    <div className="row gy-3">
+                      <div className="col-md-6">
+                        <label for="cc-name" className="form-label">Name on card</label>
+                        <input type="text" className="form-control" id="cc-name" placeholder="" required />
+                        <small className="text-body-secondary">Full name as displayed on card</small>
+                        <div className="invalid-feedback">
+                          Name on card is required
+                        </div>
+                      </div>
+
+                      <div className="col-md-6">
+                        <label for="cc-number" className="form-label">Credit card number</label>
+                        <input type="text" className="form-control" id="cc-number" placeholder="" required />
+                        <div className="invalid-feedback">
+                          Credit card number is required
+                        </div>
+                      </div>
+
+                      <div className="col-md-3">
+                        <label for="cc-expiration" className="form-label">Expiration</label>
+                        <input type="text" className="form-control" id="cc-expiration" placeholder="" required />
+                        <div className="invalid-feedback">
+                          Expiration date required
+                        </div>
+                      </div>
+
+                      <div className="col-md-3">
+                        <label for="cc-cvv" className="form-label">CVV</label>
+                        <input type="text" className="form-control" id="cc-cvv" placeholder="" required />
+                        <div className="invalid-feedback">
+                          Security code required
+                        </div>
+                      </div>
+                    </div>
+
+                    <hr className="my-4"></hr>
+
+                    <button className="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
+                  </form>
+                  </div>
+                  </div>
+                </div>
+              </div>
+        </main>
+
+        <div className="my-5 pt-5 text-body-secondary text-center text-small">
+          <ul className="list-inline">
+            <li className="list-inline-item"><a href="#">Privacy</a></li>
+            <li className="list-inline-item"><a href="#">Terms</a></li>
+            <li className="list-inline-item"><a href="#">Support</a></li>
+          </ul>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Checkout
diff --git a/src/Contact.jsx b/src/Contact.jsx
index 94a5677..82071a0 100644
--- a/src/Contact.jsx
+++ b/src/Contact.jsx
@@ -6,224 +6,24 @@ function Contact() {
         <main>
           <div className="py-5 text-center">
             <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>
+            <p className="lead">Below is an example form.</p>
           </div>
           <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">
-                    <span className="text-primary">Your cart</span>
-                    <span className="badge bg-primary rounded-pill">3</span>
-                  </h4>
-                  <ul className="list-group mb-3">
-                    <li className="list-group-item d-flex justify-content-between lh-sm">
-                      <div>
-                        <h6 className="my-0">Product name</h6>
-                        <small className="text-body-secondary">Brief description</small>
-                      </div>
-                      <span className="text-body-secondary">$12</span>
-                    </li>
-                    <li className="list-group-item d-flex justify-content-between lh-sm">
-                      <div>
-                        <h6 className="my-0">Second product</h6>
-                        <small className="text-body-secondary">Brief description</small>
-                      </div>
-                      <span className="text-body-secondary">$8</span>
-                    </li>
-                    <li className="list-group-item d-flex justify-content-between lh-sm">
-                      <div>
-                        <h6 className="my-0">Third item</h6>
-                        <small className="text-body-secondary">Brief description</small>
-                      </div>
-                      <span className="text-body-secondary">$5</span>
-                    </li>
-                    <li className="list-group-item d-flex justify-content-between bg-body-tertiary">
-                      <div className="text-success">
-                        <h6 className="my-0">Promo code</h6>
-                        <small>EXAMPLECODE</small>
-                      </div>
-                      <span className="text-success">−$5</span>
-                    </li>
-                    <li className="list-group-item d-flex justify-content-between">
-                      <span>Total (USD)</span>
-                      <strong>$20</strong>
-                    </li>
-                  </ul>
-
-                  <form className="card p-2">
-                    <div className="input-group">
-                      <input type="text" className="form-control" placeholder="Promo code" />
-                      <button type="submit" className="btn btn-secondary">Redeem</button>
-                    </div>
-                  </form>
+              <div className="col-12 col-md-7 col-lg-6 mx-auto">
+                <div className="mb-3">
+                  <label for="exampleFormControlInput1" className="form-label">Email address</label>
+                  <input type="email" className="form-control" id="exampleFormControlInput1" placeholder="name@example.com" />
                 </div>
-                <div className="col-md-7 col-lg-8">
-                  <h4 className="mb-3">Billing address</h4>
-                  <form className="needs-validation" novalidate>
-                    <div className="row g-3">
-                      <div className="col-sm-6">
-                        <label for="firstName" className="form-label">First name</label>
-                        <input type="text" className="form-control" id="firstName" placeholder="" value="" required />
-                        <div className="invalid-feedback">
-                          Valid first name is required.
-                        </div>
-                      </div>
-
-                      <div className="col-sm-6">
-                        <label for="lastName" className="form-label">Last name</label>
-                        <input type="text" className="form-control" id="lastName" placeholder="" value="" required />
-                        <div className="invalid-feedback">
-                          Valid last name is required.
-                        </div>
-                      </div>
-
-                      <div className="col-12">
-                        <label for="username" className="form-label">Username</label>
-                        <div className="input-group has-validation">
-                          <span className="input-group-text">@</span>
-                          <input type="text" className="form-control" id="username" placeholder="Username" required />
-                        <div className="invalid-feedback">
-                            Your username is required.
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="col-12">
-                        <label for="email" className="form-label">Email <span className="text-body-secondary">(Optional)</span></label>
-                        <input type="email" className="form-control" id="email" placeholder="you@example.com" />
-                        <div className="invalid-feedback">
-                          Please enter a valid email address for shipping updates.
-                        </div>
-                      </div>
-
-                      <div className="col-12">
-                        <label for="address" className="form-label">Address</label>
-                        <input type="text" className="form-control" id="address" placeholder="1234 Main St" required />
-                        <div className="invalid-feedback">
-                          Please enter your shipping address.
-                        </div>
-                      </div>
-
-                      <div className="col-12">
-                        <label for="address2" className="form-label">Address 2 <span className="text-body-secondary">(Optional)</span></label>
-                        <input type="text" className="form-control" id="address2" placeholder="Apartment or suite" />
-                      </div>
-
-                      <div className="col-md-5">
-                        <label for="country" className="form-label">Country</label>
-                        <select className="form-select" id="country" required>
-                          <option value="">Choose...</option>
-                          <option>United States</option>
-                        </select>
-                        <div className="invalid-feedback">
-                          Please select a valid country.
-                        </div>
-                      </div>
-
-                      <div className="col-md-4">
-                        <label for="state" className="form-label">State</label>
-                        <select className="form-select" id="state" required>
-                          <option value="">Choose...</option>
-                          <option>Connecticut</option>
-                        </select>
-                        <div className="invalid-feedback">
-                          Please provide a valid state.
-                        </div>
-                      </div>
-
-                      <div className="col-md-3">
-                        <label for="zip" className="form-label">Zip</label>
-                        <input type="text" className="form-control" id="zip" placeholder="" required />
-                        <div className="invalid-feedback">
-                          Zip code required.
-                        </div>
-                      </div>
-                    </div>
-
-                    <hr className="my-4"></hr>
-
-                    <div className="form-check">
-                      <input type="checkbox" className="form-check-input" id="same-address" />
-                      <label className="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
-                    </div>
-
-                    <div className="form-check">
-                      <input type="checkbox" className="form-check-input" id="save-info" />
-                      <label className="form-check-label" for="save-info">Save this information for next time</label>
-                    </div>
-
-                    <hr className="my-4"></hr>
-
-                    <h4 className="mb-3">Payment</h4>
-
-                    <div className="my-3">
-                      <div className="form-check">
-                        <input id="credit" name="paymentMethod" type="radio" className="form-check-input" checked required />
-                        <label className="form-check-label" for="credit">Credit card</label>
-                      </div>
-                      <div className="form-check">
-                        <input id="debit" name="paymentMethod" type="radio" className="form-check-input" required />
-                        <label className="form-check-label" for="debit">Debit card</label>
-                      </div>
-                      <div className="form-check">
-                        <input id="paypal" name="paymentMethod" type="radio" className="form-check-input" required />
-                        <label className="form-check-label" for="paypal">PayPal</label>
-                      </div>
-                    </div>
-
-                    <div className="row gy-3">
-                      <div className="col-md-6">
-                        <label for="cc-name" className="form-label">Name on card</label>
-                        <input type="text" className="form-control" id="cc-name" placeholder="" required />
-                        <small className="text-body-secondary">Full name as displayed on card</small>
-                        <div className="invalid-feedback">
-                          Name on card is required
-                        </div>
-                      </div>
-
-                      <div className="col-md-6">
-                        <label for="cc-number" className="form-label">Credit card number</label>
-                        <input type="text" className="form-control" id="cc-number" placeholder="" required />
-                        <div className="invalid-feedback">
-                          Credit card number is required
-                        </div>
-                      </div>
-
-                      <div className="col-md-3">
-                        <label for="cc-expiration" className="form-label">Expiration</label>
-                        <input type="text" className="form-control" id="cc-expiration" placeholder="" required />
-                        <div className="invalid-feedback">
-                          Expiration date required
-                        </div>
-                      </div>
-
-                      <div className="col-md-3">
-                        <label for="cc-cvv" className="form-label">CVV</label>
-                        <input type="text" className="form-control" id="cc-cvv" placeholder="" required />
-                        <div className="invalid-feedback">
-                          Security code required
-                        </div>
-                      </div>
-                    </div>
-
-                    <hr className="my-4"></hr>
-
-                    <button className="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
-                  </form>
-                  </div>
-                  </div>
+                <div className="mb-3">
+                  <label for="exampleFormControlTextarea1" className="form-label">Example textarea</label>
+                  <textarea className="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                 </div>
+                <button className="mx-auto btn btn-primary btn-lg" type="submit">Contact Us!</button>
               </div>
+            </div>
+          </div>
         </main>
-
-        <div className="my-5 pt-5 text-body-secondary text-center text-small">
-          <ul className="list-inline">
-            <li className="list-inline-item"><a href="#">Privacy</a></li>
-            <li className="list-inline-item"><a href="#">Terms</a></li>
-            <li className="list-inline-item"><a href="#">Support</a></li>
-          </ul>
-        </div>
       </div>
     </>
   )
diff --git a/src/Home.jsx b/src/Home.jsx
index 25a0e8e..d423fd1 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -2,7 +2,7 @@ function Home() {
 
   return (
     <>
-      <div className="p-5 mb-4 bg-body-tertiary rounded-3">
+      <div className="p-5 mb-4 bg-body-tertiary">
         <div className="container py-5">
           <h1 className="display-5 fw-bold">Custom jumbotron</h1>
           <p className="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
diff --git a/src/Pricing.jsx b/src/Pricing.jsx
index a608ea1..fb40ad6 100644
--- a/src/Pricing.jsx
+++ b/src/Pricing.jsx
@@ -62,7 +62,7 @@ function Pricing() {
                   <li>Priority email support</li>
                   <li>Help center access</li>
                 </ul>
-                <a href="/contact" className="w-100 btn btn-lg btn-primary">Get started</a>
+                <a href="/checkout" className="w-100 btn btn-lg btn-primary">Get started</a>
               </div>
             </div>
           </div>
@@ -79,7 +79,7 @@ function Pricing() {
                   <li>Phone and email support</li>
                   <li>Help center access</li>
                 </ul>
-                <a href="/contact" className="w-100 btn btn-lg btn-primary">Contact us</a>
+                <a href="/checkout" className="w-100 btn btn-lg btn-primary">Contact us</a>
               </div>
             </div>
           </div>