From b4652e248687bf32c5ad0821330a68279020f9f6 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Wed, 18 Jun 2025 01:19:52 -0400
Subject: [PATCH] feat: Add animation components and global styles for improved
 UX

---
 src/components/animations/index.js | 11 +++++++
 src/index.css                      | 48 ++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 src/components/animations/index.js

diff --git a/src/components/animations/index.js b/src/components/animations/index.js
new file mode 100644
index 0000000..27a1638
--- /dev/null
+++ b/src/components/animations/index.js
@@ -0,0 +1,11 @@
+// Animation Components
+export { default as PageTransition } from './PageTransition'
+export { default as LoadingScreen } from './LoadingScreen'
+export { default as SkeletonLoader } from './SkeletonLoader'
+export { default as SmoothButton } from './SmoothButton'
+export { default as SmoothCard } from './SmoothCard'
+export { default as AnimatedList } from './AnimatedList'
+export { default as StaggeredList } from './StaggeredList'
+
+// Animation Styles
+import './PageTransition.css'
diff --git a/src/index.css b/src/index.css
index b5c61c9..3586c73 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,51 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Global animations for smooth interactions */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Smooth scrolling for better UX */
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+/* Global focus styles for better accessibility */
+*:focus-visible {
+  outline: 2px solid #0ea5e9;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Improve button and interactive element performance */
+button, a, [role="button"] {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+/* Ensure smooth transitions for dynamic content */
+* {
+  box-sizing: border-box;
+}
+
+/* Optimize animations for performance */
+.animate-optimized {
+  will-change: transform, opacity;
+}
+
+.animate-optimized.animation-complete {
+  will-change: auto;
+}