From ba14b987ae184689b641e73d73a764f1b82e7684 Mon Sep 17 00:00:00 2001
From: Scott Cathcart <scott.cathcart@uconn.edu>
Date: Mon, 25 Nov 2024 11:58:18 -0500
Subject: [PATCH] home content update

---
 src/Home.jsx | 38 +++++++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/Home.jsx b/src/Home.jsx
index c61ee45..95dd612 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -1,27 +1,35 @@
-import { useState } from 'react'
-import uconnOakLogo from './assets/oak-leaf-blue.png'
 
 function App() {
-  const [count, setCount] = useState(0)
 
   return (
-    <div className="container">
-      <div className="row">
-        <div className="col-12">
-          <div className="my-5 d-block text-center overflow-hidden">
-            <img src={uconnOakLogo} className="logo m-auto" alt="UConn Oak Logo" />
+    <>
+      <div className="p-5 mb-4 bg-body-tertiary rounded-3">
+        <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>
+          <button className="btn btn-primary btn-lg" type="button">Example button</button>
+        </div>
+      </div>
+      <div className="container py-5">
+        <div className="row align-items-md-stretch">
+          <div className="col-md-6">
+            <div className="h-100 p-5 text-bg-dark rounded-3 my-3">
+              <h2>Change the background</h2>
+              <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
+              <button className="btn btn-outline-light" type="button">Example button</button>
+            </div>
           </div>
-          <h1 className="w-100 text-center">Hello!</h1>
-          <div className="card">
-            <div className="card-body text-center">
-              <button className="btn btn-lg btn-primary" onClick={() => setCount((count) => count + 1)}>
-                count is {count}
-              </button>
+          <div className="col-md-6">
+            <div className="h-100 p-5 bg-body-tertiary border rounded-3 my-3">
+              <h2>Add borders</h2>
+              <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
+              <button className="btn btn-outline-secondary" type="button">Example button</button>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
+
   )
 }