new format

This commit is contained in:
2023-07-25 12:17:45 +03:00
parent 344dc7452a
commit d834b15959
24 changed files with 413 additions and 181 deletions

View File

@@ -9,6 +9,7 @@ import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";
import Heading from '@theme/Heading';
import { SocialCard, SocialCardProps } from "../components/homepage/SocialCard";
@@ -141,7 +142,7 @@ function Home() {
<meta property="og:title" content="Dead Network" />
<meta
property="og:image"
content="https://assada.dead.guru/storage/images/1688850203_o_g.jpg"
content="https://network.dead.guru/img/social-preview-1200x630.png"
/>
<meta
property="og:description"
@@ -150,46 +151,18 @@ function Home() {
<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">
<header style={{ textAlign: "center" }} className="hero bg-transparent">
<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>
<img src="/img/banner.gif" className="mx-auto" alt="" />
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className="indexCtas">
<Link className="button button--lg" to="/docs/introduction">
<Link className="button button--lg text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2" 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">
@@ -200,98 +173,56 @@ function Home() {
))}
</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>
<section className="">
<div className="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<h2 className="mb-8 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Основні положення</h2>
<div className="grid pt-8 text-left border-t border-gray-200 md:gap-16 dark:border-gray-700 md:grid-cols-2">
<div>
<div className="mb-10">
<h3 className="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg className="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
Основа мережі — Спілкування
</h3>
<p className="text-gray-500 dark:text-gray-400">Мережу в першу чергу, створюють люди, а не технології. Спілкування
дозволяє нам зберігати зв'язок з друзями та родиною, а також будувати
новий, цікавий і вільний світ.</p>
</div>
<div className="mb-10">
<h3 className="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg className="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
Захист
</h3>
<p className="text-gray-500 dark:text-gray-400">Ми намагаємося захистити вашу приватність, використовуючи шифрування де
це можливо та необхідно. Ви можете використовувати власні ключі
шифрування, щоб забезпечити максимальний рівень захисту. Ми також
відкриті для аудиту та вдосконалення наших методів шифрування та
захисту.</p>
</div>
</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 className="mb-10">
<h3 className="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg className="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
Незалежність
</h3>
<p className="text-gray-500 dark:text-gray-400">Свобода спілкування не повинна бути обмежена. Ми намагаємося
підтримувати якомога більше платформ, щоб ви могли спілкуватися з
друзями та родиною, незалежно від того, який пристрій ви використовуєте.</p>
</div>
<div className="mb-10">
<h3 className="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg className="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
Open Source
</h3>
<p className="text-gray-500 dark:text-gray-400">Мережа побудована на основі відкритих проектів, що дозволяє вам приймати
участь в розвитку та вдосконаленні мережі. Ми намагаємося публікувати всі наші розробки на загал одразу.</p>
<p className="text-gray-500 dark:text-gray-400">Знайти наші відкриті проекти ви можете <a href="#" className="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">на GitHub</a>, або на DeadTea.</p>
</div>
</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 />
</div>
</section>
</main>
</Layout>
);