Merge branch 'addlandingpage' into 'main'

create landing page

See merge request saburly/marketalarm/kivi-za-auta-react!13

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;

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;

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;
     }
   }

kivi-cars/src/containers/App.js

@@ -1,12 +1,13 @@
 import './App.css';
 import React from 'react';
-import CongratsPage from './CongratsPage';
+import LandingPage from './LandingPage';
 
 function App() {
 
   return (
     <div className="App">
-      <CongratsPage/>
+      <LandingPage/>
+
     </div>
   );
 }

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
+}
+

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;