dynamic page

src/app/page.tsx

@@ -4,31 +4,59 @@ import { Header } from '@/widgets/Header';
 import { Background } from '@/widgets/Background';
 import s from './styles.module.scss';
 import LogoAplo from '@/public/media/logoaplo.svg';
+import { FC, useEffect, useState } from 'react';
+
+interface AboutProps { };
+const About: FC<AboutProps> = props => {
+  return (<Background>
+    <div className={s.about_container}>
+      <div className={s.about_logo_container}>
+        <Image
+          src={LogoAplo}
+          alt={''}
+          // width={300}
+          // height={300}
+          className={s.about_logo}
+        ></Image>
+      </div>
+      <div className={s.about_panel}>
+        <div className={s.about_header}>
+          APLO - Art Of Simplicity
+        </div>
+        <div className={s.about_text}>
+          A decentralized cryptocurrency, aimed at enabling mining on slow devices and bringing innovation into PoW world.
+        </div>
+        <div className={s.about_buttons}>
+          <a
+            className={s.button}
+            target="_blank"
+            rel="noopener noreferrer"
+            href="/about"
+          >
+            About
+          </a>
+          <a
+            className={s.button}
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/AploCoin"
+          >
+            Github
+          </a>
+        </div>
+      </div>
+    </div>
+  </Background>)
+};
+
 
 export default function Home() {
   return (
     <main>
       <div className={s.main_container}>
         <Header />
         <div className={s.main_area}>
-          <Background>
-            <div className={s.about_container}>
-              <Image
-                src={LogoAplo}
-                alt={''}
-                width={300}
-                height={300}
-              ></Image>
-              <div className={s.about_panel}>
-                <div className={s.about_header}>
-                  APLO - Art Of Simplicity
-                </div>
-                <div className={s.about_text}>
-                  A decentralized cryptocurrency, aimed at enabling mining on slow devices and bringing innovation into PoW world.
-                </div>
-              </div>
-            </div>
-          </Background>
+          <About />
         </div>
       </div>
     </main>

src/app/styles.module.scss

@@ -8,20 +8,20 @@
 }
 
 .main_area{
-    width: 60%;
+    width: 65%;
     display: flex;
     justify-content: center;
     flex-direction: column;
-    min-width: 434px;
+    min-width: 200px;
 }
 
 .about_container{
     display: flex;
     flex-direction: row;
     row-gap: 20px;
-    //column-gap: calc(40px + 18vw);
     flex-wrap: wrap-reverse;
     justify-content: space-between;
+    align-items: center;
 }
 
 .about_panel{
@@ -31,23 +31,87 @@
     align-items: center;
 }
 
-@media screen and (max-width: 1258px){
+.about_logo_container{
+    display: flex;
+}
+
+.about_logo{
+    transition: 1s;
+    width: calc(100px + 10vw);
+    height: calc(100px + 10vw);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.about_logo:hover{
+    transform: rotate(720deg);
+}
+
+.about_buttons{
+    display: flex;
+    flex-direction: row;
+    column-gap: 20px;
+    flex-wrap: wrap;
+    width: 100%;
+    justify-content: space-between;
+    row-gap: 14px;
+}
+
+.button{
+    width: 200px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #BE6E46;
+    font-family: var(--Targa);
+    font-size: calc(16px + 1vw);
+    font-weight: 700;
+    border-radius: 5px;
+    color: #022333;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none;
+}
+
+.button:hover{
+    cursor: pointer;
+}
+
+@media screen and (max-width: 1059px){
     .about_panel{
         width: 100%;
         justify-content: center;
     }
+    .about_logo_container{
+        width: 100%;
+        justify-content: center;
+    }
+    .about_buttons{
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+@media screen and (max-width: 953px){
+    .main_area{
+        width: 90%;
+    }
 }
 
 .about_header{
     max-width: 393px;
     font-family: var(--font-front-page-neue);
-    font-size: 50px;
-    color:rgb(18, 96, 133);
+    font-size: calc(16px + 4vw);
+    //color:rgb(18, 96, 133);
+    color:#BE6E46;
 }
 
 .about_text{
     max-width: 393px;
     font-family: var(--Targa);
-    font-size: 30px;
+    font-size: calc(16px + 1vw);
     text-wrap: wrap;
+    color: #022333;
 }

src/public/translations/english.tsx

@@ -0,0 +1,15 @@
+export const translation = {
+    header: {
+        donation: "Donate"
+    },
+    main_page: {
+        about: {
+            header: "APLO - Art Of Simplicity",
+            text: "A decentralized cryptocurrency, aimed at enabling mining on slow devices and bringing innovation into PoW world.",
+            buttons: {
+                about: "About"
+            }
+        }
+
+    }
+}

src/public/translations/russian.tsx

@@ -0,0 +1,15 @@
+export const translation = {
+    header: {
+        donation: "Задонатить"
+    },
+    main_page: {
+        about: {
+            header: "APLO - Искусство Простоты",
+            text: "Децентрализованная криптовалюта, целью которой является революция в мире PoW и майнинг на всем.",
+            buttons: {
+                about: "О проекте"
+            }
+        }
+
+    }
+}

src/public/translations/translations.tsx

@@ -0,0 +1,7 @@
+import { translation as EnglishTranslation } from "./english";
+import { translation as RussianTranslation } from "./russian";
+
+export const tranlsations = {
+    english: EnglishTranslation,
+    russian: RussianTranslation
+}

src/widgets/Header/styles.module.scss

@@ -16,6 +16,12 @@
     box-sizing: border-box;
 }
 
+@media screen and (max-width: 953px){
+    .big_header{
+        display: none;
+    }
+}
+
 .logo{
     display: flex;
     flex-direction: row;