create home and book a boat page

client/src/Router.tsx

 import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import UserLayout from "./components/UserLayout";
+import Book from "./pages/Book";
 import Home from "./pages/Home";
 
 function Router() {
@@ -11,7 +12,7 @@ function Router() {
           {/* Home page (user) */}
           <Route index element={<Home />} />
           {/* Book a boat (user) */}
-          <Route path="book" element={<p>Book</p>}>
+          <Route path="book" element={<Book />}>
             {/* After booking (user) */}
             <Route path="success" element={null} />
           </Route>

client/src/pages/Book.tsx

+import React from "react";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { Controller, useForm } from "react-hook-form";
+import Divider from "../components/Divider";
+import Modal from "../components/Modal";
+
+type FormData = {
+  boatName: string;
+  startTime: string;
+  estimatedEndTime: string;
+  destination: string;
+  name: string;
+  email: string;
+  annotations: string;
+};
+
+function Book() {
+  const { control, handleSubmit } = useForm<FormData>();
+  const onSubmit = (data: FormData) => console.log(data);
+  return (
+    <Container className="pt-5">
+      <Row>
+        <Col xs={{ span: 10, offset: 1 }}>
+          <Modal>
+            <h1 className="text-center">Book a Boat!</h1>
+            <p className="text-center">
+              Please enter the information for your booking
+            </p>
+            <Divider />
+            <Form onSubmit={handleSubmit(onSubmit)}>
+              <Controller
+                name="boatName"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Boat name</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="startTime"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Start time</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="estimatedEndTime"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Estimated end time</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="destination"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Destination</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="name"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Destination</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="email"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Your Mail</Form.Label>
+                    <Form.Control type="email" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="name"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Your Name</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="annotations"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Annotations (optional)</Form.Label>
+                    <Form.Control as="textarea" type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Button type="submit" variant="secondary" className="mt-2 w-100">
+                Book this boat!
+              </Button>
+            </Form>
+          </Modal>
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default Book;

client/src/pages/Home.tsx

@@ -9,9 +9,9 @@ function Home() {
       <Row className="h-100">
         <Col
           xs={{ span: 8, offset: 2 }}
-          className="h-100 py-5 text-center d-flex flex-column justify-content-between"
+          className="h-100 py-5 text-center d-flex flex-column justify-content-between rounded-xl"
         >
-          <Image src={logo} className="mb-5" />
+          <Image src={logo} fluid className="mb-5" />
           <div>
             <Link to="/book">
               <Button