list ticket details, begin on form

src/BandForm.js

@@ -1,12 +1,29 @@
+function costToReadable(cost) {
+  const centsInADollar = 100;
+  return cost / centsInADollar;
+}
+
 function BandForm({ band }) {
   return (
-    <div className="form">
-      {band.ticketTypes.map((ticket) => (
-        <p>
-          {ticket.name} - {ticket.description}
-        </p>
-      ))}
+    <form className="form">
+      <h2>Select Tickets</h2>
+
+      {band.ticketTypes.map(({type, name, description, cost}) => (
+        <div className="ticketWrapper">
+          <div className="ticket">
+            <div className="ticketDetails">
+              <h3>{name}</h3>
+              <p>{description}</p>
+              <h4>${costToReadable(cost)}</h4>
             </div>
+            <div>
+              <input type="number" step="1" />
+            </div>
+          </div>
+          <hr />
+        </div>
+      ))}
+    </form>
   );
 }
 

src/index.css

@@ -9,6 +9,35 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin: var(--spacing-lg);
+  font-size: var(--font-base);
+}
+
+hr {
+  border-color: var(--color-text);
+  border-width: 1px;
+  width: 100%;
+}
+
+h1, h2 {
+  color: var(--color-text-darker);
+  font-weight: bold;
+}
+
+h1 {
+  font-size: var(--font-xl);
+}
+
+h2 {
+  font-size: var(--font-lg);
+}
+
+h3 {
+  font-size: var(--font-lg);
+  color: var(--color-text-dark);
+}
+
+h4 {
+  font-size: var(--font-lg);
 }
 
 .wrapper {
@@ -37,4 +66,22 @@ html {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
+
+  .ticketWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+  }
+
+  .ticket {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-lg);
+  }
+
+  .ticketDetails {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
 }

src/variables.css

@@ -6,4 +6,8 @@
   --color-text-dark: #626262;
   --color-text-darker: #3d4753;
   --color-section: #f7f8fa;
+
+  --font-base: 16px;
+  --font-lg: 1.75rem;
+  --font-xl: 2.5rem;
 }