feat: Enhanced What's New feature with NON_TOOLS category and global footer

 What's New Feature & Navigation Improvements:
- Added attractive 'What's New' button to homepage with gradient design and sparkle effects
- Created NON_TOOLS category for better navigation organization (Home, What's New)
- Separated navigation items in sidebar and mobile menu with clear visual hierarchy
- Implemented unified global footer across all pages for consistency

🎨 Design Enhancements:
- Stunning gradient button with indigo→purple→pink colors and hover animations
- Perfect placement between stats and tools grid for maximum visibility
- Consistent indigo-purple theming for non-tools category
- Professional sparkle effects and scale transforms on hover

🔧 Technical Improvements:
- Removed duplicate footer from Terms of Service page
- Unified footer implementation reduces code duplication
- Enhanced mobile dropdown with proper NON_TOOLS separation
- Updated sidebar with category-based styling and separators

📁 Files Modified:
- /src/config/tools.js - Added NON_TOOLS category and What's New entry
- /src/components/ToolSidebar.js - Separated NON_TOOLS with visual hierarchy
- /src/components/Layout.js - Updated mobile menu and implemented global footer
- /src/pages/Home.js - Added attractive What's New button with animations
- /src/pages/TermsOfService.js - Removed duplicate footer
- /src/pages/ReleaseNotes.js - Updated with latest implementation details
This commit is contained in:
dwindown
2025-09-24 19:02:12 +07:00
parent 21d0406ece
commit 7792190ea1
8 changed files with 724 additions and 160 deletions

View File

@@ -1,4 +1,4 @@
import { Edit3, Table, LinkIcon, Hash, Wand2, GitCompare, Type, Home } from 'lucide-react';
import { Edit3, Table, LinkIcon, Hash, Wand2, GitCompare, Type, Home, Sparkles, Zap } from 'lucide-react';
// Master tools configuration - single source of truth
export const TOOL_CATEGORIES = {
@@ -36,6 +36,13 @@ export const TOOL_CATEGORIES = {
hoverColor: 'orange-600',
textColor: 'text-orange-600',
hoverTextColor: 'hover:text-orange-700 dark:hover:text-orange-400'
},
non_tools: {
name: 'Site Navigation',
color: 'from-indigo-500 to-purple-500',
hoverColor: 'indigo-600',
textColor: 'text-indigo-600',
hoverTextColor: 'hover:text-indigo-700 dark:hover:text-indigo-400'
}
};
@@ -98,15 +105,27 @@ export const TOOLS = [
}
];
// Navigation tools (for sidebar)
export const NAVIGATION_TOOLS = [
// Non-tool navigation items (homepage, what's new, etc.)
export const NON_TOOLS = [
{
path: '/',
name: 'Home',
icon: Home,
description: 'Back to homepage',
category: 'navigation'
category: 'non_tools'
},
{
path: '/release-notes',
name: "What's New",
icon: Zap,
description: 'Latest updates and new features',
category: 'non_tools'
}
];
// Navigation tools (for sidebar) - combines non-tools and tools
export const NAVIGATION_TOOLS = [
...NON_TOOLS,
...TOOLS
];