Skip to content

Commit c96d8ce

Browse files
pacupacu
authored
Merge pull request #40 from zecdev/redesign/amber-theme
Amber ZecDev redesign: theme + landing page
2 parents a96c3c4 + dc3bc50 commit c96d8ce

8 files changed

Lines changed: 735 additions & 82 deletions

File tree

‎public/zecdev-logo.png‎

42 KB
Loading

‎src/app/home.css‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
/* ============================================================================
2+
ZecDev — landing page ("/") styles. Companion to zecdev.css; matches the
3+
design prototype (ZecDev Site.dc.html) hero / cards / foreword.
4+
============================================================================ */
5+
6+
:root {
7+
--zd-border-strong: #D8D2C2;
8+
--zd-faint: #9A9484;
9+
--zd-teal-soft: rgba(14, 148, 136, 0.12);
10+
--zd-coral-soft: rgba(220, 82, 54, 0.12);
11+
--zd-shadow: 0 1px 2px rgba(23, 21, 15, 0.04), 0 8px 24px rgba(23, 21, 15, 0.06);
12+
}
13+
html.dark {
14+
--zd-border-strong: #3C3A2D;
15+
--zd-faint: #756F60;
16+
--zd-teal-soft: rgba(45, 195, 180, 0.12);
17+
--zd-coral-soft: rgba(240, 113, 90, 0.12);
18+
--zd-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
19+
}
20+
21+
.zd-home {
22+
font-family: var(--font-sans), system-ui, sans-serif;
23+
line-height: 1.6;
24+
}
25+
/* undo the docs-prose link underline inside the landing (zecdev.css) */
26+
article .zd-home a {
27+
border-bottom: none;
28+
color: inherit;
29+
}
30+
/* let the landing bleed to the viewport edges and end at the footer */
31+
article:has(.zd-home) {
32+
padding: 0 !important;
33+
min-height: 0 !important;
34+
}
35+
article:has(.zd-home) > .x\:mt-16 {
36+
display: none;
37+
}
38+
39+
/* ---- footer (site-wide): warm surface like the prototype ------------------ */
40+
div[class*='x:bg-gray-100']:has(footer) {
41+
background: var(--zec-surface-2) !important;
42+
border-top: 1px solid var(--zec-border);
43+
}
44+
/* the theme switch lives in the navbar; drop Nextra's strip above the footer */
45+
div[class*='x:bg-gray-100']:has(footer) > div:has(> button[title='Change theme']),
46+
div[class*='x:bg-gray-100']:has(footer) > hr.nextra-border {
47+
display: none;
48+
}
49+
footer {
50+
color: var(--zec-muted) !important;
51+
}
52+
footer a {
53+
color: var(--zec-muted);
54+
text-decoration: none;
55+
transition: color 0.15s ease;
56+
}
57+
footer a:hover {
58+
color: var(--zec-amber-strong);
59+
}
60+
.zd-home .zd-amber { color: var(--zec-amber-strong); }
61+
62+
/* ---- hero ---------------------------------------------------------------- */
63+
.zd-hero {
64+
position: relative;
65+
overflow: hidden;
66+
border-bottom: 1px solid var(--zec-border);
67+
}
68+
.zd-hero-circuit {
69+
position: absolute;
70+
inset: 0;
71+
width: 100%;
72+
height: 100%;
73+
opacity: 0.5;
74+
pointer-events: none;
75+
}
76+
.zd-hero-inner {
77+
position: relative;
78+
max-width: 1120px;
79+
margin: 0 auto;
80+
padding: 96px 24px 88px;
81+
text-align: center;
82+
}
83+
.zd-badge {
84+
display: inline-flex;
85+
align-items: center;
86+
gap: 8px;
87+
padding: 5px 13px;
88+
border: 1px solid var(--zec-border);
89+
border-radius: 100px;
90+
background: var(--zec-surface);
91+
font-family: var(--font-mono), monospace;
92+
font-size: 12.5px;
93+
color: var(--zec-muted);
94+
margin-bottom: 28px;
95+
}
96+
.zd-badge-dot {
97+
width: 7px;
98+
height: 7px;
99+
border-radius: 50%;
100+
background: var(--zec-teal);
101+
}
102+
.zd-hero-title {
103+
font-family: var(--font-display), sans-serif;
104+
font-weight: 700;
105+
font-size: clamp(42px, 6.4vw, 76px);
106+
line-height: 1.02;
107+
letter-spacing: -0.035em;
108+
margin: 0 auto;
109+
max-width: 14ch;
110+
color: var(--zec-text);
111+
}
112+
.zd-hero-sub {
113+
font-size: 19px;
114+
color: var(--zec-muted);
115+
max-width: 60ch;
116+
margin: 24px auto 0;
117+
line-height: 1.55;
118+
}
119+
.zd-hero-ctas {
120+
display: flex;
121+
gap: 14px;
122+
justify-content: center;
123+
flex-wrap: wrap;
124+
margin-top: 38px;
125+
}
126+
.zd-cta-primary {
127+
display: inline-flex;
128+
align-items: center;
129+
gap: 8px;
130+
height: 50px;
131+
padding: 0 26px;
132+
border-radius: 11px;
133+
background: var(--zec-amber);
134+
color: #17150F !important;
135+
font-weight: 600;
136+
font-size: 15.5px;
137+
text-decoration: none !important;
138+
box-shadow: 0 6px 18px rgba(240, 180, 41, 0.35);
139+
transition: filter 0.15s ease, transform 0.15s ease;
140+
}
141+
.zd-cta-primary:hover {
142+
filter: brightness(1.05);
143+
transform: translateY(-1px);
144+
}
145+
.zd-cta-secondary {
146+
display: inline-flex;
147+
align-items: center;
148+
gap: 8px;
149+
height: 50px;
150+
padding: 0 24px;
151+
border-radius: 11px;
152+
background: var(--zec-surface);
153+
border: 1px solid var(--zd-border-strong);
154+
color: var(--zec-text) !important;
155+
font-weight: 600;
156+
font-size: 15.5px;
157+
text-decoration: none !important;
158+
transition: border-color 0.15s ease, color 0.15s ease;
159+
}
160+
.zd-cta-secondary:hover {
161+
border-color: var(--zec-amber);
162+
color: var(--zec-amber-strong) !important;
163+
}
164+
165+
/* ---- start-here cards ---------------------------------------------------- */
166+
.zd-start {
167+
max-width: 1120px;
168+
margin: 0 auto;
169+
padding: 72px 24px;
170+
}
171+
.zd-start-head {
172+
display: flex;
173+
align-items: baseline;
174+
justify-content: space-between;
175+
gap: 16px;
176+
margin-bottom: 28px;
177+
flex-wrap: wrap;
178+
}
179+
.zd-start-head h2 {
180+
font-family: var(--font-display), sans-serif;
181+
font-weight: 600;
182+
font-size: 30px;
183+
letter-spacing: -0.02em;
184+
margin: 0;
185+
color: var(--zec-text);
186+
}
187+
.zd-start-path {
188+
font-family: var(--font-mono), monospace;
189+
font-size: 13px;
190+
color: var(--zd-faint);
191+
}
192+
.zd-cards {
193+
display: grid;
194+
grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
195+
gap: 18px;
196+
}
197+
.zd-card {
198+
display: block;
199+
padding: 26px;
200+
border: 1px solid var(--zec-border);
201+
border-radius: 16px;
202+
background: var(--zec-surface);
203+
box-shadow: var(--zd-shadow);
204+
position: relative;
205+
overflow: hidden;
206+
color: inherit !important;
207+
text-decoration: none !important;
208+
transition: border-color 0.15s ease, transform 0.15s ease;
209+
}
210+
.zd-card:hover { transform: translateY(-3px); }
211+
.zd-card-amber:hover { border-color: var(--zec-amber); }
212+
.zd-card-teal:hover { border-color: var(--zec-teal); }
213+
.zd-card-coral:hover { border-color: var(--zec-coral); }
214+
.zd-card-plain:hover { border-color: var(--zd-border-strong); }
215+
.zd-card-icon {
216+
width: 44px;
217+
height: 44px;
218+
border-radius: 11px;
219+
display: flex;
220+
align-items: center;
221+
justify-content: center;
222+
margin-bottom: 18px;
223+
}
224+
.zd-card h3 {
225+
font-family: var(--font-display), sans-serif;
226+
font-weight: 600;
227+
font-size: 19px;
228+
margin: 0 0 7px;
229+
color: var(--zec-text);
230+
}
231+
.zd-card p {
232+
margin: 0;
233+
color: var(--zec-muted);
234+
font-size: 14.5px;
235+
line-height: 1.5;
236+
}
237+
238+
/* ---- foreword ------------------------------------------------------------ */
239+
.zd-foreword {
240+
border-top: 1px solid var(--zec-border);
241+
background: var(--zec-surface-2);
242+
}
243+
.zd-foreword-inner {
244+
max-width: 820px;
245+
margin: 0 auto;
246+
padding: 72px 24px;
247+
}
248+
.zd-foreword-label {
249+
font-family: var(--font-mono), monospace;
250+
font-size: 12.5px;
251+
letter-spacing: 0.08em;
252+
text-transform: uppercase;
253+
color: var(--zec-amber-strong);
254+
margin-bottom: 16px;
255+
}
256+
.zd-foreword blockquote {
257+
margin: 0;
258+
font-family: var(--font-display), sans-serif;
259+
font-weight: 500;
260+
font-size: 23px;
261+
line-height: 1.5;
262+
letter-spacing: -0.015em;
263+
color: var(--zec-text);
264+
border-left: 3px solid var(--zec-amber);
265+
padding-left: 24px;
266+
font-style: normal;
267+
}
268+
.zd-foreword-credit {
269+
margin-top: 22px;
270+
font-size: 14px;
271+
color: var(--zd-faint);
272+
}
273+
274+
/* ---- navbar links (Docs / Dashboard / Community) -------------------------- */
275+
.zd-nav-link {
276+
padding: 7px 13px;
277+
border-radius: 9px;
278+
font-size: 14.5px;
279+
font-weight: 500;
280+
color: var(--zec-muted);
281+
text-decoration: none;
282+
white-space: nowrap;
283+
}
284+
.zd-nav-link:hover {
285+
color: var(--zec-amber-strong);
286+
background: var(--zec-amber-soft);
287+
}
288+
@media (max-width: 767px) {
289+
.zd-nav-link { display: none; }
290+
}

