Merge branch 'main' into feat/pagination

feat(web): Optimize SEO (#1260 )
chore(web): Update Carbon ID
2025-10-27 05:29:03 +08:00 · 2025-04-24 18:28:47 +02:00 · 2025-04-24 18:22:15 +02:00 · 2025-04-24 16:31:45 +02:00 · 2025-04-24 16:31:07 +02:00 · 2025-04-24 16:13:42 +02:00
14 changed files with 1938 additions and 208 deletions
--- a/SEO.md
+++ b/SEO.md
@@ -0,0 +1,916 @@
 # Dashboard Icons SEO Audit 2025
 ## Overview
 This document presents a comprehensive SEO audit for the Dashboard Icons website built with Next.js 15.3. The audit analyzes current implementation and provides detailed recommendations based on the latest Next.js best practices for optimal search engine visibility and performance.
 ## Table of Contents
 - [Current Implementation Assessment](#current-implementation-assessment)
 - [Metadata Implementation](#metadata-implementation)
 - [SEO Optimization Checklist](#seo-optimization-checklist)
 - [Technical SEO](#technical-seo)
 - [Performance Optimization](#performance-optimization)
 - [Content and User Experience](#content-and-user-experience)
 - [Mobile Optimization](#mobile-optimization)
 - [Advanced Next.js 15.3 SEO Features](#advanced-nextjs-153-seo-features)
 - [Recommendations](#recommendations)
 - [Conclusion](#conclusion)
 - [References](#references)
 ## Current Implementation Assessment
 The Dashboard Icons project currently implements several good SEO practices:
 - [x] Basic metadata configuration in layout.tsx and page.tsx files
 - [x] Dynamic title and description generation with appropriate keyword inclusion
 - [x] Open Graph tags for social sharing with proper image dimensions
 - [x] Twitter Card metadata implementation for social visibility
 - [x] Proper use of semantic HTML elements for content structure
 - [x] Server-side rendering for improved indexing and crawler access
 - [x] Canonical URLs properly configured across page types
 - [x] Image optimization with next/image component for improved Core Web Vitals
 However, there are several opportunities for improvement:
 - [ ] No robots.txt implementation for directing crawler behavior
 - [ ] Missing XML sitemap for improved content discovery
 - [ ] No structured data (JSON-LD) for enhanced search results
 - [ ] Limited use of advanced Next.js 15.3 metadata features
 - [ ] Missing breadcrumb navigation for enhanced user experience and SEO
 - [ ] No dynamic OG images for improved social sharing
 ## Metadata Implementation
 The project uses Next.js App Router's built-in metadata API effectively across different page types:
 ### Root Layout Metadata Analysis
 In `layout.tsx`, the site establishes global metadata that provides a solid foundation:
 ```typescript
 // In layout.tsx
 export async function generateMetadata(): Promise<Metadata> {
  const { totalIcons } = await getTotalIcons()
  return {
    metadataBase: new URL(WEB_URL),
    title: websiteTitle,
    description: getDescription(totalIcons),
    keywords: ["dashboard icons", "service icons", "application icons", "tool icons", "web dashboard", "app directory"],
    robots: {
      index: true,
      follow: true,
      googleBot: "index, follow",
    },
    openGraph: {
      siteName: WEB_URL,
      title: websiteTitle,
      url: BASE_URL,
      description: getDescription(totalIcons),
      images: [
        {
          url: "/og-image.png",
          width: 1200,
          height: 630,
          alt: "Dashboard Icons - Dashboard icons for self hosted services",
          type: "image/png",
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: WEB_URL,
      description: getDescription(totalIcons),
      images: ["/og-image.png"],
    },
    applicationName: WEB_URL,
    alternates: {
      canonical: BASE_URL,
    },
    // Additional configurations...
  }
 }
 ```
 **Strengths:**
 - Properly sets metadataBase for all relative URLs
 - Includes comprehensive metadata for SEO and social sharing
 - Dynamically generates description based on content (totalIcons)
 - Properly configures robots directives
 **Areas for improvement:**
 - The `websiteTitle` ("Free Dashboard Icons - Download High-Quality UI & App Icons") could be more specific
 - The OpenGraph URL points to BASE_URL (CDN) rather than WEB_URL (the actual site)
 - Twitter title uses WEB_URL instead of an actual title
 - Missing locale information for international SEO
 ### Page-Specific Metadata Analysis
 For individual icon pages, metadata is comprehensively generated based on icon data:
 ```typescript
 // In [icon]/page.tsx
 export async function generateMetadata({ params, searchParams }: Props, parent: ResolvingMetadata): Promise<Metadata> {
  const { icon } = await params
  const iconsData = await getAllIcons()
  // ...processing code...
  const formattedIconName = icon
    .split("-")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ")
  return {
    title: `${formattedIconName} Icon | Dashboard Icons`,
    description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons...`,
    openGraph: {
      title: `${formattedIconName} Icon | Dashboard Icons`,
      description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE...`,
      type: "article",
      url: pageUrl,
      authors: [authorName],
      publishedTime: updateDate.toISOString(),
      modifiedTime: updateDate.toISOString(),
      section: "Icons",
      tags: [formattedIconName, "dashboard icon", "service icon", ...],
    },
    twitter: {
      card: "summary_large_image",
      title: `${formattedIconName} Icon | Dashboard Icons`,
      description: `Download the ${formattedIconName} icon...`,
      images: [iconImageUrl],
    },
    alternates: {
      canonical: pageUrl,
      media: {
        png: iconImageUrl,
        svg: `${BASE_URL}/svg/${icon}.svg`,
        webp: `${BASE_URL}/webp/${icon}.webp`,
      },
    },
  }
 }
 ```
 **Strengths:**
 - Excellent dynamic title generation with proper formatting
 - Comprehensive description with icon-specific information
 - Proper OpenGraph article configuration with author and timestamp data
 - Well-structured alternates configuration for different media types
 - Good keyword inclusion in meta tags
 **Areas for improvement:**
 - Could benefit from structured data for product/image entity
 - Could implement dynamic OG images with the ImageResponse API
 ### Icons Browse Page Metadata Analysis
 The icons browse page implements specific metadata optimized for its purpose:
 ```typescript
 // In icons/page.tsx
 export async function generateMetadata(): Promise<Metadata> {
  const icons = await getIconsArray()
  const totalIcons = icons.length
  return {
    title: "Browse Icons | Free Dashboard Icons",
    description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools...`,
    keywords: [
      "browse icons",
      "dashboard icons",
      "icon search",
      // ...
    ],
    openGraph: {
      title: "Browse Icons | Free Dashboard Icons",
      description: `Search and browse through our collection of ${totalIcons} curated icons...`,
      // ...
    },
    // Additional configurations...
  }
 }
 ```
 **Strengths:**
 - Clear, purpose-driven title
 - Dynamic description that includes the collection size
 - Relevant keywords for the browse page functionality
 **Areas for improvement:**
 - Could implement pagination metadata (prev/next) if applicable
 - Missing structured data for collection/gallery
 ## SEO Optimization Checklist
 ### Metadata and Head Tags
 - [x] Page titles are unique, descriptive, and include keywords
 - [x] Meta descriptions are compelling and keyword-rich (under 160 characters)
 - [x] Open Graph tags are implemented for social sharing
 - [x] Twitter Card metadata is implemented
 - [x] Canonical URLs are properly set
 - [ ] Structured data/JSON-LD for rich snippets
 - [x] Properly configured viewport meta tag
 - [x] Favicon and apple-touch-icon are set
 - [x] Keywords meta tag is implemented (though not as influential for rankings as before)
 - [ ] Language and locale information (hreflang) for international SEO
 ### Indexation and Crawling
 - [x] Server-side rendering for improved indexability
 - [ ] robots.txt file implementation
 - [ ] XML sitemap generation
 - [x] Proper HTTP status codes (200, 404, etc.)
 - [x] Internal linking structure
 - [ ] Pagination handling with proper rel="next" and rel="prev" tags
 - [ ] Implementation of dynamic sitemap with Next.js 15.3 file-based API
 ### Content Structure
 - [x] Clean URL structure (`/icons/[icon]`)
 - [x] Semantic HTML headings (h1, h2, etc.)
 - [x] Content hierarchy matches visual hierarchy
 - [ ] Breadcrumb navigation for improved user experience and crawlability
 - [ ] Schema.org markup for content types
 ## Technical SEO
 ### Server-side Rendering and Static Generation
 The project effectively uses Next.js App Router to implement:
 - **Static Generation (SSG)** for homepage and catalog pages, providing fast initial load times and improved indexability
 - **Server-Side Rendering (SSR)** for dynamic content, ensuring fresh content is always accessible to crawlers
 - **Incremental Static Regeneration (ISR)** potential for optimal performance and content freshness
 These approaches ensure search engines can properly crawl and index content while providing optimal performance.
 ### Dynamic Routes Implementation
 Dynamic routes like `/icons/[icon]` are properly implemented with `generateStaticParams` to pre-render paths at build time:
 ```typescript
 export async function generateStaticParams() {
  const iconsData = await getAllIcons()
  return Object.keys(iconsData).map((icon) => ({
    icon,
  }))
 }
 ```
 This approach ensures all icon pages are pre-rendered during build time, optimizing both performance and SEO by making all content immediately available to search engine crawlers without requiring JavaScript execution.
 ### Missing Critical Components
 #### robots.txt Implementation
 Currently missing a robots.txt file which is essential for directing search engine crawlers. Next.js 15.3 offers a file-based API that should be implemented:
 ```typescript
 // app/robots.ts
 import { MetadataRoute } from 'next'
 export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
    },
    sitemap: 'https://dashboardicons.com/sitemap.xml',
  }
 }
 ```
 #### sitemap.xml Implementation
 No sitemap implementation was found. A sitemap is critical for search engines to discover and index all pages efficiently. Next.js 15.3's file-based API makes this easy to implement:
 ```typescript
 // app/sitemap.ts
 import { MetadataRoute } from 'next'
 import { getAllIcons } from '@/lib/api'
 import { BASE_URL, WEB_URL } from '@/constants'
 export default async function sitemap(): MetadataRoute.Sitemap {
  const iconsData = await getAllIcons()
  const lastModified = new Date()
  // Base routes
  const routes = [
    {
      url: WEB_URL,
      lastModified,
      changeFrequency: 'weekly',
      priority: 1.0,
    },
    {
      url: `${WEB_URL}/icons`,
      lastModified,
      changeFrequency: 'daily',
      priority: 0.9,
    },
    // Other static routes
  ]
  // Icon routes
  const iconRoutes = Object.keys(iconsData).map((icon) => ({
    url: `${WEB_URL}/icons/${icon}`,
    lastModified: new Date(iconsData[icon].update.timestamp),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
  }))
  return [...routes, ...iconRoutes]
 }
 ```
 For larger icon collections, Next.js 15.3 supports `generateSitemaps` for creating multiple sitemap files:
 ```typescript
 // app/sitemap.ts
 export async function generateSitemaps() {
  const totalIcons = await getTotalIconCount()
  // Google's limit is 50,000 URLs per sitemap
  const sitemapsNeeded = Math.ceil(totalIcons / 50000)
  return Array.from({ length: sitemapsNeeded }, (_, i) => ({ id: i }))
 }
 export default async function sitemap({ id }: { id: number }): Promise<MetadataRoute.Sitemap> {
  // Fetch icons for this specific sitemap segment
  // ...implementation
 }
 ```
 #### JSON-LD Structured Data
 Missing structured data for improved search results appearance. For icon pages, implement ImageObject schema:
 ```typescript
 // In [icon]/page.tsx component
 import { JsonLd } from 'next-seo';
 // Within component return statement
 return (
  <>
    <JsonLd
      type="ImageObject"
      data={{
        '@context': 'https://schema.org',
        '@type': 'ImageObject',
        name: `${formattedIconName} Icon`,
        description: `Dashboard icon for ${formattedIconName}`,
        contentUrl: `${BASE_URL}/png/${icon}.png`,
        license: 'https://creativecommons.org/licenses/by-sa/4.0/',
        acquireLicensePage: `${WEB_URL}/icons/${icon}`,
        creditText: `Dashboard Icons`,
        creator: {
          '@type': 'Person',
          name: authorData.name || authorData.login
        }
      }}
    />
    <IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
  </>
 )
 ```
 For the homepage, implement Organization schema:
 ```typescript
 // In layout.tsx or page.tsx
 import { JsonLd } from 'next-seo';
 // Within component return statement
 <JsonLd
  type="Organization"
  data={{
    '@context': 'https://schema.org',
    '@type': 'Organization',
    name: 'Dashboard Icons',
    url: WEB_URL,
    logo: `${WEB_URL}/logo.png`,
    description: 'Collection of free icons for self-hosted dashboards and services',
    sameAs: [
      REPO_PATH,
      // Social media links if available
    ]
  }}
 />
 ```
 ## Performance Optimization
 ### Core Web Vitals
 Performance is a crucial SEO factor. Current implementation has:
 - [x] Image optimization through next/image (reduces LCP)
 - [x] Font optimization with the Inter variable font
 - [ ] Proper lazy loading of below-the-fold content
 - [ ] Optimized Cumulative Layout Shift (CLS)
 - [ ] Interaction to Next Paint (INP) optimization
 ### Detailed Recommendations
 #### 1. Image Optimization
 - **Priority attribute**: Add priority attribute to critical above-the-fold images:
  ```tsx
  <Image 
    src="/hero-image.jpg" 
    alt="Dashboard Icons" 
    width={1200} 
    height={630} 
    priority 
  />
  ```
 - **Size optimization**: Ensure images use appropriate sizes for their display contexts:
  ```tsx
  <Image 
    src={`${BASE_URL}/png/${icon}.png`}
    alt={`${formattedIconName} icon`} 
    width={64} 
    height={64} 
    sizes="(max-width: 640px) 32px, (max-width: 1024px) 48px, 64px" 
  />
  ```
 #### 2. JavaScript Optimization
 - **Use dynamic imports**: Implement dynamic imports for non-critical components:
  ```tsx
  import dynamic from 'next/dynamic'
  const IconGrid = dynamic(() => import('@/components/IconGrid'), {
    loading: () => <p>Loading icons...</p>,
  })
  ```
 - **Component-level code splitting**: Break large components into smaller, more manageable pieces
 #### 3. Core Web Vitals Focus
 - **LCP Optimization**:
  - Preload critical resources
  - Optimize server response time
  - Prioritize above-the-fold content rendering
 - **CLS Minimization**:
  - Reserve space for dynamic content
  - Define explicit width/height for images and embeds
  - Avoid inserting content above existing content
 - **INP Improvement**:
  - Optimize event handlers
  - Use debouncing for input-related events
  - Avoid long-running JavaScript tasks
 ## Content and User Experience
 - [x] Clean, semantic HTML structure 
 - [x] Clear content hierarchy with proper heading tags
 - [ ] Comprehensive alt text for all images
 - [x] Mobile-friendly responsive design
 - [ ] Breadcrumb navigation for improved user experience and SEO
 - [ ] Related icons section for internal linking and improved user engagement
 ### Recommended Content Improvements
 #### Breadcrumb Navigation
 Implement structured breadcrumb navigation with Schema.org markup:
 ```tsx
 // components/Breadcrumbs.tsx
 import Link from 'next/link'
 import { JsonLd } from 'next-seo'
 interface BreadcrumbItem {
  name: string
  url: string
 }
 export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
  return (
    <>
      <JsonLd
        type="BreadcrumbList"
        data={{
          '@context': 'https://schema.org',
          '@type': 'BreadcrumbList',
          itemListElement: items.map((item, index) => ({
            '@type': 'ListItem',
            position: index + 1,
            name: item.name,
            item: item.url,
          })),
        }}
      />
      <nav aria-label="Breadcrumb" className="breadcrumbs">
        <ol>
          {items.map((item, index) => (
            <li key={item.url}>
              {index < items.length - 1 ? (
                <Link href={item.url}>{item.name}</Link>
              ) : (
                <span aria-current="page">{item.name}</span>
              )}
            </li>
          ))}
        </ol>
      </nav>
    </>
  )
 }
 ```
 #### Related Icons Section
 Add a related icons section to improve internal linking and user engagement:
 ```tsx
 // components/RelatedIcons.tsx
 import Link from 'next/link'
 import Image from 'next/image'
 import { BASE_URL } from '@/constants'
 export function RelatedIcons({ 
  currentIcon, 
  similarIcons 
 }: { 
  currentIcon: string, 
  similarIcons: string[] 
 }) {
  return (
    <section aria-labelledby="related-icons-heading">
      <h2 id="related-icons-heading">Related Icons</h2>
      <div className="icon-grid">
        {similarIcons.map(icon => (
          <Link 
            key={icon} 
            href={`/icons/${icon}`}
            className="icon-card"
          >
            <Image
              src={`${BASE_URL}/png/${icon}.png`}
              alt={`${icon.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')} icon`}
              width={48}
              height={48}
            />
            <span>{icon.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}</span>
          </Link>
        ))}
      </div>
    </section>
  )
 }
 ```
 ## Mobile Optimization
 - [x] Responsive design with fluid layouts
 - [x] Appropriate viewport configuration:
  ```html
  <meta name="viewport" content="width=device-width, initial-scale=1, minimumScale=1, maximumScale=5, userScalable=true, themeColor=#ffffff, viewportFit=cover" />
  ```
 - [ ] Touch-friendly navigation and interface elements (minimum 44x44px tap targets)
 - [ ] Mobile page speed optimization (reduced JavaScript, optimized images)
 ### Mobile-Specific Recommendations
 1. **Implement mobile-specific image handling**:
   ```tsx
   <Image
     src={`${BASE_URL}/png/${icon}.png`}
     alt={`${formattedIconName} icon`}
     width={64}
     height={64}
     sizes="(max-width: 480px) 32px, 64px"
     quality={90}
   />
   ```
 2. **Enhanced touch targets for mobile**:
   ```css
   @media (max-width: 768px) {
     .nav-link, .button, .interactive-element {
       min-height: 44px;
       min-width: 44px;
       padding: 12px;
     }
   }
   ```
 3. **Simplified navigation for mobile**:
   Implement a hamburger menu or collapsible navigation for mobile devices
 ## Advanced Next.js 15.3 SEO Features
 Next.js 15.3 offers enhanced SEO features that should be implemented:
 ### Dynamic OG Images
 Implement dynamic Open Graph images using the ImageResponse API:
 ```typescript
 // app/icons/[icon]/opengraph-image.tsx
 import { ImageResponse } from 'next/og'
 import { getAllIcons } from '@/lib/api'
 import { BASE_URL } from '@/constants'
 export const runtime = 'edge'
 export const alt = 'Dashboard Icon Preview'
 export const size = { width: 1200, height: 630 }
 export const contentType = 'image/png'
 export default async function OgImage({ params }: { params: { icon: string } }) {
  const { icon } = params
  const iconsData = await getAllIcons()
  const iconData = iconsData[icon]
  if (!iconData) {
    return new ImageResponse(
      (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
            height: '100%',
            backgroundColor: '#f8fafc',
            color: '#334155',
            fontFamily: 'sans-serif',
          }}
        >
          <h1 style={{ fontSize: 64 }}>Icon Not Found</h1>
        </div>
      )
    )
  }
  const formattedIconName = icon
    .split('-')
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: '100%',
          height: '100%',
          backgroundColor: '#f8fafc',
          color: '#334155',
          fontFamily: 'sans-serif',
          padding: 40,
        }}
      >
        <img
          src={`${BASE_URL}/png/${icon}.png`}
          width={200}
          height={200}
          alt={`${formattedIconName} icon`}
          style={{ marginBottom: 40 }}
        />
        <h1 style={{ fontSize: 64, marginBottom: 20, textAlign: 'center' }}>
          {formattedIconName} Icon
        </h1>
        <p style={{ fontSize: 32, textAlign: 'center' }}>
          Free download in SVG, PNG, and WEBP formats
        </p>
      </div>
    )
  )
 }
 ```
 ### Next.js Route Segments for SEO
 Utilize route segment config options to optimize SEO aspects:
 ```typescript
 // app/icons/[icon]/page.tsx
 export const dynamic = 'force-static' // Ensure static generation even with dynamic data fetching
 export const revalidate = 3600 // Revalidate content every hour
 export const fetchCache = 'force-cache' // Enforce caching of fetched data
 export const generateStaticParams = async () => {
  // Generate static paths for all icons
  const iconsData = await getAllIcons()
  return Object.keys(iconsData).map((icon) => ({ icon }))
 }
 ```
 ### Advanced Caching Strategies
 Implement advanced caching with revalidation tags for dynamic content:
 ```typescript
 // lib/api.ts
 import { cache, revalidateTag } from 'next/cache'
 // Cache API calls using tags
 export const getTotalIcons = cache(
  async () => {
    const response = await fetch(METADATA_URL, {
      next: { tags: ['icons-metadata'] },
    })
    const data = await response.json()
    return { totalIcons: Object.keys(data).length }
  }
 )
 // Function to trigger revalidation when new icons are added
 export async function revalidateIconsCache() {
  revalidateTag('icons-metadata')
 }
 ```
 ## Recommendations
 ### Immediate (High Impact/Low Effort)
 1. **Create robots.txt**
   - Implement a file-based robots.txt using Next.js 15.3 API
   - Include sitemap reference
   ```typescript
   // app/robots.ts
   import { MetadataRoute } from 'next'
   export default function robots(): MetadataRoute.Robots {
     return {
       rules: {
         userAgent: '*',
         allow: '/',
       },
       sitemap: 'https://dashboardicons.com/sitemap.xml',
     }
   }
   ```
 2. **Generate XML Sitemap**
   - Create a dynamic sitemap.xml file using Next.js 15.3 file-based API
   - Include changefreq and priority attributes
   - Implement sitemap index for large icon collections
   ```typescript
   // app/sitemap.ts
   import { MetadataRoute } from 'next'
   import { getAllIcons } from '@/lib/api'
   import { WEB_URL } from '@/constants'
   export default async function sitemap(): MetadataRoute.Sitemap {
     const iconsData = await getAllIcons()
     // Implementation as shown in Technical SEO section
   }
   ```
 3. **Add Structured Data**
   - Implement JSON-LD for icon pages (ImageObject schema)
   - Add WebSite schema to the homepage
   - Include BreadcrumbList schema for navigation
   ```typescript
   // app/layout.tsx
   import { JsonLd } from 'next-seo'
   // In component return
   <JsonLd
     type="WebSite"
     data={{
       '@context': 'https://schema.org',
       '@type': 'WebSite',
       name: 'Dashboard Icons',
       url: WEB_URL,
       description: getDescription(totalIcons),
       potentialAction: {
         '@type': 'SearchAction',
         target: `${WEB_URL}/icons?q={search_term_string}`,
         'query-input': 'required name=search_term_string'
       }
     }}
   />
   ```
 4. **Enhance Internal Linking**
   - Implement breadcrumb navigation
   - Add "related icons" or "similar icons" sections
   - Create more internal links between icon categories or tags
 ### Medium-term Improvements
 1. **Performance Optimization**
   - Implement priority attribute for critical images
   - Optimize component-level code splitting
   - Refine Largest Contentful Paint (LCP) elements
 2. **Enhanced Metadata**
   - Implement dynamic OG images with the ImageResponse API
   - Add more specific structured data for each icon category
   - Implement comprehensive hreflang tags if multilingual support is added
 3. **Content Enhancement**
   - Add more descriptive text for each icon
   - Include usage examples and contexts
   - Improve alt text for all images with detailed descriptions
 ### Long-term Strategy
 1. **Advanced Metrics Tracking**
   - Implement Real User Monitoring (RUM)
   - Set up Core Web Vitals tracking in the field
   - Establish regular SEO audit cycles
 2. **Enhanced User Experience**
   - Implement advanced search functionality with filtering options
   - Add user collections/favorites feature
   - Develop a comprehensive filtering system by icon type, style, color, etc.
 3. **Content Expansion**
   - Add tutorials on how to use the icons
   - Create themed icon collections
   - Implement a blog for icon design tips and updates
 ## Conclusion
 ### Overall SEO Health Assessment
 The Dashboard Icons website currently implements many SEO best practices through Next.js 15.3's App Router features. The project demonstrates strong implementation of:
 - Metadata configuration with the built-in Metadata API
 - Dynamic generation of page-specific metadata
 - Open Graph and Twitter Card integration
 - Server-side rendering and static generation
 - Proper canonical URL management
 - Clean, semantic HTML structure
 - Responsive design for mobile devices
 However, several critical components are missing that would significantly improve search engine visibility:
 1. **Missing Technical Components**:
   - No robots.txt file
   - No XML sitemap
   - No structured data (JSON-LD)
   - Limited use of Next.js 15.3's advanced features
 2. **Performance Optimization Gaps**:
   - Missing priority attributes on critical images
   - Limited implementation of advanced caching strategies
   - Potential Core Web Vitals optimizations
 3. **Enhanced User Experience Opportunities**:
   - No breadcrumb navigation
   - Limited internal linking between related icons
   - Missing advanced search and filtering capabilities
 ### SEO Implementation Score
 | Category | Score | Notes |
 |----------|-------|-------|
 | Metadata Implementation | 8/10 | Strong implementation, missing structured data |
 | Technical SEO | 6/10 | Missing robots.txt and sitemap |
 | Performance | 7/10 | Good image optimization, room for improvement |
 | Content Structure | 7/10 | Semantic HTML present, needs better internal linking |
 | Mobile Optimization | 8/10 | Responsive design, opportunity for touch optimizations |
 | Next.js 15.3 Features | 5/10 | Not utilizing latest features like dynamic OG images |
 | Overall | 6.8/10 | Good foundation, specific improvements needed |
 ### Priority Action Items
 1. **Immediate (High Impact/Low Effort)**:
   - Create robots.txt file using file-based API
   - Generate XML sitemap with Next.js 15.3 API
   - Add JSON-LD structured data to all page types
 2. **Short-term (Medium Impact)**:
   - Optimize Core Web Vitals (LCP, CLS, INP)
   - Add priority attribute to above-the-fold images
   - Implement breadcrumb navigation with schema
 3. **Long-term (Strategic)**:
   - Implement dynamic OG images with ImageResponse API
   - Add more descriptive content for each icon
   - Develop a comprehensive internal linking strategy
   - Consider content expansion with tutorials and icon usage guides
 By implementing these SEO improvements, Dashboard Icons will significantly enhance its search engine visibility, user experience, and overall organic traffic growth potential. The existing implementation provides a solid foundation, and these targeted enhancements will help maximize the site's search performance in an increasingly competitive landscape.
 ## References
 1. [Next.js 15.3 Metadata API Documentation](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
 2. [Google's SEO Starter Guide](https://developers.google.com/search/docs/fundamentals/seo-starter-guide)
 3. [Next.js File-Based Metadata](https://nextjs.org/docs/app/api-reference/file-conventions/metadata)
 4. [Core Web Vitals - Google Web Dev](https://web.dev/articles/vitals)
 5. [Schema.org Documentation](https://schema.org/docs/documents.html)
 6. [Next.js Image Component Documentation](https://nextjs.org/docs/app/api-reference/components/image)
 7. [Next.js ImageResponse API](https://nextjs.org/docs/app/api-reference/functions/image-response)
 8. [Google Search Central Documentation](https://developers.google.com/search)
 9. [Next.js 15.3 App Router SEO Checklist](https://dev.to/simplr_sh/nextjs-15-app-router-seo-comprehensive-checklist-3d3f)
 10. [Mobile Optimization - Google Search Central](https://developers.google.com/search/mobile-sites)
 11. [Next.js 15.3 Performance Optimization](https://nextjs.org/docs/app/building-your-application/optimizing) 
--- a/web/package.json
+++ b/web/package.json
@@ -42,6 +42,7 @@
 		"canvas-confetti": "^1.9.3",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
 		"date-fns": "^4.1.0",
 		"embla-carousel-react": "^8.6.0",
 		"framer-motion": "^12.7.3",
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -101,6 +101,9 @@ importers:
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
      cmdk:
        specifier: ^1.1.1
        version: 1.1.1(@types/react-dom@19.1.2(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      date-fns:
        specifier: ^4.1.0
        version: 4.1.0
@@ -157,7 +160,7 @@ importers:
        version: 3.2.0
      tailwindcss-motion:
        specifier: ^1.1.0
-        version: 1.1.0(tailwindcss@4.1.4)
+        version: 1.1.0(tailwindcss@4.1.3)
      tw-animate-css:
        specifier: ^1.2.5
        version: 1.2.5
@@ -173,13 +176,13 @@ importers:
        version: 1.9.4
      '@tailwindcss/postcss':
        specifier: ^4.1.3
-        version: 4.1.4
+        version: 4.1.3
      '@types/canvas-confetti':
        specifier: ^1.9.0
        version: 1.9.0
      '@types/node':
        specifier: ^22.14.0
-        version: 22.14.1
+        version: 22.14.0
      '@types/react':
        specifier: ^19.1.0
        version: 19.1.0
@@ -188,13 +191,13 @@ importers:
        version: 19.1.2(@types/react@19.1.0)
      tailwindcss:
        specifier: ^4.1.3
-        version: 4.1.4
+        version: 4.1.3
      typescript:
        specifier: ^5.8.3
        version: 5.8.3
      wrangler:
        specifier: ^4.12.0
-        version: 4.12.1
+        version: 4.12.0
 packages:
@@ -272,32 +275,32 @@ packages:
      workerd:
        optional: true
-  '@cloudflare/workerd-darwin-64@1.20250417.0':
+  '@cloudflare/workerd-darwin-64@1.20250416.0':
-    resolution: {integrity: sha512-4Adfl92aKepjxb8e6af2d+xpD2sBOADgHqvkyXsFmoLb80weMEDDRGJi1p1m5q1M78/oVnGcpdmuRCAathanRg==}
+    resolution: {integrity: sha512-aZgF8Swp9eVYxJPWOoZbAgAaYjWuYqGmEA+QJ2ecRGDBqm87rT4GEw7/mmLpxrpllny3VfEEhkk9iYCGv8nlFw==}
    engines: {node: '>=16'}
    cpu: [x64]
    os: [darwin]
-  '@cloudflare/workerd-darwin-arm64@1.20250417.0':
+  '@cloudflare/workerd-darwin-arm64@1.20250416.0':
-    resolution: {integrity: sha512-dSlk18F4i3T1OTzFBxx3pKpXRMP6w2xZ26+oIV32BFWrCi/HxGzUd6gVA0q37oLGqITRt8xU693J4Gl1CwC/Ag==}
+    resolution: {integrity: sha512-FhswG1QYRfaTZ4FAlUkfVWaoM2lrlqumiBTrhbo9czMJdGR/oBXS4SGynuI6zyhApHeBf3/fZpA/SBAe4cXdgg==}
    engines: {node: '>=16'}
    cpu: [arm64]
    os: [darwin]
-  '@cloudflare/workerd-linux-64@1.20250417.0':
+  '@cloudflare/workerd-linux-64@1.20250416.0':
-    resolution: {integrity: sha512-27MVzOa/lENcqewC2L9EcqstXW843UhjBMcwV1umDfsjwLyZOEv6Gtm/6j5r0L0gASvkRTam3fAmtPk/gt48TA==}
+    resolution: {integrity: sha512-G+nXEAJ/9y+A857XShwxKeRdfxok6UcjiQe6G+wQeCn/Ofkp/EWydacKdyeVU6QIm1oHS78DwJ7AzbCYywf9aw==}
    engines: {node: '>=16'}
    cpu: [x64]
    os: [linux]
-  '@cloudflare/workerd-linux-arm64@1.20250417.0':
+  '@cloudflare/workerd-linux-arm64@1.20250416.0':
-    resolution: {integrity: sha512-34qBk0htAXmUneOTQxW6/g6pjNVR91r0vJzz2FID84cAIOYVl4hZLijkjmVl+MMDU6boXUs+yDwhItdg06YvAg==}
+    resolution: {integrity: sha512-U6oVW0d9w1fpnDYNrjPJ9SFkDlGJWJWbXHlTBObXl6vccP16WewvuxyHkKqyUhUc8hyBaph7sxeKzKmuCFQ4SA==}
    engines: {node: '>=16'}
    cpu: [arm64]
    os: [linux]
-  '@cloudflare/workerd-windows-64@1.20250417.0':
+  '@cloudflare/workerd-windows-64@1.20250416.0':
-    resolution: {integrity: sha512-PDwATFioff+geVHfgTzSWsxgwjgotrdXStb0EL0lMyMT5zNmHArAnOx83CbDtud63Uv9rVX1BAfPP4tyD1O+5A==}
+    resolution: {integrity: sha512-YAjjTzL1z9YYeN4sqYfj1dtQXd2Bblj+B+hl4Rz2aOhblpZEZAdhapZlOCRvLLkOJshKJUnRD3mDlytAdgwybQ==}
    engines: {node: '>=16'}
    cpu: [x64]
    os: [win32]
@@ -1362,93 +1365,81 @@ packages:
  '@swc/helpers@0.5.15':
    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
-  '@tailwindcss/node@4.1.4':
+  '@tailwindcss/node@4.1.3':
-    resolution: {integrity: sha512-MT5118zaiO6x6hNA04OWInuAiP1YISXql8Z+/Y8iisV5nuhM8VXlyhRuqc2PEviPszcXI66W44bCIk500Oolhw==}
+    resolution: {integrity: sha512-H/6r6IPFJkCfBJZ2dKZiPJ7Ueb2wbL592+9bQEl2r73qbX6yGnmQVIfiUvDRB2YI0a3PWDrzUwkvQx1XW1bNkA==}
-  '@tailwindcss/oxide-android-arm64@4.1.4':
+  '@tailwindcss/oxide-android-arm64@4.1.3':
-    resolution: {integrity: sha512-xMMAe/SaCN/vHfQYui3fqaBDEXMu22BVwQ33veLc8ep+DNy7CWN52L+TTG9y1K397w9nkzv+Mw+mZWISiqhmlA==}
+    resolution: {integrity: sha512-cxklKjtNLwFl3mDYw4XpEfBY+G8ssSg9ADL4Wm6//5woi3XGqlxFsnV5Zb6v07dxw1NvEX2uoqsxO/zWQsgR+g==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [android]
-  '@tailwindcss/oxide-darwin-arm64@4.1.4':
+  '@tailwindcss/oxide-darwin-arm64@4.1.3':
-    resolution: {integrity: sha512-JGRj0SYFuDuAGilWFBlshcexev2hOKfNkoX+0QTksKYq2zgF9VY/vVMq9m8IObYnLna0Xlg+ytCi2FN2rOL0Sg==}
+    resolution: {integrity: sha512-mqkf2tLR5VCrjBvuRDwzKNShRu99gCAVMkVsaEOFvv6cCjlEKXRecPu9DEnxp6STk5z+Vlbh1M5zY3nQCXMXhw==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [darwin]
-  '@tailwindcss/oxide-darwin-x64@4.1.4':
+  '@tailwindcss/oxide-darwin-x64@4.1.3':
-    resolution: {integrity: sha512-sdDeLNvs3cYeWsEJ4H1DvjOzaGios4QbBTNLVLVs0XQ0V95bffT3+scptzYGPMjm7xv4+qMhCDrkHwhnUySEzA==}
+    resolution: {integrity: sha512-7sGraGaWzXvCLyxrc7d+CCpUN3fYnkkcso3rCzwUmo/LteAl2ZGCDlGvDD8Y/1D3ngxT8KgDj1DSwOnNewKhmg==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [darwin]
-  '@tailwindcss/oxide-freebsd-x64@4.1.4':
+  '@tailwindcss/oxide-freebsd-x64@4.1.3':
-    resolution: {integrity: sha512-VHxAqxqdghM83HslPhRsNhHo91McsxRJaEnShJOMu8mHmEj9Ig7ToHJtDukkuLWLzLboh2XSjq/0zO6wgvykNA==}
+    resolution: {integrity: sha512-E2+PbcbzIReaAYZe997wb9rId246yDkCwAakllAWSGqe6VTg9hHle67hfH6ExjpV2LSK/siRzBUs5wVff3RW9w==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [freebsd]
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.4':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.3':
-    resolution: {integrity: sha512-OTU/m/eV4gQKxy9r5acuesqaymyeSCnsx1cFto/I1WhPmi5HDxX1nkzb8KYBiwkHIGg7CTfo/AcGzoXAJBxLfg==}
+    resolution: {integrity: sha512-GvfbJ8wjSSjbLFFE3UYz4Eh8i4L6GiEYqCtA8j2Zd2oXriPuom/Ah/64pg/szWycQpzRnbDiJozoxFU2oJZyfg==}
    engines: {node: '>= 10'}
    cpu: [arm]
    os: [linux]
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.4':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.3':
-    resolution: {integrity: sha512-hKlLNvbmUC6z5g/J4H+Zx7f7w15whSVImokLPmP6ff1QqTVE+TxUM9PGuNsjHvkvlHUtGTdDnOvGNSEUiXI1Ww==}
+    resolution: {integrity: sha512-35UkuCWQTeG9BHcBQXndDOrpsnt3Pj9NVIB4CgNiKmpG8GnCNXeMczkUpOoqcOhO6Cc/mM2W7kaQ/MTEENDDXg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.4':
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.3':
-    resolution: {integrity: sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==}
+    resolution: {integrity: sha512-dm18aQiML5QCj9DQo7wMbt1Z2tl3Giht54uVR87a84X8qRtuXxUqnKQkRDK5B4bCOmcZ580lF9YcoMkbDYTXHQ==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.4':
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.3':
-    resolution: {integrity: sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==}
+    resolution: {integrity: sha512-LMdTmGe/NPtGOaOfV2HuO7w07jI3cflPrVq5CXl+2O93DCewADK0uW1ORNAcfu2YxDUS035eY2W38TxrsqngxA==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-  '@tailwindcss/oxide-linux-x64-musl@4.1.4':
+  '@tailwindcss/oxide-linux-x64-musl@4.1.3':
-    resolution: {integrity: sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==}
+    resolution: {integrity: sha512-aalNWwIi54bbFEizwl1/XpmdDrOaCjRFQRgtbv9slWjmNPuJJTIKPHf5/XXDARc9CneW9FkSTqTbyvNecYAEGw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-  '@tailwindcss/oxide-wasm32-wasi@4.1.4':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.3':
-    resolution: {integrity: sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==}
+    resolution: {integrity: sha512-PEj7XR4OGTGoboTIAdXicKuWl4EQIjKHKuR+bFy9oYN7CFZo0eu74+70O4XuERX4yjqVZGAkCdglBODlgqcCXg==}
    engines: {node: '>=14.0.0'}
    cpu: [wasm32]
    bundledDependencies:
      - '@napi-rs/wasm-runtime'
      - '@emnapi/core'
      - '@emnapi/runtime'
      - '@tybys/wasm-util'
      - '@emnapi/wasi-threads'
      - tslib
  '@tailwindcss/oxide-win32-arm64-msvc@4.1.4':
    resolution: {integrity: sha512-VlnhfilPlO0ltxW9/BgfLI5547PYzqBMPIzRrk4W7uupgCt8z6Trw/tAj6QUtF2om+1MH281Pg+HHUJoLesmng==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [win32]
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.4':
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.3':
-    resolution: {integrity: sha512-+7S63t5zhYjslUGb8NcgLpFXD+Kq1F/zt5Xv5qTv7HaFTG/DHyHD9GA6ieNAxhgyA4IcKa/zy7Xx4Oad2/wuhw==}
+    resolution: {integrity: sha512-T8gfxECWDBENotpw3HR9SmNiHC9AOJdxs+woasRZ8Q/J4VHN0OMs7F+4yVNZ9EVN26Wv6mZbK0jv7eHYuLJLwA==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [win32]
-  '@tailwindcss/oxide@4.1.4':
+  '@tailwindcss/oxide@4.1.3':
-    resolution: {integrity: sha512-p5wOpXyOJx7mKh5MXh5oKk+kqcz8T+bA3z/5VWWeQwFrmuBItGwz8Y2CHk/sJ+dNb9B0nYFfn0rj/cKHZyjahQ==}
+    resolution: {integrity: sha512-t16lpHCU7LBxDe/8dCj9ntyNpXaSTAgxWm1u2XQP5NiIu4KGSyrDJJRlK9hJ4U9yJxx0UKCVI67MJWFNll5mOQ==}
    engines: {node: '>= 10'}
-  '@tailwindcss/postcss@4.1.4':
+  '@tailwindcss/postcss@4.1.3':
-    resolution: {integrity: sha512-bjV6sqycCEa+AQSt2Kr7wpGF1bOZJ5wsqnLEkqSbM/JEHxx/yhMH8wHmdkPyApF9xhHeMSwnnkDUUMMM/hYnXw==}
+    resolution: {integrity: sha512-6s5nJODm98F++QT49qn8xJKHQRamhYHfMi3X7/ltxiSQ9dyRsaFSfFkfaMsanWzf+TMYQtbk8mt5f6cCVXJwfg==}
  '@tanstack/react-virtual@3.13.6':
    resolution: {integrity: sha512-WT7nWs8ximoQ0CDx/ngoFP7HbQF9Q2wQe4nh2NB+u2486eX3nZRE40P9g6ccCVq7ZfTSH5gFOuCoVH5DLNS/aA==}
@@ -1489,8 +1480,8 @@ packages:
  '@types/d3-timer@3.0.2':
    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
-  '@types/node@22.14.1':
+  '@types/node@22.14.0':
-    resolution: {integrity: sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==}
+    resolution: {integrity: sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==}
  '@types/react-dom@19.1.2':
    resolution: {integrity: sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==}
@@ -1549,6 +1540,12 @@ packages:
    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
    engines: {node: '>=6'}
  cmdk@1.1.1:
    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
    peerDependencies:
      react: ^18 || ^19 || ^19.0.0-rc
      react-dom: ^18 || ^19 || ^19.0.0-rc
  color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@@ -1891,8 +1888,8 @@ packages:
    engines: {node: '>=10.0.0'}
    hasBin: true
-  miniflare@4.20250417.0:
+  miniflare@4.20250416.0:
-    resolution: {integrity: sha512-bROKLQKr4CoS93tnGuw5e08VaNwM3VowTL3Z2Cps1HzY6a4Bq8uNtggQ7WogriMq77jcHn6kbz64bvWyF//Jkw==}
+    resolution: {integrity: sha512-261PhPgD9zs5/BTdbWqwiaXtWxb+Av5zKCwTU+HXrA5E4tf3qnULwh3u6SVUOAEArEroFuKJzawsQ9COtNBurQ==}
    engines: {node: '>=18.0.0'}
    hasBin: true
@@ -2156,8 +2153,8 @@ packages:
    peerDependencies:
      tailwindcss: '>=3.0.0 || insiders'
-  tailwindcss@4.1.4:
+  tailwindcss@4.1.3:
-    resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
+    resolution: {integrity: sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==}
  tapable@2.2.1:
    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -2222,17 +2219,17 @@ packages:
  web-vitals@4.2.4:
    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
-  workerd@1.20250417.0:
+  workerd@1.20250416.0:
-    resolution: {integrity: sha512-naz6oJiVODd3/Lkp9l3vtc56HKOOvx+AWDvEsTa5eSfi5SI9V0HYpLYSPblAwrfazbQ4ff1Vl3jkTl/5JxqCAA==}
+    resolution: {integrity: sha512-Yrx/bZAKbmSvomdTAzzIpOHwpYhs0ldr2wqed22UEhQ0mIplAHY4xmY+SjAJhP/TydZrciOVzBxwM1+4T40KNA==}
    engines: {node: '>=16'}
    hasBin: true
-  wrangler@4.12.1:
+  wrangler@4.12.0:
-    resolution: {integrity: sha512-jYrz8y2ffhsRqvQLO2dXFi9HLvPUJk3jn7U71GWfBBCHm0I6r2ik7Vs9ajpRcTGlbNw1RY0uIHVJBVR/7bEN5A==}
+    resolution: {integrity: sha512-4rfAXOi5KqM3ECvOrZJ97k3zEqxVwtdt4bijd8jcRBZ6iJYvEtjgjVi4TsfkVa/eXGhpfHTUnKu2uk8UHa8M2w==}
    engines: {node: '>=18.0.0'}
    hasBin: true
    peerDependencies:
-      '@cloudflare/workers-types': ^4.20250417.0
+      '@cloudflare/workers-types': ^4.20250415.0
    peerDependenciesMeta:
      '@cloudflare/workers-types':
        optional: true
@@ -2305,25 +2302,25 @@ snapshots:
    dependencies:
      mime: 3.0.0
-  '@cloudflare/unenv-preset@2.3.1(unenv@2.0.0-rc.15)(workerd@1.20250417.0)':
+  '@cloudflare/unenv-preset@2.3.1(unenv@2.0.0-rc.15)(workerd@1.20250416.0)':
    dependencies:
      unenv: 2.0.0-rc.15
    optionalDependencies:
-      workerd: 1.20250417.0
+      workerd: 1.20250416.0
-  '@cloudflare/workerd-darwin-64@1.20250417.0':
+  '@cloudflare/workerd-darwin-64@1.20250416.0':
    optional: true
-  '@cloudflare/workerd-darwin-arm64@1.20250417.0':
+  '@cloudflare/workerd-darwin-arm64@1.20250416.0':
    optional: true
-  '@cloudflare/workerd-linux-64@1.20250417.0':
+  '@cloudflare/workerd-linux-64@1.20250416.0':
    optional: true
-  '@cloudflare/workerd-linux-arm64@1.20250417.0':
+  '@cloudflare/workerd-linux-arm64@1.20250416.0':
    optional: true
-  '@cloudflare/workerd-windows-64@1.20250417.0':
+  '@cloudflare/workerd-windows-64@1.20250416.0':
    optional: true
  '@cspotcode/source-map-support@0.8.1':
@@ -3267,71 +3264,67 @@ snapshots:
    dependencies:
      tslib: 2.8.1
-  '@tailwindcss/node@4.1.4':
+  '@tailwindcss/node@4.1.3':
    dependencies:
      enhanced-resolve: 5.18.1
      jiti: 2.4.2
      lightningcss: 1.29.2
-      tailwindcss: 4.1.4
+      tailwindcss: 4.1.3
-  '@tailwindcss/oxide-android-arm64@4.1.4':
+  '@tailwindcss/oxide-android-arm64@4.1.3':
    optional: true
-  '@tailwindcss/oxide-darwin-arm64@4.1.4':
+  '@tailwindcss/oxide-darwin-arm64@4.1.3':
    optional: true
-  '@tailwindcss/oxide-darwin-x64@4.1.4':
+  '@tailwindcss/oxide-darwin-x64@4.1.3':
    optional: true
-  '@tailwindcss/oxide-freebsd-x64@4.1.4':
+  '@tailwindcss/oxide-freebsd-x64@4.1.3':
    optional: true
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.4':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.3':
    optional: true
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.4':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.3':
    optional: true
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.4':
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.3':
    optional: true
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.4':
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.3':
    optional: true
-  '@tailwindcss/oxide-linux-x64-musl@4.1.4':
+  '@tailwindcss/oxide-linux-x64-musl@4.1.3':
    optional: true
-  '@tailwindcss/oxide-wasm32-wasi@4.1.4':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.3':
    optional: true
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.4':
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.3':
    optional: true
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.4':
+  '@tailwindcss/oxide@4.1.3':
    optional: true
  '@tailwindcss/oxide@4.1.4':
    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.4
+      '@tailwindcss/oxide-android-arm64': 4.1.3
-      '@tailwindcss/oxide-darwin-arm64': 4.1.4
+      '@tailwindcss/oxide-darwin-arm64': 4.1.3
-      '@tailwindcss/oxide-darwin-x64': 4.1.4
+      '@tailwindcss/oxide-darwin-x64': 4.1.3
-      '@tailwindcss/oxide-freebsd-x64': 4.1.4
+      '@tailwindcss/oxide-freebsd-x64': 4.1.3
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.4
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.3
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.4
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.3
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.4
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.3
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.4
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.3
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.4
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.3
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.4
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.3
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.4
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.3
      '@tailwindcss/oxide-win32-x64-msvc': 4.1.4
-  '@tailwindcss/postcss@4.1.4':
+  '@tailwindcss/postcss@4.1.3':
    dependencies:
      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.1.4
+      '@tailwindcss/node': 4.1.3
-      '@tailwindcss/oxide': 4.1.4
+      '@tailwindcss/oxide': 4.1.3
      postcss: 8.5.3
-      tailwindcss: 4.1.4
+      tailwindcss: 4.1.3
  '@tanstack/react-virtual@3.13.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
    dependencies:
@@ -3367,7 +3360,7 @@ snapshots:
  '@types/d3-timer@3.0.2': {}
-  '@types/node@22.14.1':
+  '@types/node@22.14.0':
    dependencies:
      undici-types: 6.21.0
@@ -3424,6 +3417,18 @@ snapshots:
  clsx@2.1.1: {}
  cmdk@1.1.1(@types/react-dom@19.1.2(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.0)(react@19.1.0)
      '@radix-ui/react-dialog': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      '@radix-ui/react-id': 1.1.1(@types/react@19.1.0)(react@19.1.0)
      '@radix-ui/react-primitive': 2.0.3(@types/react-dom@19.1.2(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      react: 19.1.0
      react-dom: 19.1.0(react@19.1.0)
    transitivePeerDependencies:
      - '@types/react'
      - '@types/react-dom'
  color-convert@2.0.1:
    dependencies:
      color-name: 1.1.4
@@ -3730,7 +3735,7 @@ snapshots:
  mime@3.0.0: {}
-  miniflare@4.20250417.0:
+  miniflare@4.20250416.0:
    dependencies:
      '@cspotcode/source-map-support': 0.8.1
      acorn: 8.14.0
@@ -3739,7 +3744,7 @@ snapshots:
      glob-to-regexp: 0.4.1
      stoppable: 1.1.0
      undici: 5.29.0
-      workerd: 1.20250417.0
+      workerd: 1.20250416.0
      ws: 8.18.0
      youch: 3.3.4
      zod: 3.22.3
@@ -4020,11 +4025,11 @@ snapshots:
  tailwind-merge@3.2.0: {}
-  tailwindcss-motion@1.1.0(tailwindcss@4.1.4):
+  tailwindcss-motion@1.1.0(tailwindcss@4.1.3):
    dependencies:
-      tailwindcss: 4.1.4
+      tailwindcss: 4.1.3
-  tailwindcss@4.1.4: {}
+  tailwindcss@4.1.3: {}
  tapable@2.2.1: {}
@@ -4095,24 +4100,24 @@ snapshots:
  web-vitals@4.2.4: {}
-  workerd@1.20250417.0:
+  workerd@1.20250416.0:
    optionalDependencies:
-      '@cloudflare/workerd-darwin-64': 1.20250417.0
+      '@cloudflare/workerd-darwin-64': 1.20250416.0
-      '@cloudflare/workerd-darwin-arm64': 1.20250417.0
+      '@cloudflare/workerd-darwin-arm64': 1.20250416.0
-      '@cloudflare/workerd-linux-64': 1.20250417.0
+      '@cloudflare/workerd-linux-64': 1.20250416.0
-      '@cloudflare/workerd-linux-arm64': 1.20250417.0
+      '@cloudflare/workerd-linux-arm64': 1.20250416.0
-      '@cloudflare/workerd-windows-64': 1.20250417.0
+      '@cloudflare/workerd-windows-64': 1.20250416.0
-  wrangler@4.12.1:
+  wrangler@4.12.0:
    dependencies:
      '@cloudflare/kv-asset-handler': 0.4.0
-      '@cloudflare/unenv-preset': 2.3.1(unenv@2.0.0-rc.15)(workerd@1.20250417.0)
+      '@cloudflare/unenv-preset': 2.3.1(unenv@2.0.0-rc.15)(workerd@1.20250416.0)
      blake3-wasm: 2.1.5
      esbuild: 0.25.2
-      miniflare: 4.20250417.0
+      miniflare: 4.20250416.0
      path-to-regexp: 6.3.0
      unenv: 2.0.0-rc.15
-      workerd: 1.20250417.0
+      workerd: 1.20250416.0
    optionalDependencies:
      fsevents: 2.3.3
      sharp: 0.33.5
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -118,6 +118,19 @@
 			transform: rotate(-5deg) scale(0.9);
 		}
 	}
 	--animate-shiny-text: shiny-text 8s infinite;
 	@keyframes shiny-text {
 		0%,
 		90%,
 		100% {
 			background-position: calc(-100% - var(--shiny-width)) 0;
 		}
 		30%,
 		60% {
 			background-position: calc(100% + var(--shiny-width)) 0;
 		}
 	}
 }
 :root {
@@ -186,7 +199,7 @@
 	--secondary: oklch(0.31 0.03 266.71);
 	--secondary-foreground: oklch(0.92 0 0);
 	--muted: oklch(0.31 0.03 266.71);
-	--muted-foreground: oklch(0.78 0 0);
+	--muted-foreground: oklch(0.72 0 0);
 	--accent: oklch(0.34 0.06 267.59);
 	--accent-foreground: oklch(0.88 0.06 254.13);
 	--destructive: oklch(0.64 0.21 25.33);
--- a/web/src/app/icons/[icon]/page.tsx
+++ b/web/src/app/icons/[icon]/page.tsx
@@ -44,11 +44,13 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 		title: `${formattedIconName} Icon | Dashboard Icons`,
 		description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 		assets: [iconImageUrl],
 		category: "icons",
 		keywords: [
 			`${formattedIconName} icon`,
-			"dashboard icon",
+			`${formattedIconName} icon download`,
-			"service icon",
+			`${formattedIconName} icon svg`,
 			`${formattedIconName} icon png`,
 			`${formattedIconName} icon webp`,
 			`${icon} icon`,
 			"application icon",
 			"tool icon",
 			"web dashboard",
@@ -58,10 +60,6 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 			icon: iconImageUrl,
 		},
 		abstract: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 		robots: {
 			index: true,
 			follow: true,
 		},
 		openGraph: {
 			title: `${formattedIconName} Icon | Dashboard Icons`,
 			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
--- a/web/src/app/icons/components.tsx
+++ b/web/src/app/icons/components.tsx
@@ -0,0 +1,87 @@
 "use client"
 import { Input } from "@/components/ui/input"
 import { BASE_URL } from "@/constants"
 import type { IconSearchProps, IconWithName } from "@/types/icons"
 import { Search } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { useState } from "react"
 export function IconSearch({ icons, initialQuery = "" }: IconSearchProps) {
 	const [searchQuery, setSearchQuery] = useState(initialQuery)
 	const [filteredIcons, setFilteredIcons] = useState<IconWithName[]>(() => {
 		if (!initialQuery.trim()) return icons
 		const q = initialQuery.toLowerCase()
 		return icons.filter(({ name, data }) => {
 			if (name.toLowerCase().includes(q)) return true
 			if (data.aliases.some((alias) => alias.toLowerCase().includes(q))) return true
 			if (data.categories.some((category) => category.toLowerCase().includes(q))) return true
 			return false
 		})
 	})
 	const handleSearch = (query: string) => {
 		setSearchQuery(query)
 		if (!query.trim()) {
 			setFilteredIcons(icons)
 			return
 		}
 		const q = query.toLowerCase()
 		const filtered = icons.filter(({ name, data }) => {
 			if (name.toLowerCase().includes(q)) return true
 			if (data.aliases.some((alias) => alias.toLowerCase().includes(q))) return true
 			if (data.categories.some((category) => category.toLowerCase().includes(q))) return true
 			return false
 		})
 		setFilteredIcons(filtered)
 	}
 	return (
 		<>
 			<div className="relative w-full max-w-md">
 				<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground transition-all duration-300" />
 				<Input
 					type="search"
 					placeholder="Search icons by name, aliases, or categories..."
 					className="w-full pl-8 transition-all duration-300 text-sm md:text-base"
 					value={searchQuery}
 					onChange={(e) => handleSearch(e.target.value)}
 				/>
 			</div>
 			{filteredIcons.length === 0 ? (
 				<div className="text-center py-12">
 					<h2 className="text-xl font-semibold">No icons found</h2>
 					<p className="text-muted-foreground mt-2">Try a different search term.</p>
 				</div>
 			) : (
 				<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-8">
 					{filteredIcons.map(({ name, data }) => (
 						<Link
 							key={name}
 							href={`/icons/${name}`}
 							className="group flex flex-col items-center p-4 rounded-lg border border-border hover:border-primary hover:bg-accent transition-colors"
 						>
 							<div className="relative h-16 w-16 mb-2">
 								<Image
 									src={`${BASE_URL}/${data.base}/${name}.${data.base}`}
 									alt={`${name} icon`}
 									fill
 									className="object-contain p-1 group-hover:scale-110 transition-transform"
 								/>
 							</div>
 							<span className="text-sm text-center truncate w-full">{name.replace(/-/g, " ")}</span>
 						</Link>
 					))}
 				</div>
 			)}
 		</>
 	)
 }
--- a/web/src/app/icons/components/icon-search.tsx
+++ b/web/src/app/icons/components/icon-search.tsx
@@ -19,7 +19,8 @@ import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
 import { BASE_URL } from "@/constants"
 import type { Icon, IconSearchProps } from "@/types/icons"
-import { ArrowDownAZ, ArrowUpZA, Calendar, Filter, Search, SortAsc, X } from "lucide-react"
+import { AnimatePresence, motion } from "framer-motion"
 import { ArrowDownAZ, ArrowUpZA, Calendar, ChevronLeft, ChevronRight, Filter, Search, SortAsc, X } from "lucide-react"
 import { useTheme } from "next-themes"
 import Image from "next/image"
 import Link from "next/link"
@@ -30,21 +31,84 @@ import { toast } from "sonner"
 type SortOption = "relevance" | "alphabetical-asc" | "alphabetical-desc" | "newest"
 // Get the display rows count based on viewport size
 function getDefaultRowsPerPage() {
 	if (typeof window === "undefined") return 3 // Default for SSR
 	// Calculate based on viewport height and width
 	const vh = window.innerHeight
 	const vw = window.innerWidth
 	// Determine number of columns based on viewport width
 	let columns = 2 // Default for small screens (sm)
 	if (vw >= 1280)
 		columns = 8 // xl breakpoint
 	else if (vw >= 1024)
 		columns = 6 // lg breakpoint
 	else if (vw >= 768)
 		columns = 4 // md breakpoint
 	else if (vw >= 640) columns = 3 // sm breakpoint
 	// Calculate rows (accounting for pagination UI space)
 	const rowHeight = 130 // Approximate height of each row in pixels
 	const availableHeight = vh * 0.6 // 60% of viewport height
 	// Ensure at least 1 row, maximum 5 rows
 	return Math.max(1, Math.min(5, Math.floor(availableHeight / rowHeight)))
 }
 export function IconSearch({ icons }: IconSearchProps) {
 	const searchParams = useSearchParams()
 	const initialQuery = searchParams.get("q")
 	const initialCategories = searchParams.getAll("category")
 	const initialSort = (searchParams.get("sort") as SortOption) || "relevance"
 	const initialPage = Number(searchParams.get("page") || "1")
 	const router = useRouter()
 	const pathname = usePathname()
 	const [searchQuery, setSearchQuery] = useState(initialQuery ?? "")
 	const [debouncedQuery, setDebouncedQuery] = useState(initialQuery ?? "")
 	const [selectedCategories, setSelectedCategories] = useState<string[]>(initialCategories ?? [])
 	const [sortOption, setSortOption] = useState<SortOption>(initialSort)
 	const [currentPage, setCurrentPage] = useState(initialPage)
 	const [iconsPerPage, setIconsPerPage] = useState(getDefaultRowsPerPage() * 8) // Default cols is 8 for xl screens
 	const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 	const { resolvedTheme } = useTheme()
 	const [isLazyRequestSubmitted, setIsLazyRequestSubmitted] = useState(false)
 	// Add resize observer to update iconsPerPage when window size changes
 	useEffect(() => {
 		const updateIconsPerPage = () => {
 			const rows = getDefaultRowsPerPage()
 			// Determine columns based on current viewport
 			const vw = window.innerWidth
 			let columns = 2 // Default for small screens
 			if (vw >= 1280)
 				columns = 8 // xl breakpoint
 			else if (vw >= 1024)
 				columns = 6 // lg breakpoint
 			else if (vw >= 768)
 				columns = 4 // md breakpoint
 			else if (vw >= 640) columns = 3 // sm breakpoint
 			setIconsPerPage(rows * columns)
 		}
 		// Initial setup
 		updateIconsPerPage()
 		// Add resize listener
 		window.addEventListener("resize", updateIconsPerPage)
 		// Cleanup
 		return () => window.removeEventListener("resize", updateIconsPerPage)
 	}, [])
 	// Reset page when search parameters change
 	useEffect(() => {
 		setCurrentPage(1)
 	}, [])
 	useEffect(() => {
 		const timer = setTimeout(() => {
 			setDebouncedQuery(searchQuery)
@@ -138,7 +202,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 	}, [filterIcons, debouncedQuery, selectedCategories, sortOption])
 	const updateResults = useCallback(
-		(query: string, categories: string[], sort: SortOption) => {
+		(query: string, categories: string[], sort: SortOption, page = 1) => {
 			const params = new URLSearchParams()
 			if (query) params.set("q", query)
@@ -152,12 +216,32 @@ export function IconSearch({ icons }: IconSearchProps) {
 				params.set("sort", sort)
 			}
 			// Add page parameter if not the first page
 			if (page > 1) {
 				params.set("page", page.toString())
 			}
 			const newUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname
 			router.push(newUrl, { scroll: false })
 		},
 		[pathname, router, initialSort],
 	)
 	// Validate currentPage when iconsPerPage or filteredIcons change
 	useEffect(() => {
 		// Calculate new total pages
 		const totalPages = Math.ceil(filteredIcons.length / iconsPerPage)
 		// If current page is out of bounds, adjust it
 		if (currentPage > totalPages && totalPages > 0) {
 			// Update current page state
 			setCurrentPage(totalPages)
 			// Update URL to reflect the adjusted page
 			updateResults(searchQuery, selectedCategories, sortOption, totalPages)
 		}
 	}, [iconsPerPage, filteredIcons.length, currentPage, searchQuery, selectedCategories, sortOption, updateResults])
 	const handleSearch = useCallback(
 		(query: string) => {
 			setSearchQuery(query)
@@ -197,11 +281,20 @@ export function IconSearch({ icons }: IconSearchProps) {
 		[updateResults, searchQuery, selectedCategories],
 	)
 	const handlePageChange = useCallback(
 		(page: number) => {
 			setCurrentPage(page)
 			updateResults(searchQuery, selectedCategories, sortOption, page)
 		},
 		[updateResults, searchQuery, selectedCategories, sortOption],
 	)
 	const clearFilters = useCallback(() => {
 		setSearchQuery("")
 		setSelectedCategories([])
 		setSortOption("relevance")
-		updateResults("", [], "relevance")
+		setCurrentPage(1)
 		updateResults("", [], "relevance", 1)
 	}, [updateResults])
 	useEffect(() => {
@@ -435,7 +528,14 @@ export function IconSearch({ icons }: IconSearchProps) {
 						</div>
 					</div>
-					<IconsGrid filteredIcons={filteredIcons} matchedAliases={matchedAliases} />
+					<IconsGrid
 						filteredIcons={filteredIcons}
 						matchedAliases={matchedAliases}
 						currentPage={currentPage}
 						iconsPerPage={iconsPerPage}
 						onPageChange={handlePageChange}
 						totalIcons={filteredIcons.length}
 					/>
 				</>
 			)}
 		</>
@@ -445,15 +545,13 @@ export function IconSearch({ icons }: IconSearchProps) {
 function IconCard({
 	name,
 	data: iconData,
 	matchedAlias,
 }: {
 	name: string
 	data: Icon
 	matchedAlias?: string | null
 }) {
 	return (
-		<MagicCard className="rounded-md shadow-md">
+		<MagicCard className="rounded-md shadow-md cursor-pointer">
-			<Link prefetch={false} href={`/icons/${name}`} className="group flex flex-col items-center p-3 sm:p-4 cursor-pointer">
+			<Link prefetch={false} href={`/icons/${name}`} className="group flex flex-col items-center p-3 sm:p-4">
 				<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2">
 					<Image
 						src={`${BASE_URL}/${iconData.base}/${name}.${iconData.base}`}
@@ -465,8 +563,6 @@ function IconCard({
 				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group- dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
 					{name.replace(/-/g, " ")}
 				</span>
 				{matchedAlias && <span className="text-[10px] text-center truncate w-full mt-1">Alias: {matchedAlias}</span>}
 			</Link>
 		</MagicCard>
 	)
@@ -475,17 +571,251 @@ function IconCard({
 interface IconsGridProps {
 	filteredIcons: { name: string; data: Icon }[]
 	matchedAliases: Record<string, string>
 	currentPage: number
 	iconsPerPage: number
 	onPageChange: (page: number) => void
 	totalIcons: number
 }
-function IconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) {
+function IconsGrid({ filteredIcons, matchedAliases, currentPage, iconsPerPage, onPageChange, totalIcons }: IconsGridProps) {
 	// Calculate pagination values
 	const totalPages = Math.ceil(totalIcons / iconsPerPage)
 	const indexOfLastIcon = currentPage * iconsPerPage
 	const indexOfFirstIcon = indexOfLastIcon - iconsPerPage
 	const currentIcons = filteredIcons.slice(indexOfFirstIcon, indexOfLastIcon)
 	// Calculate letter ranges for each page
 	const getLetterRange = (pageNum: number) => {
 		if (filteredIcons.length === 0) return ""
 		const start = (pageNum - 1) * iconsPerPage
 		const end = Math.min(start + iconsPerPage - 1, filteredIcons.length - 1)
 		if (start >= filteredIcons.length) return ""
 		const firstLetter = filteredIcons[start].name.charAt(0).toUpperCase()
 		const lastLetter = filteredIcons[end].name.charAt(0).toUpperCase()
 		return firstLetter === lastLetter ? firstLetter : `${firstLetter} - ${lastLetter}`
 	}
 	// Get current page letter range
 	const currentLetterRange = getLetterRange(currentPage)
 	// Handle direct page input
 	const [pageInput, setPageInput] = useState(currentPage.toString())
 	useEffect(() => {
 		setPageInput(currentPage.toString())
 	}, [currentPage])
 	const handlePageInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setPageInput(e.target.value)
 	}
 	const handlePageInputSubmit = (e: React.FormEvent) => {
 		e.preventDefault()
 		const pageNumber = Number.parseInt(pageInput)
 		if (!Number.isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPages) {
 			onPageChange(pageNumber)
 		} else {
 			// Reset to current page if invalid
 			setPageInput(currentPage.toString())
 		}
 	}
 	return (
 		<>
-			<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-2">
+			<AnimatePresence mode="wait">
-				{filteredIcons.slice(0, 120).map(({ name, data }) => (
+				<motion.div
-					<IconCard key={name} name={name} data={data} matchedAlias={matchedAliases[name] || null} />
+					key={currentPage}
-				))}
+					initial={{ opacity: 0, y: 20 }}
-			</div>
+					animate={{ opacity: 1, y: 0 }}
-			{filteredIcons.length > 120 && <p className="text-sm text-muted-foreground">And {filteredIcons.length - 120} more...</p>}
+					exit={{ opacity: 0, y: -20 }}
 					transition={{ duration: 0.3 }}
 					className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-2"
 				>
 					{currentIcons.map(({ name, data }) => (
 						<IconCard key={name} name={name} data={data} />
 					))}
 				</motion.div>
 			</AnimatePresence>
 			{totalPages > 1 && (
 				<div className="flex flex-col gap-4 mt-8">
 					{/* Mobile view: centered content */}
 					<div className="text-sm text-muted-foreground text-center md:text-left md:hidden">
 						Showing {indexOfFirstIcon + 1}-{Math.min(indexOfLastIcon, totalIcons)} of {totalIcons} icons
 						{currentLetterRange && <span className="ml-2 font-medium">({currentLetterRange})</span>}
 					</div>
 					{/* Desktop view layout */}
 					<div className="hidden md:flex justify-between items-center">
 						<div className="text-sm text-muted-foreground">
 							Showing {indexOfFirstIcon + 1}-{Math.min(indexOfLastIcon, totalIcons)} of {totalIcons} icons
 							{currentLetterRange && <span className="ml-2 font-medium">({currentLetterRange})</span>}
 						</div>
 						<div className="flex items-center gap-4">
 							{/* Page input and total count */}
 							<form onSubmit={handlePageInputSubmit} className="flex items-center gap-2">
 								<Input
 									type="number"
 									min={1}
 									max={totalPages}
 									value={pageInput}
 									onChange={handlePageInputChange}
 									className="w-16 h-8 text-center cursor-text"
 									aria-label="Go to page"
 								/>
 								<span className="text-sm whitespace-nowrap">of {totalPages}</span>
 								<Button type="submit" size="sm" variant="outline" className="h-8 cursor-pointer">
 									Go
 								</Button>
 							</form>
 							{/* Pagination controls */}
 							<div className="flex items-center">
 								<Button
 									onClick={() => onPageChange(currentPage - 1)}
 									disabled={currentPage === 1}
 									size="sm"
 									variant="outline"
 									className="h-8 rounded-r-none cursor-pointer"
 									aria-label="Previous page"
 								>
 									<ChevronLeft className="h-4 w-4" />
 								</Button>
 								<div className="flex items-center overflow-hidden">
 									{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
 										// Show pages around current page
 										let pageNum: number
 										if (totalPages <= 5) {
 											pageNum = i + 1
 										} else if (currentPage <= 3) {
 											pageNum = i + 1
 										} else if (currentPage >= totalPages - 2) {
 											pageNum = totalPages - 4 + i
 										} else {
 											pageNum = currentPage - 2 + i
 										}
 										// Calculate letter range for this page
 										const letterRange = getLetterRange(pageNum)
 										return (
 											<Button
 												key={pageNum}
 												onClick={() => onPageChange(pageNum)}
 												variant={pageNum === currentPage ? "default" : "outline"}
 												size="sm"
 												className={`h-8 w-8 p-0 rounded-none relative group cursor-pointer transition-colors duration-200 ${
 													pageNum === currentPage ? "font-medium" : ""
 												}`}
 												aria-label={`Page ${pageNum}`}
 												aria-current={pageNum === currentPage ? "page" : undefined}
 											>
 												{pageNum}
 												{letterRange && (
 													<span className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-popover text-popover-foreground px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity shadow-md whitespace-nowrap">
 														{letterRange}
 													</span>
 												)}
 											</Button>
 										)
 									})}
 								</div>
 								<Button
 									onClick={() => onPageChange(currentPage + 1)}
 									disabled={currentPage === totalPages}
 									size="sm"
 									variant="outline"
 									className="h-8 rounded-l-none cursor-pointer"
 									aria-label="Next page"
 								>
 									<ChevronRight className="h-4 w-4" />
 								</Button>
 							</div>
 						</div>
 					</div>
 					{/* Mobile-only pagination layout - centered */}
 					<div className="flex flex-col items-center gap-4 md:hidden">
 						{/* Mobile pagination controls */}
 						<div className="flex items-center">
 							<Button
 								onClick={() => onPageChange(currentPage - 1)}
 								disabled={currentPage === 1}
 								size="sm"
 								variant="outline"
 								className="h-8 rounded-r-none cursor-pointer"
 								aria-label="Previous page"
 							>
 								<ChevronLeft className="h-4 w-4" />
 							</Button>
 							<div className="flex items-center overflow-hidden">
 								{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
 									// Show pages around current page - same logic as desktop
 									let pageNum: number
 									if (totalPages <= 5) {
 										pageNum = i + 1
 									} else if (currentPage <= 3) {
 										pageNum = i + 1
 									} else if (currentPage >= totalPages - 2) {
 										pageNum = totalPages - 4 + i
 									} else {
 										pageNum = currentPage - 2 + i
 									}
 									return (
 										<Button
 											key={pageNum}
 											onClick={() => onPageChange(pageNum)}
 											variant={pageNum === currentPage ? "default" : "outline"}
 											size="sm"
 											className={`h-8 w-8 p-0 rounded-none cursor-pointer ${pageNum === currentPage ? "font-medium" : ""}`}
 											aria-label={`Page ${pageNum}`}
 											aria-current={pageNum === currentPage ? "page" : undefined}
 										>
 											{pageNum}
 										</Button>
 									)
 								})}
 							</div>
 							<Button
 								onClick={() => onPageChange(currentPage + 1)}
 								disabled={currentPage === totalPages}
 								size="sm"
 								variant="outline"
 								className="h-8 rounded-l-none cursor-pointer"
 								aria-label="Next page"
 							>
 								<ChevronRight className="h-4 w-4" />
 							</Button>
 						</div>
 						{/* Mobile page input */}
 						<form onSubmit={handlePageInputSubmit} className="flex items-center gap-2">
 							<Input
 								type="number"
 								min={1}
 								max={totalPages}
 								value={pageInput}
 								onChange={handlePageInputChange}
 								className="w-16 h-8 text-center cursor-text"
 								aria-label="Go to page"
 							/>
 							<span className="text-sm whitespace-nowrap">of {totalPages}</span>
 							<Button type="submit" size="sm" variant="outline" className="h-8 cursor-pointer">
 								Go
 							</Button>
 						</form>
 					</div>
 				</div>
 			)}
 		</>
 	)
 }
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -7,7 +7,7 @@ import type { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
 import { Toaster } from "sonner"
 import "./globals.css"
-import { getDescription, websiteTitle } from "@/constants"
+import { BASE_URL, getDescription, WEB_URL, websiteTitle } from "@/constants"
 import { ThemeProvider } from "./theme-provider"
 const inter = Inter({
@@ -29,44 +29,41 @@ export async function generateMetadata(): Promise<Metadata> {
 	const { totalIcons } = await getTotalIcons()
 	return {
-		metadataBase: new URL("https://dashboardicons.com"),
+		metadataBase: new URL(WEB_URL),
 		title: websiteTitle,
 		description: getDescription(totalIcons),
 		keywords: ["dashboard icons", "service icons", "application icons", "tool icons", "web dashboard", "app directory"],
 		robots: {
 			index: true,
 			follow: true,
 			"max-image-preview": "large",
 			"max-snippet": -1,
 			"max-video-preview": -1,
 			googleBot: "index, follow",
 		},
 		openGraph: {
-			siteName: "Dashboard Icons",
+			siteName: WEB_URL,
 			type: "website",
 			locale: "en_US",
 			title: websiteTitle,
 			url: BASE_URL,
 			description: getDescription(totalIcons),
 			url: "https://dashboardicons.com",
 			images: [
 				{
 					url: "/og-image.png",
 					width: 1200,
 					height: 630,
-					alt: "Dashboard Icons",
+					alt: "Dashboard Icons - Dashboard icons for self hosted services",
 					type: "image/png",
 				},
 			],
 		},
 		twitter: {
 			card: "summary_large_image",
-			site: "@homarr_app",
+			title: WEB_URL,
 			creator: "@homarr_app",
 			title: websiteTitle,
 			description: getDescription(totalIcons),
 			images: ["/og-image.png"],
 		},
-		applicationName: "Dashboard Icons",
+		applicationName: WEB_URL,
 		alternates: {
 			canonical: BASE_URL,
 		},
 		appleWebApp: {
 			title: "Dashboard Icons",
 			statusBarStyle: "default",
@@ -79,13 +76,6 @@ export async function generateMetadata(): Promise<Metadata> {
 				{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
 			],
 			apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
 			other: [
 				{
 					rel: "mask-icon",
 					url: "/safari-pinned-tab.svg",
 					color: "#000000",
 				},
 			],
 		},
 		manifest: "/site.webmanifest",
 	}
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,45 +1,7 @@
 import { HeroSection } from "@/components/hero"
 import { RecentlyAddedIcons } from "@/components/recently-added-icons"
-import { BASE_URL, REPO_NAME, getDescription, websiteTitle } from "@/constants"
+import { REPO_NAME } from "@/constants"
 import { getRecentlyAddedIcons, getTotalIcons } from "@/lib/api"
 import type { Metadata } from "next"
 export async function generateMetadata(): Promise<Metadata> {
 	const { totalIcons } = await getTotalIcons()
 	return {
 		title: websiteTitle,
 		description: getDescription(totalIcons),
 		keywords: ["dashboard icons", "service icons", "application icons", "tool icons", "web dashboard", "app directory"],
 		robots: {
 			index: true,
 			follow: true,
 		},
 		openGraph: {
 			title: websiteTitle,
 			description: getDescription(totalIcons),
 			type: "website",
 			url: BASE_URL,
 			images: [
 				{
 					url: "/og-image.png",
 					width: 1200,
 					height: 630,
 					alt: "Dashboard Icons",
 				},
 			],
 		},
 		twitter: {
 			title: websiteTitle,
 			description: getDescription(totalIcons),
 			card: "summary_large_image",
 			images: ["/og-image.png"],
 		},
 		alternates: {
 			canonical: BASE_URL,
 		},
 	}
 }
 async function getGitHubStars() {
 	const response = await fetch(`https://api.github.com/repos/${REPO_NAME}`)
--- a/web/src/components/command-menu.tsx
+++ b/web/src/components/command-menu.tsx
@@ -0,0 +1,138 @@
 "use client"
 import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
 import { useMediaQuery } from "@/hooks/use-media-query"
 import { fuzzySearch } from "@/lib/utils"
 import { Icon } from "@/types/icons"
 import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useState } from "react"
 interface CommandMenuProps {
 	icons: {
 		name: string
 		data: {
 			categories: string[]
 			aliases: string[]
 			[key: string]: unknown
 		}
 	}[]
 	triggerButtonId?: string
 	open?: boolean
 	onOpenChange?: (open: boolean) => void
 }
 export function CommandMenu({ icons, open: externalOpen, onOpenChange: externalOnOpenChange }: CommandMenuProps) {
 	const router = useRouter()
 	const [internalOpen, setInternalOpen] = useState(false)
 	const [query, setQuery] = useState("")
 	const isDesktop = useMediaQuery("(min-width: 768px)")
 	// Use either external or internal state for controlling open state
 	const isOpen = externalOpen !== undefined ? externalOpen : internalOpen
 	// Wrap setIsOpen in useCallback to fix dependency issue
 	const setIsOpen = useCallback(
 		(value: boolean) => {
 			if (externalOnOpenChange) {
 				externalOnOpenChange(value)
 			} else {
 				setInternalOpen(value)
 			}
 		},
 		[externalOnOpenChange],
 	)
 	const filteredIcons = getFilteredIcons(icons, query)
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
 			if (
 				(e.key === "k" && (e.metaKey || e.ctrlKey)) ||
 				(e.key === "/" && document.activeElement?.tagName !== "INPUT" && document.activeElement?.tagName !== "TEXTAREA")
 			) {
 				e.preventDefault()
 				setIsOpen(!isOpen)
 			}
 		}
 		document.addEventListener("keydown", handleKeyDown)
 		return () => document.removeEventListener("keydown", handleKeyDown)
 	}, [isOpen, setIsOpen])
 	function getFilteredIcons(iconList: CommandMenuProps["icons"], query: string) {
 		if (!query) {
 			// Return a limited number of icons when no query is provided
 			return iconList.slice(0, 8)
 		}
 		// Calculate scores for each icon
 		const scoredIcons = iconList.map((icon) => {
 			// Calculate scores for different fields
 			const nameScore = fuzzySearch(icon.name, query) * 2.0 // Give more weight to name matches
 			// Get max score from aliases
 			const aliasScore =
 				icon.data.aliases && icon.data.aliases.length > 0
 					? Math.max(...icon.data.aliases.map((alias) => fuzzySearch(alias, query))) * 1.8 // Increased weight for aliases
 					: 0
 			// Get max score from categories
 			const categoryScore =
 				icon.data.categories && icon.data.categories.length > 0
 					? Math.max(...icon.data.categories.map((category) => fuzzySearch(category, query)))
 					: 0
 			// Use the highest score
 			const score = Math.max(nameScore, aliasScore, categoryScore)
 			return { icon, score, matchedField: score === nameScore ? "name" : score === aliasScore ? "alias" : "category" }
 		})
 		// Filter icons with a minimum score and sort by highest score
 		return scoredIcons
 			.filter((item) => item.score > 0.3) // Higher threshold for more accurate results
 			.sort((a, b) => b.score - a.score)
 			.slice(0, 20) // Limit the number of results
 			.map((item) => item.icon)
 	}
 	const handleSelect = (name: string) => {
 		setIsOpen(false)
 		router.push(`/icons/${name}`)
 	}
 	return (
 		<CommandDialog open={isOpen} onOpenChange={setIsOpen}>
 			<CommandInput placeholder="Search for icons by name, category, or purpose..." value={query} onValueChange={setQuery} />
 			<CommandList>
 				<CommandEmpty>No matching icons found. Try a different search term or browse all icons.</CommandEmpty>
 				<CommandGroup heading="Icons">
 					{filteredIcons.map(({ name, data }) => {
 						// Find matched alias for display if available
 						const matchedAlias =
 							query && data.aliases && data.aliases.length > 0
 								? data.aliases.find((alias) => alias.toLowerCase().includes(query.toLowerCase()))
 								: null
 						return (
 							<CommandItem key={name} value={name} onSelect={() => handleSelect(name)} className="flex items-center gap-2 cursor-pointer">
 								<div className="flex-shrink-0 h-5 w-5 relative">
 									<div className="h-5 w-5 bg-rose-100 dark:bg-rose-900/30 rounded-md flex items-center justify-center">
 										<span className="text-[10px] font-medium text-rose-800 dark:text-rose-300">{name.substring(0, 2).toUpperCase()}</span>
 									</div>
 								</div>
 								<span className="flex-grow capitalize">{name.replace(/-/g, " ")}</span>
 								{matchedAlias && <span className="text-xs text-primary-500 truncate max-w-[100px]">alias: {matchedAlias}</span>}
 								{!matchedAlias && data.categories && data.categories.length > 0 && (
 									<span className="text-xs text-muted-foreground truncate max-w-[100px]">
 										{data.categories[0].replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
 									</span>
 								)}
 							</CommandItem>
 						)
 					})}
 				</CommandGroup>
 			</CommandList>
 		</CommandDialog>
 	)
 }
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -3,14 +3,42 @@
 import { IconSubmissionForm } from "@/components/icon-submission-form"
 import { ThemeSwitcher } from "@/components/theme-switcher"
 import { REPO_PATH } from "@/constants"
 import { getIconsArray } from "@/lib/api"
 import type { IconWithName } from "@/types/icons"
 import { motion } from "framer-motion"
