From 0570039ab32a8951370c20131ae0cb83c2d7a98a Mon Sep 17 00:00:00 2001
From: Antonio Villagra De La Cruz <antonio.villagra.de.la.cruz@gmail.com>
Date: Sat, 12 Aug 2023 18:31:17 +0800
Subject: [PATCH] Update pages content

---
 LICENCE.md             |   6 +--
 app/routes/about.tsx   |  75 ++++++++++++++++++--------
 app/routes/how.tsx     |  60 ++++++++++++++++++++-
 app/routes/licence.tsx |   8 ++-
 app/routes/pricing.tsx |  11 ++--
 app/routes/terms.tsx   | 117 ++++++++++++++++++++++++++++++++++++++++-
 6 files changed, 244 insertions(+), 33 deletions(-)

diff --git a/LICENCE.md b/LICENCE.md
index 4153cd3..c89f909 100644
--- a/LICENCE.md
+++ b/LICENCE.md
@@ -1,5 +1,5 @@
-                      EUROPEAN UNION PUBLIC LICENCE v. 1.2
-                      EUPL © the European Union 2007, 2016
+    EUROPEAN UNION PUBLIC LICENCE v. 1.2
+    EUPL © the European Union 2007, 2016
 
 This European Union Public Licence (the ‘EUPL’) applies to the Work (as defined
 below) which is provided under the terms of this Licence. Any use of the Work,
@@ -10,7 +10,7 @@ The Work is provided under the terms of this Licence when the Licensor (as
 defined below) has placed the following notice immediately following the
 copyright notice for the Work:
 
-        Licensed under the EUPL
+**Licensed under the EUPL**
 
 or has expressed by any other means his willingness to license under the EUPL.
 
