From c0be9d48d67447d100421455ec515bee6a0d1c8d Mon Sep 17 00:00:00 2001 From: rathi Date: Wed, 4 Dec 2024 19:43:06 -0500 Subject: [PATCH] home UI improvements --- TECHNICAL_DOCUMENTATION.md | 397 ++++++++++++++++++++++++++++++++++++- src/pages/Home.tsx | 341 ++++++++++++++++++++++--------- 2 files changed, 632 insertions(+), 106 deletions(-) diff --git a/TECHNICAL_DOCUMENTATION.md b/TECHNICAL_DOCUMENTATION.md index 9c5d42b..1ea6258 100644 --- a/TECHNICAL_DOCUMENTATION.md +++ b/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 + ) => 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 + + + Interactive Timeline + Basic Timeline + + + + + + + + + ``` + +### Timeline Events ```typescript interface TimelineEvent { year: number; - type: "publication" | "writing" | "context" | "adaptation"; + type: "works" | "context" | "legacy" | "adaptations"; title: string; description: string; - criticalContext: string; - literarySignificance: string; + significance?: 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 diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 008864b..2a77e09 100644 --- a/src/pages/Home.tsx +++ b/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 ( -
+
{/* Hero Section */} -
-
-

- Austen's Wedding Guide -

-

- A modern exploration of matrimony through Jane Austen's timeless lens. - Discover wedding wisdom, social commentary, and romantic insights from literature's most beloved matchmaker. -

-
-
-

Interactive Timeline

-

- Journey through Austen's literary universe chronologically, exploring the evolution of romantic relationships and social dynamics across her works. +

+
+
+
+

+ Discover the Art of Matrimony Through Austen +

+

+ A modern exploration of marriage, society, and romance through Jane Austen's timeless lens. + Uncover wedding wisdom and romantic insights from literature's most beloved matchmaker.

- - Explore Timeline - +
+ + Start Exploring + + + + Take the Quiz + + +
-
-

Character Network

-

- Visualize the intricate web of relationships, social connections, and matrimonial prospects between Austen's memorable characters. -

- - View Network - +
+
+
+ +

Character Network

+

+ Explore relationships and connections between characters. +

+ + View Network + +
+
+ +

Market Calculator

+

+ Calculate dowries and estates in modern terms. +

+ + Try Calculator + +
+
+
+
+ +

Timeline

+

+ Journey through Austen's literary universe. +

+ + Explore Timeline + +
+
+ +

Success Stories

+

+ Real stories inspired by Austen's works. +

+ + Read Stories + +
+
-
- - Explore Analysis - - - - Take the Quiz - - -
- {/* Main Features Section */} -
-

- Discover Our Features + {/* Features Grid */} +
+

+ Explore Our Features

-
- +
+

Literary Analysis

- 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.

- - Learn More + + Start Analysis
-
- -

Success Stories

+
+ +

Social Class Study

- Explore romantic tales and matrimonial journeys inspired by Austen's iconic love stories. + Understand the social dynamics and class structures in Austen's world.

- - View Stories + + Study Society + +
+ +
+ +

Wedding Vendors

+

+ Discover curated vendors who bring Austen's elegance to modern weddings. +

+ + Meet Vendors
- {/* Interactive Features Section */} + {/* Interactive Tools Section */}
-

+

Interactive Experience

-
-
-
-
- +
+
+
+
+
-

Character Quiz

-

Discover which Austen bride matches your personality and romantic outlook.

+

+ Character Quiz +

+

+ Discover which Austen bride matches your personality and romantic outlook. +

+ + Take Quiz Now +
-
- + +
+
-

Timeline Exploration

-

Navigate through the chronological development of Austen's romantic narratives.

+

+ Comparative Analysis +

+

+ Compare themes and character arcs across different novels and adaptations. +

+ + Compare Now +
-
- + +
+
-

Comparative Analysis

-

Compare themes and character arcs across different novels and their modern adaptations.

+

+ Market Calculator +

+

+ Convert historical finances to modern values and understand marriage economics. +

+ + Calculate Now +
+
-

Why Austen's Guide?

-
-

- Jane Austen's works offer timeless insights into love, marriage, and social dynamics that remain relevant today. +

Why Study Austen?

+
+

+ Jane Austen's works offer timeless insights into love, marriage, and social dynamics that remain remarkably relevant today.

-

- Our platform bridges classical literature with modern relationship wisdom, providing: -

-
    -
  • Academic analysis of romantic themes
    • -
  • Character-driven relationship advice
    • -
  • Modern interpretations of classic scenarios
    • -
  • Interactive tools for personal insight
    • -
+
+

Our Platform Provides:

+
    +
  • + + Academic Analysis +
    • +
  • + + Relationship Wisdom +
    • +
  • + + Social Insights +
    • +
  • + + Interactive Tools +
    • +
+
+ + Begin Your Journey + +
@@ -143,11 +263,34 @@ const Home = () => {
{/* Quote Section */} -
-
- "It isn't what we say or think that defines us, but what we do." -
-

- Jane Austen, Sense and Sensibility

+
+
+
+
+ "It isn't what we say or think that defines us, but what we do." +
+

- Jane Austen, Sense and Sensibility

+
+ +
+
+

The Austen Legacy

+

+ 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. +

+
+
+

Historical Context

+

+ 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. +

+
+
+

);