From c9d536c5618e2f6b6090b4e18e576af8273353b6 Mon Sep 17 00:00:00 2001 From: ashim-hq Date: Thu, 23 Apr 2026 17:57:11 +0800 Subject: [PATCH] feat: add Lucide icons to all 47 tools with BentoPDF-style card layout --- apps/landing/src/components/bento-grid.tsx | 190 ++++++++++++++++++--- apps/landing/src/styles/globals.css | 5 + 2 files changed, 172 insertions(+), 23 deletions(-) diff --git a/apps/landing/src/components/bento-grid.tsx b/apps/landing/src/components/bento-grid.tsx index 9b01c6d2..0ed0d048 100644 --- a/apps/landing/src/components/bento-grid.tsx +++ b/apps/landing/src/components/bento-grid.tsx @@ -1,6 +1,53 @@ "use client"; -import { Search } from "lucide-react"; +import type { LucideIcon } from "lucide-react"; +import { + AppWindow, + AudioLines, + Code, + Columns, + Columns2, + Copy, + Crop, + Eraser, + Eye, + EyeOff, + FileEdit, + FileImage, + FileOutput, + FileText, + Film, + Focus, + Frame, + Globe, + Grid3x3, + ImagePlus, + Info, + Layers, + LayoutGrid, + Maximize2, + Minimize2, + Palette, + PenLine, + PenTool, + Pipette, + QrCode, + RotateCw, + Scan, + ScanFace, + ScanLine, + ScanText, + Search, + ShieldOff, + SlidersHorizontal, + Sparkles, + TextCursorInput, + Type, + Undo2, + UserCheck, + Wand2, + ZoomIn, +} from "lucide-react"; import { useMemo, useState } from "react"; import { FadeIn } from "./fade-in"; @@ -15,28 +62,37 @@ const categories = [ { id: "ai", name: "AI Tools", color: "#F59E0B" }, ]; -const tools = [ +const tools: { name: string; description: string; category: string; icon: LucideIcon }[] = [ // Essentials { name: "Resize", description: "Resize by pixels, percentage, or social media presets", category: "essentials", + icon: Maximize2, }, { name: "Crop", description: "Freeform crop, aspect ratio presets, shape crop", category: "essentials", + icon: Crop, }, { name: "Rotate & Flip", description: "Rotate, flip, and straighten images", category: "essentials", + icon: RotateCw, + }, + { + name: "Convert", + description: "Convert between image formats", + category: "essentials", + icon: FileOutput, }, - { name: "Convert", description: "Convert between image formats", category: "essentials" }, { name: "Compress", description: "Reduce file size by quality or target size", category: "essentials", + icon: Minimize2, }, // Optimization { @@ -44,170 +100,255 @@ const tools = [ description: "Optimize images for web with format conversion, quality control, and live preview", category: "optimization", + icon: Globe, }, { name: "Remove Metadata", description: "Remove EXIF, GPS, and camera info", category: "optimization", + icon: ShieldOff, }, { name: "Edit Metadata", description: "Edit EXIF, GPS, and camera info", category: "optimization", + icon: PenLine, }, { name: "Bulk Rename", description: "Rename multiple files with patterns", category: "optimization", + icon: FileEdit, }, { name: "Image to PDF", description: "Combine images into a PDF document", category: "optimization", + icon: FileText, }, { name: "Favicon Generator", description: "Generate all favicon and app icon sizes", category: "optimization", + icon: AppWindow, }, // Adjustments { name: "Adjust Colors", description: "Brightness, contrast, exposure, saturation, temperature, sharpness, and effects", category: "adjustments", + icon: SlidersHorizontal, }, { name: "Sharpening", description: "Adaptive, unsharp mask, and high-pass sharpening with presets", category: "adjustments", + icon: Focus, }, { name: "Replace & Invert Color", description: "Replace specific colors or invert", category: "adjustments", + icon: Pipette, }, // AI Tools - { name: "Remove Background", description: "AI-powered background removal", category: "ai" }, - { name: "Image Upscaling", description: "AI super-resolution enhancement", category: "ai" }, - { name: "Object Eraser", description: "Remove unwanted objects with AI", category: "ai" }, - { name: "OCR / Text Extraction", description: "Extract text from images", category: "ai" }, + { + name: "Remove Background", + description: "AI-powered background removal", + category: "ai", + icon: Eraser, + }, + { + name: "Image Upscaling", + description: "AI super-resolution enhancement", + category: "ai", + icon: ZoomIn, + }, + { + name: "Object Eraser", + description: "Remove unwanted objects with AI", + category: "ai", + icon: Wand2, + }, + { + name: "OCR / Text Extraction", + description: "Extract text from images", + category: "ai", + icon: ScanText, + }, { name: "Face / PII Blur", description: "Auto-detect and blur faces and sensitive info", category: "ai", + icon: EyeOff, }, { name: "Smart Crop", description: "Smart subject, face, or trim-based cropping", category: "ai", + icon: Scan, }, { name: "Image Enhancement", description: "One-click auto-improve with smart analysis", category: "ai", + icon: Sparkles, + }, + { + name: "Face Enhancement", + description: "Restore and enhance faces with AI", + category: "ai", + icon: ScanFace, }, - { name: "Face Enhancement", description: "Restore and enhance faces with AI", category: "ai" }, { name: "AI Colorization", description: "Convert B&W photos to full color with AI", category: "ai", + icon: Palette, + }, + { + name: "Noise Removal", + description: "AI-powered noise and grain removal", + category: "ai", + icon: AudioLines, }, - { name: "Noise Removal", description: "AI-powered noise and grain removal", category: "ai" }, { name: "Red Eye Removal", description: "AI-detect and fix red eye in flash photos", category: "ai", + icon: Eye, }, { name: "Photo Restoration", description: "Fix scratches, tears, and damage on old photos with AI", category: "ai", + icon: Undo2, }, { name: "Passport Photo", description: "AI-powered passport and ID photo generator", category: "ai", + icon: UserCheck, }, // Watermark & Overlay - { name: "Text Watermark", description: "Add text watermark overlay", category: "watermark" }, - { name: "Image Watermark", description: "Overlay a logo as watermark", category: "watermark" }, - { name: "Text Overlay", description: "Add styled text to images", category: "watermark" }, + { + name: "Text Watermark", + description: "Add text watermark overlay", + category: "watermark", + icon: Type, + }, + { + name: "Image Watermark", + description: "Overlay a logo as watermark", + category: "watermark", + icon: ImagePlus, + }, + { + name: "Text Overlay", + description: "Add styled text to images", + category: "watermark", + icon: TextCursorInput, + }, { name: "Image Composition", description: "Layer images with position and opacity", category: "watermark", + icon: Layers, }, // Utilities { name: "Image Info", description: "View all metadata and image properties", category: "utilities", + icon: Info, }, { name: "Image Compare", description: "Side-by-side comparison of two images", category: "utilities", + icon: Columns2, }, { name: "Find Duplicates", description: "Detect duplicate and near-duplicate images", category: "utilities", + icon: Copy, }, { name: "Color Palette", description: "Extract dominant colors from image", category: "utilities", + icon: Palette, }, { name: "QR Code Generator", description: "Generate styled QR codes with custom colors, patterns, and logos", category: "utilities", + icon: QrCode, }, { name: "Barcode Reader", description: "Scan images for QR codes, barcodes, and 2D codes", category: "utilities", + icon: ScanLine, }, { name: "Image to Base64", description: "Convert images to base64 strings for embedding in HTML, CSS, and more", category: "utilities", + icon: Code, }, // Layout & Composition { name: "Collage / Grid", description: "Combine images into beautiful grid collages with 25+ templates", category: "layout", + icon: LayoutGrid, }, { name: "Stitch / Combine", description: "Join images side by side, stacked, or in a grid", category: "layout", + icon: Columns, }, { name: "Image Splitting", description: "Split images into grid tiles or by pixel size with live preview", category: "layout", + icon: Grid3x3, }, { name: "Border & Frame", description: "Add borders, rounded corners, shadows", category: "layout", + icon: Frame, }, // Format & Conversion { name: "SVG to Raster", description: "Convert SVG to PNG, JPEG, WebP, AVIF, TIFF, GIF, or HEIF at custom scale and DPI", category: "format", + icon: FileImage, + }, + { + name: "Image to SVG", + description: "Vectorize images using tracing", + category: "format", + icon: PenTool, }, - { name: "Image to SVG", description: "Vectorize images using tracing", category: "format" }, { name: "GIF Tools", description: "Resize, optimize, change speed, reverse, extract frames, and rotate animated GIFs", category: "format", + icon: Film, + }, + { + name: "PDF to Image", + description: "Convert PDF pages to images", + category: "format", + icon: FileOutput, }, - { name: "PDF to Image", description: "Convert PDF pages to images", category: "format" }, ]; const categoryMap = new Map(categories.map((c) => [c.id, c])); @@ -298,27 +439,30 @@ export function BentoGrid() { {/* Tool grid */} {filtered.length > 0 ? ( -
+
{filtered.map((tool) => { const cat = categoryMap.get(tool.category); + const Icon = tool.icon; return (
-
- - {tool.name} + +
+ {tool.name} {tool.category === "ai" && ( AI )}
-

{tool.description}

+

{tool.description}

); })} diff --git a/apps/landing/src/styles/globals.css b/apps/landing/src/styles/globals.css index 73c7d6b4..b9fc366a 100644 --- a/apps/landing/src/styles/globals.css +++ b/apps/landing/src/styles/globals.css @@ -13,3 +13,8 @@ --color-dark-fg: #fafaf9; --color-dark-muted: #a8a29e; } + +/* Tool card hover border uses --cat-color set inline */ +.tool-card:hover { + border-color: var(--cat-color); +}