Skip to content

Commit d2daeae

Browse files
fezcodefezcode
committed
refactor: dnd pages pt2
1 parent 8feb308 commit d2daeae

File tree

7 files changed

+445
-191
lines changed

7 files changed

+445
-191
lines changed

‎src/components/dnd/DndAuthorCard.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ const DndAuthorCard = ({
1010
booksWritten,
1111
}) => {
1212
return (
13-
<div className="dnd-parchment-container p-8 md:p-12 shadow-xl group transition-all duration-500 hover:-translate-y-2">
14-
<div className="dnd-ornate-corner dnd-ornate-corner-tl !w-6 !h-6" />
15-
<div className="dnd-ornate-corner dnd-ornate-corner-tr !w-6 !h-6" />
16-
<div className="dnd-ornate-corner dnd-ornate-corner-bl !w-6 !h-6" />
17-
<div className="dnd-ornate-corner dnd-ornate-corner-br !w-6 !h-6" />
13+
<div className="dnd-parchment-container p-8 md:p-12 shadow-xl group transition-all duration-500 hover:-translate-y-2 border-2 border-black/10">
14+
<div className="dnd-ornate-corner dnd-ornate-corner-tl !w-10 !h-10" />
15+
<div className="dnd-ornate-corner dnd-ornate-corner-tr !w-10 !h-10" />
16+
<div className="dnd-ornate-corner dnd-ornate-corner-bl !w-10 !h-10" />
17+
<div className="dnd-ornate-corner dnd-ornate-corner-br !w-10 !h-10" />
1818

1919
<div className="relative z-10 flex flex-col items-center text-center">
2020
<div className="relative mb-6">
@@ -36,6 +36,8 @@ const DndAuthorCard = ({
3636
</span>
3737
)}
3838

39+
<div className="dnd-mystic-divider !my-4 opacity-20" />
40+
3941
{authorWebsite && (
4042
<a
4143
href={authorWebsite}
@@ -47,7 +49,6 @@ const DndAuthorCard = ({
4749
Digital Signal
4850
</a>
4951
)}
50-
5152
{booksWritten && booksWritten.length > 0 && (
5253
<div className="w-full pt-6 border-t border-dnd-crimson/10">
5354
<div className="flex items-center justify-center gap-2 mb-4 opacity-40">

‎src/components/dnd/DndCard.js‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,40 +22,37 @@ const DndCard = ({
2222
className="absolute inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"/>
2323

2424
{/* Inner Border Shadow - Darker */}
25-
<div className="absolute inset-4 border border-black/40 pointer-events-none"/>
25+
<div className="absolute inset-4 border border-black/5 pointer-events-none" />
26+
<div className="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors" />
2627

2728
{/* Ornate corners - larger and more detailed */}
28-
<div
29-
className="absolute top-6 left-6 w-12 h-12 border-t-2 border-l-2 border-black/30 opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"/>
30-
<div
31-
className="absolute top-6 right-6 w-12 h-12 border-t-2 border-r-2 border-black/30 opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"/>
32-
<div
33-
className="absolute bottom-6 left-6 w-12 h-12 border-b-2 border-l-2 border-black/30 opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"/>
34-
<div
35-
className="absolute bottom-6 right-6 w-12 h-12 border-b-2 border-r-2 border-black/30 opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"/>
29+
<div className="absolute top-6 left-6 w-12 h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
30+
<div className="absolute top-6 right-6 w-12 h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
31+
<div className="absolute bottom-6 left-6 w-12 h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
32+
<div className="absolute bottom-6 right-6 w-12 h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
3633

37-
<div
38-
className="mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-sm">
34+
<div className="mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)]">
3935
{icon}
4036
</div>
4137

42-
<h3
43-
className="text-4xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-6 transition-transform duration-500 group-hover:-translate-y-1">
38+
<h3 className="text-4xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-6 transition-transform duration-500 group-hover:-translate-y-1">
4439
{title}
4540
</h3>
4641

47-
<p
48-
className="text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px]">
42+
<p className="text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px]">
4943
{description}
5044
</p>
5145

5246
{/* Interaction hint - refined and darker */}
53-
<div
54-
className="mt-10 pt-8 border-t border-black/30 w-32 flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0">
55-
<div className="w-1 h-1 bg-dnd-gold rounded-full animate-ping"/>
47+
<div className="mt-10 pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0">
48+
<div className="flex items-center gap-4">
49+
<div className="h-px w-8 bg-dnd-crimson/20" />
50+
<div className="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]" />
51+
<div className="h-px w-8 bg-dnd-crimson/20" />
52+
</div>
5653
<span className="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">
57-
Open_Log
58-
</span>
54+
Open_Script
55+
</span>
5956
</div>
6057
</Link></motion.div>
6158
);

‎src/components/dnd/DndFooter.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const DndFooter = () => {
1010
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 items-center text-center md:text-left">
1111
<div className="space-y-4">
1212
<div className="flex justify-center md:justify-start">
13-
<span className="text-4xl font-playfairDisplay italic font-black uppercase tracking-tighter dnd-gold-gradient-text">
13+
<span className="text-4xl font-playfairDisplay font-black uppercase tracking-tighter dnd-gold-gradient-text">
1414
S & F
1515
</span>
1616
</div>

‎src/pages/dnd/DndBookPage.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ function DndBookPage() {
5252

5353
return (
5454
<DndLayout>
55-
<div className="max-w-5xl mx-auto px-6 py-12">
55+
<div className="max-w-7xl mx-auto px-6 py-12">
5656
<header className="text-center mb-24">
5757
<div className="flex justify-center mb-6">
5858
<BookmarkSimple size={48} className="text-dnd-gold" weight="duotone" />
@@ -67,21 +67,23 @@ function DndBookPage() {
6767
<motion.div
6868
initial={{ opacity: 0, y: 30 }}
6969
animate={{ opacity: 1, y: 0 }}
70-
className="dnd-parchment-container p-12 md:p-24 shadow-2xl"
70+
className="dnd-parchment-container p-12 md:p-24 shadow-2xl border-2 border-black/10"
7171
>
72-
<div className="dnd-ornate-corner dnd-ornate-corner-tl" />
73-
<div className="dnd-ornate-corner dnd-ornate-corner-tr" />
74-
<div className="dnd-ornate-corner dnd-ornate-corner-bl" />
75-
<div className="dnd-ornate-corner dnd-ornate-corner-br" />
72+
<div className="dnd-ornate-corner dnd-ornate-corner-tl !w-16 !h-16" />
73+
<div className="dnd-ornate-corner dnd-ornate-corner-tr !w-16 !h-16" />
74+
<div className="dnd-ornate-corner dnd-ornate-corner-bl !w-16 !h-16" />
75+
<div className="dnd-ornate-corner dnd-ornate-corner-br !w-16 !h-16" />
7676

7777
<div className="relative z-10">
78-
<div className="flex items-center gap-4 mb-12 pb-4 border-b border-dnd-crimson/10">
78+
<div className="flex items-center gap-4 mb-8 pb-4 border-b border-dnd-crimson/10">
7979
<Scroll size={32} className="text-dnd-crimson" weight="duotone" />
8080
<h2 className="text-3xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter">
8181
Recorded Episodes
8282
</h2>
8383
</div>
8484

85+
<div className="dnd-mystic-divider mb-12 opacity-20" />
86+
8587
<div className="grid gap-4">
8688
{book.episodes.map((episode, idx) => (
8789
<Link

0 commit comments

Comments
 (0)