Skip to content

feat(landing): redesign home page — dark, sleek, Lighthouse 100 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shivamsn97 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(landing): redesign home page — dark, sleek, Lighthouse 100 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
897cacf
feat(landing): redesign home page — dark, sleek, Lighthouse 100
shivamsn97 Apr 17, 2026
117be63
fix(theme,a11y): repair SSR theme rendering and hit Lighthouse 100 ev…
shivamsn97 Apr 18, 2026
6d8665b
chore(fonts): drop Google Fonts from sub-pages for visual consistency
shivamsn97 Apr 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 140 additions & 75 deletions pages/benchmarks.pyxl
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion pages/components/code-highlighter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ export function tokenizeBlock(code, lang) {
export const HIGHLIGHT_CSS = `
.sh-kw { color: #c084fc; }
.sh-str { color: #6ee7b7; }
.sh-cmt { color: #71717a; font-style: italic; }
.sh-cmt { color: #a1a1aa; font-style: italic; }
.sh-dec { color: #facc15; }
.sh-fn { color: #60a5fa; }
.sh-tag { color: #71717a; }
Expand Down
28 changes: 6 additions & 22 deletions pages/components/not-found-content.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function GlitchText({ text }) {
{text.split('').map((char, i) => (
<span
key={i}
className={i === glitchIndex ? 'text-emerald-400 inline-block translate-y-[1px]' : ''}
className={i === glitchIndex ? 'text-emerald-700 dark:text-emerald-400 inline-block translate-y-[1px]' : ''}
>
{i === glitchIndex ? String.fromCharCode(char.charCodeAt(0) + Math.floor(Math.random() * 3)) : char}
</span>
Expand Down Expand Up @@ -175,31 +175,21 @@ export default function NotFoundContent({ backHref = '/', backLabel = 'Back to h
Page not found
</h1>

<p className={`text-base sm:text-lg mb-2 min-h-[2em] transition-all duration-300 ${
theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'
}`}>
<p className={`text-base sm:text-lg mb-2 min-h-[2em] transition-all duration-300 text-zinc-600 dark:text-zinc-400`}>
{phrase}
</p>

<button
onClick={shufflePhrase}
className={`text-xs mb-8 transition ${
theme === 'dark'
? 'text-zinc-600 hover:text-zinc-400'
: 'text-zinc-400 hover:text-zinc-600'
}`}
className={`text-xs mb-8 transition text-zinc-400 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-400`}
>
{counter > 4 ? "You really like clicking this, huh?" : "Click for another one"}
</button>

<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-4">
<a
href={backHref}
className={`group inline-flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
theme === 'dark'
? 'bg-white text-black hover:bg-zinc-200'
: 'bg-zinc-900 text-white hover:bg-zinc-700'
}`}
className={`group inline-flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition bg-zinc-900 text-white hover:bg-zinc-700 dark:bg-white dark:text-black dark:hover:bg-zinc-200`}
>
<svg className="h-4 w-4 transition group-hover:-translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
<path strokeLinecap="round" strokeLinejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
Expand All @@ -210,19 +200,13 @@ export default function NotFoundContent({ backHref = '/', backLabel = 'Back to h
href="https://github.com/pyxle-framework/pyxle"
target="_blank"
rel="noreferrer"
className={`inline-flex items-center gap-2 rounded-xl border px-6 py-3 text-sm font-semibold transition ${
theme === 'dark'
? 'border-white/10 text-white hover:bg-white/5'
: 'border-zinc-300 text-zinc-900 hover:bg-zinc-50'
}`}
className={`inline-flex items-center gap-2 rounded-xl border px-6 py-3 text-sm font-semibold transition border-zinc-300 text-zinc-900 hover:bg-zinc-50 dark:border-white/10 dark:text-white dark:hover:bg-white/5`}
>
Report an issue
</a>
</div>

<div className={`mt-16 font-mono text-xs space-y-1 ${
theme === 'dark' ? 'text-zinc-700' : 'text-zinc-300'
}`}>
<div className={`mt-16 font-mono text-xs space-y-1 text-zinc-300 dark:text-zinc-500`}>
<p>GET {typeof window !== 'undefined' ? window.location.pathname : '/unknown'} HTTP/1.1</p>
<p>Status: 404 Not Found</p>
<p>X-Powered-By: Pyxle</p>
Expand Down
27 changes: 11 additions & 16 deletions pages/components/theme-toggle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,21 @@ import React from 'react';
import { useTheme } from '../layout.jsx';

export function ThemeToggle() {
const { theme, toggle } = useTheme();
const { toggle } = useTheme();
return (
<button
type="button"
onClick={toggle}
className={`rounded-lg border p-2 transition ${
theme === 'dark'
? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white'
: 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900'
}`}
aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
className="rounded-lg border p-2 transition border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white"
aria-label="Toggle light and dark theme"
title="Toggle theme"
>
{theme === 'dark' ? (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
</svg>
) : (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
</svg>
)}
<svg className="h-4 w-4 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
</svg>
<svg className="h-4 w-4 block dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
</svg>
</button>
);
}
Loading