diff --git a/app/routes/about.tsx b/app/routes/about.tsx
index 5a23e75..6cfb387 100644
--- a/app/routes/about.tsx
+++ b/app/routes/about.tsx
@@ -2,7 +2,6 @@ import { getUserId } from "~/utils/session.server";
 
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
-import { marked } from "marked";
 import PageHeading from "~/components/PageHeading";
 import type { LoaderFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
@@ -21,39 +20,69 @@ export const loader: LoaderFunction = async ({ request }) => {
 
 export default function AboutScreen() {
   const data = useLoaderData<LoaderData>();
-  const content = marked(`
-\`fantomely\` was created out of the need to find a simple, privacy-focused analytics platform for my blog.
-
-After scouting the market for a free (or cheap) solution that would fit my needs, I failed to find something. Some possible tools I looked at include:
-- [Fathom](https://usefathom.com/) 
-- [Plausible](https://plausible.io/)
-- [Fugu](https://fugu.lol/)
-- [Umami](https://umami.is/)
-
-If you are looking for a serious platform for your analytics needs that also happens to care about your users' privacy, I would recommend checking any of those platforms listed above.
-
-I ended up building \`fantomely\` because I valued my time to be worth less than the ~$10/month that managed versions of Fathom, Plausible, and Fugu cost, and instead of self-hosting a third party (like Umami or Plausible), why not just self-host my own platform?
-
-Currently, \`fantomely\` is in private beta, and powers the analytics on my [blog](https://antoniovdlc.me), but I might monetize it in the future. If you want to play around with it, feel free to [join the waitlist](https://fantomely.com/auth/waitlist), or look at the [source code](https://github.com/AntonioVdlC/fantomely).
-
-👻
-  `);
 
   return (
     <div className="relative bg-slate-50">
       <Header isUserLoggedIn={data.isUserLoggedIn} />
 
-      <main>
+      <main className="mx-auto max-w-7xl px-8">
         <PageHeading>
           <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
             <span className="block xl:inline">About</span>
           </h1>
         </PageHeading>
 
-        <div
-          className="prose prose-slate mt-16 max-w-none px-12 md:prose-lg sm:mt-24"
-          dangerouslySetInnerHTML={{ __html: content }}
-        ></div>
+        <div className="prose prose-slate mt-16 max-w-none px-12 md:prose-lg sm:mt-24">
+          <p>
+            <b>fantomely</b> was created out of the need to find a simple,
+            privacy-focused analytics platform for my blog.
+          </p>
+          <p>
+            After scouting the market for a free (or cheap) solution that would
+            fit my needs, I failed to find something. Some possible tools I
+            looked at include:
+          </p>
+          <ul>
+            <li>
+              <a href="https://usefathom.com/">Fathom</a>
+            </li>
+            <li>
+              <a href="https://plausible.io/">Plausible</a>
+            </li>
+            <li>
+              <a href="https://fugu.lol/">Fugu</a>
+            </li>
+            <li>
+              <a href="https://umami.is/">Umami</a>
+            </li>
+          </ul>
+          <p>
+            If you are looking for a serious platform for your analytics needs
+            that also happens to care about your users' privacy, I would
+            recommend checking any of those platforms listed above.
+          </p>
+          <p>
+            I ended up building <b>fantomely</b> because I valued my time to be
+            worth less than the ~$10/month that managed versions of Fathom,
+            Plausible, and Fugu cost, and instead of self-hosting a third party
+            (like Umami or Plausible), why not just self-host my own platform?
+          </p>
+          <p>
+            Currently, <b>fantomely</b> is in private beta, and powers the
+            analytics on my <a href="https://antoniovdlc.me">blog</a>, but I
+            might monetize it in the future. If you want to play around with it,
+            feel free to{" "}
+            <a href="https://fantomely.com/auth/waitlist">join the waitlist</a>,
+            or look at the{" "}
+            <a href="https://github.com/AntonioVdlC/fantomely">source code</a>.
+          </p>
+
+          <p>
+            <span role="img" aria-label="ghost">
+              👻
+            </span>
+          </p>
+        </div>
       </main>
 
       <Footer />
diff --git a/app/routes/how.tsx b/app/routes/how.tsx
index 94492d2..db4cbaf 100644
--- a/app/routes/how.tsx
+++ b/app/routes/how.tsx
@@ -2,6 +2,7 @@ import { getUserId } from "~/utils/session.server";
 
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
+import PageHeading from "~/components/PageHeading";
 import type { LoaderFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 
@@ -25,7 +26,64 @@ export default function HowItWorksScreen() {
       <Header isUserLoggedIn={data.isUserLoggedIn} />
 
       <main className="mx-auto max-w-7xl px-8">
-        <p>How</p>
+        <PageHeading>
+          <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
+            <span className="block xl:inline">How it works</span>
+          </h1>
+        </PageHeading>
+
+        <div className="prose prose-slate mt-16 max-w-none px-12 md:prose-lg sm:mt-24">
+          <p className="text-sm italic">
+            For a more in-depth technical explanation, you can read this{" "}
+            <a href="https://www.antoniovdlc.me/building-a-privacy-first-web-analytics-platform/">
+              blog post
+            </a>
+            .
+          </p>
+
+          <h2>User privacy</h2>
+          <p>
+            <b>fantomely</b> tracks page views on your web page while preserving
+            users' privacy. At its core, it only ever stores cumulative data
+            points, so it is impossible to track any data point to a specific
+            user.
+          </p>
+          <p>
+            On top of that, it only tracks data provided by the user's browser
+            (such as referrers, platform information based on user agent, ...).
+          </p>
+          <p>
+            As all data is cumulative, and <b>fantomely</b> doesn't set any
+            cookies or local storage, it is the most private-focused solution
+            for tracking usage of your web page while still preserving your
+            users' privacy.
+          </p>
+
+          <h2>Tracking script</h2>
+          <p>
+            Events are tracked using a small script that can be added to your
+            web pages. The content of the tracking script is public and
+            open-source, and it amounts to:
+          </p>
+          <pre>
+            {`!function(){"use strict";window.addEventListener("DOMContentLoaded",(function(){var t=document.querySelector("script[data-fantomely]");if(t){var n="".concat(t.getAttribute("data-h"),"/api/event"),e=t.getAttribute("data-k");if(n&&e&&"undefined"!=typeof window){if(o(),window.history.pushState){var i=window.history.pushState;window.history.pushState=function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];o(),i.apply(window.history,t)}}window.onpopstate=function(){o()}}}function o(){fetch(n,{method:"POST",body:JSON.stringify({k:e,p:window.location.href.slice(0,280),r:document.referrer.slice(0,280)})}).catch((function(){return null}))}}))}();`}
+          </pre>
+          <p>
+            The tracking data sent to our servers is also kept to a minimum to
+            limit bandwidth usage on your clients.
+          </p>
+
+          <h2>Valuable insights</h2>
+          <p>
+            You can gain useful insights for tracking data while protecting your
+            user's privacy!
+          </p>
+          <p>
+            Cumulative timeseries and segmentations by page view, platform
+            (browser, operating system), and referrers can give you a useful
+            picture of the activity on your web pages.
+          </p>
+        </div>
       </main>
 
       <Footer />
diff --git a/app/routes/licence.tsx b/app/routes/licence.tsx
index d770b55..06feb45 100644
--- a/app/routes/licence.tsx
+++ b/app/routes/licence.tsx
@@ -3,6 +3,7 @@ import { readLicence } from "~/utils/licence.server";
 
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
+import PageHeading from "~/components/PageHeading";
 import type { LoaderFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 
@@ -30,8 +31,13 @@ export default function LicenceScreen() {
       <Header isUserLoggedIn={data.isUserLoggedIn} />
 
       <main className="mx-auto max-w-7xl px-8">
+        <PageHeading>
+          <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
+            <span className="block xl:inline">Licence</span>
+          </h1>
+        </PageHeading>
         <div
-          className="prose prose-slate max-w-none md:prose-lg lg:prose-xl"
+          className="prose prose-slate mt-16 max-w-none px-12 md:prose-lg sm:mt-24"
           dangerouslySetInnerHTML={{ __html: data.licence }}
         ></div>
       </main>
diff --git a/app/routes/pricing.tsx b/app/routes/pricing.tsx
index 15abd39..5bcaf23 100644
--- a/app/routes/pricing.tsx
+++ b/app/routes/pricing.tsx
@@ -3,6 +3,7 @@ import { getUserId } from "~/utils/session.server";
 import Button from "~/components/Button";
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
+import PageHeading from "~/components/PageHeading";
 import type { LoaderFunction } from "@remix-run/node";
 import { useLoaderData, Link } from "@remix-run/react";
 
@@ -51,12 +52,14 @@ export default function PricingScreen() {
       <main className="mx-auto flex w-full max-w-7xl flex-grow flex-col justify-center px-4 sm:px-6 lg:px-8">
         <div className="py-16">
           <div className="text-center">
+            <PageHeading>
+              <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
+                <span className="block xl:inline">Pricing</span>
+              </h1>
+            </PageHeading>
             <p className="text-sm font-semibold uppercase tracking-wide text-slate-600">
-              WIP
+              Private Beta
             </p>
-            <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl">
-              Pricing
-            </h1>
             <p className="mt-2 text-base text-slate-500 sm:mx-auto sm:max-w-xl">
               We are currently in private beta and haven't totally figured out
               the pricing model. There will most likely be a free tier though,
diff --git a/app/routes/terms.tsx b/app/routes/terms.tsx
index 64c6fd0..8a209af 100644
--- a/app/routes/terms.tsx
+++ b/app/routes/terms.tsx
@@ -2,6 +2,7 @@ import { getUserId } from "~/utils/session.server";
 
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
+import PageHeading from "~/components/PageHeading";
 import type { LoaderFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 
@@ -25,7 +26,121 @@ export default function TermsScreen() {
       <Header isUserLoggedIn={data.isUserLoggedIn} />
 
       <main className="mx-auto max-w-7xl px-8">
-        <p>Terms</p>
+        <PageHeading>
+          <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
+            <span className="block xl:inline">Terms</span>
+          </h1>
+        </PageHeading>
+
+        <div className="prose prose-slate mt-16 max-w-none px-12 md:prose-lg sm:mt-24">
+          <p className="font-bold">Effective Date: [Date]</p>
+          <h3>1. Acceptance of Terms</h3>
+          <p>
+            Welcome to [SaaS Software Name] ("Service"). By accessing or using
+            the Service, you agree to be bound by these Terms of Service
+            ("Terms"). If you do not agree with these Terms, please do not use
+            the Service.
+          </p>
+          <h3>2. Use of the Service</h3>
+          <h4>2.1 License</h4>
+          <p>
+            Subject to these Terms, [Company Name] grants you a non-exclusive,
+            non-transferable, revocable license to use the Service for the
+            purpose of tracking page views on websites owned or operated by you.
+          </p>
+          <h4>2.2 User Accounts</h4>
+          <p>
+            To access the Service, you may need to create an account. You are
+            responsible for maintaining the confidentiality of your account
+            credentials and for all activities that occur under your account.
+          </p>
+          <h3>3. Data Privacy</h3>
+          <h4>3.1 Data Collection</h4>
+          <p>
+            The Service collects and stores data related to page views on your
+            websites, including page URLs, browser information, and referring
+            URLs.
+          </p>
+          <h4>3.2 Data Usage</h4>
+          <p>
+            [Company Name] will use the collected data solely for the purpose of
+            providing the Service to you.
+          </p>
+          <h4>3.3 Data Security</h4>{" "}
+          <p>
+            [Company Name] employs industry-standard security measures to
+            protect the data collected. However, no method of data transmission
+            over the Internet or electronic storage is completely secure. You
+            use the Service at your own risk.
+          </p>
+          <h3>4. Payment and Subscription</h3>
+          <h4>4.1 Fees</h4>
+          <p>
+            The use of the Service may be subject to subscription fees. You
+            agree to pay the fees as specified on the Service's pricing page.
+            Fees are non-refundable.
+          </p>
+          <h4>4.2 Billing Cycle</h4>
+          <p>
+            Subscription fees are billed on a recurring basis (e.g., monthly,
+            annually) and will be charged automatically using the payment method
+            you provide.
+          </p>
+          <h3>5. Intellectual Property</h3>
+          <h4>5.1 Ownership</h4>
+          <p>
+            [Company Name] retains all right, title, and interest in and to the
+            Service, including all intellectual property rights.
+          </p>
+          <h4>5.2 User Content</h4>
+          <p>
+            You grant [Company Name] a non-exclusive, worldwide, royalty-free
+            license to use, reproduce, modify, and display any content you
+            submit to the Service for the purpose of providing the Service.
+          </p>
+          <h3>6. Termination</h3>
+          <h4>6.1 Termination by You</h4>
+          <p>
+            You may terminate your use of the Service at any time by canceling
+            your subscription.
+          </p>
+          <h4>6.2 Termination by [Company Name]</h4>
+          <p>
+            [Company Name] reserves the right to suspend or terminate your
+            access to the Service at its sole discretion, with or without cause,
+            and without notice.
+          </p>
+          <h3>7. Limitation of Liability</h3>
+          <h4>7.1 Disclaimer</h4>
+          <p>
+            The Service is provided "as is" without any warranties of any kind,
+            whether express or implied. [Company Name] disclaims all liability
+            for any damages, including but not limited to direct, indirect,
+            incidental, consequential, or punitive damages.
+          </p>
+          <h3>8. Governing Law</h3>
+          <h4>8.1 Jurisdiction</h4>
+          <p>
+            These Terms shall be governed by and construed in accordance with
+            the laws of [Jurisdiction]. Any disputes arising from or in
+            connection with these Terms shall be subject to the exclusive
+            jurisdiction of the courts of [Jurisdiction].
+          </p>
+          <h3>9. Changes to Terms</h3>
+          <h4>9.1 Modification</h4>
+          <p>
+            [Company Name] reserves the right to modify or update these Terms at
+            any time. Changes will be effective upon posting to the Service.
+            Your continued use of the Service after any changes constitutes
+            acceptance of the revised Terms.
+          </p>
+          <h3>10. Contact Us</h3>
+          <h4>10.1 Questions</h4>
+          <p>
+            If you have any questions about these Terms, please contact us at
+            [Contact Email].
+          </p>
+        </div>
       </main>
 
       <Footer />