[RSN-34] - Create navbar and footer (#40)

* RSN-34: created navbar

* RSN-34: added required changes and created footer

* RSN-34: added components path to config

* fix: minor styling fixes

* chore: linting

* fix: fixed min height for main div

* fix: file name change

* chore: file structure and imports change

---------

Co-authored-by: Maciej Krawczyk <[email protected]>

Client/reasn-client/apps/web/app/page.tsx

@@ -1,12 +1,15 @@
 "use client";
 
-import { HeroSection, QuickFilters } from "@reasn/ui/src";
+import { HeroSection, QuickFilters } from "@reasn/ui/src/components/web";
+import { Navbar, Footer } from "@reasn/ui/src/components/shared";
 
 export default function Web() {
   return (
     <div className="min-h-screen bg-[#161618] text-white">
+      <Navbar />
       <HeroSection />
       <QuickFilters />
+      <Footer />
     </div>
   );
 }

Client/reasn-client/apps/web/tailwind.config.js

@@ -3,6 +3,9 @@ module.exports = {
   content: [
     "./app/**/*.{js,jsx,ts,tsx}",
     "../../packages/ui/src/**/*.{js,jsx,ts,tsx}",
+    "./app/**/*.{js,jsx,ts,tsx}",
+    "./components/**/*.{js,jsx,ts,tsx}",
+    "../../packages/ui/src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
     extend: {},

Client/reasn-client/packages/ui/src/components/shared/Footer.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+export const Footer = () => {
+  return (
+    <footer className="w-full rounded-t-2xl bg-black bg-bottom py-16 text-center">
+      <div className="mx-auto flex w-4/5 items-center justify-between">
+        <div className="mx-2 mt-1 h-1 flex-grow rounded-3xl bg-gradient-to-r from-red-400 via-purple-500 to-indigo-600"></div>
+        <span className="text-3xl font-bold text-white">we are</span>
+        <div className="mx-2 mt-1 h-1 flex-grow rounded-3xl bg-gradient-to-r from-indigo-600 via-purple-500 to-red-400"></div>
+      </div>
+      <div className="-mt-1 text-3xl font-bold text-white">the Reasn.</div>
+      <div className="mx-auto -mt-8 flex w-3/4 justify-between">
+        <div className="flex w-1/6 justify-between text-white">
+          <a href="#" className="hover:text-[#ccc]">
+            link
+          </a>
+          <a href="#" className="hover:text-[#ccc]">
+            link
+          </a>
+          <a href="#" className="hover:text-[#ccc]">
+            link
+          </a>
+        </div>
+        <div className="flex w-1/6 justify-between text-white">
+          <a href="#" className="hover:text-[#ccc]">
+            link
+          </a>
+          <a href="#" className="hover:text-[#ccc]">
+            link
+          </a>
+          <a href="#" className="hover:text-[#ccc]">
+            link
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+};

Client/reasn-client/packages/ui/src/components/shared/Navbar.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export const Navbar = () => {
+  return (
+    <nav className="sticky top-0 z-[50] flex h-16 w-full flex-wrap items-center justify-between rounded-b-2xl bg-black text-base text-white">
+      <div className="mx-auto flex w-4/5 justify-between">
+        <div>
+          <a href="#" className="text-2xl font-bold hover:text-[#ccc]">
+            Reasn.
+          </a>
+        </div>
+        <div className="flex items-center gap-8">
+          <a href="#" className="hover:text-[#ccc]">
+            logowanie
+          </a>
+          <a
+            href="#"
+            className="rounded-2xl border-2 border-white px-6 py-1.5 hover:bg-white hover:text-black"
+          >
+            rejestracja
+          </a>
+        </div>
+      </div>
+    </nav>
+  );
+};

Client/reasn-client/packages/ui/src/components/shared/index.tsx

@@ -0,0 +1,3 @@
+export { Card, CardVariant } from "./Card";
+export { Navbar } from "./Navbar";
+export { Footer } from "./Footer";

Client/reasn-client/packages/ui/src/components/web/index.tsx

@@ -0,0 +1,2 @@
+export { HeroSection } from "./main/HeroSection";
+export { QuickFilters } from "./main/QuickFilters";

Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx → Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Fire } from "../../icons/Fire";
-import { Card, CardVariant } from "../Card";
+import { Fire } from "@reasn/ui/src/icons";
+import { Card, CardVariant } from "@reasn/ui/src/components/shared";
 
 export const HeroSection = () => {
   return (

Client/reasn-client/packages/ui/src/components/main/QuickFilters.tsx → Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import React, { useState } from "react";
-import { Card, CardVariant } from "../Card";
+import { Card, CardVariant } from "@reasn/ui/src/components/shared";
 
 interface QuickFiltersButtonProps {
   title: string;

Client/reasn-client/packages/ui/src/icons/index.tsx

@@ -0,0 +1 @@
+export { Fire } from "./Fire";

Client/reasn-client/packages/ui/src/index.tsx

@@ -1,4 +0,0 @@
-export { Button, type ButtonProps } from "./button";
-export { Card, type CardProps, CardVariant } from "./components/Card";
-export { HeroSection } from "./components/main/HeroSection";
-export { QuickFilters } from "./components/main/QuickFilters";