new landing page init

frontend/src/components/main-page/LandingPage/LandingPage.jsx

@@ -0,0 +1,26 @@
+// 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";
+
+export default function LandingPage() {
+
+    return (
+        <>
+            <div className={"landing-main-wrapper"}>
+                <div className={"section1"}>
+                    <div className={"parallax-text"}>TAMPROG</div>
+                </div>
+                <div className={"section2"}>
+                    <div className={"parallax-text"}>NORMAL</div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+{/*<LoginBtn/>*/
+}
+{/*<RegisterBtn/>*/
+}

frontend/src/components/main-page/LandingPage/main.css

@@ -1,97 +1,38 @@
-.header-for-landing {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100px;
-  z-index: 1000;
-  background-color: rgba(40, 37, 40, 0.5);
-}
-
-.landing-buttons {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.landing-page {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow: hidden;
-}
-
-.landing {
-  width: 300vh;
-  min-height: 100vh;
-  background-color: whitesmoke;
-}
-
-.image-container {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-}
-
-.text-overlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
-  font-size: 24px;
-  text-align: center;
-  background-color: rgba(0, 0, 0, 0.5);
-  padding: 10px;
-}
-
-.custom-text {
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  background-color: cornsilk;
-  position: relative;
-  z-index: 10;
-  text-align: center;
-}
+.section1, .section2 {
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform-style: preserve-3d;
 
-.landing img {
-  width: 100%;
-  height: auto;
-  object-fit: cover;
-  display: block;
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  transition: opacity 2s ease-out;
 }
 
-.landing img.loaded {
-  opacity: 1;
+.section1::before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: url("../../../../public/field1.jpg") top center no-repeat;
+    background-size: cover;
+    transform: translateZ(-1px) scale(2.2);
+    filter: blur(1px);
 }
-
-.landing-register-btn {
-  transition: 0.3s ease;
-  cursor: pointer;
+.section2{
+    background: #1b6d85;
 }
 
-.landing-register-btn:hover {
-  transform: scale(1.05);
-}
+.parallax-text{
+    font-size: 15vh;
+    color: white;
+    transform: scale(1,1.1);
 
-.landing-login-btn a {
-  font-weight: 500;
-  align-items: center;
 }
 
-.landing-login-btn {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  transition: 0.3s ease;
-  cursor: pointer;
-}
+.landing-main-wrapper{
+    perspective: 1px;
+    transform-style: preserve-3d;
+    height: 100vh;
+    overflow-x: hidden;
+}