Apply styles on Home page

kitabcitab/pages/_app.js

@@ -1,5 +1,10 @@
+import Layout from '../components/Layout'
 import '../styles/globals.css'
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return(
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
 }

kitabcitab/pages/index.js

@@ -1,25 +1,32 @@
-
+import { AiOutlineSearch, AiOutlineClose } from 'react-icons/ai'
+import '../styles/Layout.module.css'
 
 export default function HomePage() {
   return (
-    <div className="flex flex-col items-center">
-      <div className="py-3 px-2 ">
-        <p className="text-5xl text-white">KitabCitab</p>
+    <div className="flex flex-col items-center w-[100vw] h-[50vh]">
+      <div className="p-10 ">
+        <p className="text-6xl text-white font-serif">KitabCitab</p>
       </div>
-      <div className="
-        p-2 border-2 w-[90%]
-        border-black rounded-3xl flex flex-row justify-center
+      <div className="group
+        hover:bg-[#303134]
+        py-3 border-[1px] w-[90%]
+        border-[#bdc1c6] rounded-3xl flex flex-row justify-around
 
-        tablet:w-[70%] 
-        tablet:p-3
+        tablet:w-[70%]
 
-        laptop:w-[50%] 
-        laptop:p-2    
+        laptop:w-[40%]
         "
-        >
-        
-        <input className="bg-[#303134] w-[80%]"/>
+      >
+        <a className='rounded-3xl hover:border-black text-[#9aa0a6]' onClick={() => console.log("Search for results")}><AiOutlineSearch size={25}/></a>
+        <input className="bg-[#202124] group-hover:bg-[#303134] w-[80%] search px-2 active:border-none text-white font-serif outline-none"/>
+        <a className='rounded-3xl hover:border-black text-[#9aa0a6]' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></a>
       </div>
+      <button 
+        className='py-1 px-10 mt-10  text-3xl rounded-md bg-[#303134] text-white font-serif border-[1px] border-[#303134] hover:border-[#fff] hover:border-[1px]'
+        onClick={() => console.log("Searching")}
+      >
+        Traži
+      </button>
     </div>