feat: implement core frontend layout, navigation, and initial content pages.

Author: Sagargupta16

frontend/src/components/analytics/FYNavigator.tsx

@@ -49,7 +49,7 @@ export default function FYNavigator({
         <div className="text-center flex-1">
           <div className="flex items-center justify-center gap-4">
             <div>
-              <h2 className="text-3xl font-bold text-white">{selectedFY || 'Select FY'}</h2>
+              <h2 className="text-2xl sm:text-3xl font-bold text-white">{selectedFY || 'Select FY'}</h2>
               <p className="text-sm text-muted-foreground mt-1">
                 {isNewRegime
                   ? 'New Tax Regime (2025-26 onwards)'

frontend/src/components/analytics/FinancialHealthScore.tsx

@@ -682,7 +682,7 @@ function ScoreHeader({
         </div>
       </div>
       <div className="text-right">
-        <p className={`text-3xl font-bold ${status.color}`}>{Math.round(overallScore)}</p>
+        <p className={`text-2xl sm:text-3xl font-bold ${status.color}`}>{Math.round(overallScore)}</p>
         <p className={`text-sm font-medium ${status.color}`}>{status.label}</p>
       </div>
     </div>

frontend/src/components/analytics/MonthlyFinancialReportCard.tsx

@@ -201,7 +201,7 @@ export default function MonthlyFinancialReportCard() {
           {/* Overall Grade */}
           <div className="flex flex-col items-center mb-8">
             <div
-              className="w-24 h-24 rounded-full flex items-center justify-center text-4xl font-bold text-white shadow-lg"
+              className="w-24 h-24 rounded-full flex items-center justify-center text-2xl sm:text-3xl md:text-4xl font-bold text-white shadow-lg"
               style={{
                 backgroundColor: `${GRADE_COLORS[report.overall]}20`,
                 boxShadow: `0 8px 32px ${GRADE_COLORS[report.overall]}30`,

frontend/src/components/analytics/SpendingVelocityGauge.tsx

@@ -110,7 +110,7 @@ export default function SpendingVelocityGauge() {
         </div>
 
         {/* Stats */}
-        <div className="grid grid-cols-2 gap-4 flex-1 w-full">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 flex-1 w-full">
           <div className="p-4 rounded-xl bg-white/5 border border-border">
             <p className="text-xs text-text-tertiary">Daily Rate</p>
             <p className="text-lg font-semibold text-white mt-1">{formatCurrency(dailyRate)}</p>

frontend/src/components/analytics/SubcategoryAnalysis.tsx

@@ -290,7 +290,7 @@ export default function SubcategoryAnalysis({ categoryData }: Readonly<Subcatego
                       )}
                     </div>
 
-                    <div className="grid grid-cols-2 gap-4 mb-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 mb-4">
                       <div className="p-3 bg-white/5 rounded-lg">
                         <div className="text-sm text-muted-foreground mb-1">Total Spending</div>
                         <div className="text-lg font-semibold text-white">

frontend/src/components/analytics/TaxSummaryCards.tsx

@@ -16,7 +16,7 @@ export default function TaxSummaryCards({
   taxAlreadyPaid,
 }: Readonly<TaxSummaryCardsProps>) {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}

frontend/src/components/layout/Sidebar/Sidebar.tsx

@@ -136,7 +136,7 @@ export default function Sidebar() {
       {/* Mobile toggle button - iOS style */}
       <button
         onClick={() => setIsMobileOpen(!isMobileOpen)}
-        className="lg:hidden fixed top-4 left-4 z-50 p-3 rounded-2xl glass-strong shadow-xl shadow-black/20 active:scale-95 transition-transform"
+        className="lg:hidden fixed top-4 left-4 z-50 w-11 h-11 flex items-center justify-center rounded-2xl glass-strong shadow-xl shadow-black/20 active:scale-95 transition-transform"
         aria-label={isMobileOpen ? 'Close menu' : 'Open menu'}
       >
         {isMobileOpen ? <X size={22} className="text-white" /> : <Menu size={22} className="text-white" />}

frontend/src/components/shared/MetricCard.tsx

@@ -137,7 +137,7 @@ export default function MetricCard({ title, value, change, invertChange, changeL
 
       {/* Animated Value */}
       <div className="flex items-baseline gap-2 relative z-10">
-        <p className="text-3xl font-semibold text-white">
+        <p className="text-xl sm:text-2xl md:text-3xl font-semibold text-white">
           <AnimatedValue value={value} reducedMotion={reducedMotion} />
         </p>
       </div>

frontend/src/components/shared/QuickInsights.tsx

@@ -328,7 +328,7 @@ export default function QuickInsights({ dateRange = {} }: QuickInsightsProps) {
 
   if (isLoading) {
     return (
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
         {Array.from({ length: 14 }, (_, i) => (
           <LoadingSkeleton key={`skeleton-${i}`} className="h-16 w-full" />
         ))}
@@ -338,7 +338,7 @@ export default function QuickInsights({ dateRange = {} }: QuickInsightsProps) {
 
   return (
     <motion.div
-      className="grid grid-cols-1 lg:grid-cols-2 gap-3"
+      className="grid grid-cols-1 sm:grid-cols-2 gap-3"
       variants={staggerContainer}
       initial="hidden"
       animate="visible"

frontend/src/components/ui/PageHeader.tsx

@@ -29,13 +29,13 @@ const PageHeader = memo(function PageHeader({ title, subtitle, action }: PageHea
   return (
     <Wrapper
       {...(!reducedMotion && { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 } })}
-      className="sticky top-0 z-20 -mx-8 px-8 py-4 transition-all duration-300 backdrop-blur-xl bg-background/80"
+      className="sticky top-0 z-20 -mx-4 md:-mx-6 lg:-mx-8 px-4 md:px-6 lg:px-8 py-3 md:py-4 transition-all duration-300 backdrop-blur-xl bg-background/80"
       style={{
         paddingTop: scrolled ? '0.75rem' : '1rem',
         paddingBottom: scrolled ? '0.75rem' : '1rem',
       }}
     >
-      <div className="flex items-start justify-between gap-4">
+      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
         <div className="min-w-0">
           <h1
             className="text-page-title text-white tracking-tight transition-all duration-300"