fix: landing page style (#46)

* fix: 🐛 positioning for the lower menu options

* chore: 🔨 set default color theme

* fix: 🐛 modify landing page style

* style: 🎨 fix background

* style: 🎨 color theme for landing page

src/App.vue

@@ -6,6 +6,12 @@ import { theme } from "@/stores/settings";
 
 const themeOverrides: GlobalThemeOverrides = {
   Button: {},
+  common: {
+    primaryColor: "#0284c7",
+    primaryColorHover: "#0ea5e9",
+    primaryColorPressed: "#0369a1",
+    primaryColorSuppl: "#0ea5e9",
+  },
   Form: {
     feedbackPadding: "4px 0 8px 2px",
     labelFontWeight: "600",
@@ -29,7 +35,7 @@ const themeOverrides: GlobalThemeOverrides = {
 
             <DatasetSidebar />
 
-            <n-layout-content class="h-[calc(100vh-56px)] py-4 pl-6">
+            <n-layout-content class="view h-[calc(100vh-56px)] py-4 pl-6">
               <router-view v-slot="{ Component }">
                 <transition name="fade" appear mode="out-in">
                   <component :is="Component" />

src/assets/css/base.css

@@ -1,7 +1,7 @@
 *,
 *::before,
 *::after {
-  position: relative;
+  /*position: relative;*/
 
   box-sizing: border-box;
 

src/assets/css/main.css

@@ -1,5 +1,4 @@
 @import "./base.css";
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -154,4 +153,62 @@ Transition styles for <transition />
 .lightfadeleft-leave-to {
   opacity: 0;
   transform: translateY(-20px);
+}
+
+/*.n-menu-item{*/
+/*  position: relative;*/
+/*}*/
+
+/*.n-menu-item *, .n-menu-item *::before,.n-menu-item *::after {*/
+/*  position: static;*/
+
+/*}*/
+
+/*.share-data{*/
+/*  background-image: url("../../assets/faq-bg.svg");*/
+/*      background-size: auto; !* Adjust as needed *!*/
+/*    background-repeat: repeat; !* Adjust as needed *!*/
+
+/*}*/
+
+.main-bg::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.n-collapse .n-collapse-item:not(:first-child) {
+    border-top: 1px solid #0284c7;}
+
+.view:has(main.landing){
+  padding: 0;
+  margin: 0;
+}
+
+
+.share-data {
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.share-data::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("../../assets/faq-bg.svg");
+    background-repeat: repeat; /* Adjust as needed */
+    background-position: center;
+    mask-image: linear-gradient( white 15%, white 85%, transparent);
+    z-index: -1;
+}
+
+.faq {
+  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 3%, rgba(241, 245, 249, 1) 30%, rgba(241, 245, 249, 1) 88%, rgba(255, 255, 255, 1) 100%);
 }