Closed #434

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() {
     <Suspense fallback={<DefaultLoader />}>
       <ScrollToTop />
       <Routes>
-        <Route path={routes.newLandingPath()} element={<NewLanding />} />
+        <Route index element={<Landing />} />
         <Route element={<Layout />}>
-          <Route index element={<Landing />} />
+          <Route path={routes.oldLandingPath()} element={<OldLanding />} />
           <Route path={routes.homePagePath()} element={<SnippetPage />} />
           <Route path={routes.snippetPagePath()} element={<SnippetPage />} />
           <Route path={routes.aboutPagePath()} element={<AboutPage />} />

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",

frontend/src/locales/ru.json

@@ -170,9 +170,10 @@
     },
     "freeProject": "Бесплатный проект Хекслета",
     "header": {
-      "about": "О нас",
-      "advantages": "О проекте",
-      "opportunities": "Возможности"
+      "about": "О проекте",
+      "advantages": "Преимущества",
+      "opportunities": "Возможности",
+      "faq": "FAQ"
     },
 
     "inBrowser": "Редактор полностью запускается в браузере, поэтому вы можете начать кодить за считанные секунды",

frontend/src/landing/Footer.jsx → 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() {
                 <Nav as="ul" className="list-group">
                   <li className="mb-2">
                     <NavbarBrand className="p-0" href="#aboutProject">
-                      {t('landing.header.advantages')}
+                      {t('landing.header.about')}
                     </NavbarBrand>
                   </li>
                   <li className="mb-2">
                     <NavbarBrand className="p-0" href="#advantages">
-                      Преимущества
+                      {t('landing.header.advantages')}
                     </NavbarBrand>
                   </li>
                   <li className="mb-2">
@@ -278,7 +269,7 @@ function Footer() {
                   </li>
                   <li className="mb-2">
                     <NavbarBrand className="p-0" href="#faq">
-                      {t('faq.faq')}
+                      {t('landing.header.faq')}
                     </NavbarBrand>
                   </li>
                 </Nav>
@@ -325,21 +316,6 @@ function Footer() {
               </Col>
             </Row>
           </Col>
-          <Col>
-            <Form.Group data-bs-theme="light">
-              <FloatingLabel
-                className="text-black"
-                controlId="floatingTextarea"
-                label={t('footer.mailSupport')}
-              >
-                <Form.Control
-                  as="textarea"
-                  placeholder={t('footer.mailSupport')}
-                  style={{ height: '8rem' }}
-                />
-              </FloatingLabel>
-            </Form.Group>
-          </Col>
           <Col>
             <div className="ms-auto">
               <p>{t('footer.name')}</p>

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 { ternaryDarkMode } = useTernaryDarkMode();
+
+  const logo = ternaryDarkMode === 'light' ? RunItLogoLight : RunItLogoDark;
+  return (
+    <header>
+      <Navbar expand="lg">
+        <Container className="justify-content-between">
+          <Navbar.Brand className="mr-5">
+            <Image src={logo} />
+          </Navbar.Brand>
+          <Navbar.Toggle
+            aria-controls="navbar-responsive"
+            className="border-0 ms-auto"
+            data-bs-toogle="collapse"
+          >
+            <Image src={Burger} />
+          </Navbar.Toggle>
+          <Navbar.Collapse className="my-3 mb-lg-0" id="navbar-responsive">
+            <Nav as="ul" className="text-center">
+              <li>
+                <Navbar.Brand className="header-link" href="#aboutProject">
+                  <span>{t('landing.header.about')}</span>
+                </Navbar.Brand>
+              </li>
+              <li>
+                <Navbar.Brand className="header-link" href="#advantages">
+                  <span>{t('landing.header.advantages')}</span>
+                </Navbar.Brand>
+              </li>
+              <li>
+                <Navbar.Brand className="header-link" href="#possibilities">
+                  <span>{t('landing.header.opportunities')}</span>
+                </Navbar.Brand>
+              </li>
+              <li>
+                <Navbar.Brand className="header-link" href="#faq">
+                  <span>{t('landing.header.faq')}</span>
+                </Navbar.Brand>
+              </li>
+            </Nav>
+            <Nav
+              as="ul"
+              className="mb-3 mb-lg-0 gap-1 ms-auto align-items-center"
+            >
+              <LanguageSelector />
+              <ThemeSelector />
+              <Button
+                as={Link}
+                className="rounded-5 btn-signin"
+                to={routes.signInPagePath()}
+                variant="primary"
+              >
+                <span>{t('profileActions.signIn')}</span>
+              </Button>
+              <Button
+                as={Link}
+                className="rounded-5 btn-signup"
+                to={routes.signUpPagePath()}
+                variant="secondary"
+              >
+                <span>{t('profileActions.signUp')}</span>
+              </Button>
+            </Nav>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
+    </header>
+  );
+}
+
+export default Header;