mirror of
https://github.com/harivansh-afk/Austens-Wedding-Guide.git
synced 2026-04-15 05:02:07 +00:00
home UI improvements
This commit is contained in:
parent
7b602500ac
commit
c0be9d48d6
2 changed files with 632 additions and 106 deletions
|
|
@ -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;
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,153 +1,296 @@
|
|||
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">
|
||||
<div className="container mx-auto px-4 text-center space-y-8">
|
||||
<h1 className="font-cormorant text-6xl text-sage-900 mb-6">
|
||||
Austen's Wedding Guide
|
||||
<section className="relative bg-gradient-to-b from-cream-100 to-sage-50 py-32">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="text-left space-y-6">
|
||||
<h1 className="font-cormorant text-7xl text-sage-900 leading-tight">
|
||||
Discover the Art of <span className="text-sage-700">Matrimony</span> Through Austen
|
||||
</h1>
|
||||
<p className="font-lato text-xl text-sage-700 max-w-3xl mx-auto leading-relaxed">
|
||||
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.
|
||||
<p className="font-lato text-xl text-sage-700 leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto mt-8">
|
||||
<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
|
||||
to="/timeline"
|
||||
className="text-sage-600 hover:text-sage-800 inline-flex items-center"
|
||||
>
|
||||
Explore Timeline <ArrowRight className="ml-1 h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
<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">Character Network</h3>
|
||||
<p className="text-sage-700 mb-4">
|
||||
Visualize the intricate web of relationships, social connections, and matrimonial prospects between Austen's memorable characters.
|
||||
</p>
|
||||
<Link
|
||||
to="/network"
|
||||
className="text-sage-600 hover:text-sage-800 inline-flex items-center"
|
||||
>
|
||||
View Network <ArrowRight className="ml-1 h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center gap-4 pt-8">
|
||||
<div className="flex flex-wrap gap-4 pt-4">
|
||||
<Link
|
||||
to="/analysis"
|
||||
className="inline-flex items-center px-6 py-3 bg-sage-600 text-white rounded-lg hover:bg-sage-700 transition"
|
||||
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 Analysis
|
||||
Start Exploring
|
||||
<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"
|
||||
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="grid grid-cols-2 gap-6">
|
||||
<div className="space-y-6">
|
||||
<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">
|
||||
<Network className="h-8 w-8 text-sage-600 mb-3" />
|
||||
<h3 className="font-cormorant text-xl text-sage-900 mb-2">Character Network</h3>
|
||||
<p className="text-sage-700 text-sm mb-3">
|
||||
Explore relationships and connections between characters.
|
||||
</p>
|
||||
<Link
|
||||
to="/network"
|
||||
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>
|
||||
</section>
|
||||
|
||||
{/* Main Features Section */}
|
||||
<section className="container mx-auto px-4">
|
||||
<h2 className="font-cormorant text-4xl text-sage-900 text-center mb-12">
|
||||
Discover Our Features
|
||||
{/* Features Grid */}
|
||||
<section className="container mx-auto px-4 py-16">
|
||||
<h2 className="font-cormorant text-5xl text-sage-900 text-center mb-16">
|
||||
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">
|
||||
<BookOpen className="h-10 w-10 text-sage-600 mb-4" />
|
||||
<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-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">
|
||||
Learn More <ArrowRight className="ml-1 h-4 w-4" />
|
||||
<Link
|
||||
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">
|
||||
<Heart className="h-10 w-10 text-sage-600 mb-4" />
|
||||
<h3 className="font-cormorant text-2xl text-sage-900 mb-3">Success Stories</h3>
|
||||
<div className="bg-white p-8 rounded-xl shadow-md border border-sage-100 hover:shadow-lg transition-all transform hover:-translate-y-1">
|
||||
<Users className="h-12 w-12 text-sage-600 mb-4" />
|
||||
<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">
|
||||
View Stories <ArrowRight className="ml-1 h-4 w-4" />
|
||||
<Link
|
||||
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="bg-white p-8 rounded-xl shadow-sm">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<PenTool className="h-8 w-8 text-sage-600 mt-1" />
|
||||
<div className="grid lg:grid-cols-2 gap-8">
|
||||
<div className="bg-white p-8 rounded-xl shadow-md">
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-start gap-6 group cursor-pointer">
|
||||
<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>
|
||||
<p className="text-sage-700">Discover which Austen bride matches your personality and romantic outlook.</p>
|
||||
<h3 className="font-cormorant text-2xl text-sage-900 mb-2 group-hover:text-sage-700 transition-all">
|
||||
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>
|
||||
<p className="text-sage-700">Navigate through the chronological development of Austen's romantic narratives.</p>
|
||||
<h3 className="font-cormorant text-2xl text-sage-900 mb-2 group-hover:text-sage-700 transition-all">
|
||||
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>
|
||||
<p className="text-sage-700">Compare themes and character arcs across different novels and their modern adaptations.</p>
|
||||
<h3 className="font-cormorant text-2xl text-sage-900 mb-2 group-hover:text-sage-700 transition-all">
|
||||
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-6">
|
||||
<p className="text-cream-100 text-lg">
|
||||
Jane Austen's works offer timeless insights into love, marriage, and social dynamics that remain remarkably relevant today.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<p className="text-cream-100">
|
||||
Jane Austen's works offer timeless insights into love, marriage, and social dynamics that remain relevant today.
|
||||
</p>
|
||||
<p className="text-cream-100">
|
||||
Our platform bridges classical literature with modern relationship wisdom, providing:
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-2 text-cream-100">
|
||||
<li>Academic analysis of romantic themes</li>
|
||||
<li>Character-driven relationship advice</li>
|
||||
<li>Modern interpretations of classic scenarios</li>
|
||||
<li>Interactive tools for personal insight</li>
|
||||
<h4 className="font-cormorant text-xl text-cream-100">Our Platform Provides:</h4>
|
||||
<ul className="grid grid-cols-2 gap-4">
|
||||
<li className="flex items-center gap-2 text-cream-100">
|
||||
<BookOpen className="h-5 w-5" />
|
||||
Academic Analysis
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-cream-100">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quote Section */}
|
||||
<section className="container mx-auto px-4 text-center max-w-4xl">
|
||||
<blockquote className="font-cormorant text-3xl text-sage-900 italic">
|
||||
<section className="container mx-auto px-4 text-center max-w-4xl py-16">
|
||||
<div className="space-y-12">
|
||||
<div>
|
||||
<blockquote className="font-cormorant text-4xl text-sage-900 italic leading-relaxed mb-4">
|
||||
"It isn't what we say or think that defines us, but what we do."
|
||||
</blockquote>
|
||||
<p className="mt-4 text-sage-700">- Jane Austen, Sense and Sensibility</p>
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue