chore: update docs homepage

docs/package.json

@@ -20,6 +20,6 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
-    "@grapp/nextra-theme": "^0.3.8"
+    "@grapp/nextra-theme": "0.4.2"
   }
 }

docs/pages/index.mdx

@@ -1,45 +1,66 @@
-import { Homepage, Hero, Features, Feature } from '@grapp/nextra-theme';
+import { Homepage, Hero, Features, Feature, Highlight } from '@grapp/nextra-theme';
 
-<Homepage 
-  preview="/gifs/hero.gif"
-  hero={
-    <Hero 
-      headline=" A set of tools for creating user interfaces in Neovim"
-      subtitle={
-        <>
-          NuiComponents is a library built on top of{' '}
-          <a
-            href="https://github.com/MunifTanjim/nui.nvim"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]"
-          >
-            nui.nvim
-          </a>, it aims to make UI development in Neovim more accessible, intuitive, and enjoyable.
-        </>
-      }
-    />
-  }
->
-  <Features>
+import NuiComponentsLogo from '../components/svg/nui-components-logo.svg';
+import IconFirework from '../components/svg/icon-firework.svg';
+import IconLayout from '../components/svg/icon-layout.svg';
+import IconCheckbox from '../components/svg/icon-checkbox.svg';
+import IconProcess from '../components/svg/icon-process.svg';
+import IconExtension from '../components/svg/icon-extension.svg';
+
+<Homepage>
+  <Hero 
+    title="A set of tools for creating user interfaces in Neovim"
+    logo={NuiComponentsLogo}
+    description={
+      <>
+        NuiComponents is a library built on top of{' '}
+        <a
+          href="https://github.com/MunifTanjim/nui.nvim"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]"
+        >
+          nui.nvim
+        </a>, it aims to make UI development in Neovim more <Highlight>accessible, intuitive, and enjoyable</Highlight>.
+      </>
+    }
+  >
+  </Hero>
+  <Features preview={
+    <div className="lg:pr-16">
+      <video controls={false} autoPlay={true} muted={true} loop={true} style={{ borderRadius: 8 }}>
+        <source src="/gifs/hero.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  }>
     <Feature
+      icon={IconFirework}
+      color="#ffa10d"
       title="Reactive UI"
       description="The library automatically handles UI updates based on input and events received."
     />
     <Feature
+      icon={IconLayout}
+      color="#00e6cf"
       title="Flexbox"
       description="NuiComponents supports a simple flexbox layout system, which provides a more flexible way to layout UIs."
     />
     <Feature
+      icon={IconCheckbox}
+      color="#e6008a"
       title="State Management"
       description="The library provides a state management system that allows managing data and UI state with ease."
     />
-
     <Feature
+      icon={IconExtension}
+      color="#ba95f6"
       title="Extensibility"
       description="Create your custom components by using Component API."
     />
     <Feature
+      icon={IconProcess}
+      color="#ff433e"
       title="Reusability"
       description="Reuse components between different parts of UI, reduce the amount of code you need to write."
     />

docs/styles.css

@@ -1,7 +1,23 @@
 @import "@grapp/nextra-theme/lib/global.css";
 @import "@grapp/nextra-theme/lib/index.css";
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
-  --grapp-home-preview-max-width: 898px;
+  --grapp-hero-text-column-span: span 4 / span 4;
+  --grapp-features-list-column-span: span 2 / span 2;
+  --grapp-features-preview-column-span: span 2 / span 2;
+  --grapp-features-container-grid-cols: repeat(4, minmax(0, 1fr));
+  --grapp-features-grid-cols: repeat(2, minmax(0, 1fr));
+}
+
+html {
+  article {
+    img {
+      border-radius: 6px;
+    }
+  }
 }
 

docs/theme.config.jsx

@@ -11,11 +11,13 @@ export default getDefaultConfig({
   discord: 'https://discord.gg/Rj2V3keVS4',
   docs: 'https://nui-components.grapp.dev',
   logo: () => {
-    return <Logo image={NuiComponentsLogo} title="nui-components.nvim" />;
+    return <Logo title="nui-components." />;
   },
   footer: () => {
     return (
       <Footer
+        logo={NuiComponentsLogo}
+        description="A feature-rich and highly customizable library for creating user interfaces in Neovim."
         sections={[
           {
             title: 'FAQ',