add basic site beautifulness

components/Layout.js

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import TawkTo from "tawkto-react";
+
+export default function Layout({ children, childWrapperStyles }) {
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") {
+      const tawk = new TawkTo("628514dd7b967b1179900ad3", "1g3btj0ld");
+      tawk.onStatusChange((status) => {
+        console.log("tawk initiated, status: ", status);
+      });
+    }
+  }, []);
+
+  return (
+    <>
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/site.webmanifest" />
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffd700" />
+      <meta name="msapplication-TileColor" content="#000000" />
+      <meta name="msapplication-TileImage" content="/mstile-144x144.png" />
+      <meta name="theme-color" content="#ffffff" />
+      {children}
+    </>
+  );
+}

components/YoutubeEmbed.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const YoutubeEmbed = ({ embedId }) => (
+  <div className="video-responsive">
+    <iframe
+      width="853"
+      height="480"
+      src={`https://www.youtube.com/embed/${embedId}`}
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+      title="Embedded youtube"
+    />
+  </div>
+);
+
+YoutubeEmbed.propTypes = {
+  embedId: PropTypes.string.isRequired,
+};
+
+export default YoutubeEmbed;

faviconDescription.json

@@ -0,0 +1,61 @@
+{
+  "masterPicture": "./money-bag_1f4b0.png",
+  "iconsPath": "/",
+  "design": {
+    "ios": {
+      "pictureAspect": "backgroundAndMargin",
+      "backgroundColor": "#ffffff",
+      "margin": "18%",
+      "assets": {
+        "ios6AndPriorIcons": true,
+        "ios7AndLaterIcons": true,
+        "precomposedIcons": true,
+        "declareOnlyDefaultIcon": true
+      }
+    },
+    "desktopBrowser": {
+      "design": "raw"
+    },
+    "windows": {
+      "pictureAspect": "noChange",
+      "backgroundColor": "#000000",
+      "onConflict": "override",
+      "assets": {
+        "windows80Ie10Tile": true,
+        "windows10Ie11EdgeTiles": {
+          "small": false,
+          "medium": true,
+          "big": false,
+          "rectangle": false
+        }
+      }
+    },
+    "androidChrome": {
+      "pictureAspect": "shadow",
+      "themeColor": "#ffffff",
+      "manifest": {
+        "name": "Hustle University 2.0 | Escape The Matrix",
+        "startUrl": "hustleu2.com",
+        "display": "standalone",
+        "orientation": "notSet",
+        "onConflict": "override",
+        "declared": true
+      },
+      "assets": {
+        "legacyIcon": false,
+        "lowResolutionIcons": false
+      }
+    },
+    "safariPinnedTab": {
+      "pictureAspect": "silhouette",
+      "themeColor": "#ffd700"
+    }
+  },
+  "settings": {
+    "scalingAlgorithm": "Mitchell",
+    "errorOnImageTooSmall": false,
+    "readmeFile": true,
+    "htmlCodeFile": true,
+    "usePathAsIs": false
+  }
+}

next.config.js

@@ -1,6 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  experimental: {
+    runtime: "nodejs",
+    serverComponents: true,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;