aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--apps/landing/app/page.tsx195
-rw-r--r--apps/landing/components/ui/button.tsx6
-rw-r--r--apps/landing/public/chrome-extension-badge.pngbin0 -> 10100 bytes
-rw-r--r--apps/landing/public/extension-badge.pngbin9171 -> 0 bytes
-rw-r--r--apps/landing/public/firefox-addon.pngbin0 -> 15473 bytes
-rw-r--r--apps/landing/public/google-play-badge.pngbin4904 -> 0 bytes
-rw-r--r--apps/landing/public/google-play-badge.webpbin0 -> 11122 bytes
-rw-r--r--apps/landing/public/hero.webpbin0 -> 292228 bytes
8 files changed, 171 insertions, 30 deletions
diff --git a/apps/landing/app/page.tsx b/apps/landing/app/page.tsx
index cfe04ce0..504608ff 100644
--- a/apps/landing/app/page.tsx
+++ b/apps/landing/app/page.tsx
@@ -4,19 +4,93 @@ import HoarderLogo from "@/components/HoarderLogo";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import appStoreBadge from "@/public/app-store-badge.png";
-import playStoreBadge from "@/public/google-play-badge.png";
-import screenshot from "@/public/screenshot.png";
-import { ExternalLink, Github } from "lucide-react";
+import chromeExtensionBadge from "@/public/chrome-extension-badge.png";
+import firefoxAddonBadge from "@/public/firefox-addon.png";
+import playStoreBadge from "@/public/google-play-badge.webp";
+import screenshot from "@/public/hero.webp";
+import {
+ ArrowDownNarrowWide,
+ Bookmark,
+ BrainCircuit,
+ Github,
+ Server,
+ SunMoon,
+ TextSearch,
+ WalletCards,
+} from "lucide-react";
const GITHUB_LINK = "https://github.com/hoarder-app/hoarder";
const DOCS_LINK = "https://docs.hoarder.app";
const DEMO_LINK = "https://try.hoarder.app";
+const platforms = [
+ {
+ name: "iOS",
+ url: "https://apps.apple.com/us/app/hoarder-app/id6479258022",
+ badge: appStoreBadge,
+ },
+ {
+ name: "Android",
+ url: "https://play.google.com/store/apps/details?id=app.hoarder.hoardermobile&pcampaignid=web_share",
+ badge: playStoreBadge,
+ },
+ {
+ name: "Chrome Extension",
+ url: "https://chromewebstore.google.com/detail/hoarder/kgcjekpmcjjogibpjebkhaanilehneje",
+ badge: chromeExtensionBadge,
+ },
+ {
+ name: "Firefox Addon",
+ url: "https://addons.mozilla.org/en-US/firefox/addon/hoarder/",
+ badge: firefoxAddonBadge,
+ },
+];
+
+const featuresList = [
+ {
+ icon: Bookmark,
+ title: "Bookmark",
+ description: "Bookmark links, take simple notes and store images.",
+ },
+ {
+ icon: BrainCircuit,
+ title: "AI Tagging",
+ description:
+ "Automatically tags your bookmarks using AI for faster retrieval.",
+ },
+ {
+ icon: ArrowDownNarrowWide,
+ title: "Auto Fetch",
+ description:
+ "Automatically fetches title, description and images for links.",
+ },
+ {
+ icon: WalletCards,
+ title: "Lists",
+ description: "Sort your bookmarks into lists for better organization.",
+ },
+ {
+ icon: TextSearch,
+ title: "Search",
+ description: "Search through all your bookmarks using full text search.",
+ },
+ {
+ icon: Server,
+ title: "Self Hosting",
+ description: "Easy self hosting with docker for privacy and control.",
+ },
+ {
+ icon: SunMoon,
+ title: "Dark Mode",
+ description: "Hoarder supports dark mode for better reading experience",
+ },
+];
+
function NavBar() {
return (
<div className="flex justify-between px-3 py-4">
- <HoarderLogo height={30} gap="8px" />
- <div className="hidden gap-10 sm:flex">
+ <HoarderLogo height={24} gap="8px" />
+ <div className="hidden items-center gap-6 sm:flex">
<Link
href={DOCS_LINK}
className="flex justify-center gap-2 text-center"
@@ -27,7 +101,17 @@ function NavBar() {
href={GITHUB_LINK}
className="flex justify-center gap-2 text-center"
>
- Github <ExternalLink />
+ Github
+ </Link>
+ <Link
+ href={DEMO_LINK}
+ target="_blank"
+ className={cn(
+ "text flex h-full w-28 gap-2",
+ buttonVariants({ variant: "default" }),
+ )}
+ >
+ Try Demo
</Link>
</div>
</div>
@@ -36,24 +120,21 @@ function NavBar() {
function Hero() {
return (
- <div className="mt-32 flex flex-grow flex-col items-center justify-center gap-4">
+ <div className="mt-10 flex flex-grow flex-col items-center justify-center gap-6 sm:mt-20">
<div className="mt-4 w-full space-y-6 text-center">
- <p className="text-center text-5xl font-bold">
+ <h1 className="text-center text-3xl font-bold sm:text-6xl">
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">
+ </h1>
+ <div className="mx-auto w-full gap-2 text-base md:w-3/6">
+ <p className="text-center text-gray-600">
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">
@@ -61,36 +142,93 @@ function Hero() {
href={DEMO_LINK}
target="_blank"
className={cn(
- "flex h-full w-28 gap-2",
- buttonVariants({ variant: "default" }),
+ "text flex w-28 gap-2",
+ buttonVariants({ variant: "default", size: "lg" }),
)}
>
- Demo
+ Try Demo
</Link>
<Link
href={GITHUB_LINK}
target="_blank"
className={cn(
- "flex h-full w-28 gap-2",
- buttonVariants({ variant: "outline" }),
+ "flex gap-2",
+ buttonVariants({ variant: "outline", size: "lg" }),
)}
>
<Github /> Github
</Link>
</div>
+ </div>
+ );
+}
- <div className="flex items-center gap-4">
+function Platforms() {
+ return (
+ <div className="bg-gray-100 py-20">
+ <h2 className="text-center text-3xl font-semibold">
+ Apps & Extensions for Seamless Access
+ </h2>
+ <p className="mt-2 text-center text-gray-600">
+ Enjoy seamless access with our mobile apps and browser extensions.
+ </p>
+ <div className="mt-6 flex flex-wrap items-center justify-center gap-6 px-6">
+ {platforms.map((platform) => (
+ <div key={platform.name}>
+ <Link
+ href={platform.url}
+ target="_blank"
+ className="flex items-center justify-center gap-2"
+ >
+ <Image
+ className="h-12 w-full rounded-md"
+ alt={platform.name}
+ src={platform.badge}
+ />
+ </Link>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+function Features() {
+ return (
+ <div className="mx-auto block px-10 py-20 sm:w-4/5 sm:px-0">
+ <div className="grid grid-cols-1 gap-8 sm:grid-cols-4 sm:gap-14">
+ {featuresList.map((feature) => (
+ <div key={feature.title} className="flex flex-col gap-1 sm:gap-2">
+ <div className="flex gap-2">
+ <feature.icon size={20} />
+ <h3 className="text-md font-semibold text-gray-800">
+ {feature.title}
+ </h3>
+ </div>
+ <p className="text-gray-600">{feature.description}</p>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+function Footer() {
+ return (
+ <div className="flex items-center justify-between bg-black px-10 py-6 text-sm text-gray-300">
+ <div>© 2024 hoarder.app</div>
+ <div className="flex items-center gap-6">
<Link
- href="https://play.google.com/store/apps/details?id=app.hoarder.hoardermobile&pcampaignid=web_share"
- target="_blank"
+ href={DOCS_LINK}
+ className="flex justify-center gap-2 text-center"
>
- <Image className="w-48" alt="play store badge" src={playStoreBadge} />
+ Docs
</Link>
<Link
- href="https://apps.apple.com/us/app/hoarder-app/id6479258022"
- target="_blank"
+ href={GITHUB_LINK}
+ className="flex justify-center gap-2 text-center"
>
- <Image className="w-40" alt="app store badge" src={appStoreBadge} />
+ Github
</Link>
</div>
</div>
@@ -99,7 +237,7 @@ function Hero() {
function Screenshots() {
return (
- <div className="mx-auto mt-6 w-11/12">
+ <div className="mx-auto mt-6 w-10/12">
<Image alt="screenshot" src={screenshot} />
</div>
);
@@ -113,6 +251,9 @@ export default function LandingPage() {
<Hero />
</div>
<Screenshots />
+ <Features />
+ <Platforms />
+ <Footer />
</div>
);
}
diff --git a/apps/landing/components/ui/button.tsx b/apps/landing/components/ui/button.tsx
index 5ed8df91..9404e429 100644
--- a/apps/landing/components/ui/button.tsx
+++ b/apps/landing/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";
const buttonVariants = cva(
- "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-base font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
@@ -21,8 +21,8 @@ const buttonVariants = cva(
},
size: {
default: "h-10 px-4 py-2",
- sm: "h-9 rounded-md px-3",
- lg: "h-11 rounded-md px-8",
+ sm: "h-9 rounded-lg px-3",
+ lg: "h-12 rounded-lg px-8",
icon: "size-10",
},
},
diff --git a/apps/landing/public/chrome-extension-badge.png b/apps/landing/public/chrome-extension-badge.png
new file mode 100644
index 00000000..e8ace65e
--- /dev/null
+++ b/apps/landing/public/chrome-extension-badge.png
Binary files differ
diff --git a/apps/landing/public/extension-badge.png b/apps/landing/public/extension-badge.png
deleted file mode 100644
index 224c12bf..00000000
--- a/apps/landing/public/extension-badge.png
+++ /dev/null
Binary files differ
diff --git a/apps/landing/public/firefox-addon.png b/apps/landing/public/firefox-addon.png
new file mode 100644
index 00000000..870be4c3
--- /dev/null
+++ b/apps/landing/public/firefox-addon.png
Binary files differ
diff --git a/apps/landing/public/google-play-badge.png b/apps/landing/public/google-play-badge.png
deleted file mode 100644
index 131f3aca..00000000
--- a/apps/landing/public/google-play-badge.png
+++ /dev/null
Binary files differ
diff --git a/apps/landing/public/google-play-badge.webp b/apps/landing/public/google-play-badge.webp
new file mode 100644
index 00000000..b7f998e8
--- /dev/null
+++ b/apps/landing/public/google-play-badge.webp
Binary files differ
diff --git a/apps/landing/public/hero.webp b/apps/landing/public/hero.webp
new file mode 100644
index 00000000..4e820673
--- /dev/null
+++ b/apps/landing/public/hero.webp
Binary files differ
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-29 09:30:12 +0000