From 08c3e632c81d35ec79ed3d8bfb5c5f142023756f Mon Sep 17 00:00:00 2001
From: ahmedsosic <ahmedsosic@gmail.com>
Date: Mon, 14 Mar 2022 16:08:14 +0100
Subject: [PATCH] create landing page

---
 kivi-cars/{public/img => src/assets}/logo.png | Bin
 kivi-cars/src/components/Button/button.css    |  14 ++++---
 .../src/components/EmailField/EmailField.css  |   0
 .../src/components/EmailField/EmailField.js   |  36 ++++++++++++++++++
 kivi-cars/src/components/Header/Header.css    |   6 ++-
 kivi-cars/src/containers/App.js               |   4 +-
 .../{Category.js => CategoryPage.js}          |   0
 kivi-cars/src/containers/LandingPage.css      |  33 ++++++++++++++++
 kivi-cars/src/containers/LandingPage.js       |  30 +++++++++++++++
 9 files changed, 113 insertions(+), 10 deletions(-)
 rename kivi-cars/{public/img => src/assets}/logo.png (100%)
 create mode 100644 kivi-cars/src/components/EmailField/EmailField.css
 create mode 100644 kivi-cars/src/components/EmailField/EmailField.js
 rename kivi-cars/src/containers/{Category.js => CategoryPage.js} (100%)
 create mode 100644 kivi-cars/src/containers/LandingPage.css
 create mode 100644 kivi-cars/src/containers/LandingPage.js

diff --git a/kivi-cars/public/img/logo.png b/kivi-cars/src/assets/logo.png
similarity index 100%
rename from kivi-cars/public/img/logo.png
rename to kivi-cars/src/assets/logo.png
diff --git a/kivi-cars/src/components/Button/button.css b/kivi-cars/src/components/Button/button.css
index 09472cb..1fdf96d 100644
--- a/kivi-cars/src/components/Button/button.css
+++ b/kivi-cars/src/components/Button/button.css
@@ -4,9 +4,10 @@
 }
 
 .standardBtn {
-    width:300px;
+    width:400px;
+    height: 43px;
     background-color: #02ADBA;
-    font-size: 15px;
+    font-size: 20px;
     padding: 7px 20px 7px 20px;
     color: white;
     border: #02ADBA;
@@ -33,9 +34,9 @@
 
 @media screen and (max-width: 700px) {
     .standardBtn {
-        width: 200px;
+        width: 280px;
         background-color: #02ADBA;
-        font-size: 15px;
+        font-size: 25px;
         padding: 7px 20px 7px 20px;
         color: white;
         border: #02ADBA;
@@ -46,9 +47,10 @@
 
   @media screen and (max-width: 400px) {
     .standardBtn {
-        width: 150px;
+        width: 250px;
+        height: 43px;
         background-color: #02ADBA;
-        font-size: 15px;
+        font-size: 25px;
         padding: 7px 20px 7px 20px;
         color: white;
         border: #02ADBA;
diff --git a/kivi-cars/src/components/EmailField/EmailField.css b/kivi-cars/src/components/EmailField/EmailField.css
new file mode 100644
index 0000000..e69de29
diff --git a/kivi-cars/src/components/EmailField/EmailField.js b/kivi-cars/src/components/EmailField/EmailField.js
new file mode 100644
index 0000000..7a17f65
--- /dev/null
+++ b/kivi-cars/src/components/EmailField/EmailField.js
@@ -0,0 +1,36 @@
+import React, { useRef, useState } from 'react';
+import validator from 'validator';
+import './EmailField.css';
+
+const EmailField = (props) => {
+    
+    const [emailError, setEmailError] = useState('')
+    const validateEmail = (e) => {
+        var email = e.target.value
+    
+        if (validator.isEmail(email)) {
+        setEmailError('Valid Email :)')
+        } else {
+        setEmailError('Enter valid Email!')
+        }
+    }
+    
+    return (
+
+        <div>
+            <hr/>
+            <div>
+                <h2>Unesite VAS Email</h2>
+               
+                <input type='text' id='userid' onChange={(e) => validateEmail(e)}></input>
+
+            </div>
+
+        </div>
+
+    );
+    }
+    
+    
+    
+export default EmailField;
\ No newline at end of file
diff --git a/kivi-cars/src/components/Header/Header.css b/kivi-cars/src/components/Header/Header.css
index 520e4c1..0e6e166 100644
--- a/kivi-cars/src/components/Header/Header.css
+++ b/kivi-cars/src/components/Header/Header.css
@@ -15,12 +15,14 @@ header {
 
   @media screen and (max-width: 700px) {
     .title {
-        font-size: 20px;
+        font-size: 25px;
+        padding: auto;
+        
     }
   }
 
 @media screen and (max-width: 300px) {
     .title {
-        font-size: 17px;
+        font-size: 20px;
     }
   }
diff --git a/kivi-cars/src/containers/App.js b/kivi-cars/src/containers/App.js
index f6b932d..355caf2 100644
--- a/kivi-cars/src/containers/App.js
+++ b/kivi-cars/src/containers/App.js
@@ -1,6 +1,6 @@
 import './App.css';
 import React from 'react';
-import Category from './Category';
+import LandingPage from './LandingPage';
 
 function App() {
 
@@ -9,7 +9,7 @@ function App() {
 
   return (
     <div className="App">
-      <Category/>
+      <LandingPage/>
     </div>
   );
 }
diff --git a/kivi-cars/src/containers/Category.js b/kivi-cars/src/containers/CategoryPage.js
similarity index 100%
rename from kivi-cars/src/containers/Category.js
rename to kivi-cars/src/containers/CategoryPage.js
diff --git a/kivi-cars/src/containers/LandingPage.css b/kivi-cars/src/containers/LandingPage.css
new file mode 100644
index 0000000..559a2a8
--- /dev/null
+++ b/kivi-cars/src/containers/LandingPage.css
@@ -0,0 +1,33 @@
+.logo-img {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0 2rem 0;
+}
+
+
+.header {
+    margin-bottom: 100px;
+    display: flex;
+    justify-items: auto;
+   
+}
+.paragraph{
+    display: flex;
+    flex-direction: column;
+    padding: 3rem;
+    gap: 20px;
+   
+}
+h2{
+    display: flex;
+    margin: auto;
+    font-size: 300;
+    font-weight: 300;
+    padding: auto;
+    text-align: center;
+    
+}
+#besplatno{
+    font-weight: bold
+}
+
diff --git a/kivi-cars/src/containers/LandingPage.js b/kivi-cars/src/containers/LandingPage.js
new file mode 100644
index 0000000..a0e229c
--- /dev/null
+++ b/kivi-cars/src/containers/LandingPage.js
@@ -0,0 +1,30 @@
+import logo  from '../assets/logo.png'
+import StandardBtn from '../components/Button/StandardBtn';
+import Header from '../components/Header/Header';
+import './LandingPage.css'
+
+function LandingPage() {
+
+    const naslov = 'KIVI - CARS';
+    var naziv = 'KUPI';
+  
+    return (
+      <div className="landing-page">
+        <div className='logo-img'>
+            <img className='logo' src={logo}/>
+        </div>
+
+        <Header className='header' header={naslov}/>
+        <div className='paragraph'>
+            <h2> Sva motorna vozila dostupna u oglasima </h2>
+            <h2> Na Vas email </h2>
+            <h2 id='besplatno'> BESPLATNO </h2>
+            
+        </div>
+        <StandardBtn title={naziv}/>
+        
+      </div>
+    );
+  }
+  
+  export default LandingPage;
\ No newline at end of file