update hero docs

docs/assets/css/main.css

@@ -71,6 +71,30 @@
   animation: star-wiggle 1.8s ease-in-out infinite;
 }
 
+/* Hero gradient background */
+
+.hero-gradient {
+  position: relative;
+}
+
+.hero-gradient::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: radial-gradient(ellipse 80% 60% at 50% -10%,
+    color-mix(in srgb, #90CAF9 25%, transparent),
+    transparent 70%
+  );
+}
+
+.dark .hero-gradient::before {
+  background: radial-gradient(ellipse 80% 50% at 50% 30%,
+    color-mix(in srgb, #5E35B1 30%, transparent),
+    transparent 70%
+  );
+}
+
 @keyframes star-wiggle {
   0% {
     transform: rotate(0deg) scale(1);
@@ -88,3 +112,7 @@
     transform: rotate(0deg) scale(1);
   }
 }
+
+.text-cta {
+  @apply bg-linear-to-r from-pink-500 to-yellow-500 text-transparent bg-clip-text font-semibold;
+}

docs/content/1.getting-started/2.introduction.md

@@ -1,14 +1,14 @@
 ---
 title: Introduction
-description: Welcome to Browzarr's documentation.
+description: What is Browzarr?
 navigation:
   icon: i-lucide-soup
 seo:
   title: Introduction
-  description: Welcome to Browzarr's documentation.
+  description: What is Browzarr?
 ---
 
-Welcome to **Browzarr**'s documentation. Although, `browzarr.io` user's interface is pretty intuitive, there are plenty of features that deserve some dedicated space for a longer explanation. But first,
+Although the `browzarr.io` user interface is pretty intuitive, there are plenty of features that deserve some dedicated space for a longer explanation. But first,
 
 ## What is Browzarr?
 

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

@@ -7,6 +7,35 @@ seo:
   description: User Interface.
 ---
 
+## npm (offline)
+
+Install once, run anytime - no internet required after install:
+
+```bash
+npm install -g browzarr
+```
+
+Then launch:
+
+```bash
+browzarr
+```
+
+On a custom port:
+
+```bash
+browzarr --port 8080
+# or via environment variable (macOS/Linux)
+PORT=8080 browzarr
+# Windows PowerShell
+$env:PORT=8080; browzarr
+# Windows CMD
+set "PORT=8080" && browzarr
+```
+
+By default, Browzarr starts on port `3000`. If that port is already in use, it will automatically try the next available one.
+
+
 ## Main menu
 
 ::steps

docs/content/index.md

@@ -1,27 +1,36 @@
 ---
 seo:
   title: browzarr.io
-  description: A powerful, browser-native framework for visualizing, exploring, and analyzing Zarr data stores.
+  description: A powerful, browser-native framework for visualizing, exploring, and analyzing Zarr and NetCDF datasets.
 ---
 
 ::u-page-hero
 #title
-Browzarr
+Explore your data with [Browzarr]{.text-cta}
 
 #description
-A powerful, browser-native framework for exploring and analyzing Zarr and NetCDF datasets.
-
-Load multi-dimensional datasets in the browser, slice and inspect data interactively, and gain insights without any backend or server setup.
+A powerful framework for visualizing, exploring, and analyzing **Zarr and NetCDF datasets** — runs entirely in the browser, whether your data is local or in the cloud.
 
 #links
+  :::u-button
+  ---
+  size: xl
+  to: https://browzarr.io/
+  icon: i-lucide-globe
+  target: _blank
+  class: "!bg-transparent !shadow-lg bg-linear-to-tr from-pink-500 to-yellow-500 text-white hover:opacity-90"
+  ---
+  Try it online
+  :::
+
   :::u-button
   ---
   color: neutral
   size: xl
   to: /getting-started/landing
   trailing-icon: i-lucide-plane-landing
   ---
-Landing
+  Get started
   :::
 
   :::u-button
@@ -30,20 +39,60 @@ Landing
   icon: simple-icons-github
   size: xl
   to: https://github.com/EarthyScience/Browzarr
+  target: _blank
   variant: outline
   ---
   Give us a Star :icon{name="i-ph-star-fill" class="icon-md star-halo-wrapper" style="color: #f59e0b"}
   :::
+::
 
-  :::u-button
+::u-page-section
+---
+class: "hero-gradient"
+---
+#title
+Install & run anywhere
+
+#description
+Use Browzarr online with no setup, or run it fully [offline]{.text-primary} via [npm](https://nodejs.org/en/download){target="_blank"} or [Julia](https://julialang.org/downloads/){target="_blank"}.
+
+#features
+  :::u-page-feature
   ---
-  color: warning
-  icon: i-lucide-box
-  size: xl
-  to: https://browzarr.io/
-  variant: outline
+  icon: i-lucide-globe
+  to: https://browzarr.io
+  target: _blank
+  class: "ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl p-4 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-200"
   ---
-  browzarr.io
+  #title
+  [Online]{.text-primary} — [ No Install ]
+  #description
+  Open browzarr.io in any browser. Load local or remote Zarr and NetCDF files instantly.
+  :::
+
+  :::u-page-feature
+  ---
+  icon: simple-icons-npm
+  to: /getting-started/landing#npm
+  class: "ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl p-4 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-200"
+  ---
+  #title
+  [npm]{.text-primary} — [ Offline ]
+  #description
+  `npm install -g browzarr` then run `browzarr` anytime, no internet needed.
+  :::
+
+  :::u-page-feature
+  ---
+  icon: simple-icons-julia
+  to: https://github.com/EarthyScience/Browzarr.jl
+  target: _blank
+  class: "ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl p-4 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-200"
+  ---
+  #title
+  [ Browzarr.jl]{.text-primary} — [ Offline ]
+  #description
+  `Pkg.add("Browzarr")` then `using Browzarr` and call `browzarr()` with a local path or remote store URL.
   :::
 ::
 
@@ -55,14 +104,12 @@ Explore your data in different ways
   :::u-page-feature
   ---
   icon: i-lucide-box
-  target: _blank
   to: /essentials/plot-settings
   ---
   #title
   Visualize a [Cube]{.text-secondary}
-
   #description
-  Your data is spatio-temporal? then you could start by looking at it as a data cube.
+  Your data is spatio-temporal? Start by exploring it as an interactive 3D data cube.
   :::
 
   :::u-page-feature
@@ -72,9 +119,8 @@ Explore your data in different ways
   ---
   #title
   Project onto a [Sphere]{.text-primary}
-
   #description
-  A traditional, normal sphere also works!
+  Render data on a traditional 3D globe for spatial context.
   :::
 
   :::u-page-feature
@@ -84,9 +130,8 @@ Explore your data in different ways
   ---
   #title
   Flat [map]{.text-primary}
-
   #description
-  Rectangular flat maps are also in the menu.
+  Rectangular 2D projections for classic cartographic views.
   :::
 
   :::u-page-feature
@@ -96,9 +141,8 @@ Explore your data in different ways
   ---
   #title
   Plot [time series]{.text-primary}
-
   #description
-  Select a pixel in any direction and plot a time series.
+  Select any pixel in any direction and plot its values over time.
   :::
 
   :::u-page-feature
@@ -107,10 +151,9 @@ Explore your data in different ways
   to: /essentials/plot-settings
   ---
   #title
-  Explore [point-clouds]{.text-primary}
-
+  Explore [point clouds]{.text-primary}
   #description
-  Want more? explore your data using point clouds.
+  Visualize high-density spatial data as interactive point clouds.
   :::
 
   :::u-page-feature
@@ -119,9 +162,8 @@ Explore your data in different ways
   to: /essentials/plot-settings
   ---
   #title
-  Perform [analytics]{.text-primary}
-
+  Run [analytics]{.text-primary}
   #description
-  Seeing is not enough? want to gain extra insights? then analyze your data by enabling WebGPU!
+  Enable WebGPU for accelerated computation and deeper insights.
   :::
 ::

docs/nuxt.config.ts

@@ -6,7 +6,7 @@ export default defineNuxtConfig({
   css: ['~/assets/css/main.css'],
 
   site: {
-    name: 'docs'
+    name: 'Browzarr Documentation'
   },
 
   // Disable server-only modules