feat: Separate the landing page into a separate app

apps/docs/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/docs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/docs/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "iconLibrary": "lucide",
+  "tailwind": {
+    "config": "../../packages/ui/tailwind.config.js",
+    "css": "../../packages/ui/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@rememr/ui",
+    "ui": "@rememr/ui"
+  }
+}

apps/docs/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+})
+
+const eslintConfig = [
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
+]
+
+export default eslintConfig

apps/docs/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  /* config options here */
+}
+
+export default nextConfig

apps/docs/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@rememr/docs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test:types": "tsc --noEmit",
+    "clean": "rimraf node_modules .next"
+  },
+  "dependencies": {
+    "@rememr/ui": "workspace:^",
+    "lucide-react": "^0.424.0",
+    "motion": "^12.0.0",
+    "next": "15.4.5",
+    "next-themes": "^0.3.0",
+    "react": "~19.0.0",
+    "react-dom": "~19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.4.5",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.2.9",
+    "typescript": "^5"
+  }
+}

apps/docs/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ['@tailwindcss/postcss'],
+}
+
+export default config

apps/docs/src/app/globals.css

@@ -0,0 +1,4 @@
+@import "@rememr/ui/styles.css";
+
+/* biome-ignore lint/suspicious/noUnknownAtRules: needed for tailwind */
+@source './src';

apps/docs/src/app/layout.tsx

@@ -0,0 +1,52 @@
+import { cn, Toaster } from '@rememr/ui'
+import { Geist_Mono } from 'next/font/google'
+import type { ReactNode } from 'react'
+import { Providers } from './providers'
+
+import './globals.css'
+
+export const metadata = {
+  title: 'rememr',
+  description: 'A stream of bookmarks',
+}
+
+const geistSans = Geist_Mono({
+  variable: '--font-sans',
+  display: 'swap',
+  subsets: ['latin'],
+})
+
+const geistMono = Geist_Mono({
+  variable: '--font-mono',
+  display: 'swap',
+  subsets: ['latin'],
+})
+
+const geistSerif = Geist_Mono({
+  variable: '--font-serif',
+  display: 'swap',
+  subsets: ['latin'],
+})
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta content="rememr" name="apple-mobile-web-app-title" />
+      </head>
+      <body
+        className={cn(
+          geistSans.variable,
+          geistMono.variable,
+          geistSerif.variable,
+          'antialiased'
+        )}
+      >
+        <Providers>
+          {children}
+          <Toaster position="top-right" />
+        </Providers>
+      </body>
+    </html>
+  )
+}

apps/docs/src/app/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "rememr",
+  "short_name": "rememr",
+  "icons": [
+    {
+      "src": "/favicon/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/favicon/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/docs/src/app/page.tsx

@@ -0,0 +1,64 @@
+import { Button } from '@rememr/ui'
+import { Github } from 'lucide-react'
+import ContentSection from '@/components/landing/content'
+import FAQs from '@/components/landing/faqs'
+import FeaturesSection from '@/components/landing/features'
+import HeroSection from '@/components/landing/hero'
+
+export default function HomePage() {
+  return (
+    <main>
+      <HeroSection />
+      <FeaturesSection />
+      <ContentSection />
+      <FAQs />
+
+      {/* CTA Section */}
+      <section className="bg-muted px-4 py-24">
+        <div className="mx-auto max-w-4xl rounded-2xl bg-white p-12 text-center">
+          <h2 className="mb-6 font-bold text-3xl text-foreground">
+            Ready to organize your bookmarks?
+          </h2>
+          <p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
+            Install rememr on your server now.
+          </p>
+          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+            <Button asChild className="min-w-40" size="lg">
+              <a
+                href="https://github.com/ivasilov/rememr"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <Github className="mr-2 h-4 w-4" />
+                View documentation on GitHub
+              </a>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t">
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex items-center justify-between">
+            <p className="text-muted-foreground text-sm">
+              © {new Date().getFullYear()} rememr. Open source under MIT
+              license.
+            </p>
+            <div className="flex items-center gap-6">
+              <a
+                className="inline-flex items-center gap-2 text-muted-foreground text-sm hover:text-primary"
+                href="https://github.com/ivasilov/rememr"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <Github className="h-4 w-4" />
+                <span>GitHub</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </main>
+  )
+}

apps/docs/src/app/providers.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { ThemeProvider } from 'next-themes'
+import type { PropsWithChildren } from 'react'
+
+export const Providers = ({ children }: PropsWithChildren<object>) => {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="light"
+      enableSystem
+      storageKey="rememr-theme-key"
+      themes={['light', 'dark']}
+    >
+      {children}
+    </ThemeProvider>
+  )
+}

apps/docs/src/components/landing/content.tsx

@@ -0,0 +1,21 @@
+import { WordRotate } from '../ui/word-rotate'
+
+export default function ContentSection() {
+  return (
+    <section className="bg-muted py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="grid gap-6 md:grid-cols-2 md:gap-12">
+          <h2 className="font-medium text-4xl">Own your data.</h2>
+          <div className="space-y-6">
+            <p>
+              We started building rememr to be easy to selfhost and avoid losing
+              our favorite tools. <span>We were there when </span>
+              <WordRotate words={['Google Reader', 'Pocket', 'Omnivore']} />
+              <span> shut down, we remember.</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}