Configure react as the frontend

9 files changed, 88 insertions, 0 deletions

diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index b61b612..5f82ae5 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -1,2 +1,35 @@
 @import 'bootstrap/scss/bootstrap';
 @import 'bootstrap-icons/font/bootstrap-icons';
+
+.bg_primary-color {
+  background-color: #FFFFFF;
+}
+.primary-color {
+  background-color: #FFFFFF;
+}
+.bg_secondary-color {
+  background-color: #293241;
+}
+.secondary-color {
+  color: #293241;
+}
+.custom-button.btn {
+  background-color: #293241;
+  color: #FFF;
+  border: none;
+}
+.hero {
+  width: 100vw;
+  height: 50vh;
+}
+.hero img {
+  object-fit: cover;
+  object-position: top;
+  height: 100%;
+  width: 100%;
+}
+.overlay {
+  height: 100%;
+  width: 100%;
+  opacity: 0.4;
+}
diff --git a/app/controllers/homepage_controller.rb b/app/controllers/homepage_controller.rb
new file mode 100644
index 0000000..e09cc6e
--- /dev/null
+++ b/app/controllers/homepage_controller.rb
@@ -0,0 +1,4 @@
+class HomepageController < ApplicationController
+  def index
+  end
+end
diff --git a/app/helpers/homepage_helper.rb b/app/helpers/homepage_helper.rb
new file mode 100644
index 0000000..c5bbfe5
--- /dev/null
+++ b/app/helpers/homepage_helper.rb
@@ -0,0 +1,2 @@
+module HomepageHelper
+end
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 3016c21..85b9adf 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -2,3 +2,4 @@
 import "@hotwired/turbo-rails"
 import "./controllers"
 import * as bootstrap from "bootstrap"
+import "./components"
diff --git a/app/javascript/components/App.jsx b/app/javascript/components/App.jsx
new file mode 100644
index 0000000..6d7a0c7
--- /dev/null
+++ b/app/javascript/components/App.jsx
@@ -0,0 +1,4 @@
+import React from "react";
+import Routes from "../routes";
+
+export default props => <>{Routes}</>;
diff --git a/app/javascript/components/Home.jsx b/app/javascript/components/Home.jsx
new file mode 100644
index 0000000..b6c21e2
--- /dev/null
+++ b/app/javascript/components/Home.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default () => (
+  <div className="vw-100 vh-100 primary-color d-flex align-items-center justify-content-center">
+    <div className="jumbotron jumbotron-fluid bg-transparent">
+      <div className="container secondary-color">
+        <h1 className="display-4">Games!</h1>
+        <p className="lead">
+			All the games I have worked on that run on the web!
+        </p>
+        <hr className="my-4" />
+        <Link
+          to="/games"
+          className="btn btn-lg custom-button"
+          role="button"
+        >
+          View Games
+        </Link>
+      </div>
+    </div>
+  </div>
+);
diff --git a/app/javascript/components/index.jsx b/app/javascript/components/index.jsx
new file mode 100644
index 0000000..0044916
--- /dev/null
+++ b/app/javascript/components/index.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+document.addEventListener("turbo:load", () => {
+	const root = createRoot(
+		document.body.appendChild(document.createElement("div"))
+	);
+	root.render(<App />);
+});
diff --git a/app/javascript/routes/index.jsx b/app/javascript/routes/index.jsx
new file mode 100644
index 0000000..e231cc5
--- /dev/null
+++ b/app/javascript/routes/index.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "../components/Home";
+
+export default (
+	<Router>
+		<Routes>
+			<Route path="/" element = {<Home />} />
+		</Routes>
+	</Router>
+);
diff --git a/app/views/homepage/index.html.erb b/app/views/homepage/index.html.erb
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/app/views/homepage/index.html.erb