Nav bar basic styles finished, burger menu without function and transition, hero section next to go,

src/app/features/landing/components/navigation/navigation.component.scss

@@ -0,0 +1,77 @@
+@use "../../../../../styles/abstracts";
+
+.navigation {
+    display: none;
+
+    @include abstracts.breakpoint("md") {
+        display: block;
+        padding-right: var(--space-4);
+    }
+
+    &__list {
+        display: flex;
+        gap: var(--space-4);
+    }
+
+    &__list-item {
+        list-style: none;
+        font-weight: 500;
+        font-size: var(--font-size-base);
+        color: var(--text-main);
+        transition: color 0.3s ease;
+
+        a {
+            color: var(--accent);
+
+            &:hover {
+                color: var(--accent-hover);
+            }
+        }
+    }
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-left: var(--space-4);
+
+    &__logo {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: var(--text-main);
+        border: 1px solid var(--accent);
+        width: abstracts.rem(30);
+        height: abstracts.rem(30);
+        display: flex;
+        background-color: var(--accent);
+        border-radius: 5px;
+        color: white;
+    }
+
+    &__company {
+        font-size: var(--font-size-base);
+        font-weight: 700;
+        color: var(--text-main);
+
+        span {
+            color: var(--accent);
+        }
+    }
+}
+
+.burger-menu {
+    padding-right: var(--space-4);
+    cursor: pointer;
+
+    @include abstracts.breakpoint("md") {
+        display: none;
+    }
+
+    &__icon {
+        width: abstracts.rem(32);
+        height: abstracts.rem(32);
+        color: var(--text-main);
+    }
+
+}