‎src/app/layout.jsx‎

Lines changed: 60 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,85 @@
1-
import { Footer, Layout, Navbar } from 'nextra-theme-docs'
2-
import { Banner, Head } from 'nextra/components'
1+
// ── src/app/layout.jsx ── drop-in replacement (matches zecdev.github.io @ main, Nextra 4.6.1)
2+
import { Footer, Layout, Navbar, ThemeSwitch } from 'nextra-theme-docs'
3+
import { Head } from 'nextra/components'
34
import { getPageMap } from 'nextra/page-map'
5+
import { Space_Grotesk, IBM_Plex_Sans, IBM_Plex_Mono } from 'next/font/google'
46
import 'nextra-theme-docs/style.css'
5-
6-
export const metadata = {
7-
// Define your metadata here
8-
// For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
9-
}
10-
7+
import './zecdev.css'
8+
import './home.css'
9+
10+
const grotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-display', weight: ['500', '600', '700'] })
11+
const plex = IBM_Plex_Sans({ subsets: ['latin'], variable: '--font-sans', weight: ['400', '500', '600', '700'] })
12+
const mono = IBM_Plex_Mono({ subsets: ['latin'], variable: '--font-mono', weight: ['400', '500', '600'] })
13+
14+
export const metadata = {}
15+
1116
const navbar = (
1217
<Navbar
13-
logo={<b>ZecDev</b>}
14-
// ... Your additional navbar options
15-
/>
18+
logo={
19+
<span style={{ display: 'flex', alignItems: 'center', gap: '11px' }}>
20+
<img src="/zecdev-logo.png" alt="" width={32} height={32} />
21+
<b style={{ fontFamily: 'var(--font-display)', fontSize: '1.25rem', letterSpacing: '-0.02em' }}>ZecDev</b>
22+
</span>
23+
}
24+
projectLink="https://github.com/zecdev"
25+
>
26+
<a href="/welcome" className="zd-nav-link">Docs</a>
27+
<a href="/zcash-z3/dashboard" className="zd-nav-link">Dashboard</a>
28+
<a href="/community" className="zd-nav-link">Community</a>
29+
<ThemeSwitch lite className="zd-theme-switch" />
30+
</Navbar>
31+
)
32+
33+
const footer = (
34+
<Footer>
35+
<div
36+
style={{
37+
display: 'flex',
38+
alignItems: 'center',
39+
justifyContent: 'space-between',
40+
gap: 20,
41+
flexWrap: 'wrap',
42+
width: '100%'
43+
}}
44+
>
45+
<span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
46+
<img src="/zecdev-logo.png" alt="" width={26} height={26} />
47+
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 13 }}>MIT {new Date().getFullYear()} © ZecDev</span>
48+
</span>
49+
<span style={{ display: 'flex', gap: 22, fontSize: 13.5 }}>
50+
<a href="https://z.cash" target="_blank" rel="noreferrer">z.cash</a>
51+
<a href="https://zechub.wiki" target="_blank" rel="noreferrer">ZecHub</a>
52+
<a href="https://github.com/zecdev" target="_blank" rel="noreferrer">GitHub</a>
53+
</span>
54+
</div>
55+
</Footer>
1656
)
17-
const footer = <Footer>MIT {new Date().getFullYear()} © ZecDev.</Footer>
18-
57+
1958
export default async function RootLayout({ children }) {
2059
return (
2160
<html
22-
// Not required, but good for SEO
2361
lang="en"
24-
// Required to be set
2562
dir="ltr"
26-
// Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
2763
suppressHydrationWarning
64+
className={`${grotesk.variable} ${plex.variable} ${mono.variable}`}
2865
>
2966
<Head
30-
// ... Your additional head options
31-
>
32-
{/* Your additional tags should be passed as `children` of `<Head>` element */}
33-
</Head>
67+
color={{ hue: 41, saturation: 87, lightness: { light: 42, dark: 60 } }}
68+
backgroundColor={{ light: 'rgb(251,250,246)', dark: 'rgb(20,19,15)' }}
69+
/>
3470
<body>
3571
<Layout
3672
navbar={navbar}
3773
pageMap={await getPageMap()}
3874
docsRepositoryBase="https://github.com/zecdev/zecdev.github.io/tree/main/src/"
3975
footer={footer}
40-
// ... Your additional layout options
76+
editLink="Edit this page"
77+
feedback={{ content: 'Question? Give us feedback' }}
78+
sidebar={{ defaultMenuCollapseLevel: 1 }}
4179
>
4280
{children}
4381
</Layout>
4482
</body>
4583
</html>
4684
)
47-
}
85+
}

0 commit comments

Comments
 (0)