From 8bd2eb826db316a089c289d869e73240bfe62a36 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Sun, 24 Sep 2023 19:10:47 -0400
Subject: [PATCH] Finishing up blocks.

---
 src/shared/components/donate-lines.tsx |  41 -----
 src/shared/components/donate.tsx       |   2 -
 src/shared/components/main.tsx         | 233 ++++++++++++++++++++++---
 3 files changed, 208 insertions(+), 68 deletions(-)
 delete mode 100644 src/shared/components/donate-lines.tsx

diff --git a/src/shared/components/donate-lines.tsx b/src/shared/components/donate-lines.tsx
deleted file mode 100644
index ce8da4b..0000000
--- a/src/shared/components/donate-lines.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Component } from "inferno";
-import { Link } from "inferno-router";
-import { i18n } from "../i18next";
-import { T } from "inferno-i18next";
-
-export class DonateLines extends Component<any, any> {
-  constructor(props: any, context: any) {
-    super(props, context);
-  }
-  render() {
-    return (
-      <>
-        <p>
-          <T i18nKey="donate_desc">
-            #<Link to="/donate">#</Link>#
-          </T>
-        </p>
-        <div class="row is-horizontal-align">
-          <div class="col-3">
-            <a class="button primary" href="https://liberapay.com/Lemmy">
-              {i18n.t("support_on_liberapay")}
-            </a>
-          </div>
-          <div class="col-3">
-            <a class="button primary" href="https://www.patreon.com/dessalines">
-              {i18n.t("support_on_patreon")}
-            </a>
-          </div>
-          <div class="col-3">
-            <a
-              class="col button primary"
-              href="https://opencollective.com/lemmy"
-            >
-              {i18n.t("support_on_opencollective")}
-            </a>
-          </div>
-        </div>
-      </>
-    );
-  }
-}
diff --git a/src/shared/components/donate.tsx b/src/shared/components/donate.tsx
index 39ca411..57c6ede 100644
--- a/src/shared/components/donate.tsx
+++ b/src/shared/components/donate.tsx
@@ -1,6 +1,5 @@
 import { Component } from "inferno";
 import { Helmet } from "inferno-helmet";
-import { DonateLines } from "./donate-lines";
 import { i18n } from "../i18next";
 import { T } from "inferno-i18next";
 import { translators } from "../translations/translators";
