diff --git a/src/App.tsx b/src/App.tsx index 6f43baa..02ed04b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,7 +14,7 @@ function App() { return ( -
+
} /> } /> diff --git a/src/app/globals.css b/src/app/globals.css index 1bde54e..19b7059 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,6 +8,10 @@ box-sizing: border-box; } +html { + scroll-behavior: smooth; +} + body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', @@ -26,16 +30,58 @@ a { text-align: left !important; } +/* Smooth page transitions */ +main { + animation: fadeIn 0.3s ease-in; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + @layer components { .btn-primary { - @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium; + @apply px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:shadow-lg transition-all font-semibold hover:scale-105; } .btn-secondary { - @apply px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium; + @apply px-4 py-2 bg-white/10 backdrop-blur-xl text-white rounded-lg hover:bg-white/20 transition-all font-semibold border border-white/20 hover:border-white/40; } .card { - @apply bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6; + @apply bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl rounded-xl shadow-lg hover:shadow-2xl transition-all p-6 border border-white/10 hover:border-blue-400/50; + } + + .gradient-text { + @apply bg-gradient-to-r from-blue-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent; } + + .glass-effect { + @apply bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl border border-white/10 rounded-2xl; + } +} + +/* Smooth animations */ +@layer utilities { + .animate-fade-in { + animation: fadeIn 0.3s ease-in; + } + + .group-hover\:scale-105:hover { + transform: scale(1.05); + } +} + +/* Global smooth transitions */ +* { + transition-property: background-color, border-color, color, fill, stroke, opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 200ms; } diff --git a/src/components/GridDataAPI.tsx b/src/components/GridDataAPI.tsx index 6d2d1f1..8bf53fa 100644 --- a/src/components/GridDataAPI.tsx +++ b/src/components/GridDataAPI.tsx @@ -1,5 +1,5 @@ import { useState, useCallback } from 'react'; -import { Grid, Columns, Column, TextAlign, ClipMode, type ColumnTemplateProps, type FilterSettings, type SortSettings, ColumnType, VirtualDomType } from '@syncfusion/react-grid'; +import { Grid, Columns, Column, TextAlign, ClipMode, type ColumnTemplateProps, type SortSettings, ColumnType, VirtualDomType } from '@syncfusion/react-grid'; import { type EmployeeData, generateEmployeeData } from '@/app/data2'; import styles from '@/app/scrolling-basic.module.css'; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 13fe687..95bfa13 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -4,24 +4,29 @@ export default function Navbar() { const location = useLocation() const navItems = [ - { href: '/', label: 'Home' }, - { href: '/installation', label: 'Setup' }, - { href: '/data-source', label: 'Data Source' }, - { href: '/visual-template', label: 'Core Features' }, - { href: '/pagination', label: 'Paging' }, - { href: '/virtualization', label: 'Virtual Scroll' }, - { href: '/livedata', label: 'Live Data' }, + { href: '/', label: 'Home', icon: '🏠' }, + { href: '/installation', label: 'Setup', icon: 'βš™οΈ' }, + { href: '/data-source', label: 'Data Source', icon: 'πŸ“Š' }, + { href: '/visual-template', label: 'Features', icon: '✨' }, + { href: '/pagination', label: 'Paging', icon: 'πŸ“„' }, + { href: '/virtualization', label: 'Performance', icon: '⚑' }, + { href: '/livedata', label: 'Live Data', icon: 'πŸ“ˆ' }, ] return ( -