[simple-example][m] - make it prettier

examples/simple-example/components/Footer.tsx

@@ -0,0 +1,16 @@
+export default function Footer() {
+  return (
+    <footer className="bg-white">
+      <div className="mx-auto max-w-7xl overflow-hidden px-6 py-8 sm:py-12 lg:px-8">
+        <div className="mt-10 flex justify-center space-x-10">
+          <span className="text-gray-400 hover:text-gray-500 flex gap-4 items-center">
+            <span className="mt-2">Powered by</span>
+            <a href="https://datopian.com">
+              <img src="/logo.png" className="w-32 h-10" />
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}

examples/simple-example/components/NavBar.tsx

@@ -0,0 +1,31 @@
+export default function NavBar() {
+  return (
+    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div className="flex h-16 justify-between">
+        <div className="flex">
+          <div className="flex flex-shrink-0 items-center">
+            <img
+              className="block h-8 w-auto lg:hidden"
+              src="/logo.png"
+              alt="Your Company"
+            />
+            <img
+              className="hidden h-8 w-auto lg:block mt-4"
+              src="/logo.png"
+              alt="Your Company"
+            />
+          </div>
+          <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+            {/* Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
+            <a
+              href="/"
+              className="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900"
+            >
+              Home
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}