landing-3

apps/web/src/components/not-found.tsx

@@ -0,0 +1,108 @@
+import { Link } from "@tanstack/react-router";
+
+export function NotFoundDocument() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-1 flex items-center justify-center bg-linear-to-b from-stone-50 to-stone-100 px-4">
+        <div className="text-center">
+          <h1 className="text-3xl font-medium text-neutral-700 mb-4 font-serif">
+            Page Not Found
+          </h1>
+
+          <div className="text-[200px] leading-none font-caprasimo text-neutral-800 mb-8">
+            404
+          </div>
+
+          <p className="text-base text-neutral-600 max-w-md mx-auto">
+            We couldn't find the page you were looking for. If you think this is an error, you can{" "}
+            <a
+              href="mailto:[email protected]"
+              className="text-stone-700 underline hover:text-stone-900 transition-colors"
+            >
+              let us know
+            </a>
+            .
+          </p>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <header className="sticky top-0 bg-white/80 backdrop-blur-sm border-b border-neutral-100 z-50">
+      <div className="max-w-6xl mx-auto px-4 sm:px-0 py-3 border-x border-neutral-100">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Link
+              to="/"
+              className="font-semibold text-2xl font-serif hover:scale-105 transition-transform"
+            >
+              Hyprnote
+            </Link>
+            <a
+              href="https://docs.hyprnote.com"
+              className="text-sm text-neutral-600 hover:text-neutral-800 transition-colors"
+            >
+              Docs
+            </a>
+            <a
+              href="https://hyprnote.com/blog"
+              className="text-sm text-neutral-600 hover:text-neutral-800 transition-colors"
+            >
+              Blog
+            </a>
+            <Link
+              to="/pricing"
+              className="text-sm text-neutral-600 hover:text-neutral-800 transition-colors"
+            >
+              Pricing
+            </Link>
+          </div>
+          <nav className="flex items-center gap-6">
+            <div className="flex gap-3">
+              <Link
+                to="/auth"
+                search={{ flow: "web" }}
+                className="px-3 h-8 flex items-center text-sm text-neutral-500 hover:text-neutral-800 transition-colors"
+              >
+                Get Started
+              </Link>
+              <Link
+                to="/downloads"
+                className="px-4 h-8 flex items-center text-sm bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%] transition-all"
+              >
+                Download
+              </Link>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="border-t border-neutral-100 bg-white">
+      <div className="max-w-6xl mx-auto px-4 sm:px-0 py-6 border-x border-neutral-100">
+        <div className="flex items-center justify-between text-sm text-neutral-500">
+          <p>© {currentYear} Fastrepl, Inc.</p>
+          <div className="flex gap-6">
+            <a href="/privacy" className="hover:text-neutral-800 transition-colors">
+              Privacy
+            </a>
+            <a href="/terms" className="hover:text-neutral-800 transition-colors">
+              Terms
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

apps/web/src/routeTree.gen.ts

@@ -9,21 +9,26 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as AuthRouteImport } from './routes/auth'
 import { Route as ViewRouteRouteImport } from './routes/_view/route'
 import { Route as ViewIndexRouteImport } from './routes/_view/index'
 import { Route as WebhookStripeRouteImport } from './routes/webhook/stripe'
 import { Route as WebhookNangoRouteImport } from './routes/webhook/nango'
 import { Route as CallbackAuthRouteImport } from './routes/callback/auth'
 import { Route as ViewPricingRouteImport } from './routes/_view/pricing'
 import { Route as ViewDownloadsRouteImport } from './routes/_view/downloads'
-import { Route as ViewAuthRouteImport } from './routes/_view/auth'
 import { Route as ViewAppRouteRouteImport } from './routes/_view/app/route'
 import { Route as ViewAppIndexRouteImport } from './routes/_view/app/index'
 import { Route as ApiSyncWriteRouteImport } from './routes/api/sync.write'
 import { Route as ApiSyncReadRouteImport } from './routes/api/sync.read'
 import { Route as ViewAppIntegrationRouteImport } from './routes/_view/app/integration'
 import { Route as ViewAppAccountRouteImport } from './routes/_view/app/account'
 
