From 16f21bf9ee747a4fc8fd235eee5c0348d355aae2 Mon Sep 17 00:00:00 2001 From: Md Saban <45597394+mdsaban@users.noreply.github.com> Date: Sat, 22 Jun 2024 19:55:07 +0530 Subject: ui: Improve landing page for homepage (#238) * fix: Improve landing page for homepage * chore: fix related to test failing * chore: prettier changes --- apps/landing/app/page.tsx | 195 +++++++++++++++++++++---- apps/landing/components/ui/button.tsx | 6 +- apps/landing/public/chrome-extension-badge.png | Bin 0 -> 10100 bytes apps/landing/public/extension-badge.png | Bin 9171 -> 0 bytes apps/landing/public/firefox-addon.png | Bin 0 -> 15473 bytes apps/landing/public/google-play-badge.png | Bin 4904 -> 0 bytes apps/landing/public/google-play-badge.webp | Bin 0 -> 11122 bytes apps/landing/public/hero.webp | Bin 0 -> 292228 bytes 8 files changed, 171 insertions(+), 30 deletions(-) create mode 100644 apps/landing/public/chrome-extension-badge.png delete mode 100644 apps/landing/public/extension-badge.png create mode 100644 apps/landing/public/firefox-addon.png delete mode 100644 apps/landing/public/google-play-badge.png create mode 100644 apps/landing/public/google-play-badge.webp create mode 100644 apps/landing/public/hero.webp (limited to 'apps') 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 (
- -
+ +
- Github + Github + + + Try Demo
@@ -36,24 +120,21 @@ function NavBar() { function Hero() { return ( -
+
-

+

The{" "} Bookmark Everything {" "} App -

-
-

+

+
+

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!

-

- Open source, and self hostable! -

@@ -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 Github
+
+ ); +} -
+function Platforms() { + return ( +
+

+ Apps & Extensions for Seamless Access +

+

+ Enjoy seamless access with our mobile apps and browser extensions. +

+
+ {platforms.map((platform) => ( +
+ + {platform.name} + +
+ ))} +
+
+ ); +} + +function Features() { + return ( +
+
+ {featuresList.map((feature) => ( +
+
+ +

+ {feature.title} +

+
+

{feature.description}

+
+ ))} +
+
+ ); +} + +function Footer() { + return ( +
+
© 2024 hoarder.app
+
- play store badge + Docs - app store badge + Github
@@ -99,7 +237,7 @@ function Hero() { function Screenshots() { return ( -
+
screenshot
); @@ -113,6 +251,9 @@ export default function LandingPage() {
+ + +
); } 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 Binary files /dev/null and b/apps/landing/public/chrome-extension-badge.png differ diff --git a/apps/landing/public/extension-badge.png b/apps/landing/public/extension-badge.png deleted file mode 100644 index 224c12bf..00000000 Binary files a/apps/landing/public/extension-badge.png and /dev/null differ diff --git a/apps/landing/public/firefox-addon.png b/apps/landing/public/firefox-addon.png new file mode 100644 index 00000000..870be4c3 Binary files /dev/null and b/apps/landing/public/firefox-addon.png 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 Binary files a/apps/landing/public/google-play-badge.png and /dev/null 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 Binary files /dev/null and b/apps/landing/public/google-play-badge.webp differ diff --git a/apps/landing/public/hero.webp b/apps/landing/public/hero.webp new file mode 100644 index 00000000..4e820673 Binary files /dev/null and b/apps/landing/public/hero.webp differ -- cgit v1.2.3-70-g09d2