Skip to content

Commit 7ae4db9

Browse files
fezcodefezcode
committed
feat: new /design pages
1 parent 6bc62ff commit 7ae4db9

File tree

9 files changed

+525
-17
lines changed

9 files changed

+525
-17
lines changed

‎public/sidebar.piml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@
7979
(to) /roadmap
8080
(icon) BugBeetleIcon
8181
> (item)
82-
(label) Brufez Spec
83-
(to) /brufez
84-
(icon) FlaskIcon
82+
(label) Design System
83+
(to) /design
84+
(icon) PaletteIcon
8585

8686
> (section)
8787
(id) isExtrasOpen

‎src/components/AnimatedRoutes.jsx‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,10 @@ const KnowledgeGraphPage = lazy(() => import('../pages/KnowledgeGraphPage'));
139139
const TheVaguePage = lazy(() => import('../pages/TheVaguePage'));
140140
const PIMLLabPage = lazy(() => import('../pages/apps/PIMLLabPage'));
141141
const MetabolicHubPage = lazy(() => import('../pages/apps/IntermittentFastingTrackerPage'));
142+
const DesignSelectionPage = lazy(() => import('../pages/DesignSelectionPage'));
142143
const BrufezPage = lazy(() => import('../pages/BrufezPage'));
143144
const BrufezPanelsPage = lazy(() => import('../pages/BrufezPanelsPage'));
145+
const FezluxeDesignPage = lazy(() => import('../pages/luxe-views/FezluxeDesignPage'));
144146
const RetroTerminalPage = lazy(() => import('../pages/RetroTerminalPage'));
145147
const ProjectRouteHandler = lazy(() => import('../components/ProjectRouteHandler'));
146148
const VocabRouteHandler = lazy(() => import('../components/VocabRouteHandler'));
@@ -668,7 +670,7 @@ const AnimatedRoutes = ({
668670
}
669671
/>
670672
<Route
671-
path="/achievements"
673+
path="/design"
672674
element={
673675
<motion.div
674676
initial="initial"
@@ -678,13 +680,13 @@ const AnimatedRoutes = ({
678680
transition={pageTransition}
679681
>
680682
<Suspense fallback={<Loading />}>
681-
<AchievementsPage />
683+
<DesignSelectionPage />
682684
</Suspense>
683685
</motion.div>
684686
}
685687
/>
686688
<Route
687-
path="/brufez"
689+
path="/design/brufez"
688690
element={
689691
<motion.div
690692
initial="initial"
@@ -700,7 +702,7 @@ const AnimatedRoutes = ({
700702
}
701703
/>
702704
<Route
703-
path="/brufez/panels"
705+
path="/design/brufez/panels"
704706
element={
705707
<motion.div
706708
initial="initial"
@@ -715,6 +717,40 @@ const AnimatedRoutes = ({
715717
</motion.div>
716718
}
717719
/>
720+
<Route
721+
path="/design/fezluxe"
722+
element={
723+
<motion.div
724+
initial="initial"
725+
animate="in"
726+
exit="out"
727+
variants={pageVariants}
728+
transition={pageTransition}
729+
>
730+
<Suspense fallback={<Loading />}>
731+
<FezluxeDesignPage />
732+
</Suspense>
733+
</motion.div>
734+
}
735+
/>
736+
<Route path="/brufez" element={<Navigate to="/design/brufez" replace />} />
737+
<Route path="/brufez/panels" element={<Navigate to="/design/brufez/panels" replace />} />
738+
<Route
739+
path="/achievements"
740+
element={
741+
<motion.div
742+
initial="initial"
743+
animate="in"
744+
exit="out"
745+
variants={pageVariants}
746+
transition={pageTransition}
747+
>
748+
<Suspense fallback={<Loading />}>
749+
<AchievementsPage />
750+
</Suspense>
751+
</motion.div>
752+
}
753+
/>
718754
<Route
719755
path="/sitemap"
720756
element={

‎src/components/BrutalistSidebar.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
PushPinIcon,
1515
TrophyIcon,
1616
ShuffleIcon,
17+
PaletteIcon,
1718
EnvelopeSimpleIcon,
1819
BugBeetleIcon,
1920
ArrowRightIcon,
@@ -48,6 +49,7 @@ const ICON_MAP = {
4849
PushPinIcon,
4950
TrophyIcon,
5051
ShuffleIcon,
52+
PaletteIcon,
5153
EnvelopeSimpleIcon,
5254
BugBeetleIcon,
5355
ArrowRightIcon,

‎src/components/LuxeSidebar.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
PushPinIcon,
1515
TrophyIcon,
1616
ShuffleIcon,
17+
PaletteIcon,
1718
EnvelopeSimpleIcon,
1819
BugBeetleIcon,
1920
ArrowRightIcon,
@@ -47,6 +48,7 @@ const ICON_MAP = {
4748
PushPinIcon,
4849
TrophyIcon,
4950
ShuffleIcon,
51+
PaletteIcon,
5052
EnvelopeSimpleIcon,
5153
BugBeetleIcon,
5254
ArrowRightIcon,

‎src/pages/BrufezPage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const BrufezPage = () => {
130130
</p>
131131
<div className="flex flex-wrap gap-4">
132132
<Link
133-
to="/brufez/panels"
133+
to="/design/brufez/panels"
134134
className="group flex items-center gap-3 bg-white text-black px-6 py-3 rounded-sm font-black uppercase tracking-[0.2em] text-[10px] transition-all hover:bg-emerald-400"
135135
>
136136
<ColumnsIcon weight="bold" size={16}/>

‎src/pages/BrufezPanelsPage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const BrufezPanelsPage = () => {
5959
<div className="w-full xl:pr-[50vw] relative z-10 flex flex-col min-h-screen py-24 px-6 md:pl-20 overflow-y-auto overflow-x-hidden no-scrollbar transition-all duration-300">
6060
<header className="mb-20">
6161
<Link
62-
to="/brufez"
62+
to="/design/brufez"
6363
className="mb-8 inline-flex items-center gap-2 text-xs font-mono text-gray-500 hover:text-white transition-colors uppercase tracking-widest"
6464
>
6565
<ArrowLeftIcon weight="bold" />

‎src/pages/DesignSelectionPage.jsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { motion } from 'framer-motion';
4+
import {
5+
ArrowRightIcon,
6+
BugIcon,
7+
SparkleIcon,
8+
LayoutIcon,
9+
ArrowLeftIcon
10+
} from '@phosphor-icons/react';
11+
import Seo from '../components/Seo';
12+
import GenerativeArt from '../components/GenerativeArt';
13+
import LuxeArt from '../components/LuxeArt';
14+
15+
const DesignSelectionPage = () => {
16+
return (
17+
<div className="min-h-screen bg-[#F5F5F0] text-[#1A1A1A] font-sans selection:bg-[#C0B298] selection:text-black flex flex-col">
18+
<Seo
19+
title="Design System | Fezcodex"
20+
description="Choose your design exploration: Brutalist Brufez or Refined Fezluxe."
21+
/>
22+
23+
<div className="max-w-[1400px] mx-auto px-6 md:px-12 py-24 flex-1 flex flex-col">
24+
25+
<header className="mb-24 pt-12 border-b border-black/10 pb-12 text-center md:text-left">
26+
<Link to="/" className="inline-flex items-center gap-2 mb-8 font-outfit text-xs uppercase tracking-widest text-[#1A1A1A]/40 hover:text-[#8D4004] transition-colors">
27+
<ArrowLeftIcon /> Back to Root
28+
</Link>
29+
<h1 className="font-playfairDisplay text-7xl md:text-9xl text-[#1A1A1A] mb-6">
30+
Aesthetics
31+
</h1>
32+
<p className="font-outfit text-sm text-[#1A1A1A]/60 max-w-lg leading-relaxed">
33+
Explore the visual foundations of Fezcodex. Choose between raw systemic brutalism or refined architectural elegance.
34+
</p>
35+
</header>
36+
37+
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-24 flex-1">
38+
39+
{/* BRUFEZ CARD */}
40+
<Link to="/design/brufez" className="group block relative">
41+
<motion.div
42+
whileHover={{ y: -10 }}
43+
className="h-full bg-[#050505] border border-white/5 p-12 flex flex-col justify-between rounded-sm overflow-hidden shadow-2xl transition-all duration-500"
44+
>
45+
<div className="absolute inset-0 opacity-[0.05] pointer-events-none group-hover:opacity-[0.1] transition-opacity">
46+
<GenerativeArt seed="brufez" className="w-full h-full grayscale" />
47+
</div>
48+
49+
<div className="space-y-8 relative z-10">
50+
<div className="w-16 h-16 flex items-center justify-center bg-white/5 border border-white/10 text-[#10B981] rounded-sm group-hover:bg-[#10B981] group-hover:text-black transition-colors">
51+
<BugIcon size={32} weight="fill" />
52+
</div>
53+
<div className="space-y-4">
54+
<h2 className="text-5xl font-black text-white uppercase tracking-tighter leading-none">
55+
Brufez
56+
</h2>
57+
<p className="font-mono text-xs text-gray-500 uppercase tracking-widest leading-relaxed">
58+
Systemic transparency. Celebrated structural logic, 1PX borders, and high-frequency contrast.
59+
</p>
60+
</div>
61+
</div>
62+
63+
<div className="mt-12 pt-8 border-t border-white/10 flex justify-between items-center relative z-10">
64+
<span className="font-mono text-[10px] uppercase tracking-[0.3em] text-gray-600 group-hover:text-white transition-colors">
65+
Launch_Spec
66+
</span>
67+
<ArrowRightIcon className="text-gray-600 group-hover:text-[#10B981] group-hover:translate-x-2 transition-all" size={24} />
68+
</div>
69+
</motion.div>
70+
</Link>
71+
72+
{/* FEZLUXE CARD */}
73+
<Link to="/design/fezluxe" className="group block relative">
74+
<motion.div
75+
whileHover={{ y: -10 }}
76+
className="h-full bg-white border border-black/5 p-12 flex flex-col justify-between rounded-sm overflow-hidden shadow-xl transition-all duration-500"
77+
>
78+
<div className="absolute inset-0 opacity-[0.03] pointer-events-none group-hover:opacity-[0.08] transition-opacity">
79+
<LuxeArt seed="fezluxe" className="w-full h-full mix-blend-multiply" />
80+
</div>
81+
82+
<div className="space-y-8 relative z-10">
83+
<div className="w-16 h-16 flex items-center justify-center bg-[#F5F5F0] text-[#8D4004] rounded-full shadow-sm group-hover:bg-[#1A1A1A] group-hover:text-white transition-all duration-500">
84+
<SparkleIcon size={32} weight="light" />
85+
</div>
86+
<div className="space-y-4">
87+
<h2 className="text-5xl font-playfairDisplay italic text-[#1A1A1A] leading-none">
88+
Fezluxe
89+
</h2>
90+
<p className="font-outfit text-sm text-black/40 italic leading-relaxed">
91+
Architectural elegance. Generous white space, soft depth, and sophisticated typographic hierarchy.
92+
</p>
93+
</div>
94+
</div>
95+
96+
<div className="mt-12 pt-8 border-t border-black/5 flex justify-between items-center relative z-10">
97+
<span className="font-outfit text-[10px] uppercase tracking-[0.3em] text-black/30 group-hover:text-[#8D4004] transition-colors">
98+
Explore Archive
99+
</span>
100+
<ArrowRightIcon className="text-black/20 group-hover:text-[#8D4004] group-hover:translate-x-2 transition-all" size={24} />
101+
</div>
102+
</motion.div>
103+
</Link>
104+
105+
</div>
106+
107+
<footer className="mt-24 pt-12 border-t border-black/10 flex flex-col md:flex-row justify-between items-center gap-6 text-black/30 font-outfit text-[10px] uppercase tracking-[0.3em]">
108+
<div className="flex items-center gap-2">
109+
<LayoutIcon size={14} />
110+
<span>Dual Theme Protocol Alpha</span>
111+
</div>
112+
<span>Fezcodex Studio — 2026</span>
113+
</footer>
114+
115+
</div>
116+
</div>
117+
);
118+
};
119+
120+
export default DesignSelectionPage;

0 commit comments

Comments
 (0)