From efbec1419ef4920816fb94330c38880b564ca1b1 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 19 Mar 2024 17:45:33 +0000
Subject: feature: A new landing page

---
 apps/web/components/landing/LandingPage.tsx | 91 +++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 apps/web/components/landing/LandingPage.tsx

(limited to 'apps/web/components')

diff --git a/apps/web/components/landing/LandingPage.tsx b/apps/web/components/landing/LandingPage.tsx
new file mode 100644
index 00000000..cf8e8abd
--- /dev/null
+++ b/apps/web/components/landing/LandingPage.tsx
@@ -0,0 +1,91 @@
+import Image from "next/image";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import screenshot from "@/public/landing/screenshot.png";
+import { ExternalLink, Github, PackageOpen } from "lucide-react";
+
+import { Button, buttonVariants } from "../ui/button";
+
+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>
+  );
+}
-- 
cgit v1.2.3-70-g09d2