mirror of
https://github.com/harivansh-afk/Austens-Wedding-Guide.git
synced 2026-04-15 07:04:44 +00:00
updated homepage
This commit is contained in:
parent
59657ce287
commit
8e8d41eab4
1 changed files with 141 additions and 54 deletions
|
|
@ -1,77 +1,164 @@
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
import { ArrowRight, BookOpen, Users, Heart, PenTool, Calendar, BookMarked } from 'lucide-react';
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
return (
|
return (
|
||||||
<div className="space-y-12">
|
<div className="min-h-screen space-y-16 pb-16">
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<section className="text-center py-16 bg-cream-100 rounded-lg">
|
<section className="relative bg-gradient-to-b from-cream-100 to-sage-50 py-24">
|
||||||
<h1 className="font-cormorant text-5xl text-sage-900 mb-4">
|
<div className="container mx-auto px-4 text-center space-y-8">
|
||||||
Welcome to Austen's Wedding Guide
|
<h1 className="font-cormorant text-6xl text-sage-900 mb-6">
|
||||||
</h1>
|
Austen's Wedding Guide
|
||||||
<p className="font-lato text-lg text-sage-700 max-w-2xl mx-auto">
|
</h1>
|
||||||
Your modern guide to matrimonial bliss, as Jane Austen would have imagined it
|
<p className="font-lato text-xl text-sage-700 max-w-3xl mx-auto leading-relaxed">
|
||||||
</p>
|
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>
|
||||||
|
<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">
|
||||||
|
<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>
|
</section>
|
||||||
|
|
||||||
{/* Featured Sections */}
|
{/* Main Features Section */}
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
<section className="container mx-auto px-4">
|
||||||
{/* Literary Analysis */}
|
<h2 className="font-cormorant text-4xl text-sage-900 text-center mb-12">
|
||||||
<Link to="/analysis" className="feature-card">
|
Discover Our Features
|
||||||
<div className="bg-sage-50 p-6 rounded-lg hover:shadow-lg transition">
|
</h2>
|
||||||
<h2 className="font-cormorant text-2xl text-sage-900 mb-3">Literary Analysis</h2>
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
<p className="text-sage-700">
|
<div className="bg-white p-8 rounded-xl shadow-sm border border-sage-100 hover:shadow-md transition">
|
||||||
Explore themes, characters, and social commentary in Austen's timeless works
|
<BookOpen className="h-10 w-10 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.
|
||||||
</p>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
|
||||||
|
|
||||||
{/* Character Blogs */}
|
<div className="bg-white p-8 rounded-xl shadow-sm border border-sage-100 hover:shadow-md transition">
|
||||||
<Link to="/blogs" className="feature-card">
|
<Users className="h-10 w-10 text-sage-600 mb-4" />
|
||||||
<div className="bg-sage-50 p-6 rounded-lg hover:shadow-lg transition">
|
<h3 className="font-cormorant text-2xl text-sage-900 mb-3">Character Insights</h3>
|
||||||
<h2 className="font-cormorant text-2xl text-sage-900 mb-3">Character Blogs</h2>
|
<p className="text-sage-700 mb-4">
|
||||||
<p className="text-sage-700">
|
Meet Austen's memorable characters through their blogs, sharing timeless advice on love and marriage.
|
||||||
Wisdom and wit from Charlotte Lucas's practical advice to Marianne Dashwood's romantic musings
|
|
||||||
</p>
|
</p>
|
||||||
|
<Link to="/blogs" className="text-sage-600 hover:text-sage-800 inline-flex items-center">
|
||||||
|
Read Blogs <ArrowRight className="ml-1 h-4 w-4" />
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
|
||||||
|
|
||||||
{/* Bride Quiz */}
|
<div className="bg-white p-8 rounded-xl shadow-sm border border-sage-100 hover:shadow-md transition">
|
||||||
<Link to="/quiz" className="feature-card">
|
<Heart className="h-10 w-10 text-sage-600 mb-4" />
|
||||||
<div className="bg-rose-50 p-6 rounded-lg hover:shadow-lg transition">
|
<h3 className="font-cormorant text-2xl text-sage-900 mb-3">Success Stories</h3>
|
||||||
<h2 className="font-cormorant text-2xl text-sage-900 mb-3">Which Austen Bride Are You?</h2>
|
<p className="text-sage-700 mb-4">
|
||||||
<p className="text-sage-700">
|
Explore romantic tales and matrimonial journeys inspired by Austen's iconic love stories.
|
||||||
Discover your literary matrimonial counterpart through our delightful quiz
|
|
||||||
</p>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Success Stories */}
|
{/* Interactive Features Section */}
|
||||||
<Link to="/success-stories" className="feature-card">
|
<section className="bg-cream-50 py-16">
|
||||||
<div className="bg-rose-100 p-6 rounded-lg hover:shadow-lg transition">
|
<div className="container mx-auto px-4">
|
||||||
<h2 className="font-cormorant text-2xl text-sage-900 mb-3">Success Stories</h2>
|
<h2 className="font-cormorant text-4xl text-sage-900 text-center mb-12">
|
||||||
<p className="text-sage-700">
|
Interactive Experience
|
||||||
Real tales of romance from our beloved characters
|
</h2>
|
||||||
</p>
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<Calendar className="h-8 w-8 text-sage-600 mt-1" />
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<BookMarked className="h-8 w-8 text-sage-600 mt-1" />
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
|
</section>
|
||||||
{/* Vendor Directory */}
|
|
||||||
<Link to="/vendors" className="feature-card">
|
|
||||||
<div className="bg-sage-100 p-6 rounded-lg hover:shadow-lg transition">
|
|
||||||
<h2 className="font-cormorant text-2xl text-sage-900 mb-3">Vendor Directory</h2>
|
|
||||||
<p className="text-sage-700">
|
|
||||||
From Pemberley Estate venues to Mrs. Bennet's matchmaking services
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quote Section */}
|
{/* Quote Section */}
|
||||||
<section className="text-center py-12 bg-sage-50 rounded-lg">
|
<section className="container mx-auto px-4 text-center max-w-4xl">
|
||||||
<blockquote className="font-cormorant text-2xl text-sage-900 italic">
|
<blockquote className="font-cormorant text-3xl text-sage-900 italic">
|
||||||
"It is a truth universally acknowledged, that a single person in possession of a good fortune, must be in want of a spouse."
|
"It isn't what we say or think that defines us, but what we do."
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<p className="mt-4 text-sage-700">- Adapted from Pride and Prejudice</p>
|
<p className="mt-4 text-sage-700">- Jane Austen, Sense and Sensibility</p>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue