working on landingpage

Author: Kruemelmann

public/logo.png

@@ -35,12 +35,14 @@ const Navbar = () => {
             <div className="flex items-center">
                 {/* Logo */}
                 <div className="text-xl justify-start font-semibold w-1/6">
-                    <a href="#">MyLogo</a>
+                    <Link to="/">
+                        <img src={process.env.PUBLIC_URL + '/logo.png'} alt="Logo" className="h-[50px]"/>
+                    </Link>
                 </div>
 
                 {/* Desktop Links */}
                 <div className="hidden justify-end w-5/6 md:flex space-x-6">
-                    <Link className="hover:text-gray-500 p-2 rounded text-textcolor font-bold" to="/">Home</Link>
+                    <Link className="hover:text-gray-500 p-2 rounded text-textcolor font-bold" to="/docs">Docs</Link>
                     <Link className="hover:text-gray-500 p-2 rounded text-textcolor font-bold" to="/blog">Blog</Link>
                     <Link className="hover:text-gray-500 p-2 rounded text-textcolor font-bold" to="/about">About</Link>
                     <button

src/components/Navbar/Navbar.js

@@ -16,13 +16,11 @@ body {
 }
 
 .dark {
-    --navbar: 189, 193, 198;
     --background: 21, 20, 26;
     --textcolor: 255, 255, 255;
 }
 
 .light {
-    --navbar: 91,91,102;
     --background: 229, 231, 235;
     --textcolor: 0, 0, 0;
 }

src/index.css

@@ -4,6 +4,7 @@ import Layout from "./pages/Layout";
 import Home from "./pages/Home";
 import Blog from "./pages/Blog";
 import About from "./pages/About";
+import Docs from "./pages/Docs";
 import NoPage from "./pages/NoPage";
 
 import "./index.css";
@@ -16,6 +17,7 @@ export default function App() {
           <Route index element={<Home />} />
           <Route path="blog" element={<Blog />} />
           <Route path="about" element={<About />} />
+          <Route path="docs" element={<Docs />} />
           <Route path="*" element={<NoPage />} />
         </Route>
       </Routes>

src/index.js

@@ -0,0 +1,10 @@
+const Docs = () => {
+     return (
+         <div className="text-textcolor dark:text-textcolor">
+            <h1>Docs</h1>
+         </div>
+     )
+};
+
+export default Docs;
+

src/pages/Docs.js

@@ -1,21 +1,33 @@
+import { Link } from "react-router-dom";
+
 const Home = () => {
      return (
          <div className="text-textcolor dark:text-textcolor">
+             <div className="pb-15">
+                 <div className="flex justify-center items-center content-center">
+                     <span>
+                         <img src={process.env.PUBLIC_URL + '/logo.png'} alt="Logo" className="h-[350px]"/>
+                     </span>
+                     <span className="text-5xl">
+                         owlMQ
+                     </span>
+                 </div>
+                 <div className="flex justify-center items-center content-center">
+                     <p className="text-4xl">
+                         Distributed message queuing service
+                     </p>
+                 </div>
+                 <div className="flex justify-center items-center content-center p-10">
+                     <button class="text-textcolor dark:text-textcolor py-2 px-4 border border-textcolor dark:border-textcolor rounded hover:bg-neutral-300 hover:dark:bg-neutral-800">
+                         <Link to="/docs#getting_started">Getting started</Link>
+                     </button>
+                 </div>
+
+             </div>
              <p>
                  WORK IN PROGRESS
                  <br />
                  <br />
-                 <div
-                     style={{
-                         width: '300px',
-                         height: '200px',
-                         margin: '0 auto',
-                         textAlign: 'center',
-                         paddingTop: '90px'
-                     }}
-                 >
-                     <img src={process.env.PUBLIC_URL + '/logo.png'} alt="Logo" />
-                 </div>
              </p>
          </div>
   );