add frontend files

app/javascript/src/components/Container.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import cx from "classnames";
+
+export type ContainerProps = {
+  className?: string;
+};
+
+export const Container = ({
+  children,
+  className,
+}: React.PropsWithChildren<ContainerProps>) => {
+  return (
+    <div className="w-full flex items-center justify-center px-8 py-2 2xl:p-0">
+      <div className={cx("max-w-5xl w-full flex", className)}>{children}</div>
+    </div>
+  );
+};

app/javascript/src/components/Header.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export type HeaderProps = {};
+
+export const Header = ({ children }: React.PropsWithChildren<HeaderProps>) => {
+  return (
+    <div className="w-full h-64 bg-gradient-to-br from-green-300 to-green-400 grid place-items-center">
+      {children}
+    </div>
+  );
+};

app/javascript/src/components/Navbar.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+import XStakeLogo from '../images/logo.png'
+import { useAppContext } from "../contexts/AppContext";
+
+export const Navbar = () => {
+  const { setSideNavExpanded } = useAppContext()
+
+  const handleExpandSideNav = () => {
+    setSideNavExpanded((prevState) => !prevState);
+  };
+
+  const { loginWithRedirect, logout, isAuthenticated } = useAuth0();
+
+  return (
+    <nav className="fixed w-full h-16 flex bg-white shadow items-center px-4 space-x-2 z-50">
+      <button
+        className="w-10 h-10 xl:hidden"
+        onClick={() => handleExpandSideNav()}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-full w-full"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
+      </button>
+      <img
+        src={XStakeLogo}
+        alt={"XStake Logo"}
+        width={64}
+        placeholder={"blurred"}
+      />
+      <h1 className="text-2xl font-bold">XStake</h1>
+      <div className="w-full h-full flex items-center justify-end">
+        {isAuthenticated ? (
+          <button
+            className="cursor-pointer hover:bg-gray-100 h-full px-4 font-bold"
+            onClick={() => logout({ returnTo: window.location.origin })}
+          >
+            Sair
+          </button>
+        ) : (
+          <button
+            className="cursor-pointer hover:bg-gray-100 h-full px-4 font-bold"
+            onClick={loginWithRedirect}
+          >
+            Entrar
+          </button>
+        )}
+      </div>
+    </nav>
+  );
+};

app/javascript/src/components/PoolListing.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { pools } from "../constants/Pools";
+
+export const PoolListing = () => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full gap-8 py-4 -mt-16 overflow-x-hidden">
+      {pools
+        .filter((pool) => !pool.isFinished)
+        .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+        .map((pool) => (
+          <div
+            key={pool.sousId}
+            id={pool.sousId.toString()}
+            className="flex items-center w-full h-auto bg-white px-16 p-4 rounded-xl shadow flex-col relative z-0 overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer"
+          >
+            <div
+              className="box-border h-full w-full absolute left-0 top-0 rounded-xl opacity-20 filter blur-2xl bg-cover"
+              style={{
+                backgroundImage: `url('https://pancakeswap.finance/images/tokens/${pool.earningToken.address["56"]}.svg')`,
+                backgroundPositionX: "50%",
+                backgroundPositionY: "50%",
+                backgroundSize: "125%",
+                zIndex: -1,
+              }}
+            />
+            <img
+              className="shadow-xl rounded-full w-24"
+              src={`https://pancakeswap.finance/images/tokens/${pool.earningToken.address["56"]}.svg`}
+              alt={`${pool.earningToken.symbol} icon`}
+            />
+            <div className="mt-4 p-2">
+              <p>
+                <span className="font-medium">Investir:</span>{" "}
+                {pool.stakingToken.symbol}
+              </p>
+              <p>
+                <span className="font-medium">Receber:</span>{" "}
+                {pool.earningToken.symbol}
+              </p>
+              <div className="flex items-center">
+                <span className="font-medium mr-1">Rendimento:</span>
+                <div className="w-10 h-5 inline-block animate-pulse bg-gray-300 rounded" />
+              </div>
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+};

app/javascript/src/components/SideNav.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import cx from "classnames";
+import { useAppContext } from "../contexts/AppContext";
+
+type MenuItem = {
+  label: string;
+};
+
+const MenuItems: MenuItem[] = [
+  {
+    label: "Início",
+  },
+  {
+    label: "Stake",
+  },
+  {
+    label: "Carteira",
+  },
+];
+
+
+export const SideNav = () => {
+  const { sideNavExpanded, setSideNavExpanded } = useAppContext()
+
+  const handleCloseSideNav = () => {
+    setSideNavExpanded(false);
+  };
+
+  return (
+    <div className="fixed left-0 right-0 bottom-0 mt-16 top-0 z-40 xl:static xl:w-72">
+      <div
+        role="row"
+        onClick={() => handleCloseSideNav()}
+        className={cx(
+          "xl:hidden absolute w-full h-full bg-black bg-opacity-60 backdrop-filter backdrop-blur-sm z-30 transition-all duration-500",
+          !sideNavExpanded && "opacity-0"
+        )}
+      />
+      <aside
+        className={`bg-white w-5/6 md:w-2/6 overflow-hidden absolute h-full drop-shadow-xl drop border-r border-gray-200 z-40 transition-all duration-500 xl:transition-none xl:mx-0 xl:static xl:w-full ${
+          sideNavExpanded ? "mx-0" : "-mx-full"
+        }`}
+      >
+        <ul>
+          {MenuItems.map((item) => (
+            <li
+              key={item.label}
+              className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer"
+            >
+              <a href="#">{item.label}</a>
+            </li>
+          ))}
+        </ul>
+      </aside>
+    </div>
+  );
+};