Merge pull request #4 from nezz0746/feat/add-landing

feat: add landing page & layouts w/ app router
nezz0746 · Nov 13, 2023 · 7a2614c · 7a2614c
2 parents 331512a + 8b4490c
commit 7a2614c
Show file tree

Hide file tree

Showing 23 changed files with 288 additions and 151 deletions.
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn run build
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import "@/styles/globals.css";
+import "mapbox-gl/dist/mapbox-gl.css";
+import "@rainbow-me/rainbowkit/styles.css";
+import DappProvider from "@/components/DappProvider";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <html>
+      <body>
+        <DappProvider>
+          <div className="flex flex-col min-h-screen">
+            <main className="flex-grow">{children}</main>
+          </div>
+        </DappProvider>
+      </body>
+    </html>
+  );
+};
+
+export default Layout;
diff --git a/apps/web/app/move/layout.tsx b/apps/web/app/move/layout.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import AppMap from "@/components/Map/Map";
+
+const Home = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="h-screen flex flex-row gap-2">
+      <div className="w-2/3 relative">
+        <AppMap />
+      </div>
+      <div className="w-1/3 p-4">
+        <div className="w-full h-full">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/apps/web/components/SidePannel.tsx → apps/web/app/move/page.tsx b/apps/web/components/SidePannel.tsx → apps/web/app/move/page.tsx
@@ -1,18 +1,19 @@
+"use client";
+
+import ConnectButton from "@/components/ConnectButton";
 import { usePosition } from "@/hooks/usePosition";
-import ConnectButton from "./ConnectButton";
 import classNames from "classnames";
+import type { NextPage } from "next";
 
-const SidePannel = () => {
+const Home: NextPage = () => {
   const { position, setPrecision } = usePosition();
 
   return (
-    <>
-      <div>
-        <p className="text-lg font-bold">
-          <ConnectButton />
-        </p>
+    <div className="h-full flex flex-col">
+      <div className="">
+        <ConnectButton />
       </div>
-      <div className="flex flex-col justify-between h-full pt-4">
+      <div className="flex flex-col flex-grow justify-between pt-4">
         <div className="flex flex-col gap-6">
           <div className="flex flex-row items-center justify-between font-display">
             <p>Geohash</p>
@@ -55,13 +56,13 @@ const SidePannel = () => {
             )}
           </div>
 
-          <button className="btn btn-outline cursor-not-allowed w-full rounded-none">
+          <button className="btn cursor-not-allowed w-full">
             <p className="font-display">Move</p>
           </button>
         </div>
-      </div>
-    </>
+      </div>{" "}
+    </div>
   );
 };
 
-export default SidePannel;
+export default Home;
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { content } from "@/services/content";
+import bg_image from "public/globe.png";
+import Link from "next/link";
+import Image from "next/image";
+import ConnectButton from "@/components/ConnectButton";
+
+const Page = () => {
+  return (
+    <>
+      <div className="p-3 flex flex-col">
+        <nav className="navbar z-10 bg-white bg-opacity-30">
+          <div className="bg-opacity-100 flex flex-row justify-between w-full">
+            <Link href={"/"}>
+              <button className="btn">Home</button>
+            </Link>
+            <ConnectButton />
+          </div>
+        </nav>
+      </div>
+      <div className="absolute top-0 left-0 w-full">
+        <div
+          className="hero min-h-[110vh]"
+          style={{
+            backgroundImage: `url(${bg_image.src})`,
+            backgroundSize: "cover",
+          }}
+        >
+          <div className="hero-overlay bg-opacity-40"></div>
+          <div className="hero-content text-center">
+            <div className="md:w-3/4 relative p-10">
+              <div className="absolute -z-10 top-0 left-0 w-full h-full bg-white opacity-70 blur-xl rounded-full" />
+              <h1 className="mb-5 text-black text-5xl z-20 font-bold">
+                {content.title}
+              </h1>
+              <p className="mb-5 text-neutral">{content.description}</p>
+              <div className="flex flex-row gap-2 justify-center">
+                <Link
+                  href={"https://github.com/nezz0746/ensemble"}
+                  target="_blank"
+                >
+                  <button className="btn btn-neutral">
+                    <Image
+                      src="/github-white.png"
+                      height={24}
+                      width={24}
+                      alt="github"
+                    />
+                    Github
+                  </button>
+                </Link>
+                <Link href={"/move"}>
+                  <button className="btn btn-secondary">Launch App</button>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer className="footer items-center p-4">
+          <aside className="items-center grid-flow-col">
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              fillRule="evenodd"
+              clipRule="evenodd"
+              className="fill-current"
+            >
+              <path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
+            </svg>
+            <p>Copyright © 2023 - All right reserved</p>
+          </aside>
+          <nav className="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
+            <a
+              href="https://github.com/nezz0746/ensemble"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Image src="/github.png" height={24} width={24} alt="github" />
+            </a>
+          </nav>
+        </footer>
+      </div>
+    </>
+  );
+};
+
+export default Page;
diff --git a/apps/web/components/ConnectButton.tsx b/apps/web/components/ConnectButton.tsx
@@ -31,24 +31,24 @@ const ConnectButton = () => {
                 userSelect: "none",
               },
             })}
