feat: add pricing route and enhance first pricing section UI with modern design improvements

apps/ui-layout/app/(docs-page)/components/[...slug]/page.tsx

@@ -72,7 +72,7 @@ export default async function DocPage(
     <>
       <div className='lg:container lg:px-0 px-3 mx-auto mt-0 '>
         <div className='flex w-full lg:gap-3'>
-          <section className='xl:mr-0 mr-3 prose mt-[4.34rem] w-full prose-zinc min-w-0 max-w-full pb-5  pt-4 dark:prose-invert prose-h1:text-2xl prose-h1:font-semibold prose-h2:text-2xl prose-h2:my-4  prose-h2:py-1  prose-h2:border-b prose-h3:py-1  prose-h2:mt-3 prose-h2:font-medium prose-h3:text-2xl prose-h3:mt-4 prose-h3:mb-2 prose-h3:font-medium prose-strong:font-medium prose-table:block prose-table:overflow-y-auto lg:pt-4'>
+          <section className='xl:mr-0 mr-3 prose mt-2 w-full prose-zinc min-w-0 max-w-full pb-5 pt-0 dark:prose-invert prose-h1:text-2xl prose-h1:font-semibold prose-h2:text-2xl prose-h2:my-4  prose-h2:py-1  prose-h2:border-b prose-h3:py-1  prose-h2:mt-3 prose-h2:font-medium prose-h3:text-2xl prose-h3:mt-4 prose-h3:mb-2 prose-h3:font-medium prose-strong:font-medium prose-table:block prose-table:overflow-y-auto lg:pt-1'>
             <article className='mb-4 mt-0 rounded-lg dark:bg-black/40  bg-zinc-100  border backdrop-blur-md p-6'>
               <div className='space-y-2 rounded-md dark:text-white text-black'>
                 <h1

apps/ui-layout/app/(docs-page)/get-started/page.mdx

@@ -4,7 +4,7 @@ export const metadata = {
 
 import Footer from '@/components/website/footer';
 
-<div className='mt-24'>
+<div className='mt-4'>
   <h4 className='text-4xl font-semibold'>Introduction</h4>
 </div>
 
@@ -191,4 +191,4 @@ I want to thank https://magicui.design and https://x.com/jakubkrehel for what th
 
 <Footer />
 
-<div className='mb-4'></div>
+<div className='mb-4'></div>

apps/ui-layout/app/(docs-page)/layout.tsx

@@ -12,9 +12,9 @@ export default async function ComponentLayout({
     <>
       <Header />
       <main className='dark:bg-zinc-950 bg-zinc-50 '>
-        <div className='mx-auto   2xl:container xl:w-[96%] lg:w-[98%] w-full lg:grid 2xl:grid-cols-[220px_minmax(0,1fr)] xl:grid-cols-[200px_minmax(0,1fr)] lg:grid-cols-[170px_minmax(0,1fr)] grid-cols-1 lg:gap-3'>
+        <div className='mx-auto 2xl:container xl:w-[96%] lg:w-[98%] w-full lg:grid 2xl:grid-cols-[220px_minmax(0,1fr)] xl:grid-cols-[200px_minmax(0,1fr)] lg:grid-cols-[170px_minmax(0,1fr)] grid-cols-1 lg:gap-3'>
           <DocsSidebar />
-          <div className=' min-w-0 max-w-full'>{children}</div>
+          <div className='min-w-0 max-w-full lg:px-0 px-4'>{children}</div>
         </div>
       </main>
     </>

apps/ui-layout/app/blocks/layout.tsx

@@ -8,7 +8,7 @@ export default async function BlocksLayout({
 }) {
   return (
     <>
-      <HomeHeader className='max-w-screen-xl' />
+      <HomeHeader className='max-w-screen-xl dark:bg-neutral-900 dark:border-neutral-800 bg-neutral-200 border-neutral-300' />
       <main className='dark:bg-zinc-950 bg-zinc-50 not-prose'>{children}</main>
     </>
   );

apps/ui-layout/app/blocks/page.tsx

@@ -1,20 +1,14 @@
 'use client';
-import { useState } from 'react';
-import { motion } from 'motion/react';
 import Link from 'next/link';
 import * as AspectRatio from '@radix-ui/react-aspect-ratio';
 import Image from 'next/image';
-import preview from '@/assets/preview/Preview';
 import { cn } from '@/lib/utils';
 import Footer from '@/components/website/footer';
-import HomeHeader from '@/components/website/home/home-header';
 import { blocksDesign } from '@/configs/blocks-docs';
-import {Card} from "@repo/ui"
 export default function Home() {
   return (
     <>
-      <HomeHeader className='max-w-screen-xl dark:bg-neutral-900 dark:border-neutral-800 bg-neutral-200 border-neutral-300' />
-      <div className='pt-36 pb-5 max-w-screen-2xl mx-auto min-h-screen'>
+      <div className='pt-28 pb-5 max-w-screen-2xl mx-auto min-h-screen'>
         <article className='w-fit mx-auto max-w-4xl text-center space-y-4'>
           <h1 className='text-6xl leading-[100%]'>
             Build Faster with <span className='font-semibold bg-gradient-to-r from-red-500 to-orange-500 bg-clip-text text-transparent'>Premium</span> Quality <span className='font-semibold bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent'>Blocks</span>  For Free. 

apps/ui-layout/app/example/page.tsx

@@ -1,12 +1,23 @@
+import MobileIcons from '@/registry/components/liquid-glass/mobile-icons-liquid';
+import NotificationLiquid from '@/registry/components/liquid-glass/notification';
+import SidebarMenu from '@/registry/components/liquid-glass/sidebar-menu';
+import WeatherLiquid from '@/registry/components/liquid-glass/weather-liquid';
 import React from 'react';
 
 function page() {
   return (
+    <>
     <div className='grid  2xl:grid-cols-[140px_minmax(0,1fr)] mt-6 lg:whitespace-normal whitespace-nowrap'>
       <h1 className='text-8xl py-24 mb-8'>hello</h1>
       <h1 className='text-5xl'>hello</h1>
       <h1 className='xl:block hidden'>Test Heading</h1>
+
     </div>
+    {/* <MobileIcons/>
+    <WeatherLiquid/>
+    <SidebarMenu/> */}
+    <NotificationLiquid/>
+    </>
   );
 }
 

apps/ui-layout/app/globals.css

@@ -205,6 +205,73 @@ body {
   }
 }
 
+@layer utilities {
+  .rainbow-banner-gradient-1 {
+    mask-image:
+      linear-gradient(to bottom, white, transparent),
+      radial-gradient(circle at top center, white, transparent);
+    mask-composite: intersect;
+    animation: moving-banner 16s linear infinite reverse;
+    --start: rgba(0, 87, 255, 0.5);
+    --mid: rgba(255, 0, 166, 0.77);
+    --end: rgba(255, 77, 0, 0.4);
+    --via: rgba(164, 255, 68, 0.4);
+    background-image: repeating-linear-gradient(
+      60deg,
+      var(--end),
+      var(--start) 2%,
+      var(--start) 5%,
+      transparent 8%,
+      transparent 14%,
+      var(--via) 18%,
+      var(--via) 22%,
+      var(--mid) 28%,
+      var(--mid) 30%,
+      var(--via) 34%,
+      var(--via) 36%,
+      transparent,
+      var(--end) calc(50% - 12px)
+    );
+    background-size: 200% 100%;
+    mix-blend-mode: difference;
+  }
+
+  .rainbow-banner-gradient-2 {
+    mask-image:
+      linear-gradient(to bottom, white, transparent),
+      radial-gradient(circle at top center, white, transparent);
+    mask-composite: intersect;
+    animation: moving-banner 20s linear infinite;
+    --start: rgba(255, 120, 120, 0.5);
+    --mid: rgba(36, 188, 255, 0.4);
+    --end: rgba(64, 0, 255, 0.51);
+    --via: rgba(255, 89, 0, 0.56);
+    background-image: repeating-linear-gradient(
+      45deg,
+      var(--end),
+      var(--start) 4%,
+      var(--start) 8%,
+      transparent 9%,
+      transparent 14%,
+      var(--mid) 16%,
+      var(--mid) 20%,
+      transparent,
+      var(--via) 36%,
+      var(--via) 40%,
+      transparent 42%,
+      var(--end) 46%,
+      var(--end) calc(50% - 16.8px)
+    );
+    background-size: 200% 100%;
+    mix-blend-mode: color-dodge;
+  }
+}
+
+@keyframes moving-banner {
+  from { background-position: 0 0; }
+  to { background-position: 200% 0; }
+}
+
 code,
 kbd,
 pre,

apps/ui-layout/app/layout.tsx

@@ -7,6 +7,8 @@ import { GeistMono } from 'geist/font/mono';
 import Progressbar from '@/lib/progressbar';
 import { siteConfig } from '@/lib/utils';
 import { Toaster } from 'sonner';
+import { Banner } from '@/components/website/ui/banner';
+import { ArrowUpRight } from 'lucide-react';
 
 const poppins = Poppins({
   subsets: ['latin'],
@@ -104,6 +106,42 @@ export default async function RootLayout({
           <Progressbar>
             <ThemeProvider attribute='class'>
               <div className='isolate min-h-screen' vaul-drawer-wrapper=''>
+                <a
+                  href={'https://pro.ui-layouts.com'}
+                  target='_blank'
+                  className='block group w-full relative'
+                >
+                  <Banner
+                    variant='rainbow'
+                    className='h-11 md:text-base sm:text-sm text-xs'
+                  >
+                    <p className='group-hover:underline underline-offset-4 flex flex-wrap gap-1 items-center'>
+                      <picture>
+                        <source
+                          srcSet='https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.webp'
+                          type='image/webp'
+                        />
+                        <img
+                          src='https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.gif'
+                          alt='🚀'
+                          className='w-6 h-6'
+                          width='32'
+                          height='32'
+                        />
+                      </picture>
+                      Ship faster with{' '}
+                      <span className='font-semibold'>UI-Layouts Pro</span>
+                      <span className='md:inline-block hidden'>
+                        – 50+ Tailwind & React components for production-ready
+                        UIs
+                      </span>
+                    </p>
+                    <ArrowUpRight
+                      className='size-5 ml-1 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-200 ease-out shrink-0'
+                      strokeWidth={2}
+                    />
+                  </Banner>
+                </a>
                 {children}
               </div>
               <Toaster />

apps/ui-layout/app/page.tsx

@@ -5,7 +5,7 @@ import HomeHeader from '@/components/website/home/home-header';
 export default function Home() {
   return (
     <>
-      <HomeHeader className='lg:container' />
+      <HomeHeader />
       <main className='relative  pb-8'>
         <HeroSec />
         <HomeFooter />