diff options
Diffstat (limited to 'apps/landing/src/Homepage.tsx')
| -rw-r--r-- | apps/landing/src/Homepage.tsx | 256 |
1 files changed, 256 insertions, 0 deletions
diff --git a/apps/landing/src/Homepage.tsx b/apps/landing/src/Homepage.tsx new file mode 100644 index 00000000..85290a26 --- /dev/null +++ b/apps/landing/src/Homepage.tsx @@ -0,0 +1,256 @@ +import { buttonVariants } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; +import { + ArrowDownNarrowWide, + Bookmark, + BrainCircuit, + CheckCheck, + Github, + Server, + SunMoon, + TextSearch, + WalletCards, +} from "lucide-react"; + +import appStoreBadge from "/app-store-badge.png?url"; +import chromeExtensionBadge from "/chrome-extension-badge.png?url"; +import firefoxAddonBadge from "/firefox-addon.png?url"; +import playStoreBadge from "/google-play-badge.webp?url"; +import screenshot from "/hero.webp?url"; +import Logo from "/icons/karakeep-full.svg?url"; + +const GITHUB_LINK = "https://github.com/karakeep-app/karakeep"; +const DOCS_LINK = "https://docs.karakeep.app"; +const DEMO_LINK = "https://try.karakeep.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 and pdfs.", + }, + { + 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: CheckCheck, + title: "Bulk Actions", + description: "Quickly manage your bookmarks with bulk actions.", + }, + { + icon: SunMoon, + title: "Dark Mode", + description: "Karakeep supports dark mode for better reading experience.", + }, +]; + +function NavBar() { + return ( + <div className="flex justify-between px-3 py-4"> + <img src={Logo} alt="logo" className="w-36" /> + <div className="hidden items-center gap-6 sm:flex"> + <a href={DOCS_LINK} className="flex justify-center gap-2 text-center"> + Docs + </a> + <a href={GITHUB_LINK} className="flex justify-center gap-2 text-center"> + GitHub + </a> + <a + href={DEMO_LINK} + target="_blank" + className={cn( + "text flex h-full w-28 gap-2", + buttonVariants({ variant: "default" }), + )} + rel="noreferrer" + > + Try Demo + </a> + </div> + </div> + ); +} + +function Hero() { + return ( + <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"> + <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 + </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 karakeep will + automatically tag them for you using AI for faster retrieval. Built + for the data hoarders out there! + </p> + </div> + </div> + <div className="flex h-10 gap-4"> + <a + href={DEMO_LINK} + target="_blank" + className={cn( + "text flex w-28 gap-2", + buttonVariants({ variant: "default", size: "lg" }), + )} + rel="noreferrer" + > + Try Demo + </a> + <a + href={GITHUB_LINK} + target="_blank" + className={cn( + "flex gap-2", + buttonVariants({ variant: "outline", size: "lg" }), + )} + rel="noreferrer" + > + <Github /> GitHub + </a> + </div> + </div> + ); +} + +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}> + <a + href={platform.url} + target="_blank" + className="flex items-center justify-center gap-2" + rel="noreferrer" + > + <img + className="h-12 w-auto rounded-md" + alt={platform.name} + src={platform.badge} + /> + </a> + </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-2025 karakeep.app</div> + <div className="flex items-center gap-6"> + <a href={DOCS_LINK} className="flex justify-center gap-2 text-center"> + Docs + </a> + <a href={GITHUB_LINK} className="flex justify-center gap-2 text-center"> + GitHub + </a> + </div> + </div> + ); +} + +function Screenshots() { + return ( + <div className="mx-auto mt-6 w-10/12"> + <img alt="screenshot" src={screenshot} /> + </div> + ); +} + +export default function Homepage() { + return ( + <div className="flex min-h-screen flex-col"> + <div className="container flex flex-col pb-10"> + <NavBar /> + <Hero /> + </div> + <Screenshots /> + <Features /> + <Platforms /> + <Footer /> + </div> + ); +} |