+const AuthRoute = AuthRouteImport.update({
+  id: '/auth',
+  path: '/auth',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ViewRouteRoute = ViewRouteRouteImport.update({
   id: '/_view',
   getParentRoute: () => rootRouteImport,
@@ -58,11 +63,6 @@ const ViewDownloadsRoute = ViewDownloadsRouteImport.update({
   path: '/downloads',
   getParentRoute: () => ViewRouteRoute,
 } as any)
-const ViewAuthRoute = ViewAuthRouteImport.update({
-  id: '/auth',
-  path: '/auth',
-  getParentRoute: () => ViewRouteRoute,
-} as any)
 const ViewAppRouteRoute = ViewAppRouteRouteImport.update({
   id: '/app',
   path: '/app',
@@ -95,8 +95,8 @@ const ViewAppAccountRoute = ViewAppAccountRouteImport.update({
 } as any)
 
 export interface FileRoutesByFullPath {
+  '/auth': typeof AuthRoute
   '/app': typeof ViewAppRouteRouteWithChildren
-  '/auth': typeof ViewAuthRoute
   '/downloads': typeof ViewDownloadsRoute
   '/pricing': typeof ViewPricingRoute
   '/callback/auth': typeof CallbackAuthRoute
@@ -110,7 +110,7 @@ export interface FileRoutesByFullPath {
   '/app/': typeof ViewAppIndexRoute
 }
 export interface FileRoutesByTo {
-  '/auth': typeof ViewAuthRoute
+  '/auth': typeof AuthRoute
   '/downloads': typeof ViewDownloadsRoute
   '/pricing': typeof ViewPricingRoute
   '/callback/auth': typeof CallbackAuthRoute
@@ -126,8 +126,8 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/_view': typeof ViewRouteRouteWithChildren
+  '/auth': typeof AuthRoute
   '/_view/app': typeof ViewAppRouteRouteWithChildren
-  '/_view/auth': typeof ViewAuthRoute
   '/_view/downloads': typeof ViewDownloadsRoute
   '/_view/pricing': typeof ViewPricingRoute
   '/callback/auth': typeof CallbackAuthRoute
@@ -143,8 +143,8 @@ export interface FileRoutesById {
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
-    | '/app'
     | '/auth'
+    | '/app'
     | '/downloads'
     | '/pricing'
     | '/callback/auth'
@@ -173,8 +173,8 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/_view'
+    | '/auth'
     | '/_view/app'
-    | '/_view/auth'
     | '/_view/downloads'
     | '/_view/pricing'
     | '/callback/auth'
@@ -190,6 +190,7 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   ViewRouteRoute: typeof ViewRouteRouteWithChildren
+  AuthRoute: typeof AuthRoute
   CallbackAuthRoute: typeof CallbackAuthRoute
   WebhookNangoRoute: typeof WebhookNangoRoute
   WebhookStripeRoute: typeof WebhookStripeRoute
@@ -199,6 +200,13 @@ export interface RootRouteChildren {
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/auth': {
+      id: '/auth'
+      path: '/auth'
+      fullPath: '/auth'
+      preLoaderRoute: typeof AuthRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_view': {
       id: '/_view'
       path: ''
@@ -248,13 +256,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ViewDownloadsRouteImport
       parentRoute: typeof ViewRouteRoute
     }
-    '/_view/auth': {
-      id: '/_view/auth'
-      path: '/auth'
-      fullPath: '/auth'
-      preLoaderRoute: typeof ViewAuthRouteImport
-      parentRoute: typeof ViewRouteRoute
-    }
     '/_view/app': {
       id: '/_view/app'
       path: '/app'
@@ -318,15 +319,13 @@ const ViewAppRouteRouteWithChildren = ViewAppRouteRoute._addFileChildren(
 
 interface ViewRouteRouteChildren {
   ViewAppRouteRoute: typeof ViewAppRouteRouteWithChildren
-  ViewAuthRoute: typeof ViewAuthRoute
   ViewDownloadsRoute: typeof ViewDownloadsRoute
   ViewPricingRoute: typeof ViewPricingRoute
   ViewIndexRoute: typeof ViewIndexRoute
 }
 
 const ViewRouteRouteChildren: ViewRouteRouteChildren = {
   ViewAppRouteRoute: ViewAppRouteRouteWithChildren,
-  ViewAuthRoute: ViewAuthRoute,
   ViewDownloadsRoute: ViewDownloadsRoute,
   ViewPricingRoute: ViewPricingRoute,
   ViewIndexRoute: ViewIndexRoute,
@@ -338,6 +337,7 @@ const ViewRouteRouteWithChildren = ViewRouteRoute._addFileChildren(
 
 const rootRouteChildren: RootRouteChildren = {
   ViewRouteRoute: ViewRouteRouteWithChildren,
+  AuthRoute: AuthRoute,
   CallbackAuthRoute: CallbackAuthRoute,
   WebhookNangoRoute: WebhookNangoRoute,
   WebhookStripeRoute: WebhookStripeRoute,

apps/web/src/routes/__root.tsx

@@ -1,11 +1,12 @@
+import appCss from "@/styles.css?url";
+
 import type { QueryClient } from "@tanstack/react-query";
 import { createRootRouteWithContext, HeadContent, Scripts } from "@tanstack/react-router";
 import { lazy } from "react";
 
+import { NotFoundDocument } from "@/components/not-found";
 import { fetchUser } from "@/functions/auth";
 
-import appCss from "@/styles.css?url";
-
 interface RouterContext {
   queryClient: QueryClient;
 }
@@ -25,8 +26,8 @@ export const Route = createRootRouteWithContext<RouterContext>()({
       { rel: "stylesheet", href: appCss },
     ],
   }),
-
   shellComponent: RootDocument,
+  notFoundComponent: NotFoundDocument,
 });
 
 function RootDocument({ children }: { children: React.ReactNode }) {