@@ -100,7 +99,6 @@ export class Donate extends Component<any, any> {
         <div class="container">
           <div class="text-center">
             <h1>{i18n.t("support_lemmy")}</h1>
-            <DonateLines />
           </div>
 
           <hr />
diff --git a/src/shared/components/main.tsx b/src/shared/components/main.tsx
index f9a1fc6..b366c6e 100644
--- a/src/shared/components/main.tsx
+++ b/src/shared/components/main.tsx
@@ -1,19 +1,19 @@
 import { Component } from "inferno";
 import { Link } from "inferno-router";
 import { Helmet } from "inferno-helmet";
-import { DonateLines } from "./donate-lines";
 import { i18n } from "../i18next";
 import { T } from "inferno-i18next";
 import { isBrowser } from "../utils";
 import { Icon } from "./icon";
 
+const gradientTextClasses =
+  "bg-gradient-to-r bg-clip-text text-transparent from-[#69D066] to-[#03A80E]";
+
 const LemmyTitleBlock = () => (
   <div className="flex flex-col items-center">
     <div className="flex flex-col items-center mb-2">
-      <p className="text-2xl font-bold bg-gradient-to-r bg-clip-text text-transparent from-[#69D066] to-[#03A80E]">
-        Lemmy
-      </p>
-      <p className="text-xl font-medium text-center">{i18n.t("lemmy_desc")}</p>
+      <p className={`text-6xl font-bold ${gradientTextClasses}`}>Lemmy</p>
+      <p className="text-3xl font-medium text-center">{i18n.t("lemmy_desc")}</p>
     </div>
     <div className="flex flex-row justify-around gap-2">
       <JoinServerButton />
@@ -23,14 +23,14 @@ const LemmyTitleBlock = () => (
 );
 
 const JoinServerButton = () => (
-  <Link className="btn btn-primary" to="/instances">
+  <Link className="btn btn-primary text-white" to="/instances">
     {i18n.t("join_a_server")}
   </Link>
 );
 
 const RunServerButton = () => (
   <a
-    class="btn btn-secondary"
+    class="btn btn-secondary text-white"
     href={`/docs/administration/administration.html`}
   >
     {i18n.t("run_a_server")}
@@ -39,10 +39,12 @@ const RunServerButton = () => (
 
 const FollowCommunitiesBlock = () => (
   <div className="flex flex-col items-center mt-16">
-    <div className="card card-bordered w-11/12 bg-neutral-800 shadow-xl">
+    <div className="card card-bordered bg-neutral-800 shadow-xl">
       <div className="card-body items-center px-32 py-16">
-        <p class="card-title text-center">{i18n.t("follow_communities")}</p>
-        <p class="text-sm text-gray-300 text-center mb-3">
+        <p class="card-title text-4xl text-center mb-3">
+          {i18n.t("follow_communities")}
+        </p>
+        <p class="text-sm text-gray-300 text-center mb-6">
           {i18n.t("lemmy_long_desc")}
         </p>
         <JoinServerButton />
@@ -52,7 +54,7 @@ const FollowCommunitiesBlock = () => (
 );
 
 const FeatureCard = ({ pic, title, subtitle }) => (
-  <div className="card card-bordered w-auto bg-neutral-800 shadow-xl">
+  <div className="card card-bordered bg-neutral-800 shadow-xl">
     <figure className="px-10 pt-10">
       <img src={pic} className="rounded-xl" />
     </figure>
@@ -124,21 +126,21 @@ const ModToolsCard = () => (
 
 const FeatureCardsBlock = () => (
   <div className="grid md:grid-cols-12 grid-cols-1 gap-4 mt-16">
-    <div className="col-span-7">
+    <div className="md:col-span-7">
       <OpenSourceCard />
     </div>
-    <div className="col-span-5">
+    <div className="md:col-span-5">
       <BlazingFastCard />
     </div>
-    <div className="col-span-4">
+    <div className="md:col-span-4">
       <ModToolsCard />
     </div>
     {/* TODO Add censorship and other cards */}
 
-    <div className="col-span-4">
+    <div className="md:col-span-4">
       <ModToolsCard />
     </div>
-    <div className="col-span-4">
+    <div className="md:col-span-4">
       <ModToolsCard />
     </div>
   </div>
@@ -146,12 +148,12 @@ const FeatureCardsBlock = () => (
 
 const DiscussionPlatformBlock = () => (
   <div className="flex flex-col items-center mt-16">
-    <div className="card card-bordered w-11/12 bg-gradient-to-r text-transparent from-primary to-secondary shadow-xl">
+    <div className="card card-bordered bg-gradient-to-r text-transparent from-primary to-secondary shadow-xl">
       <div className="card-body items-center px-32 py-16">
-        <p class="card-title text-center text-white">
+        <p class="card-title text-4xl text-center text-white mb-3">
           {i18n.t("create_discussion_platform")}
         </p>
-        <p class="text-sm text-white text-center mb-3">
+        <p class="text-sm text-white text-center mb-6">
           <T i18nKey="create_discussion_platform_desc">
             #
             <a
@@ -178,7 +180,11 @@ const DiscussionPlatformBlock = () => (
 // TODO add all of these ones
 const MoreFeaturesBlock = () => (
   <div className="mt-16">
-    <div className="text-center text-2xl mb-8">{i18n.t("more_features")}</div>
+    <div
+      className={`text-center text-primary text-4xl mb-8 ${gradientTextClasses}`}
+    >
+      {i18n.t("more_features")}
+    </div>
     <div className="grid md:grid-cols-5 grid-cols-1 gap-4">
       <MoreFeaturesCard
         icons={<Icon icon="f-droid" />}
@@ -186,13 +192,13 @@ const MoreFeaturesBlock = () => (
           <T i18nKey="self_hostable">
             #
             <a
-              className="link"
+              className="link link-primary"
               href={`/docs/administration/install_docker.html`}
             >
               #
             </a>
             <a
-              className="link"
+              className="link link-primary"
               href={`/docs/administration/install_ansible.html`}
             >
               #
@@ -206,7 +212,138 @@ const MoreFeaturesBlock = () => (
             <Icon icon="f-droid" /> <Icon icon="f-droid" />
           </div>
         }
-        text={"Some more here"}
+        text={i18n.t("clean_interface")}
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={
+          <Link class="link link-primary" to="/apps">
+            {i18n.t("mobile_apps_for_ios_and_android")}
+          </Link>
+        }
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={i18n.t("avatar_support")}
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={
+          <T i18nKey="full_vote_scores">
+            #<code class="text-primary">#</code>#
+          </T>
+        }
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={i18n.t("themes_including")}
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={
+          <T i18nKey="emojis_autocomplete">
+            #<code class="text-primary">#</code>
+          </T>
+        }
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={
+          <T i18nKey="user_tagging">
+            #<code class="text-primary">#</code>
+            <code class="text-primary">#</code>
+          </T>
+        }
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={i18n.t("integrated_image_uploading")}
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={i18n.t("notifications_including")}
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={
+          <T i18nKey="i18n_support">
+            #
+            <a
+              className="link link-primary"
+              href="https://weblate.join-lemmy.org/projects/lemmy/lemmy/"
+            >
+              #
+            </a>
+          </T>
+        }
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={
+          <T i18nKey="rss_feeds">
+            #<code class="text-primary">#</code>
+            <code class="text-primary">#</code>
+            <code class="text-primary">#</code>
+            <code class="text-primary">#</code>
+            <code class="text-primary">#</code>
+          </T>
+        }
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={i18n.t("can_fully_erase")}
+      />
+      <MoreFeaturesCard
+        icons={
+          <div>
+            <Icon icon="f-droid" /> <Icon icon="f-droid" />
+          </div>
+        }
+        text={i18n.t("nsfw_support")}
       />
     </div>
   </div>
@@ -215,12 +352,58 @@ const MoreFeaturesBlock = () => (
 const MoreFeaturesCard = ({ icons, text }) => (
   <div className="card card-bordered w-auto bg-neutral-800 shadow-xl">
     <div className="card-body">
-      <div className="btn btn-sm btn-secondary w-fit mb-3">{icons}</div>
+      <div className="btn btn-sm btn-secondary w-fit mb-2">{icons}</div>
       <p className="text-sm text-gray-300">{text}</p>
     </div>
   </div>
 );
 
+const DonateDesc = () => (
+  <p className="text-sm text-gray-300 mb-6">
+    <T i18nKey="donate_desc">
+      #
+      <Link className="link" to="/donate">
+        #
+      </Link>
+      #
+    </T>
+  </p>
+);
+
+const DonateButtons = () => (
+  <div class="flex flex-row justify-between gap-2">
+    <a class="btn btn-primary text-white" href="https://liberapay.com/Lemmy">
+      {i18n.t("support_on_liberapay")}
+    </a>
+    <a
+      class="btn btn-secondary text-white"
+      href="https://www.patreon.com/dessalines"
+    >
+      {i18n.t("support_on_patreon")}
+    </a>
+    <a
+      class="btn btn-primary text-white"
+      href="https://opencollective.com/lemmy"
+    >
+      {i18n.t("support_on_opencollective")}
+    </a>
+  </div>
+);
+
+const SupportDonateBlock = () => (
+  <div className="flex flex-col items-center mt-16">
+    <div className="card card-bordered bg-neutral-800 shadow-xl">
+      <div className="card-body px-32 py-16">
+        <p class={`card-title text-4xl mb-3 ${gradientTextClasses}`}>
+          {i18n.t("support_donate")}
+        </p>
+        <DonateDesc />
+        <DonateButtons />
+      </div>
+    </div>
+  </div>
+);
+
 export class Main extends Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
@@ -244,6 +427,7 @@ export class Main extends Component<any, any> {
         <FeatureCardsBlock />
         <DiscussionPlatformBlock />
         <MoreFeaturesBlock />
+        <SupportDonateBlock />
 
         <div class="bg-success">
           <br />
@@ -412,7 +596,6 @@ export class Main extends Component<any, any> {
               <h2>
                 <Link to="/donate">{i18n.t("support_donate")}</Link>
               </h2>
-              <DonateLines />
             </div>
           </div>
           <br />