From 980327a4e9b832aae9ee08ab23066676d1533d75 Mon Sep 17 00:00:00 2001
From: Mitko <mitkoiliev505@gmail.comm>
Date: Mon, 16 Oct 2023 11:30:16 +0200
Subject: [PATCH] fixed landing-page components problem / navbar styling /
 white space remove bottom of page

---
 src/LandingPage/Landing.js           | 36 +++-------------------------
 src/LandingPage/components/Navbar.js |  6 ++---
 src/index.css                        |  6 ++++-
 3 files changed, 11 insertions(+), 37 deletions(-)

diff --git a/src/LandingPage/Landing.js b/src/LandingPage/Landing.js
index e8794d5..949da05 100644
--- a/src/LandingPage/Landing.js
+++ b/src/LandingPage/Landing.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-
+import Navbar from "./components/Navbar";
 const Landing = () => {
   const navigation = [
     { navi: "Home", to: "/" },
@@ -12,40 +12,10 @@ const Landing = () => {
     { soc: "ri-twitter-fill", src: "https://www.instagram.com" },
   ];
   return (
-    <div className="grid grid-cols-12 justify-center items-center min-h-screen">
-      <nav className="sticky top-0 left-0 grid col-span-12 justify-between items-center bg-[#333] px-2 z-40">
-        <div className="grid grid-cols-4 col-start-3 px-2 ">
-          <div className="flex justify-center items-center px-4 py-2 border-r-[1px] border-[#47433D] hover:bg-[#000]">
-            <img
-              src="https://i.ibb.co/S6dS0Gw/relief-connect-logo-removebg-preview.png"
-              className="w-[90px]"
-            />
-          </div>
-          {navigation.map((element) => (
-            <div className="flex justify-center items-center px-8 border-r-[1px] border-[#47433D] hover:bg-[#000]">
-              <Link
-                to={element.to}
-                className="text-white text-base uppercase font-[300]"
-              >
-                {element.navi}
-              </Link>
-            </div>
-          ))}
-        </div>
-        <div className="grid grid-cols-4 col-start-10 col-span-3">
-          {socials.map((element) => (
-            <div className="flex justify-center items-center px-2 border-[#47433D] hover:bg-[#000] hover:rounded-3xl">
-              <Link to={element.src} className="text-white text-xl uppercase">
-                <i class={element.soc}></i>
-              </Link>
-            </div>
-          ))}
-        </div>
-      </nav>
+    <div className="grid grid-cols-12 justify-center items-center h-screen">
+      <Navbar/>
       <div className="grid grid-cols-12 relative overflow-visible col-span-12 justify-center items-center mb-8">
         <img
-          // src="https://plus.unsplash.com/premium_photo-1663076063751-80c3da778a8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8d2lsZGZpcmUlMjBpbWFnZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60"
-          // src="https://images.unsplash.com/photo-1602980068989-cb21869ab2c7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8d2lsZGZpcmUlMjBpbWFnZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60"
           src="https://plus.unsplash.com/premium_photo-1661962514590-7cfa4f3d446d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Zmxvb2RzJTIwaW1hZ2V8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60"
           className="col-span-12 inset-0 h-[100vh] w-full object-fill object-right z-0 md:object-center"
         />
diff --git a/src/LandingPage/components/Navbar.js b/src/LandingPage/components/Navbar.js
index 36e3d87..45070af 100644
--- a/src/LandingPage/components/Navbar.js
+++ b/src/LandingPage/components/Navbar.js
@@ -14,14 +14,14 @@ const Navbar = () => {
   return (
     <nav className="sticky top-0 left-0 grid col-span-12 justify-between items-center bg-[#333] px-2 z-1000">
         <div className="grid grid-cols-4 col-start-3 px-2 ">
-          <div className="flex justify-center items-center px-4 py-2 border-r-[1px] border-[#47433D] hover:bg-[#000]">
+          <div className="flex justify-center cursor-pointer  items-center px-4 py-2 border-r-[1px] border-[#47433D] hover:bg-[#000]">
             <img
               src="https://i.ibb.co/S6dS0Gw/relief-connect-logo-removebg-preview.png"
               className="w-[90px]"
             />
           </div>
           {navigation.map((element) => (
-            <div className="flex justify-center items-center px-8 border-r-[1px] border-[#47433D] hover:bg-[#000]">
+            <div className="flex justify-center items-center cursor-pointer px-8 border-r-[1px] border-[#47433D] hover:bg-[#000]">
               <Link to={element.to} className="text-white text-base uppercase font-[300]">{element.navi}</Link>
             </div>
           ))}
@@ -29,7 +29,7 @@ const Navbar = () => {
         <div className="grid grid-cols-4 col-start-10 col-span-3">
           {
             socials.map((element)=>(
-              <div className="flex justify-center items-center px-2 border-[#47433D] hover:bg-[#000] hover:rounded-3xl">
+              <div className="flex justify-center items-center px-2 border-[#47433D] hover:scale-150 duration-200 ">
                 <Link to={element.src} className="text-white text-xl uppercase"><i class={element.soc}></i></Link>
               </div>
             ))
diff --git a/src/index.css b/src/index.css
index a1196bb..8617774 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,10 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @import url("https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css");
 @import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Roboto+Condensed:wght@300;400;700&display=swap');
-body {
+
+html, body {
   font-family: 'Roboto Condensed', sans-serif;
+  min-height: 100%;
+  width: 100%;
 }
 
 code {