London10_Jan_Softa_cyf_hotel_react

.browserlistrc

@@ -0,0 +1,12 @@
+ "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+}

package.json

@@ -3,9 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "js-datepicker": "^5.18.2",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-chatbot-kit": "^2.1.2",
     "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1"
+    "react-moment": "^1.1.3",
+    "react-scripts": "^5.0.1",
+    "react-spinners": "^0.13.8",
+    "Validate": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -2,20 +2,34 @@
   text-align: left;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.Top-header img {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
 }
 
 .App-header {
-  background-color: #222;
+  background-color: #382b21;
   height: 50px;
   padding: 20px;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1em;
   font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.logo-title {
+  text-align: center;
+  font-size: 1.5rem;
+  margin-top: 20px;
+}
+.logo-hotel {
+  width: 40px;
+  height: 40px;
 }
 
 .App-title {
@@ -40,18 +54,68 @@
 }
 
 tr {
-  color: #5b5757;
+  color: #3b3131;
 }
 
 .results {
   padding-top: 15px;
 }
 
-.footer {
+.list-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
   padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.footer {
+  padding: 2rem;
+  color: white;
   text-align: center;
 }
 
+.footer-contact {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  list-style: none;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  background-color: #382b21;
+  color: white;
+}
+
 .card {
   width: 18rem;
 }
+
+.cards {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.card-img-top {
+  width: 100%;
+  height: 200px;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.customer-profile-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+}

src/App.js

@@ -1,15 +1,42 @@
 import React from "react";
-
+import Top from "./Top";
+import Heading from "./Heading";
 import Bookings from "./Bookings";
+import InfoCard from "./InfoCard";
 import "./App.css";
+import Footer from "./Footer";
+import Restaurant from "./Restaurant";
 
 const App = () => {
+  const contactDetails = [
+    "123 Fake Street, London, E1 4UD",
+    "hello@fakehotel.com",
+    "0123 456789",
+  ];
+
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Top />
+      <Heading />
+      <InfoCard />
       <Bookings />
+      <Restaurant />
+      <Footer contactDetails={contactDetails} />
     </div>
   );
 };
 
 export default App;
+
+// Pseudocode: React component called "App". It imports several other components, such as "Top", "Heading", "Bookings",
+// "TouristInfoCards", "Footer", and "Restaurant". It also imports a CSS file called "App.css" for styling. The App
+// component is a functional component written using arrow function syntax. It returns JSX (JavaScript XML), which
+// represents the structure and content of the component's rendered output.
+
+// Inside the App component, there is a constant variable contactDetails that holds an array of contact information.
+// The array contains a street address, email address, and phone number. The JSX code returned by the App component
+// represents the structure of the web page. It consists of a <div> element with the class name "App". Inside the <div>,
+// the imported components are rendered in order: <Top />, <Heading />, <TouristInfoCards />, <Bookings />, <Restaurant />, and
+// <Footer />. The <Footer /> component is passed the contactDetails array as a prop. The export default App; statement
+// exports the App component as the default export of this module, allowing it to be imported and used in other parts of
+// the application.