Skip to content

Commit 8feb308

Browse files
fezcodefezcode
committed
refactor: dnd pages
1 parent 636c70f commit 8feb308

File tree

13 files changed

+742
-815
lines changed

13 files changed

+742
-815
lines changed

‎src/components/Layout.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import Navbar from './Navbar';
33
import ClassicSidebar from './ClassicSidebar';
44
import BrutalistSidebar from './BrutalistSidebar';
55
import Footer from './Footer';
6-
import DndNavbar from './dnd/DndNavbar';
7-
import DndFooter from './dnd/DndFooter';
86
import { useLocation } from 'react-router-dom';
97
import Search from './Search';
108
import CommandPalette from './CommandPalette';
@@ -47,11 +45,7 @@ const Layout = ({
4745
if (location.pathname.startsWith('/stories')) {
4846
return (
4947
<DndProvider>
50-
<div className="bg-gray-950 min-h-screen font-sans flex flex-col">
51-
<DndNavbar />
52-
<main className="flex-grow">{children}</main>
53-
<DndFooter />
54-
</div>
48+
{children}
5549
</DndProvider>
5650
);
5751
}

‎src/components/dnd/DndAuthorCard.js‎

Lines changed: 56 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
3+
import { Globe, BookOpen } from '@phosphor-icons/react';
34

45
const DndAuthorCard = ({
56
authorName,
@@ -9,36 +10,64 @@ const DndAuthorCard = ({
910
booksWritten,
1011
}) => {
1112
return (
12-
<div className="dnd-author-card">
13-
<img src={authorImage} alt={authorName} className="dnd-author-image" />
14-
<h3 className="dnd-author-name">{authorName}</h3>
15-
{authorAlias && (
16-
<p className="dnd-author-alias">
17-
<span className="dnd-author-label">Alias:</span> {authorAlias}
18-
</p>
19-
)}
20-
{authorWebsite && (
21-
<p className="dnd-author-website">
22-
<a href={authorWebsite} target="_blank" rel="noopener noreferrer">
23-
Website
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" />
18+
19+
<div className="relative z-10 flex flex-col items-center text-center">
20+
<div className="relative mb-6">
21+
<div className="absolute inset-0 bg-dnd-gold rounded-full blur-md opacity-20 group-hover:opacity-40 transition-opacity" />
22+
<img
23+
src={authorImage}
24+
alt={authorName}
25+
className="w-32 h-32 rounded-full object-cover border-4 border-dnd-gold shadow-lg grayscale hover:grayscale-0 transition-all duration-700"
26+
/>
27+
</div>
28+
29+
<h3 className="text-3xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-1">
30+
{authorName}
31+
</h3>
32+
33+
{authorAlias && (
34+
<span className="text-[10px] font-mono font-bold uppercase tracking-[0.4em] text-dnd-crimson/40 mb-4">
35+
Known as // {authorAlias}
36+
</span>
37+
)}
38+
39+
{authorWebsite && (
40+
<a
41+
href={authorWebsite}
42+
target="_blank"
43+
rel="noopener noreferrer"
44+
className="flex items-center gap-2 text-xs font-mono font-bold uppercase tracking-widest text-dnd-crimson/60 hover:text-dnd-crimson transition-colors mb-8"
45+
>
46+
<Globe size={14} />
47+
Digital Signal
2448
</a>
25-
</p>
26-
)}
27-
{booksWritten && booksWritten.length > 0 && (
28-
<div className="dnd-author-books">
29-
<h4>Books:</h4>
30-
<hr className="dnd-author-books-separator" />
31-
<ul>
32-
{booksWritten.map((book, index) => (
33-
<li key={index}>
34-
<Link to={`/stories/books/${book.bookId}`}>
49+
)}
50+
51+
{booksWritten && booksWritten.length > 0 && (
52+
<div className="w-full pt-6 border-t border-dnd-crimson/10">
53+
<div className="flex items-center justify-center gap-2 mb-4 opacity-40">
54+
<BookOpen size={16} />
55+
<span className="text-[9px] font-mono font-bold uppercase tracking-[0.3em]">Compiled Tomes</span>
56+
</div>
57+
<div className="space-y-2">
58+
{booksWritten.map((book, index) => (
59+
<Link
60+
key={index}
61+
to={`/stories/books/${book.bookId}`}
62+
className="block text-sm font-arvo font-bold text-dnd-crimson/80 hover:text-dnd-crimson transition-colors"
63+
>
3564
{book.bookTitle}
3665
</Link>
37-
</li>
38-
))}
39-
</ul>
40-
</div>
41-
)}
66+
))}
67+
</div>
68+
</div>
69+
)}
70+
</div>
4271
</div>
4372
);
4473
};

‎src/components/dnd/DndCard.js‎

Lines changed: 53 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,63 @@
11
import React from 'react';
2-
import { Link } from 'react-router-dom';
3-
import '../../styles/dnd.css';
2+
import {Link} from 'react-router-dom';
3+
import {motion} from 'framer-motion';
44

55
const DndCard = ({
6-
title,
7-
author,
8-
link,
9-
backgroundImage,
10-
className,
11-
overlayColor,
12-
}) => {
6+
title,
7+
description,
8+
link,
9+
icon,
10+
}) => {
1311
return (
14-
<Link
15-
to={link}
16-
className={`dnd-card ${className || ''}`}
17-
style={{
18-
backgroundImage: `url(${backgroundImage})`,
19-
position: 'relative',
20-
}}
12+
<motion.div
13+
whileHover={{y: -10}}
14+
transition={{type: 'spring', stiffness: 300}}
2115
>
22-
{overlayColor && (
16+
<Link
17+
to={link}
18+
className="block group relative p-12 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/40 shadow-2xl overflow-hidden"
19+
>
20+
{/* Parchment Texture Overlay */}
2321
<div
24-
style={{
25-
position: 'absolute',
26-
top: 0,
27-
left: 0,
28-
right: 0,
29-
bottom: 0,
30-
backgroundColor: overlayColor,
31-
opacity: 0.1,
32-
zIndex: 1,
33-
borderRadius: '10px', // Match card border-radius
34-
}}
35-
></div>
36-
)}
37-
<h3 style={{ zIndex: 2 }}>{title}</h3>
38-
{author && (
39-
<p className="author-text" style={{ zIndex: 2 }}>
40-
{author}
22+
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')]"/>
23+
24+
{/* Inner Border Shadow - Darker */}
25+
<div className="absolute inset-4 border border-black/40 pointer-events-none"/>
26+
27+
{/* 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"/>
36+
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">
39+
{icon}
40+
</div>
41+
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">
44+
{title}
45+
</h3>
46+
47+
<p
48+
className="text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px]">
49+
{description}
4150
</p>
42-
)}
43-
</Link>
51+
52+
{/* 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"/>
56+
<span className="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">
57+
Open_Log
58+
</span>
59+
</div>
60+
</Link></motion.div>
4461
);
4562
};
4663

‎src/components/dnd/DndFooter.js‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,43 @@
11
import React, { useContext } from 'react';
22
import { DndContext } from '../../context/DndContext';
3-
import DndLogo from './DndLogo'; // Import DndLogo
3+
import { Scroll } from '@phosphor-icons/react';
44

55
const DndFooter = () => {
66
const { bgImageName } = useContext(DndContext);
77

88
return (
9-
<footer className="dnd-footer">
10-
<div className="dnd-footer-logo-section">
11-
<DndLogo />
12-
<p className="dnd-footer-copyright">From Serfs and Frauds</p>
13-
</div>
14-
<div className="dnd-footer-column">
15-
<h3>About Us</h3>
16-
<p>
17-
We are a group of adventurers and storytellers, dedicated to bringing
18-
you epic tales from the realms of fantasy.
19-
</p>
20-
</div>
21-
<div className="dnd-footer-column">
22-
<h3>Legal & Info</h3>
23-
<p>&copy; 2025 From Serfs and Frauds. All rights reserved.</p>
24-
<p>Unsplash: {bgImageName}</p>
9+
<footer className="relative mt-24 border-t-2 border-dnd-gold bg-dnd-crimson/95 py-16 px-6 text-white">
10+
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 items-center text-center md:text-left">
11+
<div className="space-y-4">
12+
<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">
14+
S & F
15+
</span>
16+
</div>
17+
<p className="font-mono text-[10px] uppercase tracking-[0.4em] text-white/70">
18+
From Serfs and Frauds
19+
</p>
20+
</div>
21+
22+
<div className="flex flex-col items-center gap-4 text-white">
23+
<Scroll size={32} weight="duotone" className="opacity-60" />
24+
<p className="font-arvo italic text-sm text-white max-w-xs text-center leading-relaxed">
25+
"Every chronicle is a living memory of those who braved the dark."
26+
</p>
27+
</div>
28+
29+
<div className="space-y-4 md:text-right">
30+
<p className="font-mono text-[9px] uppercase tracking-widest text-white">
31+
Digital Archive Kernel // v0.8.7
32+
</p>
33+
<p className="font-mono text-[9px] uppercase tracking-widest text-white">
34+
Wallpaper Source // <span className="text-white font-bold">{bgImageName || 'Default_Vault'}</span>
35+
</p>
36+
<div className="h-px w-12 bg-dnd-gold ml-auto opacity-50" />
37+
<p className="font-mono text-[10px] uppercase tracking-[0.2em] text-white">
38+
&copy; {new Date().getFullYear()} Archives of the Realm
39+
</p>
40+
</div>
2541
</div>
2642
</footer>
2743
);

‎src/components/dnd/DndLayout.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { useContext, useEffect, useState } from 'react';
2+
import { DndContext } from '../../context/DndContext';
3+
import DndNavbar from './DndNavbar';
4+
import DndFooter from './DndFooter';
5+
import dndWallpapers from '../../utils/dndWallpapers';
6+
import { parseWallpaperName } from '../../utils/dndUtils';
7+
import '../../styles/dnd-refactor.css';
8+
9+
const DndLayout = ({ children }) => {
10+
const { setBgImageName } = useContext(DndContext);
11+
const [bgImage, setBgImage] = useState('');
12+
13+
useEffect(() => {
14+
const randomImage = dndWallpapers[Math.floor(Math.random() * dndWallpapers.length)];
15+
setBgImage(randomImage);
16+
setBgImageName(parseWallpaperName(randomImage.split('/').pop()));
17+
}, [setBgImageName]);
18+
19+
return (
20+
<div className="dnd-theme-root min-h-screen flex flex-col relative overflow-x-hidden">
21+
{/* Immersive Background */}
22+
<div className="fixed inset-0 z-0">
23+
<div
24+
className="absolute inset-0 bg-cover bg-center transition-all duration-1000"
25+
style={{
26+
backgroundImage: bgImage ? `url(${process.env.PUBLIC_URL}${bgImage})` : 'none',
27+
filter: 'brightness(0.45) contrast(1.1)'
28+
}}
29+
/>
30+
<div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/80" />
31+
</div>
32+
33+
{/* Content Layer */}
34+
<div className="relative z-20 flex flex-col min-h-screen">
35+
<DndNavbar />
36+
<main className="flex-grow pt-24 pb-12">
37+
{children}
38+
</main>
39+
<DndFooter />
40+
</div>
41+
42+
{/* Global Vignette */}
43+
<div className="fixed inset-0 pointer-events-none z-10 shadow-[inset_0_0_150px_rgba(0,0,0,0.9)]" />
44+
</div>
45+
);
46+
};
47+
48+
export default DndLayout;

0 commit comments

Comments
 (0)