Skip to content

feat: Revamp homepage with pulp noir design (Issue #293) #371

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

Closed
diksha78dev wants to merge 5 commits into from
Closed

feat: Revamp homepage with pulp noir design (Issue #293) #371

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
64ddafc
feat: Revamp homepage with pulp noir design (Issue #293)
diksha78dev Feb 14, 2026
45f8bdf
fix: address CodeRabbit review comments (PR #371)
diksha78dev Feb 14, 2026
e19e817
chore: resolve remaining CodeRabbit accessibility and token refinements
diksha78dev Feb 14, 2026
3e5c570
refactor: finalize UX, navigation, and background performance refinem…
diksha78dev Feb 16, 2026
896837c
Revamp homepage and integrate wallet provider
diksha78dev Feb 17, 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
224 changes: 96 additions & 128 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,62 @@
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Big+Shoulders+Display:wght@700;900&family=Roboto+Condensed:wght@400;700&family=Source+Sans+Pro:wght@400;600;700&display=swap');
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
--background: #ffffff;
--foreground: #000000;
/* Pulp Noir Theme - Forced for entire site */
--background: #050505;
--foreground: #E5E5E5;

--card: #ffffff;
--card-foreground: #000000;
--card: #0a0a0a;
--card-foreground: #E5E5E5;

--popover: #ffffff;
--popover-foreground: #000000;
--popover: #0a0a0a;
--popover-foreground: #E5E5E5;

/* AA Compliant Pink (Contrast ~4.5:1 against white) */
--primary: #d60055;
/* Hot Pink - Gen-Z Fave */
--primary-foreground: #ffffff;
/* Pulp Noir Primary Color */
--primary: #8B0000;
--primary-foreground: #E5E5E5;

--secondary: #00ffff;
/* Cyan - Electric Vibes */
--secondary-foreground: #000000;
--secondary: #00cccc;
--secondary-foreground: #050505;

--muted: #f5f5f5;
--muted-foreground: #000000;
--muted: #1a1a1a;
--muted-foreground: #999999;

--accent: #7b2cbf;
/* Purple - Aesthetic */
--accent-foreground: #ffffff;
--accent: #8B0000;
--accent-foreground: #E5E5E5;

--destructive: #ff0000;
--destructive-foreground: #ffffff;
--destructive: #ef4444;
--destructive-foreground: #050505;

--border: #000000;
--input: #ffffff;
--ring: #ff0066;
--border: #1a1a1a;
--input: #0a0a0a;
--ring: #8B0000;

--radius: 0px;
/* Sharp corners for comic look */

/* Pulp Noir Font Stack */
--font-display: 'Permanent Marker', cursive;
--font-impact: 'Big Shoulders Display', sans-serif;
--font-subheading: 'Roboto Condensed', sans-serif;
--font-body: 'Source Sans Pro', sans-serif;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
--font-comic: 'Comic Neue', cursive;

/* Pulp Noir Color Palette */
--color-pulp-black: #050505;
--color-pulp-pure: #E5E5E5;
--color-pulp-dark: #0a0a0a;
--color-pulp-shadow: #1a0000;

/* Gen-Z Accent Colors */
--color-fire: #ff6600;
--color-vibe: #00ff88;
--color-slay: #ff0066;
--color-lowkey: #9d4edd;

--shadow-color: #000000;
}

/* Dark Mode Variables */
.dark {
--background: #0f172a;
--foreground: #f8fafc;

--card: #1e293b;
--card-foreground: #f8fafc;

--popover: #1e293b;
--popover-foreground: #f8fafc;

--primary: #ff0066;
--primary-foreground: #ffffff;

--secondary: #00cccc;
--secondary-foreground: #ffffff;

--muted: #334155;
--muted-foreground: #cbd5e1;

--accent: #9d4edd;
--accent-foreground: #ffffff;

--destructive: #ef4444;
--destructive-foreground: #f8fafc;

--border: #334155;
--input: #1e293b;
--ring: #ff0066;

--shadow-color: #f8fafc;
--shadow-color: #E5E5E5;
}

@layer base {
Expand All @@ -90,18 +65,17 @@
}

html {
font-family: var(--font-comic);
font-family: var(--font-body);
scroll-behavior: smooth;
/* Smooth scrolling */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
@apply bg-background text-foreground;
font-family: var(--font-comic);
font-family: var(--font-body);
background-color: #050505;
color: #E5E5E5;
overflow-x: hidden;
/* Prevent horizontal scroll */
position: relative;
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

Expand All @@ -111,15 +85,18 @@
h4,
h5,
h6 {
font-family: var(--font-comic);
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
/* Gen-Z comic style - bold outline text */
color: var(--foreground);
text-shadow: 2px 2px 0px var(--background);
color: inherit;
line-height: 1.2;
}

::selection {
background-color: #8B0000;
color: #E5E5E5;
}

/* Gen-Z comic text styles */
p,
Expand Down Expand Up @@ -159,66 +136,64 @@
textarea {
transition: all 0.2s ease-in-out;
}
:root {
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--primary: 24 9.8% 10%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--ring: 20 14.3% 4.1%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 20 14.3% 4.1%;
--foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--card-foreground: 60 9.1% 97.8%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--primary: 60 9.1% 97.8%;
--primary-foreground: 24 9.8% 10%;
--secondary: 12 6.5% 15.1%;
--secondary-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 60 9.1% 97.8%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 12 6.5% 15.1%;
--input: 12 6.5% 15.1%;
--ring: 24 5.7% 82.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}

@layer components {
.comic-container {
@apply bg-card border-4 border-foreground p-6 shadow-[8px_8px_0px_0px_var(--foreground)];
}

/* Pulp Noir - Action Button (from code.html) */
.action-button {
display: inline-block;
background-color: var(--primary);
color: white;
font-size: 2.25rem;
padding: 1rem 3rem;
border: 2px solid #050505;
transition: all 0.2s ease-in-out;
transform: scale(1);
box-shadow: 6px 6px 0px #000;
text-transform: uppercase;
cursor: pointer;
font-family: 'Permanent Marker', cursive;
font-weight: bold;
}

.action-button:hover {
background-color: white;
color: black;
transform: scale(1.05);
}

/* Pulp Noir - Comic Card (from code.html) */
.comic-card {
background-color: #E5E5E5;
color: #050505;
padding: 2rem;
border-right: 8px solid #050505;
border-bottom: 8px solid #050505;
position: relative;
box-shadow: 4px 4px 0px #8B0000;
}

.comic-card:hover {
transform: translateY(-4px);
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated

/* Pulp Noir - Halftone Overlay */
.halftone {
background-image: radial-gradient(circle, #000 0.5px, transparent 0.5px);
background-size: 4px 4px;
@apply opacity-30 absolute inset-0 pointer-events-none;
}

/* Pulp Noir - Noir Overlay */
.noir-overlay {
background: linear-gradient(45deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(139,0,0,0.2) 100%);
@apply absolute inset-0 pointer-events-none;
}

.comic-button {
@apply px-6 py-3 bg-primary text-white font-bold border-4 border-foreground shadow-[4px_4px_0px_0px_var(--foreground)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_var(--foreground)] transition-all active:translate-x-[4px] active:translate-y-[4px] active:shadow-none uppercase tracking-wider;
will-change: transform, box-shadow;
Expand All @@ -238,13 +213,6 @@
will-change: box-shadow;
}

.comic-card {
@apply bg-card border-4 border-foreground p-4 shadow-[6px_6px_0px_0px_var(--foreground)] hover:-translate-y-1 hover:shadow-[8px_8px_0px_0px_var(--foreground)] transition-all;
will-change: transform, box-shadow;
transform: translateZ(0);
/* GPU acceleration */
}

.comic-badge {
@apply px-3 py-1 bg-accent text-accent-foreground font-bold border-2 border-foreground text-xs uppercase shadow-[2px_2px_0px_0px_var(--foreground)];
}
Expand Down
Loading
Loading