add new styles for landing

mikeiken · Dec 1, 2024 · 5aedbab · 5aedbab
1 parent 8f991a0
commit 5aedbab
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 7 deletions.
diff --git a/frontend/src/components/main-page/Garden/garden.css b/frontend/src/components/main-page/Garden/garden.css
@@ -20,8 +20,6 @@
 
 .container-plot-wrapper.visible {
   opacity: 1;
-  /* Полная видимость */
-  /* height: auto; Если хотите анимировать высоту, убедитесь, что элемент имеет фиксированную высоту в начале */
 }
 
 .container-plot-info {

diff --git a/frontend/src/components/main-page/LandingPage/LandingPage.jsx b/frontend/src/components/main-page/LandingPage/LandingPage.jsx
@@ -1,16 +1,23 @@
 // import { useState } from "react";
 import "./main.css";
 import Garden from "../Garden/Garden";
-// import LoginBtn from "../ui/login-btn/LoginBtn";
-// import RegisterBtn from "../ui/register-btn/RegisterBtn";
+import LoginBtn from "../ui/login-btn/LoginBtn";
+import RegisterBtn from "../ui/register-btn/RegisterBtn";
 
 export default function LandingPage() {
 
     return (
         <>
+            <header className="page-header">
+                <div>TAMPROG</div>
+                <div className={"buttons-wrapper"}>
+                    <LoginBtn />
+                    <RegisterBtn />
+                </div>
+            </header>
             <div className={"landing-main-wrapper"}>
                 <div className={"section1"}>
-                    <div className={"parallax-text"}>TAMPROG</div>
+                    <div className={"parallax-text"}>BSTUteam</div>
                 </div>
                 <div className={"section2"}>
                     <div className={"parallax-text"}>NORMAL</div>

diff --git a/frontend/src/components/main-page/LandingPage/main.css b/frontend/src/components/main-page/LandingPage/main.css
@@ -14,11 +14,13 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    background: url("../../../../public/field1.jpg") top center no-repeat;
     background-size: cover;
+    background: url("../../../../public/field1.jpg") top center no-repeat;
+
     transform: translateZ(-1px) scale(2.2);
     filter: blur(1px);
 }
+
 .section2{
     background: #1b6d85;
 }
@@ -35,4 +37,34 @@
     transform-style: preserve-3d;
     height: 100vh;
     overflow-x: hidden;
+}
+
+.page-header{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 10vh;
+    background-color: rgba(15, 15, 15, 0.3);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.buttons-wrapper{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    gap: 20px;
+}
+
+.landing-login-btn{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 3px;
 }
diff --git a/frontend/src/components/main-page/style.css b/frontend/src/components/main-page/style.css
@@ -12,6 +12,7 @@ html {
 
 .user-interface-login {
   width: 30px;
+  height: 30px;
 }
 
 @keyframes fade-in {

diff --git a/frontend/src/components/main-page/ui/login-btn/LoginBtn.js b/frontend/src/components/main-page/ui/login-btn/LoginBtn.js
@@ -12,7 +12,6 @@ export default function LoginBtn() {
             </Link>
             <Routes >
                 <Route path="/login" element={<AuthForm />} />
-
             </Routes>
         </>
     )
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,6 @@ export default function LoginBtn() { @@
                 </Link>
                 <Routes >
                     <Route path="/login" element={<AuthForm />} />
                 </Routes>
             </>
         )
@@ Expand Down @@