diff options
| author | MohamedBassem <me@mbassem.com> | 2024-03-19 19:24:29 +0000 |
|---|---|---|
| committer | MohamedBassem <me@mbassem.com> | 2024-03-19 19:24:29 +0000 |
| commit | 2c03ee104d06e1be712356efa06a8b3cbe2d09dc (patch) | |
| tree | e11fee36ae95dfc9255e42054b55b048973a2448 /apps/landing/app | |
| parent | eed65a424630be5e7d673c6ac3f19b72b2d79dc7 (diff) | |
| download | karakeep-2c03ee104d06e1be712356efa06a8b3cbe2d09dc.tar.zst | |
refactor: Move landing page to its own app to deploy it separately
Diffstat (limited to 'apps/landing/app')
| -rw-r--r-- | apps/landing/app/favicon.ico | bin | 0 -> 15406 bytes | |||
| -rw-r--r-- | apps/landing/app/globals.css | 76 | ||||
| -rw-r--r-- | apps/landing/app/layout.tsx | 25 | ||||
| -rw-r--r-- | apps/landing/app/page.tsx | 90 |
4 files changed, 191 insertions, 0 deletions
diff --git a/apps/landing/app/favicon.ico b/apps/landing/app/favicon.ico Binary files differnew file mode 100644 index 00000000..750e3c04 --- /dev/null +++ b/apps/landing/app/favicon.ico diff --git a/apps/landing/app/globals.css b/apps/landing/app/globals.css new file mode 100644 index 00000000..8abdb15c --- /dev/null +++ b/apps/landing/app/globals.css @@ -0,0 +1,76 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/apps/landing/app/layout.tsx b/apps/landing/app/layout.tsx new file mode 100644 index 00000000..331c8b11 --- /dev/null +++ b/apps/landing/app/layout.tsx @@ -0,0 +1,25 @@ +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; + +import "./globals.css"; + +import React from "react"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata: Metadata = { + title: "Hoarder", + description: "Your AI powered second brain", +}; + +export default async function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + <html lang="en"> + <body className={inter.className}>{children}</body> + </html> + ); +} diff --git a/apps/landing/app/page.tsx b/apps/landing/app/page.tsx new file mode 100644 index 00000000..d87962bb --- /dev/null +++ b/apps/landing/app/page.tsx @@ -0,0 +1,90 @@ +import Image from "next/image"; +import Link from "next/link"; +import { Button, buttonVariants } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; +import screenshot from "@/public/screenshot.png"; +import { ExternalLink, Github, PackageOpen } from "lucide-react"; + +const GITHUB_LINK = "https://github.com/MohamedBassem/hoarder-app"; + +function NavBar() { + return ( + <div className="flex justify-between px-3 py-4"> + <div className="flex items-center justify-center gap-x-2"> + <PackageOpen size="40" className="" /> + <p className="text-2xl">Hoarder</p> + </div> + <div className="hidden gap-10 sm:flex"> + <Link href="#" className="flex justify-center gap-2 text-center"> + Docs + </Link> + <Link + href={GITHUB_LINK} + className="flex justify-center gap-2 text-center" + > + Github <ExternalLink /> + </Link> + </div> + </div> + ); +} + +function Hero() { + return ( + <div className="mt-32 flex flex-grow flex-col items-center justify-center gap-4"> + <div className="mt-4 w-full space-y-6 text-center"> + <p className="text-center text-5xl font-bold"> + The{" "} + <span className="bg-gradient-to-r from-purple-600 to-red-600 bg-clip-text text-transparent"> + Bookmark Everything + </span>{" "} + App + </p> + <div className="mx-auto w-full gap-2 text-xl md:w-3/5"> + <p className="text-center text-gray-400"> + Quickly save links, notes, and images and hoarder will automatically + tag them for you using AI for faster retrieval. Built for the data + hoarders out there! + </p> + <p className="text-center text-gray-400"> + Open source, and self hostable! + </p> + </div> + </div> + <div className="flex h-10 gap-4"> + <Button className="h-full w-28" variant="default"> + Demo + </Button> + <Link + href={GITHUB_LINK} + className={cn( + "flex h-full w-28 gap-2", + buttonVariants({ variant: "outline" }), + )} + > + <Github /> Github + </Link> + </div> + </div> + ); +} + +function Screenshots() { + return ( + <div className="mx-auto mt-6 w-11/12"> + <Image alt="screenshot" src={screenshot} /> + </div> + ); +} + +export default function LandingPage() { + return ( + <div className="flex min-h-screen flex-col"> + <div className="container flex flex-col pb-10"> + <NavBar /> + <Hero /> + </div> + <Screenshots /> + </div> + ); +} |