mirror of
https://github.com/LemmyNet/joinlemmy-site.git
synced 2024-11-22 20:31:17 +00:00
Finishing up blocks.
This commit is contained in:
parent
65aae5f412
commit
8bd2eb826d
3 changed files with 208 additions and 68 deletions
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Reference in a new issue