home UI improvements

TECHNICAL_DOCUMENTATION.md

@@ -2,7 +2,43 @@
 
 ## Recent Changes
 
-### Character Blogs Removal (Latest Update)
+### Character Network Updates (Latest Update)
+
+- Relocated zoom controls to top right of network container
+- Improved zoom functionality implementation:
+  - Fixed zoom in/out controls
+  - Added proper TypeScript types for ForceGraph methods
+  - Removed unused interfaces and functions
+  - Updated button handlers for better reliability
+- Type System Improvements:
+
+  ```typescript
+  interface ForceGraphMethods {
+    zoom: (k?: number) => number;
+    zoomToFit: (duration?: number, padding?: number) => void;
+    d3Force: (
+      forceName: string,
+      force?: d3.Force<d3.SimulationNodeDatum, undefined>
+    ) => void;
+    d3ReheatSimulation: () => void;
+    getZoom: () => number;
+  }
+
+  type ForceGraphInstance = ForceGraphMethods;
+  ```
+
+- UI Enhancements:
+  - Improved zoom controls layout
+  - Added vertical stacking for better organization
+  - Enhanced tooltip visibility
+  - Maintained consistent styling with sage color scheme
+- Code Cleanup:
+  - Removed unused types and interfaces
+  - Cleaned up force graph method definitions
+  - Improved type safety for graph interactions
+  - Fixed linter errors and warnings
+
+### Character Blogs Removal
 
 - Removed character blogs feature completely
 - Deleted related files:
@@ -220,7 +256,42 @@ The project maintains its elegant aesthetic while emphasizing academic content:
 
 ## Character Network Feature
 
-The character network visualization maintains its technical implementation while focusing on academic analysis:
+The character network visualization provides an interactive 3D-like visualization of character relationships:
+
+### Recent Updates
+
+1. Visual Enhancements
+
+   - Implemented 3D-like node aesthetics with shadows and depth
+   - Adopted sage theme color scheme matching social class page
+   - Pentagon layout for book nodes with character nodes arranged around them
+   - Improved node positioning and stability
+   - Enhanced force simulation parameters for smoother interactions
+
+2. Interaction Improvements
+
+   - Optimized single-click behavior for immediate response
+   - Enhanced node hovering and tooltip behavior
+   - Improved animation transitions
+   - Added debouncing for smoother interactions
+   - Repositioned zoom controls to top right of network container
+
+3. UI Refinements
+
+   - Added informative tip element under Character Network heading
+   - Removed question mark tooltip for cleaner interface
+   - Improved layout structure and container positioning
+   - Enhanced visual hierarchy and spacing
+   - Better integration with overall page design
+
+4. Technical Implementation
+   - Proper TypeScript typing for all components
+   - Optimized force simulation settings
+   - Improved link routing and curvature
+   - Enhanced node canvas rendering
+   - Better state management for interactions
+
+### Core Features
 
 ```typescript
 interface CharacterNode {
@@ -240,24 +311,120 @@ interface Relationship {
 }
 ```
 
+### Visualization Components
+
+1. Node Styling
+
+   - 3D-like appearance with shadows
+   - Sage color scheme integration
+   - Size variations based on node type
+   - Smooth hover effects
+   - Clear visual hierarchy
+
+2. Layout Structure
+
+   - Pentagon arrangement for book nodes
+   - Optimized character node positioning
+   - Improved force-directed layout
+   - Better link routing
+   - Stable node placement
+
+3. Interactive Elements
+
+   - Responsive zoom controls
+   - Smooth node selection
+   - Enhanced tooltips
+   - Intuitive navigation
+   - Clear visual feedback
+
+4. Performance Optimizations
+   - Efficient force simulation
+   - Optimized rendering
+   - Smooth animations
+   - Responsive interactions
+   - Stable positioning
+
 ## Timeline Feature
 
