feat: about hero page

Author: Koshelev Kirill

features/layout/index.ts

@@ -0,0 +1 @@
+export { Footer } from './ui/Footer'

features/layout/ui/Footer.tsx

@@ -0,0 +1,11 @@
+export const Footer = () => {
+  return (
+    <footer className="border-t">
+      <div className="px-4 py-4 mx-auto overflow-hidden max-w-7xl sm:px-6 lg:px-8">
+        <p className="text-base text-center text-gray-400">
+          &copy; With ❤️ by Kirill Koshelev
+        </p>
+      </div>
+    </footer>
+  )
+}

lib/router.ts

@@ -2,4 +2,5 @@ export enum ROUTES {
   HOME = '/',
   CAMERA = '/camera',
   FORM = '/form',
+  ABOUT = '/about',
 }

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^1.6.6",
+    "@heroicons/react": "^1.0.6",
     "@sentry/react": "^7.5.1",
     "@sentry/tracing": "^7.5.1",
     "amplitude-js": "^8.18.5",

pages/_app.tsx

@@ -16,6 +16,11 @@ function MyApp({ Component, pageProps, router }: AppProps) {
   React.useEffect(() => {
     initAmplitude()
   }, [])
+  const { pathname } = router
+
+  if (pathname === ROUTES.ABOUT) {
+    return <Component {...pageProps} />
+  }
 
   return (
     <App theme="ios" dark>

pages/about.tsx

@@ -0,0 +1,53 @@
+/* This example requires Tailwind CSS v2.0+ */
+import { Fragment } from 'react'
+import { Popover, Transition } from '@headlessui/react'
+import { MenuIcon, XIcon } from '@heroicons/react/outline'
+import { Footer } from 'features/layout'
+
+const navigation = [
+  { name: 'Product', href: '#' },
+  { name: 'Features', href: '#' },
+  { name: 'Marketplace', href: '#' },
+  { name: 'Company', href: '#' },
+]
+
+export default function About() {
+  return (
+    <div className="relative flex flex-col justify-between min-h-screen overflow-hidden bg-gray-50">
+      <div className="relative pt-6 pb-16 sm:pb-24">
+        <main className="px-4 mx-auto mt-16 max-w-7xl sm:mt-24">
+          <div className="text-center">
+            <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
+              <span className="block xl:inline">Scan and save any</span>{' '}
+              <span className="block text-indigo-600 xl:inline">QR codes</span>
+            </h1>
+            {/* <p className="max-w-md mx-auto mt-3 text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
+              Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
+              lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
+              fugiat aliqua.
+            </p> */}
+            <div className="max-w-md mx-auto mt-5 sm:flex sm:justify-center md:mt-8">
+              <div className="rounded-md shadow">
+                <a
+                  href="/"
+                  className="flex items-center justify-center w-full px-8 py-3 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"
+                >
+                  Go to app
+                </a>
+              </div>
+              {/* <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
+                <a
+                  href="#"
+                  className="flex items-center justify-center w-full px-8 py-3 text-base font-medium text-indigo-600 bg-white border border-transparent rounded-md hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
+                >
+                  Live demo
+                </a>
+              </div> */}
+            </div>
+          </div>
+        </main>
+      </div>
+      <Footer />
+    </div>
+  )
+}