refactor: Migrate the landing page from nextjs to vite

4 files changed, 495 insertions, 0 deletions

diff --git a/apps/landing/src/App.tsx b/apps/landing/src/App.tsx
new file mode 100644
index 00000000..06a1e5b8
--- /dev/null
+++ b/apps/landing/src/App.tsx
@@ -0,0 +1,13 @@
+import Homepage from "@/src/Homepage";
+import Privacy from "@/src/Privacy";
+
+import "@hoarder/tailwind-config/globals.css";
+
+export default function App() {
+  // Poor man router
+  if (window.location.pathname === "/privacy") {
+    return <Privacy />;
+  }
+
+  return <Homepage />;
+}
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>
+  );
+}
diff --git a/apps/landing/src/Privacy.tsx b/apps/landing/src/Privacy.tsx
new file mode 100644
index 00000000..366a0395
--- /dev/null
+++ b/apps/landing/src/Privacy.tsx
@@ -0,0 +1,217 @@
+export default function PrivacyPolicy() {
+  return (
+    <div className="p-4">
+      <title>Hoarder - Privacy Policy</title>
+      <strong>Privacy Policy</strong>
+      <p>
+        This privacy policy applies to the Hoarder App app (hereby referred to
+        as &quot;Application&quot;) for mobile devices that was created by
+        Mohamed Bassem (hereby referred to as &quot;Service Provider&quot;) as
+        an Open Source service. This service is intended for use &quot;AS
+        IS&quot;.
+      </p>
+      <br />
+      <strong>Information Collection and Use</strong>
+      <p>
+        The Application collects information when you download and use it. This
+        information may include information such as
+      </p>
+      <ul>
+        <li>Your device&apos;s Internet Protocol address (e.g. IP address)</li>
+        <li>
+          The pages of the Application that you visit, the time and date of your
+          visit, the time spent on those pages
+        </li>
+        <li>The time spent on the Application</li>
+        <li>The operating system you use on your mobile device</li>
+      </ul>
+      <p />
+      <br />
+      <p>
+        The Application does not gather precise information about the location
+        of your mobile device.
+      </p>
+      <div style={{ display: "none" }}>
+        <p>
+          The Application collects your device&apos;s location, which helps the
+          Service Provider determine your approximate geographical location and
+          make use of in below ways:
+        </p>
+        <ul>
+          <li>
+            Geolocation Services: The Service Provider utilizes location data to
+            provide features such as personalized content, relevant
+            recommendations, and location-based services.
+          </li>
+          <li>
+            Analytics and Improvements: Aggregated and anonymized location data
+            helps the Service Provider to analyze user behavior, identify
+            trends, and improve the overall performance and functionality of the
+            Application.
+          </li>
+          <li>
+            Third-Party Services: Periodically, the Service Provider may
+            transmit anonymized location data to external services. These
+            services assist them in enhancing the Application and optimizing
+            their offerings.
+          </li>
+        </ul>
+      </div>
+      <br />
+      <p>
+        The Service Provider may use the information you provided to contact you
+        from time to time to provide you with important information, required
+        notices and marketing promotions.
+      </p>
+      <br />
+      <p>
+        For a better experience, while using the Application, the Service
+        Provider may require you to provide us with certain personally
+        identifiable information, including but not limited to Name,Email. The
+        information that the Service Provider request will be retained by them
+        and used as described in this privacy policy.
+      </p>
+      <br />
+      <strong>Third Party Access</strong>
+      <p>
+        Only aggregated, anonymized data is periodically transmitted to external
+        services to aid the Service Provider in improving the Application and
+        their service. The Service Provider may share your information with
+        third parties in the ways that are described in this privacy statement.
+      </p>
+      <div>
+        <br />
+        <p>
+          Please note that the Application utilizes third-party services that
+          have their own Privacy Policy about handling data. Below are the links
+          to the Privacy Policy of the third-party service providers used by the
+          Application:
+        </p>
+        <ul>
+          <li>
+            <a
+              href="https://www.google.com/policies/privacy/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Google Play Services
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://expo.io/privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Expo
+            </a>
+          </li>
+        </ul>
+      </div>
+      <br />
+      <p>
+        The Service Provider may disclose User Provided and Automatically
+        Collected Information:
+      </p>
+      <ul>
+        <li>
+          as required by law, such as to comply with a subpoena, or similar
+          legal process;
+        </li>
+        <li>
+          when they believe in good faith that disclosure is necessary to
+          protect their rights, protect your safety or the safety of others,
+          investigate fraud, or respond to a government request;
+        </li>
+        <li>
+          with their trusted services providers who work on their behalf, do not
+          have an independent use of the information we disclose to them, and
+          have agreed to adhere to the rules set forth in this privacy
+          statement.
+        </li>
+      </ul>
+      <p />
+      <br />
+      <strong>Opt-Out Rights</strong>
+      <p>
+        You can stop all collection of information by the Application easily by
+        uninstalling it. You may use the standard uninstall processes as may be
+        available as part of your mobile device or via the mobile application
+        marketplace or network.
+      </p>
+      <br />
+      <strong>Data Retention Policy</strong>
+      <p>
+        The Service Provider will retain User Provided data for as long as you
+        use the Application and for a reasonable time thereafter. If you&apos;d
+        like them to delete User Provided Data that you have provided via the
+        Application, please contact them at me@mbassem.com and they will respond
+        in a reasonable time.
+      </p>
+      <br />
+      <strong>Children</strong>
+      <p>
+        The Service Provider does not use the Application to knowingly solicit
+        data from or market to children under the age of 13.
+      </p>
+      <div>
+        <br />
+        <p>
+          The Application does not address anyone under the age of 13. The
+          Service Provider does not knowingly collect personally identifiable
+          information from children under 13 years of age. In the case the
+          Service Provider discover that a child under 13 has provided personal
+          information, the Service Provider will immediately delete this from
+          their servers. If you are a parent or guardian and you are aware that
+          your child has provided us with personal information, please contact
+          the Service Provider (me@mbassem.com) so that they will be able to
+          take the necessary actions.
+        </p>
+      </div>
+      <br />
+      <strong>Security</strong>
+      <p>
+        The Service Provider is concerned about safeguarding the confidentiality
+        of your information. The Service Provider provides physical, electronic,
+        and procedural safeguards to protect information the Service Provider
+        processes and maintains.
+      </p>
+      <br />
+      <strong>Changes</strong>
+      <p>
+        This Privacy Policy may be updated from time to time for any reason. The
+        Service Provider will notify you of any changes to the Privacy Policy by
+        updating this page with the new Privacy Policy. You are advised to
+        consult this Privacy Policy regularly for any changes, as continued use
+        is deemed approval of all changes.
+      </p>
+      <br />
+      <p>This privacy policy is effective as of 2024-03-19</p>
+      <br />
+      <strong>Your Consent</strong>
+      <p>
+        By using the Application, you are consenting to the processing of your
+        information as set forth in this Privacy Policy now and as amended by
+        us.
+      </p>
+      <br />
+      <strong>Contact Us</strong>
+      <p>
+        If you have any questions regarding privacy while using the Application,
+        or have questions about the practices, please contact the Service
+        Provider via email at me@mbassem.com.
+      </p>
+      <hr />
+      <p>
+        This privacy policy page was generated by{" "}
+        <a
+          href="https://app-privacy-policy-generator.nisrulz.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          App Privacy Policy Generator
+        </a>
+      </p>
+    </div>
+  );
+}
diff --git a/apps/landing/src/main.tsx b/apps/landing/src/main.tsx
new file mode 100644
index 00000000..ed52e896
--- /dev/null
+++ b/apps/landing/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import App from "@/src/App";
+import { createRoot } from "react-dom/client";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);