From b98236a6fadba0ffc45658d918aff1508a838be9 Mon Sep 17 00:00:00 2001
From: alex090890 <alexprofteach@gmail.com>
Date: Thu, 16 May 2024 20:32:36 +0200
Subject: [PATCH] Final changes

---
 client/src/App.css                      | 28 +++++++++++++++++++++++--
 client/src/components/Home-De.jsx       | 26 +++++++++--------------
 client/src/components/Home-EN.jsx       | 26 +++++++++--------------
 client/src/components/Home-UA.jsx       | 14 +++++++++++--
 client/src/components/styles/Footer.css |  2 +-
 5 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 593f925..958e955 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -83,10 +83,14 @@ body {
   box-shadow: 0 0 10px rgba(71, 170, 205, 0.685);
 }
 
+.regbutton-bottom {
+  width: 100px;
+}
+
 .main {
   margin: 10px 0;
-  width: 100%;
-  padding: 20px;
+  width: 100vw;
+  text-align: center;
 }
 
 .main>h1 {
@@ -245,6 +249,26 @@ label {
   margin-top: 20px;
 }
 
+.welcome-header {
+  text-align: center;
+  font-family: 'Comic Sans MS', sans-serif;
+  width: 100vw;
+  padding-top: 20px;
+}
+
+.welcome-text {
+  text-align: center;
+  font-family: 'Courier New', Courier, monospace;
+  width: 100vw;
+}
+
+.welcome-img {
+  width: 40%;
+  margin-top: 40px;
+  height: 80%;
+  text-align: center;
+  margin: 20px auto;
+}
 
 @media screen and (max-width: 600px) {
   .header {
diff --git a/client/src/components/Home-De.jsx b/client/src/components/Home-De.jsx
index e8fa508..5dbde6b 100644
--- a/client/src/components/Home-De.jsx
+++ b/client/src/components/Home-De.jsx
@@ -26,23 +26,17 @@ export default function HomeEN() {
                 <h1>WordWeb</h1>
                 <h2>Eine kostenlose, einfache Website, auf der Sie sich alles merken können!</h2>
             </div>
-            <div className="main">
-                <h1>Willkommen zu WordWeb!</h1>
-                <p>Suchen Sie nach einer kostenlosen Website, die ein wichtiges Hilfsmittel beim Erlernen einer Sprache sein kann?</p>
-                <p>Nun, Sie können beruhigt aufatmen, denn Ihre lange Suche hat ein Ende!</p>
-                <h3>Hier sind die wichtigsten Funktionen:</h3>
-                <ul>
-                    <li>Ganz <b>kostenlos</b>;</li>
-                    <li>100% <b>Werbung-frei</b>;</li>
-                    <li>Einfach zu nutzen;</li>
-                    <li>Sie können Karteikarten jederzeit hinzufügen, bearbeiten oder löschen</li>
-                    <li>Benutzerfreundliches Design</li>
-                </ul>
-                <div className="logincomponent">
-                    <Button variant="primary" className="regbutton" onClick={() => navigate('/de/login')}>Anmelden</Button>
-                    <Button variant="primary" className="regbutton" onClick={() => navigate('/de/register')}>Registrieren</Button>
+        <div className="welcome-div">
+                    <div className="welcome-container">
+                    <div className="main">
+                            <h1 className="welcome-header">Willkommen zu WordWeb!</h1>
+                            <img src="https://res.cloudinary.com/dosvnb1kk/image/upload/v1715882574/Main_Features_2_eiyzso.png" className="welcome-img" />
+                    
+                <p className="welcome-text">Suchen Sie nach einer kostenlosen Website, die ein wichtiges Hilfsmittel beim Erlernen einer Sprache sein kann?</p>
+                    <p className="welcome-text">Nun, Sie können beruhigt aufatmen, denn Ihre lange Suche hat ein Ende!</p>
+                </div>
+                </div>
                 </div>
-            </div>
             <Footer />
         </div>
     )
diff --git a/client/src/components/Home-EN.jsx b/client/src/components/Home-EN.jsx
index 54f1d7c..0be5050 100644
--- a/client/src/components/Home-EN.jsx
+++ b/client/src/components/Home-EN.jsx
@@ -27,23 +27,17 @@ export default function HomeEN() {
                 <h1>WordWeb</h1>
                 <h2>A free easy website to make flashcards!</h2>
             </div>
-            <div className="main">
-                <h1>Welcome to WordWeb!</h1>
-                <p>Are you looking for a free website that can become an important tool in learning a language?</p>
-                <p>Well, you can breathe easily as your long search is over!</p>
-                <h3>Here are the key features:</h3>
-                <ul>
-                    <li>Completely <b>cost-free</b>;</li>
-                    <li>100% <b>ad-free</b>;</li>
-                    <li>Easy to use;</li>
-                    <li>Add, edit, delete flashcards anytime you wish</li>
-                    <li>Easy-to-use design</li>
-                </ul>
-                <div className="logincomponent">
-                    <Button variant="primary" className="regbutton" onClick={() => navigate('/login')}>Login</Button>
-                    <Button variant="primary" className="regbutton" onClick={() => navigate('/register')}>Register</Button>
+                <div className="welcome-div">
+                    <div className="welcome-container">
+                    <div className="main">
+                            <h1 className="welcome-header">Welcome to WordWeb!</h1>
+                            <img src="https://res.cloudinary.com/dosvnb1kk/image/upload/v1715880929/Main_Features_1_rk7zzv.png" className="welcome-img" />
+                    
+                <p className="welcome-text">Are you looking for a free website that can become an important tool in learning a language?</p>
+                    <p className="welcome-text">Well, you can breathe easily as your long search is over!</p>
+                </div>
+                </div>
                 </div>
-            </div>
             </div>
            <Footer />
         </div>
diff --git a/client/src/components/Home-UA.jsx b/client/src/components/Home-UA.jsx
index 6ac4676..c823655 100644
--- a/client/src/components/Home-UA.jsx
+++ b/client/src/components/Home-UA.jsx
@@ -26,7 +26,7 @@ export default function HomeEN() {
                 <h1>WordWeb</h1>
                 <h2>Легкий безкоштовний сервіс для вивчення нових слів</h2>
             </div>
-            <div className="main">
+            {/*<div className="main">
                 <h1>Ласкаво просимо до WordWeb!</h1>
                 <p>Ви шукаєте безкоштовний сервіс для вивчення мови?</p>
                 <p>Що ж, ви можете видихнути спокійно, оскільки ваш пошук дійшов до кінця!</p>
@@ -42,7 +42,17 @@ export default function HomeEN() {
                     <Button variant="primary" className="regbutton" onClick={() => navigate('/ua/login')}>Увійти</Button>
                     <Button variant="primary" className="regbutton" onClick={() => navigate('/ua/register')}>Зареєструватися</Button>
                 </div>
-            </div>
+    </div>*/}
+                            <div className="welcome-div">
+                    <div className="welcome-container">
+                    <div className="main">
+                            <h1 className="welcome-header">Ласкаво просимо до WordWeb!</h1>
+                            <img src="https://res.cloudinary.com/dosvnb1kk/image/upload/v1715884259/Main_Features_3_wmf92p.png" className="welcome-img" />
+                <p className="welcome-text">Ви шукаєте безкоштовний сервіс для вивчення мови?</p>
+                <p className="welcome-text">Що ж, ви можете видихнути спокійно, оскільки ваш пошук добіг до кінця!</p>
+                </div>
+                </div>
+                </div>
             <Footer />
         </div>
     )
diff --git a/client/src/components/styles/Footer.css b/client/src/components/styles/Footer.css
index c2c8126..9a13287 100644
--- a/client/src/components/styles/Footer.css
+++ b/client/src/components/styles/Footer.css
@@ -1,5 +1,5 @@
 .footer {
     text-align: center;
     color: gray;
-
+    margin-top: 20px;
 }
\ No newline at end of file