-import { Github } from "lucide-react"
+import { Github, Search } from "lucide-react"
 import Link from "next/link"
 import { useEffect, useState } from "react"
 import { CommandMenu } from "./command-menu"
 import { HeaderNav } from "./header-nav"
 import { Button } from "./ui/button"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
 export function Header() {
 	const [iconsData, setIconsData] = useState<IconWithName[]>([])
 	const [isLoaded, setIsLoaded] = useState(false)
 	const [commandMenuOpen, setCommandMenuOpen] = useState(false)
 	useEffect(() => {
 		async function loadIcons() {
 			try {
 				const icons = await getIconsArray()
 				setIconsData(icons)
 				setIsLoaded(true)
 			} catch (error) {
 				console.error("Failed to load icons:", error)
 				setIsLoaded(true)
 			}
 		}
 		loadIcons()
 	}, [])
 	// Function to open the command menu
 	const openCommandMenu = () => {
 		setCommandMenuOpen(true)
 	}
 	return (
 		<motion.header
 			className="border-b sticky top-0 z-50 backdrop-blur-2xl bg-background/50 border-border/50"
@@ -28,6 +56,30 @@ export function Header() {
 					</div>
 				</div>
 				<div className="flex items-center gap-2 md:gap-4">
 					{/* Desktop search button */}
 					<div className="hidden md:block">
 						<Button variant="outline" className="gap-2 cursor-pointer   transition-all duration-300" onClick={openCommandMenu}>
 							<Search className="h-4 w-4 transition-all duration-300" />
 							<span>Find icons</span>
 							<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border/80 bg-muted/80 px-1.5 font-mono text-[10px] font-medium opacity-100">
 								<span className="text-xs">⌘</span>K
 							</kbd>
 						</Button>
 					</div>
 					{/* Mobile search button */}
 					<div className="md:hidden">
 						<Button
 							variant="ghost"
 							size="icon"
 							className="rounded-lg cursor-pointer transition-all duration-300 hover:ring-2 "
 							onClick={openCommandMenu}
 						>
 							<Search className="h-5 w-5 transition-all duration-300" />
 							<span className="sr-only">Find icons</span>
 						</Button>
 					</div>
 					<div className="hidden md:flex items-center gap-2 md:gap-4">
 						<IconSubmissionForm />
 						<TooltipProvider>
@@ -54,6 +106,9 @@ export function Header() {
 					<ThemeSwitcher />
 				</div>
 			</div>
 			{/* Single instance of CommandMenu */}
 			{isLoaded && <CommandMenu icons={iconsData} open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />}
 		</motion.header>
 	)
 }
--- a/web/src/components/magicui/animated-shiny-text.tsx
+++ b/web/src/components/magicui/animated-shiny-text.tsx
@@ -0,0 +1,33 @@
 import type { CSSProperties, ComponentPropsWithoutRef, FC } from "react"
 import { cn } from "@/lib/utils"
 export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> {
 	shimmerWidth?: number
 }
 export const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({ children, className, shimmerWidth = 100, ...props }) => {
 	return (
 		<span
 			style={
 				{
 					"--shiny-width": `${shimmerWidth}px`,
 				} as CSSProperties
 			}
 			className={cn(
 				"mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
 				// Shine effect
 				"animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
 				// Shine gradient
 				"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
 				className,
 			)}
 			{...props}
 		>
 			{children}
 		</span>
 	)
 }
--- a/web/src/components/ui/command.tsx
+++ b/web/src/components/ui/command.tsx
@@ -0,0 +1,177 @@
 "use client"
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
 import { SearchIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog"
 function Command({
  className,
  ...props
 }: React.ComponentProps<typeof CommandPrimitive>) {
  return (
    <CommandPrimitive
      data-slot="command"
      className={cn(
        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
        className
      )}
      {...props}
    />
  )
 }
 function CommandDialog({
  title = "Command Palette",
  description = "Search for a command to run...",
  children,
  ...props
 }: React.ComponentProps<typeof Dialog> & {
  title?: string
  description?: string
 }) {
  return (
    <Dialog {...props}>
      <DialogHeader className="sr-only">
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>
      <DialogContent className="overflow-hidden p-0">
        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
 }
 function CommandInput({
  className,
  ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
  return (
    <div
      data-slot="command-input-wrapper"
      className="flex h-9 items-center gap-2 border-b px-3"
    >
      <SearchIcon className="size-4 shrink-0 opacity-50" />
      <CommandPrimitive.Input
        data-slot="command-input"
        className={cn(
          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        {...props}
      />
    </div>
  )
 }
 function CommandList({
  className,
  ...props
 }: React.ComponentProps<typeof CommandPrimitive.List>) {
  return (
    <CommandPrimitive.List
      data-slot="command-list"
      className={cn(
        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
        className
      )}
      {...props}
    />
  )
 }
 function CommandEmpty({
  ...props
 }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
  return (
    <CommandPrimitive.Empty
      data-slot="command-empty"
      className="py-6 text-center text-sm"
      {...props}
    />
  )
 }
 function CommandGroup({
  className,
  ...props
 }: React.ComponentProps<typeof CommandPrimitive.Group>) {
  return (
    <CommandPrimitive.Group
      data-slot="command-group"
      className={cn(
        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
        className
      )}
      {...props}
    />
  )
 }
 function CommandSeparator({
  className,
  ...props
 }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
  return (
    <CommandPrimitive.Separator
      data-slot="command-separator"
      className={cn("bg-border -mx-1 h-px", className)}
      {...props}
    />
  )
 }
 function CommandItem({
  className,
  ...props
 }: React.ComponentProps<typeof CommandPrimitive.Item>) {
  return (
    <CommandPrimitive.Item
      data-slot="command-item"
      className={cn(
        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
 }
 function CommandShortcut({
  className,
  ...props
 }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="command-shortcut"
      className={cn(
        "text-muted-foreground ml-auto text-xs tracking-widest",
        className
      )}
      {...props}
    />
  )
 }
 export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
 }
--- a/web/src/hooks/use-media-query.ts
+++ b/web/src/hooks/use-media-query.ts
@@ -0,0 +1,25 @@
 "use client"
 import { useEffect, useState } from "react"
 export function useMediaQuery(query: string): boolean {
 	const [matches, setMatches] = useState(false)
 	useEffect(() => {
 		const media = window.matchMedia(query)
 		// Initial check
 		if (media.matches !== matches) {
 			setMatches(media.matches)
 		}
 		// Setup listener for changes
 		const listener = () => setMatches(media.matches)
 		media.addEventListener("change", listener)
 		// Cleanup
 		return () => media.removeEventListener("change", listener)
 	}, [query, matches])
 	return matches
 }
Author	SHA1	Message	Date
Thomas Camlong	f20de48e1a	Merge branch 'main' into feat/pagination	2025-04-24 18:28:47 +02:00
Thomas Camlong	57b0e6a1aa	feat(web): Optimize SEO (#1260 )	2025-04-24 18:22:15 +02:00
Thomas Camlong	038e4dc73d	chore(web): Update Carbon ID	2025-04-24 16:31:45 +02:00
Thomas Camlong	6001d195a6	feat(ci): Specify ID's Signed-off-by: Thomas Camlong <thomas@ajnart.fr> Update add_normal_icon.yml Signed-off-by: Thomas Camlong <thomas@ajnart.fr> Update add_normal_icon.yml Signed-off-by: Thomas Camlong <thomas@ajnart.fr>	2025-04-24 16:31:07 +02:00
Bjorn Lammers	f32b62009b	fix(web): Adjust current page in IconSearch on pagination changes	2025-04-24 16:13:42 +02:00
Bjorn Lammers	e9fe6d3842	fix(web): Run Biome checks and apply fixes	2025-04-24 15:53:08 +02:00
Bjorn Lammers	eb799c3637	feat(web): Add dynamic pagination to IconSearch component	2025-04-24 15:48:19 +02:00