UI/UX improvements: Premium redesign with navigation restructure, glassmorphism stat cards, and background integration

2025-10-29 19:18:44 +05:30
parent 77f8197fc1
commit 6b5ccf3123
57 changed files with 10536 additions and 520 deletions
--- a/src/components/TaskHeader.tsx
+++ b/src/components/TaskHeader.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { theme } from '../theme';
+
+export interface TaskTab {
+  id: string;
+  label: string;
+  badge?: ReactNode;
+}
+
+interface TaskHeaderProps {
+  title: string;
+  subtitle?: string;
+  tabs: TaskTab[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+}
+
+/**
+ * Header for the Tasks screen: renders hero copy plus animated pill tabs.
+ */
+const TaskHeader: React.FC<TaskHeaderProps> = ({ title, subtitle, tabs, activeTab, onTabChange }) => {
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <h1
+          className="font-playfair text-3xl font-semibold text-cream"
+          style={{ letterSpacing: '0.6px' }}
+        >
+          {title}
+        </h1>
+        {subtitle && (
+          <p className="max-w-2xl text-base text-cream/70" style={theme.typography.body}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => onTabChange(tab.id)}
+              className={`relative flex items-center gap-2 rounded-full border px-5 py-2 text-xs font-semibold uppercase tracking-[0.14em] transition-all duration-200 ${
+                isActive
+                  ? 'border-luxury-gold/70 bg-[#1A4036]/80 text-luxury-gold shadow-[0_10px_24px_rgba(203,169,81,0.35)]'
+                  : 'border-transparent bg-transparent text-cream/60 hover:border-luxury-gold/30 hover:bg-[#1A4036]/30 hover:text-cream'
+              }`}
+            >
+              {isActive && (
+                <motion.span
+                  layoutId="task-tab-glow"
+                  className="absolute inset-0 rounded-full bg-luxury-gold/10"
+                  transition={{ type: 'spring', stiffness: 260, damping: 24 }}
+                />
+              )}
+              <span className="relative z-10">{tab.label}</span>
+              {tab.badge && <span className="relative z-10">{tab.badge}</span>}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TaskHeader;