301 lines
8.9 KiB
TypeScript
301 lines
8.9 KiB
TypeScript
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
|
||
|
||
import React from "react";
|
||
|
||
import { Carousel } from "react-responsive-carousel";
|
||
|
||
import Head from "@docusaurus/Head";
|
||
import Link from "@docusaurus/Link";
|
||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||
import Layout from "@theme/Layout";
|
||
|
||
import { SocialCard, SocialCardProps } from "../components/homepage/SocialCard";
|
||
|
||
const features = [
|
||
{
|
||
title: "Основа мережі — Спілкування",
|
||
imageUrl: "img/homepage/messages.svg",
|
||
description: (
|
||
<>
|
||
Мережу в першу чергу, створюють люди, а не технології. Спілкування
|
||
дозволяє нам зберігати зв'язок з друзями та родиною, а також будувати
|
||
новий, цікавий і вільний світ.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: "Захист",
|
||
imageUrl: "img/homepage/encryption.svg",
|
||
description: (
|
||
<>
|
||
Ми намагаємося захистити вашу приватність, використовуючи шифрування де
|
||
це можливо та необхідно. Ви можете використовувати власні ключі
|
||
шифрування, щоб забезпечити максимальний рівень захисту. Ми також
|
||
відкриті для аудиту та вдосконалення наших методів шифрування та
|
||
захисту.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: "Незалежність",
|
||
imageUrl: "img/homepage/platforms.svg",
|
||
description: (
|
||
<>
|
||
Свобода спілкування не повинна бути обмежена. Ми намагаємося
|
||
підтримувати якомога більше платформ, щоб ви могли спілкуватися з
|
||
друзями та родиною, незалежно від того, який пристрій ви використовуєте.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: "Open Source",
|
||
imageUrl: "img/homepage/opensource.svg",
|
||
description: (
|
||
<>
|
||
Мережа побудована на основі відкритих проектів, що дозволяє вам приймати
|
||
участь в розвитку та вдосконаленні мережі.
|
||
</>
|
||
),
|
||
},
|
||
];
|
||
|
||
const SocialCards: SocialCardProps[] = [
|
||
{
|
||
color: "bg-[#3875EA]",
|
||
link: "https://irc.dead.guru",
|
||
children: (
|
||
<img alt="irc" className="m-auto h-10" src="/img/services/irc.svg" />
|
||
),
|
||
},
|
||
{
|
||
color: "bg-[#FFFFFF]",
|
||
link: "https://matrix.to/#/#adhd_lab:hypogea.org",
|
||
children: (
|
||
<img
|
||
alt="matrix"
|
||
className="m-auto h-14"
|
||
src="/img/services/Matrix_logo.svg"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
color: "bg-[#95c0d9]",
|
||
link: "https://xmpp.dead.guru:5281/",
|
||
children: (
|
||
<img
|
||
alt="xmpp"
|
||
className="m-auto h-14"
|
||
src="/img/services/XMPP_logo.svg"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
color: "bg-[#f05539]",
|
||
link: "https://git.dead.guru/",
|
||
children: (
|
||
<img alt="git" className="m-auto h-14" src="/img/services/git_logo.svg" />
|
||
),
|
||
},
|
||
{
|
||
color: "bg-[#9e9b9a]",
|
||
link: "https://mine.dead.guru",
|
||
children: (
|
||
<img
|
||
alt="minecraft"
|
||
className="m-auto h-16"
|
||
src="/img/services/minecraft_logo.svg"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
color: "bg-[#39322b]",
|
||
link: "https://bookhouse.hypogea.org/",
|
||
children: (
|
||
<img
|
||
alt="Calibre"
|
||
className="m-auto h-12"
|
||
src="/img/services/Calibre_logo.png"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
color: "bg-[#6366f1]",
|
||
link: "https://pi.dead.guru",
|
||
children: (
|
||
<img
|
||
alt="reddit"
|
||
className="m-auto h-20"
|
||
src="/img/services/Pixelfed_logo.svg"
|
||
/>
|
||
),
|
||
},
|
||
];
|
||
|
||
function Home() {
|
||
const context = useDocusaurusContext();
|
||
const { siteConfig } = context;
|
||
return (
|
||
<Layout>
|
||
<Head>
|
||
<meta property="og:title" content="Dead Network" />
|
||
<meta
|
||
property="og:image"
|
||
content="https://assada.dead.guru/storage/images/1688850203_o_g.jpg"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="Надаємо різноманітні сервіси-платформи, які дають змогу окремим особам і спільнотам спілкуватися, ділитися та розвиватися разом."
|
||
/>
|
||
<meta property="og:url" content="https://network.dead.guru/" />
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
</Head>
|
||
<header style={{ textAlign: "center" }} className="hero hero--primary">
|
||
<div className="container">
|
||
<h1 className="hero__title">
|
||
<img
|
||
style={{ paddingTop: "2rem", paddingBottom: "2rem" }}
|
||
alt="Dead Logo"
|
||
className="header__logo"
|
||
src={useBaseUrl("img/dead-banner.png")}
|
||
/>
|
||
</h1>
|
||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||
<div className="indexCtas">
|
||
<Link className="button button--lg" to="/docs/introduction">
|
||
Дізнатися більше
|
||
</Link>
|
||
<Link className="button button--lg" to="/docs/getting-started">
|
||
Розпочати
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main className="flex flex-col gap-4">
|
||
<Carousel autoPlay infiniteLoop showStatus={false} showThumbs={false}>
|
||
{features.map((feature) => (
|
||
<div key={feature.title} className="flex p-12">
|
||
<div className="w-1/2">
|
||
<img
|
||
className="my-auto h-40"
|
||
src={feature.imageUrl}
|
||
alt={feature.title}
|
||
/>
|
||
</div>
|
||
<div className="my-auto w-1/2">
|
||
<h3 className="text-xl font-medium">{feature.title}</h3>
|
||
<p>{feature.description}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</Carousel>
|
||
|
||
<div className="bg-primaryDark mx-auto flex w-full lg:w-auto flex-col gap-4 p-4 shadow-inner">
|
||
<h3 className="text-xl font-bold">Приєднуйтесь до нас.</h3>
|
||
<div className="flex w-full overflow-x-auto">
|
||
{SocialCards.map((card) => (
|
||
<SocialCard key={card.link} color={card.color} link={card.link}>
|
||
{card.children}
|
||
</SocialCard>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="container mx-auto flex w-auto flex-col">
|
||
<h2 className="mb-2 text-xl font-medium">
|
||
Доєднайтеся до "Мертвої" мережі в 3 кроки.
|
||
</h2>
|
||
<ul
|
||
className="mx-auto"
|
||
style={{
|
||
position: "relative",
|
||
display: "grid",
|
||
gap: "1.5rem",
|
||
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
|
||
paddingLeft: "0",
|
||
}}
|
||
>
|
||
<div className="card">
|
||
<div
|
||
className="card__header"
|
||
style={{ display: "flex", justifyContent: "space-between" }}
|
||
>
|
||
<h3>1. Оберіть платформу</h3>
|
||
</div>
|
||
<div
|
||
className="card__body"
|
||
style={{ display: "flex", justifyContent: "center" }}
|
||
>
|
||
<p>
|
||
Для старту почніть з вибору платформи:
|
||
<ul>
|
||
<li>IRC</li>
|
||
<li>XMPP</li>
|
||
<li>Matrix</li>
|
||
<li>
|
||
Або взагалі проігноруйте сервіси повідомлень і почніть з{" "}
|
||
<a href="">
|
||
<strong>ігрових серверів</strong>
|
||
</a>
|
||
!
|
||
</li>
|
||
</ul>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="card">
|
||
<div
|
||
className="card__header"
|
||
style={{ display: "flex", justifyContent: "space-between" }}
|
||
>
|
||
<h3>2. Завантажте і зареєструйтесь!</h3>
|
||
</div>
|
||
<div
|
||
className="card__body"
|
||
style={{ display: "flex", justifyContent: "center" }}
|
||
>
|
||
<p>
|
||
<a href="/downloads">
|
||
<strong>Завантажте</strong>
|
||
</a>{" "}
|
||
додаток для обраної платформи, перегляньте наш{" "}
|
||
<a href="">
|
||
<strong>мануал по налаштуванню</strong>
|
||
</a>{" "}
|
||
і зареєструйтесь в сервісі мережі.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="card">
|
||
<div
|
||
className="card__header"
|
||
style={{ display: "flex", justifyContent: "space-between" }}
|
||
>
|
||
<h3>3. Приєднайтесь до чату</h3>
|
||
</div>
|
||
<div
|
||
className="card__body"
|
||
style={{ display: "flex", justifyContent: "center" }}
|
||
>
|
||
<p>
|
||
В залежності від ваших інтересів і обраної платформи, ви
|
||
можете приєднатися до:
|
||
<ul>
|
||
<li>Загальний чат</li>
|
||
<li>ADHD Lab</li>
|
||
<li>Ігрові чати</li>
|
||
<li>HAM загальний чат</li>
|
||
</ul>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</ul>
|
||
</div>
|
||
<br />
|
||
</main>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
export default Home;
|