-The timeline now emphasizes literary chronology and analysis:
+The timeline has been enhanced with improved styling and functionality:
+
+### Visual Design
+
+- Implemented a continuous gradient background using sage color scheme
+- Removed vertical dividers for cleaner appearance
+- Added white horizontal center line for visual reference
+- Adjusted z-index layering:
+  - Year markers (z-index: 1)
+  - Regular events (z-index: 5)
+  - Selected events (z-index: 10)
+  - Hovered events (z-index: 15)
+  - Slider element (z-index: 50-51)
+
+### Component Structure
+
+- Replaced Material-UI tabs with custom Tabs component for consistency
+- Updated tab styling to match literary analysis page
+- Components hierarchy:
+  ```typescript
+  <Tabs defaultValue="interactive">
+    <TabsList>
+      <TabsTrigger value="interactive">Interactive Timeline</TabsTrigger>
+      <TabsTrigger value="basic">Basic Timeline</TabsTrigger>
+    </TabsList>
+    <TabsContent value="interactive">
+      <InteractiveTimeline />
+    </TabsContent>
+    <TabsContent value="basic">
+      <BasicTimeline />
+    </TabsContent>
+  </Tabs>
+  ```
+
+### Timeline Events
 
 ```typescript
 interface TimelineEvent {
   year: number;
-  type: "publication" | "writing" | "context" | "adaptation";
+  type: "works" | "context" | "legacy" | "adaptations";
   title: string;
   description: string;
-  criticalContext: string;
+  significance?: string;
-  literarySignificance: string;
 }
 ```
 
+### Color Scheme
+
+- Background gradient:
+  ```typescript
+  const timePeriods = [
+    { color: "rgba(74, 93, 82, 0.1)" }, // Early Life
+    { color: "rgba(74, 93, 82, 0.15)" }, // Juvenilia
+    { color: "rgba(74, 93, 82, 0.2)" }, // Publication Years
+    { color: "rgba(74, 93, 82, 0.25)" }, // Victorian Reception
+    { color: "rgba(74, 93, 82, 0.3)" }, // 20th Century
+    { color: "rgba(74, 93, 82, 0.35)" }, // Contemporary
+  ];
+  ```
+
+### Interactive Elements
+
+- Draggable slider with improved visibility
+- Event dots with hover effects
+- Year markers positioned behind events
+- Smooth transitions and animations
+- Responsive layout adjustments
+
+### Best Practices
+
+- Consistent use of sage color palette
+- Proper z-index management for layering
+- Smooth animations for interactions
+- Responsive design considerations
+- Accessibility improvements through proper contrast
+
 ## Social Class Analysis
 
-Enhanced focus on academic analysis of class dynamics:
+Enhanced focus on academic analysis of class dynamics with interactive features:
 
 ```typescript
 interface SocialClassAnalysis {
@@ -269,3 +436,219 @@ interface SocialClassAnalysis {
   criticalPerspectives: string[];
 }
 ```
