Coding info page & other

Coding info page, login menu & other fixes

reactapp/src/HomeStyle.scss

@@ -2,7 +2,7 @@ $background-color: #252422;
 $main-color: #CCC5B9;
 $accent-color: #EB5E28;
 
-.home-section {
+.home-page {
     width: 96%;
     min-height: 100%;
     display: flex;

reactapp/src/InfoPageStyle.scss

@@ -0,0 +1,74 @@
+$background-color: #252422;
+$main-color: #CCC5B9;
+$accent-color: #EB5E28;
+
+.info-page {
+    width: 96%;
+    min-height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .info-page__dev-card {
+        width: 300px;
+        height: 400px;
+        perspective: 1000px;
+        border-radius: 15px;
+    
+        .dev-card__inner {
+            position: relative;
+            border-radius: 15px;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+            box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
+    
+            .dev-card__front, .dev-card__back {
+                position: absolute;
+                border-radius: 15px;
+                width: 100%;
+                height: 100%;
+                backface-visibility: hidden;
+            }
+    
+            .dev-card__front {
+                .dev-card__avatar {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 15px;
+                }
+            }
+            
+            .dev-card__back {
+                background-color: $background-color;
+                color: white;
+                box-sizing: border-box;
+                padding: 20px;
+                transform: rotateY(180deg);
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                .dev-card__name {
+                    font-size: 24px;
+                }
+
+                .dev-card__info {
+                    color: $main-color;
+                }
+
+                .dev-card__url {
+                    font-size: 18px;
+                    color: white;
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+      
+    .info-page__dev-card:hover .dev-card__inner {
+        transform: rotateY(180deg);
+    }
+}

reactapp/src/components/DevCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface DeveloperCardProps {
+  avatar: string;
+  name: string;
+  info: string;
+  url: string;
+}
+
+export default function DevCard({ avatar, name, info, url }: DeveloperCardProps) {
+  return (
+    <div className="info-page__dev-card">
+      <div className="dev-card__inner">
+        <div className="dev-card__front">
+          <img src={avatar} alt={name} className="dev-card__avatar" />
+        </div>
+        <div className="dev-card__back">
+          <div>
+            <h3 className='dev-card__name'>{name}</h3>
+            <p className='dev-card__info'>{info}</p>
+          </div>
+          <a className='dev-card__url' href={url} target='_blank' rel="noreferrer">GitHub</a>
+        </div>
+      </div>
+    </div>
+  );
+}

reactapp/src/components/Header.tsx

@@ -138,7 +138,7 @@ export default function Header({ togglePopupMap, onSelectCategory, onSearchChang
                     {/* Код для svg */}
                 </motion.button>
                 <motion.a 
-                    href="/" 
+                    href="info" 
                     className="header__info-a"
                     whileTap={{scale: 0.9}}
                     transition={{duration: 0.2, type: "spring"}}

reactapp/src/components/LoginMenu.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { motion } from "framer-motion";
 
 interface LoginMenuProps {
@@ -6,6 +6,12 @@ interface LoginMenuProps {
 }
 
 export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Element {
+    const [isLoginMode, setIsLoginMode] = useState(true);
+
+    const toggleMode = () => {
+        setIsLoginMode(!isLoginMode);
+    }
+    
     return(
         <>
             <div className="background-blackout" onClick={toggleLoginMenu}></div>
@@ -16,7 +22,7 @@ export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Elem
                             SusMarket <span>ID</span>
                         </h5>
                         <p className="top-container__text">
-                            Войдите с SusMarket ID
+                            {isLoginMode ? 'Войдите с SusMarket ID' : 'Зарегистрируйтесь с SusMarket ID'}
                         </p>
                     </div>
                 </div>
@@ -25,15 +31,16 @@ export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Elem
                     <input type="password" name="userPassword" id="userPassword"  className="popup-login__password-input" placeholder="Пароль"/>
                 </div>
                 <div className="popup-login__bottom-container">
-                    <p className="popup-menu__prompt-url">
+                    <p className="popup-login__prompt-url" onClick={toggleMode}>
-                        У вас нет аккаунта? <u>Зарегестрироваться</u>
+                        {isLoginMode ? 'У вас нет аккаунта? ' : 'У вас есть аккаунт? '}
+                        <u>{isLoginMode ? 'Зарегистрироваться' : 'Войти'}</u>
                     </p>
                     <motion.button 
                         className="popup-login__login-button"
                         whileTap={{scale: 0.98}}
                         transition={{duration: 0.2, type: "spring"}}
                     >
-                        Войти
+                        {isLoginMode ? 'Войти' : 'Зарегистрироваться'}
                     </motion.button>
                 </div>
             </form>

reactapp/src/index.scss

@@ -515,13 +515,17 @@ body {
         flex-direction: column;
         gap: 20px;
 
-        .popup-menu__prompt-url {
+        .popup-login__prompt-url {
             color: $main-color;
             font-size: 16px;
             font-weight: 600;
             line-height: 20px;
             letter-spacing: 0px;
             text-align: left;
+
+            u {
+                cursor: pointer;
+            }
         }
 
         .popup-login__login-button {

reactapp/src/pages/HomePage.tsx

@@ -11,7 +11,7 @@ interface HomePageProps {
 
 export default function HomePage({ products, selectedCategory }: HomePageProps) {
     return(
-        <section className="home-section">
+        <section className="home-page">
             <Banner />
             <div className="products-div">
                 {products.map(product => (

reactapp/src/pages/InfoPage.tsx

@@ -1,7 +1,24 @@
 import React from "react";
+import DevCard from "../components/DevCard";
+import "../InfoPageStyle.scss";
+import RailTHAvatar from "../assets/img/info-page__railth-avatar.png"
+import NoKesspenAvatar from "../assets/img/info-page__no-kesspen-avatar.png"
+
 export default function InfoPage() {
     return(
-        <>
+        <section className="info-page">
-        </>
+            <DevCard 
+                avatar={NoKesspenAvatar}
+                name="No_Kesspen"
+                info="Backend разработчик"
+                url="https://github.com/KessPenGames"
+            />
+            <DevCard 
+                avatar={RailTHAvatar}
+                name="Rail_TH"
+                info="Frontend разработчик"
+                url="https://github.com/Rail-TH"
+            />
+        </section>
     )
 }