-
+
+
diff --git a/frontend/src/pages/home/home.module.scss b/frontend/src/pages/home/home.module.scss
index 7284c6a..e7c9e0c 100644
--- a/frontend/src/pages/home/home.module.scss
+++ b/frontend/src/pages/home/home.module.scss
@@ -2,32 +2,10 @@
.homepage {
min-height: 100vh;
- background: linear-gradient(135deg, $color-dark-background 0%, $color-dark-surface-container 50%, $color-dark-primary-container 100%);
color: $color-dark-on-background;
font-family: 'Montserrat', sans-serif;
position: relative;
- &::before {
- content: '';
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background:
- radial-gradient(circle at 20% 80%, rgba($color-dark-primary, 0.3) 0%, transparent 50%),
- radial-gradient(circle at 80% 20%, rgba($color-dark-tertiary, 0.3) 0%, transparent 50%),
- radial-gradient(circle at 40% 40%, rgba($color-dark-secondary, 0.2) 0%, transparent 50%);
- pointer-events: none;
- z-index: 0;
- }
-
- // Cascaded styles for all child elements
- * {
- position: relative;
- z-index: 1;
- }
-
// Container styles
.container {
max-width: 1200px;
@@ -35,17 +13,40 @@
padding: 0 2rem;
}
+ .colorSphere {
+ 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;
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ top: -90vh;
+ opacity: 0.3;
+ left: 0;
+ border-radius: 50%;
+ filter: blur(80px);
+ }
+
// Header styles
.homepageHeader {
- padding: 1rem 0;
- background: rgba($color-dark-surface-container, 0.8);
- backdrop-filter: blur(20px);
- border-bottom: 1px solid rgba($color-dark-primary, 0.3);
- box-shadow: 0 4px 20px rgba($color-dark-primary, 0.1);
+ margin: 0 16px;
+ padding: 16px 5px;
+ background: rgba($color-dark-surface, 0.8);
+ backdrop-filter: blur(10px);
position: sticky;
- top: 0;
+ top: 16px;
z-index: 1000;
transition: all 0.3s ease;
+ border-radius: 30px;
.headerContent {
display: flex;
@@ -53,192 +54,99 @@
align-items: center;
.logo {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ .logoIcon {
+ width: 40px;
+ height: 40px;
+ background-image: url('../../images/logo_square.svg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ border-radius: 12px;
+ }
+
h1 {
font-size: 2rem;
font-weight: 700;
margin: 0;
- background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
+ background: linear-gradient(45deg, #9333EA, #6366F1, #3B82F6, #A855F7, #D946EF, #EC4899, #7E22CE);
background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
- text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
- }
-
- .tagline {
- font-size: 0.9rem;
+ text-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
}
}
- .headerNav {
+ .headerCenterLinks {
display: flex;
align-items: center;
gap: 10px;
a {
display: flex;
+ align-items: center;
+ gap: 10px;
}
}
+
+ .headerButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
}
// Hero section
- .hero {
- padding: 4rem 0;
+ .title {
+ padding: 60px 80px;
display: flex;
align-items: center;
- min-height: 80vh;
margin-top: 0;
+ flex-direction: column;
- .heroContent {
- flex: 1;
- max-width: 600px;
-
- .heroTitle {
- font-size: 3.5rem;
- font-weight: 800;
- line-height: 1.1;
- margin-bottom: 1.5rem;
- background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary, $color-dark-secondary);
- background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- text-shadow: 0 0 30px rgba($color-dark-primary, 0.5);
- animation: neonGlow 3s ease-in-out infinite alternate;
- }
-
- .heroDescription {
- font-size: 1.25rem;
- line-height: 1.6;
- margin-bottom: 2.5rem;
- opacity: 0.9;
- }
-
- .heroActions {
- display: flex;
- gap: 1rem;
- flex-wrap: wrap;
- }
+ .titleLogo {
+ width: 120px;
+ height: 120px;
+ background-image: url('../../images/logo_square.svg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ border-radius: 30px;
}
- .heroVisual {
- flex: 1;
+ .titleContent {
+ font-size: 30pt;
+ font-weight: 700;
+ background: linear-gradient(45deg, #9333EA, #6366F1, #3B82F6, #A855F7, #D946EF, #EC4899, #7E22CE);
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ text-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
+ margin-top: 10px;
+ }
+
+ .titleDesc {
+ font-size: 16pt;
+ opacity: 0.8;
+ margin-top: 10px;
+ text-align: center;
+ }
+
+ .titleButtons {
display: flex;
- justify-content: center;
- align-items: center;
- padding: 2rem;
-
- .chatPreview {
- perspective: 1000px;
-
- .chatWindow {
- background: rgba($color-dark-surface-container, 0.95);
- border-radius: 20px;
- padding: 1.5rem;
- box-shadow:
- 0 20px 40px rgba(0, 0, 0, 0.5),
- 0 0 20px rgba($color-dark-primary, 0.3),
- inset 0 1px 0 rgba($color-dark-primary, 0.2);
- transform: rotateY(-5deg) rotateX(5deg);
- color: $color-dark-on-surface;
- max-width: 400px;
- width: 100%;
- border: 1px solid rgba($color-dark-primary, 0.3);
-
- .chatHeader {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-bottom: 1rem;
- border-bottom: 1px solid rgba($color-dark-primary, 0.3);
- margin-bottom: 1rem;
-
- .chatTitle {
- font-weight: 600;
- font-size: 1.1rem;
- }
-
- .onlineIndicator {
- color: $color-dark-primary;
- font-size: 0.8rem;
- text-shadow: 0 0 10px rgba($color-dark-primary, 0.8);
- animation: pulse 2s ease-in-out infinite;
- }
- }
-
- .chatMessages {
- display: flex;
- flex-direction: column;
- gap: 1rem;
-
- .message {
- display: flex;
- gap: 0.75rem;
- align-items: flex-start;
-
- &.sent {
- flex-direction: row-reverse;
-
- .messageContent {
- background: linear-gradient(135deg, $color-dark-primary, $color-dark-primary-container);
- color: $color-dark-on-primary;
- box-shadow: 0 0 15px rgba($color-dark-primary, 0.3);
- }
- }
-
- &.received {
- .messageContent {
- background: rgba($color-dark-surface-variant, 0.8);
- color: $color-dark-on-surface-variant;
- border: 1px solid rgba($color-dark-outline-variant, 0.3);
- }
- }
-
- .messageAvatar {
- width: 32px;
- height: 32px;
- border-radius: 50%;
- background: linear-gradient(135deg, $color-dark-primary, $color-dark-tertiary);
- color: $color-dark-on-primary;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 600;
- font-size: 0.8rem;
- flex-shrink: 0;
- box-shadow: 0 0 10px rgba($color-dark-primary, 0.4);
- }
-
- .messageContent {
- max-width: 70%;
- padding: 0.75rem 1rem;
- border-radius: 18px;
- position: relative;
-
- .messageText {
- font-size: 0.9rem;
- line-height: 1.4;
- }
-
- .messageTime {
- font-size: 0.75rem;
- opacity: 0.7;
- margin-top: 0.25rem;
- }
- }
- }
- }
- }
- }
+ gap: 10px;
+ margin-top: 20px;
}
}
// Features section
.features {
padding: 6rem 0;
- background: rgba($color-dark-surface-container, 0.3);
backdrop-filter: blur(20px);
- border-top: 1px solid rgba($color-dark-primary, 0.2);
- border-bottom: 1px solid rgba($color-dark-primary, 0.2);
.sectionTitle {
text-align: center;
@@ -373,9 +281,7 @@
// CTA section
.cta {
padding: 6rem 0;
- background: rgba($color-dark-surface-container, 0.3);
backdrop-filter: blur(20px);
- border-top: 1px solid rgba($color-dark-primary, 0.2);
.ctaContent {
text-align: center;
@@ -411,10 +317,8 @@
// Footer
.homepageFooter {
- background: rgba($color-dark-surface-container, 0.8);
backdrop-filter: blur(20px);
padding: 3rem 0 1rem;
- border-top: 1px solid rgba($color-dark-primary, 0.3);
box-shadow: 0 -4px 20px rgba($color-dark-primary, 0.1);
.footerContent {
@@ -461,7 +365,6 @@
.footerBottom {
text-align: center;
padding-top: 2rem;
- border-top: 1px solid rgba($color-dark-primary, 0.3);
p {
opacity: 0.7;
@@ -489,170 +392,4 @@
50% {
opacity: 0.5;
}
-}
-
-// Responsive Design
-@media (min-width: 1024px) {
- .homepage {
- .homepageHeader {
- position: fixed;
- top: 1rem;
- left: 50%;
- transform: translateX(-50%);
- width: calc(100% - 2rem);
- max-width: 1200px;
- border-radius: 20px;
- border: 1px solid rgba($color-dark-primary, 0.3);
- box-shadow:
- 0 8px 32px rgba(0, 0, 0, 0.3),
- 0 0 20px rgba($color-dark-primary, 0.2);
- backdrop-filter: blur(30px);
- background: rgba($color-dark-surface-container, 0.9);
- }
-
- .hero {
- margin-top: 6rem;
- }
- }
-}
-
-@media (max-width: 1023px) {
- .homepage {
- .homepageHeader {
- position: sticky;
- top: 0;
- border-radius: 0;
- margin: 0;
- width: 100%;
- transform: none;
- }
- }
-}
-
-@media (max-width: 768px) {
- .homepage {
- .container {
- padding: 0 1rem;
- }
-
- .homepageHeader {
- .headerContent {
- flex-direction: column;
- gap: 1rem;
- }
- }
-
- .hero {
- flex-direction: column;
- text-align: center;
- padding: 2rem 0;
-
- .heroContent {
- .heroTitle {
- font-size: 2.5rem;
- }
-
- .heroDescription {
- font-size: 1.1rem;
- }
- }
-
- .heroVisual {
- padding: 1rem;
-
- .chatPreview {
- .chatWindow {
- transform: none;
- max-width: 100%;
- }
- }
- }
- }
-
- .features {
- .featuresGrid {
- grid-template-columns: 1fr;
-
- .featureCard {
- padding: 1.5rem;
- }
- }
-
- .sectionTitle {
- font-size: 2rem;
- }
- }
-
- .download {
- .downloadContent {
- h3 {
- font-size: 2rem;
- }
-
- .downloadButtons {
- flex-direction: column;
- align-items: center;
- }
- }
- }
-
- .cta {
- .ctaContent {
- h3 {
- font-size: 2rem;
- }
-
- .ctaActions {
- flex-direction: column;
- align-items: center;
- }
- }
- }
-
- .homepageFooter {
- .footerContent {
- grid-template-columns: 1fr;
- text-align: center;
- }
- }
- }
-}
-
-@media (max-width: 480px) {
- .homepage {
- .hero {
- .heroContent {
- .heroTitle {
- font-size: 2rem;
- }
-
- .heroDescription {
- font-size: 1rem;
- }
- }
- }
-
- .features {
- .sectionTitle {
- font-size: 1.75rem;
- }
- }
-
- .download {
- .downloadContent {
- h3 {
- font-size: 1.75rem;
- }
- }
- }
-
- .cta {
- .ctaContent {
- h3 {
- font-size: 1.75rem;
- }
- }
- }
- }
-}
-
+}
\ No newline at end of file
-
- - Безопасный мессенджер с открытым исходным кодом -
-- FromChat — это полностью открытый мессенджер с end-to-end шифрованием, - поддержкой файлов и уведомлений. Создан для тех, кто ценит приватность и свободу. -
-
- {openBtn}
- {!isMobile && (
- navigate("/register")}>
- Зарегистрироваться
-
- )}
-
-
-
+
-
-
-
-
-
- Общий чат
- ●
-
-
-
-
- А
-
-
- Привет! Как дела?
- 14:30
-
-
-
-
- Всё отлично! А у тебя как?
- 14:32
-
-
- Б
-
-
- Отправляю файл 📎
- 14:35
- FromChat
+ 100% бесплатный и открытый мессенджер. Поддерживает self-hosted установку на своем сервере.
+
+ navigate("/auth?mode=login")} icon="devices">Открыть веб-версию
+ navigate("/download-app")} icon="download">Скачать приложение