diff --git a/frontend/src/AppRoutes.jsx b/frontend/src/AppRoutes.jsx index 44f3ef2f..91f4c01e 100644 --- a/frontend/src/AppRoutes.jsx +++ b/frontend/src/AppRoutes.jsx @@ -11,8 +11,8 @@ import ScrollToTop from './utils/scrollToTop.js'; import DefaultLoader from './components/Loaders/DefaultLoader.jsx'; -const Landing = lazy(() => import('./pages/landing')); -const NewLanding = lazy(() => import('./landing/Landing.jsx')); +const Landing = lazy(() => import('./pages/landing/Landing.jsx')); +const OldLanding = lazy(() => import('./pages/old-landing')); const ProfilePage = lazy(() => import('./pages/profile')); const SettingsPage = lazy(() => import('./pages/settings')); @@ -55,9 +55,9 @@ function AppRoutes() { }> - } /> + } /> }> - } /> + } /> } /> } /> } /> diff --git a/frontend/src/landing/Header.jsx b/frontend/src/landing/Header.jsx deleted file mode 100644 index af046b38..00000000 --- a/frontend/src/landing/Header.jsx +++ /dev/null @@ -1,144 +0,0 @@ -import { Link } from 'react-router-dom'; -import { - Container, - Navbar, - Image, - Nav, - Button, - Row, - Col, -} from 'react-bootstrap'; -import { useTranslation } from 'react-i18next'; -import routes from '../routes'; - -import RunItLogoLight from './assets/LogoHeaderLightTheme.svg'; -import RunItLogoDark from './assets/LogoHeaderDarkTheme.svg'; -import Burger from './assets/Burger.svg'; - -import 'bootstrap/dist/css/bootstrap.min.css'; -import './landing.scss'; -import './custom-colors.scss'; - -function Header() { - const { t } = useTranslation(); - - const theme = document.documentElement.getAttribute('data-bs-theme'); - - const logo = theme === 'light' ? RunItLogoLight : RunItLogoDark; - - return ( -
- - - - -
- - - - - - -
- - - - - - - - - - - -
-
-
-
- ); -} - -export default Header; diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 95904885..3fd1df6f 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -87,13 +87,13 @@ "dist0": "The software is distributed as an online service (SaaS solution)", "dist1": "No special software installation steps on the user side are required", "faq": "FAQ", - "q0": "What if an IDE?", + "q0": "What is an IDE?", "q1": "How do IDE tools help developers?", "q2": "What kind of IDEs are there?", "q3": "What are the features of the Run IT IDE?" }, "footer": { - "about": "About", + "about": "About Us", "agreement": "Privacy", "blog": "Blog", "career": "Careers at Hexlet", @@ -169,6 +169,12 @@ "second": "IDE" }, "freeProject": "Free Hexlet Project", + "header": { + "about": "About", + "advantages": "Advantages", + "opportunities": "Opportunities", + "faq": "FAQ" + }, "inBrowser": "The editor runs entirely in the browser, so you can start coding in seconds", "modern": "In modern web development, you need to constantly keep up with the latest news, and even better - to try out new products in real-world", "moreOpportunity": "Even more opportunities in the future", diff --git a/frontend/src/locales/ru.json b/frontend/src/locales/ru.json index 66bf2330..c39817da 100644 --- a/frontend/src/locales/ru.json +++ b/frontend/src/locales/ru.json @@ -170,9 +170,10 @@ }, "freeProject": "Бесплатный проект Хекслета", "header": { - "about": "О нас", - "advantages": "О проекте", - "opportunities": "Возможности" + "about": "О проекте", + "advantages": "Преимущества", + "opportunities": "Возможности", + "faq": "FAQ" }, "inBrowser": "Редактор полностью запускается в браузере, поэтому вы можете начать кодить за считанные секунды", diff --git a/frontend/src/landing/Faq.jsx b/frontend/src/pages/landing/Faq.jsx similarity index 100% rename from frontend/src/landing/Faq.jsx rename to frontend/src/pages/landing/Faq.jsx diff --git a/frontend/src/landing/Footer.jsx b/frontend/src/pages/landing/Footer.jsx similarity index 94% rename from frontend/src/landing/Footer.jsx rename to frontend/src/pages/landing/Footer.jsx index e0824142..9fa4826f 100644 --- a/frontend/src/landing/Footer.jsx +++ b/frontend/src/pages/landing/Footer.jsx @@ -1,13 +1,4 @@ -import { - Row, - Col, - Container, - Image, - Form, - FloatingLabel, - NavbarBrand, - Nav, -} from 'react-bootstrap'; +import { Row, Col, Container, Image, NavbarBrand, Nav } from 'react-bootstrap'; import './custom-colors.scss'; import './landing.scss'; import { useTranslation } from 'react-i18next'; @@ -263,12 +254,12 @@ function Footer() { @@ -325,21 +316,6 @@ function Footer() { - - - - - - -

{t('footer.name')}

diff --git a/frontend/src/pages/landing/Header.jsx b/frontend/src/pages/landing/Header.jsx new file mode 100644 index 00000000..d375ce09 --- /dev/null +++ b/frontend/src/pages/landing/Header.jsx @@ -0,0 +1,89 @@ +import { Link } from 'react-router-dom'; +import { Container, Navbar, Image, Nav, Button } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; +import { useTernaryDarkMode } from 'usehooks-ts'; +import LanguageSelector from '../../components/Navigation/LanguageSelector.jsx'; +import ThemeSelector from '../../components/Navigation/ThemeSelector.jsx'; +import routes from '../../routes.js'; + +import RunItLogoLight from './assets/LogoHeaderLightTheme.svg'; +import RunItLogoDark from './assets/LogoHeaderDarkTheme.svg'; +import Burger from './assets/Burger.svg'; + +import 'bootstrap/dist/css/bootstrap.min.css'; +import './landing.scss'; +import './custom-colors.scss'; + +function Header() { + const { t } = useTranslation(); + const { isDarkMode } = useTernaryDarkMode(); + + const logo = isDarkMode ? RunItLogoDark : RunItLogoLight; + return ( +
+ + + + + + + + + + + + + + +
+ ); +} + +export default Header; diff --git a/frontend/src/landing/Landing.jsx b/frontend/src/pages/landing/Landing.jsx similarity index 92% rename from frontend/src/landing/Landing.jsx rename to frontend/src/pages/landing/Landing.jsx index 575b30fd..11c98cb3 100644 --- a/frontend/src/landing/Landing.jsx +++ b/frontend/src/pages/landing/Landing.jsx @@ -1,8 +1,14 @@ import { Link } from 'react-router-dom'; -import { Button, Col, Container, Image, Row } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; import { useEffect, useRef } from 'react'; -import routes from '../routes.js'; +import { useDispatch } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; + +import { Button, Col, Container, Image, Row } from 'react-bootstrap'; + +import { useAuth } from '../../hooks'; +import routes from '../../routes.js'; +import { actions } from '../../slices/modalSlice'; import Faq from './Faq.jsx'; import Header from './Header.jsx'; import Footer from './Footer.jsx'; @@ -23,9 +29,20 @@ import Template from './assets/Icons=Template.svg'; import ImageUnderCarousel from './assets/ReadyAssets.jpeg'; function NewLanding() { + const { isLoggedIn } = useAuth(); + const navigate = useNavigate(); + const dispatch = useDispatch(); const { t } = useTranslation(); const advantagesRef = useRef(); + const handleCodeWithoutRegButton = () => { + if (isLoggedIn) { + navigate(routes.myProfilePagePath()); + return; + } + dispatch(actions.openModal({ type: 'newSnippet' })); + }; + const horizontalScroll = () => { const el = advantagesRef.current; if (el) { @@ -81,17 +98,26 @@ function NewLanding() {
- - + + + + +
@@ -467,17 +493,19 @@ function NewLanding() { - - + +

{t('landing.nowCoding')}

{t('landing.nowCoding')}

- +
+ + + + + + + diff --git a/frontend/src/landing/assets/BGElement.svg b/frontend/src/pages/landing/assets/BGElement.svg similarity index 100% rename from frontend/src/landing/assets/BGElement.svg rename to frontend/src/pages/landing/assets/BGElement.svg diff --git a/frontend/src/landing/assets/Burger.svg b/frontend/src/pages/landing/assets/Burger.svg similarity index 100% rename from frontend/src/landing/assets/Burger.svg rename to frontend/src/pages/landing/assets/Burger.svg diff --git a/frontend/src/landing/assets/DisplayWithCode1.jpeg b/frontend/src/pages/landing/assets/DisplayWithCode1.jpeg similarity index 100% rename from frontend/src/landing/assets/DisplayWithCode1.jpeg rename to frontend/src/pages/landing/assets/DisplayWithCode1.jpeg diff --git a/frontend/src/landing/assets/DisplayWithCode2.jpeg b/frontend/src/pages/landing/assets/DisplayWithCode2.jpeg similarity index 100% rename from frontend/src/landing/assets/DisplayWithCode2.jpeg rename to frontend/src/pages/landing/assets/DisplayWithCode2.jpeg diff --git a/frontend/src/landing/assets/DisplayWithCode3.jpeg b/frontend/src/pages/landing/assets/DisplayWithCode3.jpeg similarity index 100% rename from frontend/src/landing/assets/DisplayWithCode3.jpeg rename to frontend/src/pages/landing/assets/DisplayWithCode3.jpeg diff --git a/frontend/src/landing/assets/DisplayWithCode4.jpeg b/frontend/src/pages/landing/assets/DisplayWithCode4.jpeg similarity index 100% rename from frontend/src/landing/assets/DisplayWithCode4.jpeg rename to frontend/src/pages/landing/assets/DisplayWithCode4.jpeg diff --git a/frontend/src/landing/assets/DisplayWithCode5.jpeg b/frontend/src/pages/landing/assets/DisplayWithCode5.jpeg similarity index 100% rename from frontend/src/landing/assets/DisplayWithCode5.jpeg rename to frontend/src/pages/landing/assets/DisplayWithCode5.jpeg diff --git a/frontend/src/landing/assets/Icons=Code.svg b/frontend/src/pages/landing/assets/Icons=Code.svg similarity index 100% rename from frontend/src/landing/assets/Icons=Code.svg rename to frontend/src/pages/landing/assets/Icons=Code.svg diff --git a/frontend/src/landing/assets/Icons=Devices.svg b/frontend/src/pages/landing/assets/Icons=Devices.svg similarity index 100% rename from frontend/src/landing/assets/Icons=Devices.svg rename to frontend/src/pages/landing/assets/Icons=Devices.svg diff --git a/frontend/src/landing/assets/Icons=Languages.svg b/frontend/src/pages/landing/assets/Icons=Languages.svg similarity index 100% rename from frontend/src/landing/assets/Icons=Languages.svg rename to frontend/src/pages/landing/assets/Icons=Languages.svg diff --git a/frontend/src/landing/assets/Icons=Share.svg b/frontend/src/pages/landing/assets/Icons=Share.svg similarity index 100% rename from frontend/src/landing/assets/Icons=Share.svg rename to frontend/src/pages/landing/assets/Icons=Share.svg diff --git a/frontend/src/landing/assets/Icons=TeamWork.svg b/frontend/src/pages/landing/assets/Icons=TeamWork.svg similarity index 100% rename from frontend/src/landing/assets/Icons=TeamWork.svg rename to frontend/src/pages/landing/assets/Icons=TeamWork.svg diff --git a/frontend/src/landing/assets/Icons=Template.svg b/frontend/src/pages/landing/assets/Icons=Template.svg similarity index 100% rename from frontend/src/landing/assets/Icons=Template.svg rename to frontend/src/pages/landing/assets/Icons=Template.svg diff --git a/frontend/src/landing/assets/LogoFooterDark.svg b/frontend/src/pages/landing/assets/LogoFooterDark.svg similarity index 100% rename from frontend/src/landing/assets/LogoFooterDark.svg rename to frontend/src/pages/landing/assets/LogoFooterDark.svg diff --git a/frontend/src/landing/assets/LogoFooterLight.svg b/frontend/src/pages/landing/assets/LogoFooterLight.svg similarity index 100% rename from frontend/src/landing/assets/LogoFooterLight.svg rename to frontend/src/pages/landing/assets/LogoFooterLight.svg diff --git a/frontend/src/landing/assets/LogoHeaderDarkTheme.svg b/frontend/src/pages/landing/assets/LogoHeaderDarkTheme.svg similarity index 98% rename from frontend/src/landing/assets/LogoHeaderDarkTheme.svg rename to frontend/src/pages/landing/assets/LogoHeaderDarkTheme.svg index 11b9c2d1..61a7853d 100644 --- a/frontend/src/landing/assets/LogoHeaderDarkTheme.svg +++ b/frontend/src/pages/landing/assets/LogoHeaderDarkTheme.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/landing/assets/LogoHeaderLightTheme.svg b/frontend/src/pages/landing/assets/LogoHeaderLightTheme.svg similarity index 98% rename from frontend/src/landing/assets/LogoHeaderLightTheme.svg rename to frontend/src/pages/landing/assets/LogoHeaderLightTheme.svg index ef082d60..d8f210ee 100644 --- a/frontend/src/landing/assets/LogoHeaderLightTheme.svg +++ b/frontend/src/pages/landing/assets/LogoHeaderLightTheme.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/landing/assets/ReadyAssets.jpeg b/frontend/src/pages/landing/assets/ReadyAssets.jpeg similarity index 100% rename from frontend/src/landing/assets/ReadyAssets.jpeg rename to frontend/src/pages/landing/assets/ReadyAssets.jpeg diff --git a/frontend/src/landing/assets/SmallBGElement.svg b/frontend/src/pages/landing/assets/SmallBGElement.svg similarity index 100% rename from frontend/src/landing/assets/SmallBGElement.svg rename to frontend/src/pages/landing/assets/SmallBGElement.svg diff --git a/frontend/src/landing/assets/Telegram_dark_theme.svg b/frontend/src/pages/landing/assets/Telegram_dark_theme.svg similarity index 100% rename from frontend/src/landing/assets/Telegram_dark_theme.svg rename to frontend/src/pages/landing/assets/Telegram_dark_theme.svg diff --git a/frontend/src/landing/assets/Telegram_dark_theme_mobile.svg b/frontend/src/pages/landing/assets/Telegram_dark_theme_mobile.svg similarity index 100% rename from frontend/src/landing/assets/Telegram_dark_theme_mobile.svg rename to frontend/src/pages/landing/assets/Telegram_dark_theme_mobile.svg diff --git a/frontend/src/landing/assets/Telegram_light_theme.svg b/frontend/src/pages/landing/assets/Telegram_light_theme.svg similarity index 100% rename from frontend/src/landing/assets/Telegram_light_theme.svg rename to frontend/src/pages/landing/assets/Telegram_light_theme.svg diff --git a/frontend/src/landing/assets/Telegram_light_theme_mobile.svg b/frontend/src/pages/landing/assets/Telegram_light_theme_mobile.svg similarity index 100% rename from frontend/src/landing/assets/Telegram_light_theme_mobile.svg rename to frontend/src/pages/landing/assets/Telegram_light_theme_mobile.svg diff --git a/frontend/src/landing/assets/Twitter_dark_theme.svg b/frontend/src/pages/landing/assets/Twitter_dark_theme.svg similarity index 100% rename from frontend/src/landing/assets/Twitter_dark_theme.svg rename to frontend/src/pages/landing/assets/Twitter_dark_theme.svg diff --git a/frontend/src/landing/assets/Twitter_dark_theme_mobile.svg b/frontend/src/pages/landing/assets/Twitter_dark_theme_mobile.svg similarity index 100% rename from frontend/src/landing/assets/Twitter_dark_theme_mobile.svg rename to frontend/src/pages/landing/assets/Twitter_dark_theme_mobile.svg diff --git a/frontend/src/landing/assets/Twitter_light_theme.svg b/frontend/src/pages/landing/assets/Twitter_light_theme.svg similarity index 100% rename from frontend/src/landing/assets/Twitter_light_theme.svg rename to frontend/src/pages/landing/assets/Twitter_light_theme.svg diff --git a/frontend/src/landing/assets/Twitter_light_theme_mobile.svg b/frontend/src/pages/landing/assets/Twitter_light_theme_mobile.svg similarity index 100% rename from frontend/src/landing/assets/Twitter_light_theme_mobile.svg rename to frontend/src/pages/landing/assets/Twitter_light_theme_mobile.svg diff --git a/frontend/src/landing/assets/VK_dark_theme.svg b/frontend/src/pages/landing/assets/VK_dark_theme.svg similarity index 100% rename from frontend/src/landing/assets/VK_dark_theme.svg rename to frontend/src/pages/landing/assets/VK_dark_theme.svg diff --git a/frontend/src/landing/assets/VK_dark_theme_mobile.svg b/frontend/src/pages/landing/assets/VK_dark_theme_mobile.svg similarity index 100% rename from frontend/src/landing/assets/VK_dark_theme_mobile.svg rename to frontend/src/pages/landing/assets/VK_dark_theme_mobile.svg diff --git a/frontend/src/landing/assets/VK_light_theme.svg b/frontend/src/pages/landing/assets/VK_light_theme.svg similarity index 100% rename from frontend/src/landing/assets/VK_light_theme.svg rename to frontend/src/pages/landing/assets/VK_light_theme.svg diff --git a/frontend/src/landing/assets/VK_light_theme_mobile.svg b/frontend/src/pages/landing/assets/VK_light_theme_mobile.svg similarity index 100% rename from frontend/src/landing/assets/VK_light_theme_mobile.svg rename to frontend/src/pages/landing/assets/VK_light_theme_mobile.svg diff --git a/frontend/src/landing/assets/YouTube_dark_theme.svg b/frontend/src/pages/landing/assets/YouTube_dark_theme.svg similarity index 100% rename from frontend/src/landing/assets/YouTube_dark_theme.svg rename to frontend/src/pages/landing/assets/YouTube_dark_theme.svg diff --git a/frontend/src/landing/assets/YouTube_dark_theme_mobile.svg b/frontend/src/pages/landing/assets/YouTube_dark_theme_mobile.svg similarity index 100% rename from frontend/src/landing/assets/YouTube_dark_theme_mobile.svg rename to frontend/src/pages/landing/assets/YouTube_dark_theme_mobile.svg diff --git a/frontend/src/landing/assets/YouTube_light_theme.svg b/frontend/src/pages/landing/assets/YouTube_light_theme.svg similarity index 100% rename from frontend/src/landing/assets/YouTube_light_theme.svg rename to frontend/src/pages/landing/assets/YouTube_light_theme.svg diff --git a/frontend/src/landing/assets/YouTube_light_theme_mobile.svg b/frontend/src/pages/landing/assets/YouTube_light_theme_mobile.svg similarity index 100% rename from frontend/src/landing/assets/YouTube_light_theme_mobile.svg rename to frontend/src/pages/landing/assets/YouTube_light_theme_mobile.svg diff --git a/frontend/src/landing/assets/fonts/NunitoSans_10pt-Bold.ttf b/frontend/src/pages/landing/assets/fonts/NunitoSans_10pt-Bold.ttf similarity index 100% rename from frontend/src/landing/assets/fonts/NunitoSans_10pt-Bold.ttf rename to frontend/src/pages/landing/assets/fonts/NunitoSans_10pt-Bold.ttf diff --git a/frontend/src/landing/assets/fonts/NunitoSans_10pt-Light.ttf b/frontend/src/pages/landing/assets/fonts/NunitoSans_10pt-Light.ttf similarity index 100% rename from frontend/src/landing/assets/fonts/NunitoSans_10pt-Light.ttf rename to frontend/src/pages/landing/assets/fonts/NunitoSans_10pt-Light.ttf diff --git a/frontend/src/landing/assets/fonts/NunitoSans_10pt-SemiBold.ttf b/frontend/src/pages/landing/assets/fonts/NunitoSans_10pt-SemiBold.ttf similarity index 100% rename from frontend/src/landing/assets/fonts/NunitoSans_10pt-SemiBold.ttf rename to frontend/src/pages/landing/assets/fonts/NunitoSans_10pt-SemiBold.ttf diff --git a/frontend/src/landing/custom-colors.scss b/frontend/src/pages/landing/custom-colors.scss similarity index 63% rename from frontend/src/landing/custom-colors.scss rename to frontend/src/pages/landing/custom-colors.scss index dc4c2532..b61737c7 100644 --- a/frontend/src/landing/custom-colors.scss +++ b/frontend/src/pages/landing/custom-colors.scss @@ -16,12 +16,16 @@ font-weight: 600; } } - .button-start:hover, - .button-start:focus { - background-color: #EBF1F9 !important; - color: #136EF6 !important; - border-color: #EBF1F9 !important; - font-weight: 500 !important; + .btn-start-no-reg { + --bs-btn-bg: #050914; + --bs-btn-color: #ebf1f9; + --bs-btn-border-color: #136ef6; + --hover-background: #136ef6; + --hover-border: #136ef6; + --hover-color: #ebf1f9; + --bs-btn-hover-color: #ebf1f9; + --bs-btn-hover-bg: #136ef6; + --bs-btn-hover-border-color: #136ef6; } .footer { background-color: #136EF6; @@ -46,12 +50,16 @@ font-weight: 600; } } - .button-start:hover, - .button-start:focus { - background-color: #050914 !important; - color: #EBF1F9 !important; - border-color: #050914 !important; - font-weight: 500 !important; + .btn-start-no-reg { + --bs-btn-bg: #ebf1f9; + --bs-btn-color: #136ef6; + --bs-btn-border-color: #136ef6; + --hover-background: #136ef6; + --hover-border: #136ef6; + --hover-color: #ebf1f9; + --bs-btn-hover-color: #ebf1f9; + --bs-btn-hover-bg: #136ef6; + --bs-btn-hover-border-color: #136ef6; } .footer { background-color: #050914; diff --git a/frontend/src/landing/landing.scss b/frontend/src/pages/landing/landing.scss similarity index 95% rename from frontend/src/landing/landing.scss rename to frontend/src/pages/landing/landing.scss index 64cdcba7..e1f947f4 100644 --- a/frontend/src/landing/landing.scss +++ b/frontend/src/pages/landing/landing.scss @@ -31,6 +31,16 @@ font-weight: 600; } } + .btn-start { + width: 20.625rem; + &:hover, + :focus { + font-weight: 600; + } + } + .btn-start-no-reg { + width: 20.625rem; + } } .first-bg-image { font-family: 'Nunito Sans Light'; diff --git a/frontend/src/pages/landing/checked.svg b/frontend/src/pages/old-landing/checked.svg similarity index 100% rename from frontend/src/pages/landing/checked.svg rename to frontend/src/pages/old-landing/checked.svg diff --git a/frontend/src/pages/landing/index.jsx b/frontend/src/pages/old-landing/index.jsx similarity index 100% rename from frontend/src/pages/landing/index.jsx rename to frontend/src/pages/old-landing/index.jsx diff --git a/frontend/src/pages/landing/index.module.css b/frontend/src/pages/old-landing/index.module.css similarity index 100% rename from frontend/src/pages/landing/index.module.css rename to frontend/src/pages/old-landing/index.module.css diff --git a/frontend/src/routes.js b/frontend/src/routes.js index 782e0e63..4981eb86 100644 --- a/frontend/src/routes.js +++ b/frontend/src/routes.js @@ -48,7 +48,7 @@ export default { // OAuth oAuthPath: () => [apiPath, 'oauth'].join('/'), - newLandingPath: () => '/landing', + oldLandingPath: () => '/oldLanding', homePagePath: () => '/editor', aboutPagePath: () => '/about', profilePagePath: (username = ':username') => `/u/${username}`,