Add features to landing website (#881)

* docs: add info about pro version

* feat(backend): return main website url

* feat(frontend): display Ryot pro link in footer

* fix(ts-utils): remove hoisted variables

* fix(frontend): no-wrap for title

* build(backend): upgrade deps

* fix(backend): correct logic for exercise interacted

* feat(frontend): display user ID in profile page

* fix(frontend): use new variable names

* fix(frontend): do not include stuff

* feat(*): return creator as nested object

* feat(backend): change name of subquery

* feat(backend): return collaborators for collections

* refactor(backend): use aliased entity where suitable

* fix(backend): remove admin account guard

* chore(backend): remove useless variable

* feat(backend): do not ignore issuer id

* feat(backend): empty array when no collaborators

* fix(frontend): display num collaborators

* fix(frontend): do not display if no items

* chore(frontend): change order of stuff to display

* refactor(backend): use aliased table where necessary

* chore(backend): add comment

* feat(backend): add log statement after registering user

* feat(landing): add basic features page

* ci: do not draft an update release

* docs: make installation clearer

* feat(landing): add features to footer

* chore(backend): add separators

* feat(landing): add basic heading to features page

* feat(backend): do not unwrap background jobs completely

* feat(landing): more layout changes

* feat(landing): add info about pricing

* feat(landing): add recommendations heading

* feat(landing): add spacing

* feat(landing): add info about recommendations pro feature

* feat(frontend): display edit btn only for collection creator

* feat(landing): change image for recomendations

* feat(landing): make it mobile friendly

* fix(landing): add padding to footer

* fix(landing): some padding changes

* feat(landing): add collection collaboration feature

* fix(landing): reverse in mobile

* feat(landing): change layout of features

* feat(landing): some more changes

* feat(landing): change image for collection collaboration

* feat(landing): mention trial period

* feat(landing): update links to new page

* feat(landing): add link to contact section

* feat: add refs to features

* ci: correct endpoint for health

* refactor(frontend): extract into component

* fix(frontend): truncate text

* ci: change order of response calling

* refactor(frontend): extract modal to outside component

* feat(frontend): close modal on submit

* refactor(backend): extract season name into constant

* feat(backend): do not create calendar events for specials

* feat(database): delete all invalid calendar events

* feat(landing): change image for collections

* feat(landing): add info about new collection features

* feat(landing): guide pricing tiers to discord

* feat(frontend): change ryot pro colors

* feat(frontend): autosize collection

* feat(landing): more collection names

* feat(landing): better wording of features

* chore(backend): update order

Author: IgnisDa

apps/backend/src/miscellaneous/resolver.rs

@@ -1414,9 +1414,9 @@ impl MiscellaneousService {
             author_name: AUTHOR.to_owned(),
             timezone: self.timezone.to_string(),
             oidc_enabled: self.oidc_client.is_some(),
-            website_url: "https://ryot.io".to_owned(),
             page_limit: self.config.frontend.page_size,
             docs_link: "https://docs.ryot.io".to_owned(),
+            website_url: "https://ryot.io/features".to_owned(),
             local_auth_disabled: self.config.users.disable_local_auth,
             token_valid_for_days: self.config.users.token_valid_for_days,
             repository_link: "https://github.com/ignisda/ryot".to_owned(),

apps/frontend/app/components/common.tsx

@@ -20,7 +20,7 @@ import {
 } from "@mantine/core";
 import { DateInput, DateTimePicker } from "@mantine/dates";
 import { useDebouncedState, useDidUpdate } from "@mantine/hooks";
-import { Form } from "@remix-run/react";
+import { Form, useNavigation } from "@remix-run/react";
 import {
 	CollectionExtraInformationLot,
 	type EntityLot,
@@ -30,7 +30,7 @@ import {
 } from "@ryot/generated/graphql/backend/graphql";
 import { formatDateToNaiveDate, groupBy, snakeCase } from "@ryot/ts-utils";
 import { IconExternalLink, IconSearch, IconX } from "@tabler/icons-react";
-import { Fragment, type ReactNode, useRef } from "react";
+import { Fragment, type ReactNode, useEffect, useRef } from "react";
 import { useState } from "react";
 import { match } from "ts-pattern";
 import { withoutHost } from "ufo";
@@ -148,6 +148,7 @@ export const AddEntityToCollectionModal = (props: {
 	entityLot: EntityLot;
 	collections: Array<Collection>;
 }) => {
+	const transition = useNavigation();
 	const selectData = Object.entries(
 		groupBy(props.collections, (c) =>
 			c.creator.id === props.userId ? "You" : c.creator.name,
@@ -162,6 +163,11 @@ export const AddEntityToCollectionModal = (props: {
 	const [selectedCollection, setSelectedCollection] =
 		useState<Collection | null>(null);
 	const [ownedOn, setOwnedOn] = useState<Date | null>();
+	useEffect(() => {
+		if (transition.state !== "submitting") {
+			props.onClose();
+		}
+	}, [transition.state]);
 
 	return (
 		<Modal
@@ -170,11 +176,7 @@ export const AddEntityToCollectionModal = (props: {
 			withCloseButton={false}
 			centered
 		>
-			<Form
-				action="/actions?intent=addEntityToCollection"
-				method="post"
-				onSubmit={() => props.onClose()}
-			>
+			<Form action="/actions?intent=addEntityToCollection" method="post">
 				<input readOnly hidden name="entityId" value={props.entityId} />
 				<input readOnly hidden name="entityLot" value={props.entityLot} />
 				<HiddenLocationInput />

apps/frontend/app/routes/_dashboard.collections.list.tsx

@@ -233,40 +233,9 @@ export default function Page() {
 				onClose={createOrUpdateModalClose}
 				withCloseButton={false}
 				centered
+				size="lg"
 			>
-				<Box component={Form} method="post" action="?intent=createOrUpdate">
-					<Stack>
-						<Title order={3}>
-							{toUpdateCollection ? "Update" : "Create"} collection
-						</Title>
-						<TextInput
-							label="Name"
-							required
-							name="name"
-							defaultValue={
-								toUpdateCollection ? toUpdateCollection.name : undefined
-							}
-							readOnly={toUpdateCollection?.isDefault}
-						/>
-						<Textarea
-							label="Description"
-							name="description"
-							defaultValue={
-								toUpdateCollection?.description
-									? toUpdateCollection.description
-									: undefined
-							}
-						/>
-						<Button
-							variant="outline"
-							type="submit"
-							name={toUpdateCollection ? "updateId" : undefined}
-							value={toUpdateCollection ? toUpdateCollection.id : undefined}
-						>
-							{toUpdateCollection ? "Update" : "Create"}
-						</Button>
-					</Stack>
-				</Box>
+				<CreateOrUpdateModal toUpdateCollection={toUpdateCollection} />
 			</Modal>
 		</>
 	);
@@ -364,3 +333,46 @@ const DisplayCollection = (props: {
 		</Flex>
 	);
 };
+
+const CreateOrUpdateModal = (props: {
+	toUpdateCollection: UpdateCollectionInput | undefined;
+}) => {
+	return (
+		<Box component={Form} method="post" action="?intent=createOrUpdate">
+			<Stack>
+				<Title order={3}>
+					{props.toUpdateCollection ? "Update" : "Create"} collection
+				</Title>
+				<TextInput
+					label="Name"
+					required
+					name="name"
+					defaultValue={
+						props.toUpdateCollection ? props.toUpdateCollection.name : undefined
+					}
+					readOnly={props.toUpdateCollection?.isDefault}
+				/>
+				<Textarea
+					label="Description"
+					name="description"
+					defaultValue={
+						props.toUpdateCollection?.description
+							? props.toUpdateCollection.description
+							: undefined
+					}
+					autosize
+				/>
+				<Button
+					variant="outline"
+					type="submit"
+					name={props.toUpdateCollection ? "updateId" : undefined}
+					value={
+						props.toUpdateCollection ? props.toUpdateCollection.id : undefined
+					}
+				>
+					{props.toUpdateCollection ? "Update" : "Create"}
+				</Button>
+			</Stack>
+		</Box>
+	);
+};

apps/frontend/app/routes/_dashboard.settings.notifications.tsx

@@ -320,7 +320,7 @@ const DisplayNotification = (props: {
 		<Paper p="xs" withBorder>
 			<Flex align="center" justify="space-between">
 				<Box w="80%">
-					<Text size="sm" fw="bold">
+					<Text size="sm" fw="bold" truncate>
 						{props.notification.description}
 					</Text>
 					<Text size="xs">

apps/frontend/app/routes/_dashboard.tsx

@@ -484,19 +484,19 @@ const Footer = () => {
 	return (
 		<Stack>
 			<Flex gap={80} justify="center">
-				{/* {!loaderData.coreDetails.isPro ? (
+				{!loaderData.coreDetails.isPro ? (
 					<Anchor href={loaderData.coreDetails.websiteUrl} target="_blank">
-						<Text c="lime" fw="bold">
+						<Text c="red" fw="bold">
 							Ryot Pro
 						</Text>
 					</Anchor>
-				) : null} */}
+				) : null}
 				<Anchor href="https://diptesh.me" target="_blank">
 					<Text c="indigo" fw="bold">
 						{loaderData.coreDetails.authorName}
 					</Text>
 				</Anchor>
-				<Text c="pink" fw="bold" visibleFrom="md">
+				<Text c="grape" fw="bold" visibleFrom="md">
 					{loaderData.coreDetails.timezone}
 				</Text>
 				<Anchor href={loaderData.coreDetails.repositoryLink} target="_blank">

apps/landing/public/images/features/add-to-others-collection.png

@@ -61,6 +61,7 @@ export interface Brand {
 
 export interface PricingData {
 	title: string;
+	discord: string;
 	tiers: Tier[];
 }
 
@@ -72,6 +73,7 @@ export interface Tier {
 
 export interface Price {
 	amount: string;
+	trial?: number;
 	period?: string;
 }
 

apps/landing/public/images/features/recommendations.png

@@ -27,6 +27,7 @@
 		"logoPath": "https://raw.githubusercontent.com/IgnisDa/ryot/main/libs/assets/icon-512x512.png",
 		"links": [
 			{ "label": "Prices", "href": "/#pricing-section" },
+			{ "label": "Features", "href": "/features" },
 			{ "label": "Contact", "href": "/#contact-section" },
 			{ "label": "Documentation", "href": "https://docs.ryot.io" },
 			{ "label": "Terms of Service", "href": "/terms" }
@@ -43,20 +44,23 @@
 	},
 	"pricingData": {
 		"title": "Ryot Pro Pricing",
+		"discord": "https://discord.gg/D9XTg2a7R8",
 		"tiers": [
 			{
 				"title": "Monthly",
 				"price": {
 					"amount": "$5",
-					"period": "/month"
+					"period": "/month",
+					"trial": 7
 				},
 				"cta": "Get started"
 			},
 			{
 				"title": "Yearly",
 				"price": {
 					"amount": "$49",
-					"period": "/year"
+					"period": "/year",
+					"trial": 14
 				},
 				"cta": "Get started"
 			},
@@ -74,6 +78,7 @@
 		"description": "A self hosted platform for tracking various facets of your life - media, fitness and much more!",
 		"links": [
 			{ "label": "Prices", "href": "/#pricing-section" },
+			{ "label": "Features", "href": "/features" },
 			{ "label": "Contact", "href": "/#contact-section" },
 			{ "label": "Documentation", "href": "https://docs.ryot.io" },
 			{ "label": "Terms of Service", "href": "/terms" }

apps/landing/src/config/landing.interface.ts

@@ -0,0 +1,75 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import Footer from "@/sections/Footer.astro";
+import Header from "@/sections/Header.astro";
+import { getLandingData } from "@/services/data.service";
+
+const data = await getLandingData();
+---
+
+<Layout meta={data.meta}>
+  <Header data={data.headerData} />
+  <main>
+    <div class="py-56 flex flex-col gap-y-20 md:gap-y-32">
+      <div class="px-3 text-center">
+        <h1 class="text-5xl md:text-6xl font-bold">Features</h1>
+        <p class="text-slate-500 mt-8 md:mt-16 md:text-xl">
+          An overview of all the features Ryot Pro provides.
+        </p>
+      </div>
+      <div class="px-4 md:px-60 gap-y-4 flex flex-col">
+        <h2 class="text-2xl font-semibold md:text-4xl md:font-normal">
+          Recommendations
+        </h2>
+        <div
+          class="gap-y-5 flex flex-col-reverse items-center justify-between md:gap-x-10 md:flex-row"
+        >
+          <p class="md:text-xl">
+            A new section called "Recommendations" is added to the Dashboard
+            where you can view personalized suggestions based on your recent
+            media consumption. They are refreshed every hour.
+          </p>
+          <img
+            src="images/features/recommendations.png"
+            class="lg:w-[600px] border rounded-lg shadow-lg"
+          />
+        </div>
+      </div>
+      <div class="px-4 md:px-60 gap-y-4 flex flex-col">
+        <h2 class="text-2xl font-semibold md:text-4xl md:font-normal">
+          Supercharged Collections
+        </h2>
+        <div
+          class="gap-y-5 flex flex-col items-center justify-between md:gap-x-10 md:flex-row"
+        >
+          <img
+            src="images/features/add-to-others-collection.png"
+            class="lg:w-[600px] border rounded-lg shadow-lg"
+          />
+          <ul class="list-disc list-inside">
+            <li class="md:text-xl">
+              Create information templates for your collections. These templates
+              will be used when you add media to your collection. You can see an
+              example of this on the community edition with the "Owned" and
+              "Reminders" collection.
+            </li>
+            <li class="md:text-xl">
+              Add collaborators to your collections. This feature is useful when
+              you want to share your collection with your friends or family.
+              They can also add or remove media from it.
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="px-4 text-center">
+        <p class="md:text-xl">
+          Have a feature request?
+          <a href="/#contact-section" class="underline text-blue-500"
+            >Contact us</a
+          > to let us know.
+        </p>
+      </div>
+    </div>
+    <Footer data={data.footerData} />
+  </main>
+</Layout>