mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Implement screenshots in features
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
@@ -3,6 +3,9 @@ import { useUserStore } from "@/state/user";
|
|||||||
import styles from "./home.module.scss";
|
import styles from "./home.module.scss";
|
||||||
import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen";
|
import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen";
|
||||||
import { MaterialButton, MaterialIcon } from "@/utils/material";
|
import { MaterialButton, MaterialIcon } from "@/utils/material";
|
||||||
|
import generalChatScreenshot from "../../images/screenshots/general-chat.png";
|
||||||
|
import dmScreenshot from "../../images/screenshots/dm.png";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
function GitHubLink({ children }: { children: React.ReactNode }) {
|
function GitHubLink({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
@@ -16,6 +19,35 @@ function SupportLink({ children }: { children: React.ReactNode }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface FeatureSectionProps {
|
||||||
|
title: ReactNode;
|
||||||
|
children: ReactNode;
|
||||||
|
screenshot: string;
|
||||||
|
right?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function FeatureSection({title, children, screenshot, right = false}: FeatureSectionProps) {
|
||||||
|
const featureText = (
|
||||||
|
<div className={styles.featureText}>
|
||||||
|
<div className={styles.featureTitle}>{title}</div>
|
||||||
|
<div className={styles.featureDesc}>{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const featureScreenshot = (
|
||||||
|
<div className={styles.featureScreenshotOuter}>
|
||||||
|
<div className={styles.featureScreenshotGlow} />
|
||||||
|
<img src={screenshot} className={styles.featureScreenshot} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${styles.featureContainer}`}>
|
||||||
|
{right ? <>{featureText}{featureScreenshot}</> : <>{featureScreenshot}{featureText}</>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { user } = useUserStore();
|
const { user } = useUserStore();
|
||||||
@@ -75,76 +107,18 @@ export default function HomePage() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className={styles.features}>
|
<section className={styles.features}>
|
||||||
<div className={styles.container}>
|
<FeatureSection
|
||||||
<h3 className={styles.sectionTitle}>Возможности</h3>
|
title={<>Общий чат</>}
|
||||||
<div className={styles.featuresGrid}>
|
screenshot={generalChatScreenshot}
|
||||||
<div className={styles.featureCard}>
|
right
|
||||||
<div className={styles.featureIcon}>
|
>
|
||||||
<MaterialIcon name="security" />
|
Общайтесь со всеми пользователями этого сервера FromChat.
|
||||||
</div>
|
</FeatureSection>
|
||||||
<h4>End-to-End Шифрование</h4>
|
<FeatureSection
|
||||||
<p>
|
title={<>Личные сообщения</>}
|
||||||
Ваши личные сообщения защищены современным шифрованием X25519 + AES-GCM.
|
screenshot={dmScreenshot}>
|
||||||
Только вы и получатель можете прочитать сообщения.
|
Общайтесь с одним человеком.
|
||||||
</p>
|
</FeatureSection>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.featureCard}>
|
|
||||||
<div className={styles.featureIcon}>
|
|
||||||
<MaterialIcon name="code" />
|
|
||||||
</div>
|
|
||||||
<h4>100% открытый код</h4>
|
|
||||||
<p>
|
|
||||||
Весь исходный код доступен на <GitHubLink>GitHub</GitHubLink>. Вы можете проверить безопасность,
|
|
||||||
внести изменения или развернуть свой сервер.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.featureCard}>
|
|
||||||
<div className={styles.featureIcon}>
|
|
||||||
<MaterialIcon name="attach_file" />
|
|
||||||
</div>
|
|
||||||
<h4>Обмен Файлами</h4>
|
|
||||||
<p>
|
|
||||||
Отправляйте файлы до 4 ГБ. Файлы в личных сообщениях шифруются.
|
|
||||||
В общем чате шифрования нет, так как ваши сообщения могут читать все пользователи FromChat.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.featureCard}>
|
|
||||||
<div className={styles.featureIcon}>
|
|
||||||
<MaterialIcon name="notifications" />
|
|
||||||
</div>
|
|
||||||
<h4>Уведомления</h4>
|
|
||||||
<p>
|
|
||||||
Получайте push-уведомления в браузере и настольном приложении.
|
|
||||||
Никогда не пропустите важное сообщение.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.featureCard}>
|
|
||||||
<div className={styles.featureIcon}>
|
|
||||||
<MaterialIcon name="edit" />
|
|
||||||
</div>
|
|
||||||
<h4>Редактирование</h4>
|
|
||||||
<p>
|
|
||||||
Редактируйте и удаляйте свои сообщения. Отвечайте на сообщения
|
|
||||||
для лучшего контекста общения.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.featureCard}>
|
|
||||||
<div className={styles.featureIcon}>
|
|
||||||
<MaterialIcon name="computer" />
|
|
||||||
</div>
|
|
||||||
<h4>Кроссплатформенность</h4>
|
|
||||||
<p>
|
|
||||||
Работает в браузере и как настольное приложение для Windows,
|
|
||||||
macOS и Linux. Единый интерфейс везде.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className={styles.download}>
|
<section className={styles.download}>
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
color: $color-dark-on-background;
|
color: $color-dark-on-background;
|
||||||
font-family: 'Montserrat', sans-serif;
|
font-family: 'Montserrat', sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
background-color: $color-dark-surface;
|
||||||
|
|
||||||
// Container styles
|
// Container styles
|
||||||
.container {
|
.container {
|
||||||
@@ -145,98 +146,88 @@
|
|||||||
|
|
||||||
// Features section
|
// Features section
|
||||||
.features {
|
.features {
|
||||||
padding: 6rem 0;
|
display: flex;
|
||||||
backdrop-filter: blur(20px);
|
flex-direction: column;
|
||||||
|
gap: 50px;
|
||||||
|
|
||||||
.sectionTitle {
|
.featureContainer {
|
||||||
text-align: center;
|
display: flex;
|
||||||
font-size: 2.5rem;
|
flex-direction: row;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 0 16px;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 700px;
|
||||||
|
|
||||||
|
.featureText {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
|
||||||
|
.featureTitle {
|
||||||
|
font-size: 30pt;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 3rem;
|
background: linear-gradient(45deg, #9333EA, #6366F1, #3B82F6, #A855F7, #D946EF, #EC4899, #7E22CE);
|
||||||
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
text-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
|
||||||
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.featuresGrid {
|
.featureDesc {
|
||||||
display: grid;
|
text-align: left;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
font-size: 15pt;
|
||||||
gap: 2rem;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.featureCard {
|
.featureScreenshotOuter {
|
||||||
background: rgba($color-dark-surface-container, 0.6);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2rem;
|
|
||||||
border: 1px solid rgba($color-dark-primary, 0.3);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&::before {
|
.featureScreenshotGlow {
|
||||||
content: '';
|
$size: 400px;
|
||||||
|
|
||||||
|
@keyframes rotateGradient {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
background: conic-gradient(
|
||||||
|
from 0deg,
|
||||||
|
rgba(147, 51, 234, 0.5) 0%,
|
||||||
|
rgba(99, 102, 241, 0.6) 12.5%,
|
||||||
|
rgba(59, 130, 246, 0.55) 25%,
|
||||||
|
rgba(168, 85, 247, 0.5) 37.5%,
|
||||||
|
rgba(217, 70, 239, 0.6) 50%,
|
||||||
|
rgba(236, 72, 153, 0.55) 62.5%,
|
||||||
|
rgba(192, 132, 252, 0.5) 75%,
|
||||||
|
rgba(126, 34, 206, 0.6) 87.5%,
|
||||||
|
rgba(147, 51, 234, 0.5) 100%
|
||||||
|
);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
width: $size;
|
||||||
left: 0;
|
height: $size;
|
||||||
right: 0;
|
top: calc(50% - ($size / 2));
|
||||||
bottom: 0;
|
opacity: 0.6;
|
||||||
background: linear-gradient(135deg, rgba($color-dark-primary, 0.1), rgba($color-dark-tertiary, 0.1));
|
left: calc(50% - ($size / 2));
|
||||||
opacity: 0;
|
border-radius: 50%;
|
||||||
transition: opacity 0.3s ease;
|
filter: blur(80px);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
will-change: transform;
|
||||||
|
animation: rotateGradient 8s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
> * {
|
.featureScreenshot {
|
||||||
|
max-width: 300px;
|
||||||
|
z-index: 50;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow:
|
|
||||||
0 20px 40px rgba(0, 0, 0, 0.3),
|
|
||||||
0 0 30px rgba($color-dark-primary, 0.2);
|
|
||||||
border-color: rgba($color-dark-primary, 0.5);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureIcon {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
background: linear-gradient(135deg, rgba($color-dark-primary, 0.3), rgba($color-dark-tertiary, 0.3));
|
|
||||||
border-radius: 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
border: 1px solid rgba($color-dark-primary, 0.4);
|
|
||||||
box-shadow: 0 0 15px rgba($color-dark-primary, 0.2);
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
mdui-icon {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: $color-dark-primary;
|
|
||||||
text-shadow: 0 0 10px rgba($color-dark-primary, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: $color-dark-on-surface;
|
|
||||||
text-shadow: 0 0 10px rgba($color-dark-primary, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: 1.6;
|
|
||||||
opacity: 0.9;
|
|
||||||
color: $color-dark-on-surface-variant;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -280,9 +271,6 @@
|
|||||||
|
|
||||||
// CTA section
|
// CTA section
|
||||||
.cta {
|
.cta {
|
||||||
padding: 6rem 0;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
|
|
||||||
.ctaContent {
|
.ctaContent {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
@@ -317,10 +305,6 @@
|
|||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
.homepageFooter {
|
.homepageFooter {
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
padding: 3rem 0 1rem;
|
|
||||||
box-shadow: 0 -4px 20px rgba($color-dark-primary, 0.1);
|
|
||||||
|
|
||||||
.footerContent {
|
.footerContent {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
|||||||
Reference in New Issue
Block a user