-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDndPage.jsx
More file actions
106 lines (98 loc) · 3.73 KB
/
DndPage.jsx
File metadata and controls
106 lines (98 loc) · 3.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React, { useEffect, useContext } from 'react';
import { motion } from 'framer-motion';
import { DndContext } from '../../context/DndContext';
import DndCard from '../../components/dnd/DndCard';
import DndLayout from '../../components/dnd/DndLayout';
import Seo from '../../components/Seo';
import { useAchievements } from '../../context/AchievementContext';
import {
BookOpenIcon,
ScrollIcon,
UsersThreeIcon,
MapTrifoldIcon,
SwordIcon,
} from '@phosphor-icons/react';
const DndPage = () => {
const { setBreadcrumbs } = useContext(DndContext);
const { unlockAchievement } = useAchievements();
useEffect(() => {
unlockAchievement('story_explorer');
setBreadcrumbs([{ label: 'S&F', path: '/stories' }]);
}, [setBreadcrumbs, unlockAchievement]);
return (
<DndLayout>
<Seo
title="From Serfs and Frauds | Fezcodex"
description="Welcome to the world of From Serfs and Frauds, a Dungeons & Dragons campaign."
keywords={[
'Fezcodex',
'd&d',
'dnd',
'from serfs and frauds',
'campaign',
]}
/>
<div className="max-w-6xl mx-auto px-6 py-20 text-center relative">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1 }}
className="mb-24"
>
<div className="flex justify-center mb-8">
<div className="h-px w-24 bg-dnd-gold/40 self-center" />
<ScrollIcon
size={40}
className="mx-6 text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]"
weight="duotone"
/>
<div className="h-px w-24 bg-dnd-gold/40 self-center" />
</div>
<h1 className="text-lg md:text-2xl font-mono text-white/80 uppercase tracking-[0.3em] md:tracking-[0.5em] mb-4 drop-shadow-lg">
Welcome to the
</h1>
<h2 className="text-5xl md:text-9xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter leading-none mb-12 drop-shadow-2xl dnd-header-pulse">
Great Archives
</h2>
<p className="text-lg md:text-2xl font-arvo text-gray-200 max-w-2xl mx-auto leading-relaxed italic opacity-90 px-4">
"Every serf has a story, and every fraud a hidden truth. Step into
the tapestry of our shared odyssey."
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-7xl mx-auto">
<DndCard
title="Chronicles"
description="The documented history and lore of the realms."
link="/stories/lore"
icon={<ScrollIcon size={48} weight="duotone" />}
/>
<DndCard
title="Dramatis Personae"
description="The heroes, villains, and bystanders of our tales."
link="/stories/characters"
icon={<UsersThreeIcon size={48} weight="duotone" />}
/>
<DndCard
title="The Atlas"
description="Landmarks, cities, and hidden corners of the world."
link="/stories/places"
icon={<MapTrifoldIcon size={48} weight="duotone" />}
/>
<DndCard
title="The Armory"
description="Artifacts, curiosities, and tools of the trade."
link="/stories/items"
icon={<SwordIcon size={48} weight="duotone" />}
/>
<DndCard
title="Creators"
description="Meeting the scribes behind the legend."
link="/stories/authors"
icon={<BookOpenIcon size={48} weight="duotone" />}
/>
</div>
</div>
</DndLayout>
);
};
export default DndPage;