+
+### Key Features
+
+1. Interactive Social Pyramid
+
+   - Visual representation of Regency era social hierarchy
+   - Gradient-based design using sage color palette
+   - Enhanced tooltips with opaque white background
+   - Responsive sizing and animations
+   - Custom tooltip styling with improved readability
+
+2. Character Comparison Tool
+
+   - Interactive character selection system
+   - Enhanced visual feedback for selected states
+   - Side-by-side comparison view
+   - Economic and social context display
+   - Selection status messages
+   - Ability to deselect characters
+
+3. Visual Design
+   - Sage color scheme throughout
+   - Cormorant font for headings
+   - Lato font for body text
+   - Consistent spacing and typography
+   - Enhanced contrast and readability
+
+### Component Structure
+
+#### Social Class View
+
+```typescript
+interface SocialClass {
+  name: string;
+  description: string;
+  incomeRange: string;
+  modernEquivalent: string;
+  characteristics: string[];
+  examples: {
+    character: string;
+    novel: string;
+    context: string;
+  }[];
+}
+
+interface Character {
+  id: string;
+  name: string;
+  novel: string;
+  socialClass: "upper" | "middle" | "working";
+  occupation: string;
+  annualIncome: string;
+  modernEquivalent: string;
+  description: string;
+  relationships: string[];
+}
+```
+
+#### UI Components
+
+1. Social Pyramid
+
+   - Hierarchical visualization
+   - Enhanced tooltips with:
+     - White opaque background
+     - Custom arrow styling
+     - Improved shadow effects
+     - Class description
+     - Income ranges
+     - Modern equivalents
+     - Key characteristics
+   - Custom MUI tooltip styling for better visibility
+
+2. Character Cards
+
+   - Enhanced selection state indicators:
+     - Border highlight
+     - Scale transform
+     - Shadow effect
+     - Left accent bar
+   - Visual feedback on hover/selection
+   - Social class badges with scaling effect
+   - Income information
+   - Modern equivalent values
+   - Status message for selected state
+
+3. Comparison Dialog
+   - Side-by-side character comparison
+   - Detailed economic information
+   - Social context
+   - Character relationships
+   - Improved typography and spacing
+
+### Styling
+
+1. Color Palette
+
+```typescript
+const pyramidColors = {
+  upper: {
+    start: "#4A5D52", // darker sage
+    end: "#6B7F75", // lighter sage
+  },
+  middle: {
+    start: "#5B6E65",
+    end: "#7C8F86",
+  },
+  lower: {
+    start: "#6B7F75",
+    end: "#8C9F96",
+  },
+};
+```
+
+2. Typography
+
+   - Headings: Cormorant font
+   - Body: Lato font
+   - Consistent text hierarchy
+   - Enhanced readability
+   - Improved contrast ratios
+
+3. Interactive Elements
+
+   - Enhanced hover states with subtle animations
+   - Improved selection indicators
+   - Clear status messages for user feedback
+   - Smooth transitions
+   - Scale transforms for selected states
+
+4. Tooltip Styling
+
+```typescript
+const tooltipStyles = {
+  tooltip: {
+    backgroundColor: "white",
+    color: "inherit",
+    boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
+    opacity: 1,
+    maxWidth: "none",
+  },
+  arrow: {
+    color: "white",
+    "&::before": {
+      backgroundColor: "white",
+      boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
+    },
+  },
+};
+```
+
+5. Layout
+   - Responsive grid system
+   - Proper spacing and padding
+   - Card-based design
+   - Clear visual hierarchy
+   - Enhanced component spacing
+
+### User Experience
+
+1. Character Selection
+
+   - Click to select first character
+   - Click another to compare
+   - Click selected character to deselect
+   - Clear visual feedback
+   - Status messages guide user actions
+
+2. Comparison Flow
+
+   - Improved status messages guide user actions
+   - Enhanced selection states
+   - Easy-to-use comparison dialog
+   - Intuitive navigation
+   - Clear deselection option
+
+3. Social Class Information
+
+   - Enhanced tooltips with better visibility
+   - Economic context
+   - Modern equivalents
+   - Key characteristics
+   - Improved information hierarchy
+
+4. Accessibility
+   - High contrast text
+   - Clear visual hierarchy
+   - Proper spacing
+   - Readable font sizes
+   - Enhanced tooltip readability
+   - Improved interactive states
+
+### Recent Updates
+
+1. Tooltip Enhancements
+
+   - Added white opaque background
+   - Improved shadow effects
+   - Custom arrow styling
+   - Better visibility against all backgrounds
+   - Enhanced typography
+
+2. Selection State Improvements
+
+   - Added visual feedback for selected cards
+   - Implemented deselection functionality
+   - Added status messages
+   - Enhanced hover states
+   - Improved transitions
+
+3. Visual Refinements
+   - Better contrast ratios
+   - Enhanced spacing
+   - Improved component hierarchy
+   - Consistent styling across all elements
+   - Refined animations and transitions

src/pages/Home.tsx

@@ -1,141 +1,261 @@
 import { Link } from 'react-router-dom';
-import { ArrowRight, BookOpen, Heart, PenTool, Calendar, BookMarked } from 'lucide-react';
+import {
+  ArrowRight,
+  BookOpen,
+  Heart,
+  PenTool,
+  Calendar,
+  Users,
+  Calculator,
+  Store,
+  Trophy,
+  Network,
+  BookText
+} from 'lucide-react';
 
 const Home = () => {
   return (
-    <div className="min-h-screen space-y-16 pb-16">
+    <div className="min-h-screen space-y-12 pb-16">
       {/* Hero Section */}
-      <section className="relative bg-gradient-to-b from-cream-100 to-sage-50 py-24">
+      <section className="relative bg-gradient-to-b from-cream-100 to-sage-50 py-32">
-        <div className="container mx-auto px-4 text-center space-y-8">
+        <div className="container mx-auto px-4">
-          <h1 className="font-cormorant text-6xl text-sage-900 mb-6">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
-            Austen's Wedding Guide
+            <div className="text-left space-y-6">
-          </h1>
+              <h1 className="font-cormorant text-7xl text-sage-900 leading-tight">
-          <p className="font-lato text-xl text-sage-700 max-w-3xl mx-auto leading-relaxed">
+                Discover the Art of <span className="text-sage-700">Matrimony</span> Through Austen
-            A modern exploration of matrimony through Jane Austen's timeless lens.
+              </h1>
-            Discover wedding wisdom, social commentary, and romantic insights from literature's most beloved matchmaker.
+              <p className="font-lato text-xl text-sage-700 leading-relaxed">
-          </p>
+                A modern exploration of marriage, society, and romance through Jane Austen's timeless lens.
-          <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto mt-8">
+                Uncover wedding wisdom and romantic insights from literature's most beloved matchmaker.
-            <div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg border border-sage-100">
-              <h3 className="font-cormorant text-2xl text-sage-900 mb-2">Interactive Timeline</h3>
-              <p className="text-sage-700 mb-4">
-                Journey through Austen's literary universe chronologically, exploring the evolution of romantic relationships and social dynamics across her works.
               </p>
-              <Link
+              <div className="flex flex-wrap gap-4 pt-4">
-                to="/timeline"
+                <Link
-                className="text-sage-600 hover:text-sage-800 inline-flex items-center"
+                  to="/analysis"
-              >
+                  className="inline-flex items-center px-8 py-4 bg-sage-600 text-white rounded-lg hover:bg-sage-700 transition-all transform hover:scale-105"
-                Explore Timeline <ArrowRight className="ml-1 h-4 w-4" />
+                >
-              </Link>
+                  Start Exploring
+                  <ArrowRight className="ml-2 h-5 w-5" />
+                </Link>
+                <Link
+                  to="/quiz"
+                  className="inline-flex items-center px-8 py-4 bg-cream-200 text-sage-700 rounded-lg hover:bg-cream-300 transition-all transform hover:scale-105"
+                >
+                  Take the Quiz
+                  <ArrowRight className="ml-2 h-5 w-5" />
+                </Link>
+              </div>
             </div>
-            <div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg border border-sage-100">
+            <div className="grid grid-cols-2 gap-6">
-              <h3 className="font-cormorant text-2xl text-sage-900 mb-2">Character Network</h3>
+              <div className="space-y-6">
-              <p className="text-sage-700 mb-4">
+                <div className="bg-white/90 backdrop-blur-sm p-6 rounded-xl border border-sage-100 shadow-lg transform hover:-translate-y-1 transition-all">
-                Visualize the intricate web of relationships, social connections, and matrimonial prospects between Austen's memorable characters.
+                  <Network className="h-8 w-8 text-sage-600 mb-3" />
-              </p>
+                  <h3 className="font-cormorant text-xl text-sage-900 mb-2">Character Network</h3>
-              <Link
+                  <p className="text-sage-700 text-sm mb-3">
-                to="/network"
+                    Explore relationships and connections between characters.
-                className="text-sage-600 hover:text-sage-800 inline-flex items-center"
+                  </p>
-              >
+                  <Link
-                View Network <ArrowRight className="ml-1 h-4 w-4" />
+                    to="/network"
-              </Link>
+                    className="text-sage-600 hover:text-sage-800 text-sm inline-flex items-center"
+                  >
+                    View Network <ArrowRight className="ml-1 h-4 w-4" />
+                  </Link>
+                </div>
+                <div className="bg-white/90 backdrop-blur-sm p-6 rounded-xl border border-sage-100 shadow-lg transform hover:-translate-y-1 transition-all mt-4">
+                  <Calculator className="h-8 w-8 text-sage-600 mb-3" />
+                  <h3 className="font-cormorant text-xl text-sage-900 mb-2">Market Calculator</h3>
+                  <p className="text-sage-700 text-sm mb-3">
+                    Calculate dowries and estates in modern terms.
+                  </p>
+                  <Link
+                    to="/market-calculator"
+                    className="text-sage-600 hover:text-sage-800 text-sm inline-flex items-center"
+                  >
+                    Try Calculator <ArrowRight className="ml-1 h-4 w-4" />
+                  </Link>
+                </div>
+              </div>
+              <div className="space-y-6 mt-12">
+                <div className="bg-white/90 backdrop-blur-sm p-6 rounded-xl border border-sage-100 shadow-lg transform hover:-translate-y-1 transition-all">
+                  <Calendar className="h-8 w-8 text-sage-600 mb-3" />
+                  <h3 className="font-cormorant text-xl text-sage-900 mb-2">Timeline</h3>
+                  <p className="text-sage-700 text-sm mb-3">
+                    Journey through Austen's literary universe.
+                  </p>
+                  <Link
+                    to="/timeline"
+                    className="text-sage-600 hover:text-sage-800 text-sm inline-flex items-center"
+                  >
+                    Explore Timeline <ArrowRight className="ml-1 h-4 w-4" />
+                  </Link>
+                </div>
+                <div className="bg-white/90 backdrop-blur-sm p-6 rounded-xl border border-sage-100 shadow-lg transform hover:-translate-y-1 transition-all">
+                  <Trophy className="h-8 w-8 text-sage-600 mb-3" />
+                  <h3 className="font-cormorant text-xl text-sage-900 mb-2">Success Stories</h3>
+                  <p className="text-sage-700 text-sm mb-3">
+                    Real stories inspired by Austen's works.
+                  </p>
+                  <Link
+                    to="/success-stories"
+                    className="text-sage-600 hover:text-sage-800 text-sm inline-flex items-center"
+                  >
+                    Read Stories <ArrowRight className="ml-1 h-4 w-4" />
+                  </Link>
+                </div>
+              </div>
             </div>
           </div>
-          <div className="flex justify-center gap-4 pt-8">
-            <Link
-              to="/analysis"
-              className="inline-flex items-center px-6 py-3 bg-sage-600 text-white rounded-lg hover:bg-sage-700 transition"
-            >
-              Explore Analysis
-              <ArrowRight className="ml-2 h-5 w-5" />
-            </Link>
-            <Link
-              to="/quiz"
-              className="inline-flex items-center px-6 py-3 bg-cream-100 text-sage-700 rounded-lg hover:bg-cream-200 transition"
-            >
-              Take the Quiz
-              <ArrowRight className="ml-2 h-5 w-5" />
-            </Link>
-          </div>
         </div>
       </section>
 
-      {/* Main Features Section */}
+      {/* Features Grid */}
-      <section className="container mx-auto px-4">
+      <section className="container mx-auto px-4 py-16">
-        <h2 className="font-cormorant text-4xl text-sage-900 text-center mb-12">
+        <h2 className="font-cormorant text-5xl text-sage-900 text-center mb-16">
-          Discover Our Features
+          Explore Our Features
         </h2>
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <div className="bg-white p-8 rounded-xl shadow-sm border border-sage-100 hover:shadow-md transition">
+          <div className="bg-white p-8 rounded-xl shadow-md border border-sage-100 hover:shadow-lg transition-all transform hover:-translate-y-1">
-            <BookOpen className="h-10 w-10 text-sage-600 mb-4" />
+            <BookOpen className="h-12 w-12 text-sage-600 mb-4" />
             <h3 className="font-cormorant text-2xl text-sage-900 mb-3">Literary Analysis</h3>
             <p className="text-sage-700 mb-4">
-              Deep dive into Austen's works, exploring themes of marriage, social class, and romance through academic lens.
+              Deep dive into Austen's works, exploring themes of marriage, social class, and romance.
             </p>
-            <Link to="/analysis" className="text-sage-600 hover:text-sage-800 inline-flex items-center">
+            <Link
-              Learn More <ArrowRight className="ml-1 h-4 w-4" />
+              to="/analysis"
+              className="inline-flex items-center px-6 py-3 bg-sage-50 text-sage-700 rounded-lg hover:bg-sage-100 transition-all"
+            >
+              Start Analysis <ArrowRight className="ml-2 h-4 w-4" />
             </Link>
           </div>
 
-          <div className="bg-white p-8 rounded-xl shadow-sm border border-sage-100 hover:shadow-md transition">
+          <div className="bg-white p-8 rounded-xl shadow-md border border-sage-100 hover:shadow-lg transition-all transform hover:-translate-y-1">
-            <Heart className="h-10 w-10 text-sage-600 mb-4" />
+            <Users className="h-12 w-12 text-sage-600 mb-4" />
-            <h3 className="font-cormorant text-2xl text-sage-900 mb-3">Success Stories</h3>
+            <h3 className="font-cormorant text-2xl text-sage-900 mb-3">Social Class Study</h3>
             <p className="text-sage-700 mb-4">
-              Explore romantic tales and matrimonial journeys inspired by Austen's iconic love stories.
+              Understand the social dynamics and class structures in Austen's world.
             </p>
-            <Link to="/success-stories" className="text-sage-600 hover:text-sage-800 inline-flex items-center">
+            <Link
-              View Stories <ArrowRight className="ml-1 h-4 w-4" />
+              to="/social-class"
+              className="inline-flex items-center px-6 py-3 bg-sage-50 text-sage-700 rounded-lg hover:bg-sage-100 transition-all"
+            >
+              Study Society <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </div>
+
+          <div className="bg-white p-8 rounded-xl shadow-md border border-sage-100 hover:shadow-lg transition-all transform hover:-translate-y-1">
+            <Store className="h-12 w-12 text-sage-600 mb-4" />
+            <h3 className="font-cormorant text-2xl text-sage-900 mb-3">Wedding Vendors</h3>
+            <p className="text-sage-700 mb-4">
+              Discover curated vendors who bring Austen's elegance to modern weddings.
+            </p>
+            <Link
+              to="/vendors"
+              className="inline-flex items-center px-6 py-3 bg-sage-50 text-sage-700 rounded-lg hover:bg-sage-100 transition-all"
+            >
+              Meet Vendors <ArrowRight className="ml-2 h-4 w-4" />
             </Link>
           </div>
         </div>
       </section>
 
-      {/* Interactive Features Section */}
+      {/* Interactive Tools Section */}
       <section className="bg-cream-50 py-16">
         <div className="container mx-auto px-4">
-          <h2 className="font-cormorant text-4xl text-sage-900 text-center mb-12">
+          <h2 className="font-cormorant text-5xl text-sage-900 text-center mb-12">
             Interactive Experience
           </h2>
-          <div className="grid md:grid-cols-2 gap-8">
+          <div className="grid lg:grid-cols-2 gap-8">
-            <div className="bg-white p-8 rounded-xl shadow-sm">
+            <div className="bg-white p-8 rounded-xl shadow-md">
-              <div className="space-y-6">
+              <div className="space-y-8">
-                <div className="flex items-start gap-4">
+                <div className="flex items-start gap-6 group cursor-pointer">
-                  <PenTool className="h-8 w-8 text-sage-600 mt-1" />
+                  <PenTool className="h-10 w-10 text-sage-600 mt-1 group-hover:scale-110 transition-all" />
                   <div>
-                    <h3 className="font-cormorant text-xl text-sage-900 mb-2">Character Quiz</h3>
+                    <h3 className="font-cormorant text-2xl text-sage-900 mb-2 group-hover:text-sage-700 transition-all">
-                    <p className="text-sage-700">Discover which Austen bride matches your personality and romantic outlook.</p>
+                      Character Quiz
+                    </h3>
+                    <p className="text-sage-700 mb-3">
+                      Discover which Austen bride matches your personality and romantic outlook.
+                    </p>
+                    <Link
+                      to="/quiz"
+                      className="text-sage-600 hover:text-sage-800 inline-flex items-center text-sm"
+                    >
+                      Take Quiz Now <ArrowRight className="ml-1 h-4 w-4" />
+                    </Link>
                   </div>
                 </div>
-                <div className="flex items-start gap-4">
+
-                  <Calendar className="h-8 w-8 text-sage-600 mt-1" />
+                <div className="flex items-start gap-6 group cursor-pointer">
+                  <BookText className="h-10 w-10 text-sage-600 mt-1 group-hover:scale-110 transition-all" />
                   <div>
-                    <h3 className="font-cormorant text-xl text-sage-900 mb-2">Timeline Exploration</h3>
+                    <h3 className="font-cormorant text-2xl text-sage-900 mb-2 group-hover:text-sage-700 transition-all">
-                    <p className="text-sage-700">Navigate through the chronological development of Austen's romantic narratives.</p>
+                      Comparative Analysis
+                    </h3>
+                    <p className="text-sage-700 mb-3">
+                      Compare themes and character arcs across different novels and adaptations.
+                    </p>
+                    <Link
+                      to="/comparative-analysis"
+                      className="text-sage-600 hover:text-sage-800 inline-flex items-center text-sm"
+                    >
+                      Compare Now <ArrowRight className="ml-1 h-4 w-4" />
+                    </Link>
                   </div>
                 </div>
-                <div className="flex items-start gap-4">
+
-                  <BookMarked className="h-8 w-8 text-sage-600 mt-1" />
+                <div className="flex items-start gap-6 group cursor-pointer">
+                  <Calculator className="h-10 w-10 text-sage-600 mt-1 group-hover:scale-110 transition-all" />
                   <div>
-                    <h3 className="font-cormorant text-xl text-sage-900 mb-2">Comparative Analysis</h3>
+                    <h3 className="font-cormorant text-2xl text-sage-900 mb-2 group-hover:text-sage-700 transition-all">
-                    <p className="text-sage-700">Compare themes and character arcs across different novels and their modern adaptations.</p>
+                      Market Calculator
+                    </h3>
+                    <p className="text-sage-700 mb-3">
+                      Convert historical finances to modern values and understand marriage economics.
+                    </p>
+                    <Link
+                      to="/market-calculator"
+                      className="text-sage-600 hover:text-sage-800 inline-flex items-center text-sm"
+                    >
+                      Calculate Now <ArrowRight className="ml-1 h-4 w-4" />
+                    </Link>
                   </div>
                 </div>
               </div>
             </div>
+
             <div className="bg-sage-700 p-8 rounded-xl text-white">
-              <h3 className="font-cormorant text-3xl mb-6">Why Austen's Guide?</h3>
+              <h3 className="font-cormorant text-3xl mb-8">Why Study Austen?</h3>
-              <div className="space-y-4">
+              <div className="space-y-6">
-                <p className="text-cream-100">
+                <p className="text-cream-100 text-lg">
-                  Jane Austen's works offer timeless insights into love, marriage, and social dynamics that remain relevant today.
+                  Jane Austen's works offer timeless insights into love, marriage, and social dynamics that remain remarkably relevant today.
                 </p>
-                <p className="text-cream-100">
+                <div className="space-y-4">
-                  Our platform bridges classical literature with modern relationship wisdom, providing:
+                  <h4 className="font-cormorant text-xl text-cream-100">Our Platform Provides:</h4>
-                </p>
+                  <ul className="grid grid-cols-2 gap-4">
-                <ul className="list-disc list-inside space-y-2 text-cream-100">
+                    <li className="flex items-center gap-2 text-cream-100">
-                  <li>Academic analysis of romantic themes</li>
+                      <BookOpen className="h-5 w-5" />
-                  <li>Character-driven relationship advice</li>
+                      Academic Analysis
-                  <li>Modern interpretations of classic scenarios</li>
+                    </li>
-                  <li>Interactive tools for personal insight</li>
+                    <li className="flex items-center gap-2 text-cream-100">
-                </ul>
+                      <Heart className="h-5 w-5" />
+                      Relationship Wisdom
+                    </li>
+                    <li className="flex items-center gap-2 text-cream-100">
+                      <Users className="h-5 w-5" />
+                      Social Insights
+                    </li>
+                    <li className="flex items-center gap-2 text-cream-100">
+                      <PenTool className="h-5 w-5" />
+                      Interactive Tools
+                    </li>
+                  </ul>
+                </div>
+                <Link
+                  to="/analysis"
+                  className="inline-flex items-center px-6 py-3 bg-white text-sage-700 rounded-lg hover:bg-cream-100 transition-all mt-4"
+                >
+                  Begin Your Journey
+                  <ArrowRight className="ml-2 h-5 w-5" />
+                </Link>
               </div>
             </div>
           </div>
@@ -143,11 +263,34 @@ const Home = () => {
       </section>
 
       {/* Quote Section */}
-      <section className="container mx-auto px-4 text-center max-w-4xl">
+      <section className="container mx-auto px-4 text-center max-w-4xl py-16">
-        <blockquote className="font-cormorant text-3xl text-sage-900 italic">
+        <div className="space-y-12">
-          "It isn't what we say or think that defines us, but what we do."
+          <div>
-        </blockquote>
+            <blockquote className="font-cormorant text-4xl text-sage-900 italic leading-relaxed mb-4">
-        <p className="mt-4 text-sage-700">- Jane Austen, Sense and Sensibility</p>
+              "It isn't what we say or think that defines us, but what we do."
+            </blockquote>
+            <p className="text-sage-700 text-lg">- Jane Austen, Sense and Sensibility</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8 text-left">
+            <div className="bg-white/80 p-8 rounded-xl border border-sage-100">
+              <h3 className="font-cormorant text-2xl text-sage-900 mb-4">The Austen Legacy</h3>
+              <p className="text-sage-700">
+                Jane Austen's novels have captivated readers for over two centuries, offering sharp social commentary
+                and timeless observations about love, marriage, and society. Her works continue to influence modern
+                literature and popular culture.
+              </p>
+            </div>
+            <div className="bg-white/80 p-8 rounded-xl border border-sage-100">
+              <h3 className="font-cormorant text-2xl text-sage-900 mb-4">Historical Context</h3>
+              <p className="text-sage-700">
+                Writing during the Georgian era (1714-1830), Austen provided invaluable insights into the social
+                dynamics, marriage customs, and gender roles of her time. Her observations remain remarkably
+                relevant to modern relationships.
+              </p>
+            </div>
+          </div>
+        </div>
       </section>
     </div>
   );