Skip to content

Commit e6ca1df

Browse files
fezcodefezcode
committed
content: reading order of the books
1 parent 793605e commit e6ca1df

File tree

1 file changed

+138
-62
lines changed

1 file changed

+138
-62
lines changed

‎src/components/StoryReadingOrder.jsx‎

Lines changed: 138 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -29,71 +29,147 @@ const StoryReadingOrder = () => {
2929

3030
if (loading || readingOrder.length === 0) return null;
3131

32-
return (
33-
<section className="py-24 max-w-5xl mx-auto">
34-
<div className="flex flex-col items-center mb-16">
35-
<div className="h-px w-32 bg-dnd-gold/40 mb-6" />
36-
<h2 className="text-4xl md:text-6xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter text-center">
37-
Chronological Order
38-
</h2>
39-
<p className="mt-4 font-arvo text-gray-400 italic text-center">
40-
"The sequence of souls and the path of the mountain."
41-
</p>
42-
</div>
43-
44-
<div className="space-y-6">
45-
{readingOrder.map((phase, idx) => (
46-
<div key={phase.id} className="relative group">
47-
{/* Phase Decorative Border */}
48-
<div className="absolute -inset-0.5 bg-gradient-to-r from-dnd-gold/20 via-dnd-crimson/10 to-dnd-gold/20 rounded-lg blur opacity-30 group-hover:opacity-100 transition duration-1000" />
49-
50-
<div className="relative bg-[#1a0f0a] border-2 border-dnd-gold/30 rounded-lg overflow-hidden">
51-
<button
52-
onClick={() => setExpandedPhase(expandedPhase === idx ? -1 : idx)}
53-
className="w-full p-8 flex items-center justify-between text-left hover:bg-white/[0.02] transition-colors"
54-
>
55-
<div className="flex flex-col gap-2">
56-
<span className="font-mono text-[10px] text-dnd-gold-light uppercase tracking-[0.4em] font-bold">
57-
{phase.title.split(':')[0]}
58-
</span>
59-
<h3 className="text-2xl md:text-3xl font-playfairDisplay italic font-bold text-white group-hover:text-dnd-gold transition-colors">
60-
{phase.title.split(':')[1] || phase.title}
61-
</h3>
62-
<p className="text-sm text-gray-400 font-arvo italic tracking-wide">
63-
{phase.description}
64-
</p>
65-
</div>
66-
<div className="text-dnd-gold/50 group-hover:text-dnd-gold transition-colors">
67-
{expandedPhase === idx ? <CaretUp size={28} weight="bold" /> : <CaretDown size={28} weight="bold" />}
68-
</div>
69-
</button>
70-
71-
{expandedPhase === idx && (
72-
<div className="px-8 pb-8 grid grid-cols-1 md:grid-cols-2 gap-4 animate-in fade-in slide-in-from-top-2 duration-500">
73-
{phase.books.map((book) => (
74-
<div key={book.id} className="p-5 border-2 border-dnd-gold/10 bg-black/40 rounded flex items-center gap-5 group/item hover:border-dnd-gold/40 transition-all">
75-
<div className="w-10 h-10 flex items-center justify-center border-2 border-dnd-gold/20 rounded-full text-dnd-gold-light group-hover/item:border-dnd-gold group-hover/item:bg-dnd-gold/10 transition-all shrink-0">
76-
<span className="font-mono text-xs font-bold">{book.id}</span>
77-
</div>
78-
<div className="flex flex-col min-w-0">
79-
<span className="text-xs font-playfairDisplay font-black uppercase tracking-widest text-white group-hover/item:text-dnd-gold-light transition-colors truncate">
80-
{book.title}
81-
</span>
82-
<div className="flex items-center gap-2 mt-1">
83-
<div className="h-px w-4 bg-dnd-crimson/40" />
84-
<span className="text-[9px] font-arvo text-gray-500 uppercase tracking-[0.2em]">Book Entry</span>
32+
return (
33+
34+
<section className="py-24 max-w-6xl mx-auto px-4">
35+
36+
<div className="flex flex-col items-center mb-20">
37+
38+
<div className="flex items-center gap-4 mb-4">
39+
40+
<div className="h-px w-16 bg-dnd-gold/40" />
41+
42+
<span className="font-mono text-xs text-dnd-gold uppercase tracking-[0.4em]">Chronicle_Sequence</span>
43+
44+
<div className="h-px w-16 bg-dnd-gold/40" />
45+
46+
</div>
47+
48+
<h2 className="text-5xl md:text-7xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tight text-center">
49+
50+
Reading Order
51+
52+
</h2>
53+
54+
<p className="mt-6 font-arvo text-gray-300 italic text-center text-lg max-w-2xl opacity-80">
55+
56+
"Step through the tapestry of Thornus in the order the fates intended. From the rain-slicked streets to the roots of the mountain."
57+
58+
</p>
59+
60+
</div>
61+
62+
<div className="space-y-8">
63+
64+
{readingOrder.map((phase, idx) => (
65+
66+
<div key={phase.id} className="relative group">
67+
68+
{/* Elegant Side Border */}
69+
70+
<div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-dnd-gold via-dnd-crimson to-dnd-gold opacity-40 group-hover:opacity-100 transition-opacity rounded-full" />
71+
72+
<div className="ml-4 relative bg-[#120a07]/80 backdrop-blur-xl border border-dnd-gold/20 rounded-sm overflow-hidden shadow-2xl">
73+
74+
<button
75+
76+
onClick={() => setExpandedPhase(expandedPhase === idx ? -1 : idx)}
77+
78+
className="w-full p-10 flex items-center justify-between text-left hover:bg-white/[0.03] transition-all"
79+
80+
>
81+
82+
<div className="flex flex-col gap-3">
83+
84+
<span className="font-mono text-xs text-dnd-gold-light uppercase tracking-[0.5em] font-bold opacity-70">
85+
86+
{phase.title.split(':')[0]}
87+
88+
</span>
89+
90+
<h3 className="text-3xl md:text-4xl font-playfairDisplay font-black text-white group-hover:text-dnd-gold transition-colors leading-tight">
91+
92+
{phase.title.split(':')[1] || phase.title}
93+
94+
</h3>
95+
96+
<div className="flex items-center gap-3">
97+
98+
<div className="h-px w-8 bg-dnd-crimson/60" />
99+
100+
<p className="text-base text-gray-400 font-arvo italic">
101+
102+
{phase.description}
103+
104+
</p>
105+
106+
</div>
107+
108+
</div>
109+
110+
<div className="text-dnd-gold/30 group-hover:text-dnd-gold transition-all transform group-hover:scale-110">
111+
112+
{expandedPhase === idx ? <CaretUp size={32} weight="bold" /> : <CaretDown size={32} weight="bold" />}
113+
114+
</div>
115+
116+
</button>
117+
118+
{expandedPhase === idx && (
119+
120+
<div className="px-10 pb-10 grid grid-cols-1 md:grid-cols-2 gap-6 animate-in fade-in slide-in-from-left-4 duration-700">
121+
122+
{phase.books.map((book) => (
123+
124+
<div key={book.id} className="p-6 border border-white/10 bg-black/40 rounded-sm flex items-center gap-6 group/item hover:border-dnd-gold/50 hover:bg-black/60 transition-all cursor-default">
125+
126+
<div className="w-12 h-12 flex items-center justify-center border-2 border-dnd-gold/20 rounded-full text-dnd-gold group-hover/item:border-dnd-gold group-hover/item:bg-dnd-gold/10 transition-all shrink-0 shadow-lg">
127+
128+
<span className="font-playfairDisplay text-lg font-black">{book.id}</span>
129+
130+
</div>
131+
132+
<div className="flex flex-col min-w-0">
133+
134+
<span className="text-xl font-playfairDisplay font-bold text-gray-100 group-hover/item:text-white transition-colors">
135+
136+
{book.title}
137+
138+
</span>
139+
140+
<div className="flex items-center gap-2 mt-1 opacity-50">
141+
142+
<span className="text-[10px] font-arvo text-dnd-gold-light uppercase tracking-widest">Archive Record</span>
143+
144+
</div>
145+
85146
</div>
147+
86148
</div>
87-
</div>
88-
))}
89-
</div>
90-
)}
149+
150+
))}
151+
152+
</div>
153+
154+
)}
155+
156+
</div>
157+
91158
</div>
92-
</div>
93-
))}
94-
</div>
95-
</section>
96-
);
159+
160+
))}
161+
162+
</div>
163+
164+
<div className="mt-20 flex justify-center">
165+
166+
<div className="h-px w-64 bg-gradient-to-r from-transparent via-dnd-gold/20 to-transparent" />
167+
168+
</div>
169+
170+
</section>
171+
172+
);
97173
};
98174

99175
export default StoryReadingOrder;

0 commit comments

Comments
 (0)