icons docs (#489)

Author: lazarusA

docs/assets/css/main.css

@@ -60,4 +60,8 @@
 
   --ui-text: var(--color-neutral-50);
   --ui-border: var(--color-neutral-600);
-}
+}
+
+.icon-sm { width: 16px; height: 16px; }
+.icon-md { width: 24px; height: 24px; }
+.icon-lg { width: 32px; height: 32px; }

docs/content/1.getting-started/3.landing.md

@@ -10,46 +10,61 @@ seo:
 ## Main menu
 
 ::steps
-### Stores
+### :icon{name="i-tabler-database-plus" class="icon-lg"} Select dataset
 
-Use the `store` icon to load curated datasets or your own!
+Use the `database` icon to load curated datasets or your own!
 
-### Select a variable
+### :icon{name="i-tabler-variable" class="icon-lg"} Select variable
 
-From the menu `x` variables select the one you would like to see and click plot!
+now, use the `variable` icon to select the variable you would like to see and click plot!
 
 ### Change plot type
 
+:icon{name="i-ph-cube-light" class="icon-lg"} Cube: usually for spatio-temporal variables, `x-y-t`.
+
+:icon{name="i-gg-menu-grid-o" class="icon-lg"} Point clouds
+
+:icon{name="i-ph-sphere-thin" class="icon-lg"} Sphere projection
+
+:icon{name="i-mdi-square-outline" class="icon-lg"} Rectangular projection
+
 There some default plotting options depending on your dataset dimensions, however you could change to a different plot type if your data dimensions allow it.
 
-### A different Colormap
+### :icon{name="i-noto-v1-artist-palette" class="icon-lg"} Change Colormap
 
 Hover the colormap options to see how your plot will change, then click on the one you like to setup that one!
 
-### Settings
+### :icon{name="i-lucide-settings" class="icon-lg"} Settings
+
+### :icon{name="i-ph-play-pause-fill" class="icon-lg"} Animation controls
 
-### Animation
 
-### Analytics
+### :icon{name="i-ph-math-operations-bold" class="icon-lg"} Apply operations
+
+WebGPU-powered analytics.
 
 ::
 
 ## Floating menu
 
 ::prose-steps
-### Reset camera
+### :icon{name="i-ic-round-flip-camera-ios" class="icon-lg"} Reset camera
 
 Did you move around a lot? then click the reset camera icon.
 
 ### View
 
-?
+:icon{name="i-cil-grid" class="icon-lg"} Orthographic
+
+:icon{name="i-icon-park-outline-perspective" class="icon-lg"} Perspective
 
-### 1D transects
+
+### :icon{name="i-codicon-graph-line" class="icon-lg"} Plot lines: 1D transects
 
 Click to view 1D transects (line plots) through the given dimension.
 
-### Export images and animations
+### :icon{name="i-ion-image" class="icon-lg"} Export images and animations
+
 Do you want to use the output somewhere else? either has a static image or a video? we got you covered!
 
-### Quality
+### :icon{name="i-ic-outline-rocket-launch" class="icon-lg"} Performance mode

docs/content/index.md

@@ -19,9 +19,9 @@ Load multi-dimensional datasets directly in the browser, interactively slice and
   color: neutral
   size: xl
   to: /getting-started/landing
-  trailing-icon: i-lucide-arrow-right
+  trailing-icon: i-lucide-plane-landing
   ---
-  Get started
+Landing
   :::
 
   :::u-button

package.json

@@ -70,7 +70,7 @@
     "gsap": "^3.13.0",
     "js-colormaps-es": "^0.0.5",
     "lucide-react": "^0.543.0",
-    "next": ">=15.5.8",
+    "next": ">=15.5.9",
     "next-themes": "^0.4.6",
     "radix-ui": "latest",
     "react": "^19.0.0",