home page new layout

jordus100 · May 24, 2024 · a75b1fd · a75b1fd
1 parent c7f9e80
commit a75b1fd
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 40 deletions.
diff --git a/src/App.js b/src/App.js
@@ -17,12 +17,11 @@ function App() {
             <div className="log-head">
                 <header className="header">
                     <Navbar isAuthenticated={isAuthenticated} user={null} />
+                    {/* tutaj przesyla uzytkownika */}
                 </header>
             </div>
 
-            <div className='container'>
-                <Home isAuthenticated={isAuthenticated} />
-            </div>
+            <Home isAuthenticated={isAuthenticated} />  
         </div>
     );
 }

diff --git a/src/Home.js b/src/Home.js
@@ -1,42 +1,53 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import './Home.scss';
 
 function Home({ isAuthenticated }) {
+    const getStartedRef = useRef(null);
+
+    const scrollToGetStarted = () => {
+        if (getStartedRef.current) {
+            getStartedRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+
     return (
+
         <div className="home">
             <div className="welcome-box">
                 <h1>Welcome to Bot-Wars!</h1>
-                {isAuthenticated ? (
-                    <p>Welcome back! Check out our latest tournaments and games.</p>
-                ) : (
-                    <p>Join us today and start competing in our exciting tournaments!</p>
-                )}
-            </div>
-            <div className="info-boxes">
                 {isAuthenticated ? (
                     <>
-                        <div className="info-box">
-                            <h2>Your Dashboard</h2>
-                            <p>View your current standings, upcoming matches, and more.</p>
-                        </div>
-                        <div className="info-box">
-                            <h2>Latest Tournaments</h2>
-                            <p>Stay updated with the latest tournaments and events.</p>
-                        </div>
+                    <p>Welcome back! Check out our latest tournaments and games.</p>
                     </>
-                ) : (
+
+                ) : (   
                     <>
-                        <div className="info-box">
-                            <h2>Why Join Bot-Wars?</h2>
-                            <p>Compete with players from around the world and prove your skills.</p>
-                        </div>
-                        <div className="info-box">
-                            <h2>How to Get Started</h2>
-                            <p>Sign up, create your profile, and join your first tournament today.</p>
+                        <p>Join us today and start competing in our exciting tournaments!</p>
+                        <div className="get-started-link" onClick={scrollToGetStarted}>
+                            <a href="#">Get Started</a>
                         </div>
                     </>
                 )}
             </div>
+
+            <div ref={getStartedRef} className="info-boxes">
+                <div className="info-box large">
+                    <h2>What is Bot-Wars</h2>
+                    <p>
+                        This is a platform where you can create and duel your bots. 
+                        You can join or create tournaments, face your friends, or shine
+                         in the global ranking
+                         </p>
+                </div>
+                <div className="info-box">
+                    <h2>How to Play</h2>
+                    <p>Learn how to create and configure your bots to participate in exciting matches and tournaments.</p>
+                </div>
+                <div className="info-box">
+                    <h2>Tournaments</h2>
+                    <p>Join various tournaments, compete with other players, and climb the leaderboard to become the champion.</p>
+                </div>
+            </div>
         </div>
     );
 }

diff --git a/src/Home.scss b/src/Home.scss
@@ -1,28 +1,58 @@
+// Variables
+$primary-color: #0BE400;
+$secondary-color: #FFC300;
+$background-color: #000;
+$text-color: #666;
+$info-box-bg: #fff;
+$info-box-border: #ddd;
+$info-box-text: #333;
+
 .home {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 20px;
-    background-color: #f4f4f4;
+    padding: 1em 0.3em 0.3em 0.3em;
+    width: 100%;
 
     .welcome-box {
-        background: #fff;
-        border: 1px solid #ddd;
-        border-radius: 10px;
+        background: $background-color;
+        border: 2px solid $primary-color;
+        outline: 2px solid $primary-color;
+        outline-offset: -0.2em;
         padding: 20px;
         margin-bottom: 20px;
         text-align: center;
-        width: 80%;
+        min-width: 80%;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
         h1 {
-            color: #333;
+            color: $secondary-color;
             margin-bottom: 10px;
         }
 
         p {
-            color: #666;
-            font-size: 1.2em;
+            color: $text-color;
+            font-size: 1em;
+        }
+
+        .get-started-link {
+            margin-top: 10px;
+
+            a {
+                color: $secondary-color;
+                font-weight: bold;
+                cursor: pointer;
+                text-decoration: none;
+                padding: 10px 20px;
+                border: 2px solid $secondary-color;
+                border-radius: 5px;
+                transition: background 0.3s, color 0.3s;
+
+                &:hover {
+                    background: $secondary-color;
+                    color: $background-color;
+                }
+            }
         }
     }
 
@@ -34,21 +64,26 @@
         width: 100%;
 
         .info-box {
-            background: #fff;
-            border: 1px solid #ddd;
+            background: $info-box-bg;
+            border: 1px solid $info-box-border;
             border-radius: 10px;
             padding: 20px;
             width: 300px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             text-align: center;
 
+            &.large {
+                width: 100%;
+                max-width: 800px;
+            }
+
             h2 {
-                color: #333;
+                color: $info-box-text;
                 margin-bottom: 10px;
             }
 
             p {
-                color: #666;
+                color: $text-color;
                 font-size: 1em;
             }
         }