-            className="font-display flex flex-row gap-2"
+            className="flex flex-row gap-2"
           >
             {(() => {
               if (!connected) {
                 return (
                   <button
-                    className="btn btn-outline rounded-none flex-grow"
+                    className="btn flex-grow"
                     onClick={openConnectModal}
                     type="button"
                   >
-                    Connect Wallet
+                    Connect
                   </button>
                 );
               }
               if (chain.unsupported) {
                 return (
                   <button
-                    className="btn btn-outline rounded-none flex-grow"
+                    className="btn flex-grow"
                     onClick={openChainModal}
                     type="button"
                   >
@@ -57,10 +57,10 @@ const ConnectButton = () => {
                 );
               }
               return (
-                <>
+                <div className="flex flex-col-reverse md:flex-row w-full gap-2">
                   <button
                     onClick={openChainModal}
-                    className="btn btn-outline rounded-none flex-grow"
+                    className="btn flex-grow"
                     type="button"
                   >
                     {chain.hasIcon && (
@@ -88,7 +88,7 @@ const ConnectButton = () => {
                   <button
                     onClick={openAccountModal}
                     type="button"
-                    className="btn btn-outline rounded-none flex-grow flex flex-row items-center gap-2"
+                    className="btn flex-grow flex flex-row items-center gap-2"
                   >
                     <p className="text-xl">
                       {(emojiAvatarForAddress(account.address) ?? {}).emoji}
@@ -98,7 +98,7 @@ const ConnectButton = () => {
                       ? ` (${account.displayBalance})`
                       : ""}
                   </button>
-                </>
+                </div>
               );
             })()}
           </div>

diff --git a/apps/web/components/Map/Map.tsx b/apps/web/components/Map/Map.tsx
@@ -3,6 +3,7 @@ import { commonLocations } from "@/services/constants";
 import GeohashLayer from "./GeohashLayer";
 import AccountMarker from "./AccountMarker";
 import ZoomEffects from "./ZoomEffects";
+import Link from "next/link";
 
 const token = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
 
@@ -21,10 +22,10 @@ const AppMap = () => {
         interactiveLayerIds={["data"]}
         mapStyle="mapbox://styles/nezz0746/closnc6ke00qa01nz5uvf7yad"
       >
-        <div className="bg-white flex flex-row gap-2 items-center p-2 absolute top-3 left-3 border">
-          <p className="font-display font-bold tracking-tight text-xl">
-            Ensemble
-          </p>
+        <div className="z-20 absolute top-3 left-3">
+          <Link href={"/"}>
+            <button className="btn">Home</button>
+          </Link>
         </div>
         <AccountMarker />
         <GeohashLayer />

diff --git a/apps/web/components/Map/ZoomEffects.tsx b/apps/web/components/Map/ZoomEffects.tsx
@@ -4,7 +4,7 @@ import { useMap } from "react-map-gl";
 
 const ZoomEffects = () => {
   const precisionToZoom: Record<number, number> = {
-    2: 4,
+    2: 3,
     3: 7,
     4: 9,
     5: 12,

diff --git a/apps/web/components/Navbar.tsx b/apps/web/components/Navbar.tsx
@@ -0,0 +1,18 @@
+import ConnectButton from "./ConnectButton";
+
+const Navbar = () => {
+  return (
+    <nav>
+      <div className="navbar bg-base-100 px-5 flex flex-row w-full justify-between border">
+        <a className="btn btn-outline rounded-none text-xl">Ensemble</a>
+        <div>
+          <p className="text-lg font-bold">
+            <ConnectButton />
+          </p>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -2,6 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
   transpilePackages: ["wagmi-config"],
+  webpack: (config) => {
+    config.externals.push("pino-pretty");
+    return config;
+  },
 };
 
 module.exports = nextConfig;
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -16,7 +16,7 @@
     "ethers": "^5.6.8",
     "immer": "^10.0.3",
     "mapbox-gl": "^2.15.0",
-    "next": "13.5.6",
+    "next": "14.0.2",
     "ngeohash": "^0.6.3",
     "react": "^18.1.0",
     "react-dom": "18.1.0",

diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
diff --git a/apps/web/pages/api/hello.ts b/apps/web/pages/api/hello.ts
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
diff --git a/apps/web/public/github-white.png b/apps/web/public/github-white.png
diff --git a/apps/web/public/github.png b/apps/web/public/github.png
diff --git a/apps/web/public/globe.png b/apps/web/public/globe.png
diff --git a/apps/web/services/content.ts b/apps/web/services/content.ts
@@ -0,0 +1,5 @@
+export const content = {
+  title: "Geofencing framework for humans & protocols",
+  description:
+    "Tailor you web experience to your location. Build bridges between communities around the globe.",
+};
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&family=Play:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&family=Londrina+Solid:wght@100;300;400;900&display=swap');
 
 .mapboxgl-ctrl-logo {
   display: none !important;

diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
@@ -1,14 +1,13 @@
 module.exports = {
   content: [
-    "./pages/**/*.{html,js,ts,tsx}",
+    "./app/**/*.{html,js,ts,tsx}",
     "./components/**/*.{html,js,ts,tsx}",
   ],
   theme: {
-    extend: {
-      fontFamily: {
-        display: ["Cabin Sketch"],
-      },
-    },
+    extend: {},
   },
   plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["dim"],
+  },
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ import { useMap } from "react-map-gl"; @@
     const ZoomEffects = () => {
       const precisionToZoom: Record<number, number> = {
-: 4,
+: 3,
 : 7,
 : 9,
 : 12,
@@ Expand Down @@