Enhance project structure and styling for landing page. Add detailed file structure documentation in cloud.md. Update webpack configuration to support CSS Modules and SCSS. Introduce new styles for terms page and integrate them into the build process. Update package.json and package-lock.json with new dependencies for improved styling capabilities.
All checks were successful
platform/bro-js/bro.landing/pipeline/head This commit looks good
All checks were successful
platform/bro-js/bro.landing/pipeline/head This commit looks good
This commit is contained in:
Primakov Alexandr Alexandrovich
@@ -4,11 +4,17 @@ import { i18nextReactInitConfig } from '@brojs/cli';
|
||||
import { createRoot, hydrateRoot } from 'react-dom/client'
|
||||
|
||||
import App from './app';
|
||||
import * as styles from './styles/main.module.scss';
|
||||
|
||||
i18next.t = i18next.t.bind(i18next);
|
||||
const i18nextPromise = i18nextReactInitConfig(i18next);
|
||||
const MOUNT_NODE = document.getElementById('app');
|
||||
|
||||
// Применяем класс к app контейнеру
|
||||
if (MOUNT_NODE) {
|
||||
MOUNT_NODE.className = styles.app || 'app';
|
||||
}
|
||||
|
||||
(async () => {
|
||||
await Promise.all([i18nextPromise]);
|
||||
|
||||
|
||||
13
src/styles/main.module.scss
Normal file
13
src/styles/main.module.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
// Main styles for the landing page
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
2
src/styles/main.module.scss.d.ts
vendored
Normal file
2
src/styles/main.module.scss.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
export const app: string;
|
||||
|
||||
157
src/styles/terms.scss
Normal file
157
src/styles/terms.scss
Normal file
@@ -0,0 +1,157 @@
|
||||
// Terms page styles
|
||||
$primary-color: #1a202c;
|
||||
$bg-color: #f7fafc;
|
||||
$white: #fff;
|
||||
$text-secondary: #4a5568;
|
||||
$text-muted: #718096;
|
||||
$text-light: #a0aec0;
|
||||
$border-color: #e2e8f0;
|
||||
$link-color: #3182ce;
|
||||
|
||||
$container-max-width: 1200px;
|
||||
$border-radius: 8px;
|
||||
$spacing-base: 1rem;
|
||||
|
||||
// Breakpoints
|
||||
$mobile: 768px;
|
||||
$tablet: 1024px;
|
||||
|
||||
// Reset
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: $primary-color;
|
||||
background: $bg-color;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: $container-max-width;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.terms-doc {
|
||||
background: $white;
|
||||
padding: 60px 80px;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 40px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #2d3748;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@media (max-width: $mobile) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: $text-muted;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: $spacing-base;
|
||||
|
||||
@media (max-width: $mobile) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
text-align: center;
|
||||
color: $text-light;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid $border-color;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #2d3748;
|
||||
margin: 2rem 0 $spacing-base;
|
||||
|
||||
@media (max-width: $mobile) {
|
||||
font-size: 1.5rem;
|
||||
margin: 1.5rem 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: $text-secondary;
|
||||
margin: 1.5rem 0 0.75rem;
|
||||
|
||||
@media (max-width: $mobile) {
|
||||
font-size: 1.1rem;
|
||||
margin: 1.25rem 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: $spacing-base;
|
||||
color: $text-secondary;
|
||||
font-size: 1rem;
|
||||
|
||||
@media (max-width: $mobile) {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: $spacing-base 0 $spacing-base 2rem;
|
||||
color: $text-secondary;
|
||||
font-size: 1rem;
|
||||
|
||||
@media (max-width: $mobile) {
|
||||
font-size: 0.95rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid $border-color;
|
||||
color: $text-light;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@@ -8,95 +8,7 @@
|
||||
<meta name="description" content="Пользовательское соглашение для платформы обучения фронтенд-разработке BROJS.RU. Условия использования, обработка персональных данных, права и обязанности сторон.">
|
||||
<meta name="yandex-verification" content="98f7e15d1ad66018">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&subset=cyrillic,cyrillic-ext" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #1a202c;
|
||||
background: #f7fafc;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.terms-doc {
|
||||
background: white;
|
||||
padding: 60px 80px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.terms-doc { padding: 40px 24px; }
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #2d3748;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #718096;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.date {
|
||||
text-align: center;
|
||||
color: #a0aec0;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #2d3748;
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #4a5568;
|
||||
margin: 1.5rem 0 0.75rem;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
color: #4a5568;
|
||||
}
|
||||
ul {
|
||||
margin: 1rem 0 1rem 2rem;
|
||||
color: #4a5568;
|
||||
}
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
a {
|
||||
color: #3182ce;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
color: #a0aec0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cssPath %>">
|
||||
</head>
|
||||
<body>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/87860751" style="position:absolute; left:-9999px;" alt=""></div></noscript>
|
||||
|
||||
3
src/terms.js
Normal file
3
src/terms.js
Normal file
@@ -0,0 +1,3 @@
|
||||
// Entry point for terms page styles
|
||||
import './styles/terms.scss';
|
||||
|
||||
Reference in New Issue
Block a user