feat: add installation progressive-blur, update header

Author: ibelick

app/docs/progressive-blur/page.mdx

@@ -8,6 +8,7 @@ import { ProgressiveBlurBasic } from './progressive-blur-basic';
 import { ProgressiveBlurHover } from './progressive-blur-hover';
 import { ProgressiveBlurSlider } from './progressive-blur-slider';
 import ComponentCodePreview from '@/components/website/component-code-preview';
+import CodeBlock from '@/components/website/code-block';
 
 # Progressive blur
 
@@ -38,6 +39,41 @@ You can change the direction of the blur effect with the `direction` prop.
   filePath='app/docs/progressive-blur/progressive-blur-slider.tsx'
 />
 
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value='cli'>CLI</TabsTrigger>
+  <TabsTrigger value='manual'>Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+<CodeBlock
+  code={`npx shadcn add "https://motion-primitives.com/c/progressive-blur.json"`}
+  lang='bash'
+  className='h-[52px]'
+/>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<CodeBlock filePath='components/core/progressive-blur.tsx' />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
 ## Component API
 
 ### ProgressiveBlur

app/page.tsx

@@ -64,7 +64,7 @@ function Header() {
               href='https://pro.motion-primitives.com/'
               target='_blank'
               rel='noopener noreferrer'
-              className='inline-flex items-center text-sm font-medium text-zinc-700 hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-white'
+              className='hidden items-center text-sm font-medium text-zinc-700 hover:text-zinc-950 md:inline-flex dark:text-zinc-300 dark:hover:text-white'
             >
               Advanced
               <ProBadge />

components/website/header.tsx

@@ -41,7 +41,7 @@ export function Header() {
               href='https://pro.motion-primitives.com/'
               target='_blank'
               rel='noopener noreferrer'
-              className='inline-flex items-center text-sm font-medium text-zinc-700 hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-white'
+              className='hidden items-center text-sm font-medium text-zinc-700 hover:text-zinc-950 md:inline-flex dark:text-zinc-300 dark:hover:text-white'
             >
               Advanced
               <ProBadge />