4 files changed, 191 insertions, 0 deletions
diff --git a/apps/landing/app/favicon.ico b/apps/landing/app/favicon.ico
new 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>
+  );
+}